@netlify/spark-ui 1.5.0-alpha.3 → 1.5.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/assets/AskNetlify.css +1 -1
  2. package/dist/components/preact/AskNetlify/AskNetlify.js +294 -293
  3. package/dist/components/preact/Icon/index.js +23 -20
  4. package/package.json +1 -1
  5. package/packages/components/preact/AskNetlify/AskNetlify.css +26 -12
  6. package/packages/components/preact/AskNetlify/AskNetlify.tsx +4 -1
  7. package/packages/components/preact/Icon/index.tsx +3 -0
package/dist/components/preact/Icon/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { u as C } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
2
2
  import { Fragment as n } from "preact";
3
- function g(r) {
3
+ function m(r) {
4
4
  const t = V[r.name];
5
5
  if (t)
6
6
  return /* @__PURE__ */ C(
@@ -23,6 +23,7 @@ const o = () => /* @__PURE__ */ C(n, { children: [
23
23
  /* @__PURE__ */ C(
24
24
  "path",
25
25
  {
26
+ id: "ask-netlify-tick-3",
26
27
  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",
27
28
  fill: "currentColor"
28
29
  }
@@ -30,6 +31,7 @@ const o = () => /* @__PURE__ */ C(n, { children: [
30
31
  /* @__PURE__ */ C(
31
32
  "path",
32
33
  {
34
+ id: "ask-netlify-tick-1",
33
35
  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",
34
36
  fill: "currentColor"
35
37
  }
@@ -37,6 +39,7 @@ const o = () => /* @__PURE__ */ C(n, { children: [
37
39
  /* @__PURE__ */ C(
38
40
  "path",
39
41
  {
42
+ id: "ask-netlify-tick-2",
40
43
  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",
41
44
  fill: "currentColor"
42
45
  }
@@ -71,13 +74,13 @@ const o = () => /* @__PURE__ */ C(n, { children: [
71
74
  fill: "currentColor"
72
75
  }
73
76
  )
74
- ] }), L = () => /* @__PURE__ */ C(
77
+ ] }), l = () => /* @__PURE__ */ C(
75
78
  "path",
76
79
  {
77
80
  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",
78
81
  fill: "currentColor"
79
82
  }
80
- ), l = () => /* @__PURE__ */ C(
83
+ ), L = () => /* @__PURE__ */ C(
81
84
  "path",
82
85
  {
83
86
  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",
@@ -118,31 +121,31 @@ const o = () => /* @__PURE__ */ C(n, { children: [
118
121
  fill: "currentColor"
119
122
  }
120
123
  )
121
- ] }), M = () => /* @__PURE__ */ C(
124
+ ] }), d = () => /* @__PURE__ */ C(
122
125
  "path",
123
126
  {
124
127
  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",
125
128
  fill: "currentColor"
126
129
  }
127
- ), Z = () => /* @__PURE__ */ C(
130
+ ), M = () => /* @__PURE__ */ C(
128
131
  "path",
129
132
  {
130
133
  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",
131
134
  fill: "currentColor"
132
135
  }
133
- ), d = () => /* @__PURE__ */ C(
136
+ ), a = () => /* @__PURE__ */ C(
134
137
  "path",
135
138
  {
136
139
  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",
137
140
  fill: "currentColor"
138
141
  }
139
- ), H = () => /* @__PURE__ */ C(
142
+ ), Z = () => /* @__PURE__ */ C(
140
143
  "path",
141
144
  {
142
145
  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",
143
146
  fill: "currentColor"
144
147
  }
145
- ), a = () => /* @__PURE__ */ C(
148
+ ), H = () => /* @__PURE__ */ C(
146
149
  "path",
147
150
  {
148
151
  "fill-rule": "evenodd",
@@ -150,13 +153,13 @@ const o = () => /* @__PURE__ */ C(n, { children: [
150
153
  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",
151
154
  fill: "currentColor"
152
155
  }
153
- ), h = () => /* @__PURE__ */ C(
156
+ ), f = () => /* @__PURE__ */ C(
154
157
  "path",
155
158
  {
156
159
  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",
157
160
  fill: "currentColor"
158
161
  }
159
- ), f = () => /* @__PURE__ */ C(
162
+ ), h = () => /* @__PURE__ */ C(
160
163
  "path",
161
164
  {
162
165
  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",
@@ -176,22 +179,22 @@ const o = () => /* @__PURE__ */ C(n, { children: [
176
179
  }
177
180
  ), V = {
178
181
  askNetlify: o,
179
- book: l,
182
+ book: L,
180
183
  caretRight: e,
181
- code: Z,
184
+ code: M,
182
185
  comment: i,
183
- link: M,
186
+ link: d,
184
187
  lightbulb: u,
185
- pageWithLines: d,
188
+ pageWithLines: a,
186
189
  rss: c,
187
- search: L,
188
- terminal: H,
189
- question: a,
190
+ search: l,
191
+ terminal: Z,
192
+ question: H,
190
193
  bluesky: s,
191
- linkedin: h,
192
- twitter: f,
194
+ linkedin: f,
195
+ twitter: h,
193
196
  youtube: p
194
197
  };
195
198
  export {
196
- g as default
199
+ m as default
197
200
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@netlify/spark-ui",
3
3
  "description": "Assets, design tokens, components, and utilities",
4
- "version": "1.5.0-alpha.3",
4
+ "version": "1.5.0-alpha.4",
5
5
  "type": "module",
6
6
  "main": "dist/components/preact/index.js",
7
7
  "types": "dist/components/preact/index.d.ts",
package/packages/components/preact/AskNetlify/AskNetlify.css CHANGED
@@ -185,21 +185,35 @@
185
185
  border-width: 0.5px;
186
186
  }
187
187
 
188
- .pulsing {
188
+ .message-loader {
189
+ width: 43px;
190
+ height: auto;
189
191
  display: block;
190
- width: 1rem;
191
- height: 1rem;
192
- clip-path: circle(40%);
193
- background: var(--search-loading-color);
194
- animation: pulsing 2.5s infinite ease-in-out;
192
+ color: var(--search-loading-color);
195
193
  }
196
194
 
197
- @keyframes pulsing {
198
- 0%,
199
- 100% {
200
- transform: scale(0.9);
195
+ #ask-netlify-tick-1,
196
+ #ask-netlify-tick-2,
197
+ #ask-netlify-tick-3 {
198
+ opacity: 1;
199
+ animation: tickFlicker 800ms ease-in-out infinite;
200
+ }
201
+
202
+ #ask-netlify-tick-1 {
203
+ animation-delay: 300ms;
204
+ }
205
+ #ask-netlify-tick-2 {
206
+ animation-delay: 400ms;
207
+ }
208
+ #ask-netlify-tick-3 {
209
+ animation-delay: 500ms;
210
+ }
211
+
212
+ @keyframes tickFlicker {
213
+ 0% {
214
+ opacity: 1;
201
215
  }
202
- 50% {
203
- transform: scale(1.05);
216
+ 100% {
217
+ opacity: 0;
204
218
  }
205
219
  }
package/packages/components/preact/AskNetlify/AskNetlify.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { useState, useRef, useEffect } from 'preact/hooks';
2
2
  import { marked } from 'marked';
3
3
  import { KapaProvider, useChat } from '@kapaai/react-sdk';
4
+ import Icon from '../Icon';
4
5
 
5
6
  import './AskNetlify.css';
6
7
 
@@ -104,7 +105,9 @@ function ChatInterface({ setModalState }) {
104
105
  />
105
106
  </div>
106
107
  ) : (
107
- <span class="pulsing"></span>
108
+ <span class="message-loader">
109
+ <Icon name="askNetlify" />
110
+ </span>
108
111
  )}
109
112
  </div>
110
113
  </div>
package/packages/components/preact/Icon/index.tsx CHANGED
@@ -27,14 +27,17 @@ const AskNetlify: FunctionComponent = () => {
27
27
  return (
28
28
  <>
29
29
  <path
30
+ id="ask-netlify-tick-3"
30
31
  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"
31
32
  fill="currentColor"
32
33
  />
33
34
  <path
35
+ id="ask-netlify-tick-1"
34
36
  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"
35
37
  fill="currentColor"
36
38
  />
37
39
  <path
40
+ id="ask-netlify-tick-2"
38
41
  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"
39
42
  fill="currentColor"
40
43
  />