@netlify/spark-ui 1.5.0-alpha.10 → 1.5.0-alpha.11

package/dist/assets/AskNetlify.css

@@ -1 +1 @@
-.chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{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)}.question{border:none;color:var(--color-text-1);font-weight:var(--font-weight-regular);font-size:var(--step--1);border-radius:var(--radius-pill);transform:translate(-.75rem);text-wrap:pretty;text-align:left}.question-list li{opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.question-list li:nth-child(1){animation-delay:.5s}.question-list li:nth-child(2){animation-delay:.3s}.question-list li:nth-child(3){animation-delay:.1s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.message{display:grid;gap:var(--space-s);margin-block-start:var(--space-2xl)}.message-bubble{padding:var(--space-xs) var(--space-s);background:var(--search-answer-message-color);border-radius:var(--radius-l);width:fit-content;max-width:85%;font-size:var(--step-0)}.prose{font-size:var(--step--0)}.prose>*+*{margin-top:var(--flow-space, var(--space-s))}.prose :where(ol,ul,li)>*+*{margin-top:var(--flow-space, var(--space-3xs))}.prose h1,.prose h2,.prose h3{font-size:var(--step-1)}.prose h4,.prose h5,.prose h6{font-size:var(--step-0)}.prose pre{background:var(--neutral-light-700);border-radius:var(--radius-m);max-width:100%;box-sizing:border-box;padding:var(--space-s);color:var(--neutral-100);overflow-x:auto}.prose code{overflow-x:auto}.prose code[class*=language-],.prose pre[class*=language-]{display:block;font-size:var(--font-size-text-xs)}.user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.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(--color-bg-3);position:absolute;top:0;left:0}.form-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.form-submit{padding:.7rem;border-radius:var(--radius-pill);margin-inline-end:var(--space-2xs);border:none;background:var(--color-link-1);color:var(--neutral-000);transition:background-color .15s ease-out}.form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.form-submit[disabled]{background:var(--neutral-500)}.form-submit[disabled]>*{opacity:.5}.button-back{width:fit-content;background:transparent;position:absolute;z-index:1;padding:.5rem 1rem;background:var(--search-back-btn-bg-color);margin:1rem;border:2px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--step--1);border:1px solid;cursor:pointer;border-color:var(--color-bg-3);color:var(--color-text-1);border-width:.5px}.message-loader{width:43px;height:auto;display:block;color:var(--search-loading-color)}.message-loader :where(#ask-netlify-tick-1,#ask-netlify-tick-2,#ask-netlify-tick-3){opacity:0;animation:tickFlicker .8s ease-in-out infinite}#ask-netlify-tick-1{animation-delay:.1s}#ask-netlify-tick-2{animation-delay:.2s}#ask-netlify-tick-3{animation-delay:.3s}@keyframes tickFlicker{0%{opacity:0}to{opacity:1}}
+.chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{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)}.question{border:none;color:var(--color-text-1);font-weight:var(--font-weight-regular);font-size:var(--step--1);border-radius:var(--radius-pill);transform:translate(-.75rem);text-wrap:pretty;text-align:left}.question-list li{opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.question-list li:nth-child(1){animation-delay:.5s}.question-list li:nth-child(2){animation-delay:.3s}.question-list li:nth-child(3){animation-delay:.1s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.message{display:grid;gap:var(--space-s);margin-block-start:var(--space-2xl)}.message-bubble{padding:var(--space-xs) var(--space-s);background:var(--search-answer-message-color);border-radius:var(--radius-l);width:fit-content;max-width:85%;font-size:var(--step-0)}.prose{font-size:var(--step--0)}.prose>*+*{margin-top:var(--flow-space, var(--space-s))}.prose :where(ol,ul,li)>*+*{margin-top:var(--flow-space, var(--space-3xs))}.prose h1,.prose h2,.prose h3{font-size:var(--step-1)}.prose h4,.prose h5,.prose h6{font-size:var(--step-0)}.prose pre{background:var(--neutral-light-700);border-radius:var(--radius-m);max-width:100%;box-sizing:border-box;padding:var(--space-s);color:var(--neutral-100);overflow-x:auto}.prose code{overflow-x:auto}.prose code[class*=language-],.prose pre[class*=language-]{display:block;font-size:var(--font-size-text-xs)}.user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.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(--color-bg-3);position:absolute;top:0;left:0}.form-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.form-submit{padding:.7rem;border-radius:var(--radius-pill);margin-inline-end:var(--space-2xs);border:none;background:var(--color-link-1);color:var(--neutral-000);transition:background-color .15s ease-out}.form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.form-submit[disabled]{background:var(--neutral-500)}.form-submit[disabled]>*{opacity:.5}.button-back{width:fit-content;background:transparent;position:absolute;z-index:1;padding:.5rem 1rem;background:var(--search-back-btn-bg-color);margin:1rem;border:2px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--step--1);border:1px solid;cursor:pointer;border-color:var(--color-bg-3);color:var(--color-text-1);border-width:.5px}.message-loader{width:43px;height:auto;display:block;color:var(--search-loading-color)}.message-loader :where(#ask-netlify-tick-1,#ask-netlify-tick-2,#ask-netlify-tick-3){opacity:0;animation:tickFlicker .8s ease-in-out infinite}#ask-netlify-tick-1{animation-delay:.1s}#ask-netlify-tick-2{animation-delay:.2s}#ask-netlify-tick-3{animation-delay:.3s}@keyframes tickFlicker{0%{opacity:0}to{opacity:1}}#ask-netlify-eyelid-left,#ask-netlify-eyelid-right{transform-origin:top center;animation:blink 4s infinite;animation-delay:1s;transform:scaleY(.8)}@keyframes blink{0%,5%{transform:scaleY(.8)}6%,10%{transform:scaleY(1)}11%,15%{transform:scaleY(.8)}16%,20%{transform:scaleY(1)}21%,to{transform:scaleY(.8)}}

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

@@ -1,6 +1,6 @@
 import { u as C } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { Fragment as n } from "preact";
-function m(r) {
+import { Fragment as e } from "preact";
+function I(r) {
   const t = V[r.name];
   if (t)
     return /* @__PURE__ */ C(
@@ -19,7 +19,7 @@ function m(r) {
       }
     );
 }
-const o = () => /* @__PURE__ */ C(n, { children: [
+const l = () => /* @__PURE__ */ C(e, { children: [
   /* @__PURE__ */ C(
     "path",
     {
@@ -47,6 +47,7 @@ const o = () => /* @__PURE__ */ C(n, { children: [
   /* @__PURE__ */ C(
     "path",
     {
+      id: "ask-netlify-eye-left",
       d: "M5.60625 10.7823C5.60625 11.421 5.09138 11.9387 4.45625 11.9387C3.82112 11.9387 3.30625 11.421 3.30625 10.7823C3.30625 10.1436 3.82112 9.62585 4.45625 9.62585C5.09138 9.62585 5.60625 10.1436 5.60625 10.7823Z",
       fill: "currentColor"
     }
@@ -54,6 +55,7 @@ const o = () => /* @__PURE__ */ C(n, { children: [
   /* @__PURE__ */ C(
     "path",
     {
+      id: "ask-netlify-eye-right",
       d: "M10.8777 11.9387C11.5129 11.9387 12.0277 11.421 12.0277 10.7823C12.0277 10.1436 11.5129 9.62585 10.8777 9.62585C10.2426 9.62585 9.72774 10.1436 9.72774 10.7823C9.72774 11.421 10.2426 11.9387 10.8777 11.9387Z",
       fill: "currentColor"
     }
@@ -73,38 +75,60 @@ const o = () => /* @__PURE__ */ C(n, { children: [
       d: "M7.86997 4.00002C11.9918 4.00002 15.3333 6.70814 15.3333 10.853C15.3333 13.3274 13.3386 15.3334 10.878 15.3334H0V10.853C0 6.70814 3.34157 4.00002 7.46336 4.00002H7.86997ZM0.990302 10.5245C0.990302 8.69571 2.51537 7.15558 4.33747 7.15558C5.71877 7.15558 6.90206 7.9938 7.41504 9.19232C7.41751 9.1981 7.42291 9.20918 7.42291 9.20918H7.91072C7.91072 9.20918 7.91612 9.1981 7.91859 9.19232C8.43157 7.9938 9.61486 7.15558 10.9962 7.15558C12.8183 7.15558 14.3433 8.69571 14.3433 10.5245C14.3433 12.2311 12.9812 13.8499 11.447 13.8845H4.15184C2.38987 13.7867 0.990302 12.323 0.990302 10.5245Z",
       fill: "currentColor"
     }
+  ),
+  /* @__PURE__ */ C(
+    "rect",
+    {
+      id: "ask-netlify-eyelid-left",
+      x: "3",
+      y: "9.5",
+      width: "3",
+      height: "2.5",
+      fill: "var(--search-bg-color, currentColor)"
+    }
+  ),
+  /* @__PURE__ */ C(
+    "rect",
+    {
+      id: "ask-netlify-eyelid-right",
+      x: "9.7",
+      y: "9.5",
+      width: "3",
+      height: "2.5",
+      fill: "var(--search-bg-color, currentColor)"
+    }
   )
-] }), l = () => /* @__PURE__ */ C(
+] }), n = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M12.3756 6.68667C12.3756 7.94156 11.9681 9.10077 11.2818 10.0413L14.7436 13.5052C15.0855 13.8469 15.0855 14.4019 14.7436 14.7437C14.4018 15.0854 13.8467 15.0854 13.5049 14.7437L10.043 11.2797C9.10235 11.9687 7.94292 12.3733 6.68778 12.3733C3.54583 12.3733 1 9.828 1 6.68667C1 3.54533 3.54583 1 6.68778 1C9.82973 1 12.3756 3.54533 12.3756 6.68667ZM6.68778 10.6236C7.20488 10.6236 7.71692 10.5218 8.19467 10.3239C8.67241 10.1261 9.1065 9.83607 9.47215 9.47049C9.83779 9.10491 10.1278 8.67091 10.3257 8.19326C10.5236 7.71561 10.6255 7.20367 10.6255 6.68667C10.6255 6.16966 10.5236 5.65772 10.3257 5.18007C10.1278 4.70242 9.83779 4.26842 9.47215 3.90284C9.1065 3.53726 8.67241 3.24727 8.19467 3.04942C7.71692 2.85158 7.20488 2.74974 6.68778 2.74974C6.17067 2.74974 5.65863 2.85158 5.18089 3.04942C4.70315 3.24727 4.26906 3.53726 3.90341 3.90284C3.53776 4.26842 3.24771 4.70242 3.04982 5.18007C2.85194 5.65772 2.75009 6.16966 2.75009 6.68667C2.75009 7.20367 2.85194 7.71561 3.04982 8.19326C3.24771 8.67091 3.53776 9.10491 3.90341 9.47049C4.26906 9.83607 4.70315 10.1261 5.18089 10.3239C5.65863 10.5218 6.17067 10.6236 6.68778 10.6236Z",
     fill: "currentColor"
   }
-), L = () => /* @__PURE__ */ C(
+), o = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M4.57143 1C3.15179 1 2 2.17578 2 3.625V12.375C2 13.8242 3.15179 15 4.57143 15H12.2857H13.1429C13.617 15 14 14.609 14 14.125C14 13.641 13.617 13.25 13.1429 13.25V11.5C13.617 11.5 14 11.109 14 10.625V1.875C14 1.39102 13.617 1 13.1429 1H12.2857H4.57143ZM4.57143 11.5H11.4286V13.25H4.57143C4.09732 13.25 3.71429 12.859 3.71429 12.375C3.71429 11.891 4.09732 11.5 4.57143 11.5ZM5.42857 4.9375C5.42857 4.69687 5.62143 4.5 5.85714 4.5H11C11.2357 4.5 11.4286 4.69687 11.4286 4.9375C11.4286 5.17813 11.2357 5.375 11 5.375H5.85714C5.62143 5.375 5.42857 5.17813 5.42857 4.9375ZM5.85714 6.25H11C11.2357 6.25 11.4286 6.44687 11.4286 6.6875C11.4286 6.92813 11.2357 7.125 11 7.125H5.85714C5.62143 7.125 5.42857 6.92813 5.42857 6.6875C5.42857 6.44687 5.62143 6.25 5.85714 6.25Z",
     fill: "currentColor"
   }
-), e = () => /* @__PURE__ */ C(
+), L = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M11.7071 7.29399C12.0976 7.68448 12.0976 8.31864 11.7071 8.70914L5.70826 14.7071C5.31771 15.0976 4.68346 15.0976 4.29291 14.7071C3.90236 14.3166 3.90236 13.6825 4.29291 13.292L9.58563 8L4.29604 2.70802C3.90549 2.31753 3.90549 1.68336 4.29604 1.29287C4.68658 0.902376 5.32084 0.902376 5.71138 1.29287L11.7102 7.29086L11.7071 7.29399Z",
     fill: "currentColor"
   }
-), c = () => /* @__PURE__ */ C(
+), i = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M0 4.57143C0 2.04286 2.04286 0 4.57143 0C37.4 0 64 26.6 64 59.4286C64 61.9571 61.9571 64 59.4286 64C56.9 64 54.8571 61.9571 54.8571 59.4286C54.8571 31.6571 32.3429 9.14286 4.57143 9.14286C2.04286 9.14286 0 7.1 0 4.57143ZM0 54.8571C0 52.4323 0.963263 50.1068 2.67788 48.3922C4.3925 46.6776 6.71802 45.7143 9.14286 45.7143C11.5677 45.7143 13.8932 46.6776 15.6078 48.3922C17.3225 50.1068 18.2857 52.4323 18.2857 54.8571C18.2857 57.282 17.3225 59.6075 15.6078 61.3221C13.8932 63.0367 11.5677 64 9.14286 64C6.71802 64 4.3925 63.0367 2.67788 61.3221C0.963263 59.6075 0 57.282 0 54.8571ZM4.57143 18.2857C27.3 18.2857 45.7143 36.7 45.7143 59.4286C45.7143 61.9571 43.6714 64 41.1429 64C38.6143 64 36.5714 61.9571 36.5714 59.4286C36.5714 41.7571 22.2429 27.4286 4.57143 27.4286C2.04286 27.4286 0 25.3857 0 22.8571C0 20.3286 2.04286 18.2857 4.57143 18.2857Z",
     fill: "currentColor"
   }
-), i = () => /* @__PURE__ */ C(
+), c = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M15 7.57143C15 10.6491 11.8666 13.1429 8.00041 13.1429C6.98601 13.1429 6.02357 12.9714 5.15409 12.6634C4.82871 12.8964 4.29828 13.2152 3.66941 13.483C3.01319 13.7616 2.22301 14 1.43829 14C1.26056 14 1.10198 13.8955 1.03362 13.7348C0.965266 13.5741 1.00355 13.392 1.12658 13.2688L1.13479 13.2607C1.14299 13.2527 1.15393 13.242 1.17033 13.2232C1.20041 13.1911 1.24689 13.1402 1.30431 13.0705C1.41641 12.9366 1.56679 12.7384 1.71991 12.492C1.99333 12.0473 2.25308 11.4634 2.30503 10.8071C1.48477 9.89643 1.00081 8.77946 1.00081 7.57143C1.00081 4.49375 4.13422 2 8.00041 2C11.8666 2 15 4.49375 15 7.57143Z",
     fill: "currentColor"
   }
-), u = () => /* @__PURE__ */ C(n, { children: [
+), u = () => /* @__PURE__ */ C(e, { children: [
   /* @__PURE__ */ C(
     "path",
     {
@@ -127,25 +151,25 @@ const o = () => /* @__PURE__ */ C(n, { children: [
     d: "M58.0309 26.6159C63.6509 21.0179 63.6509 11.9435 58.0309 6.34543C52.6809 1.01633 44.0909 0.72746 38.3909 5.69797L37.7809 6.23586C36.7809 7.10246 36.6809 8.61652 37.5509 9.61262C38.4209 10.6087 39.9409 10.7083 40.9409 9.84172L41.5509 9.30383C45.3509 5.9968 51.0709 6.18605 54.6409 9.74211C58.3809 13.4675 58.3809 19.5138 54.6409 23.2491L43.3109 34.5249C39.5709 38.2503 33.4909 38.2503 29.7509 34.5249C26.1809 30.9689 25.9909 25.2712 29.3109 21.4861L29.7809 20.9482C30.6509 19.9521 30.5509 18.448 29.5509 17.5714C28.5509 16.6948 27.0409 16.8044 26.1609 17.8005L25.6909 18.3384C20.7109 24.0161 21.0009 32.5726 26.3509 37.9017C31.9709 43.4997 41.0809 43.4997 46.7009 37.9017L58.0309 26.6159ZM5.97086 24.3847C0.350859 29.9827 0.350859 39.0571 5.97086 44.6452C11.3309 49.9843 19.9209 50.2632 25.6209 45.2927L26.2309 44.7548C27.2309 43.8882 27.3309 42.3741 26.4609 41.378C25.5909 40.382 24.0709 40.2823 23.0709 41.1489L22.4609 41.6868C18.6609 44.9939 12.9409 44.8046 9.37086 41.2486C5.63086 37.5232 5.63086 31.4769 9.37086 27.7415L20.7009 16.4757C24.4409 12.7503 30.5109 12.7503 34.2609 16.4757C37.8309 20.0318 38.0209 25.7294 34.7009 29.5146L34.1609 30.1222C33.2909 31.1183 33.3909 32.6224 34.3909 33.4989C35.3909 34.3755 36.9009 34.2659 37.7809 33.2698L38.3209 32.6622C43.3109 26.9845 43.0209 18.428 37.6709 13.089C32.0509 7.49094 22.9409 7.49094 17.3209 13.089L5.97086 24.3847Z",
     fill: "currentColor"
   }
-), M = () => /* @__PURE__ */ C(
+), a = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M49.8875 0.137732C48.3 -0.349768 46.625 0.525232 46.1375 2.11273L28.1375 60.1127C27.65 61.7002 28.525 63.3752 30.1125 63.8627C31.7 64.3502 33.375 63.4752 33.8625 61.8877L51.8625 3.88773C52.35 2.30023 51.475 0.625232 49.8875 0.137732ZM58.8125 14.9502C57.675 16.1627 57.7375 18.0627 58.95 19.1877L72.6125 32.0002L58.95 44.8127C57.7375 45.9502 57.675 47.8502 58.8125 49.0502C59.95 50.2502 61.85 50.3252 63.05 49.1877L79.05 34.1877C79.65 33.6252 80 32.8252 80 32.0002C80 31.1752 79.6625 30.3752 79.05 29.8127L63.05 14.8127C61.8375 13.6752 59.9375 13.7377 58.8125 14.9502ZM21.1875 14.9502C20.05 13.7377 18.15 13.6752 16.95 14.8127L0.95 29.8127C0.3375 30.3752 0 31.1752 0 32.0002C0 32.8252 0.3375 33.6252 0.95 34.1877L16.95 49.1877C18.1625 50.3252 20.0625 50.2627 21.1875 49.0502C22.3125 47.8377 22.2625 45.9377 21.05 44.8127L7.3875 32.0002L21.05 19.1877C22.2625 18.0502 22.325 16.1502 21.1875 14.9502Z",
     fill: "currentColor"
   }
-), a = () => /* @__PURE__ */ C(
+), h = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M4.83333 1C3.82214 1 3 1.78477 3 2.75V13.25C3 14.2152 3.82214 15 4.83333 15H12.1667C13.1779 15 14 14.2152 14 13.25V5.375H10.3333C9.8263 5.375 9.41667 4.98398 9.41667 4.5V1H4.83333ZM10.3333 1V4.5H14L10.3333 1ZM6.20833 8H10.7917C11.0438 8 11.25 8.19687 11.25 8.4375C11.25 8.67813 11.0438 8.875 10.7917 8.875H6.20833C5.95625 8.875 5.75 8.67813 5.75 8.4375C5.75 8.19687 5.95625 8 6.20833 8ZM6.20833 9.75H10.7917C11.0438 9.75 11.25 9.94687 11.25 10.1875C11.25 10.4281 11.0438 10.625 10.7917 10.625H6.20833C5.95625 10.625 5.75 10.4281 5.75 10.1875C5.75 9.94687 5.95625 9.75 6.20833 9.75ZM6.20833 11.5H10.7917C11.0438 11.5 11.25 11.6969 11.25 11.9375C11.25 12.1781 11.0438 12.375 10.7917 12.375H6.20833C5.95625 12.375 5.75 12.1781 5.75 11.9375C5.75 11.6969 5.95625 11.5 6.20833 11.5Z",
     fill: "currentColor"
   }
-), Z = () => /* @__PURE__ */ C(
+), M = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M0.787918 9.02542C-0.337082 7.80042 -0.249582 5.91292 0.962918 4.78792C2.17542 3.66292 4.07542 3.75042 5.20042 4.96292L28.2004 29.9629C29.2629 31.1129 29.2629 32.8754 28.2004 34.0254L5.20042 59.0254C4.07542 60.2504 2.17542 60.3254 0.962918 59.2004C-0.249582 58.0754 -0.337082 56.1754 0.787918 54.9629L21.9254 32.0004L0.787918 9.02542ZM31.0004 54.0004H69.0004C70.6629 54.0004 72.0004 55.3379 72.0004 57.0004C72.0004 58.6629 70.6629 60.0004 69.0004 60.0004H31.0004C29.3379 60.0004 28.0004 58.6629 28.0004 57.0004C28.0004 55.3379 29.3379 54.0004 31.0004 54.0004Z",
     fill: "currentColor"
   }
-), H = () => /* @__PURE__ */ C(
+), Z = () => /* @__PURE__ */ C(
   "path",
   {
     "fill-rule": "evenodd",
@@ -159,7 +183,7 @@ const o = () => /* @__PURE__ */ C(n, { children: [
     d: "M59.4286 0H4.55714C2.04286 0 0 2.07143 0 4.61429V59.3857C0 61.9286 2.04286 64 4.55714 64H59.4286C61.9429 64 64 61.9286 64 59.3857V4.61429C64 2.07143 61.9429 0 59.4286 0ZM19.3429 54.8571H9.85714V24.3143H19.3571V54.8571H19.3429ZM14.6 20.1429C11.5571 20.1429 9.1 17.6714 9.1 14.6429C9.1 11.6143 11.5571 9.14286 14.6 9.14286C17.6286 9.14286 20.1 11.6143 20.1 14.6429C20.1 17.6857 17.6429 20.1429 14.6 20.1429ZM54.9 54.8571H45.4143V40C45.4143 36.4571 45.3429 31.9 40.4857 31.9C35.5429 31.9 34.7857 35.7571 34.7857 39.7429V54.8571H25.3V24.3143H34.4V28.4857H34.5286C35.8 26.0857 38.9 23.5571 43.5143 23.5571C53.1143 23.5571 54.9 29.8857 54.9 38.1143V54.8571Z",
     fill: "currentColor"
   }
-), h = () => /* @__PURE__ */ C(
+), H = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M48.6496 6H57.4746L38.1996 28.025L60.8746 58H43.1246L29.2121 39.825L13.3121 58H4.47461L25.0871 34.4375L3.34961 6H21.5496L34.1121 22.6125L48.6496 6ZM45.5496 52.725H50.4371L18.8871 11H13.6371L45.5496 52.725Z",
@@ -178,23 +202,23 @@ const o = () => /* @__PURE__ */ C(n, { children: [
     fill: "currentColor"
   }
 ), V = {
-  askNetlify: o,
-  book: L,
-  caretRight: e,
-  code: M,
-  comment: i,
+  askNetlify: l,
+  book: o,
+  caretRight: L,
+  code: a,
+  comment: c,
   link: d,
   lightbulb: u,
-  pageWithLines: a,
-  rss: c,
-  search: l,
-  terminal: Z,
-  question: H,
+  pageWithLines: h,
+  rss: i,
+  search: n,
+  terminal: M,
+  question: Z,
   bluesky: s,
   linkedin: f,
-  twitter: h,
+  twitter: H,
   youtube: p
 };
 export {
-  m as default
+  I as default
 };

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

@@ -1,5 +1,5 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as N, y as u, d as m } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
+import { A as N, y as l, d as h } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
 import w from "../../../Modal/Modal.js";
 import p from "../../../KeyboardKey/KeyboardKey.js";
 import I from "../SearchWindow.js";
@@ -7,14 +7,14 @@ import b from "../SearchInput.js";
 import { useSearch as M } from "../../hooks/useSearch.js";
 import { useSearchLogger as O } from "../../hooks/useSearchLogger.js";
 import { useKeyboardNav as P } from "../../hooks/useKeyboardNav.js";
-import { useSearchHotkeys as A } from "../../hooks/useSearchHotkeys.js";
-import { useSearchParams as E } from "../../hooks/useSearchParams.js";
-import { useSearchToggles as K } from "../../hooks/useSearchToggles.js";
+import { useSearchHotkeys as E } from "../../hooks/useSearchHotkeys.js";
+import { useSearchParams as K } from "../../hooks/useSearchParams.js";
+import { useSearchToggles as A } from "../../hooks/useSearchToggles.js";
 import C from "../../../AskNetlify/AskNetlify.js";
 import { Fragment as F } from "preact";
-import '../../../../../assets/SearchModal.css';function Q(c) {
+import '../../../../../assets/SearchModal.css';function R(c) {
   const r = N(null);
-  return u(() => {
+  return l(() => {
     function i(t) {
       r.current && !r.current.contains(t.target) && c();
     }
@@ -23,41 +23,41 @@ import '../../../../../assets/SearchModal.css';function Q(c) {
     };
   }, [c]), r;
 }
-function Z(c = { className: "", children: null, debug: !1 }) {
-  const [r, i] = m(!1), [t, d] = m({ current: "search" }), [R, q] = m("");
-  u(() => {
-    let a;
+function X(c = { className: "", children: null, debug: !1 }) {
+  const [r, i] = h(!1), [t, u] = h({ current: "search" });
+  l(() => {
+    let s;
     const o = () => {
-      window.pagefind && (i(!0), a && clearInterval(a));
+      window.pagefind && (i(!0), s && clearInterval(s));
     };
-    return o(), a = setInterval(o, 100), () => clearInterval(a);
+    return o(), s = setInterval(o, 100), () => clearInterval(s);
   }, []);
-  const { children: k, className: S, debug: v, ...T } = c, { state: n, actions: g } = M(), [l, y] = m(!1), f = () => y(!0), h = () => y(!1), s = N(null), L = Q(h);
-  return O(n, v), K(r, f, d), E(r, g.setSearchTerm, f), A(r, l, f, h), P(r, s, l, h), u(() => {
-    s.current && (l ? s.current.showModal() : s.current.close());
-  }, [l]), u(() => {
+  const { children: k, className: S, debug: y, ...T } = c, { state: n, actions: g } = M(), [m, v] = h(!1), d = () => v(!0), f = () => v(!1), a = N(null), L = R(f);
+  return O(n, y), A(r, d, u), K(r, g.setSearchTerm, d), E(r, m, d, f), P(r, a, m, f), l(() => {
+    a.current && (m ? a.current.showModal() : a.current.close());
+  }, [m]), l(() => {
     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");
+    const s = (o = a.current) == null ? void 0 : o.querySelector("input");
+    s && s.focus(), t.current === "ask" ? setTimeout(() => {
+      a.current.classList.add("n-search-modal-ask");
     }, 150) : t.current === "search" && setTimeout(() => {
-      s.current.classList.remove("n-search-modal-ask");
+      a.current.classList.remove("n-search-modal-ask");
     }, 150);
   }, [t.current]), /* @__PURE__ */ e(
     w,
     {
-      ref: s,
+      ref: a,
       className: `n-search-modal ${S || ""}`,
       "data-state": t.current,
       ...T,
       children: /* @__PURE__ */ e("div", { ref: L, className: "n-search-container", children: [
-        t.current === "ask" && /* @__PURE__ */ e(C, { setModalState: d }),
+        t.current === "ask" && /* @__PURE__ */ e(C, { setModalState: u }),
         t.current === "search" && /* @__PURE__ */ e(F, { children: [
           /* @__PURE__ */ e(b, { setSearchTerm: g.setSearchTerm, initialValue: n.searchTerm }),
           /* @__PURE__ */ e(
             I,
             {
-              setModalState: d,
+              setModalState: u,
               searchLoading: n.isLoading,
               searchTerm: n.searchTerm,
               results: n.results,
@@ -82,5 +82,5 @@ function Z(c = { className: "", children: null, debug: !1 }) {
   );
 }
 export {
-  Z as default
+  X as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.5.0-alpha.10",
+  "version": "1.5.0-alpha.11",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

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

@@ -222,3 +222,34 @@
     opacity: 1;
   }
 }
+
+#ask-netlify-eyelid-left,
+#ask-netlify-eyelid-right {
+  transform-origin: top center;
+  animation: blink 4s infinite;
+  animation-delay: 1s;
+  transform: scaleY(0.8);
+}
+
+@keyframes blink {
+  0%,
+  5% {
+    transform: scaleY(0.8);
+  }
+  6%,
+  10% {
+    transform: scaleY(1);
+  }
+  11%,
+  15% {
+    transform: scaleY(0.8);
+  }
+  16%,
+  20% {
+    transform: scaleY(1);
+  }
+  21%,
+  100% {
+    transform: scaleY(0.8);
+  }
+}

package/packages/components/preact/Icon/index.tsx

@@ -42,10 +42,12 @@ const AskNetlify: FunctionComponent = () => {
         fill="currentColor"
       />
       <path
+        id="ask-netlify-eye-left"
         d="M5.60625 10.7823C5.60625 11.421 5.09138 11.9387 4.45625 11.9387C3.82112 11.9387 3.30625 11.421 3.30625 10.7823C3.30625 10.1436 3.82112 9.62585 4.45625 9.62585C5.09138 9.62585 5.60625 10.1436 5.60625 10.7823Z"
         fill="currentColor"
       />
       <path
+        id="ask-netlify-eye-right"
         d="M10.8777 11.9387C11.5129 11.9387 12.0277 11.421 12.0277 10.7823C12.0277 10.1436 11.5129 9.62585 10.8777 9.62585C10.2426 9.62585 9.72774 10.1436 9.72774 10.7823C9.72774 11.421 10.2426 11.9387 10.8777 11.9387Z"
         fill="currentColor"
       />
@@ -59,6 +61,22 @@ const AskNetlify: FunctionComponent = () => {
         d="M7.86997 4.00002C11.9918 4.00002 15.3333 6.70814 15.3333 10.853C15.3333 13.3274 13.3386 15.3334 10.878 15.3334H0V10.853C0 6.70814 3.34157 4.00002 7.46336 4.00002H7.86997ZM0.990302 10.5245C0.990302 8.69571 2.51537 7.15558 4.33747 7.15558C5.71877 7.15558 6.90206 7.9938 7.41504 9.19232C7.41751 9.1981 7.42291 9.20918 7.42291 9.20918H7.91072C7.91072 9.20918 7.91612 9.1981 7.91859 9.19232C8.43157 7.9938 9.61486 7.15558 10.9962 7.15558C12.8183 7.15558 14.3433 8.69571 14.3433 10.5245C14.3433 12.2311 12.9812 13.8499 11.447 13.8845H4.15184C2.38987 13.7867 0.990302 12.323 0.990302 10.5245Z"
         fill="currentColor"
       />
+      <rect
+        id="ask-netlify-eyelid-left"
+        x="3"
+        y="9.5"
+        width="3"
+        height="2.5"
+        fill="var(--search-bg-color, currentColor)"
+      />
+      <rect
+        id="ask-netlify-eyelid-right"
+        x="9.7"
+        y="9.5"
+        width="3"
+        height="2.5"
+        fill="var(--search-bg-color, currentColor)"
+      />
     </>
   );
 };

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.tsx

@@ -28,7 +28,6 @@ interface Props {
 function SearchModal(props: Props = { className: '', children: null, debug: false }) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
   const [modalState, setModalState] = useState({ current: 'search' });
-  const [askNetlifyQuery, setAskNetlifyQuery] = useState('');
 
   // Poll for the existence of window.pagefind.
   useEffect(() => {