@netlify/spark-ui 1.17.6 → 1.18.0-alpha.1

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

@@ -1,25 +1,26 @@
 import { u as C } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { Fragment as e } from "preact";
-function I(r) {
-  const t = V[r.name];
-  if (t)
+import { Fragment as t } from "preact";
+function S(L) {
+  const r = g[L.name];
+  if (r)
     return /* @__PURE__ */ C(
       "svg",
       {
-        id: `icon-${r.name}`,
-        "data-icon": r.name,
+        id: `icon-${L.name}`,
+        "data-icon": L.name,
         viewBox: "0 0 16 16",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        ...r,
+        class: L.className,
+        ...L,
         children: [
-          /* @__PURE__ */ C(t, {}),
+          /* @__PURE__ */ C(r, {}),
           ";"
         ]
       }
     );
 }
-const l = () => /* @__PURE__ */ C(e, { children: [
+const n = () => /* @__PURE__ */ C(t, { children: [
   /* @__PURE__ */ C(
     "path",
     {
@@ -98,7 +99,7 @@ const l = () => /* @__PURE__ */ C(e, { children: [
       fill: "var(--n-ask-netlify-eyelid-color, currentColor)"
     }
   )
-] }), n = () => /* @__PURE__ */ C(
+] }), l = () => /* @__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",
@@ -110,25 +111,37 @@ const l = () => /* @__PURE__ */ C(e, { children: [
     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"
   }
-), L = () => /* @__PURE__ */ C(
+), e = () => /* @__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"
   }
-), i = () => /* @__PURE__ */ C(
+), c = () => /* @__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"
   }
-), c = () => /* @__PURE__ */ C(
+), i = () => /* @__PURE__ */ C(
+  "path",
+  {
+    d: "M15.5281 0.223937C16.0388 0.598824 16.1531 1.31976 15.7817 1.83523L6.63858 14.5237C6.44215 14.7977 6.13857 14.9671 5.80284 14.9959C5.46712 15.0248 5.14211 14.8986 4.90639 14.6607L0.334831 10.0467C-0.11161 9.59612 -0.11161 8.86437 0.334831 8.41378C0.781272 7.9632 1.50629 7.9632 1.95273 8.41378L5.57783 12.0725L13.9352 0.476265C14.3067 -0.0392051 15.021 -0.154555 15.5317 0.220332L15.5281 0.223937Z",
+    fill: "currentColor"
+  }
+), u = () => /* @__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(e, { children: [
+), H = () => /* @__PURE__ */ C(
+  "path",
+  {
+    d: "M12 10.5H6C5.725 10.5 5.5 10.275 5.5 10V2C5.5 1.725 5.725 1.5 6 1.5H10.1719C10.3031 1.5 10.4312 1.55312 10.525 1.64687L12.3531 3.475C12.4469 3.56875 12.5 3.69688 12.5 3.82812V10C12.5 10.275 12.275 10.5 12 10.5ZM6 12H12C13.1031 12 14 11.1031 14 10V3.82812C14 3.29688 13.7906 2.7875 13.4156 2.4125L11.5844 0.584375C11.2094 0.209375 10.7031 0 10.1719 0H6C4.89688 0 4 0.896875 4 2V10C4 11.1031 4.89688 12 6 12ZM2 4C0.896875 4 0 4.89688 0 6V14C0 15.1031 0.896875 16 2 16H8C9.10312 16 10 15.1031 10 14V13.5H8.5V14C8.5 14.275 8.275 14.5 8 14.5H2C1.725 14.5 1.5 14.275 1.5 14V6C1.5 5.725 1.725 5.5 2 5.5H2.5V4H2Z",
+    fill: "currentColor"
+  }
+), d = () => /* @__PURE__ */ C(t, { children: [
   /* @__PURE__ */ C(
     "path",
     {
@@ -145,31 +158,55 @@ const l = () => /* @__PURE__ */ C(e, { children: [
       fill: "currentColor"
     }
   )
-] }), d = () => /* @__PURE__ */ C(
+] }), a = () => /* @__PURE__ */ C(
   "path",
   {
     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"
   }
-), a = () => /* @__PURE__ */ C(
+), h = () => /* @__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"
   }
-), f = () => /* @__PURE__ */ C(
+), M = () => /* @__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"
   }
-), M = () => /* @__PURE__ */ C(
+), Z = () => /* @__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"
   }
-), Z = () => /* @__PURE__ */ C(
+), s = () => /* @__PURE__ */ C(
+  "path",
+  {
+    d: "M12.0008 0L12.2474 0.0133305C13.4139 0.133305 14.3303 1.08643 14.3937 2.26951C14.9869 2.66276 15.3968 3.31595 15.4601 4.06579L15.4668 4.26575C15.4668 4.45571 15.4434 4.639 15.4001 4.81563C15.7401 5.19888 15.96 5.69211 15.9933 6.23865L16 6.39862C16 6.83852 15.88 7.2451 15.6734 7.59836C15.8367 7.8783 15.9467 8.1949 15.9833 8.53149L15.9967 8.7981C15.9967 10.0412 15.0535 11.0609 13.8438 11.1843L13.5972 11.1976H9.94126L10.4112 12.1974L10.5145 12.4506C10.9311 13.6404 10.4545 14.9668 9.37471 15.6166L9.13476 15.7466C7.88502 16.3331 6.412 15.8666 5.71548 14.7068L5.69548 14.6768L5.6055 14.5102L5.5855 14.4702L4.58238 12.3373C4.26911 12.9305 3.64924 13.3338 2.93272 13.3338H1.86628C0.836492 13.3338 0 12.4973 0 11.4675L0.00333259 3.99914C0.00333259 2.96936 0.839825 2.13287 1.86961 2.13287H2.93606C3.3493 2.13287 3.73256 2.26951 4.04249 2.49946C4.4824 1.78628 5.10894 1.18641 5.87544 0.779832L6.28202 0.563212L6.30535 0.553214L6.52531 0.44657L6.54864 0.436572L6.78525 0.336594C7.3418 0.116641 7.93501 0.00666513 8.53822 0.00666513L12.0008 0ZM8.53156 1.59965C8.13164 1.59965 7.73506 1.67631 7.3618 1.81961L7.20517 1.88626L7.02854 1.97291L6.62195 2.18953C5.64882 2.70608 5.01229 3.68587 4.93231 4.77564L4.92564 5.04225V8.80477L4.92897 8.9414C4.94564 9.21468 5.01229 9.48129 5.12893 9.73123L7.02187 13.7604L7.09186 13.887C7.3718 14.3436 7.95834 14.5235 8.45157 14.2936L8.54822 14.2403C8.98146 13.9803 9.17142 13.4504 9.00479 12.9739L8.9648 12.8739L7.95834 10.7344C7.8417 10.4877 7.8617 10.1978 8.00833 9.96452C8.15497 9.73123 8.40825 9.5946 8.68152 9.5946H13.5972L13.6772 9.59126C14.0537 9.5546 14.3537 9.25467 14.3903 8.87808L14.3937 8.79477C14.3937 8.55815 14.2904 8.34487 14.1204 8.1949C13.9471 8.0416 13.8471 7.82498 13.8471 7.59503C13.8471 7.36508 13.9471 7.14846 14.1204 6.99516C14.267 6.86518 14.367 6.68522 14.387 6.48527L14.3937 6.39529C14.3937 6.11535 14.247 5.8654 14.0204 5.7221C13.6638 5.49215 13.5472 5.02558 13.7538 4.65566C13.8038 4.56901 13.8371 4.46904 13.8504 4.36906L13.8571 4.26241C13.8571 3.90916 13.6272 3.60922 13.3039 3.50258C12.914 3.37594 12.6807 2.97269 12.7707 2.56945C12.7773 2.53945 12.7807 2.50946 12.784 2.4828L12.7907 2.39615C12.7907 1.98291 12.4741 1.64298 12.0708 1.60299L12.0008 1.59965H8.53156ZM1.86961 3.73253C1.72297 3.73253 1.603 3.8525 1.603 3.99914V11.4642C1.603 11.6108 1.72297 11.7308 1.86961 11.7308H2.93606C3.08269 11.7308 3.20267 11.6108 3.20267 11.4642V3.99914C3.20267 3.8525 3.08269 3.73253 2.93606 3.73253H1.86961Z",
+    fill: "currentColor"
+  }
+), f = () => /* @__PURE__ */ C(
+  "path",
+  {
+    d: "M12.3871 0C13.2419 0 13.9355 0.695193 13.9355 1.55206C13.9355 1.75577 13.8935 1.94654 13.8258 2.12438C14.4839 2.30222 14.9677 2.90364 14.9677 3.62147C14.9677 3.91571 14.8839 4.19056 14.7419 4.4266C15.4581 4.56241 16 5.19293 16 5.94956C16 6.58655 15.6161 7.133 15.0677 7.37228C15.6161 7.61155 16 8.15801 16 8.795C16 9.65186 15.3065 10.3471 14.4516 10.3471H9.29032L10.2 12.6234C10.2806 12.8271 10.3226 13.047 10.3226 13.2669V13.4027C10.3226 14.2854 9.60968 15 8.72903 15C8.12581 15 7.57419 14.6573 7.30323 14.1173L5.4871 10.4861C5.27097 10.056 5.16129 9.58073 5.16129 9.09894V3.06532C5.16129 2.43803 5.44839 1.84307 5.93548 1.44859L6.32903 1.13494C7.24516 0.400949 8.38065 0 9.55161 0H12.3871ZM2.58065 2.06941C3.15161 2.06941 3.6129 2.5318 3.6129 3.10412V11.3818C3.6129 11.9541 3.15161 12.4165 2.58065 12.4165H1.03226C0.46129 12.4165 0 11.9541 0 11.3818V3.10412C0 2.5318 0.46129 2.06941 1.03226 2.06941H2.58065Z",
+    fill: "currentColor"
+  }
+), V = () => /* @__PURE__ */ C(
+  "path",
+  {
+    d: "M5.72095 1.29317C6.41399 0.133424 7.88671 -0.333142 9.13619 0.253398L9.37609 0.380037C10.5356 1.07655 11.0021 2.54957 10.4157 3.7993L9.94586 4.79908H13.601L13.8476 4.81241C15.0571 4.93572 16 5.95883 16 7.19857C16 7.63847 15.8801 8.04505 15.6735 8.39831C15.8767 8.75157 15.9967 9.15814 16 9.59805C16 10.2079 15.7701 10.7578 15.4003 11.181C15.4436 11.3577 15.4669 11.541 15.4669 11.7309C15.4669 12.5674 15.0371 13.2973 14.394 13.7272C14.3307 14.9102 13.4144 15.8667 12.2482 15.9833L12.0017 15.9967H8.53311C7.93336 15.9967 7.33694 15.8834 6.78051 15.6667L6.54394 15.5668L6.52062 15.5568L6.30071 15.4501L6.27738 15.4401L5.87089 15.2235C5.46106 15.0069 5.09454 14.7336 4.77468 14.4203C4.63807 15.3168 3.86506 16 2.93211 16H1.86589C0.836318 16 0 15.1635 0 14.1337L0.00666392 6.66535C0.00666392 5.63557 0.842982 4.79908 1.87255 4.79908H2.93878C3.29863 4.79908 3.63515 4.9024 3.9217 5.08236L5.591 1.53312L5.611 1.49313L5.70096 1.3265L5.72095 1.29651V1.29317ZM1.87255 6.39874C1.72595 6.39874 1.606 6.51871 1.606 6.66535V14.1304C1.606 14.277 1.72595 14.397 1.87255 14.397H2.93878C3.08538 14.397 3.20533 14.277 3.20533 14.1304V6.66535C3.20533 6.51871 3.08538 6.39874 2.93878 6.39874H1.87255ZM8.45648 1.69975C7.96335 1.4698 7.38026 1.64643 7.10037 2.09967L7.02707 2.23297L5.13453 6.2621C5.01791 6.51205 4.95127 6.77866 4.93461 7.05193L4.93128 7.1919V10.9544L4.93794 11.2177C5.01791 12.3075 5.65098 13.2873 6.62724 13.8071L7.01041 14.0104L7.22032 14.1137C7.63349 14.3004 8.07997 14.397 8.53311 14.397H12.0017L12.0816 14.3937C12.4848 14.3537 12.8013 14.0104 12.8013 13.5972L12.7947 13.5105C12.7913 13.4805 12.788 13.4539 12.7813 13.4239C12.6914 13.0206 12.9246 12.6174 13.3145 12.4908C13.6377 12.3874 13.8676 12.0842 13.8676 11.7309C13.8676 11.5876 13.8309 11.4576 13.7643 11.3377C13.5544 10.9678 13.671 10.4979 14.0308 10.2712C14.2574 10.1279 14.404 9.87799 14.404 9.59805C14.404 9.36143 14.3007 9.14815 14.1308 8.99818C13.9575 8.84488 13.8576 8.62826 13.8576 8.39831C13.8576 8.16836 13.9575 7.95174 14.1308 7.79844C14.3007 7.64847 14.404 7.43518 14.404 7.19857L14.4007 7.11858C14.364 6.742 14.0641 6.44206 13.6876 6.40541L13.6077 6.40207H8.69305C8.41983 6.40207 8.1666 6.2621 8.01999 6.03215C7.87339 5.8022 7.85339 5.50893 7.97001 5.26232L8.9696 3.11945C9.20283 2.61955 9.01624 2.02968 8.5531 1.75307L8.45648 1.69975Z",
+    fill: "currentColor"
+  }
+), p = () => /* @__PURE__ */ C(
+  "path",
+  {
+    d: "M2.58065 4.65517C3.15161 4.65517 3.6129 5.11746 3.6129 5.68965V13.9655C3.6129 14.5377 3.15161 15 2.58065 15H1.03226C0.46129 15 0 14.5377 0 13.9655V5.68965C0 5.11746 0.46129 4.65517 1.03226 4.65517H2.58065ZM8.72903 0C9.60968 0 10.3226 0.714439 10.3226 1.59698V1.73276C10.3226 1.95259 10.2806 2.17241 10.2 2.37608L9.29032 4.65517H14.4516C15.3065 4.65517 16 5.35022 16 6.2069C16 6.84375 15.6161 7.39009 15.0677 7.62931C15.6161 7.86853 16 8.41487 16 9.05172C16 9.80819 15.4581 10.4386 14.7419 10.5744C14.8839 10.8103 14.9677 11.0851 14.9677 11.3793C14.9677 12.097 14.4839 12.6983 13.8258 12.8761C13.8968 13.0539 13.9355 13.2478 13.9355 13.4483C13.9355 14.305 13.2419 15 12.3871 15H9.55161C8.38065 15 7.24194 14.5991 6.32903 13.8653L5.93548 13.5517C5.44516 13.1606 5.16129 12.5657 5.16129 11.9353V5.90302C5.16129 5.42134 5.27419 4.94612 5.4871 4.51616L7.3 0.882543C7.57097 0.342672 8.12258 0 8.72903 0Z",
+    fill: "currentColor"
+  }
+), k = () => /* @__PURE__ */ C(
   "path",
   {
     "fill-rule": "evenodd",
@@ -177,48 +214,54 @@ const l = () => /* @__PURE__ */ C(e, { children: [
     d: "M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM7.48998 7.58293C7.24532 7.9418 7.1073 8.36489 7.09243 8.80158L7.09232 9.00062C7.09232 9.21263 7.17498 9.41595 7.32211 9.56587C7.46924 9.71578 7.6688 9.8 7.87688 9.8C8.08495 9.8 8.28451 9.71578 8.43164 9.56587C8.57878 9.41595 8.66143 9.21263 8.66143 9.00062V8.8172C8.67459 8.68789 8.72283 8.56481 8.80083 8.46179C8.82284 8.43271 8.87624 8.39281 8.96482 8.34893C9.04677 8.30834 9.13665 8.27475 9.21483 8.24583L9.2194 8.24414L9.22961 8.24053L9.23662 8.2376C9.7635 8.01739 10.1981 7.61624 10.4651 7.10372C10.7321 6.5912 10.8149 5.99957 10.6987 5.43153L10.6962 5.42197C10.5641 4.91215 10.2876 4.45323 9.90133 4.10235C9.51593 3.7523 9.03819 3.52522 8.52737 3.44924C8.1077 3.37054 7.67619 3.38633 7.26312 3.49553C6.849 3.605 6.46349 3.80568 6.13376 4.08342C5.58181 4.54443 5.25866 5.23048 5.25 5.95706V5.95934C5.25 6.17135 5.33266 6.37468 5.47979 6.52459C5.62692 6.6745 5.82648 6.75872 6.03456 6.75872C6.24264 6.75872 6.44219 6.6745 6.58933 6.52459C6.73595 6.37519 6.81855 6.17275 6.81911 5.96153C6.82486 5.70702 6.94287 5.46722 7.13988 5.30865C7.29566 5.18188 7.47721 5.09021 7.67067 5.04112C7.86413 4.99203 8.06566 4.98632 8.26159 5.02383L8.2716 5.02518C8.47683 5.05273 8.67003 5.13962 8.82831 5.27556C8.98372 5.40903 9.09909 5.5843 9.16133 5.78128C9.23237 6.20988 8.99652 6.63061 8.59639 6.78484L8.59136 6.78696C8.22065 6.94277 7.74615 7.20718 7.48998 7.58293ZM7.87406 12.6C8.42636 12.6 8.8741 12.1523 8.8741 11.6C8.8741 11.0477 8.42636 10.6 7.87406 10.6C7.32175 10.6 6.87402 11.0477 6.87402 11.6C6.87402 12.1523 7.32175 12.6 7.87406 12.6Z",
     fill: "currentColor"
   }
-), h = () => /* @__PURE__ */ C(
+), m = () => /* @__PURE__ */ C(
   "path",
   {
     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(
+), y = () => /* @__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",
     fill: "currentColor"
   }
-), s = () => /* @__PURE__ */ C(
+), I = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M13.975 7.77494C21.275 13.2374 29.125 24.3374 32 30.2999C34.875 24.3499 42.725 13.2499 50.025 7.77494C55.2875 3.82494 63.8125 0.77494 63.8125 10.4999C63.8125 12.4374 62.7 26.8124 62.05 29.1499C59.775 37.2499 51.5 39.3249 44.1375 38.0624C57 40.2499 60.275 47.4999 53.2 54.7499C39.775 68.5249 33.9125 51.2999 32.4125 46.8874C32.2 46.2749 32.0875 45.9124 32 45.9124C31.9125 45.9124 31.8 46.2874 31.5875 46.8874C30.0875 51.2999 24.2125 68.5249 10.8 54.7499C3.7375 47.4999 7 40.2499 19.8625 38.0624C12.5 39.3249 4.225 37.2499 1.9625 29.1374C1.3 26.7999 0.1875 12.4249 0.1875 10.4874C0.1875 0.76244 8.7125 3.81244 13.975 7.76244V7.77494Z",
     fill: "currentColor"
   }
-), p = () => /* @__PURE__ */ C(
+), b = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M61.0785 13.8158C60.3785 11.1773 58.3229 9.10664 55.7118 8.40527C50.9785 7.125 32.0007 7.125 32.0007 7.125C32.0007 7.125 13.0229 7.125 8.28958 8.40527C5.67847 9.10664 3.62292 11.1773 2.92292 13.8158C1.65625 18.5918 1.65625 28.5445 1.65625 28.5445C1.65625 28.5445 1.65625 38.4973 2.92292 43.2732C3.62292 45.9117 5.67847 47.8934 8.28958 48.5947C13.0229 49.875 32.0007 49.875 32.0007 49.875C32.0007 49.875 50.9785 49.875 55.7118 48.5947C58.3229 47.8934 60.3785 45.9006 61.0785 43.2732C62.3451 38.4973 62.3451 28.5445 62.3451 28.5445C62.3451 28.5445 62.3451 18.5918 61.0785 13.8158ZM25.8007 37.5844V19.5047L41.6563 28.5445L25.8007 37.5844Z",
     fill: "currentColor"
   }
-), V = {
-  askNetlify: l,
+), g = {
+  askNetlify: n,
   book: o,
-  caretRight: L,
-  code: a,
-  comment: c,
-  link: d,
-  lightbulb: u,
-  pageWithLines: f,
-  rss: i,
-  search: n,
-  terminal: M,
-  question: Z,
-  bluesky: s,
-  linkedin: h,
-  twitter: H,
-  youtube: p
+  caretRight: e,
+  check: i,
+  code: h,
+  comment: u,
+  copy: H,
+  link: a,
+  lightbulb: d,
+  pageWithLines: M,
+  rss: c,
+  search: l,
+  terminal: Z,
+  thumbsDown: s,
+  thumbsDownSolid: f,
+  thumbsUp: V,
+  thumbsUpSolid: p,
+  question: k,
+  bluesky: I,
+  linkedin: m,
+  twitter: y,
+  youtube: b
 };
 export {
-  I as default
+  S as default
 };

package/dist/components/preact/Popover/Popover.js

@@ -1,23 +1,23 @@
 import { u as r } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { g as a } from "../../../chunks/hooks.module.DGkdD5n9.js";
+import { g as d } from "../../../chunks/hooks.module.DGkdD5n9.js";
 import '../../../assets/Popover.css';const v = ({
   id: e,
-  content: t,
-  position: p = "top",
+  content: p,
+  position: t = "top",
   class: n = "",
   children: s,
   ...i
 }) => {
-  const d = a(), o = e || d;
-  return /* @__PURE__ */ r("div", { id: o, class: `n-popover-container n-popover-${p} ${n}`, ...i, children: [
-    /* @__PURE__ */ r("button", { class: "n-popover-trigger", "aria-describedby": `${o}-popover`, type: "button", children: s }),
+  const a = d(), o = e || a;
+  return /* @__PURE__ */ r("div", { id: o, class: `n-popover-container n-popover-${t} ${n}`, ...i, children: [
+    /* @__PURE__ */ r("span", { class: "n-popover-trigger", "aria-describedby": `${o}-popover`, children: s }),
     /* @__PURE__ */ r(
       "div",
       {
         id: `${o}-popover`,
         class: "n-popover",
         role: "tooltip",
-        dangerouslySetInnerHTML: { __html: t }
+        dangerouslySetInnerHTML: { __html: p }
       }
     )
   ] });

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

@@ -1,6 +1,6 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import { A as g, y as f, d } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as K, K as L } from "../../../../../chunks/AskNetlify.1Uqf__uI.js";
+import { A as K, K as L } from "../../../../../chunks/AskNetlify.BYFTesUF.js";
 import P from "../../../Modal/Modal.js";
 import h from "../../../KeyboardKey/KeyboardKey.js";
 import M from "../SearchWindow.js";

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

@@ -1,5 +1,5 @@
 import { A as y, y as h, q as d } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as T } from "../../../../chunks/analytics.Ch1vuuOl.js";
+import { A as T } from "../../../../chunks/analytics.D_dJH08O.js";
 function A(r, l) {
   const n = y(new T()).current, e = (c) => c.debug_mode = !0;
   return h(() => {

package/dist/components/preact/index.js

@@ -4,7 +4,7 @@ import { default as m } from "./Icon/index.js";
 import { default as s } from "./SearchModal/components/SearchLink/SearchLink.js";
 import { default as u } from "./SearchModal/components/SearchHeading/SearchHeading.js";
 import { default as i } from "./SearchModal/components/SearchToggle/SearchToggle.js";
-import { A as S } from "../../chunks/AskNetlify.1Uqf__uI.js";
+import { A as S } from "../../chunks/AskNetlify.BYFTesUF.js";
 import "preact";
 import "../../chunks/hooks.module.DGkdD5n9.js";
 import { default as n } from "./SearchModal/components/SearchModal/SearchModal.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.17.6",
+  "version": "1.18.0-alpha.1",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -68,4 +68,4 @@
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1"
   }
-}
+}

package/packages/analytics/analytics.ts

@@ -1,16 +1,40 @@
 export default class Analytics {
-
   /**
-   * Pushes an event payload into the dataLayer.
+   * Pushes an event payload into both Google Analytics (gtag) and Segment.
    * @param eventName e.g. 'www:search_new_query'
    * @param payload   additional key/value data
    */
   track(eventName: string, payload: Record<string, any> = {}): void {
-    // Ensures that gtag is available before pushing events
+    // Track with Google Analytics (gtag)
     if (typeof gtag === 'function') {
       gtag('event', eventName, { ...payload });
     } else {
       console.error(`gtag is not defined. Event [${eventName}] failed.`);
     }
+
+    // Track with Segment
+    if (typeof window !== 'undefined' && window.analytics) {
+      try {
+        window.analytics.track(eventName, payload);
+      } catch (error) {
+        console.error(`Segment track failed for event [${eventName}]:`, error);
+      }
+    } else {
+      console.warn(`Segment analytics is not loaded. Event [${eventName}] not sent to Segment.`);
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    analytics: {
+      track: (
+        event: string,
+        properties?: Record<string, any>,
+        options?: Record<string, any>,
+        callback?: () => void
+      ) => void;
+    };
   }
-}
+  function gtag(...args: any[]): void;
+}

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

@@ -121,7 +121,7 @@
 }
 
 .n-ask-sources {
-  margin-block-start: var(--space-m);
+  margin-block-start: var(--space-xs);
 }
 
 .n-ask-sources-title {
@@ -168,6 +168,29 @@
   transform: rotate(270deg);
 }
 
+.n-ask-action-bar {
+  margin-block-start: var(--space-m);
+}
+
+.n-ask-action-bar button {
+  display: grid;
+  border: none;
+}
+
+.n-ask-action-bar button svg {
+  pointer-events: none;
+}
+
+.n-ask-action-bar .n-popover {
+  --n-popover-padding: var(--space-3xs) var(--space-2xs);
+  --n-popover-bottom: 125%;
+}
+
+.n-ask-action-bar [id*='icon-'] {
+  width: auto;
+  height: 1rem;
+}
+
 /* ----------------------------- */
 /* Form UI                      */
 /* ----------------------------- */

package/packages/components/preact/AskNetlify/AskNetlify.tsx

@@ -23,8 +23,14 @@ export default function AskNetlify({ setModalState, searchQuery, urlParamQuery }
   const inputRef = useRef<HTMLInputElement>(null);
   const lastMessageRef = useRef<HTMLDivElement | null>(null);
 
-  const { conversation, submitQuery, isGeneratingAnswer, isPreparingAnswer, stopGeneration } =
-    useChat();
+  const {
+    conversation,
+    submitQuery,
+    isGeneratingAnswer,
+    isPreparingAnswer,
+    stopGeneration,
+    addFeedback,
+  } = useChat();
 
   const handleSubmit = (e: Event | preact.JSX.TargetedMouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
@@ -78,6 +84,7 @@ export default function AskNetlify({ setModalState, searchQuery, urlParamQuery }
             isPreparingAnswer={isPreparingAnswer}
             conversation={conversation}
             lastMessageRef={lastMessageRef}
+            addFeedback={addFeedback}
           />
         )}
       </div>

package/packages/components/preact/AskNetlify/components/ActionBar.tsx

@@ -0,0 +1,118 @@
+import Icon from '@components/preact/Icon';
+import Popover from '@components/preact/Popover/Popover';
+import Analytics from '@analtyics/analytics';
+interface ActionBarProps {
+  answer: string;
+  questionAnswerId: string;
+  addFeedback: (id: string, type: string, meta?: object) => void;
+}
+
+const toggleFeedbackButton = (e: MouseEvent): void => {
+  const btn = (e.target as HTMLElement).closest('button');
+  if (!btn) return;
+
+  const isHelpfulBtn = btn.classList.contains('btn-feedback-helpful');
+  const isIncorrectBtn = btn.classList.contains('btn-feedback-incorrect');
+
+  // Only proceed if it's one of the feedback buttons
+  if (!isHelpfulBtn && !isIncorrectBtn) return;
+
+  // Get both feedback buttons
+  const actionBar = btn.closest('.n-ask-action-bar');
+  const helpfulBtn = actionBar?.querySelector('.btn-feedback-helpful');
+  const incorrectBtn = actionBar?.querySelector('.btn-feedback-incorrect');
+
+  // Reset both buttons first (hide all solid icons, show all outline icons)
+  [helpfulBtn, incorrectBtn].forEach(button => {
+    if (!button) return;
+    const icons = button.querySelectorAll('[id*="icon"]');
+    icons.forEach((icon, index) => {
+      if (index === 0) {
+        icon.classList.remove('hidden'); // Show outline
+      } else {
+        icon.classList.add('hidden'); // Hide solid
+      }
+    });
+  });
+
+  // Toggle the clicked button
+  const clickedIcons = btn.querySelectorAll('[id*="icon"]');
+  clickedIcons.forEach(icon => {
+    icon.classList.toggle('hidden');
+  });
+};
+
+const copyToClipboard = async (text: string): Promise<void> => {
+  const copyPopover = document.getElementById('copy-popover');
+  try {
+    await navigator.clipboard.writeText(text);
+    if (copyPopover) {
+      copyPopover.textContent = 'Copied';
+      setTimeout(() => {
+        copyPopover.textContent = 'Copy';
+        copyPopover.blur();
+      }, 2000);
+    }
+  } catch (error) {
+    console.error('Failed to copy code: ', error);
+    if (copyPopover) {
+      copyPopover.textContent = 'Failed to copy';
+      setTimeout(() => {
+        copyPopover.textContent = 'Copy';
+        copyPopover.blur();
+      }, 2000);
+    }
+  }
+};
+
+export function ActionBar({ answer, questionAnswerId, addFeedback }: ActionBarProps) {
+  const analytics = new Analytics();
+
+  return (
+    <div className="n-ask-action-bar">
+      <Popover id="copy" content={`Copy`}>
+        <button
+          onClick={() => {
+            copyToClipboard(answer);
+            analytics.track('ask:copy_answer', { id: questionAnswerId });
+          }}
+        >
+          <Icon name="copy" />
+        </button>
+      </Popover>
+
+      <Popover id="feedback-helpful" content={`Helpful`}>
+        <button
+          class="btn-feedback-helpful n-stack"
+          onClick={e => {
+            toggleFeedbackButton(e as unknown as MouseEvent);
+            addFeedback(questionAnswerId, 'upvote');
+            analytics.track('ask:feedback_helpful', { id: questionAnswerId });
+          }}
+        >
+          <Icon name="thumbsUp" />
+          <Icon name="thumbsUpSolid" className="hidden" />
+        </button>
+      </Popover>
+
+      <Popover id="feedback-incorrect" content={`Not helpful`}>
+        <button
+          class="btn-feedback-incorrect n-stack"
+          onClick={e => {
+            toggleFeedbackButton(e as unknown as MouseEvent);
+            addFeedback(questionAnswerId, 'downvote', {
+              incorrect: true,
+              irrelevant: false,
+              unaddressed: false,
+              issue: "This information isn't accurate",
+            });
+            analytics.track('ask:feedback_not_helpful', { id: questionAnswerId });
+          }}
+        >
+          <Icon name="thumbsDown" />
+          <Icon name="thumbsDownSolid" className="hidden" />
+        </button>
+      </Popover>
+    </div>
+  );
+}

package/packages/components/preact/AskNetlify/components/ChatMessages.tsx

@@ -2,15 +2,18 @@ import { marked } from 'marked';
 import Icon from '../../Icon';
 import { Ref } from 'preact';
 import { SourcesList } from './SourcesList';
+import { ActionBar } from './ActionBar';
 
 export function ChatMessages({
   conversation,
   lastMessageRef,
   isPreparingAnswer,
+  addFeedback,
 }: {
   conversation: any[];
   lastMessageRef: Ref<HTMLDivElement>;
   isPreparingAnswer: boolean;
+  addFeedback: any;
 }) {
   return (
     <>
@@ -29,11 +32,18 @@ export function ChatMessages({
 
             <div class="n-ask-message-left">
               {qa.answer && (
-                <div class="n-ask-message-bubble n-ask-bot-message">
+                <div class="n-ask-message-bubble n-ask-bot-message flow">
                   <div
                     class="n-ask-message-answer n-ask-prose prose flow"
                     dangerouslySetInnerHTML={{ __html: marked.parse(qa.answer) }}
                   />
+                  {qa.id && (
+                    <ActionBar
+                      answer={qa.answer}
+                      addFeedback={addFeedback}
+                      questionAnswerId={qa.id}
+                    />
+                  )}
                   {qa.id && <SourcesList sources={qa.sources} />}
                 </div>
               )}