@ebrains/react 2.4.1 → 3.1.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 (132) hide show
  1. package/color-primary-palette_6.entry.esm.js +106 -106
  2. package/components-section.entry.esm.js +1 -1
  3. package/correct-use-of-colors.entry.esm.js +33 -33
  4. package/docs-palettes.entry.esm.js +1 -1
  5. package/docs-tokens.entry.esm.js +1 -1
  6. package/eds-accordion_53.entry.esm.js +1966 -0
  7. package/eds-app-root.entry.esm.js +4 -4
  8. package/eds-cookies-preference.entry.esm.js +3 -3
  9. package/eds-feedback.entry.esm.js +5 -5
  10. package/eds-frame.entry.esm.js +7 -7
  11. package/eds-gauge.entry.esm.js +8 -9
  12. package/eds-gitlab-contributors.entry.esm.js +287 -0
  13. package/eds-icon-bluesky.entry.esm.js +1 -1
  14. package/eds-icon-eu.entry.esm.js +2 -2
  15. package/eds-icon-facebook.entry.esm.js +1 -1
  16. package/eds-icon-gitlab.entry.esm.js +1 -1
  17. package/eds-icon-linkedin.entry.esm.js +1 -1
  18. package/eds-icon-mastodon.entry.esm.js +1 -1
  19. package/eds-icon-twitter.entry.esm.js +1 -1
  20. package/eds-icon-youtube.entry.esm.js +1 -1
  21. package/eds-input-search.entry.esm.js +96 -0
  22. package/eds-modal.entry.esm.js +88 -31
  23. package/eds-pie.entry.esm.js +38 -4
  24. package/eds-section-core_2.entry.esm.js +5 -5
  25. package/eds-splash-screen.entry.esm.js +4 -12
  26. package/eds-timeline.entry.esm.js +8 -14
  27. package/eds-toast-manager.entry.esm.js +1 -1
  28. package/eds-trl-badge.entry.esm.js +186 -0
  29. package/eu-8ac3e99c.esm.js +7 -0
  30. package/incorrect-use-of-colors.entry.esm.js +8 -8
  31. package/index.esm.js +1 -1
  32. package/index.esm2.js +22 -142
  33. package/logo-space.entry.esm.js +138 -17
  34. package/logo-variations-horizontal_2.entry.esm.js +28 -54
  35. package/logo-variations-tabs.entry.esm.js +1 -1
  36. package/logo-wrong-usage.entry.esm.js +33 -33
  37. package/negative-84eec72e.esm.js +104 -0
  38. package/package.json +1 -1
  39. package/positive-cc986d7c.esm.js +65 -0
  40. package/src/components.d.ts +11 -2
  41. package/src/generated/components.d.ts +0 -1
  42. package/svg-repository.entry.esm.js +7 -254
  43. package/token-list_3.entry.esm.js +79 -51
  44. package/token-ratios.entry.esm.js +3 -3
  45. package/token-spacing.entry.esm.js +26 -26
  46. package/token-typography.entry.esm.js +88 -79
  47. package/arrow-diagonal-black-8f0494c3.esm.js +0 -3
  48. package/arrow-right-9322ba8a.esm.js +0 -5
  49. package/bin-37cad2f0.esm.js +0 -3
  50. package/bookmark-c200037c.esm.js +0 -16
  51. package/chevron-down-6144c823.esm.js +0 -12
  52. package/chevron-left-ca6c66e1.esm.js +0 -11
  53. package/chevron-right-b88ed2d4.esm.js +0 -5
  54. package/chevron-up-c66bd477.esm.js +0 -12
  55. package/clone-dab56639.esm.js +0 -3
  56. package/close-87fc0d63.esm.js +0 -5
  57. package/copy-03b72cb6.esm.js +0 -5
  58. package/download-47746956.esm.js +0 -18
  59. package/draft-dd5dada2.esm.js +0 -3
  60. package/edit-3893a517.esm.js +0 -3
  61. package/eds-accordion_37.entry.esm.js +0 -1201
  62. package/eds-card-desc_2.entry.esm.js +0 -85
  63. package/eds-card-generic.entry.esm.js +0 -116
  64. package/eds-card-project.entry.esm.js +0 -209
  65. package/eds-card-section.entry.esm.js +0 -56
  66. package/eds-card-tags.entry.esm.js +0 -27
  67. package/eds-card-tool.entry.esm.js +0 -105
  68. package/eds-footer.entry.esm.js +0 -145
  69. package/eds-fullscreen-menu.entry.esm.js +0 -143
  70. package/eds-icon-arrow-diagonal.entry.esm.js +0 -21
  71. package/eds-icon-arrow-right.entry.esm.js +0 -21
  72. package/eds-icon-bin.entry.esm.js +0 -21
  73. package/eds-icon-bookmark.entry.esm.js +0 -21
  74. package/eds-icon-chevron-down.entry.esm.js +0 -21
  75. package/eds-icon-chevron-left.entry.esm.js +0 -21
  76. package/eds-icon-chevron-right.entry.esm.js +0 -21
  77. package/eds-icon-chevron-up.entry.esm.js +0 -21
  78. package/eds-icon-clone.entry.esm.js +0 -21
  79. package/eds-icon-close.entry.esm.js +0 -21
  80. package/eds-icon-copy.entry.esm.js +0 -21
  81. package/eds-icon-download.entry.esm.js +0 -21
  82. package/eds-icon-draft.entry.esm.js +0 -21
  83. package/eds-icon-edit.entry.esm.js +0 -21
  84. package/eds-icon-external.entry.esm.js +0 -21
  85. package/eds-icon-loader.entry.esm.js +0 -21
  86. package/eds-icon-menu.entry.esm.js +0 -21
  87. package/eds-icon-minus.entry.esm.js +0 -21
  88. package/eds-icon-more.entry.esm.js +0 -21
  89. package/eds-icon-paper.entry.esm.js +0 -21
  90. package/eds-icon-plus.entry.esm.js +0 -21
  91. package/eds-icon-portal.entry.esm.js +0 -21
  92. package/eds-icon-private.entry.esm.js +0 -21
  93. package/eds-icon-public.entry.esm.js +0 -21
  94. package/eds-icon-search.entry.esm.js +0 -21
  95. package/eds-icon-star.entry.esm.js +0 -21
  96. package/eds-icon-start.entry.esm.js +0 -21
  97. package/eds-icon-success.entry.esm.js +0 -21
  98. package/eds-icon-thumbs-down.entry.esm.js +0 -21
  99. package/eds-icon-thumbs-up.entry.esm.js +0 -21
  100. package/eds-icon-tutorial.entry.esm.js +0 -21
  101. package/eds-icon-unknown.entry.esm.js +0 -21
  102. package/eds-icon-updown.entry.esm.js +0 -21
  103. package/eds-icon-user.entry.esm.js +0 -21
  104. package/eds-icon-view.entry.esm.js +0 -21
  105. package/eds-progress-bar.entry.esm.js +0 -52
  106. package/eds-social-networks.entry.esm.js +0 -73
  107. package/eds-trl.entry.esm.js +0 -68
  108. package/eu-9ddde93a.esm.js +0 -30
  109. package/index-39c58238.esm.js +0 -58
  110. package/loader-c9628637.esm.js +0 -30
  111. package/logo-color-7f1fd803.esm.js +0 -115
  112. package/logo-color-margins-ff8ce71b.esm.js +0 -118
  113. package/logo-white-no-bg-f382f86f.esm.js +0 -1021
  114. package/menu-340ea948.esm.js +0 -11
  115. package/minus-b30a7c71.esm.js +0 -11
  116. package/more-4449d549.esm.js +0 -13
  117. package/paper-8e74ea31.esm.js +0 -15
  118. package/plus-89c07be2.esm.js +0 -12
  119. package/portal-d6c8ce56.esm.js +0 -18
  120. package/private-1c25ff8e.esm.js +0 -25
  121. package/public-d4d8c585.esm.js +0 -16
  122. package/search-fbcd79c2.esm.js +0 -12
  123. package/star-0da9b5e9.esm.js +0 -5
  124. package/start-65126a4f.esm.js +0 -3
  125. package/success-443809da.esm.js +0 -18
  126. package/thumbs-down-a18fd049.esm.js +0 -5
  127. package/thumbs-up-c19a71bc.esm.js +0 -6
  128. package/tutotial-150ee1fd.esm.js +0 -27
  129. package/unknown-ed01a24c.esm.js +0 -22
  130. package/up-and-down-8b69ca97.esm.js +0 -12
  131. package/user-71ebdc15.esm.js +0 -16
  132. package/view-e900f2d4.esm.js +0 -3
@@ -9,82 +9,82 @@ const TokenSpacing = class {
9
9
  }
10
10
  render() {
11
11
  return h("div", {
12
- key: '6b3242864d2a095f7a39a2e13be792d864a2f349',
12
+ key: '857d52883315b5be7edb90c89602b29f258cabda',
13
13
  class: "w-full"
14
14
  }, h("ul", {
15
- key: 'afb2db7e82d1efc4c5f2118d3ce912836214b65c',
15
+ key: 'e1dbf5d8e227c9014183c2465bf281e554f7e35b',
16
16
  class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
17
17
  }, h("li", {
18
- key: '01f8b99e5d3bc38d9946f645c79c93bd7c2118b1',
18
+ key: '85795c6c4ad2c4fc05cda1183a06dadc78521b45',
19
19
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
20
20
  }, h("div", {
21
- key: 'd6986922cca32cdfeb39d3b31f7c3a1a7c1bb9e4',
21
+ key: 'e0d6a8712ab4d47dca6ca275c09592b8af381b20',
22
22
  class: "container p-8 item-center border-2 border-soft"
23
23
  }, h("div", {
24
- key: 'f8cfae4596dbd048053d5e433b55d6b4ecaa5351',
24
+ key: 'cbfc5e4dcb4040b375d195246626d833d5b33057',
25
25
  class: "spacing-sample m-16 bg-strong"
26
26
  }, h("span", {
27
- key: '4b19dd66840ea52b31b94d7222bde7cde6346225',
27
+ key: '8aa060bb7da7ffdbcd343c849f5e62c6db648fd7',
28
28
  class: "f-body-01 text-inverse"
29
29
  }, "Margin: 1rem / m-16")))), h("li", {
30
- key: '8a8a0b2815f07dd8e9c3235b16ae1e8bdac1c3e3',
30
+ key: 'f4e5e7a4eedac3a350f8c68adc5cdc8ba742166a',
31
31
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
32
32
  }, h("div", {
33
- key: '096cc724cec2033f1f8f87bb5b6fac60dce82bd5',
33
+ key: 'de4ce6ca17ba9c0a20a794e1ec55f2fcc1f0c440',
34
34
  class: "container p-8 item-center border-2 border-soft"
35
35
  }, h("div", {
36
- key: 'cf1917d881f307141e011aadc6d353883bf96720',
36
+ key: '52766704ac7cb4b1336d4283991c5204c7dece18',
37
37
  class: "spacing-sample ml-64 bg-strong"
38
38
  }, h("span", {
39
- key: '46c1054edcbad036d37d31ea86f85c13ea141dc3',
39
+ key: '60c2b72b390ac0b204cf10cf2c01907915e0b3a1',
40
40
  class: "f-body-01 text-inverse"
41
41
  }, "Margin Left: 4rem / ml-64")))), h("li", {
42
- key: '562965b0245275992204e227b7cdb0d15df3e7fe',
42
+ key: '1b7922c2a246a1a95e2e26e455b55ea7b5a2a3e9',
43
43
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
44
44
  }, h("div", {
45
- key: '1e3f7de64f7916a507b2dad14b9f6f711990dc0f',
45
+ key: '7d43b9c4bc7ebd4883d9d7871b9fb02a2cece586',
46
46
  class: "container p-8 item-center border-2 border-soft"
47
47
  }, h("div", {
48
- key: 'e7d391fca34899535c0c480dca50a169832cad89',
48
+ key: '7afeb3b0db7c70f11e09b5df2d396ebfc4454f00',
49
49
  class: "spacing-sample mt-32 bg-strong"
50
50
  }, h("span", {
51
- key: 'c8ecacf9b3ffe5cc0d5178953ed81612bfe7bfb9',
51
+ key: '3bccca0e93ad8accb3da8ce64c86ee70d2a6f255',
52
52
  class: "f-body-01 text-inverse"
53
53
  }, "Margin Top: 2rem / mt-32")))), h("li", {
54
- key: '578d79c02cfd18f3fd325c854c83a175358de29c',
54
+ key: '7cbdb2d1b0cd2f91c1b7a05d6654e89a26f74340',
55
55
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
56
56
  }, h("div", {
57
- key: 'ea1b373a23cb9f504bb2f668592b05d7906463ff',
57
+ key: 'a47cb7cce3d8947d07ceff06fea30e19df12c6ec',
58
58
  class: "container p-8 item-center border-2 border-soft"
59
59
  }, h("div", {
60
- key: '4f5c6994dd127b2d8f6242d34182e768bff37a93',
60
+ key: '2ee8dc2c52d8a689c12f0333cf7a4d0b36e572f7',
61
61
  class: "spacing-sample p-32 bg-strong"
62
62
  }, h("span", {
63
- key: '6833463ec21e77da1bed3b1c2d2e4df3892d655c',
63
+ key: '2c19bbed58312c84d15ef45fc4bd5a699718b259',
64
64
  class: "f-body-01 text-inverse"
65
65
  }, "Padding: 2rem / p-32")))), h("li", {
66
- key: 'c625bba2faa660cd7de320d5de8833ad67124e65',
66
+ key: '89283aab1c8e84f4d692e290e227d5b91e88cd56',
67
67
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
68
68
  }, h("div", {
69
- key: '1c28128ae1046cbe561f526725f2e1f4098841a8',
69
+ key: 'e341336d74199f51d440ad01217816939b4877eb',
70
70
  class: "container p-8 item-center border-2 border-soft"
71
71
  }, h("div", {
72
- key: '2d82995a9278f32ad257b5f43e299dc59fccfb8b',
72
+ key: '6d59ec419924101b4b2d4daf1fa385cd7d921c2e',
73
73
  class: "spacing-sample pt-32 bg-strong"
74
74
  }, h("span", {
75
- key: '7afad7410f0f0c867d32b7e81a384fe294bdba07',
75
+ key: '378293318a5aa7c0c9fecb575e533aa97c7b0ecf',
76
76
  class: "f-body-01 text-inverse"
77
77
  }, "Padding Top: 2rem / pt-32")))), h("li", {
78
- key: '96a65c8b325e8c271e95d3e98c447ed6c438ee09',
78
+ key: 'a8e4328bb418b7b878aebfdfe4022e3054b5167e',
79
79
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
80
80
  }, h("div", {
81
- key: '4907c7fdc86c09e0760ba4ab9e0b06606804ca46',
81
+ key: '421adc7f90db876dca2304f0c0f794c2b93b4536',
82
82
  class: "container p-8 item-center border-2 border-soft"
83
83
  }, h("div", {
84
- key: 'cebf638f44789c31845edfafe6d6e82e6fe8d188',
84
+ key: 'ebb689a6011c3da5282eb3bb1cc1a0581af86e90',
85
85
  class: "spacing-sample pl-32 bg-strong"
86
86
  }, h("span", {
87
- key: '3ca0c927fe573467215c84ffb8373bb90e4bf949',
87
+ key: '8924318c5edcb5d78c37dc1a768e1b3e0fa775ed',
88
88
  class: "f-body-01 text-inverse"
89
89
  }, "Padding Left: 2rem / pl-32"))))));
90
90
  }
@@ -6,8 +6,8 @@ import 'react-dom';
6
6
  const headings = {
7
7
  'heading-01': {
8
8
  sm: {
9
- fontFamily: 'var(--sans)',
10
- fontWeight: 800,
9
+ fontFamily: 'var(--inter)',
10
+ fontWeight: 300,
11
11
  fontSize: '42px',
12
12
  lineHeight: '100%',
13
13
  letterSpacing: '-0.01em'
@@ -24,8 +24,8 @@ const headings = {
24
24
  },
25
25
  'heading-02': {
26
26
  sm: {
27
- fontFamily: 'var(--sans)',
28
- fontWeight: 800,
27
+ fontFamily: 'var(--inter)',
28
+ fontWeight: 300,
29
29
  fontSize: '36px',
30
30
  lineHeight: '100%',
31
31
  letterSpacing: '-0.01em'
@@ -39,8 +39,8 @@ const headings = {
39
39
  },
40
40
  'heading-03': {
41
41
  sm: {
42
- fontFamily: 'var(--sans)',
43
- fontWeight: 800,
42
+ fontFamily: 'var(--inter)',
43
+ fontWeight: 300,
44
44
  fontSize: '36px',
45
45
  lineHeight: '100%',
46
46
  letterSpacing: '-0.01em'
@@ -51,8 +51,8 @@ const headings = {
51
51
  },
52
52
  'heading-04': {
53
53
  sm: {
54
- fontFamily: 'var(--sans)',
55
- fontWeight: 800,
54
+ fontFamily: 'var(--inter)',
55
+ fontWeight: 300,
56
56
  fontSize: '28px',
57
57
  lineHeight: '100%',
58
58
  letterSpacing: '-0.01em'
@@ -63,8 +63,8 @@ const headings = {
63
63
  },
64
64
  'heading-05': {
65
65
  sm: {
66
- fontFamily: 'var(--sans)',
67
- fontWeight: 800,
66
+ fontFamily: 'var(--inter)',
67
+ fontWeight: 300,
68
68
  fontSize: '28px',
69
69
  lineHeight: '110%',
70
70
  letterSpacing: '-0.01em'
@@ -72,8 +72,8 @@ const headings = {
72
72
  },
73
73
  'heading-06': {
74
74
  sm: {
75
- fontFamily: 'var(--sans)',
76
- fontWeight: 800,
75
+ fontFamily: 'var(--inter)',
76
+ fontWeight: 300,
77
77
  fontSize: '22px',
78
78
  lineHeight: '120%'
79
79
  }
@@ -82,8 +82,8 @@ const headings = {
82
82
  const bodies = {
83
83
  'body-01': {
84
84
  sm: {
85
- fontFamily: 'var(--sans)',
86
- fontWeight: 600,
85
+ fontFamily: 'var(--plex-sans)',
86
+ fontWeight: 400,
87
87
  fontSize: '20px',
88
88
  lineHeight: '140%',
89
89
  letterSpacing: '-0.01em'
@@ -91,8 +91,16 @@ const bodies = {
91
91
  },
92
92
  'body-02': {
93
93
  sm: {
94
- fontFamily: 'var(--sans)',
95
- fontWeight: 600,
94
+ fontFamily: 'var(--plex-sans)',
95
+ fontWeight: 400,
96
+ fontSize: '17px',
97
+ lineHeight: '150%'
98
+ }
99
+ },
100
+ 'body-03': {
101
+ sm: {
102
+ fontFamily: 'var(--plex-sans)',
103
+ fontWeight: 400,
96
104
  fontSize: '17px',
97
105
  lineHeight: '150%'
98
106
  }
@@ -101,8 +109,8 @@ const bodies = {
101
109
  const uis = {
102
110
  'ui-01': {
103
111
  sm: {
104
- fontFamily: 'var(--sans)',
105
- fontWeight: 800,
112
+ fontFamily: 'var(--plex-sans)',
113
+ fontWeight: 400,
106
114
  fontSize: '18px',
107
115
  lineHeight: '110%',
108
116
  letterSpacing: '-0.01em'
@@ -110,8 +118,8 @@ const uis = {
110
118
  },
111
119
  'ui-02': {
112
120
  sm: {
113
- fontFamily: 'var(--sans)',
114
- fontWeight: 800,
121
+ fontFamily: 'var(--plex-sans)',
122
+ fontWeight: 400,
115
123
  fontSize: '16px',
116
124
  lineHeight: '110%',
117
125
  letterSpacing: '-0.01em'
@@ -119,8 +127,8 @@ const uis = {
119
127
  },
120
128
  'ui-02-light': {
121
129
  sm: {
122
- fontFamily: 'var(--sans)',
123
- fontWeight: 600,
130
+ fontFamily: 'var(--plex-sans)',
131
+ fontWeight: 400,
124
132
  fontSize: '16px',
125
133
  lineHeight: '110%',
126
134
  letterSpacing: '-0.01em'
@@ -128,8 +136,8 @@ const uis = {
128
136
  },
129
137
  'ui-03': {
130
138
  sm: {
131
- fontFamily: 'var(--sans)',
132
- fontWeight: 800,
139
+ fontFamily: 'var(--plex-sans)',
140
+ fontWeight: 400,
133
141
  fontSize: '14px',
134
142
  lineHeight: '110%',
135
143
  letterSpacing: '-0.01em'
@@ -137,8 +145,8 @@ const uis = {
137
145
  },
138
146
  'ui-03-light': {
139
147
  sm: {
140
- fontFamily: 'var(--sans)',
141
- fontWeight: 600,
148
+ fontFamily: 'var(--plex-sans)',
149
+ fontWeight: 400,
142
150
  fontSize: '14px',
143
151
  lineHeight: '130%',
144
152
  letterSpacing: '-0.01em'
@@ -146,8 +154,8 @@ const uis = {
146
154
  },
147
155
  'ui-04': {
148
156
  sm: {
149
- fontFamily: 'var(--sans)',
150
- fontWeight: 800,
157
+ fontFamily: 'var(--plex-sans)',
158
+ fontWeight: 400,
151
159
  fontSize: '12px',
152
160
  lineHeight: '100%',
153
161
  letterSpacing: '-0.01em'
@@ -155,8 +163,8 @@ const uis = {
155
163
  },
156
164
  'ui-05': {
157
165
  sm: {
158
- fontFamily: 'var(--sans)',
159
- fontWeight: 800,
166
+ fontFamily: 'var(--plex-sans)',
167
+ fontWeight: 400,
160
168
  fontSize: '10px',
161
169
  lineHeight: '110%',
162
170
  letterSpacing: '-0.01em'
@@ -164,18 +172,26 @@ const uis = {
164
172
  },
165
173
  caption: {
166
174
  sm: {
167
- fontFamily: 'var(--sans)',
168
- fontWeight: 800,
175
+ fontFamily: 'var(--plex-sans)',
176
+ fontWeight: 400,
169
177
  fontSize: '12px',
170
178
  lineHeight: '120%'
171
179
  }
180
+ },
181
+ code: {
182
+ sm: {
183
+ fontFamily: 'var(--plex-mono)',
184
+ fontWeight: 400,
185
+ fontSize: '14px',
186
+ lineHeight: '140%'
187
+ }
172
188
  }
173
189
  };
174
190
  const displays = {
175
191
  'display-01': {
176
192
  sm: {
177
- fontFamily: 'var(--sans)',
178
- fontWeight: 800,
193
+ fontFamily: 'var(--inter)',
194
+ fontWeight: 300,
179
195
  fontSize: '120px',
180
196
  lineHeight: '100%',
181
197
  letterSpacing: '-0.01em'
@@ -183,11 +199,25 @@ const displays = {
183
199
  lg: {
184
200
  fontSize: '150px'
185
201
  }
202
+ },
203
+ 'display-02': {
204
+ sm: {
205
+ fontFamily: 'var(--inter)',
206
+ fontWeight: 300,
207
+ fontSize: '120px',
208
+ lineHeight: '100%',
209
+ letterSpacing: '-0.02em'
210
+ },
211
+ lg: {
212
+ fontSize: '150px'
213
+ }
186
214
  }
187
215
  };
188
216
  const typography = {
189
217
  families: {
190
- sans: 'Inter, Helvetica, Arial, sans-serif'
218
+ inter: 'Inter, Helvetica, Arial, sans-serif',
219
+ 'plex-sans': '"IBM Plex Sans", Inter, Helvetica, Arial, sans-serif',
220
+ 'plex-mono': '"IBM Plex Mono", "Courier New", Courier, monospace'
191
221
  },
192
222
  typesets: {
193
223
  ...headings,
@@ -202,64 +232,43 @@ const TokenTypography = class {
202
232
  }
203
233
  render() {
204
234
  return h("section", {
205
- key: 'aedc3e99bcef2710c6919855fd30de9fa44d48f5',
235
+ key: 'ce7e291884a4b1bef85050a04c798a365287a131',
206
236
  class: "w-full"
207
237
  }, h("ul", {
208
- key: '7391f39ff3599e976cd19805f35a5d4e74e06fa6',
238
+ key: '070567197ed557c07284ebe733c4f9f3246c60d7',
209
239
  class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
210
240
  }, Object.entries(typography.typesets).filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
211
241
  .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => h("li", {
212
- class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
242
+ class: "grid-col-span-12 flex flex-col mt-16"
213
243
  }, h("div", {
214
- class: "w-full p-4 block lg:flex items-center border border-soft rounded"
244
+ class: "w-full p-16 border border-soft rounded",
245
+ style: {
246
+ display: 'grid',
247
+ gridTemplateColumns: '1fr 1fr',
248
+ gap: '1.5rem',
249
+ alignItems: 'center'
250
+ }
215
251
  }, h("div", {
216
- class: "mr-auto hidden lg:block",
217
252
  style: {
218
- fontFamily: typography.families.sans,
253
+ fontFamily: style.fontFamily || typography.families['plex-sans'],
219
254
  fontWeight: style.fontWeight,
220
255
  fontSize: style.fontSize,
221
256
  lineHeight: style.lineHeight,
222
257
  letterSpacing: style.letterSpacing
223
258
  }
224
259
  }, h("span", {
225
- class: "text-default font-bold"
226
- }, `${typeKey} (${size})`)), h("div", {
227
- class: "mr-auto block lg:hidden p-4"
228
- }, h("span", {
229
- class: "text-default f-heading-05"
230
- }, `${typeKey} (${size})`)), h("div", {
231
- class: "ml-auto"
232
- }, h("eds-code-block", {
233
- code: [style.fontSize && `font-size: ${style.fontSize};`, style.lineHeight && `line-height: ${style.lineHeight};`, style.letterSpacing && `letter-spacing: ${style.letterSpacing};`, style.fontWeight && `font-weight: ${style.fontWeight};`, style.fontFamily && `font-family: ${style.fontFamily};`].filter(Boolean) // Remove any falsy values (e.g., undefined, null)
234
- .join('\n'),
235
- language: "css",
236
- class: "min-w-[250px] mb-4"
237
- }), h("eds-code-block", {
238
- code: `f-${typeKey}`,
239
- language: "Utility Class",
240
- class: "min-w-[250px] mb-4"
241
- }), h("eds-code-block", {
242
- code: `${size}:f-${typeKey}`,
243
- language: "Screen",
244
- class: "min-w-[250px] mb-4"
245
- }), h("eds-code-block", {
246
- code: `--var(--f-${typeKey}-fontFamily)`,
247
- class: "min-w-[250px] mb-4"
248
- }), h("eds-code-block", {
249
- code: `--var(--f-${typeKey}-fontWeight)`,
250
- class: "min-w-[250px] mb-4"
251
- }), h("eds-code-block", {
252
- code: `--var(--f-${typeKey}-fontSize)`,
253
- class: "min-w-[250px] mb-4"
254
- }), h("eds-code-block", {
255
- code: `--var(--f-${typeKey}-lineHeight)`,
256
- class: "min-w-[250px] mb-4"
257
- }), h("eds-code-block", {
258
- code: `--var(--f-${typeKey}-letterSpacing)`,
259
- class: "min-w-[250px] mb-4"
260
- }), h("eds-code-block", {
261
- code: `--sans: Inter, Helvetica, Arial, sans-serif;`,
262
- class: "min-w-[250px] mb-4"
260
+ class: "text-default"
261
+ }, `${typeKey}`), h("div", {
262
+ style: {
263
+ fontSize: '12px',
264
+ fontWeight: '400',
265
+ color: '#7A7B7A',
266
+ marginTop: '4px',
267
+ fontFamily: '"IBM Plex Mono", monospace'
268
+ }
269
+ }, size, " \u00B7 class: f-", typeKey)), h("div", null, h("eds-code-block", {
270
+ code: [`/* Utility: f-${typeKey} | Screen: ${size}:f-${typeKey} */`, style.fontSize && `font-size: ${style.fontSize};`, style.lineHeight && `line-height: ${style.lineHeight};`, style.letterSpacing && `letter-spacing: ${style.letterSpacing};`, style.fontWeight && `font-weight: ${style.fontWeight};`, `font-family: "IBM Plex Sans", sans-serif;`].filter(Boolean).join('\n'),
271
+ language: "css"
263
272
  }))))))));
264
273
  }
265
274
  };
@@ -1,3 +0,0 @@
1
- const arrowDiagonal = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5858 3H17V9.41421L14.5 6.91421L8.70712 12.7071L7.29291 11.2929L13.0858 5.5L10.5858 3Z" fill="currentColor"></path><path d="M8 4H5C3.89543 4 3 4.89543 3 6V15C3 16.1046 3.89543 17 5 17H14C15.1046 17 16 16.1046 16 15V12H14V15H5V6H8V4Z" fill="currentColor"></path></svg>`;
2
-
3
- export { arrowDiagonal as a };
@@ -1,5 +0,0 @@
1
- const arrowRight = `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
2
- <path fill="currentColor" d="M2 8.5h9V3l7 7-7 7v-5.5H2v-3Z" />
3
- </svg>`;
4
-
5
- export { arrowRight as a };
@@ -1,3 +0,0 @@
1
- const bin = `<svg viewBox="0 0 24 24" width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M10 11V17" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M14 11V17" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M4 7H20" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M6 7H12H18V18C18 19.6569 16.6569 21 15 21H9C7.34315 21 6 19.6569 6 18V7Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>`;
2
-
3
- export { bin as b };
@@ -1,16 +0,0 @@
1
- const bookmark = ` <svg
2
- width="20"
3
- height="20"
4
- viewBox="0 0 20 20"
5
- fill="none"
6
- xmlns="http://www.w3.org/2000/svg"
7
- >
8
- <path
9
- d="M5 4H15V16L10 12.0138L5 16V4Z"
10
- stroke="currentColor"
11
- stroke-width="1.5"
12
- stroke-linejoin="round"
13
- />
14
- </svg>`;
15
-
16
- export { bookmark as b };
@@ -1,12 +0,0 @@
1
- const chevronDown = `<svg
2
- width="20"
3
- height="20"
4
- viewBox="0 0 20 20"
5
- fill="none"
6
- xmlns="http://www.w3.org/2000/svg"
7
- >
8
- <path d="M10 13L4 7H16L10 13Z" fill="currentColor" />
9
- </svg>
10
- `;
11
-
12
- export { chevronDown as c };
@@ -1,11 +0,0 @@
1
- const chevronLeft = ` <svg
2
- width="20"
3
- height="20"
4
- viewBox="0 0 20 20"
5
- fill="none"
6
- xmlns="http://www.w3.org/2000/svg"
7
- >
8
- <path d="M7 10L13 4L13 16L7 10Z" fill="currentColor" />
9
- </svg>`;
10
-
11
- export { chevronLeft as c };
@@ -1,5 +0,0 @@
1
- const chevronRight = ` <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
2
- <path fill="currentColor" d="m13 10-6 6V4l6 6Z" />
3
- </svg>`;
4
-
5
- export { chevronRight as c };
@@ -1,12 +0,0 @@
1
- const chevronUp = `<svg
2
- width="20"
3
- height="20"
4
- viewBox="0 0 20 20"
5
- fill="none"
6
- xmlns="http://www.w3.org/2000/svg"
7
- >
8
- <path d="M4 13L10 7L16 13L4 13Z" fill="currentColor" />
9
- </svg>
10
- `;
11
-
12
- export { chevronUp as c };
@@ -1,3 +0,0 @@
1
- const clone = `<svg fill="#000000" height="20" width="20" version="1.1" id="XMLID_158_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="clone"> <g> <path d="M24,24H6V6h18V24z M8,22h14V8H8V22z M4,18H0v-4h2v2h2V18z M2,12H0V6h2V12z M18,4h-2V2h-2V0h4V4z M2,4H0V0h4v2H2V4z M12,2 H6V0h6V2z"></path> </g> </g> </g></svg>`;
2
-
3
- export { clone as c };
@@ -1,5 +0,0 @@
1
- const close = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
2
- <path stroke="currentColor" stroke-width="2" d="M16 4 4 16m12 0L4 4" />
3
- </svg>`;
4
-
5
- export { close as c };
@@ -1,5 +0,0 @@
1
- const copy = `<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
2
- <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
3
- </svg>`;
4
-
5
- export { copy as c };
@@ -1,18 +0,0 @@
1
- const download = `<svg
2
- width="20"
3
- height="20"
4
- viewBox="0 0 20 20"
5
- fill="none"
6
- xmlns="http://www.w3.org/2000/svg"
7
- >
8
- <path
9
- d="M5.91937 8H9V3H11V8H14.0806L10 13.1008L5.91937 8Z"
10
- fill="currentColor"
11
- />
12
- <path
13
- d="M5 15V12H3V15C3 16.1046 3.89543 17 5 17H15C16.1046 17 17 16.1046 17 15V12H15V15H5Z"
14
- fill="currentColor"
15
- />
16
- </svg>`;
17
-
18
- export { download as d };
@@ -1,3 +0,0 @@
1
- const draft = `<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path fill="none" d="M0 0L24 0 24 24 0 24z"></path> <path d="M20 2c.552 0 1 .448 1 1v3.757l-2 2V4H5v16h14v-2.758l2-2V21c0 .552-.448 1-1 1H4c-.552 0-1-.448-1-1V3c0-.552.448-1 1-1h16zm1.778 6.808l1.414 1.414L15.414 18l-1.416-.002.002-1.412 7.778-7.778zM13 12v2H8v-2h5zm3-4v2H8V8h8z"></path> </g> </g></svg>`;
2
-
3
- export { draft as d };
@@ -1,3 +0,0 @@
1
- const edit = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 3.99997H6C4.89543 3.99997 4 4.8954 4 5.99997V18C4 19.1045 4.89543 20 6 20H18C19.1046 20 20 19.1045 20 18V12M18.4142 8.41417L19.5 7.32842C20.281 6.54737 20.281 5.28104 19.5 4.5C18.7189 3.71895 17.4526 3.71895 16.6715 4.50001L15.5858 5.58575M18.4142 8.41417L12.3779 14.4505C12.0987 14.7297 11.7431 14.9201 11.356 14.9975L8.41422 15.5858L9.00257 12.6441C9.08001 12.2569 9.27032 11.9013 9.54951 11.6221L15.5858 5.58575M18.4142 8.41417L15.5858 5.58575" stroke="#000000" stroke-width="1.44" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>`;
2
-
3
- export { edit as e };