@hyphen/hyphen-components 7.7.0 → 7.8.1
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.
- package/dist/css/fonts.css +3 -3
- package/dist/css/index.css +108 -108
- package/dist/css/reset.css +3 -3
- package/dist/css/utilities.css +7 -7
- package/dist/css/variables.css +60 -62
- package/dist/hyphen-components.cjs.development.js.map +1 -1
- package/dist/hyphen-components.cjs.production.min.js.map +1 -1
- package/dist/hyphen-components.esm.js.map +1 -1
- package/dist/index.d.ts +44 -2
- package/package.json +21 -36
- package/src/components/FormControl/FormControl.stories.tsx +92 -0
- package/src/components/Heading/Heading.tsx +2 -2
- package/src/components/HelpText/HelpText.stories.tsx +45 -0
- package/src/components/InputValidationMessage/InputValidationMessage.stories.tsx +50 -0
- package/src/components/Sidebar/Sidebar.mdx +208 -0
- package/src/components/Sidebar/Sidebar.stories.tsx +13 -0
- package/src/components/Sidebar/Sidebar.tsx +42 -0
- package/src/docs/Brands.mdx +14 -12
- package/src/docs/DesignTokens.mdx +1 -1
- package/src/docs/intro.mdx +1 -1
package/dist/css/reset.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
!*** css
|
|
3
|
-
|
|
1
|
+
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
|
2
|
+
!*** 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/reset.scss ***!
|
|
3
|
+
\**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
|
4
4
|
*,
|
|
5
5
|
*::before,
|
|
6
6
|
*::after {
|
package/dist/css/utilities.css
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
!*** 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
|
|
6
|
+
* Generated on Thu, 09 Jul 2026 18:43:08 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
|
|
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
|
|
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 Fri, 26 Jun 2026 15:58:35 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: #
|
|
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:
|
|
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: #
|
|
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:
|
|
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:
|
|
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:
|
|
44
|
-
--color-background-modal: #
|
|
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: #
|
|
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%, #
|
|
52
|
-
--color-background-brand-gradient-reverse: linear-gradient(270deg, #eab308 0%, #
|
|
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: #
|
|
69
|
+
--color-background-white: #FFFFFF;
|
|
71
70
|
--color-base-black: #000000;
|
|
72
|
-
--color-base-white: #
|
|
73
|
-
--color-base-magenta: #
|
|
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:
|
|
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:
|
|
151
|
-
--color-border-button-tertiary-hover:
|
|
152
|
-
--color-border-button-tertiary-active:
|
|
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: #
|
|
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: #
|
|
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: #
|
|
201
|
-
--color-font-button-primary-hover: #
|
|
202
|
-
--color-font-button-primary-active: #
|
|
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: #
|
|
210
|
-
--color-font-button-danger-hover: #
|
|
211
|
-
--color-font-button-danger-active: #
|
|
212
|
-
--color-font-badge-default: #
|
|
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: #
|
|
216
|
+
--color-font-toast-error: #FFFFFF;
|
|
218
217
|
--color-font-tooltip: #f5f5f5;
|
|
219
218
|
--color-font-popover: #404040;
|
|
220
|
-
--color-font-placeholder: #a3a3a3;
|
|
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;
|
|
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;
|
|
353
|
-
--size-line-height-heading: 1.25;
|
|
354
|
-
--size-line-height-text: 1.5;
|
|
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
|
|
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 Fri, 26 Jun 2026 15:58:35 GMT
|
|
383
|
+
* Do not edit directly, this file was auto-generated.
|
|
386
384
|
*/
|
|
387
385
|
|
|
388
386
|
:root.dark {
|
|
@@ -397,19 +395,19 @@
|
|
|
397
395
|
--color-background-info: #f0f9ff;
|
|
398
396
|
--color-background-inverse: #e5e5e5;
|
|
399
397
|
--color-background-transparent: transparent;
|
|
400
|
-
--color-background-button-primary: #
|
|
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;
|
|
404
|
-
--color-background-button-secondary-hover: #
|
|
405
|
-
--color-background-button-secondary-active: #
|
|
402
|
+
--color-background-button-secondary-hover: #262626;
|
|
403
|
+
--color-background-button-secondary-active: #171717;
|
|
406
404
|
--color-background-button-tertiary: transparent;
|
|
407
405
|
--color-background-button-tertiary-hover: #404040;
|
|
408
406
|
--color-background-button-tertiary-active: #525252;
|
|
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: #
|
|
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: #
|
|
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,16 +430,16 @@
|
|
|
432
430
|
--color-border-inverse: #d4d4d4;
|
|
433
431
|
--color-border-info: #bfdbfe;
|
|
434
432
|
--color-border-success: #bbf7d0;
|
|
435
|
-
--color-border-button-primary: #
|
|
433
|
+
--color-border-button-primary: #FFFFFF;
|
|
436
434
|
--color-border-button-primary-hover: #e5e5e5;
|
|
437
435
|
--color-border-button-primary-active: #e5e5e5;
|
|
438
|
-
--color-border-button-secondary: #
|
|
439
|
-
--color-border-button-secondary-hover: #
|
|
440
|
-
--color-border-button-secondary-active: #
|
|
436
|
+
--color-border-button-secondary: #525252;
|
|
437
|
+
--color-border-button-secondary-hover: #737373;
|
|
438
|
+
--color-border-button-secondary-active: #a3a3a3;
|
|
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: #
|
|
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: #
|
|
467
|
-
--color-font-button-secondary-hover: #
|
|
468
|
-
--color-font-button-secondary-active: #
|
|
469
|
-
--color-font-button-tertiary: #
|
|
470
|
-
--color-font-button-tertiary-hover: #
|
|
471
|
-
--color-font-button-tertiary-active: #
|
|
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;
|
|
477
|
+
--color-font-placeholder: #737373; /** Placeholder color for input fields */
|
|
480
478
|
}
|
|
481
479
|
|
|
482
|
-
|
|
483
|
-
!*** css
|
|
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);
|