@czi-sds/mcp 0.16.0 → 0.18.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 (167) hide show
  1. package/README.md +2 -1
  2. package/data/component-docs/Accordion.md +291 -0
  3. package/data/component-docs/Autocomplete.md +525 -0
  4. package/data/component-docs/Banner.md +231 -0
  5. package/data/component-docs/Button.md +224 -0
  6. package/data/component-docs/ButtonDropdown.md +256 -0
  7. package/data/component-docs/ButtonGroup.md +320 -0
  8. package/data/component-docs/ButtonToggle.md +397 -0
  9. package/data/component-docs/Callout.md +268 -0
  10. package/data/component-docs/CellBasic.md +122 -0
  11. package/data/component-docs/CellComponent.md +63 -0
  12. package/data/component-docs/CellHeader.md +128 -0
  13. package/data/component-docs/ComplexFilter.md +294 -0
  14. package/data/component-docs/ContentCard.md +406 -0
  15. package/data/component-docs/Dialog.md +651 -0
  16. package/data/component-docs/Dropdown.md +155 -0
  17. package/data/component-docs/DropdownMenu.md +949 -0
  18. package/data/component-docs/HeatmapChart.md +782 -0
  19. package/data/component-docs/Hero.md +363 -0
  20. package/data/component-docs/Icon.md +283 -0
  21. package/data/component-docs/InputCheckbox.md +205 -0
  22. package/data/component-docs/InputDropdown.md +482 -0
  23. package/data/component-docs/InputRadio.md +173 -0
  24. package/data/component-docs/InputSearch.md +81 -0
  25. package/data/component-docs/InputSlider.md +189 -0
  26. package/data/component-docs/InputText.md +110 -0
  27. package/data/component-docs/InputToggle.md +141 -0
  28. package/data/component-docs/IntentMessage.md +293 -0
  29. package/data/component-docs/Legend.md +442 -0
  30. package/data/component-docs/Link.md +23 -0
  31. package/data/component-docs/List.md +300 -0
  32. package/data/component-docs/LoadingIndicator.md +198 -0
  33. package/data/component-docs/Menu.md +298 -0
  34. package/data/component-docs/MenuItem.md +100 -0
  35. package/data/component-docs/NavigationFooter.md +165 -0
  36. package/data/component-docs/NavigationHeader.md +500 -0
  37. package/data/component-docs/NavigationJumpTo.md +414 -0
  38. package/data/component-docs/Notification.md +288 -0
  39. package/data/component-docs/Pagination.md +67 -0
  40. package/data/component-docs/Panel.md +636 -0
  41. package/data/component-docs/Popover.md +448 -0
  42. package/data/component-docs/PreComposedTable.md +2947 -0
  43. package/data/component-docs/ProteinStructureViewer.md +1044 -0
  44. package/data/component-docs/SegmentedControl.md +396 -0
  45. package/data/component-docs/StackedBarChart.md +475 -0
  46. package/data/component-docs/Table.md +2000 -0
  47. package/data/component-docs/TableHeader.md +53 -0
  48. package/data/component-docs/TableRow.md +74 -0
  49. package/data/component-docs/Tabs.md +455 -0
  50. package/data/component-docs/Tag.md +647 -0
  51. package/data/component-docs/TagFilter.md +131 -0
  52. package/data/component-docs/Tooltip.md +561 -0
  53. package/data/component-docs/TooltipCondensed.md +203 -0
  54. package/data/component-docs/TooltipTable.md +145 -0
  55. package/data/component-docs/index.json +267 -0
  56. package/data/component-list.json +2 -5
  57. package/data/component-props/Accordion.json +31 -11
  58. package/data/component-props/Alert.json +3 -3
  59. package/data/component-props/Autocomplete.json +150 -15
  60. package/data/component-props/Banner.json +31 -17
  61. package/data/component-props/Button.json +45 -20
  62. package/data/component-props/ButtonDropdown.json +36 -17
  63. package/data/component-props/ButtonDropdownLegacy.json +11 -11
  64. package/data/component-props/ButtonGroup.json +32 -11
  65. package/data/component-props/ButtonIcon.json +10 -10
  66. package/data/component-props/ButtonLegacy.json +19 -19
  67. package/data/component-props/ButtonToggle.json +32 -19
  68. package/data/component-props/ButtonToggleLegacy.json +11 -11
  69. package/data/component-props/Callout.json +58 -17
  70. package/data/component-props/CellBasic.json +94 -41
  71. package/data/component-props/CellComponent.json +23 -7
  72. package/data/component-props/CellHeader.json +62 -19
  73. package/data/component-props/ComplexFilter.json +52 -21
  74. package/data/component-props/ContentCard.json +70 -47
  75. package/data/component-props/Dialog.json +47 -14
  76. package/data/component-props/Dropdown.json +68 -31
  77. package/data/component-props/DropdownMenu.json +128 -23
  78. package/data/component-props/HeatmapChart.json +88 -12
  79. package/data/component-props/Hero.json +80 -39
  80. package/data/component-props/Icon.json +20 -9
  81. package/data/component-props/InputCheckbox.json +36 -14
  82. package/data/component-props/InputDropdown.json +75 -27
  83. package/data/component-props/InputRadio.json +31 -13
  84. package/data/component-props/InputSearch.json +41 -18
  85. package/data/component-props/InputSlider.json +46 -19
  86. package/data/component-props/InputText.json +26 -19
  87. package/data/component-props/InputToggle.json +26 -9
  88. package/data/component-props/IntentMessage.json +38 -9
  89. package/data/component-props/Link.json +13 -7
  90. package/data/component-props/LoadingIndicator.json +11 -3
  91. package/data/component-props/MenuItem.json +38 -19
  92. package/data/component-props/MenuSelect.json +8 -8
  93. package/data/component-props/NavigationFooter.json +49 -19
  94. package/data/component-props/NavigationHeader.json +150 -37
  95. package/data/component-props/NavigationJumpTo.json +33 -7
  96. package/data/component-props/Notification.json +39 -21
  97. package/data/component-props/Pagination.json +39 -11
  98. package/data/component-props/Panel.json +62 -9
  99. package/data/component-props/Popover.json +80 -7
  100. package/data/component-props/PreComposedTable.json +99 -27
  101. package/data/component-props/ProteinStructureViewer.json +117 -0
  102. package/data/component-props/SegmentedControl.json +42 -3
  103. package/data/component-props/StackedBarChart.json +116 -42
  104. package/data/component-props/TableRow.json +38 -19
  105. package/data/component-props/Tabs.json +66 -9
  106. package/data/component-props/Tag.json +34 -17
  107. package/data/component-props/TagFilter.json +10 -3
  108. package/data/component-props/Tooltip.json +49 -18
  109. package/data/component-props/TooltipCondensed.json +18 -9
  110. package/data/component-props/TooltipTable.json +17 -7
  111. package/data/resources/{zeroheight-rules.md → documentation-rules.md} +43 -30
  112. package/data/resources/figma-rules.md +2 -2
  113. package/data/tailwind.json +20 -14
  114. package/dist/stdio.js +112 -208
  115. package/package.json +9 -5
  116. package/data/component-props/ButtonDropdownV2.json +0 -34
  117. package/data/component-props/ButtonNew.json +0 -47
  118. package/data/component-props/ButtonToggleV2.json +0 -44
  119. package/data/component-props/ButtonV2.json +0 -43
  120. package/data/zeroheight-cache.json +0 -10259
  121. package/data/zeroheight-exports/Accordion.md +0 -774
  122. package/data/zeroheight-exports/Banner.md +0 -691
  123. package/data/zeroheight-exports/Borders.md +0 -117
  124. package/data/zeroheight-exports/Buttons.md +0 -1854
  125. package/data/zeroheight-exports/Callout.md +0 -931
  126. package/data/zeroheight-exports/Colors.md +0 -1755
  127. package/data/zeroheight-exports/Content-Card.md +0 -309
  128. package/data/zeroheight-exports/Contributing-to-SDS.md +0 -98
  129. package/data/zeroheight-exports/Control-Inputs.md +0 -2818
  130. package/data/zeroheight-exports/Corners.md +0 -104
  131. package/data/zeroheight-exports/Cover-page.md +0 -3
  132. package/data/zeroheight-exports/Dialog.md +0 -1367
  133. package/data/zeroheight-exports/Downloads.md +0 -236
  134. package/data/zeroheight-exports/Drop-Shadows.md +0 -79
  135. package/data/zeroheight-exports/Dropdown-Input.md +0 -1776
  136. package/data/zeroheight-exports/Dropdown-Menus.md +0 -913
  137. package/data/zeroheight-exports/Element-Status-Tracker.md +0 -267
  138. package/data/zeroheight-exports/Field-Inputs.md +0 -1405
  139. package/data/zeroheight-exports/Filters.md +0 -1111
  140. package/data/zeroheight-exports/Getting-Started.md +0 -1157
  141. package/data/zeroheight-exports/Hero.md +0 -414
  142. package/data/zeroheight-exports/Icons.md +0 -2067
  143. package/data/zeroheight-exports/Intent.md +0 -86
  144. package/data/zeroheight-exports/Introduction-to-Bases.md +0 -35
  145. package/data/zeroheight-exports/Introduction-to-Cells.md +0 -35
  146. package/data/zeroheight-exports/Introduction-to-DNA.md +0 -35
  147. package/data/zeroheight-exports/Introduction-to-Genes.md +0 -35
  148. package/data/zeroheight-exports/Introduction.md +0 -115
  149. package/data/zeroheight-exports/Link.md +0 -432
  150. package/data/zeroheight-exports/Lists.md +0 -986
  151. package/data/zeroheight-exports/Loading-Indicator.md +0 -41
  152. package/data/zeroheight-exports/Navigation.md +0 -1190
  153. package/data/zeroheight-exports/Notification.md +0 -1038
  154. package/data/zeroheight-exports/Panel.md +0 -1030
  155. package/data/zeroheight-exports/README.md +0 -122
  156. package/data/zeroheight-exports/Responsive-Design.md +0 -330
  157. package/data/zeroheight-exports/Search-Input.md +0 -91
  158. package/data/zeroheight-exports/Search.md +0 -822
  159. package/data/zeroheight-exports/Segmented-Control.md +0 -609
  160. package/data/zeroheight-exports/Spacing.md +0 -297
  161. package/data/zeroheight-exports/Table.md +0 -5345
  162. package/data/zeroheight-exports/Tabs.md +0 -1324
  163. package/data/zeroheight-exports/Tags.md +0 -1545
  164. package/data/zeroheight-exports/Text-Link.md +0 -268
  165. package/data/zeroheight-exports/Theming.md +0 -362
  166. package/data/zeroheight-exports/Tooltips.md +0 -2015
  167. package/data/zeroheight-exports/Typography.md +0 -800
package/data/zeroheight-exports/Spacing.md DELETED
@@ -1,297 +0,0 @@
1
- # Spacing
2
-
3
- Spacing variables ensure spacing is consistent throughout the product while streamlining design and development time.
4
-
5
- ### Types of Spacing
6
-
7
- | **Visual** | | **Spacing Type** | | **Usage** |
8
- | ---------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
9
- | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
10
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
11
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
12
-
13
- ### Spacing Sizes
14
-
15
- | **Name** | | **Visual** | | **Figma Variable** | | **CSS / SCSS Variables** | | **Value** |
16
- | ------------ | --- | ---------- | --- | ------------------ | --- | ------------------------------------------ | --- | --------- |
17
- | spaceDefault | | | | [none] | | `--sds-space-default` `$sds-space-default` | | `12px` |
18
- | spaceXxxs | | | | `spaceXxxs` | | `--sds-space-xxxs` `$sds-space-xxxs` | | `2px` |
19
- | spaceXxs | | | | `spaceXxs` | | `--sds-space-xxs` `$sds-space-xxs` | | `4px` |
20
- | spaceXs | | | | `spaceXs` | | `--sds-space-xs` `$sds-space-xs` | | `6px` |
21
- | spaceS | | | | `spaceS` | | `--sds-space-s` `$sds-space-s` | | `8px` |
22
- | spaceM | | | | `spaceM` | | `--sds-space-m` `$sds-space-m` | | `12px` |
23
- | spaceL | | | | `spaceL` | | `--sds-space-l` `$sds-space-l` | | `16px` |
24
- | spaceXl | | | | `spaceXl` | | `--sds-space-xl` `$sds-space-xl` | | `24px` |
25
- | spaceXxl | | | | `spaceXxl` | | `--sds-space-xxl` `$sds-space-xxl` | | `40px` |
26
-
27
- ### Inset Spacing Variables
28
-
29
- | **Visual** | | **Value** |
30
- | ---------- | --- | --------------------- |
31
- | | | `padding: spaceXxl;` |
32
- | | | `padding: spaceXl;` |
33
- | | | `padding: spaceL;` |
34
- | | | `padding: spaceM;` |
35
- | | | `padding: spaceS;` |
36
- | | | `padding: spaceXs;` |
37
- | | | `padding: spaceXxs;` |
38
- | | | `padding: spaceXxxs;` |
39
-
40
- ### Inline Spacing Variables
41
-
42
- | **Visual** | | **Value** |
43
- | ---------- | --- | -------------------------- |
44
- | | | `margin-right: spaceXxl;` |
45
- | | | `margin-right: spaceXl;` |
46
- | | | `margin-right: spaceL;` |
47
- | | | `margin-right: spaceM;` |
48
- | | | `margin-right: spaceS;` |
49
- | | | `margin-right: spaceXs;` |
50
- | | | `margin-right: spaceXxs;` |
51
- | | | `margin-right: spaceXxxs;` |
52
-
53
- ### Stacked Spacing Variables
54
-
55
- | **Visual** | | **Value** |
56
- | ---------- | --- | --------------------------- |
57
- | | | `margin-bottom: spaceXxl;` |
58
- | | | `margin-bottom: spaceXl;` |
59
- | | | `margin-bottom: spaceL;` |
60
- | | | `margin-bottom: spaceM;` |
61
- | | | `margin-bottom: spaceS;` |
62
- | | | `margin-bottom: spaceXs;` |
63
- | | | `margin-bottom: spaceXxs;` |
64
- | | | `margin-bottom: spaceXxxs;` |
65
-
66
- ### Examples
67
-
68
- | **Example** | | **Spacing Type** | | **Usage** |
69
- | ----------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
70
- | | | Inset Spacing | | Spacing specifically for container padding on items like Dialogs, Callouts, Dropdown Menus, etc. |
71
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
72
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
73
-
74
- ---
75
-
76
- Spacing variables ensure spacing is consistent throughout the product while streamlining design and development time.
77
-
78
- ### Types of Spacing
79
-
80
- | **Visual** | | **Spacing Type** | | **Usage** |
81
- | ---------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
82
- | | | Inset Spacing | | Spacing specifically for container padding on items like Dialogs, Dropdown Menus, etc. |
83
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
84
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
85
-
86
- ### Spacing Sizes
87
-
88
- | **Visual** | | **Variable** | | **Value** |
89
- | ---------- | --- | -------------- | --- | --------- |
90
- | | | `spaceDefault` | | `10px` |
91
- | | | `spaceXxxs` | | `2px` |
92
- | | | `spaceXxs` | | `4px` |
93
- | | | `spaceXs` | | `6px` |
94
- | | | `spaceS` | | `8px` |
95
- | | | `spaceM` | | `10px` |
96
- | | | `spaceL` | | `14px` |
97
- | | | `spaceXl` | | `22px` |
98
- | | | `spaceXxl` | | `38px` |
99
- | | | `spaceXxxl` | | `50px` |
100
- | | | `spaceXxxxl` | | `75px` |
101
-
102
- ### Inset Spacing Variables
103
-
104
- | **Visual** | | **Value** |
105
- | ---------- | --- | --------------------- |
106
- | | | `padding: spaceXxl;` |
107
- | | | `padding: spaceXl;` |
108
- | | | `padding: spaceL;` |
109
- | | | `padding: spaceM;` |
110
- | | | `padding: spaceS;` |
111
- | | | `padding: spaceXs;` |
112
- | | | `padding: spaceXxs;` |
113
- | | | `padding: spaceXxxs;` |
114
-
115
- ### Inline Spacing Variables
116
-
117
- | **Visual** | | **Value** |
118
- | ---------- | --- | --------------------------- |
119
- | | | `margin-right: spaceXxxxl;` |
120
- | | | `margin-right: spaceXxxl;` |
121
- | | | `margin-right: spaceXxl;` |
122
- | | | `margin-right: spaceXl;` |
123
- | | | `margin-right: spaceL;` |
124
- | | | `margin-right: spaceM;` |
125
- | | | `margin-right: spaceS;` |
126
- | | | `margin-right: spaceXs;` |
127
- | | | `margin-right: spaceXxs;` |
128
- | | | `margin-right: spaceXxxs;` |
129
-
130
- ### Stacked Spacing Variables
131
-
132
- | **Visual** | | **Value** |
133
- | ---------- | --- | ---------------------------- |
134
- | | | `margin-bottom: spaceXxxxl;` |
135
- | | | `margin-bottom: spaceXxxl;` |
136
- | | | `margin-bottom: spaceXxl;` |
137
- | | | `margin-bottom: spaceXl;` |
138
- | | | `margin-bottom: spaceL;` |
139
- | | | `margin-bottom: spaceM;` |
140
- | | | `margin-bottom: spaceS;` |
141
- | | | `margin-bottom: spaceXs;` |
142
- | | | `margin-bottom: spaceXxs;` |
143
- | | | `margin-bottom: spaceXxxs;` |
144
-
145
- ### Examples
146
-
147
- | **Example** | | **Spacing Type** | | **Usage** |
148
- | ----------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
149
- | | | Inset Spacing | | Spacing specifically for container padding on items like Dialogs, Dropdown Menus, etc. |
150
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
151
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
152
-
153
- ---
154
-
155
- Spacing variables ensure spacing is consistent throughout the product while streamlining design and development time.
156
-
157
- ### Types of Spacing
158
-
159
- | **Visual** | | **Spacing Type** | | **Usage** |
160
- | ---------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
161
- | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
162
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
163
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
164
-
165
- ### Spacing Sizes
166
-
167
- | **Visual** | | **Variable** | | **Value** |
168
- | ---------- | --- | -------------- | --- | --------- |
169
- | | | `spaceDefault` | | `10px` |
170
- | | | `spaceXxxs` | | `2px` |
171
- | | | `spaceXxs` | | `4px` |
172
- | | | `spaceXs` | | `6px` |
173
- | | | `spaceS` | | `8px` |
174
- | | | `spaceM` | | `10px` |
175
- | | | `spaceL` | | `14px` |
176
- | | | `spaceXl` | | `22px` |
177
- | | | `spaceXxl` | | `38px` |
178
-
179
- ### Inset Spacing Variables
180
-
181
- | **Visual** | | **Value** |
182
- | ---------- | --- | --------------------- |
183
- | | | `padding: spaceXxl;` |
184
- | | | `padding: spaceXl;` |
185
- | | | `padding: spaceL;` |
186
- | | | `padding: spaceM;` |
187
- | | | `padding: spaceS;` |
188
- | | | `padding: spaceXs;` |
189
- | | | `padding: spaceXxs;` |
190
- | | | `padding: spaceXxxs;` |
191
-
192
- ### Inline Spacing Variables
193
-
194
- | **Visual** | | **Value** |
195
- | ---------- | --- | -------------------------- |
196
- | | | `margin-right: spaceXxl;` |
197
- | | | `margin-right: spaceXl;` |
198
- | | | `margin-right: spaceL;` |
199
- | | | `margin-right: spaceM;` |
200
- | | | `margin-right: spaceS;` |
201
- | | | `margin-right: spaceXs;` |
202
- | | | `margin-right: spaceXxs;` |
203
- | | | `margin-right: spaceXxxs;` |
204
-
205
- ### Stacked Spacing Variables
206
-
207
- | **Visual** | | **Value** |
208
- | ---------- | --- | --------------------------- |
209
- | | | `margin-bottom: spaceXxl;` |
210
- | | | `margin-bottom: spaceXl;` |
211
- | | | `margin-bottom: spaceL;` |
212
- | | | `margin-bottom: spaceM;` |
213
- | | | `margin-bottom: spaceS;` |
214
- | | | `margin-bottom: spaceXs;` |
215
- | | | `margin-bottom: spaceXxs;` |
216
- | | | `margin-bottom: spaceXxxs;` |
217
-
218
- ### Examples
219
-
220
- | **Example** | | **Spacing Type** | | **Usage** |
221
- | ----------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
222
- | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
223
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
224
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
225
-
226
- ---
227
-
228
- Spacing variables ensure spacing is consistent throughout the product while streamlining design and development time.
229
-
230
- ### Types of Spacing
231
-
232
- | **Visual** | | **Spacing Type** | | **Usage** |
233
- | ---------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
234
- | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
235
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
236
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
237
-
238
- ### Spacing Sizes
239
-
240
- | **Visual** | | **Variable** | | **Value** |
241
- | ---------- | --- | -------------- | --- | --------- |
242
- | | | `spaceDefault` | | `10px` |
243
- | | | `spaceXxxs` | | `2px` |
244
- | | | `spaceXxs` | | `4px` |
245
- | | | `spaceXs` | | `6px` |
246
- | | | `spaceS` | | `8px` |
247
- | | | `spaceM` | | `10px` |
248
- | | | `spaceL` | | `14px` |
249
- | | | `spaceXl` | | `22px` |
250
- | | | `spaceXxl` | | `38px` |
251
-
252
- ### Inset Spacing Variables
253
-
254
- | **Visual** | | **Value** |
255
- | ---------- | --- | --------------------- |
256
- | | | `padding: spaceXxl;` |
257
- | | | `padding: spaceXl;` |
258
- | | | `padding: spaceL;` |
259
- | | | `padding: spaceM;` |
260
- | | | `padding: spaceS;` |
261
- | | | `padding: spaceXs;` |
262
- | | | `padding: spaceXxs;` |
263
- | | | `padding: spaceXxxs;` |
264
-
265
- ### Inline Spacing Variables
266
-
267
- | **Visual** | | **Value** |
268
- | ---------- | --- | -------------------------- |
269
- | | | `margin-right: spaceXxl;` |
270
- | | | `margin-right: spaceXl;` |
271
- | | | `margin-right: spaceL;` |
272
- | | | `margin-right: spaceM;` |
273
- | | | `margin-right: spaceS;` |
274
- | | | `margin-right: spaceXs;` |
275
- | | | `margin-right: spaceXxs;` |
276
- | | | `margin-right: spaceXxxs;` |
277
-
278
- ### Stacked Spacing Variables
279
-
280
- | **Visual** | | **Value** |
281
- | ---------- | --- | --------------------------- |
282
- | | | `margin-bottom: spaceXxl;` |
283
- | | | `margin-bottom: spaceXl;` |
284
- | | | `margin-bottom: spaceL;` |
285
- | | | `margin-bottom: spaceM;` |
286
- | | | `margin-bottom: spaceS;` |
287
- | | | `margin-bottom: spaceXs;` |
288
- | | | `margin-bottom: spaceXxs;` |
289
- | | | `margin-bottom: spaceXxxs;` |
290
-
291
- ### Examples
292
-
293
- | **Example** | | **Spacing Type** | | **Usage** |
294
- | ----------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
295
- | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
296
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
297
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |