@hyphen/hyphen-components 7.6.1 → 7.8.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 (24) hide show
  1. package/README.md +1 -1
  2. package/dist/css/fonts.css +3 -3
  3. package/dist/css/index.css +108 -108
  4. package/dist/css/reset.css +3 -3
  5. package/dist/css/utilities.css +7 -7
  6. package/dist/css/variables.css +55 -57
  7. package/dist/hyphen-components.cjs.development.js +358 -359
  8. package/dist/hyphen-components.cjs.development.js.map +1 -1
  9. package/dist/hyphen-components.cjs.production.min.js +1 -1
  10. package/dist/hyphen-components.cjs.production.min.js.map +1 -1
  11. package/dist/hyphen-components.esm.js +3 -4
  12. package/dist/hyphen-components.esm.js.map +1 -1
  13. package/dist/index.d.ts +5 -6
  14. package/package.json +50 -56
  15. package/src/components/Calendar/Calendar.stories.tsx +1 -1
  16. package/src/components/Calendar/Calendar.test.tsx +7 -1
  17. package/src/components/Calendar/Calendar.tsx +5 -6
  18. package/src/components/Heading/Heading.tsx +2 -2
  19. package/src/components/SelectInput/SelectInput.tsx +1 -1
  20. package/src/components/Table/Table.stories.tsx +16 -28
  21. package/src/docs/Brands.mdx +14 -12
  22. package/src/docs/DesignTokens.mdx +1 -1
  23. package/src/docs/GetStarted.mdx +1 -1
  24. package/src/docs/intro.mdx +1 -1
package/dist/css/utilities.css CHANGED
@@ -1,9 +1,9 @@
1
- /*!***************************************************************************************************************************!*\
2
- !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/@hyphen/hyphen-design-tokens/build/utilities/utilities.css ***!
3
- \***************************************************************************************************************************/
1
+ /*!********************************************************************************************************************************************************!*\
2
+ !*** css ../../node_modules/.pnpm/css-loader@6.11.0_webpack@5.94.0/node_modules/css-loader/dist/cjs.js!../design-tokens/build/utilities/utilities.css ***!
3
+ \********************************************************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Tue, 02 Jun 2026 22:53:09 GMT
6
+ * Generated on Thu, 09 Jul 2026 04:16:44 GMT
7
7
  */
8
8
 
9
9
  .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -6276,9 +6276,9 @@
6276
6276
  }
6277
6277
 
6278
6278
 
6279
- /*!**************************************************************************************************************************************************************!*\
6280
- !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/styles/utilities.scss ***!
6281
- \**************************************************************************************************************************************************************/
6279
+ /*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
6280
+ !*** css ../../node_modules/.pnpm/css-loader@6.11.0_webpack@5.94.0/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@13.3.3_sass@1.77.8_webpack@5.94.0/node_modules/sass-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.5.10_typescript@5.9.3_webpack@5.94.0/node_modules/postcss-loader/dist/cjs.js!./src/styles/utilities.scss ***!
6281
+ \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
6282
6282
  @keyframes fadeIn {
6283
6283
  0% {
6284
6284
  opacity: 0;
package/dist/css/variables.css CHANGED
@@ -1,16 +1,15 @@
1
- /*!*********************************************************************************************************************!*\
2
- !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/@hyphen/hyphen-design-tokens/build/css/variables.css ***!
3
- \*********************************************************************************************************************/
1
+ /*!**************************************************************************************************************************************************!*\
2
+ !*** css ../../node_modules/.pnpm/css-loader@6.11.0_webpack@5.94.0/node_modules/css-loader/dist/cjs.js!../design-tokens/build/css/variables.css ***!
3
+ \**************************************************************************************************************************************************/
4
4
  /**
5
- * Do not edit directly
6
- * Generated on Tue, 02 Jun 2026 22:53:09 GMT
5
+ * Do not edit directly, this file was auto-generated.
7
6
  */
8
7
 
9
8
  :root {
10
9
  --assets-font-family-monospace: 'geist-mono', ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
11
10
  --assets-font-family-body: 'geist', 'Source Sans', 'Helvetica Neue', Helvetica, 'Arial Black', Arial, sans-serif;;
12
11
  --assets-font-family-brand: 'geist', 'Source Sans', 'Helvetica Neue', Helvetica, 'Arial Black', Arial, sans-serif;;
13
- --color-background-primary: #ffffff;
12
+ --color-background-primary: #FFFFFF;
14
13
  --color-background-secondary: #f5f5f5;
15
14
  --color-background-tertiary: #e5e5e5;
16
15
  --color-background-disabled: #e5e5e5;
@@ -20,14 +19,14 @@
20
19
  --color-background-warning: #fefce8;
21
20
  --color-background-info: #f0f9ff;
22
21
  --color-background-inverse: #262626;
23
- --color-background-transparent: rgba(0, 0, 0, 0);
22
+ --color-background-transparent: transparent;
24
23
  --color-background-button-primary: #171717;
25
24
  --color-background-button-primary-hover: #262626;
26
25
  --color-background-button-primary-active: #171717;
27
- --color-background-button-secondary: #ffffff;
26
+ --color-background-button-secondary: #FFFFFF;
28
27
  --color-background-button-secondary-hover: #f5f5f5;
29
28
  --color-background-button-secondary-active: #e5e5e5;
30
- --color-background-button-tertiary: rgba(0, 0, 0, 0);
29
+ --color-background-button-tertiary: transparent;
31
30
  --color-background-button-tertiary-hover: #e5e5e5;
32
31
  --color-background-button-tertiary-active: #d4d4d4;
33
32
  --color-background-button-danger: #ef4444;
@@ -36,20 +35,20 @@
36
35
  --color-background-badge-default: #171717;
37
36
  --color-background-badge-secondary: #e5e5e5;
38
37
  --color-background-badge-danger: #fef2f2;
39
- --color-background-badge-outline: rgba(0, 0, 0, 0);
38
+ --color-background-badge-outline: transparent;
40
39
  --color-background-toggle-group-item-hover: rgba(0, 0, 0, 0.1);
41
40
  --color-background-toggle-group-item-active: rgba(0, 0, 0, 0.1);
42
41
  --color-background-scrollbar-thumb: #d4d4d4;
43
- --color-background-scrollbar-track: rgba(0, 0, 0, 0);
44
- --color-background-modal: #ffffff;
42
+ --color-background-scrollbar-track: transparent;
43
+ --color-background-modal: #FFFFFF;
45
44
  --color-background-toast: #262626;
46
45
  --color-background-toast-error: #ef4444;
47
46
  --color-background-tooltip: #262626;
48
- --color-background-popover: #ffffff;
47
+ --color-background-popover: #FFFFFF;
49
48
  --color-background-slider: #d4d4d4;
50
49
  --color-background-checkbox-checked: #404040;
51
- --color-background-brand-gradient: linear-gradient(60deg, #eab308 0%, #fa0a64 100%);
52
- --color-background-brand-gradient-reverse: linear-gradient(270deg, #eab308 0%, #fa0a64 100%);
50
+ --color-background-brand-gradient: linear-gradient(60deg, #eab308 0%, #FA0A64 100%);
51
+ --color-background-brand-gradient-reverse: linear-gradient(270deg, #eab308 0%, #FA0A64 100%);
53
52
  --color-background-brand-gradient-purple: linear-gradient(60deg, #b47dff 0%, #4b32aa 100%);
54
53
  --color-background-brand-gradient-purple-reverse: linear-gradient(270deg, #b47dff 0%, #4b32aa 100%);
55
54
  --color-background-brand-gradient-cyan: linear-gradient(60deg, #00b4ff 0%, #dc50ff 100%);
@@ -67,10 +66,10 @@
67
66
  --color-background-chart-2: #93c5fd;
68
67
  --color-background-chart-3: #3b82f6;
69
68
  --color-background-black: #000000;
70
- --color-background-white: #ffffff;
69
+ --color-background-white: #FFFFFF;
71
70
  --color-base-black: #000000;
72
- --color-base-white: #ffffff;
73
- --color-base-magenta: #fa0a64;
71
+ --color-base-white: #FFFFFF;
72
+ --color-base-magenta: #FA0A64;
74
73
  --color-base-green-50: #f0fdf4;
75
74
  --color-base-green-100: #dcfce7;
76
75
  --color-base-green-200: #bbf7d0;
@@ -133,7 +132,7 @@
133
132
  --color-base-grey-900: #0a0a0a;
134
133
  --color-border-default: #d4d4d4;
135
134
  --color-border-subtle: #e5e5e5;
136
- --color-border-transparent: rgba(0, 0, 0, 0);
135
+ --color-border-transparent: transparent;
137
136
  --color-border-hover: #a3a3a3;
138
137
  --color-border-active: #737373;
139
138
  --color-border-danger: #fca5a5;
@@ -147,9 +146,9 @@
147
146
  --color-border-button-secondary: #d4d4d4;
148
147
  --color-border-button-secondary-hover: #d4d4d4;
149
148
  --color-border-button-secondary-active: #a3a3a3;
150
- --color-border-button-tertiary: rgba(0, 0, 0, 0);
151
- --color-border-button-tertiary-hover: rgba(0, 0, 0, 0);
152
- --color-border-button-tertiary-active: rgba(0, 0, 0, 0);
149
+ --color-border-button-tertiary: transparent;
150
+ --color-border-button-tertiary-hover: transparent;
151
+ --color-border-button-tertiary-active: transparent;
153
152
  --color-border-badge-default: #171717;
154
153
  --color-border-badge-secondary: #e5e5e5;
155
154
  --color-border-badge-danger: #fee2e2;
@@ -168,7 +167,7 @@
168
167
  --color-border-brand-medium-purple: #4b32aa;
169
168
  --color-border-brand-dark-purple: #1e1e5a;
170
169
  --color-border-black: #000000;
171
- --color-border-white: #ffffff;
170
+ --color-border-white: #FFFFFF;
172
171
  --color-border-green: #16a34a;
173
172
  --color-border-red: #ef4444;
174
173
  --color-border-purple: #a855f7;
@@ -186,7 +185,7 @@
186
185
  --color-font-tertiary: #a3a3a3;
187
186
  --color-font-grey: #404040;
188
187
  --color-font-black: #000000;
189
- --color-font-white: #ffffff;
188
+ --color-font-white: #FFFFFF;
190
189
  --color-font-inverse: #e5e5e5;
191
190
  --color-font-disabled: #a3a3a3;
192
191
  --color-font-success: #15803d;
@@ -197,27 +196,27 @@
197
196
  --color-font-danger: #dc2626;
198
197
  --color-font-danger-input: #404040;
199
198
  --color-font-danger-disabled: #fecaca;
200
- --color-font-button-primary: #ffffff;
201
- --color-font-button-primary-hover: #ffffff;
202
- --color-font-button-primary-active: #ffffff;
199
+ --color-font-button-primary: #FFFFFF;
200
+ --color-font-button-primary-hover: #FFFFFF;
201
+ --color-font-button-primary-active: #FFFFFF;
203
202
  --color-font-button-secondary: #737373;
204
203
  --color-font-button-secondary-hover: #525252;
205
204
  --color-font-button-secondary-active: #525252;
206
205
  --color-font-button-tertiary: #737373;
207
206
  --color-font-button-tertiary-hover: #525252;
208
207
  --color-font-button-tertiary-active: #525252;
209
- --color-font-button-danger: #ffffff;
210
- --color-font-button-danger-hover: #ffffff;
211
- --color-font-button-danger-active: #ffffff;
212
- --color-font-badge-default: #ffffff;
208
+ --color-font-button-danger: #FFFFFF;
209
+ --color-font-button-danger-hover: #FFFFFF;
210
+ --color-font-button-danger-active: #FFFFFF;
211
+ --color-font-badge-default: #FFFFFF;
213
212
  --color-font-badge-secondary: #262626;
214
213
  --color-font-badge-danger: #dc2626;
215
214
  --color-font-badge-outline: #262626;
216
215
  --color-font-toast: #f5f5f5;
217
- --color-font-toast-error: #ffffff;
216
+ --color-font-toast-error: #FFFFFF;
218
217
  --color-font-tooltip: #f5f5f5;
219
218
  --color-font-popover: #404040;
220
- --color-font-placeholder: #a3a3a3; /* Placeholder color for input fields */
219
+ --color-font-placeholder: #a3a3a3; /** Placeholder color for input fields */
221
220
  --color-font-brand-yellow: #ffd200;
222
221
  --color-font-brand-orange: #ff911e;
223
222
  --color-font-brand-magenta: #ff3278;
@@ -335,7 +334,7 @@
335
334
  --size-font-size-5xl: 3rem;
336
335
  --size-font-size-6xl: 3.5rem;
337
336
  --size-font-size-7xl: 4rem;
338
- --size-font-size-base: 1rem; /* the base size of the font */
337
+ --size-font-size-base: 1rem; /** the base size of the font */
339
338
  --size-font-size-form-label: 0.875rem;
340
339
  --size-font-size-form-help-text: 0.875rem;
341
340
  --size-heading-sm: 1rem;
@@ -349,9 +348,9 @@
349
348
  --size-heading-6xl: 4.5rem;
350
349
  --size-line-height-none: 1;
351
350
  --size-line-height-base: 1.25;
352
- --size-line-height-input: 1.15; /* for use by form inputs */
353
- --size-line-height-heading: 1.25; /* the line-height for headings */
354
- --size-line-height-text: 1.5; /* for paragraphs of text */
351
+ --size-line-height-input: 1.15; /** for use by form inputs */
352
+ --size-line-height-heading: 1.25; /** the line-height for headings */
353
+ --size-line-height-text: 1.5; /** for paragraphs of text */
355
354
  --size-spacing-0: 0rem;
356
355
  --size-spacing-2xs: 0.125rem;
357
356
  --size-spacing-xs: 0.25rem;
@@ -377,12 +376,11 @@
377
376
  --size-z-index-sticky: 100;
378
377
  }
379
378
 
380
- /*!*******************************************************************************************************************************!*\
381
- !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/@hyphen/hyphen-design-tokens/build/css/variables-root-dark.css ***!
382
- \*******************************************************************************************************************************/
379
+ /*!************************************************************************************************************************************************************!*\
380
+ !*** css ../../node_modules/.pnpm/css-loader@6.11.0_webpack@5.94.0/node_modules/css-loader/dist/cjs.js!../design-tokens/build/css/variables-root-dark.css ***!
381
+ \************************************************************************************************************************************************************/
383
382
  /**
384
- * Do not edit directly
385
- * Generated on Tue, 02 Jun 2026 22:53:09 GMT
383
+ * Do not edit directly, this file was auto-generated.
386
384
  */
387
385
 
388
386
  :root.dark {
@@ -397,7 +395,7 @@
397
395
  --color-background-info: #f0f9ff;
398
396
  --color-background-inverse: #e5e5e5;
399
397
  --color-background-transparent: transparent;
400
- --color-background-button-primary: #ffffff;
398
+ --color-background-button-primary: #FFFFFF;
401
399
  --color-background-button-primary-hover: #e5e5e5;
402
400
  --color-background-button-primary-active: #e5e5e5;
403
401
  --color-background-button-secondary: #171717;
@@ -409,7 +407,7 @@
409
407
  --color-background-button-danger: #ef4444;
410
408
  --color-background-button-danger-hover: #dc2626;
411
409
  --color-background-button-danger-active: #b91c1c;
412
- --color-background-badge-default: #ffffff;
410
+ --color-background-badge-default: #FFFFFF;
413
411
  --color-background-badge-secondary: #404040;
414
412
  --color-background-badge-danger: #7f1d1d;
415
413
  --color-background-badge-outline: transparent;
@@ -421,7 +419,7 @@
421
419
  --color-background-tooltip: #f5f5f5;
422
420
  --color-background-popover: #262626;
423
421
  --color-background-slider: #737373;
424
- --color-background-checkbox-checked: #ffffff;
422
+ --color-background-checkbox-checked: #FFFFFF;
425
423
  --color-border-default: #525252;
426
424
  --color-border-subtle: #404040;
427
425
  --color-border-transparent: transparent;
@@ -432,7 +430,7 @@
432
430
  --color-border-inverse: #d4d4d4;
433
431
  --color-border-info: #bfdbfe;
434
432
  --color-border-success: #bbf7d0;
435
- --color-border-button-primary: #ffffff;
433
+ --color-border-button-primary: #FFFFFF;
436
434
  --color-border-button-primary-hover: #e5e5e5;
437
435
  --color-border-button-primary-active: #e5e5e5;
438
436
  --color-border-button-secondary: #a3a3a3;
@@ -441,7 +439,7 @@
441
439
  --color-border-button-tertiary: transparent;
442
440
  --color-border-button-tertiary-hover: transparent;
443
441
  --color-border-button-tertiary-active: transparent;
444
- --color-border-badge-default: #ffffff;
442
+ --color-border-badge-default: #FFFFFF;
445
443
  --color-border-badge-secondary: #262626;
446
444
  --color-border-badge-danger: #991b1b;
447
445
  --color-border-badge-outline: #404040;
@@ -463,12 +461,12 @@
463
461
  --color-font-button-primary: #525252;
464
462
  --color-font-button-primary-hover: #525252;
465
463
  --color-font-button-primary-active: #525252;
466
- --color-font-button-secondary: #ffffff;
467
- --color-font-button-secondary-hover: #ffffff;
468
- --color-font-button-secondary-active: #ffffff;
469
- --color-font-button-tertiary: #ffffff;
470
- --color-font-button-tertiary-hover: #ffffff;
471
- --color-font-button-tertiary-active: #ffffff;
464
+ --color-font-button-secondary: #FFFFFF;
465
+ --color-font-button-secondary-hover: #FFFFFF;
466
+ --color-font-button-secondary-active: #FFFFFF;
467
+ --color-font-button-tertiary: #FFFFFF;
468
+ --color-font-button-tertiary-hover: #FFFFFF;
469
+ --color-font-button-tertiary-active: #FFFFFF;
472
470
  --color-font-badge-default: #171717;
473
471
  --color-font-badge-secondary: #e5e5e5;
474
472
  --color-font-badge-danger: #f87171;
@@ -476,12 +474,12 @@
476
474
  --color-font-toast: #404040;
477
475
  --color-font-tooltip: #404040;
478
476
  --color-font-popover: #f5f5f5;
479
- --color-font-placeholder: #737373; /* Placeholder color for input fields */
477
+ --color-font-placeholder: #737373; /** Placeholder color for input fields */
480
478
  }
481
479
 
482
- /*!********************************************************************************************************************************************************************!*\
483
- !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/styles/variables/index.scss ***!
484
- \********************************************************************************************************************************************************************/
480
+ /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
481
+ !*** css ../../node_modules/.pnpm/css-loader@6.11.0_webpack@5.94.0/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@13.3.3_sass@1.77.8_webpack@5.94.0/node_modules/sass-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.5.10_typescript@5.9.3_webpack@5.94.0/node_modules/postcss-loader/dist/cjs.js!./src/styles/variables/index.scss ***!
482
+ \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
485
483
  .hyphen-components__variables__form-control {
486
484
  --INTERNAL_form-control-box-shadow-focus: 0 0 0 3px var(--color-border-subtle);
487
485
  --INTERNAL_form-control-label-margin: var(--size-spacing-xs);