@navikt/ds-react 6.5.0 → 6.6.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.
Files changed (200) hide show
  1. package/cjs/collapsible/Collapsible.context.d.ts +48 -0
  2. package/cjs/collapsible/Collapsible.context.js +10 -0
  3. package/cjs/collapsible/Collapsible.context.js.map +1 -0
  4. package/cjs/collapsible/Collapsible.d.ts +48 -0
  5. package/cjs/collapsible/Collapsible.js +91 -0
  6. package/cjs/collapsible/Collapsible.js.map +1 -0
  7. package/cjs/collapsible/Collapsible.types.d.ts +19 -0
  8. package/cjs/collapsible/Collapsible.types.js +3 -0
  9. package/cjs/collapsible/Collapsible.types.js.map +1 -0
  10. package/cjs/collapsible/index.d.ts +3 -0
  11. package/cjs/collapsible/index.js +14 -0
  12. package/cjs/collapsible/index.js.map +1 -0
  13. package/cjs/collapsible/parts/Collapsible.Content.d.ts +10 -0
  14. package/cjs/collapsible/parts/Collapsible.Content.js +48 -0
  15. package/cjs/collapsible/parts/Collapsible.Content.js.map +1 -0
  16. package/cjs/collapsible/parts/Collapsible.Trigger.d.ts +10 -0
  17. package/cjs/collapsible/parts/Collapsible.Trigger.js +49 -0
  18. package/cjs/collapsible/parts/Collapsible.Trigger.js.map +1 -0
  19. package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js +2 -4
  20. package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
  21. package/cjs/form/combobox/Input/Input.js +6 -1
  22. package/cjs/form/combobox/Input/Input.js.map +1 -1
  23. package/cjs/form/form-summary/FormSummary.d.ts +82 -0
  24. package/cjs/form/form-summary/FormSummary.js +81 -0
  25. package/cjs/form/form-summary/FormSummary.js.map +1 -0
  26. package/cjs/form/form-summary/FormSummaryAnswer.d.ts +11 -0
  27. package/cjs/form/form-summary/FormSummaryAnswer.js +25 -0
  28. package/cjs/form/form-summary/FormSummaryAnswer.js.map +1 -0
  29. package/cjs/form/form-summary/FormSummaryAnswers.d.ts +9 -0
  30. package/cjs/form/form-summary/FormSummaryAnswers.js +48 -0
  31. package/cjs/form/form-summary/FormSummaryAnswers.js.map +1 -0
  32. package/cjs/form/form-summary/FormSummaryEditLink.d.ts +17 -0
  33. package/cjs/form/form-summary/FormSummaryEditLink.js +49 -0
  34. package/cjs/form/form-summary/FormSummaryEditLink.js.map +1 -0
  35. package/cjs/form/form-summary/FormSummaryHeader.d.ts +9 -0
  36. package/cjs/form/form-summary/FormSummaryHeader.js +48 -0
  37. package/cjs/form/form-summary/FormSummaryHeader.js.map +1 -0
  38. package/cjs/form/form-summary/FormSummaryHeading.d.ts +14 -0
  39. package/cjs/form/form-summary/FormSummaryHeading.js +31 -0
  40. package/cjs/form/form-summary/FormSummaryHeading.js.map +1 -0
  41. package/cjs/form/form-summary/FormSummaryLabel.d.ts +6 -0
  42. package/cjs/form/form-summary/FormSummaryLabel.js +45 -0
  43. package/cjs/form/form-summary/FormSummaryLabel.js.map +1 -0
  44. package/cjs/form/form-summary/FormSummaryValue.d.ts +6 -0
  45. package/cjs/form/form-summary/FormSummaryValue.js +49 -0
  46. package/cjs/form/form-summary/FormSummaryValue.js.map +1 -0
  47. package/cjs/form/form-summary/index.d.ts +8 -0
  48. package/cjs/form/form-summary/index.js +24 -0
  49. package/cjs/form/form-summary/index.js.map +1 -0
  50. package/cjs/index.d.ts +3 -2
  51. package/cjs/index.js +5 -3
  52. package/cjs/index.js.map +1 -1
  53. package/cjs/layout/stack/Spacer.js +1 -1
  54. package/cjs/layout/stack/Spacer.js.map +1 -1
  55. package/cjs/util/hooks/descendants/descendant.js +10 -1
  56. package/cjs/util/hooks/descendants/descendant.js.map +1 -1
  57. package/cjs/util/hooks/descendants/useDescendant.js +0 -5
  58. package/cjs/util/hooks/descendants/useDescendant.js.map +1 -1
  59. package/esm/collapsible/Collapsible.context.d.ts +48 -0
  60. package/esm/collapsible/Collapsible.context.js +6 -0
  61. package/esm/collapsible/Collapsible.context.js.map +1 -0
  62. package/esm/collapsible/Collapsible.d.ts +48 -0
  63. package/esm/collapsible/Collapsible.js +62 -0
  64. package/esm/collapsible/Collapsible.js.map +1 -0
  65. package/esm/collapsible/Collapsible.types.d.ts +19 -0
  66. package/esm/collapsible/Collapsible.types.js +2 -0
  67. package/esm/collapsible/Collapsible.types.js.map +1 -0
  68. package/esm/collapsible/index.d.ts +3 -0
  69. package/esm/collapsible/index.js +5 -0
  70. package/esm/collapsible/index.js.map +1 -0
  71. package/esm/collapsible/parts/Collapsible.Content.d.ts +10 -0
  72. package/esm/collapsible/parts/Collapsible.Content.js +22 -0
  73. package/esm/collapsible/parts/Collapsible.Content.js.map +1 -0
  74. package/esm/collapsible/parts/Collapsible.Trigger.d.ts +10 -0
  75. package/esm/collapsible/parts/Collapsible.Trigger.js +23 -0
  76. package/esm/collapsible/parts/Collapsible.Trigger.js.map +1 -0
  77. package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js +2 -4
  78. package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
  79. package/esm/form/combobox/Input/Input.js +6 -1
  80. package/esm/form/combobox/Input/Input.js.map +1 -1
  81. package/esm/form/form-summary/FormSummary.d.ts +82 -0
  82. package/esm/form/form-summary/FormSummary.js +52 -0
  83. package/esm/form/form-summary/FormSummary.js.map +1 -0
  84. package/esm/form/form-summary/FormSummaryAnswer.d.ts +11 -0
  85. package/esm/form/form-summary/FormSummaryAnswer.js +19 -0
  86. package/esm/form/form-summary/FormSummaryAnswer.js.map +1 -0
  87. package/esm/form/form-summary/FormSummaryAnswers.d.ts +9 -0
  88. package/esm/form/form-summary/FormSummaryAnswers.js +19 -0
  89. package/esm/form/form-summary/FormSummaryAnswers.js.map +1 -0
  90. package/esm/form/form-summary/FormSummaryEditLink.d.ts +17 -0
  91. package/esm/form/form-summary/FormSummaryEditLink.js +20 -0
  92. package/esm/form/form-summary/FormSummaryEditLink.js.map +1 -0
  93. package/esm/form/form-summary/FormSummaryHeader.d.ts +9 -0
  94. package/esm/form/form-summary/FormSummaryHeader.js +19 -0
  95. package/esm/form/form-summary/FormSummaryHeader.js.map +1 -0
  96. package/esm/form/form-summary/FormSummaryHeading.d.ts +14 -0
  97. package/esm/form/form-summary/FormSummaryHeading.js +5 -0
  98. package/esm/form/form-summary/FormSummaryHeading.js.map +1 -0
  99. package/esm/form/form-summary/FormSummaryLabel.d.ts +6 -0
  100. package/esm/form/form-summary/FormSummaryLabel.js +19 -0
  101. package/esm/form/form-summary/FormSummaryLabel.js.map +1 -0
  102. package/esm/form/form-summary/FormSummaryValue.d.ts +6 -0
  103. package/esm/form/form-summary/FormSummaryValue.js +20 -0
  104. package/esm/form/form-summary/FormSummaryValue.js.map +1 -0
  105. package/esm/form/form-summary/index.d.ts +8 -0
  106. package/esm/form/form-summary/index.js +10 -0
  107. package/esm/form/form-summary/index.js.map +1 -0
  108. package/esm/index.d.ts +3 -2
  109. package/esm/index.js +2 -1
  110. package/esm/index.js.map +1 -1
  111. package/esm/layout/stack/Spacer.js +1 -1
  112. package/esm/layout/stack/Spacer.js.map +1 -1
  113. package/esm/util/hooks/descendants/descendant.js +10 -1
  114. package/esm/util/hooks/descendants/descendant.js.map +1 -1
  115. package/esm/util/hooks/descendants/useDescendant.js +0 -5
  116. package/esm/util/hooks/descendants/useDescendant.js.map +1 -1
  117. package/package.json +15 -4
  118. package/src/collapsible/Collapsible.context.tsx +32 -0
  119. package/src/collapsible/Collapsible.tsx +100 -0
  120. package/src/collapsible/Collapsible.types.ts +19 -0
  121. package/src/collapsible/index.ts +10 -0
  122. package/src/collapsible/parts/Collapsible.Content.tsx +39 -0
  123. package/src/collapsible/parts/Collapsible.Trigger.tsx +42 -0
  124. package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +9 -1
  125. package/src/form/combobox/Input/Input.tsx +5 -0
  126. package/src/form/form-summary/FormSummary.tsx +106 -0
  127. package/src/form/form-summary/FormSummaryAnswer.tsx +27 -0
  128. package/src/form/form-summary/FormSummaryAnswers.tsx +25 -0
  129. package/src/form/form-summary/FormSummaryEditLink.tsx +35 -0
  130. package/src/form/form-summary/FormSummaryHeader.tsx +25 -0
  131. package/src/form/form-summary/FormSummaryHeading.tsx +23 -0
  132. package/src/form/form-summary/FormSummaryLabel.tsx +17 -0
  133. package/src/form/form-summary/FormSummaryValue.tsx +24 -0
  134. package/src/form/form-summary/index.ts +30 -0
  135. package/src/index.ts +16 -15
  136. package/src/layout/stack/Spacer.tsx +1 -1
  137. package/src/util/hooks/descendants/descendant.ts +15 -1
  138. package/src/util/hooks/descendants/useDescendant.tsx +0 -5
  139. package/src/accordion/accordion.stories.tsx +0 -286
  140. package/src/alert/alert.stories.tsx +0 -306
  141. package/src/button/button.stories.tsx +0 -185
  142. package/src/chat/chat.stories.tsx +0 -341
  143. package/src/chips/chips.stories.tsx +0 -260
  144. package/src/copybutton/copy-button.stories.tsx +0 -261
  145. package/src/date/datepicker/datepicker.stories.tsx +0 -614
  146. package/src/date/monthpicker/monthpicker.stories.tsx +0 -221
  147. package/src/dropdown/dropdown.stories.tsx +0 -124
  148. package/src/expansion-card/expansion-card.stories.tsx +0 -282
  149. package/src/form/checkbox/checkbox.stories.tsx +0 -281
  150. package/src/form/combobox/combobox.stories.tsx +0 -626
  151. package/src/form/confirmation-panel/confirmation-panel.stories.tsx +0 -128
  152. package/src/form/error-summary/error-summary.stories.tsx +0 -81
  153. package/src/form/fieldset/fieldset.stories.tsx +0 -157
  154. package/src/form/file-upload/file-upload-dropzone.stories.tsx +0 -123
  155. package/src/form/file-upload/file-upload-item.stories.tsx +0 -148
  156. package/src/form/file-upload/file-upload.stories.tsx +0 -248
  157. package/src/form/radio/radio.stories.tsx +0 -230
  158. package/src/form/search/search.stories.tsx +0 -238
  159. package/src/form/select/select.stories.tsx +0 -172
  160. package/src/form/switch/switch.stories.tsx +0 -171
  161. package/src/form/textarea/textarea.stories.tsx +0 -254
  162. package/src/form/textfield/text-field.stories.tsx +0 -143
  163. package/src/guide-panel/guidepanel.stories.tsx +0 -90
  164. package/src/help-text/help-text.stories.tsx +0 -91
  165. package/src/internal-header/header.stories.tsx +0 -229
  166. package/src/layout/bleed/Bleed.stories.tsx +0 -395
  167. package/src/layout/box/Box.stories.tsx +0 -380
  168. package/src/layout/grid/h-grid.stories.tsx +0 -122
  169. package/src/layout/page/Page.stories.tsx +0 -271
  170. package/src/layout/responsive/hide.stories.tsx +0 -80
  171. package/src/layout/responsive/show.stories.tsx +0 -80
  172. package/src/layout/sidemal-test/navno-sidemal.stories.tsx +0 -69
  173. package/src/layout/stack/stack.stories.tsx +0 -183
  174. package/src/link/stories/link.stories.tsx +0 -304
  175. package/src/link-panel/link-panel.stories.tsx +0 -59
  176. package/src/list/list.stories.tsx +0 -280
  177. package/src/loader/loader.stories.tsx +0 -82
  178. package/src/modal/modal.stories.tsx +0 -391
  179. package/src/pagination/pagination.stories.tsx +0 -110
  180. package/src/popover/popover.stories.tsx +0 -113
  181. package/src/portal/Portal.stories.tsx +0 -102
  182. package/src/read-more/readmore.stories.tsx +0 -91
  183. package/src/skeleton/skeleton.stories.tsx +0 -130
  184. package/src/stepper/stepper.stories.tsx +0 -200
  185. package/src/table/stories/table-1.stories.tsx +0 -292
  186. package/src/table/stories/table-2-expandable.stories.tsx +0 -298
  187. package/src/table/stories/table-3-async.stories.tsx +0 -179
  188. package/src/table/stories/tests/table.stories.tsx +0 -102
  189. package/src/tabs/Tabs.stories.tsx +0 -311
  190. package/src/tag/tag.stories.tsx +0 -126
  191. package/src/timeline/timeline.stories.tsx +0 -445
  192. package/src/toggle-group/ToggleGroup.stories.tsx +0 -198
  193. package/src/tooltip/tooltip.stories.tsx +0 -101
  194. package/src/typography/stories/bodylong.stories.tsx +0 -209
  195. package/src/typography/stories/bodyshort.stories.tsx +0 -208
  196. package/src/typography/stories/detail.stories.tsx +0 -115
  197. package/src/typography/stories/error-message.stories.tsx +0 -122
  198. package/src/typography/stories/heading.stories.tsx +0 -169
  199. package/src/typography/stories/label.stories.tsx +0 -131
  200. package/src/util/hooks/descendants/descendant.stories.tsx +0 -147
package/src/layout/bleed/Bleed.stories.tsx DELETED
@@ -1,395 +0,0 @@
1
- import type { Meta } from "@storybook/react";
2
- import React from "react";
3
- import { BodyLong } from "../../typography";
4
- import { Box } from "../box";
5
- import { HStack, VStack } from "../stack";
6
- import { Bleed } from "./Bleed";
7
-
8
- export default {
9
- title: "ds-react/Primitives/Bleed",
10
- component: Bleed,
11
- } satisfies Meta<typeof Bleed>;
12
-
13
- export const Default = {
14
- render: () => (
15
- <>
16
- <VStack gap="2">
17
- <Box background="surface-alt-1-subtle" padding="5">
18
- <Box background="surface-alt-2-subtle" padding="5">
19
- <Bleed marginInline="10 0">
20
- <Box
21
- padding="3"
22
- className="p"
23
- background="surface-success-subtle"
24
- >
25
- <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
26
- </Box>
27
- </Bleed>
28
- </Box>
29
- </Box>
30
- <Box background="surface-alt-1-subtle" padding="5">
31
- <Box background="surface-alt-2-subtle" padding="5">
32
- <Bleed marginInline="0 10">
33
- <Box
34
- padding="3"
35
- className="p"
36
- background="surface-success-subtle"
37
- >
38
- <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
39
- </Box>
40
- </Bleed>
41
- </Box>
42
- </Box>
43
- <Box background="surface-alt-1-subtle" padding="5">
44
- <Box background="surface-alt-2-subtle" padding="5">
45
- <Bleed marginBlock="10 0">
46
- <Box
47
- padding="3"
48
- className="p"
49
- background="surface-success-subtle"
50
- >
51
- <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
52
- </Box>
53
- </Bleed>
54
- </Box>
55
- </Box>
56
- <Box background="surface-alt-1-subtle" padding="5">
57
- <Box background="surface-alt-2-subtle" padding="5">
58
- <Bleed marginBlock="0 10">
59
- <Box
60
- padding="3"
61
- className="p"
62
- background="surface-success-subtle"
63
- >
64
- <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
65
- </Box>
66
- </Bleed>
67
- </Box>
68
- </Box>
69
- </VStack>
70
- </>
71
- ),
72
- };
73
-
74
- export const AsChild = {
75
- render: () => (
76
- <>
77
- <VStack gap="2">
78
- <Box background="surface-alt-1-subtle" padding="5">
79
- <Box background="surface-alt-2-subtle" padding="5">
80
- <Bleed marginInline="10 0" asChild>
81
- <Box padding="3" background="surface-success-subtle">
82
- <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
83
- </Box>
84
- </Bleed>
85
- </Box>
86
- </Box>
87
- <Box background="surface-alt-1-subtle" padding="5">
88
- <Box background="surface-alt-2-subtle" padding="5">
89
- <Bleed marginInline="0 10" asChild>
90
- <Box padding="3" background="surface-success-subtle">
91
- <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
92
- </Box>
93
- </Bleed>
94
- </Box>
95
- </Box>
96
- <Box background="surface-alt-1-subtle" padding="5">
97
- <Box background="surface-alt-2-subtle" padding="5">
98
- <Bleed marginBlock="10 0" asChild>
99
- <Box padding="3" background="surface-success-subtle">
100
- <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
101
- </Box>
102
- </Bleed>
103
- </Box>
104
- </Box>
105
- <Box background="surface-alt-1-subtle" padding="5">
106
- <Box background="surface-alt-2-subtle" padding="5">
107
- <Bleed marginBlock="0 10" asChild>
108
- <Box padding="3" background="surface-success-subtle">
109
- <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
110
- </Box>
111
- </Bleed>
112
- </Box>
113
- </Box>
114
- </VStack>
115
- </>
116
- ),
117
- };
118
-
119
- export const Breakpoints = {
120
- render: () => (
121
- <>
122
- <VStack gap="2">
123
- <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
124
- <Box
125
- background="surface-alt-2-subtle"
126
- padding={{ xs: "5", md: "10" }}
127
- >
128
- <Bleed marginInline={{ xs: "10 0", md: "20 0" }}>
129
- <Box padding="3" background="surface-success-subtle">
130
- <BodyLong>
131
- {'marginInline={{ xs: "10 0", md: "20 0" }}'}
132
- </BodyLong>
133
- </Box>
134
- </Bleed>
135
- </Box>
136
- </Box>
137
- <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
138
- <Box
139
- background="surface-alt-2-subtle"
140
- padding={{ xs: "5", md: "10" }}
141
- >
142
- <Bleed marginInline={{ xs: "0 10", md: "0 20" }}>
143
- <Box padding="3" background="surface-success-subtle">
144
- <BodyLong>
145
- {'marginInline={{ xs: "0 10", md: "0 20" }}'}
146
- </BodyLong>
147
- </Box>
148
- </Bleed>
149
- </Box>
150
- </Box>
151
- <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
152
- <Box
153
- background="surface-alt-2-subtle"
154
- padding={{ xs: "5", md: "10" }}
155
- >
156
- <Bleed marginBlock={{ xs: "10 0", md: "20 0" }}>
157
- <Box padding="3" background="surface-success-subtle">
158
- <BodyLong>
159
- {'marginBlock={{ xs: "10 0", md: "20 0" }}'}
160
- </BodyLong>
161
- </Box>
162
- </Bleed>
163
- </Box>
164
- </Box>
165
- <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
166
- <Box
167
- background="surface-alt-2-subtle"
168
- padding={{ xs: "5", md: "10" }}
169
- >
170
- <Bleed marginBlock={{ xs: "0 10", md: "0 20" }}>
171
- <Box padding="3" background="surface-success-subtle">
172
- <BodyLong>
173
- {'marginBlock={{ xs: "0 10", md: "0 20" }}'}
174
- </BodyLong>
175
- </Box>
176
- </Bleed>
177
- </Box>
178
- </Box>
179
- </VStack>
180
- </>
181
- ),
182
- };
183
-
184
- export const Px = {
185
- render: () => (
186
- <>
187
- <style>
188
- {`
189
- .circle {
190
- width: 24px;
191
- height: 24px;
192
- display: flex;
193
- align-items: center;
194
- justify-content: center;
195
- }
196
- .scale {
197
- transform: scale(5);
198
- }
199
- `}
200
- </style>
201
- <Box padding="32">
202
- <HStack className="" gap="32">
203
- <Box
204
- className="circle scale"
205
- background="surface-success-subtle"
206
- borderRadius="full"
207
- >
208
- L
209
- </Box>
210
- <Box
211
- className="circle scale"
212
- background="surface-success-subtle"
213
- borderRadius="full"
214
- >
215
- <Bleed marginInline="0 px">L</Bleed>
216
- </Box>
217
- </HStack>
218
- </Box>
219
- </>
220
- ),
221
- };
222
-
223
- export const Full = {
224
- parameters: {
225
- layout: "fullscreen",
226
- },
227
- render: () => (
228
- <>
229
- <style>
230
- {`
231
- .maxWidth {
232
- max-width: 300px;
233
- }
234
- `}
235
- </style>
236
- <VStack gap="2" align="center">
237
- <Box
238
- className="maxWidth"
239
- background="surface-alt-1-subtle"
240
- padding="10"
241
- >
242
- <Box background="surface-alt-2-subtle" padding="10">
243
- <Bleed marginInline="full">
244
- <Box background="surface-success-subtle">
245
- <BodyLong>marginInline=&quot;full&quot;</BodyLong>
246
- </Box>
247
- </Bleed>
248
- </Box>
249
- </Box>
250
- <Box
251
- className="maxWidth"
252
- background="surface-alt-1-subtle"
253
- padding="10"
254
- >
255
- <Box background="surface-alt-2-subtle" padding="10">
256
- <Bleed marginInline="full 0">
257
- <Box background="surface-success-subtle">
258
- <BodyLong>marginInline=&quot;full 0&quot;</BodyLong>
259
- </Box>
260
- </Bleed>
261
- </Box>
262
- </Box>
263
- <Box
264
- className="maxWidth"
265
- background="surface-alt-1-subtle"
266
- padding="10"
267
- >
268
- <Box background="surface-alt-2-subtle" padding="10">
269
- <Bleed marginInline="0 full">
270
- <Box background="surface-success-subtle">
271
- <BodyLong>marginInline=&quot;0 full&quot;</BodyLong>
272
- </Box>
273
- </Bleed>
274
- </Box>
275
- </Box>
276
- <Box
277
- className="maxWidth"
278
- background="surface-alt-1-subtle"
279
- padding="10"
280
- >
281
- <Box background="surface-alt-2-subtle" padding="10">
282
- <Bleed marginInline="full" reflectivePadding asChild>
283
- <Box background="surface-success-subtle">
284
- <BodyLong>full + reflectivePadding</BodyLong>
285
- </Box>
286
- </Bleed>
287
- </Box>
288
- </Box>
289
- </VStack>
290
- </>
291
- ),
292
- };
293
-
294
- export const ReflectivePadding = {
295
- render: () => (
296
- <>
297
- <style>
298
- {`
299
- .navds-bleed {
300
- background-color: var(--a-surface-success-subtle);
301
- width: fit-content;
302
- }
303
- `}
304
- </style>
305
- <HStack gap="3">
306
- <VStack gap="2">
307
- <p>CSS string</p>
308
- <Box background="surface-alt-1-subtle" padding="5">
309
- <Box background="surface-alt-2-subtle" padding="5">
310
- <Bleed asChild>
311
- <BodyLong>before Bleed</BodyLong>
312
- </Bleed>
313
- </Box>
314
- </Box>
315
- <Box background="surface-alt-1-subtle" padding="5">
316
- <Box background="surface-alt-2-subtle" padding="5">
317
- <Bleed marginInline="10 0" asChild>
318
- <BodyLong>without reflectivePadding</BodyLong>
319
- </Bleed>
320
- </Box>
321
- </Box>
322
- <Box background="surface-alt-1-subtle" padding="5">
323
- <Box background="surface-alt-2-subtle" padding="5">
324
- <Bleed marginInline="10 0" reflectivePadding asChild>
325
- <BodyLong>with reflectivePadding</BodyLong>
326
- </Bleed>
327
- </Box>
328
- </Box>
329
- </VStack>
330
-
331
- <VStack gap="2">
332
- <p>breakpoints</p>
333
- <Box
334
- background="surface-alt-1-subtle"
335
- padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
336
- >
337
- <Box
338
- background="surface-alt-2-subtle"
339
- padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
340
- >
341
- <Bleed asChild>
342
- <BodyLong>before Bleed</BodyLong>
343
- </Bleed>
344
- </Box>
345
- </Box>
346
- <Box
347
- background="surface-alt-1-subtle"
348
- padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
349
- >
350
- <Box
351
- background="surface-alt-2-subtle"
352
- padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
353
- >
354
- <Bleed
355
- marginInline={{
356
- xs: "4 0",
357
- sm: "8 0",
358
- md: "12 0",
359
- lg: "16 0",
360
- xl: "20 0",
361
- }}
362
- asChild
363
- >
364
- <BodyLong>without reflectivePadding</BodyLong>
365
- </Bleed>
366
- </Box>
367
- </Box>
368
- <Box
369
- background="surface-alt-1-subtle"
370
- padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
371
- >
372
- <Box
373
- background="surface-alt-2-subtle"
374
- padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
375
- >
376
- <Bleed
377
- marginInline={{
378
- xs: "4 0",
379
- sm: "8 0",
380
- md: "12 0",
381
- lg: "16 0",
382
- xl: "20 0",
383
- }}
384
- reflectivePadding
385
- asChild
386
- >
387
- <BodyLong>with reflectivePadding</BodyLong>
388
- </Bleed>
389
- </Box>
390
- </Box>
391
- </VStack>
392
- </HStack>
393
- </>
394
- ),
395
- };