@netlify/spark-ui 0.0.12 → 0.0.14

package/dist/assets/KeyboardKey.css

@@ -0,0 +1 @@
+.n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}

package/dist/assets/SearchHeading.css

@@ -0,0 +1 @@
+.n-search-heading{padding-inline:1rem;margin-block:var(--space-xs);font-size:var(--step--2);font-weight:var(--font-regular);color:var(--color-text-3)}

package/dist/assets/SearchModal.css

@@ -0,0 +1 @@
+.n-search-modal{--n-search-padding-inline: .5em;--n-search-color-text: var(--color-text-1, currentColor);--n-search-color-text-secondary: var(--color-text-2, currentColor);--n-search-color-bg: var(--color-bg-1);--n-search-color-bg-2: var(--color-bg-2);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 8px;--n-search-max-w: 600px;--n-search-text-highlight: var(--color-text-accent)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin-inline:auto}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);min-height:470px;background-color:var(--n-search-color-bg);border-radius:var(--n-search-border-radius);overflow:hidden}.n-search-bar{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;background:var(--n-search-color-bg);border-bottom:1px solid var(--n-search-color-border)}.n-search-input-wrapper{all:unset;display:flex;width:100%}.n-search-input{display:inline-flex;box-sizing:border-box;background:var(--n-search-color-bg);inline-size:100%;padding-block:.75rem;padding-inline:var(--n-search-padding-inline);flex:1;border:none;outline:none;font-size:1rem}.n-search-input::placeholder{color:var(--n-search-color-text)}.n-search-label{display:flex;padding-inline:var(--n-search-padding-inline)}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:1em;height:auto;color:var(--n-search-color-text-secondary)}.icon{display:flex;width:1em;height:auto;height:1em}.icon [data-icon=caretRight]{width:10px;color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--font-medium);font-size:1.1em}.n-search-window{height:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin-block:0;background:var(--n-search-color-bg)}.n-results-list,ul[role=list]{list-style:none;padding:0}.n-results-list-item{border-bottom:1px solid var(--color-bg-3)}.n-results-list-item:first-of-type{border-top:1px solid var(--color-bg-3)}.n-result-link{all:unset;display:flex;flex-wrap:wrap;row-gap:var(--space-3xs);padding:var(--n-result-padding-block, 1em) var(--n-result-padding-inline, 1rem);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-result-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-result-header{display:flex;justify-content:space-between;width:100%;align-items:center}.n-result-title{display:flex;align-items:center;gap:var(--space-s);font-weight:var(--font-semibold);color:var(--color-text-2)}.n-result-excerpt{color:var(--color-text-3);line-height:1.3;font-size:.9em;padding-inline-start:var(--space-l)}.n-search-footer{border-top:1px solid var(--n-search-color-border);padding:var(--space-2xs) var(--space-s);background:var(--color-bg-2);display:flex;gap:var(--space-m)}.n-search-footer-tip{--n-key-text-color: var(--n-search-color-text-secondary);color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--step--1)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}@keyframes openSearch{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.3}to{opacity:0;transform:translateY(20px) scale(.9)}}.n-search-modal::backdrop{animation:closeSearchBackdrop .2s forwards}.n-search-modal[open]::backdrop{animation:openSearchBackdrop .2s forwards}@keyframes openSearchBackdrop{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}@keyframes closeSearchBackdrop{0%{opacity:1;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}50%{opacity:.3}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}

package/dist/assets/SearchToggle.css

@@ -1 +1 @@
-.search-toggle{all:unset;outline:revert;cursor:pointer;line-height:normal;padding:var(--space-2xs);transition:opacity .3s ease-in-out;max-width:max-content}.search-toggle:disabled{opacity:.3}
+.n-search-toggle{all:unset;outline:revert;cursor:pointer;line-height:normal;padding:var(--space-2xs);transition:opacity .3s ease-in-out;max-width:max-content}.n-search-toggle:disabled{opacity:.3}

package/dist/{compat.module-DWiGVdMB.js → chunks/compat.module.BPxt-oTe.js}

@@ -1,5 +1,5 @@
 import { Component as f, options as a, createElement as d, Fragment as h, toChildArray as v } from "preact";
-import "./hooks.module-ExpuRnbo.js";
+import "./hooks.module.ExpuRnbo.js";
 function C(e, t) {
   for (var r in t) e[r] = t[r];
   return e;
@@ -38,7 +38,7 @@ var g = a.unmount;
 function N(e, t, r) {
   return e && (e.__c && e.__c.__H && (e.__c.__H.__.forEach(function(o) {
     typeof o.__c == "function" && o.__c();
-  }), e.__c.__H = null), (e = C({}, e)).__c != null && (e.__c.__P === r && (e.__c.__P = t), e.__c = null), e.__k = e.__k && e.__k.map(function(o) {
+  }), e.__c.__H = null), (e = C({}, e)).__c != null && (e.__c.__P === r && (e.__c.__P = t), e.__c.__e = !0, e.__c = null), e.__k = e.__k && e.__k.map(function(o) {
     return N(o, t, r);
   })), e;
 }

package/dist/components/index.d.ts

@@ -1,9 +1,9 @@
-export { default as KeyboardKey } from './preact/KeyboardKey';
-export { default as Modal } from './preact/Modal';
+export { default as KeyboardKey } from './preact/KeyboardKey/KeyboardKey';
+export { default as Modal } from './preact/Modal/Modal';
 export { default as Icon } from './preact/Icon';
 export { default as SearchLink } from './preact/SearchModal/components/SearchLink';
-export { default as SearchHeading } from './preact/SearchModal/components/SearchHeading';
+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';
+export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
 export { default as Tabs } from './Tabs.astro';
 export { type IconName } from './preact/Icon';

package/dist/components/preact/Icon/index.js

@@ -1,4 +1,4 @@
-import { u as C } from "../../../jsxRuntime.module-Bzuv3cXw.js";
+import { u as C } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import { Fragment as t } from "preact";
 function u(L) {
   const r = Z[L.name];

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

@@ -0,0 +1,5 @@
+interface Props {
+    keyNames: string[];
+}
+declare function KeyboardKey(props: Props): import("preact").JSX.Element;
+export default KeyboardKey;

package/dist/components/preact/KeyboardKey/KeyboardKey.js

@@ -0,0 +1,7 @@
+import { u as e } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import '../../../assets/KeyboardKey.css';function s(a) {
+  return /* @__PURE__ */ e("span", { class: "n-keyboard-key", children: a.keyNames.map((r, n) => /* @__PURE__ */ e("span", { children: r }, n)) });
+}
+export {
+  s as default
+};

package/dist/components/preact/Modal/{index.js → Modal.js}

@@ -1,5 +1,5 @@
-import { u as l } from "../../../jsxRuntime.module-Bzuv3cXw.js";
-import { D as d } from "../../../compat.module-DWiGVdMB.js";
+import { u as l } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import { D as d } from "../../../chunks/compat.module.BPxt-oTe.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/SearchModal/components/{SearchHeading.d.ts → SearchHeading/SearchHeading.d.ts}

@@ -1,6 +1,6 @@
-import { h, ComponentChildren } from 'preact';
+import { ComponentChildren } from 'preact';
 type SearchHeadingProps = {
     children: ComponentChildren;
 };
-declare const SearchHeading: ({ children }: SearchHeadingProps) => h.JSX.Element;
+declare const SearchHeading: ({ children }: SearchHeadingProps) => import("preact").JSX.Element;
 export default SearchHeading;

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

@@ -0,0 +1,5 @@
+import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import '../../../../../assets/SearchHeading.css';const n = ({ children: a }) => /* @__PURE__ */ e("h2", { class: "n-search-heading", children: a });
+export {
+  n as default
+};

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

@@ -1,8 +1,7 @@
-import { h } from 'preact';
-interface Props extends h.JSX.HTMLAttributes<HTMLInputElement> {
+interface Props {
     setSearchTerm: (term: string) => void;
     placeholder?: string;
     initialValue?: string;
 }
-declare const SearchInput: (props: Props) => h.JSX.Element;
+declare const SearchInput: (props: Props) => import("preact").JSX.Element;
 export default SearchInput;

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

@@ -1,26 +1,26 @@
-import { u as e } from "../../../../jsxRuntime.module-Bzuv3cXw.js";
-import { d as n, y as s } from "../../../../hooks.module-ExpuRnbo.js";
+import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import { d as i, y as s } from "../../../../chunks/hooks.module.ExpuRnbo.js";
 import h from "../../Icon/index.js";
 const m = (a) => {
-  const [c, l] = n(""), r = (i) => {
-    const t = i.target;
-    l(t.value), a.setSearchTerm(t.value);
+  const [t, l] = i(""), c = (r) => {
+    const n = r.target;
+    l(n.value), a.setSearchTerm(n.value);
   };
   return s(() => {
     a.initialValue && l(a.initialValue);
-  }, [a.initialValue, l]), /* @__PURE__ */ e("div", { class: "search-input-wrapper", children: [
-    /* @__PURE__ */ e("label", { class: "search-label", htmlFor: "search", children: [
+  }, [a.initialValue, l]), /* @__PURE__ */ e("div", { class: "n-search-input-wrapper", children: [
+    /* @__PURE__ */ e("label", { class: "n-search-label", htmlFor: "search", children: [
       /* @__PURE__ */ e("span", { class: "visually-hidden", children: "Search" }),
-      /* @__PURE__ */ e("div", { class: "search-icon", children: /* @__PURE__ */ e(h, { name: "search" }) })
+      /* @__PURE__ */ e("div", { class: "n-search-icon", children: /* @__PURE__ */ e(h, { name: "search" }) })
     ] }),
     /* @__PURE__ */ e(
       "input",
       {
-        class: "search-input",
+        class: "n-search-input",
         type: "text",
-        value: c,
+        value: t,
         placeholder: a.placeholder || "Search...",
-        onInput: r
+        onInput: c
       }
     )
   ] });

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

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import { IconName } from '../../Icon';
 export interface Props {
     icon: IconName;
@@ -7,5 +6,5 @@ export interface Props {
     url: string;
     excerpt?: string;
 }
-declare const SearchLink: ({ icon, title, content_type, url, excerpt }: Props) => h.JSX.Element;
+declare const SearchLink: ({ icon, title, url, excerpt }: Props) => import("preact").JSX.Element;
 export default SearchLink;

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

@@ -1,15 +1,15 @@
-import { u as e } from "../../../../jsxRuntime.module-Bzuv3cXw.js";
-import l from "../../Icon/index.js";
-const m = ({ icon: a, title: n, content_type: t, url: s, excerpt: r }) => /* @__PURE__ */ e("a", { className: "result-link", href: s, children: [
-  /* @__PURE__ */ e("div", { className: "result-header", children: [
-    /* @__PURE__ */ e("div", { className: "result-title", children: [
-      a && /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(l, { name: a }) }),
-      /* @__PURE__ */ e("span", { children: n })
+import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import r from "../../Icon/index.js";
+const t = ({ icon: a, title: l, url: s, excerpt: n }) => /* @__PURE__ */ e("a", { className: "n-result-link", href: s, children: [
+  /* @__PURE__ */ e("div", { className: "n-result-header", children: [
+    /* @__PURE__ */ e("div", { className: "n-result-title", children: [
+      a && /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(r, { name: a }) }),
+      /* @__PURE__ */ e("span", { children: l })
     ] }),
-    /* @__PURE__ */ e("div", { className: "icon", children: /* @__PURE__ */ e(l, { name: "caretRight" }) })
+    /* @__PURE__ */ e("div", { className: "icon", children: /* @__PURE__ */ e(r, { name: "caretRight" }) })
   ] }),
-  r && /* @__PURE__ */ e("p", { className: "result-excerpt", dangerouslySetInnerHTML: { __html: r } })
+  n && /* @__PURE__ */ e("p", { className: "n-result-excerpt", dangerouslySetInnerHTML: { __html: n } })
 ] });
 export {
-  m as default
+  t as default
 };

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

@@ -0,0 +1,7 @@
+import { ComponentChildren } from 'preact';
+interface Props {
+    children: ComponentChildren;
+    className: string;
+}
+declare function SearchModal(props: Props): import("preact").JSX.Element;
+export default SearchModal;

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

@@ -0,0 +1,98 @@
+import { u as s } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import { A as h, y as S, d as v } from "../../../../../chunks/hooks.module.ExpuRnbo.js";
+import N from "../../../Modal/Modal.js";
+import f from "../../../KeyboardKey/KeyboardKey.js";
+import O from "../SearchWindow.js";
+import T from "../SearchInput.js";
+import { useSearch as b } from "../../hooks/useSearch.js";
+import { useKeyboardNav as w } from "../../hooks/useKeyboardNav.js";
+import { useSearchHotkeys as E } from "../../hooks/useSearchHotkeys.js";
+import { useSearchParams as g } from "../../hooks/useSearchParams.js";
+import { useSearchToggles as j } from "../../hooks/useSearchToggles.js";
+import '../../../../../assets/SearchModal.css';function x(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var p = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+var d;
+function C() {
+  return d || (d = 1, function(t) {
+    (function() {
+      var a = {}.hasOwnProperty;
+      function n() {
+        for (var e = "", r = 0; r < arguments.length; r++) {
+          var o = arguments[r];
+          o && (e = c(e, i(o)));
+        }
+        return e;
+      }
+      function i(e) {
+        if (typeof e == "string" || typeof e == "number")
+          return e;
+        if (typeof e != "object")
+          return "";
+        if (Array.isArray(e))
+          return n.apply(null, e);
+        if (e.toString !== Object.prototype.toString && !e.toString.toString().includes("[native code]"))
+          return e.toString();
+        var r = "";
+        for (var o in e)
+          a.call(e, o) && e[o] && (r = c(r, o));
+        return r;
+      }
+      function c(e, r) {
+        return r ? e ? e + " " + r : e + r : e;
+      }
+      t.exports ? (n.default = n, t.exports = n) : window.classNames = n;
+    })();
+  }(p)), p.exports;
+}
+var L = C();
+const M = /* @__PURE__ */ x(L);
+function k(t) {
+  const a = h(null);
+  return S(() => {
+    function n(i) {
+      a.current && !a.current.contains(i.target) && t();
+    }
+    return document.addEventListener("mousedown", n), () => {
+      document.removeEventListener("mousedown", n);
+    };
+  }, [t]), a;
+}
+function W(t) {
+  const { children: a, className: n, ...i } = t, { state: c, actions: e } = b(), [r, o] = v(!1), m = () => o(!0), l = () => o(!1), u = h(null), y = k(l);
+  return j(m), g(e.setSearchTerm, m), E(r, m, l), w(u, r, l), S(() => {
+    u.current && (r ? u.current.showModal() : u.current.close());
+  }, [r]), /* @__PURE__ */ s(N, { ref: u, className: M(n, "n-search-modal"), ...i, children: /* @__PURE__ */ s("div", { ref: y, className: "n-search-container", children: [
+    /* @__PURE__ */ s("form", { className: "n-search-bar", children: /* @__PURE__ */ s(T, { setSearchTerm: e.setSearchTerm, initialValue: c.searchTerm }) }),
+    /* @__PURE__ */ s(
+      O,
+      {
+        searchLoading: c.isLoading,
+        searchTerm: c.searchTerm,
+        results: c.results,
+        children: a
+      }
+    ),
+    /* @__PURE__ */ s("div", { className: "n-search-footer", children: [
+      /* @__PURE__ */ s("p", { className: "n-search-footer-tip", children: [
+        /* @__PURE__ */ s(f, { keyNames: ["Esc"] }),
+        "to close"
+      ] }),
+      /* @__PURE__ */ s("p", { className: "n-search-footer-tip", children: [
+        /* @__PURE__ */ s(f, { keyNames: ["Tab"] }),
+        /* @__PURE__ */ s("span", { children: "or" }),
+        /* @__PURE__ */ s(f, { keyNames: ["↑", "↓"] }),
+        "to navigate"
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  W as default
+};

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

@@ -1,8 +1,8 @@
-import { u as e } from "../../../../../jsxRuntime.module-Bzuv3cXw.js";
-import { D as t } from "../../../../../compat.module-DWiGVdMB.js";
+import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import { D as t } from "../../../../../chunks/compat.module.BPxt-oTe.js";
 import o from "../../../Icon/index.js";
 import '../../../../../assets/SearchToggle.css';const s = t(function(r, a) {
-  return /* @__PURE__ */ e("button", { id: r.id, ref: a, class: "search-toggle", disabled: !0, "data-ntl-search-toggle": !0, children: [
+  return /* @__PURE__ */ e("button", { id: r.id, ref: a, class: "n-search-toggle", disabled: !0, "data-ntl-search-toggle": !0, children: [
     /* @__PURE__ */ e("span", { class: "visually-hidden", children: "Search" }),
     /* @__PURE__ */ e(o, { name: r.iconName || "search" })
   ] });

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

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

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

@@ -1,26 +1,26 @@
-import { u as e } from "../../../../jsxRuntime.module-Bzuv3cXw.js";
-import c from "./SearchHeading.js";
-import n from "./SearchLink.js";
+import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import t from "./SearchHeading/SearchHeading.js";
+import c from "./SearchLink.js";
 const a = ({
   searchLoading: s,
   searchTerm: i,
   results: l
-}) => s ? /* @__PURE__ */ e(c, { children: [
+}) => s ? /* @__PURE__ */ e(t, { children: [
   "Searching for ",
-  /* @__PURE__ */ e("span", { className: "search-term", children: i }),
+  /* @__PURE__ */ e("span", { className: "n-search-term", children: i }),
   " ..."
-] }) : !l || l.length === 0 ? /* @__PURE__ */ e(c, { children: [
+] }) : !l || l.length === 0 ? /* @__PURE__ */ e(t, { children: [
   "0 results for ",
-  /* @__PURE__ */ e("span", { className: "search-term", children: i })
-] }) : /* @__PURE__ */ e("ul", { className: "results-list", role: "list", children: l.slice(0, 15).map((r, t) => /* @__PURE__ */ e("li", { className: "results-list-item", children: /* @__PURE__ */ e(n, { ...r }) }, t)) });
+  /* @__PURE__ */ e("span", { className: "n-search-term", children: i })
+] }) : /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: l.slice(0, 15).map((r, n) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(c, { ...r }) }, n)) });
 function m({
   searchLoading: s,
   searchTerm: i,
   results: l,
   children: r
 }) {
-  return /* @__PURE__ */ e("div", { className: "search-window", children: /* @__PURE__ */ e("div", { className: "search-links", children: [
-    /* @__PURE__ */ e(n, { ...{
+  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "search-links", children: [
+    /* @__PURE__ */ e(c, { ...{
       icon: "askNetlify",
       title: "Ask Netlify AI",
       url: "https://docs.netlify.com/ask-netlify/"

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

@@ -0,0 +1,5 @@
+export { useSearch } from '../hooks/useSearch';
+export { useKeyboardNav } from '../hooks/useKeyboardNav';
+export { useSearchHotkeys } from '../hooks/useSearchHotkeys';
+export { useSearchParams } from '../hooks/useSearchParams';
+export { useSearchToggles } from '../hooks/useSearchToggles';

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

@@ -0,0 +1,12 @@
+import { useSearch as o } from "./useSearch.js";
+import { useKeyboardNav as s } from "./useKeyboardNav.js";
+import { useSearchHotkeys as t } from "./useSearchHotkeys.js";
+import { useSearchParams as p } from "./useSearchParams.js";
+import { useSearchToggles as x } from "./useSearchToggles.js";
+export {
+  s as useKeyboardNav,
+  o as useSearch,
+  t as useSearchHotkeys,
+  p as useSearchParams,
+  x as useSearchToggles
+};

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

@@ -1,4 +1,4 @@
-import { y as a } from "../../../../hooks.module-ExpuRnbo.js";
+import { y as a } from "../../../../chunks/hooks.module.ExpuRnbo.js";
 function l(r, t, o) {
   a(() => {
     const c = (e) => {

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

@@ -1,4 +1,4 @@
-import { A as h, y as p, d as g } from "../../../../hooks.module-ExpuRnbo.js";
+import { A as h, y as p, d as g } from "../../../../chunks/hooks.module.ExpuRnbo.js";
 import { getSiteIcon as S } from "../utils/index.js";
 function w(s, r) {
   const t = h(null), c = h("");

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

@@ -1,4 +1,4 @@
-import { y as d } from "../../../../hooks.module-ExpuRnbo.js";
+import { y as d } from "../../../../chunks/hooks.module.ExpuRnbo.js";
 function m(t, n, o) {
   d(() => {
     const r = (e) => {

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

@@ -1,4 +1,4 @@
-import { y as e } from "../../../../hooks.module-ExpuRnbo.js";
+import { y as e } from "../../../../chunks/hooks.module.ExpuRnbo.js";
 function t(a, o) {
   e(() => {
     if (typeof location > "u") return;

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

@@ -1,4 +1,4 @@
-import { y as c } from "../../../../hooks.module-ExpuRnbo.js";
+import { y as c } from "../../../../chunks/hooks.module.ExpuRnbo.js";
 function l(t) {
   c(() => {
     const r = document.querySelectorAll("[data-ntl-search-toggle]");

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

@@ -1,6 +1,6 @@
-import { ComponentChildren } from 'preact';
-interface Props {
-    children: ComponentChildren;
-}
-declare function SearchModal({ children }: Props): import("preact").JSX.Element;
-export default SearchModal;
+export { default as SearchHeading } from './components/SearchHeading/SearchHeading';
+export { default as SearchInput } from './components/SearchInput';
+export { default as SearchLink } from './components/SearchLink';
+export { default as SearchToggle } from './components/SearchToggle/SearchToggle';
+export { default as SearchWindow } from './components/SearchWindow';
+export { default as SearchModal } from './components/SearchModal/SearchModal';

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

@@ -1,57 +1,14 @@
-import { u as e } from "../../../jsxRuntime.module-Bzuv3cXw.js";
-import { A as h, y as l, d as f } from "../../../hooks.module-ExpuRnbo.js";
-import p from "../Modal/index.js";
-import S from "./components/SearchFooter.js";
-import u from "./components/SearchFooterTip.js";
-import T from "./components/SearchInput.js";
-import "./components/SearchToggle/SearchToggle.js";
-import y from "./components/SearchWindow.js";
-import i from "../KeyboardKey/index.js";
-import { useSearch as g } from "./hooks/useSearch.js";
-import { useKeyboardNav as v } from "./hooks/useKeyboardNav.js";
-import { useSearchHotkeys as k } from "./hooks/useSearchHotkeys.js";
-import { useSearchParams as N } from "./hooks/useSearchParams.js";
-import { useSearchToggles as w } from "./hooks/useSearchToggles.js";
-import '../../../assets/index2.css';function L(a) {
-  const r = h(null);
-  return l(() => {
-    function t(o) {
-      r.current && !r.current.contains(o.target) && a();
-    }
-    return document.addEventListener("mousedown", t), () => {
-      document.removeEventListener("mousedown", t);
-    };
-  }, [a]), r;
-}
-function W({ children: a }) {
-  const { state: r, actions: t } = g(), [o, m] = f(!1), c = () => m(!0), n = () => m(!1), s = h(null), d = L(n);
-  return w(c), N(t.setSearchTerm, c), k(o, c, n), v(s, o, n), l(() => {
-    s.current && (o ? s.current.showModal() : s.current.close());
-  }, [o]), /* @__PURE__ */ e(p, { ref: s, className: "search-modal", children: /* @__PURE__ */ e("div", { ref: d, class: "search-container", children: [
-    /* @__PURE__ */ e("form", { class: "search", children: /* @__PURE__ */ e(T, { setSearchTerm: t.setSearchTerm, initialValue: r.searchTerm }) }),
-    /* @__PURE__ */ e(
-      y,
-      {
-        searchLoading: r.isLoading,
-        searchTerm: r.searchTerm,
-        results: r.results,
-        children: a
-      }
-    ),
-    /* @__PURE__ */ e(S, { children: [
-      /* @__PURE__ */ e(u, { children: [
-        /* @__PURE__ */ e(i, { keyNames: ["Esc"] }),
-        "to close"
-      ] }),
-      /* @__PURE__ */ e(u, { children: [
-        /* @__PURE__ */ e(i, { keyNames: ["Tab"] }),
-        /* @__PURE__ */ e("span", { children: "or" }),
-        /* @__PURE__ */ e(i, { keyNames: ["↑", "↓"] }),
-        "to navigate"
-      ] })
-    ] })
-  ] }) });
-}
+import { default as r } from "./components/SearchHeading/SearchHeading.js";
+import { default as t } from "./components/SearchInput.js";
+import { default as d } from "./components/SearchLink.js";
+import { default as p } from "./components/SearchToggle/SearchToggle.js";
+import { default as c } from "./components/SearchWindow.js";
+import { default as m } from "./components/SearchModal/SearchModal.js";
 export {
-  W as default
+  r as SearchHeading,
+  t as SearchInput,
+  d as SearchLink,
+  m as SearchModal,
+  p as SearchToggle,
+  c as SearchWindow
 };

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

@@ -1,8 +1,8 @@
-export { default as KeyboardKey } from './KeyboardKey';
-export { default as Modal } from './Modal';
+export { default as KeyboardKey } from './KeyboardKey/KeyboardKey';
+export { default as Modal } from './Modal/Modal';
 export { default as Icon } from './Icon';
 export { default as SearchLink } from './SearchModal/components/SearchLink';
-export { default as SearchHeading } from './SearchModal/components/SearchHeading';
+export { default as SearchHeading } from './SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
-export { default as SearchModal } from './SearchModal';
+export { SearchModal } from './SearchModal';
 export { type IconName } from './Icon';

package/dist/components/preact/index.js

@@ -1,16 +1,18 @@
-import { default as o } from "./KeyboardKey/index.js";
-import { default as f } from "./Modal/index.js";
-import { default as d } from "./Icon/index.js";
-import { default as m } from "./SearchModal/components/SearchLink.js";
-import { default as s } from "./SearchModal/components/SearchHeading.js";
-import { default as x } from "./SearchModal/components/SearchToggle/SearchToggle.js";
-import { default as h } from "./SearchModal/index.js";
+import { default as t } from "./KeyboardKey/KeyboardKey.js";
+import { default as d } from "./Modal/Modal.js";
+import { default as m } from "./Icon/index.js";
+import { default as s } from "./SearchModal/components/SearchLink.js";
+import { default as x } from "./SearchModal/components/SearchHeading/SearchHeading.js";
+import { default as h } from "./SearchModal/components/SearchToggle/SearchToggle.js";
+import "preact";
+import "../../chunks/hooks.module.ExpuRnbo.js";
+import { default as S } from "./SearchModal/components/SearchModal/SearchModal.js";
 export {
-  d as Icon,
-  o as KeyboardKey,
-  f as Modal,
-  s as SearchHeading,
-  m as SearchLink,
-  h as SearchModal,
-  x as SearchToggle
+  m as Icon,
+  t as KeyboardKey,
+  d as Modal,
+  x as SearchHeading,
+  s as SearchLink,
+  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": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -21,6 +21,7 @@
   ],
   "exports": {
     "./preact": "./dist/components/preact/index.js",
+    "./preact/styles/*.css": "./dist/assets/*.css",
     "./assets/*.css": "./dist/assets/*.css",
     "./logos/*.svg": "./packages/assets/logos/*.svg",
     "./styles/*.css": "./packages/styles/*.css",
@@ -30,11 +31,13 @@
   },
   "dependencies": {
     "@preact/preset-vite": "^2.10.1",
+    "classnames": "^2.5.1",
     "glob": "^11.0.1",
     "preact": "^10.26.4",
     "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.3",
-    "vite-plugin-lib-inject-css": "^2.2.1"
+    "vite-plugin-lib-inject-css": "^2.2.1",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {
     "@terrazzo/cli": "^0.6.3",
@@ -52,8 +55,5 @@
     "preact": "^10.26.4",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ]
+  }
 }

package/packages/components/index.ts

@@ -1,10 +1,10 @@
-export { default as KeyboardKey } from './preact/KeyboardKey';
-export { default as Modal } from './preact/Modal';
+export { default as KeyboardKey } from './preact/KeyboardKey/KeyboardKey';
+export { default as Modal } from './preact/Modal/Modal';
 export { default as Icon } from './preact/Icon';
 export { default as SearchLink } from './preact/SearchModal/components/SearchLink';
-export { default as SearchHeading } from './preact/SearchModal/components/SearchHeading';
+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';
+export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
 export { default as Tabs } from './Tabs.astro';
 
 export { type IconName } from './preact/Icon';