@iress-oss/ids-mcp-server 6.0.0-alpha.2 → 6.0.0-alpha.3

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 (80) hide show
  1. package/generated/docs/components_components-alert-docs.md +7 -7
  2. package/generated/docs/components_components-autocomplete-docs.md +18 -18
  3. package/generated/docs/components_components-autocomplete-recipes-docs.md +9 -2
  4. package/generated/docs/components_components-badge-docs.md +4 -4
  5. package/generated/docs/components_components-button-docs.md +16 -14
  6. package/generated/docs/components_components-buttongroup-docs.md +9 -9
  7. package/generated/docs/components_components-card-docs.md +32 -17
  8. package/generated/docs/components_components-checkbox-docs.md +7 -7
  9. package/generated/docs/components_components-checkboxgroup-docs.md +10 -10
  10. package/generated/docs/components_components-checkboxgroup-recipes-docs.md +2 -2
  11. package/generated/docs/components_components-col-docs.md +38 -38
  12. package/generated/docs/components_components-container-docs.md +5 -5
  13. package/generated/docs/components_components-divider-docs.md +5 -5
  14. package/generated/docs/components_components-expander-docs.md +6 -4
  15. package/generated/docs/components_components-field-docs.md +28 -28
  16. package/generated/docs/components_components-filter-docs.md +19 -19
  17. package/generated/docs/components_components-hide-docs.md +9 -9
  18. package/generated/docs/components_components-icon-docs.md +9 -9
  19. package/generated/docs/components_components-image-docs.md +2 -2
  20. package/generated/docs/components_components-inline-docs.md +76 -388
  21. package/generated/docs/components_components-input-docs.md +9 -9
  22. package/generated/docs/components_components-input-recipes-docs.md +4 -4
  23. package/generated/docs/components_components-inputcurrency-docs.md +7 -7
  24. package/generated/docs/components_components-inputcurrency-recipes-docs.md +5 -2
  25. package/generated/docs/components_components-label-docs.md +4 -4
  26. package/generated/docs/components_components-link-docs.md +6 -4
  27. package/generated/docs/components_components-menu-docs.md +13 -13
  28. package/generated/docs/components_components-menu-menuitem-docs.md +12 -12
  29. package/generated/docs/components_components-modal-docs.md +32 -13
  30. package/generated/docs/components_components-panel-docs.md +6 -6
  31. package/generated/docs/components_components-placeholder-docs.md +1 -1
  32. package/generated/docs/components_components-popover-docs.md +11 -9
  33. package/generated/docs/components_components-popover-recipes-docs.md +4 -2
  34. package/generated/docs/components_components-progress-docs.md +1 -1
  35. package/generated/docs/components_components-provider-docs.md +2 -2
  36. package/generated/docs/components_components-radio-docs.md +5 -5
  37. package/generated/docs/components_components-radiogroup-docs.md +8 -8
  38. package/generated/docs/components_components-readonly-docs.md +3 -3
  39. package/generated/docs/components_components-richselect-docs.md +69 -28
  40. package/generated/docs/components_components-row-docs.md +60 -492
  41. package/generated/docs/components_components-select-docs.md +8 -8
  42. package/generated/docs/components_components-skeleton-docs.md +9 -9
  43. package/generated/docs/components_components-skeleton-recipes-docs.md +2 -2
  44. package/generated/docs/components_components-skiplink-docs.md +1 -1
  45. package/generated/docs/components_components-slideout-docs.md +34 -13
  46. package/generated/docs/components_components-slider-docs.md +8 -8
  47. package/generated/docs/components_components-spinner-docs.md +3 -3
  48. package/generated/docs/components_components-stack-docs.md +63 -175
  49. package/generated/docs/components_components-table-docs.md +31 -24
  50. package/generated/docs/components_components-tabset-docs.md +10 -10
  51. package/generated/docs/components_components-tabset-tab-docs.md +4 -4
  52. package/generated/docs/components_components-tag-docs.md +14 -5
  53. package/generated/docs/components_components-text-docs.md +21 -9
  54. package/generated/docs/components_components-toaster-docs.md +12 -12
  55. package/generated/docs/components_components-toggle-docs.md +6 -6
  56. package/generated/docs/components_components-tooltip-docs.md +4 -4
  57. package/generated/docs/components_components-validationmessage-docs.md +5 -5
  58. package/generated/docs/components_foundations-responsive-layout-docs.md +16 -15
  59. package/generated/docs/components_foundations-z-index-stacking-docs.md +1 -1
  60. package/generated/docs/components_introduction-docs.md +1 -1
  61. package/generated/docs/components_patterns-form-docs.md +96 -57
  62. package/generated/docs/components_patterns-form-recipes-docs.md +144 -19
  63. package/generated/docs/components_patterns-loading-docs.md +98 -17
  64. package/generated/docs/components_patterns-shadow-docs.md +2 -2
  65. package/generated/docs/components_sandbox-docs.md +226 -0
  66. package/generated/docs/components_styling-props-colour-docs.md +2 -2
  67. package/generated/docs/components_styling-props-elevation-docs.md +2 -2
  68. package/generated/docs/components_styling-props-radius-docs.md +3 -3
  69. package/generated/docs/components_styling-props-reference-docs.md +3 -3
  70. package/generated/docs/components_styling-props-screen-readers-docs.md +2 -2
  71. package/generated/docs/components_styling-props-sizing-docs.md +3 -3
  72. package/generated/docs/components_styling-props-spacing-docs.md +19 -19
  73. package/generated/docs/components_styling-props-typography-docs.md +2 -2
  74. package/generated/docs/guidelines.md +17 -16
  75. package/generated/docs/tokens_colour-docs.md +72 -0
  76. package/generated/docs/tokens_introduction-docs.md +15 -18
  77. package/generated/docs/tokens_sandbox-docs.md +1 -0
  78. package/generated/docs/tokens_spacing-docs.md +10 -40
  79. package/generated/docs/tokens_typography-docs.md +43 -1
  80. package/package.json +3 -2
@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
18
18
 
19
19
  This is a simple info alert
20
20
 
21
- ```
21
+ Hide codedrawOpen in CodeSandbox
22
22
 
23
23
  <IressAlert
24
24
  footer\=""
@@ -165,7 +165,7 @@ This is a simple success alert. It is used to communicate that an action has bee
165
165
 
166
166
  This is a simple warning alert. It is used for a message requiring attention but not resolution in order to continue, such as noting data is not current or your password is about to expire.
167
167
 
168
- ```
168
+ Hide codedrawOpen in CodeSandbox
169
169
 
170
170
  <IressStack gap\="md"\>
171
171
  <IressAlert
@@ -319,7 +319,7 @@ Alert heading
319
319
 
320
320
  This is a simple info alert
321
321
 
322
- ```
322
+ Hide codedrawOpen in CodeSandbox
323
323
 
324
324
  <IressAlert
325
325
  footer\=""
@@ -461,7 +461,7 @@ Here is the warning
461
461
 
462
462
  Action
463
463
 
464
- ```
464
+ Hide codedrawOpen in CodeSandbox
465
465
 
466
466
  <IressAlert
467
467
  actions\={\[
@@ -641,7 +641,7 @@ Some information
641
641
 
642
642
  This is an alert without an icon
643
643
 
644
- ```
644
+ Hide codedrawOpen in CodeSandbox
645
645
 
646
646
  <IressAlert
647
647
  heading\="Some information"
@@ -783,7 +783,7 @@ Did you know?
783
783
 
784
784
  You can use the alert component in different ways.
785
785
 
786
- ```
786
+ Hide codedrawOpen in CodeSandbox
787
787
 
788
788
  <IressStack gap\="md"\>
789
789
  <IressAlert
@@ -921,7 +921,7 @@ The alert can be made dismissable by setting the `onDismiss` prop. This will dis
921
921
 
922
922
  This is a simple info alert
923
923
 
924
- ```
924
+ Hide codedrawOpen in CodeSandbox
925
925
 
926
926
  <IressAlert
927
927
  footer\=""
@@ -8,7 +8,7 @@ Autocomplete allow for users to fill in their input by providing suggestions as
8
8
 
9
9
  [](./iframe.html?id=components-autocomplete--default)
10
10
 
11
- ```
11
+ Hide codedrawOpen in CodeSandbox
12
12
 
13
13
  <IressAutocomplete
14
14
  options\={\[
@@ -221,7 +221,7 @@ The `defaultValue` prop can be used to set the initial value of the input. The v
221
221
 
222
222
  [](./iframe.html?id=components-autocomplete--uncontrolled)
223
223
 
224
- ```
224
+ Hide codedrawOpen in CodeSandbox
225
225
 
226
226
  <IressAutocomplete
227
227
  defaultValue\="Option 1"
@@ -434,9 +434,9 @@ The `value` prop can be used to completely control the state of the component. U
434
434
 
435
435
  [](./iframe.html?id=components-autocomplete--controlled)
436
436
 
437
- ```
437
+ Hide codedrawOpen in CodeSandbox
438
438
 
439
- import { IressAutocomplete, type IressAutocompleteProps } from '@iress-oss/ids-components';
439
+ import { IressAutocomplete, type IressAutocompleteProps } from '@/main';
440
440
  import { useState } from 'react';
441
441
  export const AutocompleteUsingState \= () \=> {
442
442
  const \[value, setValue\] \= useState('Option 1');
@@ -665,7 +665,7 @@ To use the suggestion functionality, you can provide an array of `LabelValueMeta
665
665
 
666
666
  [](./iframe.html?id=components-autocomplete--options)
667
667
 
668
- ```
668
+ Hide codedrawOpen in CodeSandbox
669
669
 
670
670
  <IressAutocomplete
671
671
  options\={\[
@@ -870,9 +870,9 @@ If you would like to render suggestions from the server, you can pass a function
870
870
 
871
871
  [](./iframe.html?id=components-autocomplete--async-options)
872
872
 
873
- ```
873
+ Hide codedrawOpen in CodeSandbox
874
874
 
875
- import { IressAutocomplete, type IressAutocompleteProps } from '@iress-oss/ids-components';
875
+ import { IressAutocomplete, type IressAutocompleteProps } from '@/main';
876
876
  interface StarWarsCharacter {
877
877
  name: string;
878
878
  gender: string;
@@ -1057,9 +1057,9 @@ By default, async searches are triggered after 1 character. Setting a higher val
1057
1057
 
1058
1058
  [](./iframe.html?id=components-autocomplete--async-options-min-search-length)
1059
1059
 
1060
- ```
1060
+ Hide codedrawOpen in CodeSandbox
1061
1061
 
1062
- import { IressAutocomplete, type IressAutocompleteProps } from '@iress-oss/ids-components';
1062
+ import { IressAutocomplete, type IressAutocompleteProps } from '@/main';
1063
1063
  interface StarWarsCharacter {
1064
1064
  name: string;
1065
1065
  gender: string;
@@ -1242,7 +1242,7 @@ If you want to provide initial options to the user, you can use the `initialOpti
1242
1242
 
1243
1243
  [](./iframe.html?id=components-autocomplete--initial-options)
1244
1244
 
1245
- ```
1245
+ Hide codedrawOpen in CodeSandbox
1246
1246
 
1247
1247
  <IressAutocomplete
1248
1248
  initialOptions\={\[
@@ -1519,7 +1519,7 @@ The `autoSelect` prop will automatically select the highlighted option when the
1519
1519
 
1520
1520
  [](./iframe.html?id=components-autocomplete--remove-auto-select)
1521
1521
 
1522
- ```
1522
+ Hide codedrawOpen in CodeSandbox
1523
1523
 
1524
1524
  <IressAutocomplete
1525
1525
  autoSelect\={false}
@@ -1735,7 +1735,7 @@ It does have some defaults to help with user experience. `append` automatically
1735
1735
 
1736
1736
  [](./iframe.html?id=components-autocomplete--input-props)
1737
1737
 
1738
- ```
1738
+ Hide codedrawOpen in CodeSandbox
1739
1739
 
1740
1740
  <IressAutocomplete
1741
1741
  append\={<IressPopover activator\={<IressButton mode\="tertiary"\><IressIcon name\="cog" /></IressButton\>} align\="bottom-end" container\={document.body}\><IressPanel\>Some settings in here</IressPanel\></IressPopover\>}
@@ -2018,7 +2018,7 @@ If you would like to show a message when there are no results, you can use the `
2018
2018
 
2019
2019
  [](./iframe.html?id=components-autocomplete--no-results-text)
2020
2020
 
2021
- ```
2021
+ Hide codedrawOpen in CodeSandbox
2022
2022
 
2023
2023
  <IressAutocomplete
2024
2024
  noResultsText\={<IressPanel\>No results found</IressPanel\>}
@@ -2263,7 +2263,7 @@ There are two additional props that autocomplete accepts to customise the popove
2263
2263
 
2264
2264
  [](./iframe.html?id=components-autocomplete--popover-props)
2265
2265
 
2266
- ```
2266
+ Hide codedrawOpen in CodeSandbox
2267
2267
 
2268
2268
  <IressAutocomplete
2269
2269
  options\={\[
@@ -2476,7 +2476,7 @@ By default there is a debounce, but it can be removed by setting it to `0`.
2476
2476
 
2477
2477
  [](./iframe.html?id=components-autocomplete--debounce-threshold)
2478
2478
 
2479
- ```
2479
+ Hide codedrawOpen in CodeSandbox
2480
2480
 
2481
2481
  <IressAutocomplete
2482
2482
  debounceThreshold\={0}
@@ -2714,11 +2714,11 @@ The result limits will also affect the number of initial options displayed, if t
2714
2714
 
2715
2715
  **xl** breakpoint (1200px - 1499px)
2716
2716
 
2717
- ```
2717
+ Hide codedrawOpen in CodeSandbox
2718
2718
 
2719
2719
  <IressStack gap\="md"\>
2720
2720
  <IressPanel\>
2721
- <kn />
2721
+ <Ln />
2722
2722
  </IressPanel\>
2723
2723
  <IressAutocomplete
2724
2724
  limitDesktop\={6}
@@ -3008,7 +3008,7 @@ If you need more control over the read-only state (for example, rendering a styl
3008
3008
 
3009
3009
  Option 1
3010
3010
 
3011
- ```
3011
+ Hide codedrawOpen in CodeSandbox
3012
3012
 
3013
3013
  <IressAutocomplete
3014
3014
  defaultValue\="Option 1"
@@ -27,8 +27,15 @@ It has been exposed in case you need it in your application to provide custom se
27
27
  | Person 4 | Female |
28
28
  | Person 5 | Male |
29
29
 
30
- ```
31
-
30
+ Hide codedrawOpen in CodeSandbox
31
+
32
+ import {
33
+ IressInput,
34
+ IressStack,
35
+ IressTable,
36
+ useAutocompleteSearch,
37
+ } from '@/main';
38
+ import { useMemo, useState } from 'react';
32
39
  const ALL\_ROWS \= \[...Array(5).keys()\].map((number) \=> ({
33
40
  label: \`Person ${number + 1}\`,
34
41
  gender: number % 2 ? 'Female' : 'Male',
@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
18
18
 
19
19
  badge
20
20
 
21
- ```
21
+ Hide codedrawOpen in CodeSandbox
22
22
 
23
23
  <IressBadge mode\="neutral"\>
24
24
  badge
@@ -90,7 +90,7 @@ The `mode` prop controls the colour scheme of the badge. There are a range of op
90
90
 
91
91
  primarydangerinfosuccesswarningneutral
92
92
 
93
- ```
93
+ Hide codedrawOpen in CodeSandbox
94
94
 
95
95
  <IressInline gap\="sm"\>
96
96
  <IressBadge mode\="primary"\>
@@ -165,7 +165,7 @@ Setting the `pill` prop will render the badge with rounded corners. Often used f
165
165
 
166
166
  99+
167
167
 
168
- ```
168
+ Hide codedrawOpen in CodeSandbox
169
169
 
170
170
  <IressBadge
171
171
  mode\="primary"
@@ -240,7 +240,7 @@ Host button3
240
240
 
241
241
  Host tab99+
242
242
 
243
- ```
243
+ Hide codedrawOpen in CodeSandbox
244
244
 
245
245
  <IressInline gap\="lg"\>
246
246
  <IressBadge
@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
18
18
 
19
19
  Button
20
20
 
21
- ```
21
+ Hide codedrawOpen in CodeSandbox
22
22
 
23
23
  <IressButton\>
24
24
  Button
@@ -202,7 +202,7 @@ The `mode` prop controls the visual appearance and priority of the button.
202
202
 
203
203
  Primary buttonSecondary buttonTertiary button
204
204
 
205
- ```
205
+ Hide codedrawOpen in CodeSandbox
206
206
 
207
207
  <IressInline gap\="md"\>
208
208
  <IressButton mode\="primary"\>
@@ -384,7 +384,7 @@ Primary buttonSecondary buttonTertiary button
384
384
 
385
385
  Primary buttonSecondary buttonTertiary button
386
386
 
387
- ```
387
+ Hide codedrawOpen in CodeSandbox
388
388
 
389
389
  <IressStack gap\="md"\>
390
390
  <IressInline gap\="md"\>
@@ -587,7 +587,7 @@ The `type` property controls the behaviour of the button. It defaults to `button
587
587
 
588
588
  buttonsubmitreset
589
589
 
590
- ```
590
+ Hide codedrawOpen in CodeSandbox
591
591
 
592
592
  <IressInline gap\="md"\>
593
593
  <IressButton type\="button"\>
@@ -777,7 +777,7 @@ When the loading state is activated, any click events on the button are disabled
777
777
 
778
778
  Button textButton textButton text
779
779
 
780
- ```
780
+ Hide codedrawOpen in CodeSandbox
781
781
 
782
782
  <IressInline gap\="md"\>
783
783
  <IressButton
@@ -971,7 +971,7 @@ You can also use the link specific props `target` and `rel`.
971
971
 
972
972
  [This is a link (anchor tag)](https://www.iress.com/)
973
973
 
974
- ```
974
+ Hide codedrawOpen in CodeSandbox
975
975
 
976
976
  <IressButton
977
977
  href\="https://www.iress.com/"
@@ -1176,7 +1176,7 @@ If you're using a heading, ensure that it has an appropriate heading level to ma
1176
1176
 
1177
1177
  Delete button with confirm
1178
1178
 
1179
- ```
1179
+ Hide codedrawOpen in CodeSandbox
1180
1180
 
1181
1181
  <IressButton
1182
1182
  onClick\={() \=> {}}
@@ -1361,12 +1361,12 @@ Please resize your screen to see how the fluid value changes. Current breakpoint
1361
1361
 
1362
1362
  Always fluidFluid on xs and sm
1363
1363
 
1364
- ```
1364
+ Hide codedrawOpen in CodeSandbox
1365
1365
 
1366
1366
  <IressInline gap\="md"\>
1367
1367
  <IressText element\="p"\>
1368
1368
  Please resize your screen to see how the fluid value changes. Current breakpoint:{' '}
1369
- <kn renderLabel\="and-above" />
1369
+ <Ln renderLabel\="and-above" />
1370
1370
  . </IressText\>
1371
1371
  <IressButton fluid\>
1372
1372
  Always fluid </IressButton\>
@@ -1550,7 +1550,7 @@ Button with lots of text content and a minimum width set via CSS
1550
1550
 
1551
1551
  Button with lots of text content with the noWrap prop set to true
1552
1552
 
1553
- ```
1553
+ Hide codedrawOpen in CodeSandbox
1554
1554
 
1555
1555
  <IressText
1556
1556
  style\={{
@@ -1748,7 +1748,7 @@ Prepend iconNewPrepend badge
1748
1748
 
1749
1749
  Append iconAppend badge+999
1750
1750
 
1751
- ```
1751
+ Hide codedrawOpen in CodeSandbox
1752
1752
 
1753
1753
  <IressStack gap\="md"\>
1754
1754
  <IressInline gap\="md"\>
@@ -1936,7 +1936,7 @@ When a `href` is provided, the `download` prop can be used to indicate that the
1936
1936
 
1937
1937
  [Download logo](assets/iress-logo.png)
1938
1938
 
1939
- ```
1939
+ Hide codedrawOpen in CodeSandbox
1940
1940
 
1941
1941
  <IressButton
1942
1942
  download
@@ -2120,8 +2120,10 @@ You can use the `element` prop to render a custom component as the button. This
2120
2120
 
2121
2121
  [Iress](https://iress.com)
2122
2122
 
2123
- ```
2123
+ Hide codedrawOpen in CodeSandbox
2124
2124
 
2125
+ import { IressButton } from '@/main';
2126
+ import { type HTMLAttributes, forwardRef } from 'react';
2125
2127
  /\*\*
2126
2128
  \* This could be the \`Link\` component from \`react-router-dom\` or any other routing library. \*/
2127
2129
  const Link \= forwardRef<
@@ -2298,7 +2300,7 @@ It has one additional prop, `screenReaderText`, which is used to provide a scree
2298
2300
 
2299
2301
  [](./iframe.html?id=components-button-closebutton--close-button)
2300
2302
 
2301
- ```
2303
+ Hide codedrawOpen in CodeSandbox
2302
2304
 
2303
2305
  <IressCloseButton
2304
2306
  append\=""
@@ -20,7 +20,7 @@ Button group
20
20
 
21
21
  Option 1Option 2Option 3Option 4
22
22
 
23
- ```
23
+ Hide codedrawOpen in CodeSandbox
24
24
 
25
25
  <IressButtonGroup label\="Button group"\>
26
26
  <IressButton\>
@@ -125,7 +125,7 @@ Button group
125
125
 
126
126
  Option 1Option 2Option 3Option 4
127
127
 
128
- ```
128
+ Hide codedrawOpen in CodeSandbox
129
129
 
130
130
  <IressButtonGroup label\="Button group"\>
131
131
  <IressButton\>
@@ -232,7 +232,7 @@ Right
232
232
 
233
233
  Justify
234
234
 
235
- ```
235
+ Hide codedrawOpen in CodeSandbox
236
236
 
237
237
  <IressButtonGroup label\="Text alignment"\>
238
238
  <IressTooltip tooltipText\="Left"\>
@@ -350,7 +350,7 @@ Multiple options can be selected
350
350
 
351
351
  Option 1Option 2Option 3Option 4
352
352
 
353
- ```
353
+ Hide codedrawOpen in CodeSandbox
354
354
 
355
355
  <IressButtonGroup
356
356
  label\="Multiple options can be selected"
@@ -455,7 +455,7 @@ Selected option for single select
455
455
 
456
456
  Option 1Option 2Option 3Option 4
457
457
 
458
- ```
458
+ Hide codedrawOpen in CodeSandbox
459
459
 
460
460
  <IressButtonGroup
461
461
  defaultSelected\="Option 2"
@@ -552,7 +552,7 @@ Selected option for multi-select
552
552
 
553
553
  Option 1Option 2Option 3Option 4
554
554
 
555
- ```
555
+ Hide codedrawOpen in CodeSandbox
556
556
 
557
557
  <IressButtonGroup
558
558
  defaultSelected\={\[
@@ -673,7 +673,7 @@ Trigger toasts by selecting an option below
673
673
 
674
674
  Option 1Option 2Option 3Option 4
675
675
 
676
- ```
676
+ Hide codedrawOpen in CodeSandbox
677
677
 
678
678
  {
679
679
  args: {
@@ -776,7 +776,7 @@ Button group
776
776
 
777
777
  Option 1Option 2Option 3Option 4
778
778
 
779
- ```
779
+ Hide codedrawOpen in CodeSandbox
780
780
 
781
781
  <IressButtonGroup
782
782
  hiddenLabel
@@ -874,7 +874,7 @@ Heading as label
874
874
 
875
875
  Option 1Option 2Option 3Option 4
876
876
 
877
- ```
877
+ Hide codedrawOpen in CodeSandbox
878
878
 
879
879
  {
880
880
  args: {
@@ -24,7 +24,7 @@ Cards can be configured in a variety of ways. You can use the render props (slot
24
24
 
25
25
  I'm a card
26
26
 
27
- ```
27
+ Hide codedrawOpen in CodeSandbox
28
28
 
29
29
  <IressCard\>
30
30
  I'm a card
@@ -124,7 +124,7 @@ All slots and props for card are optional. You can create a simple card by addin
124
124
 
125
125
  I'm a simple card
126
126
 
127
- ```
127
+ Hide codedrawOpen in CodeSandbox
128
128
 
129
129
  <IressCard\>
130
130
  I'm a simple card
@@ -226,7 +226,7 @@ I’m a card with md padding
226
226
 
227
227
  I’m a card with lg padding
228
228
 
229
- ```
229
+ Hide codedrawOpen in CodeSandbox
230
230
 
231
231
  <IressStack gap\="md"\>
232
232
  <IressCard p\="none"\>
@@ -331,7 +331,7 @@ I’m a stretched card
331
331
 
332
332
  I’m a card with lots of content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
333
333
 
334
- ```
334
+ Hide codedrawOpen in CodeSandbox
335
335
 
336
336
  <IressRow
337
337
  gutter\="md"
@@ -437,7 +437,7 @@ Setting the `selected` prop highlights the card, usually to allow selection in a
437
437
 
438
438
  I'm a selected card
439
439
 
440
- ```
440
+ Hide codedrawOpen in CodeSandbox
441
441
 
442
442
  <IressCard selected\>
443
443
  I'm a selected card
@@ -540,7 +540,7 @@ Use the `prepend` prop to add content to the left side of the card.
540
540
 
541
541
  I'm a card using the prepend render prop
542
542
 
543
- ```
543
+ Hide codedrawOpen in CodeSandbox
544
544
 
545
545
  <IressCard prepend\={<IressIcon name\="star" />}\>
546
546
  I'm a card using the prepend render prop
@@ -667,7 +667,7 @@ More actions in here
667
667
 
668
668
  I'm a card using the topRight render prop
669
669
 
670
- ```
670
+ Hide codedrawOpen in CodeSandbox
671
671
 
672
672
  <IressCard topRight\={<IressPopover activator\={<IressButton mode\="tertiary" textStyle\="typography.body.lg"\><IressIcon name\="ellipsis-v" /></IressButton\>} align\="bottom-end"\><IressPanel\>More actions in here</IressPanel\></IressPopover\>}\>
673
673
  I'm a card using the topRight render prop
@@ -800,7 +800,7 @@ Welcome to Iress!
800
800
 
801
801
  I'm a card using the heading render prop
802
802
 
803
- ```
803
+ Hide codedrawOpen in CodeSandbox
804
804
 
805
805
  <IressCard heading\={<h2\>Welcome to Iress!</h2\>}\>
806
806
  I'm a card using the heading render prop
@@ -927,7 +927,7 @@ Use the `media` prop to add media to the card. The media can be any component yo
927
927
 
928
928
  I'm a card using the media render prop
929
929
 
930
- ```
930
+ Hide codedrawOpen in CodeSandbox
931
931
 
932
932
  <IressCard media\={<img alt\="A man in an Iress branded t-shirt smiles at the camera while two female colleagues have a discussion in the foreground" src\="https://www.iress.com/media/images/media-contact.width-600.png" width\="250"/>}\>
933
933
  I'm a card using the media render prop
@@ -1052,7 +1052,7 @@ Use the `content` prop to add content to the card. The content can be any compon
1052
1052
 
1053
1053
  Find out all the onboarding material you need [with this easy guide](https://iress.com).
1054
1054
 
1055
- ```
1055
+ Hide codedrawOpen in CodeSandbox
1056
1056
 
1057
1057
  <IressCard\>
1058
1058
  <IressText\>
@@ -1181,7 +1181,7 @@ I'm a card using the footer render prop
1181
1181
 
1182
1182
  NEW
1183
1183
 
1184
- ```
1184
+ Hide codedrawOpen in CodeSandbox
1185
1185
 
1186
1186
  <IressCard footer\={<IressInline gap\="sm" horizontalAlign\="between"\><IressInline gap\="sm"\><IressBadge pill\>#new-starter</IressBadge\><IressBadge pill\>#first-day</IressBadge\></IressInline\><IressBadge mode\="success"\>NEW</IressBadge\></IressInline\>}\>
1187
1187
  I'm a card using the footer render prop
@@ -1357,8 +1357,23 @@ Find out all the onboarding material you need [with this easy guide](https://ire
1357
1357
 
1358
1358
  NEW
1359
1359
 
1360
- ```
1361
-
1360
+ Hide codedrawOpen in CodeSandbox
1361
+
1362
+ import {
1363
+ IressInline,
1364
+ IressToggle,
1365
+ IressRow,
1366
+ IressCol,
1367
+ type IressCardProps,
1368
+ IressDivider,
1369
+ IressCard,
1370
+ IressStack,
1371
+ } from '@/main';
1372
+ import { useState } from 'react';
1373
+ import {
1374
+ SUPPORTED\_CARD\_SLOTS,
1375
+ type SupportedCardSlots,
1376
+ } from './supportedCardSlots';
1362
1377
  export const CardAllSlots \= () \=> {
1363
1378
  const \[show, setShow\] \= useState({
1364
1379
  children: true,
@@ -1505,7 +1520,7 @@ Since the `heading` prop now renders the component you give it, you have full co
1505
1520
 
1506
1521
  I'm a card with a clickable heading. NEVER use me when the whole card is clickable.
1507
1522
 
1508
- ```
1523
+ Hide codedrawOpen in CodeSandbox
1509
1524
 
1510
1525
  <IressCard heading\={<h2\><a href\="https://iress.com"\>Clickable heading</a\></h2\>}\>
1511
1526
  I'm a card with a clickable heading. NEVER use me when the whole card is clickable.
@@ -1632,7 +1647,7 @@ It's recommended to add `role="button"` and `tabindex="0"` to the card to make i
1632
1647
 
1633
1648
  I am a card with an onClick handler. Click me to see what happens.
1634
1649
 
1635
- ```
1650
+ Hide codedrawOpen in CodeSandbox
1636
1651
 
1637
1652
  <IressCard
1638
1653
  onClick\={() \=> alert("Card clicked")}
@@ -1763,7 +1778,7 @@ To simplify the process of making the whole card clickable, you can use the `Ire
1763
1778
 
1764
1779
  I am a card with a button element
1765
1780
 
1766
- ```
1781
+ Hide codedrawOpen in CodeSandbox
1767
1782
 
1768
1783
  <IressButtonCard
1769
1784
  onClick\={() \=> alert("Card clicked")}
@@ -1868,7 +1883,7 @@ string
1868
1883
 
1869
1884
  [I am a card with an anchor element](https://iress.com)
1870
1885
 
1871
- ```
1886
+ Hide codedrawOpen in CodeSandbox
1872
1887
 
1873
1888
  <IressLinkCard
1874
1889
  href\="https://iress.com"
@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
18
18
 
19
19
  A checkbox
20
20
 
21
- ```
21
+ Hide codedrawOpen in CodeSandbox
22
22
 
23
23
  <IressCheckbox\>
24
24
  A checkbox
@@ -166,7 +166,7 @@ When used as part of an `IressCheckboxGroup`, the `checked` prop will be ignored
166
166
 
167
167
  A checkbox which is checked and in controlled mode
168
168
 
169
- ```
169
+ Hide codedrawOpen in CodeSandbox
170
170
 
171
171
  <IressCheckbox checked\>
172
172
  A checkbox which is checked and in controlled mode
@@ -308,7 +308,7 @@ For single checkboxes in uncontrolled mode the `defaultChecked` prop sets the de
308
308
 
309
309
  A checkbox which is initially checked
310
310
 
311
- ```
311
+ Hide codedrawOpen in CodeSandbox
312
312
 
313
313
  <IressCheckbox defaultChecked\>
314
314
  A checkbox which is initially checked
@@ -450,7 +450,7 @@ The `indeterminate` prop sets the checkbox appearance to an indeterminate dash u
450
450
 
451
451
  A checkbox which is initially in an indeterminate state
452
452
 
453
- ```
453
+ Hide codedrawOpen in CodeSandbox
454
454
 
455
455
  <IressCheckbox indeterminate\>
456
456
  A checkbox which is initially in an indeterminate state
@@ -607,7 +607,7 @@ Toggle row
607
607
 
608
608
  | CASH.CASH | 2020-06-28 | 49751.43 |
609
609
 
610
- ```
610
+ Hide codedrawOpen in CodeSandbox
611
611
 
612
612
  <IressTable
613
613
  caption\="List of investments"
@@ -785,7 +785,7 @@ It is understandable that this may not be the desired behavior for all use cases
785
785
 
786
786
  I agree to the terms and conditions
787
787
 
788
- ```
788
+ Hide codedrawOpen in CodeSandbox
789
789
 
790
790
  <IressStack\>
791
791
  <IressCheckbox
@@ -948,7 +948,7 @@ The `touch` prop adds the button-like border and padding to checkbox.
948
948
 
949
949
  Checkbox with touch styles
950
950
 
951
- ```
951
+ Hide codedrawOpen in CodeSandbox
952
952
 
953
953
  <IressCheckbox touch\>
954
954
  Checkbox with touch styles