@knapsack/sandbox-components 4.54.10 → 4.54.11--canary.4194.ff5ad41.0

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 (5) hide show
  1. package/dist/css/ks-sandbox-styles.css +136 -59
  2. package/dist/react/header.d.ts.map +1 -1
  3. package/dist/react/header.js +1 -1
  4. package/dist/react/header.js.map +1 -1
  5. package/package.json +8 -8
package/dist/css/ks-sandbox-styles.css CHANGED
@@ -66,18 +66,38 @@
66
66
  --collections-testing-test-tertiary-brand-a-light: #000000;
67
67
  --collections-testing-test-tertiary-brand-b-dark: #000000;
68
68
  --collections-testing-test-tertiary-brand-b-light: #000000;
69
- --collections-theme-action-base-dark: var(--sandbox-color-brand);
70
- --collections-theme-action-base-light: var(--sandbox-color-brand);
71
- --collections-theme-action-text-dark: var(--sandbox-color-white);
72
- --collections-theme-action-text-light: var(--sandbox-color-white);
73
- --collections-theme-background-content-dark: #3b3644;
74
- --collections-theme-background-content-light: #ffffff;
75
- --collections-theme-background-page-dark: #1f1c25;
76
- --collections-theme-background-page-light: #fdfcfe;
77
- --collections-theme-text-base-dark: #f6f8ff;
78
- --collections-theme-text-base-light: #191f2c;
79
- --collections-theme-text-subtle-dark: #bec3d3;
80
- --collections-theme-text-subtle-light: #6e7a82;
69
+ --collections-theme-action-text-arcadia-dark: var(--sandbox-color-white);
70
+ --collections-theme-action-text-arcadia-light: var(--sandbox-color-white);
71
+ --collections-theme-action-text-basis-dark: var(--sandbox-color-white);
72
+ --collections-theme-action-text-basis-light: var(--sandbox-color-white);
73
+ --collections-theme-background-content-arcadia-dark: #3b3644;
74
+ --collections-theme-background-content-arcadia-light: #ffffff;
75
+ --collections-theme-background-content-basis-dark: #3b3644;
76
+ --collections-theme-background-content-basis-light: #ffffff;
77
+ --collections-theme-background-page-arcadia-dark: #1f1c25;
78
+ --collections-theme-background-page-arcadia-light: #fdfcfe;
79
+ --collections-theme-background-page-basis-dark: #1f1c25;
80
+ --collections-theme-background-page-basis-light: #fdfcfe;
81
+ --collections-theme-brand-color-arcadia-dark: #7a34ed;
82
+ --collections-theme-brand-color-arcadia-light: #7a34ed;
83
+ --collections-theme-brand-color-basis-dark: #ed7734;
84
+ --collections-theme-brand-color-basis-light: #ed7734;
85
+ --collections-theme-brand-font-family-arcadia-dark: Inter;
86
+ --collections-theme-brand-font-family-arcadia-light: Inter;
87
+ --collections-theme-brand-font-family-basis-dark: Merriweather;
88
+ --collections-theme-brand-font-family-basis-light: Merriweather;
89
+ --collections-theme-brand-logo-arcadia-dark: url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg');
90
+ --collections-theme-brand-logo-arcadia-light: url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg');
91
+ --collections-theme-brand-logo-basis-dark: url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng');
92
+ --collections-theme-brand-logo-basis-light: url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng');
93
+ --collections-theme-text-base-arcadia-dark: #f6f8ff;
94
+ --collections-theme-text-base-arcadia-light: #191f2c;
95
+ --collections-theme-text-base-basis-dark: #f6f8ff;
96
+ --collections-theme-text-base-basis-light: #191f2c;
97
+ --collections-theme-text-subtle-arcadia-dark: #bec3d3;
98
+ --collections-theme-text-subtle-arcadia-light: #6e7a82;
99
+ --collections-theme-text-subtle-basis-dark: #bec3d3;
100
+ --collections-theme-text-subtle-basis-light: #6e7a82;
81
101
  --color-black: var(--color-neutral-800);
82
102
  --color-white: #ffffff;
83
103
  --color-neutral-100: #fafafb;
@@ -125,7 +145,6 @@
125
145
  --radius-medium: 8px;
126
146
  --radius-round: 160px;
127
147
  --radius-small: 4px;
128
- --sandbox-color-brand: #7a34ed;
129
148
  --sandbox-color-error: #ff5c46;
130
149
  --sandbox-color-success: #6bc313;
131
150
  --sandbox-color-warning: #fab120;
@@ -238,22 +257,56 @@
238
257
  }
239
258
 
240
259
  :root,
241
- [data-collections-theme='light'] {
242
- --action-base: var(--collections-theme-action-base-light);
243
- --action-text: var(--collections-theme-action-text-light);
244
- --background-content: var(--collections-theme-background-content-light);
245
- --background-page: var(--collections-theme-background-page-light);
246
- --text-base: var(--collections-theme-text-base-light);
247
- --text-subtle: var(--collections-theme-text-subtle-light);
248
- }
249
-
250
- [data-collections-theme='dark'] {
251
- --action-base: var(--collections-theme-action-base-dark);
252
- --action-text: var(--collections-theme-action-text-dark);
253
- --background-content: var(--collections-theme-background-content-dark);
254
- --background-page: var(--collections-theme-background-page-dark);
255
- --text-base: var(--collections-theme-text-base-dark);
256
- --text-subtle: var(--collections-theme-text-subtle-dark);
260
+ [data-collections-theme='arcadiaLight'] {
261
+ --action-base: var(--collections-theme-brand-color);
262
+ --action-text: var(--collections-theme-action-text-arcadia-light);
263
+ --background-content: var(
264
+ --collections-theme-background-content-arcadia-light
265
+ );
266
+ --background-page: var(--collections-theme-background-page-arcadia-light);
267
+ --brand-color: var(--collections-theme-brand-color-arcadia-light);
268
+ --brand-font-family: var(--collections-theme-brand-font-family-arcadia-light);
269
+ --brand-logo: var(--collections-theme-brand-logo-arcadia-light);
270
+ --text-base: var(--collections-theme-text-base-arcadia-light);
271
+ --text-subtle: var(--collections-theme-text-subtle-arcadia-light);
272
+ }
273
+
274
+ [data-collections-theme='arcadiaDark'] {
275
+ --action-base: var(--collections-theme-brand-color);
276
+ --action-text: var(--collections-theme-action-text-arcadia-dark);
277
+ --background-content: var(
278
+ --collections-theme-background-content-arcadia-dark
279
+ );
280
+ --background-page: var(--collections-theme-background-page-arcadia-dark);
281
+ --brand-color: var(--collections-theme-brand-color-arcadia-dark);
282
+ --brand-font-family: var(--collections-theme-brand-font-family-arcadia-dark);
283
+ --brand-logo: var(--collections-theme-brand-logo-arcadia-dark);
284
+ --text-base: var(--collections-theme-text-base-arcadia-dark);
285
+ --text-subtle: var(--collections-theme-text-subtle-arcadia-dark);
286
+ }
287
+
288
+ [data-collections-theme='basisLight'] {
289
+ --action-base: var(--collections-theme-brand-color);
290
+ --action-text: var(--collections-theme-action-text-basis-light);
291
+ --background-content: var(--collections-theme-background-content-basis-light);
292
+ --background-page: var(--collections-theme-background-page-basis-light);
293
+ --brand-color: var(--collections-theme-brand-color-basis-light);
294
+ --brand-font-family: var(--collections-theme-brand-font-family-basis-light);
295
+ --brand-logo: var(--collections-theme-brand-logo-basis-light);
296
+ --text-base: var(--collections-theme-text-base-basis-light);
297
+ --text-subtle: var(--collections-theme-text-subtle-basis-light);
298
+ }
299
+
300
+ [data-collections-theme='basisDark'] {
301
+ --action-base: var(--collections-theme-brand-color);
302
+ --action-text: var(--collections-theme-action-text-basis-dark);
303
+ --background-content: var(--collections-theme-background-content-basis-dark);
304
+ --background-page: var(--collections-theme-background-page-basis-dark);
305
+ --brand-color: var(--collections-theme-brand-color-basis-dark);
306
+ --brand-font-family: var(--collections-theme-brand-font-family-basis-dark);
307
+ --brand-logo: var(--collections-theme-brand-logo-basis-dark);
308
+ --text-base: var(--collections-theme-text-base-basis-dark);
309
+ --text-subtle: var(--collections-theme-text-subtle-basis-dark);
257
310
  }
258
311
 
259
312
  /* Box sizing rules */
@@ -1100,6 +1153,8 @@ body {
1100
1153
  color: var(--text-base);
1101
1154
  width: 100vw;
1102
1155
  height: 100vh;
1156
+ font-family: Inter;
1157
+ font-family: var(--brand-font-family);
1103
1158
  }
1104
1159
 
1105
1160
  .demo-wrapper {
@@ -1141,39 +1196,62 @@ body {
1141
1196
  }
1142
1197
 
1143
1198
  .button {
1144
- transition: all 0.3s ease;
1145
- border: 0;
1146
- color: #7a34ed;
1147
- color: var(--color-primary);
1148
1199
  border-radius: 4px;
1149
1200
  border-radius: var(--radius-small);
1201
+ border: 1px solid #7a34ed;
1202
+ border: 1px solid var(--brand-color);
1203
+ font-family: Inter;
1204
+ font-family: var(--brand-font-family);
1205
+ font-weight: 600;
1206
+ transition: all 0.3s ease;
1150
1207
  }
1151
1208
 
1152
1209
  .button--size-small {
1153
- padding: 8px;
1154
- padding: var(--spacing-small);
1210
+ font-size: 12px;
1211
+ padding-top: 4px;
1212
+ padding-bottom: 4px;
1213
+ padding-top: var(--spacing-xsmall);
1214
+ padding-bottom: var(--spacing-xsmall);
1215
+ padding-left: 12px;
1216
+ padding-right: 12px;
1217
+ padding-left: var(--spacing-medium);
1218
+ padding-right: var(--spacing-medium);
1155
1219
  }
1156
1220
 
1157
1221
  .button--size-medium {
1158
- padding: 8px 12px;
1159
- padding: var(--spacing-small) var(--spacing-medium);
1222
+ font-size: 14px;
1223
+ padding-top: 8px;
1224
+ padding-bottom: 8px;
1225
+ padding-top: var(--spacing-small);
1226
+ padding-bottom: var(--spacing-small);
1227
+ padding-left: 16px;
1228
+ padding-right: 16px;
1229
+ padding-left: var(--spacing-large);
1230
+ padding-right: var(--spacing-large);
1160
1231
  }
1161
1232
 
1162
1233
  .button--size-large {
1163
- padding: 12px 16px;
1164
- padding: var(--spacing-medium) var(--spacing-large);
1234
+ font-size: 16px;
1235
+ padding-top: 12px;
1236
+ padding-bottom: 12px;
1237
+ padding-top: var(--spacing-medium);
1238
+ padding-bottom: var(--spacing-medium);
1239
+ padding-left: 24px;
1240
+ padding-right: 24px;
1241
+ padding-left: var(--spacing-xlarge);
1242
+ padding-right: var(--spacing-xlarge);
1165
1243
  }
1166
1244
 
1167
1245
  .button--type-outlined {
1168
- border: 1px solid #7a34ed;
1169
- border: 1px solid var(--color-primary);
1170
1246
  background-color: #ffffff;
1171
1247
  background-color: var(--color-white);
1248
+ color: #7a34ed;
1249
+ color: var(--brand-color);
1172
1250
  }
1173
1251
 
1174
1252
  .button--type-filled {
1175
1253
  background-color: #7a34ed;
1176
- background-color: var(--color-primary);
1254
+ background-color: var(--brand-color);
1177
1255
  color: #ffffff;
1178
1256
  color: var(--color-white);
1179
1257
  }
@@ -1273,9 +1351,15 @@ body {
1273
1351
 
1274
1352
  .header {
1275
1353
  background-color: #7a34ed;
1276
- background-color: var(--color-primary);
1277
- padding: 16px 24px;
1278
- padding: var(--spacing-large) var(--spacing-xlarge);
1354
+ background-color: var(--brand-color);
1355
+ padding-top: 8px;
1356
+ padding-bottom: 8px;
1357
+ padding-top: var(--spacing-small);
1358
+ padding-bottom: var(--spacing-small);
1359
+ padding-left: 16px;
1360
+ padding-right: 16px;
1361
+ padding-left: var(--spacing-large);
1362
+ padding-right: var(--spacing-large);
1279
1363
  width: 100vw;
1280
1364
  }
1281
1365
 
@@ -1292,20 +1376,13 @@ body {
1292
1376
  }
1293
1377
 
1294
1378
  .logo {
1295
- display: flex;
1296
- align-items: center;
1297
- color: #ffffff;
1298
- color: var(--color-white);
1299
- font-size: 1.5rem;
1300
- font-weight: bold;
1301
- }
1302
-
1303
- /* comment for git cache bump */
1304
-
1305
- .logo img {
1306
- height: 30px;
1307
- margin-right: 12px;
1308
- margin-right: var(--spacing-medium);
1379
+ background-image: url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg');
1380
+ background-image: var(--brand-logo);
1381
+ width: 100%;
1382
+ height: 28px;
1383
+ background-repeat: no-repeat;
1384
+ background-position: center;
1385
+ background-size: contain;
1309
1386
  }
1310
1387
 
1311
1388
  .hero {
package/dist/react/header.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/react/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyCxC,CAAC"}
1
+ {"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/react/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuBxC,CAAC"}
package/dist/react/header.js CHANGED
@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import clsx from 'clsx';
3
3
  import { Button } from './button.js';
4
4
  export const Header = ({ className }) => {
5
- return (_jsx("header", { className: clsx('header', className), children: _jsxs("div", { className: "header-content", children: [_jsx("svg", { width: "24", height: "19", viewBox: "0 0 24 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M24 9.5C24 9.76522 23.8946 10.0196 23.7071 10.2071C23.5196 10.3946 23.2652 10.5 23 10.5H1C0.734784 10.5 0.48043 10.3946 0.292893 10.2071C0.105357 10.0196 0 9.76522 0 9.5C0 9.23478 0.105357 8.98043 0.292893 8.79289C0.48043 8.60536 0.734784 8.5 1 8.5H23C23.2652 8.5 23.5196 8.60536 23.7071 8.79289C23.8946 8.98043 24 9.23478 24 9.5ZM1 2.5H23C23.2652 2.5 23.5196 2.39464 23.7071 2.20711C23.8946 2.01957 24 1.76522 24 1.5C24 1.23478 23.8946 0.98043 23.7071 0.792893C23.5196 0.605357 23.2652 0.5 23 0.5H1C0.734784 0.5 0.48043 0.605357 0.292893 0.792893C0.105357 0.98043 0 1.23478 0 1.5C0 1.76522 0.105357 2.01957 0.292893 2.20711C0.48043 2.39464 0.734784 2.5 1 2.5ZM23 16.5H1C0.734784 16.5 0.48043 16.6054 0.292893 16.7929C0.105357 16.9804 0 17.2348 0 17.5C0 17.7652 0.105357 18.0196 0.292893 18.2071C0.48043 18.3946 0.734784 18.5 1 18.5H23C23.2652 18.5 23.5196 18.3946 23.7071 18.2071C23.8946 18.0196 24 17.7652 24 17.5C24 17.2348 23.8946 16.9804 23.7071 16.7929C23.5196 16.6054 23.2652 16.5 23 16.5Z", fill: "white" }) }), _jsx("div", { className: "logo", children: _jsxs("svg", { width: "123", height: "29", viewBox: "0 0 123 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.0025 0.518858C15.3545 0.53615 15.9545 0.584177 16.0622 0.60339C16.0814 0.607233 16.1506 0.61684 16.2141 0.622604C16.6103 0.666794 17.2391 0.785912 17.7834 0.92424C20.145 1.51983 22.2836 2.71484 24.0394 4.41899C26.5106 6.82247 27.9876 10.0098 28.2319 13.4777C28.2376 13.5507 28.2472 13.8619 28.2549 14.1693C28.3222 17.0762 27.5607 19.887 26.0856 22.1809C25.3933 23.2568 24.4702 24.3001 23.474 25.132C21.4008 26.8611 18.7969 27.9697 15.8391 28.3847C15.241 28.4692 14.8737 28.498 14.3679 28.4999C13.7025 28.5018 13.2448 28.4653 12.5697 28.3558C11.4716 28.1772 10.4889 27.8698 9.54078 27.4087C8.69652 26.9975 8.05034 26.5499 7.48301 25.985C6.93107 25.4355 6.6176 24.9783 6.51375 24.5633C6.45798 24.3423 6.45413 24.3039 6.44067 24.0061C6.41374 23.3452 6.61375 22.327 7.09838 20.6439C7.81956 18.1406 9.19462 14.2231 10.9697 9.60637C11.7582 7.55447 12.814 4.90507 12.939 4.66491C13.1813 4.19421 13.6717 3.90218 14.216 3.90025C14.4544 3.90025 14.6506 3.94636 14.8775 4.0578C15.1025 4.16923 15.3718 4.43436 15.4872 4.65915C15.566 4.81093 16.1276 6.60153 19.9469 18.886C20.4373 20.4653 20.8624 21.8197 20.8893 21.8947C21.0143 22.2443 20.9431 22.569 20.6912 22.8073C20.5046 22.9821 20.2662 23.059 20.02 23.0205C19.7585 22.9802 19.5296 22.8207 19.4085 22.5921C19.2411 22.2808 18.7123 21.5565 18.3026 21.082C17.1199 19.7102 15.7737 18.7765 14.4563 18.4153C13.9313 18.2712 13.6159 18.2347 12.9544 18.2385C12.4486 18.2424 12.4217 18.2405 12.3351 18.2001C12.0659 18.0772 11.9255 17.7429 12.0236 17.4566C12.0659 17.3317 12.2159 17.1722 12.3428 17.1185C12.5101 17.0474 12.8274 17.0147 13.3871 17.0147C14.0583 17.0147 14.4948 17.0743 15.1294 17.2549C16.0218 17.5065 17.0295 18.008 17.7757 18.5748L17.8392 18.6209L17.793 18.4998C17.768 18.4326 16.9891 16.4441 16.0641 14.0829C15.1391 11.7217 14.3544 9.71588 14.3198 9.6275C14.2775 9.51991 14.2525 9.47572 14.2429 9.49301C14.2275 9.51799 14.1006 9.86381 13.7102 10.932C11.8043 16.1578 10.4177 20.3231 9.89079 22.4115C9.79271 22.7977 9.66771 23.3683 9.63886 23.5662L9.62732 23.6469L9.79656 23.8063C10.5274 24.498 11.8813 25.0628 13.2909 25.2626C14.0679 25.3741 14.6987 25.3606 15.6372 25.2165C19.5565 24.6132 22.5797 22.5441 24.1182 19.4143C24.674 18.2808 25.0317 17.0301 25.1837 15.6852C25.2433 15.1607 25.2414 15.1703 25.2548 14.5056C25.2664 13.958 25.2491 13.3951 25.2144 13.1126C25.2106 13.08 25.201 13.0031 25.1952 12.9397C25.1029 12.079 24.8413 11.0339 24.5029 10.1731C23.2355 6.9512 20.5066 4.46318 17.1891 3.50832C15.6891 3.07604 14.1352 2.95116 12.589 3.14328C10.3985 3.41226 8.37535 4.29988 6.62529 5.75618C6.29643 6.03092 5.61179 6.70144 5.3464 7.01268C4.43867 8.07129 3.78095 9.15295 3.29055 10.3941C2.57322 12.2116 2.32321 14.2308 2.56937 16.2155C2.77515 17.8697 3.34248 19.4989 4.21366 20.9417C4.41175 21.2703 4.42521 21.3068 4.42136 21.4605C4.41944 21.6123 4.38098 21.7045 4.27905 21.8159C4.04827 22.0657 3.6771 22.0407 3.44825 21.7583C2.98092 21.178 2.29821 20.0176 1.93473 19.1838C1.3924 17.9388 1.02701 16.5421 0.907772 15.2452C0.902002 15.1818 0.892387 15.0781 0.886617 15.0147C0.842385 14.5497 0.832769 13.4662 0.867386 13.0358C0.898156 12.6573 0.940465 12.2596 0.975082 12.0271C1.36163 9.41232 2.50975 6.97041 4.27328 5.01458C4.51175 4.74945 5.12139 4.14233 5.37717 3.91562C7.183 2.31522 9.46193 1.19706 11.8293 0.751329C12.1101 0.697533 12.2909 0.668713 12.6755 0.614918C12.9486 0.576492 13.4159 0.538069 13.7429 0.526541C13.9275 0.518856 14.0833 0.511171 14.0871 0.50733C14.1025 0.493881 14.5967 0.499645 15.0025 0.518858Z", fill: "white" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M103.46 23.218V11.1632H107.125V23.218H103.46ZM105.293 9.80026C104.713 9.80026 104.212 9.58877 103.789 9.1658C103.366 8.74282 103.154 8.24152 103.154 7.66188C103.154 7.08225 103.366 6.58094 103.789 6.15797C104.212 5.71932 104.713 5.5 105.293 5.5C105.872 5.5 106.373 5.71932 106.796 6.15797C107.219 6.58094 107.431 7.08225 107.431 7.66188C107.431 8.24152 107.219 8.74282 106.796 9.1658C106.373 9.58877 105.872 9.80026 105.293 9.80026ZM114.634 23.5C113.569 23.5 112.629 23.2258 111.814 22.6775C110.999 22.1292 110.365 21.393 109.911 20.4687C109.456 19.5287 109.229 18.4713 109.229 17.2963C109.229 16.0744 109.496 14.9856 110.028 14.03C110.561 13.0587 111.313 12.2911 112.284 11.7272C113.271 11.1632 114.43 10.8812 115.762 10.8812C117.109 10.8812 118.253 11.1632 119.193 11.7272C120.148 12.2755 120.877 13.0352 121.378 14.0065C121.895 14.9621 122.154 16.0352 122.154 17.2258V23.218H118.582V21.2911H118.488C118.268 21.7141 117.986 22.0979 117.642 22.4426C117.297 22.7715 116.874 23.03 116.373 23.218C115.887 23.406 115.308 23.5 114.634 23.5ZM115.715 20.3512C116.263 20.3512 116.741 20.218 117.148 19.9517C117.571 19.6697 117.892 19.2859 118.112 18.8003C118.331 18.3146 118.441 17.7742 118.441 17.1789C118.441 16.5992 118.331 16.0744 118.112 15.6044C117.892 15.1345 117.571 14.7663 117.148 14.5C116.741 14.218 116.263 14.077 115.715 14.077C115.151 14.077 114.657 14.218 114.234 14.5C113.812 14.7663 113.49 15.1345 113.271 15.6044C113.052 16.0744 112.942 16.5992 112.942 17.1789C112.942 17.7742 113.052 18.3146 113.271 18.8003C113.49 19.2859 113.812 19.6697 114.234 19.9517C114.657 20.218 115.151 20.3512 115.715 20.3512ZM91.6469 23.03C92.4616 23.3433 93.3702 23.5 94.3728 23.5C95.6887 23.5 96.8245 23.2337 97.7801 22.701C98.7514 22.1684 99.5033 21.4086 100.036 20.4217C100.569 19.4347 100.835 18.2833 100.835 16.9674V6.06397H97.1926V12.4791H97.1221C96.8871 12.1501 96.5895 11.8681 96.2292 11.6332C95.8845 11.3825 95.4929 11.1945 95.0542 11.0692C94.6313 10.9439 94.177 10.8812 93.6913 10.8812C92.5634 10.8812 91.5608 11.1397 90.6835 11.6567C89.8219 12.1736 89.1404 12.8864 88.6391 13.795C88.1535 14.7037 87.9106 15.7689 87.9106 16.9909C87.9106 17.9308 88.0595 18.8003 88.3571 19.5992C88.6548 20.3982 89.0777 21.0953 89.626 21.6906C90.1743 22.2702 90.848 22.7167 91.6469 23.03ZM95.8297 19.9517C95.4224 20.218 94.9367 20.3512 94.3728 20.3512C93.8245 20.3512 93.3388 20.218 92.9159 19.9517C92.4929 19.6697 92.1717 19.2937 91.9524 18.8238C91.7331 18.3381 91.6234 17.7976 91.6234 17.2023C91.6234 16.607 91.7331 16.0744 91.9524 15.6044C92.1717 15.1345 92.4929 14.7663 92.9159 14.5C93.3388 14.218 93.8245 14.077 94.3728 14.077C94.9367 14.077 95.4224 14.218 95.8297 14.5C96.2527 14.7663 96.5738 15.1345 96.7931 15.6044C97.0125 16.0744 97.1221 16.607 97.1221 17.2023C97.1221 17.7976 97.0125 18.3381 96.7931 18.8238C96.5738 19.2937 96.2527 19.6697 95.8297 19.9517ZM78.2615 23.5C77.1962 23.5 76.2563 23.2258 75.4417 22.6775C74.627 22.1292 73.9926 21.393 73.5383 20.4687C73.084 19.5287 72.8568 18.4713 72.8568 17.2963C72.8568 16.0744 73.1231 14.9856 73.6558 14.03C74.1884 13.0587 74.9403 12.2911 75.9116 11.7272C76.8986 11.1632 78.0578 10.8812 79.3894 10.8812C80.7367 10.8812 81.8803 11.1632 82.8202 11.7272C83.7759 12.2755 84.5043 13.0352 85.0056 14.0065C85.5226 14.9621 85.7811 16.0352 85.7811 17.2258V23.218H82.2093V21.2911H82.1153C81.896 21.7141 81.614 22.0979 81.2693 22.4426C80.9247 22.7715 80.5017 23.03 80.0004 23.218C79.5148 23.406 78.9351 23.5 78.2615 23.5ZM79.3424 20.3512C79.8907 20.3512 80.3685 20.218 80.7759 19.9517C81.1988 19.6697 81.52 19.2859 81.7393 18.8003C81.9586 18.3146 82.0683 17.7742 82.0683 17.1789C82.0683 16.5992 81.9586 16.0744 81.7393 15.6044C81.52 15.1345 81.1988 14.7663 80.7759 14.5C80.3685 14.218 79.8907 14.077 79.3424 14.077C78.7785 14.077 78.285 14.218 77.862 14.5C77.439 14.7663 77.1179 15.1345 76.8986 15.6044C76.6792 16.0744 76.5696 16.5992 76.5696 17.1789C76.5696 17.7742 76.6792 18.3146 76.8986 18.8003C77.1179 19.2859 77.439 19.6697 77.862 19.9517C78.285 20.218 78.7785 20.3512 79.3424 20.3512ZM66.2527 22.4426C67.224 22.9595 68.3363 23.218 69.5896 23.218H71.399V20.1632H69.7305C69.1196 20.1632 68.5948 20.0379 68.1561 19.7872C67.7175 19.5209 67.3728 19.1684 67.1222 18.7298C66.8872 18.2755 66.7697 17.7663 66.7697 17.2024C66.7697 16.6384 66.8872 16.1371 67.1222 15.6984C67.3728 15.2441 67.7175 14.8916 68.1561 14.641C68.5948 14.3747 69.1196 14.2415 69.7305 14.2415H71.399V11.1632H69.5896C68.3363 11.1632 67.224 11.4295 66.2527 11.9621C65.2815 12.4948 64.5138 13.2154 63.9499 14.124C63.3859 15.017 63.1039 16.0431 63.1039 17.2024C63.1039 18.3616 63.3859 19.3956 63.9499 20.3042C64.5138 21.1971 65.2815 21.9099 66.2527 22.4426ZM54.9913 23.218V14.7115C54.9913 13.6149 55.3047 12.7533 55.9313 12.1266C56.5579 11.5 57.4274 11.1867 58.5396 11.1867H62.0409V14.1475H59.4326C59.2133 14.1475 59.0253 14.2259 58.8686 14.3825C58.712 14.5235 58.6336 14.7115 58.6336 14.9465V23.218H54.9913ZM41.5932 8.67232L36.259 23.218H40.3713L41.4522 20.0457H48.4314L49.4653 23.218H53.7186L48.3609 8.64882C48.0945 7.91253 47.6559 7.37206 47.0449 7.02741C46.434 6.6671 45.7447 6.48694 44.977 6.48694C44.2094 6.48694 43.5201 6.67493 42.9092 7.05091C42.2982 7.41123 41.8596 7.9517 41.5932 8.67232ZM47.4209 16.7794H42.4627L44.6951 10.2232C44.7107 10.1449 44.7421 10.0822 44.7891 10.0352C44.8517 9.98825 44.9222 9.96475 45.0005 9.96475C45.0789 9.96475 45.1415 9.98825 45.1885 10.0352C45.2512 10.0666 45.2982 10.1292 45.3295 10.2232L47.4209 16.7794Z", fill: "white" })] }) }), _jsx(Button, { type: "outlined", size: "medium", label: "Login" })] }) }));
5
+ return (_jsx("header", { className: clsx('header', className), children: _jsxs("div", { className: "header-content", children: [_jsx("svg", { width: "24", height: "19", viewBox: "0 0 24 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M24 9.5C24 9.76522 23.8946 10.0196 23.7071 10.2071C23.5196 10.3946 23.2652 10.5 23 10.5H1C0.734784 10.5 0.48043 10.3946 0.292893 10.2071C0.105357 10.0196 0 9.76522 0 9.5C0 9.23478 0.105357 8.98043 0.292893 8.79289C0.48043 8.60536 0.734784 8.5 1 8.5H23C23.2652 8.5 23.5196 8.60536 23.7071 8.79289C23.8946 8.98043 24 9.23478 24 9.5ZM1 2.5H23C23.2652 2.5 23.5196 2.39464 23.7071 2.20711C23.8946 2.01957 24 1.76522 24 1.5C24 1.23478 23.8946 0.98043 23.7071 0.792893C23.5196 0.605357 23.2652 0.5 23 0.5H1C0.734784 0.5 0.48043 0.605357 0.292893 0.792893C0.105357 0.98043 0 1.23478 0 1.5C0 1.76522 0.105357 2.01957 0.292893 2.20711C0.48043 2.39464 0.734784 2.5 1 2.5ZM23 16.5H1C0.734784 16.5 0.48043 16.6054 0.292893 16.7929C0.105357 16.9804 0 17.2348 0 17.5C0 17.7652 0.105357 18.0196 0.292893 18.2071C0.48043 18.3946 0.734784 18.5 1 18.5H23C23.2652 18.5 23.5196 18.3946 23.7071 18.2071C23.8946 18.0196 24 17.7652 24 17.5C24 17.2348 23.8946 16.9804 23.7071 16.7929C23.5196 16.6054 23.2652 16.5 23 16.5Z", fill: "white" }) }), _jsx("div", { className: "logo" }), _jsx(Button, { type: "outlined", size: "medium", label: "Login" })] }) }));
6
6
  };
7
7
  //# sourceMappingURL=header.js.map
package/dist/react/header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/react/header.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMrC,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAC7D,OAAO,CACL,iBAAQ,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,YAC1C,eAAK,SAAS,EAAC,gBAAgB,aAC7B,cACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,YAElC,eACE,CAAC,EAAC,s+BAAs+B,EACx+B,IAAI,EAAC,OAAO,GACZ,GACE,EAEN,cAAK,SAAS,EAAC,MAAM,YACnB,eACE,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,YAAY,EACpB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,aAElC,eACE,CAAC,EAAC,u5GAAu5G,EACz5G,IAAI,EAAC,OAAO,GACZ,EACF,4BACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,k0KAAk0K,EACp0K,IAAI,EAAC,OAAO,GACZ,IACE,GACF,EACN,KAAC,MAAM,IAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,GAAG,IAClD,GACC,CACV,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/react/header.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMrC,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAC7D,OAAO,CACL,iBAAQ,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,YAC1C,eAAK,SAAS,EAAC,gBAAgB,aAC7B,cACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,YAElC,eACE,CAAC,EAAC,s+BAAs+B,EACx+B,IAAI,EAAC,OAAO,GACZ,GACE,EAEN,cAAK,SAAS,EAAC,MAAM,GAAG,EAExB,KAAC,MAAM,IAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,GAAG,IAClD,GACC,CACV,CAAC;AACJ,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@knapsack/sandbox-components",
3
3
  "description": "",
4
- "version": "4.54.10",
4
+ "version": "4.54.11--canary.4194.ff5ad41.0",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  "./css": "./dist/css/ks-sandbox-styles.css",
@@ -37,13 +37,13 @@
37
37
  "vue": "^3.4.27"
38
38
  },
39
39
  "devDependencies": {
40
- "@knapsack/eslint-config-starter": "4.54.10",
41
- "@knapsack/postcss-config-starter": "4.54.10",
42
- "@knapsack/prettier-config": "4.54.10",
43
- "@knapsack/sandbox-tokens": "4.54.10",
44
- "@knapsack/typescript-config-starter": "4.54.10",
40
+ "@knapsack/eslint-config-starter": "4.54.11--canary.4194.ff5ad41.0",
41
+ "@knapsack/postcss-config-starter": "4.54.11--canary.4194.ff5ad41.0",
42
+ "@knapsack/prettier-config": "4.54.11--canary.4194.ff5ad41.0",
43
+ "@knapsack/sandbox-tokens": "4.54.11--canary.4194.ff5ad41.0",
44
+ "@knapsack/typescript-config-starter": "4.54.11--canary.4194.ff5ad41.0",
45
45
  "@types/node": "^20.12.12",
46
- "@types/react": "^18.3.2",
46
+ "@types/react": "^18.3.3",
47
47
  "eslint": "^8.57.0",
48
48
  "npm-run-all2": "^5.0.2",
49
49
  "postcss-cli": "^9.1.0",
@@ -59,5 +59,5 @@
59
59
  "directory": "apps/ui/libs/sandbox-components",
60
60
  "type": "git"
61
61
  },
62
- "gitHead": "c5d08660b4b72340f1db0ee4bbe371e7678df228"
62
+ "gitHead": "ff5ad41a10006b80efade590f14d54ce68b86b47"
63
63
  }