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

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

@@ -7,92 +7,75 @@ type Props = {
 export default function Icon(props: Props) {
   const IconPath = iconPathMap[props.name];
 
-  return (
-    <svg data-icon={props.name} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <IconPath />
+  if (!IconPath) return;
+
+  return (
+    <svg
+      id={`icon-${props.name}`}
+      data-icon={props.name}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <IconPath />;
     </svg>
   );
 }
 
-const SearchIcon: FunctionComponent = () => {
-  return (
-    <path
-      d="M8.5328 26.6769C8.5328 16.6562 16.6562 8.5328 26.6769 8.5328C36.6977 8.5328 44.8211 16.6562 44.8211 26.6769C44.8211 36.6977 36.6977 44.8211 26.6769 44.8211C16.6562 44.8211 8.5328 36.6977 8.5328 26.6769ZM26.6769 0C11.9437 0 0 11.9437 0 26.6769C0 41.4102 11.9437 53.3539 26.6769 53.3539C32.5038 53.3539 37.8943 51.4858 42.2822 48.3158L56.7168 62.7504C58.3829 64.4165 61.0843 64.4165 62.7504 62.7504C64.4165 61.0843 64.4165 58.3829 62.7504 56.7168L48.3158 42.2822C51.4858 37.8943 53.3539 32.5038 53.3539 26.6769C53.3539 11.9437 41.4102 0 26.6769 0Z"
-      fill="currentColor"
-    />
-  );
-};
-
-const SparklesIcon: FunctionComponent = () => {
-  return (
-    <path
-      d="M45.264 17.719L37.08 15.439C35.64 14.987 35.64 13.011 37.08 12.631L45.264 10.275C45.4922 10.1958 45.6994 10.0656 45.8699 9.89446C46.0404 9.72329 46.1697 9.51555 46.248 9.287L48.6 1.083C49.052 -0.361 51.024 -0.361 51.4 1.083L53.676 9.287C53.7543 9.51555 53.8836 9.72329 54.0541 9.89446C54.2246 10.0656 54.4318 10.1958 54.66 10.275L62.92 12.635C64.36 13.087 64.36 15.063 62.92 15.443L54.736 17.723C54.5078 17.8022 54.3006 17.9324 54.1301 18.1035C53.9596 18.2747 53.8303 18.4824 53.752 18.711L51.4 26.915C50.948 28.359 48.976 28.359 48.6 26.915L46.248 18.711C46.1694 18.4826 46.0401 18.275 45.8696 18.1039C45.6992 17.9327 45.4921 17.8025 45.264 17.723V17.719ZM29.36 33.663L42.348 37.615C44.536 38.271 44.536 41.643 42.424 42.383L29.436 46.335C29.0506 46.4707 28.7043 46.6988 28.4274 46.9994C28.1506 47.2999 27.9516 47.6637 27.848 48.059L24.224 62.211C24.1201 62.7151 23.8456 63.1679 23.4466 63.4931C23.0476 63.8182 22.5487 63.9958 22.034 63.9958C21.5193 63.9958 21.0204 63.8182 20.6214 63.4931C20.2224 63.1679 19.9479 62.7151 19.844 62.211L16.22 48.059C16.1164 47.6637 15.9174 47.2999 15.6406 46.9994C15.3637 46.6988 15.0174 46.4707 14.632 46.335L1.644 42.383C-0.548 41.727 -0.548 38.271 1.644 37.615L14.556 33.663C14.9414 33.5273 15.2877 33.2992 15.5646 32.9986C15.8414 32.6981 16.0404 32.3343 16.144 31.939L19.768 17.787C19.8719 17.2829 20.1464 16.8301 20.5454 16.5049C20.9444 16.1798 21.4433 16.0022 21.958 16.0022C22.4727 16.0022 22.9716 16.1798 23.3706 16.5049C23.7696 16.8301 24.0441 17.2829 24.148 17.787L27.772 31.939C28 32.759 28.604 33.419 29.36 33.663Z"
-      fill="currentColor"
-    />
-  );
-};
-
-const NetlifyIcon: FunctionComponent = () => {
+const AskNetlify: FunctionComponent = () => {
   return (
     <>
       <path
-        d="M35.9844 32.8064H28.0101L27.3492 32.1231V23.877L28.0101 23.1936H35.9844L36.6452 23.877V32.1231L35.9844 32.8064Z"
+        id="ask-netlify-tick-3"
+        d="M9.26465 1.02094L9.31322 0.921348L10.0528 0.666687L10.1524 0.715259L10.5563 1.9638L10.2999 2.4895L10.195 2.52628L9.6685 2.26948L9.26465 1.02094Z"
         fill="currentColor"
       />
       <path
-        d="M19.3916 45.233H18.7141L15.3322 41.7359V41.041L20.5022 35.6891L24.084 35.6948L24.5616 36.1829V39.8868L19.3916 45.233Z"
+        id="ask-netlify-tick-1"
+        d="M15.5915 3.11667L15.6942 3.15818L15.9999 3.8782L15.9584 3.98093L14.741 4.4709L14.1987 4.25179L14.1547 4.14977L14.3742 3.60663L15.5915 3.11667Z"
         fill="currentColor"
       />
       <path
-        d="M15.3322 14.9647V14.2642L18.7141 10.767H19.3916L24.5616 16.1132V19.8113L24.084 20.3109H20.5022L15.3322 14.9647Z"
+        id="ask-netlify-tick-2"
+        d="M12.8306 0.944052L12.9353 0.907978L13.6384 1.25087L13.6744 1.35564L12.9408 2.91375L12.3877 3.10417L12.2876 3.05604L12.0969 2.50216L12.8306 0.944052Z"
         fill="currentColor"
       />
       <path
-        d="M20.0913 30.9746H0.410933L0 30.5496V25.4504L0.410933 25.0254H20.0913L20.5022 25.4504V30.5496L20.0913 30.9746Z"
+        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
-        d="M63.5891 30.9746H43.9087L43.4978 30.5496V25.4504L43.9087 25.0254H63.5891L64 25.4504V30.5496L63.5891 30.9746Z"
+        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"
       />
       <path
-        d="M29.1263 15.6883V0.424938L29.5372 0H34.4684L34.8793 0.424938V15.6883L34.4684 16.1132H29.5372L29.1263 15.6883Z"
+        d="M8.41582 10.9491L8.43331 10.994L8.43337 11.2417L8.41589 11.2866L7.86046 12.4215L7.78018 12.4806H7.5763L7.49602 12.4215L6.91751 11.2866L6.90003 11.2417L6.89997 11.2114V10.994L6.91745 10.9491L7.55316 10.526H7.75704L8.41582 10.9491Z"
         fill="currentColor"
       />
       <path
-        d="M29.1263 55.5751V40.3117L29.5372 39.8868H34.4684L34.8793 40.3117V55.5751L34.4684 56H29.5372L29.1263 55.5751Z"
-        fill="currentColor"
-      />
-      <path
-        d="M36.6452 32.1231L35.9844 32.8064H28.0101L27.3492 32.1231V23.877L28.0101 23.1936H35.9844L36.6452 23.877V32.1231ZM35.0452 24.7936H28.9492V31.2064H35.0452V24.7936ZM18.7141 45.233L15.3322 41.7359V41.041L20.5022 35.6891L24.084 35.6948L24.5616 36.1829V39.8868L19.3916 45.233H18.7141ZM22.9616 39.2397L19.0528 43.2816L17.2216 41.388L21.1802 37.2902L22.9616 37.293V39.2397ZM17.2193 14.6144L21.1807 18.7109H22.9616V16.7603L19.0528 12.7184L17.2193 14.6144ZM15.3322 14.2642L18.7141 10.767H19.3916L24.5616 16.1132V19.8113L24.084 20.3109H20.5022L15.3322 14.9647V14.2642ZM20.5022 30.5496L20.0913 30.9746H0.410933L0 30.5496V25.4504L0.410933 25.0254H20.0913L20.5022 25.4504V30.5496ZM18.9022 26.6254V29.3746H1.6V26.6254H18.9022ZM62.4 29.3746V26.6254H45.0978V29.3746H62.4ZM43.4978 30.5496V25.4504L43.9087 25.0254H63.5891L64 25.4504V30.5496L63.5891 30.9746H43.9087L43.4978 30.5496ZM30.7263 14.5132H33.2793V1.6H30.7263V14.5132ZM29.5372 0H34.4684L34.8793 0.424938V15.6883L34.4684 16.1132H29.5372L29.1263 15.6883V0.424938L29.5372 0ZM30.7263 54.4H33.2793V41.4868H30.7263V54.4ZM29.5372 39.8868H34.4684L34.8793 40.3117V55.5751L34.4684 56H29.5372L29.1263 55.5751V40.3117L29.5372 39.8868Z"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        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"
       />
     </>
   );
 };
 
-const BookIcon: FunctionComponent = () => {
-  return (
-    <path
-      d="M0 11C0 4.925 4.925 0 11 0H49C52.8625 0 56 3.1375 56 7V43C56 45.7875 54.3625 48.2 52 49.325V58H53C54.6625 58 56 59.3375 56 61C56 62.6625 54.6625 64 53 64H10C4.475 64 0 59.525 0 54C0 53.6625 0.0125 53.325 0.05 53H0V11ZM10 50C7.7875 50 6 51.7875 6 54C6 56.2125 7.7875 58 10 58H46V50H10ZM6 44.8375C7.225 44.3 8.575 44 10 44H49C49.55 44 50 43.55 50 43V7C50 6.45 49.55 6 49 6H11C8.2375 6 6 8.2375 6 11V44.8375ZM19 14H41C42.6625 14 44 15.3375 44 17C44 18.6625 42.6625 20 41 20H19C17.3375 20 16 18.6625 16 17C16 15.3375 17.3375 14 19 14ZM19 24H41C42.6625 24 44 25.3375 44 27C44 28.6625 42.6625 30 41 30H19C17.3375 30 16 28.6625 16 27C16 25.3375 17.3375 24 19 24Z"
-      fill="currentColor"
-    />
-  );
-};
-
-const PencilIcon: FunctionComponent = () => {
+const SearchIcon: FunctionComponent = () => {
   return (
     <path
-      d="M50.963 8.1111C50.1278 8.1111 49.3269 8.44286 48.7364 9.03338L9.92665 47.8431L8.44226 53.7807L14.3798 52.2963L53.1896 13.4865C53.482 13.1941 53.7139 12.847 53.8722 12.465C54.0304 12.0829 54.1118 11.6735 54.1118 11.26C54.1118 10.8465 54.0304 10.437 53.8722 10.0549C53.7139 9.67291 53.482 9.32578 53.1896 9.03338C52.8972 8.74098 52.55 8.50904 52.168 8.3508C51.786 8.19255 51.3765 8.1111 50.963 8.1111ZM43.7081 4.00507C45.6322 2.08096 48.2419 1 50.963 1C52.3103 1 53.6445 1.26538 54.8893 1.78099C56.1341 2.29661 57.2651 3.05235 58.2179 4.00507C59.1706 4.9578 59.9263 6.08884 60.4419 7.33364C60.9576 8.57844 61.2229 9.9126 61.2229 11.26C61.2229 12.6073 60.9576 13.9415 60.4419 15.1863C59.9263 16.4311 59.1706 17.5621 58.2179 18.5149L18.7117 58.021C18.2561 58.4767 17.6851 58.7999 17.0599 58.9562L4.41798 62.1167C3.20633 62.4196 1.9246 62.0646 1.04147 61.1815C0.158343 60.2983 -0.196675 59.0166 0.106235 57.805L3.26673 45.163C3.42302 44.5378 3.74629 43.9669 4.20196 43.5112L43.7081 4.00507ZM28.4445 58.6673C28.4445 56.7036 30.0364 55.1118 32 55.1118H60.4444C62.4081 55.1118 64 56.7036 64 58.6673C64 60.631 62.4081 62.2229 60.4444 62.2229H32C30.0364 62.2229 28.4445 60.631 28.4445 58.6673Z"
+      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"
     />
   );
 };
 
-const CubeIcon: FunctionComponent = () => {
+const BookIcon: FunctionComponent = () => {
   return (
     <path
-      d="M50.963 8.1111C50.1278 8.1111 49.3269 8.44286 48.7364 9.03338L9.92665 47.8431L8.44226 53.7807L14.3798 52.2963L53.1896 13.4865C53.482 13.1941 53.7139 12.847 53.8722 12.465C54.0304 12.0829 54.1118 11.6735 54.1118 11.26C54.1118 10.8465 54.0304 10.437 53.8722 10.0549C53.7139 9.67291 53.482 9.32578 53.1896 9.03338C52.8972 8.74098 52.55 8.50904 52.168 8.3508C51.786 8.19255 51.3765 8.1111 50.963 8.1111ZM43.7081 4.00507C45.6322 2.08096 48.2419 1 50.963 1C52.3103 1 53.6445 1.26538 54.8893 1.78099C56.1341 2.29661 57.2651 3.05235 58.2179 4.00507C59.1706 4.9578 59.9263 6.08884 60.4419 7.33364C60.9576 8.57844 61.2229 9.9126 61.2229 11.26C61.2229 12.6073 60.9576 13.9415 60.4419 15.1863C59.9263 16.4311 59.1706 17.5621 58.2179 18.5149L18.7117 58.021C18.2561 58.4767 17.6851 58.7999 17.0599 58.9562L4.41798 62.1167C3.20633 62.4196 1.9246 62.0646 1.04147 61.1815C0.158343 60.2983 -0.196675 59.0166 0.106235 57.805L3.26673 45.163C3.42302 44.5378 3.74629 43.9669 4.20196 43.5112L43.7081 4.00507ZM28.4445 58.6673C28.4445 56.7036 30.0364 55.1118 32 55.1118H60.4444C62.4081 55.1118 64 56.7036 64 58.6673C64 60.631 62.4081 62.2229 60.4444 62.2229H32C30.0364 62.2229 28.4445 60.631 28.4445 58.6673Z"
+      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"
     />
   );
@@ -101,7 +84,7 @@ const CubeIcon: FunctionComponent = () => {
 const CaretRightIcon: FunctionComponent = () => {
   return (
     <path
-      d="M44.0011 24.0013L51.9987 31.9989L52.0008 32.0011L20.0018 64L12.0021 56.0003L36.0013 32.0011L12 7.99974L19.9997 0L44.0011 24.0013Z"
+      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"
     />
   );
@@ -119,12 +102,29 @@ const RSSIcon: FunctionComponent = () => {
 const CommentIcon: FunctionComponent = () => {
   return (
     <path
-      d="M15.4623 44.9025C17.0744 43.7277 19.1614 43.4278 21.0359 44.1027C24.3475 45.3024 28.0591 45.9897 32.0081 45.9897C47.5917 45.9897 58.0015 35.9295 58.0015 25.9942C58.0015 16.0589 47.5917 5.99866 32.0081 5.99866C16.4246 5.99866 6.01468 16.0589 6.01468 25.9942C6.01468 29.9933 7.56429 33.8424 10.4761 37.1417C11.5508 38.3539 12.0756 39.9536 11.9507 41.5782C11.7757 43.8402 11.2384 45.9148 10.5385 47.7518C12.663 46.7646 14.4251 45.6648 15.4623 44.915V44.9025ZM2.66553 49.9763C2.89048 49.6389 3.10292 49.3015 3.30287 48.9641C4.55255 46.8895 5.73975 44.1651 5.97719 41.1033C2.22814 36.8418 0.0162028 31.6304 0.0162028 25.9942C0.0162028 11.6349 14.3376 0 32.0081 0C49.6786 0 64 11.6349 64 25.9942C64 40.3535 49.6786 51.9884 32.0081 51.9884C27.3718 51.9884 22.9729 51.1886 18.9989 49.7514C17.5118 50.8387 15.0874 52.3258 12.2131 53.5755C10.3261 54.4004 8.17664 55.1502 5.9522 55.5876C5.85222 55.6126 5.75225 55.6251 5.65228 55.6501C5.10241 55.7501 4.56505 55.8375 4.00269 55.8875C3.9777 55.8875 3.94021 55.9 3.91522 55.9C3.27788 55.9625 2.64054 56 2.0032 56C1.19091 56 0.466089 55.5126 0.153668 54.7628C-0.158753 54.0129 0.0162028 53.1631 0.57856 52.5883C1.09093 52.0634 1.55331 51.501 1.9907 50.9011C2.20315 50.6137 2.4031 50.3263 2.59055 50.0388L2.62804 49.9763H2.66553Z"
+      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"
     />
   );
 };
 
+const LightbulbIcon: FunctionComponent = () => {
+  return (
+    <>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M4.04938 8.73798C3.2407 7.81172 2.75 6.59946 2.75 5.27071C2.75 2.48473 4.94068 0.00930912 7.98359 2.55322e-05C10.8908 -0.00895859 13.25 2.35416 13.25 5.27071C13.25 6.59946 12.7593 7.81172 11.9506 8.73798C11.4578 9.30248 10.687 10.9818 10.3932 11.9766L10.3899 12H5.61006L5.60678 11.9766C5.31295 10.9818 4.54216 9.30248 4.04938 8.73798ZM8.34274 2.03953C8.42611 2.41703 8.18767 2.79064 7.81017 2.87402C6.80315 3.09642 6.06073 3.89938 5.85994 4.87157C5.78174 5.25018 5.41143 5.49371 5.03282 5.41552C4.65421 5.33732 4.41068 4.96701 4.48888 4.5884C4.79524 3.10505 5.93379 1.85468 7.50825 1.50696C7.88575 1.42359 8.25936 1.66203 8.34274 2.03953Z"
+        fill="currentColor"
+      />
+      <path
+        d="M5.76932 14.9479C5.67636 14.81 5.62681 14.6478 5.62655 14.4823L5.62521 13.5L10.3752 13.5L10.3741 14.4823C10.374 14.648 10.3243 14.81 10.2314 14.9479L9.77614 15.6241C9.69838 15.7397 9.5929 15.8345 9.46909 15.9001C9.34529 15.9657 9.207 16 9.06653 16L6.93417 16C6.7937 16 6.65541 15.9657 6.5316 15.9001C6.4078 15.8345 6.30232 15.7397 6.22455 15.6241L5.76932 14.9479Z"
+        fill="currentColor"
+      />
+    </>
+  );
+};
+
 const LinkIcon: FunctionComponent = () => {
   return (
     <path
@@ -146,7 +146,7 @@ const CodeIcon: FunctionComponent = () => {
 const PageWithLinesIcon: FunctionComponent = () => {
   return (
     <path
-      d="M8 58C6.9 58 6 57.1 6 56V8C6 6.9 6.9 6 8 6H28V16C28 18.2125 29.7875 20 32 20H42V56C42 57.1 41.1 58 40 58H8ZM8 0C3.5875 0 0 3.5875 0 8V56C0 60.4125 3.5875 64 8 64H40C44.4125 64 48 60.4125 48 56V19.3125C48 17.1875 47.1625 15.15 45.6625 13.65L34.3375 2.3375C32.8375 0.8375 30.8125 0 28.6875 0H8ZM15 32C13.3375 32 12 33.3375 12 35C12 36.6625 13.3375 38 15 38H33C34.6625 38 36 36.6625 36 35C36 33.3375 34.6625 32 33 32H15ZM15 44C13.3375 44 12 45.3375 12 47C12 48.6625 13.3375 50 15 50H33C34.6625 50 36 48.6625 36 47C36 45.3375 34.6625 44 33 44H15Z"
+      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"
     />
   );
@@ -164,7 +164,9 @@ const TerminalIcon: FunctionComponent = () => {
 const QuestionIcon: FunctionComponent = () => {
   return (
     <path
-      d="M8 20.0002C8 14.4752 12.475 10.0002 18 10.0002H22C27.525 10.0002 32 14.4752 32 20.0002V20.5752C32 23.5877 30.5 26.4002 27.9875 28.0627L21.45 32.4252C18.675 34.2752 17 37.4002 17 40.7502V41.0002C17 42.6627 18.3375 44.0002 20 44.0002C21.6625 44.0002 23 42.6627 23 41.0002V40.7502C23 39.4127 23.6625 38.1627 24.775 37.4252L31.3125 33.0627C35.4875 30.2752 37.9875 25.6002 37.9875 20.5877V20.0127C37.9875 11.1752 30.825 4.01271 21.9875 4.01271H17.9875C9.1625 4.00021 2 11.1627 2 20.0002C2 21.6627 3.3375 23.0002 5 23.0002C6.6625 23.0002 8 21.6627 8 20.0002ZM20 60.0002C21.0609 60.0002 22.0783 59.5788 22.8284 58.8286C23.5786 58.0785 24 57.0611 24 56.0002C24 54.9393 23.5786 53.9219 22.8284 53.1718C22.0783 52.4216 21.0609 52.0002 20 52.0002C18.9391 52.0002 17.9217 52.4216 17.1716 53.1718C16.4214 53.9219 16 54.9393 16 56.0002C16 57.0611 16.4214 58.0785 17.1716 58.8286C17.9217 59.5788 18.9391 60.0002 20 60.0002Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      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"
     />
   );
@@ -207,17 +209,18 @@ const YouTubeIcon: FunctionComponent = () => {
 };
 
 export type IconName =
+  | 'askNetlify'
   | 'book'
   | 'caretRight'
   | 'code'
   | 'comment'
   | 'cube'
+  | 'lightbulb'
   | 'link'
   | 'pageWithLines'
   | 'pencil'
   | 'rss'
   | 'search'
-  | 'sparkles'
   | 'terminal'
   | 'question'
   | 'linkedin'
@@ -227,22 +230,20 @@ export type IconName =
   | 'youtube';
 
 const iconPathMap: Record<IconName, FunctionComponent> = {
+  askNetlify: AskNetlify,
   book: BookIcon,
   caretRight: CaretRightIcon,
   code: CodeIcon,
   comment: CommentIcon,
-  cube: CubeIcon,
   link: LinkIcon,
+  lightbulb: LightbulbIcon,
   pageWithLines: PageWithLinesIcon,
-  pencil: PencilIcon,
   rss: RSSIcon,
   search: SearchIcon,
-  sparkles: SparklesIcon,
   terminal: TerminalIcon,
   question: QuestionIcon,
   bluesky: BlueSkyIcon,
   linkedin: LinkedInIcon,
-  netlify: NetlifyIcon,
   twitter: TwitterIcon,
   youtube: YouTubeIcon,
 };

package/packages/components/preact/SearchModal/components/SearchHeading/SearchHeading.css

@@ -1,12 +1,13 @@
 .n-search-heading {
-  --n-search-heading-weight: var(--font-weight-regular, 400);
-  --n-search-heading-size: var(--font-size-text-sm, 13px);
-  --n-search-heading-color: var(--color-text-weak, #757575);
+  --n-search-heading-weight: var(--font-weight-semibold, 400);
+  --n-search-heading-size: var(--font-size-text-xs, 13px);
+  --n-search-heading-color: var(--color-text-weaker, #757575);
 
   font-size: var(--n-search-heading-size);
   font-weight: var(--n-search-heading-weight);
+  font-family: var(--font-family-mono);
   color: var(--n-search-heading-color);
-  padding-inline: 1rem;
+  padding-inline: var(--space-xs);
   margin-block: var(--space-xs);
   letter-spacing: 0.2px;
 }

package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.css

@@ -1,6 +1,5 @@
 .n-search-link {
-  --n-search-icon-size: 1em;
-  /* all: unset; */
+  --n-search-icon-size: 1.25em;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
@@ -16,6 +15,7 @@
   border: none;
   text-align: left;
   outline: none;
+  border-radius: var(--radius-l);
 }
 
 .n-search-link-body {
@@ -25,11 +25,11 @@
   text-wrap: pretty;
 }
 
-.n-search-link:is(:hover, :focus-within) {
+.n-search-link:is(:hover, :focus-visible) {
   background: var(--n-search-color-bg-2);
 
   & .n-search-link-icon [data-icon='caretRight'] {
-    display: block;
+    opacity: 1;
   }
 }
 
@@ -54,7 +54,8 @@
   background-color: var(--mark-bg, var(--color-highlight));
 }
 
-.n-search-link-icon {
+.n-search-link-icon,
+.n-search-link-icon svg {
   display: flex;
   width: var(--n-search-icon-size);
   height: var(--n-search-icon-size);
@@ -62,9 +63,8 @@
 }
 
 .n-search-link-icon [data-icon='caretRight'] {
-  display: none;
-  width: 0.8em;
-  opacity: 0.3;
+  width: 1em;
+  opacity: 0;
 }
 
 .n-search-link-label {

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css

@@ -6,7 +6,7 @@
 .n-search-modal {
   --n-search-padding-inline: var(--space-s);
   --n-search-color-text: var(--color-text-1, currentColor);
-  --n-search-color-text-secondary: var(--color-text-weak, currentColor);
+  --n-search-color-text-secondary: var(--color-text-weaker, currentColor);
   --n-search-color-bg: var(--search-bg-color);
   --n-search-color-bg-2: var(--color-bg-3);
   --n-search-color-border: var(--color-bg-3);
@@ -27,21 +27,6 @@
   background: var(--n-search-color-bg);
 }
 
-.n-search-modal::after {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: blue;
-  position: absolute;
-  z-index: 0;
-  inset: 0;
-  transform-origin: center;
-  transform: scale(0);
-  border-radius: var(--radius-m);
-  transition: transform 300ms ease-in-out;
-}
-
 .n-search-modal-ask {
   --n-search-max-w: 800px;
 }
@@ -50,7 +35,6 @@
   --mark-bg: var(--n-search-text-highlight);
   display: grid;
   width: min(var(--n-search-max-w), 100%);
-  /* min-height: 530px; */
   background-color: var(--n-search-color-bg);
   border-radius: var(--n-search-border-radius);
   overflow: hidden;
@@ -66,7 +50,6 @@
 }
 
 .n-search-input-wrapper {
-  /* all: unset; */
   position: relative;
   display: flex;
   width: 100%;
@@ -101,7 +84,11 @@
 }
 
 .n-search-input::placeholder {
-  color: var(--n-search-color-text);
+  color: var(--n-search-color-text-secondary);
+}
+
+.n-search-links {
+  padding: var(--space-2xs);
 }
 
 .n-search-label {
@@ -117,8 +104,8 @@
 
 .n-search-icon {
   display: flex;
-  width: var(--n-search-icon-size, 0.8em);
-  height: var(--n-search-icon-size, 0.8em);
+  width: var(--n-search-icon-size, 1em);
+  height: var(--n-search-icon-size, 1em);
   color: var(--n-search-color-text-secondary);
 }
 
@@ -133,23 +120,11 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scroll-padding-block: var(--space-s);
   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);
-}
-
 /* Footer */
 .n-search-footer {
   position: relative;

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

@@ -14,7 +14,6 @@ import {
   useSearchToggles,
   useSearchLogger,
 } from '../../hooks';
-import { useTimeout } from '@utils/useTimeout';
 
 import AskNetlify from '../../../../preact/AskNetlify/AskNetlify';
 
@@ -61,7 +60,7 @@ function SearchModal(props: Props = { className: '', children: null, debug: fals
   const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
 
   useSearchLogger(state, debug);
-  useSearchToggles(isPagefindLoaded, openSearch);
+  useSearchToggles(isPagefindLoaded, openSearch, setModalState);
   useSearchParams(isPagefindLoaded, actions.setSearchTerm, openSearch);
   useSearchHotkeys(isPagefindLoaded, searchOpen, openSearch, closeSearch);
   useKeyboardNav(isPagefindLoaded, modalRef, searchOpen, closeSearch);
@@ -95,16 +94,10 @@ function SearchModal(props: Props = { className: '', children: null, debug: fals
       {...rest}
     >
       <div ref={containerRef} className="n-search-container">
-        {modalState.current === 'ask' && (
-          <AskNetlify query={askNetlifyQuery} setModalState={setModalState} />
-        )}
+        {modalState.current === 'ask' && <AskNetlify setModalState={setModalState} />}
         {modalState.current === 'search' && (
           <>
-            <SearchInput
-              setSearchTerm={actions.setSearchTerm}
-              setAskNetlifyQuery={setAskNetlifyQuery}
-              initialValue={state.searchTerm}
-            />
+            <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
 
             <SearchWindow
               setModalState={setModalState}
@@ -118,7 +111,7 @@ function SearchModal(props: Props = { className: '', children: null, debug: fals
             <div className="n-search-footer">
               <p className="n-search-footer-tip">
                 <KeyboardKey keyNames={['Esc']} />
-                to closed
+                to close
               </p>
               <p className="n-search-footer-tip">
                 <KeyboardKey keyNames={['Tab']} />

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

@@ -1,12 +1,10 @@
 import type { FunctionComponent } from 'preact';
-import type { SearchLinkProps, SearchResultsProps, SearchWindowProps } from '../types/search.types';
+import type { SearchResultsProps, SearchWindowProps } from '../types/search.types';
 import { useMemo } from 'preact/hooks';
 import SearchHeading from './SearchHeading/SearchHeading';
 import SearchLink from './SearchLink/SearchLink';
 
-import { handleThemeChange } from '@utils/handleThemeChange';
-
-import Icon from '../../../preact/Icon';
+import { handleThemeChange, ThemeMap, Theme } from '../../../../utils/theme';
 
 /* --- Search Results Window (for active searches) --- */
 const SearchResults: FunctionComponent<SearchResultsProps> = ({
@@ -55,14 +53,14 @@ export default function SearchWindow({
 }: SearchWindowProps) {
   return (
     <div className="n-search-window">
-      <div className="search-links">
+      <div className="n-search-links">
         {searchTerm && searchTerm.length > 1 ? (
           <SearchResults searchLoading={searchLoading} searchTerm={searchTerm} results={results} />
         ) : DefaultWindow ? (
           <>
             <SearchLink
               as="button"
-              icon="netlify"
+              icon="askNetlify"
               label="Ask Netlify AI"
               onClick={() => {
                 setModalState({ current: 'ask' });
@@ -71,13 +69,14 @@ export default function SearchWindow({
 
             {DefaultWindow}
 
+            <SearchHeading>Actions</SearchHeading>
             <SearchLink
               as="button"
-              icon="netlify"
+              icon="lightbulb"
               label="Toggle theme"
               onClick={() => {
-                const theme = document.documentElement.getAttribute('data-theme');
-                handleThemeChange(theme === 'dark' ? 'light' : 'dark');
+                const theme = document.documentElement.getAttribute('data-theme') as Theme;
+                theme && handleThemeChange(ThemeMap[theme]);
               }}
             />
           </>

package/packages/components/preact/SearchModal/hooks/useSearchToggles.ts

@@ -12,16 +12,24 @@ import { useEffect } from 'preact/hooks';
  * @param onOpen - A function to be called when a toggle element is clicked.
  */
 
-export function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void) {
+export function useSearchToggles(
+  isPagefindLoaded: boolean,
+  onOpen: () => void,
+  setState: (state: { current: string }) => void
+) {
   useEffect(() => {
-    if (!isPagefindLoaded) return
+    if (!isPagefindLoaded) return;
     const toggles = document.querySelectorAll('[data-ntl-search-toggle]');
 
     if (!toggles.length) return;
 
     toggles.forEach(t => {
+      const current = t.dataset.ntlSearchToggle ? t.dataset.ntlSearchToggle : 'search';
       t.removeAttribute('disabled');
-      t.addEventListener('click', onOpen);
+      t.addEventListener('click', () => {
+        onOpen();
+        setState({ current });
+      });
     });
 
     return () => {

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

@@ -0,0 +1,13 @@
+interface IconProps {
+  name: string; // ID of the symbol in the sprite
+  size?: number;
+  className?: string;
+}
+
+export function SpriteIcon({ name, size = 24, className = '' }: IconProps) {
+  return (
+    <svg className={`icon-${name} ${className ? className : ''}`} aria-hidden="true">
+      <use href={`/icons.svg#icon-${name}`} />
+    </svg>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { JSX } from 'preact/jsx-runtime';
+
+interface IconProps extends JSX.SVGAttributes<SVGSVGElement> {}
+
+export function AskNeltify(props: IconProps) {
+  return (
+    <svg
+      id="icon-askNetlify"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M9.26465 1.02094L9.31322 0.921348L10.0528 0.666687L10.1524 0.715259L10.5563 1.9638L10.2999 2.4895L10.195 2.52628L9.6685 2.26948L9.26465 1.02094Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.5915 3.11667L15.6942 3.15818L15.9999 3.8782L15.9584 3.98093L14.741 4.4709L14.1987 4.25179L14.1547 4.14977L14.3742 3.60663L15.5915 3.11667Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.8306 0.944052L12.9353 0.907978L13.6384 1.25087L13.6744 1.35564L12.9408 2.91375L12.3877 3.10417L12.2876 3.05604L12.0969 2.50216L12.8306 0.944052Z"
+        fill="currentColor"
+      />
+      <path
+        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
+        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"
+      />
+      <path
+        d="M8.41582 10.9491L8.43331 10.994L8.43337 11.2417L8.41589 11.2866L7.86046 12.4215L7.78018 12.4806H7.5763L7.49602 12.4215L6.91751 11.2866L6.90003 11.2417L6.89997 11.2114V10.994L6.91745 10.9491L7.55316 10.526H7.75704L8.41582 10.9491Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        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"
+      />
+    </svg>
+  );
+}

package/packages/components/preact/icons/Book.tsx

@@ -0,0 +1,20 @@
+import { JSX } from 'preact/jsx-runtime';
+
+interface IconProps extends JSX.SVGAttributes<SVGSVGElement> {}
+
+export function Book(props: IconProps) {
+  return (
+    <svg
+      id="icon-book"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <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"
+      />
+    </svg>
+  );
+}