@sis-cc/dotstatsuite-visions 14.4.0 → 15.0.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 (260) hide show
  1. package/dist/Dataflow/Dataflow.js +1 -1
  2. package/dist/DeleteAllChip/DeleteAllChip.js +1 -1
  3. package/dist/GroupedChips/GroupedChips.js +2 -2
  4. package/dist/addon-visual-tests-assets/visual-test-illustration.mp4 +0 -0
  5. package/dist/assets/Alert-BahPnaEA.js +5 -0
  6. package/dist/assets/Alert.stories-BHPHG3Jv.js +3 -0
  7. package/dist/assets/ApiQueries.stories-Cm3FNTRK.js +1 -0
  8. package/dist/assets/ArrowForward-sklQJJL1.js +1 -0
  9. package/dist/assets/Asterisk-BMLA7sbs.js +1 -0
  10. package/dist/assets/AuthDialog.stories-HYEzrAoY.js +1 -0
  11. package/dist/assets/Breadcrumbs.stories-BOXD4dIR.js +1 -0
  12. package/dist/assets/Button-BkzVjK6l.js +1 -0
  13. package/dist/assets/Button-b3QRzebi.js +1 -0
  14. package/dist/assets/Button.stories-Hb6Cf8h9.js +20 -0
  15. package/dist/assets/ButtonBase-DhZMwPE_.js +74 -0
  16. package/dist/assets/CardContent-D1o8D4MM.js +1 -0
  17. package/dist/assets/ChartsConfig.stories-CcP95z9e.js +1 -0
  18. package/dist/assets/Checkbox-BExCj3Zn.js +1 -0
  19. package/dist/assets/Chips.stories-BVdmfGBU.js +1 -0
  20. package/dist/assets/CircularProgress-8uws3hxz.js +28 -0
  21. package/dist/assets/Close-Ca-XHoFo.js +1 -0
  22. package/dist/assets/Collapse-DeFEs_Rz.js +1 -0
  23. package/dist/assets/CollapseButtons.stories-YEGJ3u19.js +1 -0
  24. package/dist/assets/CollapsibleTree.stories-D13JKbMu.js +1 -0
  25. package/dist/assets/Color-6AOWCN3U-g9ydbrnJ.js +1 -0
  26. package/dist/assets/Contact.stories-CmleM-dR.js +1 -0
  27. package/dist/assets/Container-BCPjrSA7.js +1 -0
  28. package/dist/assets/Cross-Cri6NfUz.js +1 -0
  29. package/dist/assets/CustomChip-CIxIQNL9.js +1 -0
  30. package/dist/assets/DataEdit-4eRxHmEk.js +1 -0
  31. package/dist/assets/DataEdit.stories-CCP9iKtw.js +1 -0
  32. package/dist/assets/DataFooter.stories-qVVa4vYb.js +1 -0
  33. package/dist/assets/DataHeader.stories-BQiHHVoJ.js +3 -0
  34. package/dist/assets/Dataflow.stories-BJZEwPx1.js +3 -0
  35. package/dist/assets/DeleteAllChip.stories-CZ3OemLc.js +1 -0
  36. package/dist/assets/Dialog-COBT3hSc.js +1 -0
  37. package/dist/assets/Divider-B7sul2Rx.js +1 -0
  38. package/dist/assets/DocsRenderer-JROSPFPF-2EuJnos7.js +752 -0
  39. package/dist/assets/Done-DcUBAPE1.js +1 -0
  40. package/dist/assets/DynamicDrawer.stories-Dv1vlwoU.js +5 -0
  41. package/dist/assets/EmojiObjects-CKzZ5Ih6.js +1 -0
  42. package/dist/assets/ExpandLess-Cb78Kxnw.js +1 -0
  43. package/dist/assets/ExpandMore-DTogUJli.js +1 -0
  44. package/dist/assets/ExpansionPanel-e_6V_EWh.js +1 -0
  45. package/dist/assets/ExpansionPanel.stories-Bv2wUZpI.js +1 -0
  46. package/dist/assets/FormControlLabel-Bb15Ebo4.js +1 -0
  47. package/dist/assets/Grid-ybm6vQ70.js +1 -0
  48. package/dist/assets/GroupedChips.stories-DvKWty97.js +1 -0
  49. package/dist/assets/Grow-DTmQPbJ8.js +1 -0
  50. package/dist/assets/HierarchicalFilter.stories-BfI-7vgF.js +1 -0
  51. package/dist/assets/IconButton-VboFWChz.js +1 -0
  52. package/dist/assets/Info-5vSSn_L8.js +1 -0
  53. package/dist/assets/Input-rGp0lo2o.js +1 -0
  54. package/dist/assets/Input.stories-DSYh9DQJ.js +1 -0
  55. package/dist/assets/InputAdornment-CdjHoutR.js +1 -0
  56. package/dist/assets/InputNumber.stories-CvVXLS9F.js +1 -0
  57. package/dist/assets/KeyboardArrowUp-CJqtKlLa.js +1 -0
  58. package/dist/assets/LabelDivider.stories-DnGpkMfA.js +1 -0
  59. package/dist/assets/Lens-ayM3nQ4F.js +1 -0
  60. package/dist/assets/Link-ZT8vCTL_.js +1 -0
  61. package/dist/assets/ListContext-WtRDE57m.js +1 -0
  62. package/dist/assets/Loading.stories-B0i6A2bN.js +1 -0
  63. package/dist/assets/Logo.stories-iZtjK4xB.js +1 -0
  64. package/dist/assets/MenuItem-yuDxPIxK.js +1 -0
  65. package/dist/assets/Mode-CjQrAIoR.js +1 -0
  66. package/dist/assets/Mode.stories-Fg4X3zsm.js +1 -0
  67. package/dist/assets/NoData-DH5uF7wK.js +1 -0
  68. package/dist/assets/NoData.stories-DZMHsYur.js +1 -0
  69. package/dist/assets/Pagination.stories-RvC-DxeA.js +1 -0
  70. package/dist/assets/Paper-CZCZSMBQ.js +1 -0
  71. package/dist/assets/PeriodPicker.stories-BWHGe_fV.js +1 -0
  72. package/dist/assets/Popover-BK_iPZDP.js +1 -0
  73. package/dist/assets/RadioGroup-BXSfsTC4.js +1 -0
  74. package/dist/assets/Select-C6PymK1y.js +1 -0
  75. package/dist/assets/Select-abrb4A4y.js +1 -0
  76. package/dist/assets/Select.stories-tKPrQXFk.js +1 -0
  77. package/dist/assets/Share.stories-fU-XikOg.js +1 -0
  78. package/dist/assets/ShortUrls.stories-CZnHY4SV.js +1 -0
  79. package/dist/assets/SisccFooter.stories-D8ZAcmO4.js +1 -0
  80. package/dist/assets/Spotlight-DOEwTanm.js +1 -0
  81. package/dist/assets/Spotlight.stories-Q21oDkh-.js +1 -0
  82. package/dist/assets/SvgIcon-Dvaj6YGR.js +1 -0
  83. package/dist/assets/SwitchBase-Cr6pwfF7.js +1 -0
  84. package/dist/assets/T-Y1RunoT4.js +1 -0
  85. package/dist/assets/TableFooter.stories-Dbim0FX4.js +1 -0
  86. package/dist/assets/TableHeader.stories-D4l_N9uE.js +1 -0
  87. package/dist/assets/TableHtml5.stories-vE1cQW9O.js +6 -0
  88. package/dist/assets/TableLayout.stories-WSodxkci.js +5 -0
  89. package/dist/assets/TablePreview-DeG7DEQ7.js +1 -0
  90. package/dist/assets/TablePreview.stories-CWPDGmZJ.js +1 -0
  91. package/dist/assets/TableRow-BNA5BRpC.js +2 -0
  92. package/dist/assets/Tabs-BVkK2C35.js +1 -0
  93. package/dist/assets/Tag-BPffPm_y.js +1 -0
  94. package/dist/assets/Tag.stories-ahgqPj3B.js +1 -0
  95. package/dist/assets/TextField-EIydlugS.js +1 -0
  96. package/dist/assets/TextareaAutosize-K18CN-Th.js +2 -0
  97. package/dist/assets/ToggleButton-DBrNE6ll.js +1 -0
  98. package/dist/assets/ToggleButton.stories-BmgpJZ4V.js +1 -0
  99. package/dist/assets/Tooltip-D1R1sXI6.js +1 -0
  100. package/dist/assets/Tooltip-Q-HL_fsv.js +1 -0
  101. package/dist/assets/Tooltip.stories-eDKs-rYV.js +1 -0
  102. package/dist/assets/TransitionGroupContext-BCqGtjLe.js +1 -0
  103. package/dist/assets/Typography-raIQbVPd.js +1 -0
  104. package/dist/assets/UserRightForm.stories-BB1ESyB8.js +1 -0
  105. package/dist/assets/VerticalButton-CJUzjK4o.js +1 -0
  106. package/dist/assets/VerticalButton.stories-yuR7IUIF.js +1 -0
  107. package/dist/assets/VirtualizedTree-C5V4Kc3I.js +9 -0
  108. package/dist/assets/VirtualizedTree.stories-COexQ4lU.js +3 -0
  109. package/dist/assets/Warning-BTID1o13.js +7 -0
  110. package/dist/assets/WithTooltip-7X4HQR7L-CEX1gWpG.js +9 -0
  111. package/dist/assets/_cloneRegExp-xedU2qh5.js +1 -0
  112. package/dist/assets/_concat-CKc59O9E.js +1 -0
  113. package/dist/assets/_curry1-DZES3h6F.js +1 -0
  114. package/dist/assets/_curry3-B7ARCYrl.js +1 -0
  115. package/dist/assets/_isObject-6WN73bNV.js +1 -0
  116. package/dist/assets/_isString-qgG10cDy.js +1 -0
  117. package/dist/assets/_reduce-jCRHcH4g.js +1 -0
  118. package/dist/assets/_reduced-C8HAFxGt.js +1 -0
  119. package/dist/assets/addIndex-oJ56c-D4.js +1 -0
  120. package/dist/assets/all-pAWO0bOP.js +1 -0
  121. package/dist/assets/always-C_Ync45z.js +1 -0
  122. package/dist/assets/any-CfLUVj0h.js +1 -0
  123. package/dist/assets/anyPass-CYXEa91G.js +1 -0
  124. package/dist/assets/append-C8VlU-CL.js +1 -0
  125. package/dist/assets/assoc-Dg7iWEwB.js +1 -0
  126. package/dist/assets/axe-BqaH7f9C.js +20 -0
  127. package/dist/assets/client-B3aSWC9V.js +1 -0
  128. package/dist/assets/concat-BaCSP4bP.js +1 -0
  129. package/dist/assets/cond-D3AegoZw.js +1 -0
  130. package/dist/assets/createSvgIcon-BQj7h82W.js +1 -0
  131. package/dist/assets/curryN-CtlObJyB.js +1 -0
  132. package/dist/assets/difference-DDKgd6CJ.js +1 -0
  133. package/dist/assets/dissoc-BUYWJSj1.js +1 -0
  134. package/dist/assets/dividerClasses-8MxKAQz3.js +1 -0
  135. package/dist/assets/dropLast-ChWL3mCh.js +1 -0
  136. package/dist/assets/either-DkAOohkF.js +1 -0
  137. package/dist/assets/evolve-BatOtooD.js +1 -0
  138. package/dist/assets/find-DPVcla78.js +1 -0
  139. package/dist/assets/flip-DUR8w3Wu.js +1 -0
  140. package/dist/assets/forEach-CD9EYxEB.js +1 -0
  141. package/dist/assets/formControlState-CAP3NLpz.js +1 -0
  142. package/dist/assets/formatter-L2YTDE3Q-DurSE8zx.js +1 -0
  143. package/dist/assets/getThemeProps-DgmE1JNI.js +1 -0
  144. package/dist/assets/gt-BHd0ZsSb.js +1 -0
  145. package/dist/assets/gte-pCP_etx_.js +1 -0
  146. package/dist/assets/has-iQO9y9kE.js +1 -0
  147. package/dist/assets/head-qAhnf9Tw.js +1 -0
  148. package/dist/assets/identity-BtKjXVdB.js +1 -0
  149. package/dist/assets/ifElse-C4TX1NDU.js +1 -0
  150. package/dist/assets/iframe-H9RJD_jt.js +1162 -0
  151. package/dist/assets/index-BIT3w0N7.js +1 -0
  152. package/dist/assets/index-CFw5yPBL.js +1 -0
  153. package/dist/assets/index-DAQ7BYo-.js +1 -0
  154. package/dist/assets/index-Da_4nJ4V.js +1 -0
  155. package/dist/assets/index-DtooENrT.js +8 -0
  156. package/dist/assets/indexBy-BS-vJGsQ.js +1 -0
  157. package/dist/assets/init-D1ASY6bQ.js +1 -0
  158. package/dist/assets/innerJoin-Dosi0D91.js +1 -0
  159. package/dist/assets/intersperse-fqmJiggE.js +1 -0
  160. package/dist/assets/invoker-CzjdWzzC.js +1 -0
  161. package/dist/assets/is-D-2gRytX.js +1 -0
  162. package/dist/assets/isEmpty-BDVj1T2C.js +1 -0
  163. package/dist/assets/isMuiElement-BEn1gvXI.js +1 -0
  164. package/dist/assets/isNil-COslMkIS.js +1 -0
  165. package/dist/assets/join-D4-hXwt-.js +1 -0
  166. package/dist/assets/keys-MRUazFsh.js +1 -0
  167. package/dist/assets/last-BHjgfAsb.js +1 -0
  168. package/dist/assets/length-IXM-4ocd.js +1 -0
  169. package/dist/assets/lensIndex-DjJS719w.js +1 -0
  170. package/dist/assets/lensPath-BgbL4fVJ.js +1 -0
  171. package/dist/assets/lensProp-CbZVApjL.js +1 -0
  172. package/dist/assets/lift-DWG_WmTa.js +1 -0
  173. package/dist/assets/listItemTextClasses-Bb0m2K_C.js +1 -0
  174. package/dist/assets/lt-DLHCA0M9.js +1 -0
  175. package/dist/assets/lte-Bdgz3EA-.js +1 -0
  176. package/dist/assets/makeStyles-CD33PxwO.js +1 -0
  177. package/dist/assets/map-x4uThvOW.js +1 -0
  178. package/dist/assets/match-C0UqbTsC.js +1 -0
  179. package/dist/assets/matchers-JIUQ3HVY-N4FjKbka.js +14 -0
  180. package/dist/assets/max-kgon7wA-.js +1 -0
  181. package/dist/assets/min-CEC8M_KS.js +1 -0
  182. package/dist/assets/not-BYZhl9KK.js +1 -0
  183. package/dist/assets/of-jJbie-2W.js +1 -0
  184. package/dist/assets/omit-DlVJ9qIR.js +1 -0
  185. package/dist/assets/or-CjN1zdxp.js +1 -0
  186. package/dist/assets/over-f093ucEk.js +1 -0
  187. package/dist/assets/ownerDocument-DW-IO8s5.js +1 -0
  188. package/dist/assets/path-DwLTp3pU.js +1 -0
  189. package/dist/assets/pathOr-BmjUXfCm.js +1 -0
  190. package/dist/assets/pick-Zfnu-6mP.js +1 -0
  191. package/dist/assets/pipe-BtUDRn-R.js +1 -0
  192. package/dist/assets/pluck-DLxRFKfx.js +1 -0
  193. package/dist/assets/preload-helper-PPVm8Dsz.js +1 -0
  194. package/dist/assets/prepend-DsY2ekGJ.js +1 -0
  195. package/dist/assets/prop-D5hAeHhE.js +1 -0
  196. package/dist/assets/propEq-C5bw9tHb.js +1 -0
  197. package/dist/assets/propOr-C6krihMT.js +1 -0
  198. package/dist/assets/props-C7I1YqbB.js +1 -0
  199. package/dist/assets/react-18-CaF9HqVz.js +1 -0
  200. package/dist/assets/reverse-DjLk_5XO.js +1 -0
  201. package/dist/assets/set-8jiRfFh4.js +1 -0
  202. package/dist/assets/styled-DrorPOrE.js +1 -0
  203. package/dist/assets/subtract-tdm8zQ4O.js +1 -0
  204. package/dist/assets/syntaxhighlighter-YFXUGROL-D_-uxkyV.js +6 -0
  205. package/dist/assets/test-Bn_PxCzV.js +1 -0
  206. package/dist/assets/times-Jg5IS051.js +1 -0
  207. package/dist/assets/toString-CZqbYCtr.js +1 -0
  208. package/dist/assets/trim-DDjgxVjx.js +2 -0
  209. package/dist/assets/uniq-CZIvUTXI.js +1 -0
  210. package/dist/assets/unnest-CIXacqCq.js +1 -0
  211. package/dist/assets/useControlled-2Crdg_wq.js +1 -0
  212. package/dist/assets/useKeybordEscapeHandler-XV4USZbE.js +1 -0
  213. package/dist/assets/useMediaQuery-EL2udmJD.js +1 -0
  214. package/dist/assets/useSlotProps-DqSyzc0j.js +1 -0
  215. package/dist/assets/useTheme-rH_TrTQG.js +1 -0
  216. package/dist/assets/useThemeProps-huLGQ4l4.js +1 -0
  217. package/dist/assets/utils-BMkeX4GP.js +1 -0
  218. package/dist/assets/utils-C137tHnF.js +1 -0
  219. package/dist/assets/utils-CZc-gVZ4.js +1 -0
  220. package/dist/assets/values-CAwOW2HW.js +1 -0
  221. package/dist/assets/visuallyHidden-Dan1xhjv.js +1 -0
  222. package/dist/assets/when-DECS4LTO.js +1 -0
  223. package/dist/assets/with-input-ChRsbSCU.js +1 -0
  224. package/dist/assets/withSpotlight-DEVzorSt.js +1 -0
  225. package/dist/assets/without-6vRGZm_m.js +1 -0
  226. package/dist/assets/zip-QSYbJSwa.js +1 -0
  227. package/dist/chunks/{CustomChip-VonwGtLq.js → CustomChip-DwQGCNHM.js} +2 -2
  228. package/dist/chunks/{CustomChip-VonwGtLq.js.map → CustomChip-DwQGCNHM.js.map} +1 -1
  229. package/dist/chunks/{utils-BQc_rN44.js → utils-ovYpz27I.js} +2 -2
  230. package/dist/chunks/{utils-BQc_rN44.js.map → utils-ovYpz27I.js.map} +1 -1
  231. package/dist/favicon-wrapper.svg +46 -0
  232. package/dist/favicon.svg +1 -0
  233. package/dist/iframe.html +709 -0
  234. package/dist/index.html +161 -0
  235. package/dist/index.json +1 -0
  236. package/dist/manifests/components.html +4255 -0
  237. package/dist/manifests/components.json +2002 -0
  238. package/dist/nunito-sans-bold-italic.woff2 +0 -0
  239. package/dist/nunito-sans-bold.woff2 +0 -0
  240. package/dist/nunito-sans-italic.woff2 +0 -0
  241. package/dist/nunito-sans-regular.woff2 +0 -0
  242. package/dist/project.json +1 -0
  243. package/dist/sb-addons/a11y-3/manager-bundle.js +57 -0
  244. package/dist/sb-addons/chromatic-com-storybook-1/manager-bundle.js +352 -0
  245. package/dist/sb-addons/chromatic-com-storybook-1/manager-bundle.js.LEGAL.txt +31 -0
  246. package/dist/sb-addons/docs-4/manager-bundle.js +18 -0
  247. package/dist/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +632 -0
  248. package/dist/sb-addons/vitest-2/manager-bundle.js +3 -0
  249. package/dist/sb-common-assets/favicon-wrapper.svg +46 -0
  250. package/dist/sb-common-assets/favicon.svg +1 -0
  251. package/dist/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
  252. package/dist/sb-common-assets/nunito-sans-bold.woff2 +0 -0
  253. package/dist/sb-common-assets/nunito-sans-italic.woff2 +0 -0
  254. package/dist/sb-common-assets/nunito-sans-regular.woff2 +0 -0
  255. package/dist/sb-manager/globals-runtime.js +78957 -0
  256. package/dist/sb-manager/globals.js +24 -0
  257. package/dist/sb-manager/manager-stores.js +23 -0
  258. package/dist/sb-manager/runtime.js +28253 -0
  259. package/dist/vite-inject-mocker-entry.js +2 -0
  260. package/package.json +14 -2
package/dist/manifests/components.html ADDED
@@ -0,0 +1,4255 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Components Manifest</title>
7
+ <style>
8
+ :root {
9
+ --bg: #0b0c10;
10
+ --panel: #121318;
11
+ --muted: #9aa0a6;
12
+ --fg: #e8eaed;
13
+ --ok: #22c55e;
14
+ --info: #1e88e5;
15
+ --err: #c62828;
16
+ --ok-bg: #0c1a13;
17
+ --info-bg: #0c1624;
18
+ --err-bg: #1a0e0e;
19
+ --chip: #1f2330;
20
+ --border: #2b2f3a;
21
+ --link: #8ab4f8;
22
+ --active-ring: 1px; /* 1px active ring for pills and toggles */
23
+ }
24
+
25
+ * {
26
+ box-sizing: border-box;
27
+ }
28
+
29
+ html,
30
+ body {
31
+ margin: 0;
32
+ background: var(--bg);
33
+ color: var(--fg);
34
+ font: 14px/1.5 system-ui,
35
+ -apple-system,
36
+ Segoe UI,
37
+ Roboto,
38
+ Ubuntu,
39
+ Cantarell,
40
+ 'Helvetica Neue',
41
+ Arial,
42
+ 'Noto Sans';
43
+ }
44
+
45
+ .wrap {
46
+ max-width: 1100px;
47
+ margin: 0 auto;
48
+ padding: 16px 20px;
49
+ }
50
+
51
+ header {
52
+ position: sticky;
53
+ top: 0;
54
+ backdrop-filter: blur(6px);
55
+ background: color-mix(in srgb, var(--bg) 84%, transparent);
56
+ border-bottom: 1px solid var(--border);
57
+ z-index: 10;
58
+ }
59
+
60
+ h1 {
61
+ font-size: 20px;
62
+ margin: 0 0 6px;
63
+ }
64
+
65
+ .summary {
66
+ display: flex;
67
+ gap: 12px;
68
+ flex-wrap: wrap;
69
+ align-items: center;
70
+ }
71
+
72
+ /* Top filter pills */
73
+ .filter-pill {
74
+ display: inline-flex;
75
+ align-items: center;
76
+ gap: 6px;
77
+ padding: 6px 12px;
78
+ border: 1px solid var(--border);
79
+ border-radius: 999px;
80
+ background: var(--panel);
81
+ text-decoration: none;
82
+ cursor: pointer;
83
+ user-select: none;
84
+ color: var(--fg);
85
+ }
86
+
87
+ .filter-pill.ok {
88
+ color: #b9f6ca;
89
+ border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
90
+ background: color-mix(in srgb, var(--ok) 18%, #000);
91
+ }
92
+
93
+ .filter-pill.info {
94
+ color: #b3d9ff;
95
+ border-color: color-mix(in srgb, var(--info) 55%, var(--border));
96
+ background: var(--info-bg);
97
+ }
98
+
99
+ .filter-pill.err {
100
+ color: #ff9aa0;
101
+ border-color: color-mix(in srgb, var(--err) 55%, var(--border));
102
+ background: var(--err-bg);
103
+ }
104
+
105
+ .filter-pill.all {
106
+ color: #d7dbe0;
107
+ border-color: var(--border);
108
+ background: var(--panel);
109
+ }
110
+
111
+ .filter-pill[aria-disabled='true'] {
112
+ cursor: default;
113
+ text-decoration: none;
114
+ }
115
+
116
+ .filter-pill:focus,
117
+ .filter-pill:active {
118
+ outline: none;
119
+ box-shadow: none;
120
+ }
121
+
122
+ /* Selected top pill ring via :target */
123
+ #filter-all:target ~ header .filter-pill[data-k='all'],
124
+ #filter-errors:target ~ header .filter-pill[data-k='errors'],
125
+ #filter-infos:target ~ header .filter-pill[data-k='infos'],
126
+ #filter-story-errors:target ~ header .filter-pill[data-k='story-errors'],
127
+ #filter-doc-errors:target ~ header .filter-pill[data-k='docs'],
128
+ #filter-docs:target ~ header .filter-pill[data-k='docs'] {
129
+ box-shadow: 0 0 0 var(--active-ring) currentColor;
130
+ border-color: currentColor;
131
+ }
132
+
133
+ /* Hidden targets for filtering */
134
+ #filter-all,
135
+ #filter-errors,
136
+ #filter-infos,
137
+ #filter-story-errors,
138
+ #filter-doc-errors,
139
+ #filter-docs {
140
+ display: none;
141
+ }
142
+
143
+ main {
144
+ padding: 36px 0 40px;
145
+ }
146
+
147
+ .grid {
148
+ display: grid;
149
+ grid-template-columns: 1fr;
150
+ gap: 18px;
151
+ }
152
+
153
+ /* one card per row */
154
+
155
+ .card {
156
+ border: 1px solid var(--border);
157
+ background: var(--panel);
158
+ border-radius: 14px;
159
+ padding: 14px;
160
+ display: flex;
161
+ flex-direction: column;
162
+ gap: 10px;
163
+ }
164
+
165
+ .head {
166
+ display: flex;
167
+ flex-direction: column;
168
+ gap: 8px;
169
+ }
170
+
171
+ .title {
172
+ display: flex;
173
+ align-items: center;
174
+ justify-content: space-between;
175
+ gap: 10px;
176
+ }
177
+
178
+ .title h2 {
179
+ font-size: 16px;
180
+ margin: 0;
181
+ overflow: hidden;
182
+ text-overflow: ellipsis;
183
+ white-space: nowrap;
184
+ }
185
+
186
+ .meta {
187
+ font-size: 12px;
188
+ color: var(--muted);
189
+ overflow: hidden;
190
+ text-overflow: ellipsis;
191
+ white-space: nowrap;
192
+ }
193
+
194
+ .kv {
195
+ display: flex;
196
+ flex-wrap: wrap;
197
+ gap: 6px;
198
+ }
199
+
200
+ .chip {
201
+ font-size: 12px;
202
+ padding: 4px 8px;
203
+ border-radius: 999px;
204
+ background: var(--chip);
205
+ border: 1px solid var(--border);
206
+ }
207
+
208
+ .hint {
209
+ color: var(--muted);
210
+ font-size: 12px;
211
+ }
212
+
213
+ .badges {
214
+ display: flex;
215
+ gap: 8px;
216
+ flex-wrap: wrap;
217
+ }
218
+
219
+ /* Per-card badges: labels become toggles when clickable */
220
+ .badge {
221
+ font-size: 12px;
222
+ padding: 3px 8px;
223
+ border-radius: 999px;
224
+ border: 1px solid var(--border);
225
+ background: var(--chip);
226
+ color: #d7dbe0;
227
+ }
228
+
229
+ .badge.ok {
230
+ color: #b9f6ca;
231
+ border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
232
+ }
233
+
234
+ .badge.info {
235
+ color: #b3d9ff;
236
+ border-color: color-mix(in srgb, var(--info) 55%, var(--border));
237
+ }
238
+
239
+ .badge.err {
240
+ color: #ff9aa0;
241
+ border-color: color-mix(in srgb, var(--err) 55%, var(--border));
242
+ }
243
+
244
+ .as-toggle {
245
+ cursor: pointer;
246
+ }
247
+
248
+ /* 1px ring on active toggle */
249
+ .tg-err:checked + label.as-toggle,
250
+ .tg-info:checked + label.as-toggle,
251
+ .tg-stories:checked + label.as-toggle,
252
+ .tg-docs:checked + label.as-toggle,
253
+ .tg-subcomponents:checked + label.as-toggle,
254
+ .tg-content:checked + label.as-toggle,
255
+ .tg-props:checked + label.as-toggle {
256
+ box-shadow: 0 0 0 var(--active-ring) currentColor;
257
+ border-color: currentColor;
258
+ }
259
+
260
+ /* Panels: hidden by default, shown when respective toggle checked */
261
+ .panels {
262
+ display: grid;
263
+ gap: 10px;
264
+ }
265
+
266
+ .panel {
267
+ display: none;
268
+ }
269
+
270
+ .tg-err:checked ~ .panels .panel-err {
271
+ display: grid;
272
+ }
273
+
274
+ .tg-info:checked ~ .panels .panel-info {
275
+ display: grid;
276
+ gap: 8px;
277
+ }
278
+
279
+ .tg-stories:checked ~ .panels .panel-stories {
280
+ display: grid;
281
+ gap: 8px;
282
+ }
283
+
284
+ .tg-docs:checked ~ .panels .panel-docs {
285
+ display: grid;
286
+ gap: 8px;
287
+ }
288
+
289
+ .tg-subcomponents:checked ~ .panels .panel-subcomponents {
290
+ display: grid;
291
+ gap: 8px;
292
+ }
293
+
294
+ .tg-content:checked ~ .panels .panel-content {
295
+ display: grid;
296
+ gap: 8px;
297
+ }
298
+
299
+ .tg-props:checked ~ .panels .panel-props {
300
+ display: grid;
301
+ }
302
+
303
+ /* Colored notes for prop type error + info */
304
+ .note {
305
+ padding: 12px;
306
+ border: 1px solid var(--border);
307
+ border-radius: 10px;
308
+ }
309
+
310
+ .note.err {
311
+ border-color: color-mix(in srgb, var(--err) 55%, var(--border));
312
+ background: var(--err-bg);
313
+ color: #ffd1d4;
314
+ }
315
+
316
+ .note.info {
317
+ border-color: color-mix(in srgb, var(--info) 55%, var(--border));
318
+ background: var(--info-bg);
319
+ color: #d6e8ff;
320
+ }
321
+
322
+ .note.ok {
323
+ border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
324
+ background: var(--ok-bg);
325
+ color: var(--fg);
326
+ }
327
+
328
+ .note-title {
329
+ font-weight: 600;
330
+ margin-bottom: 6px;
331
+ }
332
+
333
+ .note-body {
334
+ white-space: normal;
335
+ }
336
+
337
+ /* Story error cards */
338
+ .ex {
339
+ padding: 10px;
340
+ border: 1px solid var(--border);
341
+ border-radius: 10px;
342
+ background: #0f131b;
343
+ }
344
+
345
+ .ex.err {
346
+ border-color: color-mix(in srgb, var(--err) 55%, var(--border));
347
+ }
348
+
349
+ .row {
350
+ display: flex;
351
+ align-items: center;
352
+ gap: 8px;
353
+ flex-wrap: wrap;
354
+ }
355
+
356
+ .status-dot {
357
+ width: 8px;
358
+ height: 8px;
359
+ border-radius: 50%;
360
+ display: inline-block;
361
+ }
362
+
363
+ .dot-ok {
364
+ background: var(--ok);
365
+ }
366
+
367
+ .dot-err {
368
+ background: var(--err);
369
+ }
370
+
371
+ .ex-name {
372
+ font-weight: 600;
373
+ }
374
+
375
+ /* Error groups (visible in errors filter) */
376
+ .error-groups {
377
+ display: none;
378
+ margin-bottom: 16px;
379
+ }
380
+
381
+ .group {
382
+ border: 1px solid var(--border);
383
+ background: var(--panel);
384
+ border-radius: 14px;
385
+ overflow: hidden;
386
+ }
387
+
388
+ .group + .group {
389
+ margin-top: 12px;
390
+ }
391
+
392
+ .group-header {
393
+ display: flex;
394
+ align-items: center;
395
+ gap: 10px;
396
+ padding: 12px 14px;
397
+ cursor: pointer;
398
+ border-bottom: 1px solid var(--border);
399
+ }
400
+
401
+ .group-header:hover {
402
+ background: #141722;
403
+ }
404
+
405
+ .group-title {
406
+ font-weight: 600;
407
+ flex: 1;
408
+ }
409
+
410
+ .group-count {
411
+ font-size: 12px;
412
+ color: var(--muted);
413
+ }
414
+
415
+ .group-cards {
416
+ display: none;
417
+ padding: 12px;
418
+ }
419
+
420
+ .group .card {
421
+ margin: 12px 0;
422
+ }
423
+
424
+ .group .card:first-child {
425
+ margin-top: 0;
426
+ }
427
+
428
+ .group .card:last-child {
429
+ margin-bottom: 0;
430
+ }
431
+
432
+ /* caret rotation */
433
+ .group-tg:checked + label .caret {
434
+ transform: rotate(90deg);
435
+ }
436
+
437
+ .caret {
438
+ transition: transform 0.15s ease;
439
+ }
440
+
441
+ /* toggle body */
442
+ .group-tg:checked ~ .group-cards {
443
+ display: block;
444
+ }
445
+
446
+ /* CSS-only filtering of cards via top pills */
447
+ #filter-errors:target ~ main .card:not(.has-error):not(.has-story-error) {
448
+ display: none;
449
+ }
450
+
451
+ #filter-infos:target ~ main .card:not(.has-info) {
452
+ display: none;
453
+ }
454
+
455
+ #filter-story-errors:target ~ main .card:not(.has-story-error) {
456
+ display: none;
457
+ }
458
+
459
+ #filter-doc-errors:target ~ main .card:not(.has-doc-error) {
460
+ display: none;
461
+ }
462
+
463
+ #filter-docs:target ~ main .card:has(> .tg-docs),
464
+ #filter-docs:target ~ main .card.is-doc {
465
+ display: block;
466
+ }
467
+
468
+ #filter-docs:target ~ main .card:not(:has(> .tg-docs)):not(.is-doc) {
469
+ display: none;
470
+ }
471
+
472
+ #filter-all:target ~ main .card {
473
+ display: block;
474
+ }
475
+
476
+ /* In errors view, hide standalone component-error cards in the regular grid (they will appear in groups) */
477
+ #filter-errors:target ~ main .grid .card.has-error {
478
+ display: none;
479
+ }
480
+
481
+ /* Show grouped section only in errors view */
482
+ #filter-errors:target ~ main .error-groups {
483
+ display: block;
484
+ }
485
+
486
+ /* Section titles */
487
+ .section-title {
488
+ font-size: 16px;
489
+ font-weight: 600;
490
+ color: var(--muted);
491
+ margin: 24px 0 12px;
492
+ padding-bottom: 8px;
493
+ border-bottom: 1px solid var(--border);
494
+ }
495
+ .section-title:first-child {
496
+ margin-top: 0;
497
+ }
498
+
499
+ /* When a toggle is checked, show the corresponding panel */
500
+ .card > .tg-err:checked ~ .panels .panel-err {
501
+ display: grid;
502
+ }
503
+
504
+ .card > .tg-info:checked ~ .panels .panel-info {
505
+ display: grid;
506
+ }
507
+
508
+ .card > .tg-stories:checked ~ .panels .panel-stories {
509
+ display: grid;
510
+ }
511
+
512
+ .card > .tg-docs:checked ~ .panels .panel-docs {
513
+ display: grid;
514
+ }
515
+
516
+ .card > .tg-subcomponents:checked ~ .panels .panel-subcomponents {
517
+ display: grid;
518
+ }
519
+
520
+ .card > .tg-content:checked ~ .panels .panel-content {
521
+ display: grid;
522
+ }
523
+
524
+ /* Add vertical spacing around panels only when any panel is visible */
525
+ .card > .tg-err:checked ~ .panels,
526
+ .card > .tg-info:checked ~ .panels,
527
+ .card > .tg-stories:checked ~ .panels,
528
+ .card > .tg-docs:checked ~ .panels,
529
+ .card > .tg-subcomponents:checked ~ .panels,
530
+ .card > .tg-content:checked ~ .panels,
531
+ .card > .tg-props:checked ~ .panels {
532
+ margin: 10px 0;
533
+ }
534
+
535
+ /* Optional: a subtle 1px ring on the active badge, using :has() if available */
536
+ @supports selector(.card:has(.tg-err:checked)) {
537
+ .card:has(.tg-err:checked) label[for$='-err'],
538
+ .card:has(.tg-info:checked) label[for$='-info'],
539
+ .card:has(.tg-stories:checked) label[for$='-stories'],
540
+ .card:has(.tg-docs:checked) label[for$='-docs'],
541
+ .card:has(.tg-subcomponents:checked) label[for$='-subcomponents'],
542
+ .card:has(.tg-content:checked) label[for$='-content'],
543
+ .card:has(.tg-props:checked) label[for$='-props'] {
544
+ box-shadow: 0 0 0 1px currentColor;
545
+ border-color: currentColor;
546
+ }
547
+ }
548
+
549
+ /* Wrap long lines in code blocks at ~120 characters */
550
+ pre, code {
551
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
552
+ }
553
+ pre {
554
+ white-space: pre-wrap;
555
+ overflow-wrap: anywhere;
556
+ word-break: break-word;
557
+ overflow-x: auto; /* fallback for extremely long tokens */
558
+ margin: 8px 0 0;
559
+ }
560
+ pre > code {
561
+ display: block;
562
+ white-space: inherit;
563
+ overflow-wrap: inherit;
564
+ word-break: inherit;
565
+ inline-size: min(100%, 120ch);
566
+ }
567
+
568
+ /* MDX content container for docs */
569
+ .mdx-content {
570
+ background: #0f131b;
571
+ border: 1px solid var(--border);
572
+ border-radius: 10px;
573
+ padding: 12px;
574
+ max-height: 400px;
575
+ overflow-y: auto;
576
+ margin-top: 8px;
577
+ }
578
+ </style>
579
+ </head>
580
+ <body>
581
+ <!-- Hidden targets for the top-level filters -->
582
+ <span id="filter-all"></span>
583
+ <span id="filter-errors"></span>
584
+ <span id="filter-infos"></span>
585
+ <span id="filter-story-errors"></span>
586
+ <span id="filter-doc-errors"></span>
587
+ <span id="filter-docs"></span>
588
+ <header>
589
+ <div class="wrap">
590
+ <h1>Manifest Debugger</h1>
591
+ <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">44 components ok</span><a class="filter-pill info" data-k="infos" href="#filter-infos">43/44 infos</a><span class="filter-pill ok" aria-disabled="true">47 stories ok</span></div>
592
+ </div>
593
+ </header>
594
+ <main>
595
+ <div class="wrap">
596
+ <div class="note info" style="margin-bottom: 16px;">
597
+ <strong>Tip:</strong> You are using <code>react-docgen</code> (the default). Generation took <strong>2.5s</strong>. For higher quality prop types, consider switching to <code>react-docgen-typescript</code> in your <code>main.ts</code>:
598
+ <pre><code>typescript: {
599
+ reactDocgen: 'react-docgen-typescript',
600
+ }</code></pre>
601
+ Note: <code>react-docgen-typescript</code> can be slower. If performance is acceptable for your project, it generally produces better results.
602
+ <a href="https://storybook.js.org/docs/api/main-config/main-config-typescript#reactdocgen" target="_blank">Learn more</a>
603
+ </div>
604
+ <h2 class="section-title">Components</h2>
605
+ <div class="grid" role="list">
606
+
607
+ <article
608
+ class="card
609
+ no-error
610
+ no-info
611
+ no-story-error
612
+ no-doc-error"
613
+ role="listitem"
614
+ aria-label="Alert">
615
+ <div class="head">
616
+ <div class="title">
617
+ <h2><span class="status-dot dot-ok"></span> Alert</h2>
618
+ <div class="badges">
619
+
620
+
621
+ <label for="c-0-example-alert-stories" class="badge ok as-toggle">1 story</label>
622
+
623
+
624
+ </div>
625
+ </div>
626
+ <div class="meta" title="./src/stories/Alert.stories.jsx">example-alert · ./src/stories/Alert.stories.jsx</div>
627
+
628
+ <div class="hint">Alert component wrapper around MUI Paper with severity styling.</div>
629
+ <div class="kv"><span class="chip">param: {AlertProps} props </span><span class="chip">param: {AlertRef} ref </span><span class="chip">returns: {JSX.Element} </span></div>
630
+ </div>
631
+
632
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
633
+
634
+
635
+ <input id="c-0-example-alert-stories" class="tg tg-stories" type="checkbox" hidden />
636
+
637
+
638
+
639
+
640
+ <div class="panels">
641
+
642
+
643
+
644
+
645
+ <div class="panel panel-stories">
646
+
647
+
648
+
649
+ <div class="note ok">
650
+ <div class="row">
651
+ <span class="ex-name">Imports</span>
652
+ </div>
653
+ <pre><code>import { Alert } from "@sis-cc/dotstatsuite-visions";</code></pre>
654
+ </div>
655
+
656
+
657
+ <div class="note ok">
658
+ <div class="row">
659
+ <span class="ex-name">Controlled</span>
660
+ <span class="badge ok">story ok</span>
661
+ </div>
662
+
663
+
664
+ <pre><code>const Controlled = () =&gt; &lt;ControlledAlert /&gt;;</code></pre>
665
+ </div>
666
+ </div>
667
+
668
+
669
+ </div>
670
+ </article>
671
+ <article
672
+ class="card
673
+ no-error
674
+ has-info
675
+ no-story-error
676
+ no-doc-error"
677
+ role="listitem"
678
+ aria-label="ApiQueries">
679
+ <div class="head">
680
+ <div class="title">
681
+ <h2><span class="status-dot dot-ok"></span> ApiQueries</h2>
682
+ <div class="badges">
683
+ <label for="c-1-example-apiqueries-props" class="badge ok as-toggle">2 prop types</label>
684
+ <label for="c-1-example-apiqueries-info" class="badge info as-toggle">1 info</label>
685
+ <label for="c-1-example-apiqueries-stories" class="badge ok as-toggle">1 story</label>
686
+
687
+
688
+ </div>
689
+ </div>
690
+ <div class="meta" title="./src/stories/ApiQueries.stories.jsx">example-apiqueries · ./src/stories/ApiQueries.stories.jsx</div>
691
+
692
+
693
+
694
+ </div>
695
+
696
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
697
+
698
+ <input id="c-1-example-apiqueries-info" class="tg tg-info" type="checkbox" hidden />
699
+ <input id="c-1-example-apiqueries-stories" class="tg tg-stories" type="checkbox" hidden />
700
+
701
+
702
+ <input id="c-1-example-apiqueries-props" class="tg tg-props" type="checkbox" hidden />
703
+
704
+ <div class="panels">
705
+
706
+
707
+ <div class="panel panel-info">
708
+
709
+ <div class="note info">
710
+ <div class="note-title">Info</div>
711
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
712
+ </div>
713
+ </div>
714
+
715
+ <div class="panel panel-props">
716
+ <div class="note ok">
717
+ <div class="row">
718
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
719
+ <span class="badge ok">2 prop types</span>
720
+ </div>
721
+ <pre><code>Component: src/ApiQueries/ApiQueries.jsx::ApiQueries</code></pre>
722
+ <pre><code>Props:</code></pre>
723
+ <pre><code>delay?: any = 1000
724
+
725
+ queries?: any = []</code></pre>
726
+ </div>
727
+ </div>
728
+
729
+ <div class="panel panel-stories">
730
+
731
+
732
+
733
+ <div class="note ok">
734
+ <div class="row">
735
+ <span class="ex-name">Imports</span>
736
+ </div>
737
+ <pre><code>import { ApiQueries } from "@sis-cc/dotstatsuite-visions";</code></pre>
738
+ </div>
739
+
740
+
741
+ <div class="note ok">
742
+ <div class="row">
743
+ <span class="ex-name">Default</span>
744
+ <span class="badge ok">story ok</span>
745
+ </div>
746
+
747
+
748
+ <pre><code>const Default = () =&gt; &lt;ApiQueries /&gt;;</code></pre>
749
+ </div>
750
+ </div>
751
+
752
+
753
+ </div>
754
+ </article>
755
+ <article
756
+ class="card
757
+ no-error
758
+ has-info
759
+ no-story-error
760
+ no-doc-error"
761
+ role="listitem"
762
+ aria-label="AuthDialog">
763
+ <div class="head">
764
+ <div class="title">
765
+ <h2><span class="status-dot dot-ok"></span> AuthDialog</h2>
766
+ <div class="badges">
767
+
768
+ <label for="c-2-example-authdialog-info" class="badge info as-toggle">1 info</label>
769
+ <label for="c-2-example-authdialog-stories" class="badge ok as-toggle">1 story</label>
770
+
771
+
772
+ </div>
773
+ </div>
774
+ <div class="meta" title="./src/stories/AuthDialog.stories.jsx">example-authdialog · ./src/stories/AuthDialog.stories.jsx</div>
775
+
776
+
777
+
778
+ </div>
779
+
780
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
781
+
782
+ <input id="c-2-example-authdialog-info" class="tg tg-info" type="checkbox" hidden />
783
+ <input id="c-2-example-authdialog-stories" class="tg tg-stories" type="checkbox" hidden />
784
+
785
+
786
+
787
+
788
+ <div class="panels">
789
+
790
+
791
+ <div class="panel panel-info">
792
+
793
+ <div class="note info">
794
+ <div class="note-title">Info</div>
795
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
796
+ </div>
797
+ </div>
798
+
799
+
800
+ <div class="panel panel-stories">
801
+
802
+
803
+
804
+ <div class="note ok">
805
+ <div class="row">
806
+ <span class="ex-name">Imports</span>
807
+ </div>
808
+ <pre><code>import { AuthDialog } from "@sis-cc/dotstatsuite-visions";</code></pre>
809
+ </div>
810
+
811
+
812
+ <div class="note ok">
813
+ <div class="row">
814
+ <span class="ex-name">Default</span>
815
+ <span class="badge ok">story ok</span>
816
+ </div>
817
+
818
+
819
+ <pre><code>const Default = () =&gt; &lt;AuthDialog /&gt;;</code></pre>
820
+ </div>
821
+ </div>
822
+
823
+
824
+ </div>
825
+ </article>
826
+ <article
827
+ class="card
828
+ no-error
829
+ has-info
830
+ no-story-error
831
+ no-doc-error"
832
+ role="listitem"
833
+ aria-label="Breadcrumbs">
834
+ <div class="head">
835
+ <div class="title">
836
+ <h2><span class="status-dot dot-ok"></span> Breadcrumbs</h2>
837
+ <div class="badges">
838
+ <label for="c-3-example-breadcrumbs-props" class="badge ok as-toggle">1 prop type</label>
839
+ <label for="c-3-example-breadcrumbs-info" class="badge info as-toggle">1 info</label>
840
+ <label for="c-3-example-breadcrumbs-stories" class="badge ok as-toggle">1 story</label>
841
+
842
+
843
+ </div>
844
+ </div>
845
+ <div class="meta" title="./src/stories/Breadcrumbs.stories.jsx">example-breadcrumbs · ./src/stories/Breadcrumbs.stories.jsx</div>
846
+
847
+
848
+
849
+ </div>
850
+
851
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
852
+
853
+ <input id="c-3-example-breadcrumbs-info" class="tg tg-info" type="checkbox" hidden />
854
+ <input id="c-3-example-breadcrumbs-stories" class="tg tg-stories" type="checkbox" hidden />
855
+
856
+
857
+ <input id="c-3-example-breadcrumbs-props" class="tg tg-props" type="checkbox" hidden />
858
+
859
+ <div class="panels">
860
+
861
+
862
+ <div class="panel panel-info">
863
+
864
+ <div class="note info">
865
+ <div class="note-title">Info</div>
866
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
867
+ </div>
868
+ </div>
869
+
870
+ <div class="panel panel-props">
871
+ <div class="note ok">
872
+ <div class="row">
873
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
874
+ <span class="badge ok">1 prop type</span>
875
+ </div>
876
+ <pre><code>Component: src/Breadcrumbs/Breadcrumbs.jsx::Breadcrumbs</code></pre>
877
+ <pre><code>Props:</code></pre>
878
+ <pre><code>items?: any = []</code></pre>
879
+ </div>
880
+ </div>
881
+
882
+ <div class="panel panel-stories">
883
+
884
+
885
+
886
+ <div class="note ok">
887
+ <div class="row">
888
+ <span class="ex-name">Imports</span>
889
+ </div>
890
+ <pre><code>import { Breadcrumbs } from "@sis-cc/dotstatsuite-visions";</code></pre>
891
+ </div>
892
+
893
+
894
+ <div class="note ok">
895
+ <div class="row">
896
+ <span class="ex-name">Default</span>
897
+ <span class="badge ok">story ok</span>
898
+ </div>
899
+
900
+
901
+ <pre><code>const Default = () =&gt; &lt;Breadcrumbs /&gt;;</code></pre>
902
+ </div>
903
+ </div>
904
+
905
+
906
+ </div>
907
+ </article>
908
+ <article
909
+ class="card
910
+ no-error
911
+ has-info
912
+ no-story-error
913
+ no-doc-error"
914
+ role="listitem"
915
+ aria-label="Button">
916
+ <div class="head">
917
+ <div class="title">
918
+ <h2><span class="status-dot dot-ok"></span> Button</h2>
919
+ <div class="badges">
920
+ <label for="c-4-example-button-props" class="badge ok as-toggle">1 prop type</label>
921
+ <label for="c-4-example-button-info" class="badge info as-toggle">1 info</label>
922
+ <label for="c-4-example-button-stories" class="badge ok as-toggle">4 stories</label>
923
+
924
+
925
+ </div>
926
+ </div>
927
+ <div class="meta" title="./src/stories/Button.stories.jsx">example-button · ./src/stories/Button.stories.jsx</div>
928
+
929
+
930
+
931
+ </div>
932
+
933
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
934
+
935
+ <input id="c-4-example-button-info" class="tg tg-info" type="checkbox" hidden />
936
+ <input id="c-4-example-button-stories" class="tg tg-stories" type="checkbox" hidden />
937
+
938
+
939
+ <input id="c-4-example-button-props" class="tg tg-props" type="checkbox" hidden />
940
+
941
+ <div class="panels">
942
+
943
+
944
+ <div class="panel panel-info">
945
+
946
+ <div class="note info">
947
+ <div class="note-title">Info</div>
948
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
949
+ </div>
950
+ </div>
951
+
952
+ <div class="panel panel-props">
953
+ <div class="note ok">
954
+ <div class="row">
955
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
956
+ <span class="badge ok">1 prop type</span>
957
+ </div>
958
+ <pre><code>Component: src/Button/Button.jsx::Button</code></pre>
959
+ <pre><code>Props:</code></pre>
960
+ <pre><code>alternative?: any = &#39;default&#39;</code></pre>
961
+ </div>
962
+ </div>
963
+
964
+ <div class="panel panel-stories">
965
+
966
+
967
+
968
+ <div class="note ok">
969
+ <div class="row">
970
+ <span class="ex-name">Imports</span>
971
+ </div>
972
+ <pre><code>import { Button } from "@sis-cc/dotstatsuite-visions";</code></pre>
973
+ </div>
974
+
975
+
976
+ <div class="note ok">
977
+ <div class="row">
978
+ <span class="ex-name">Primary</span>
979
+ <span class="badge ok">story ok</span>
980
+ </div>
981
+
982
+
983
+ <pre><code>const Primary = () =&gt; &lt;Button onClick={fn()} primary label=&quot;Button&quot; /&gt;;</code></pre>
984
+ </div>
985
+ <div class="note ok">
986
+ <div class="row">
987
+ <span class="ex-name">Secondary</span>
988
+ <span class="badge ok">story ok</span>
989
+ </div>
990
+
991
+
992
+ <pre><code>const Secondary = () =&gt; &lt;Button onClick={fn()} label=&quot;Button&quot; /&gt;;</code></pre>
993
+ </div>
994
+ <div class="note ok">
995
+ <div class="row">
996
+ <span class="ex-name">Large</span>
997
+ <span class="badge ok">story ok</span>
998
+ </div>
999
+
1000
+
1001
+ <pre><code>const Large = () =&gt; &lt;Button onClick={fn()} size=&quot;large&quot; label=&quot;Button&quot; /&gt;;</code></pre>
1002
+ </div>
1003
+ <div class="note ok">
1004
+ <div class="row">
1005
+ <span class="ex-name">Small</span>
1006
+ <span class="badge ok">story ok</span>
1007
+ </div>
1008
+
1009
+
1010
+ <pre><code>const Small = () =&gt; &lt;Button onClick={fn()} size=&quot;small&quot; label=&quot;Button&quot; /&gt;;</code></pre>
1011
+ </div>
1012
+ </div>
1013
+
1014
+
1015
+ </div>
1016
+ </article>
1017
+ <article
1018
+ class="card
1019
+ no-error
1020
+ has-info
1021
+ no-story-error
1022
+ no-doc-error"
1023
+ role="listitem"
1024
+ aria-label="ChartsConfig">
1025
+ <div class="head">
1026
+ <div class="title">
1027
+ <h2><span class="status-dot dot-ok"></span> ChartsConfig</h2>
1028
+ <div class="badges">
1029
+ <label for="c-5-example-chartsconfig-props" class="badge ok as-toggle">2 prop types</label>
1030
+ <label for="c-5-example-chartsconfig-info" class="badge info as-toggle">1 info</label>
1031
+ <label for="c-5-example-chartsconfig-stories" class="badge ok as-toggle">1 story</label>
1032
+
1033
+
1034
+ </div>
1035
+ </div>
1036
+ <div class="meta" title="./src/stories/ChartsConfig.stories.jsx">example-chartsconfig · ./src/stories/ChartsConfig.stories.jsx</div>
1037
+
1038
+
1039
+
1040
+ </div>
1041
+
1042
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
1043
+
1044
+ <input id="c-5-example-chartsconfig-info" class="tg tg-info" type="checkbox" hidden />
1045
+ <input id="c-5-example-chartsconfig-stories" class="tg tg-stories" type="checkbox" hidden />
1046
+
1047
+
1048
+ <input id="c-5-example-chartsconfig-props" class="tg tg-props" type="checkbox" hidden />
1049
+
1050
+ <div class="panels">
1051
+
1052
+
1053
+ <div class="panel panel-info">
1054
+
1055
+ <div class="note info">
1056
+ <div class="note-title">Info</div>
1057
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
1058
+ </div>
1059
+ </div>
1060
+
1061
+ <div class="panel panel-props">
1062
+ <div class="note ok">
1063
+ <div class="row">
1064
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
1065
+ <span class="badge ok">2 prop types</span>
1066
+ </div>
1067
+ <pre><code>Component: src/ChartsConfig/ChartsConfig.jsx::ChartsConfig</code></pre>
1068
+ <pre><code>Props:</code></pre>
1069
+ <pre><code>labels?: any = {}
1070
+
1071
+ properties?: any = {}</code></pre>
1072
+ </div>
1073
+ </div>
1074
+
1075
+ <div class="panel panel-stories">
1076
+
1077
+
1078
+
1079
+ <div class="note ok">
1080
+ <div class="row">
1081
+ <span class="ex-name">Imports</span>
1082
+ </div>
1083
+ <pre><code>import { ChartsConfig } from "@sis-cc/dotstatsuite-visions";</code></pre>
1084
+ </div>
1085
+
1086
+
1087
+ <div class="note ok">
1088
+ <div class="row">
1089
+ <span class="ex-name">Default</span>
1090
+ <span class="badge ok">story ok</span>
1091
+ </div>
1092
+
1093
+
1094
+ <pre><code>const Default = () =&gt; &lt;ChartsConfig /&gt;;</code></pre>
1095
+ </div>
1096
+ </div>
1097
+
1098
+
1099
+ </div>
1100
+ </article>
1101
+ <article
1102
+ class="card
1103
+ no-error
1104
+ has-info
1105
+ no-story-error
1106
+ no-doc-error"
1107
+ role="listitem"
1108
+ aria-label="CollapseButtons">
1109
+ <div class="head">
1110
+ <div class="title">
1111
+ <h2><span class="status-dot dot-ok"></span> CollapseButtons</h2>
1112
+ <div class="badges">
1113
+ <label for="c-6-example-collapsebuttons-props" class="badge ok as-toggle">8 prop types</label>
1114
+ <label for="c-6-example-collapsebuttons-info" class="badge info as-toggle">1 info</label>
1115
+ <label for="c-6-example-collapsebuttons-stories" class="badge ok as-toggle">1 story</label>
1116
+
1117
+
1118
+ </div>
1119
+ </div>
1120
+ <div class="meta" title="./src/stories/CollapseButtons.stories.jsx">example-collapsebuttons · ./src/stories/CollapseButtons.stories.jsx</div>
1121
+
1122
+
1123
+
1124
+ </div>
1125
+
1126
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
1127
+
1128
+ <input id="c-6-example-collapsebuttons-info" class="tg tg-info" type="checkbox" hidden />
1129
+ <input id="c-6-example-collapsebuttons-stories" class="tg tg-stories" type="checkbox" hidden />
1130
+
1131
+
1132
+ <input id="c-6-example-collapsebuttons-props" class="tg tg-props" type="checkbox" hidden />
1133
+
1134
+ <div class="panels">
1135
+
1136
+
1137
+ <div class="panel panel-info">
1138
+
1139
+ <div class="note info">
1140
+ <div class="note-title">Info</div>
1141
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
1142
+ </div>
1143
+ </div>
1144
+
1145
+ <div class="panel panel-props">
1146
+ <div class="note ok">
1147
+ <div class="row">
1148
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
1149
+ <span class="badge ok">8 prop types</span>
1150
+ </div>
1151
+ <pre><code>Component: src/CollapseButtons/CollapseButtons.jsx::CollapseButtons</code></pre>
1152
+ <pre><code>Props:</code></pre>
1153
+ <pre><code>action?: any = () =&gt; {}
1154
+
1155
+ breakpoint?: any = (theme) =&gt; theme.breakpoints.down(&#39;md&#39;)
1156
+
1157
+ gridButtonsProps?: any = {}
1158
+
1159
+ items?: any = []
1160
+
1161
+ labelAccessor?: any = (obj) =&gt; obj?.label
1162
+
1163
+ nbColumns?: any = 3
1164
+
1165
+ testId?: any = &#39;collapseButton&#39;
1166
+
1167
+ textTransform?: any = &#39;none&#39;</code></pre>
1168
+ </div>
1169
+ </div>
1170
+
1171
+ <div class="panel panel-stories">
1172
+
1173
+
1174
+
1175
+ <div class="note ok">
1176
+ <div class="row">
1177
+ <span class="ex-name">Imports</span>
1178
+ </div>
1179
+ <pre><code>import { CollapseButtons } from "@sis-cc/dotstatsuite-visions";</code></pre>
1180
+ </div>
1181
+
1182
+
1183
+ <div class="note ok">
1184
+ <div class="row">
1185
+ <span class="ex-name">Default</span>
1186
+ <span class="badge ok">story ok</span>
1187
+ </div>
1188
+
1189
+
1190
+ <pre><code>const Default = () =&gt; &lt;CollapseButtons /&gt;;</code></pre>
1191
+ </div>
1192
+ </div>
1193
+
1194
+
1195
+ </div>
1196
+ </article>
1197
+ <article
1198
+ class="card
1199
+ no-error
1200
+ has-info
1201
+ no-story-error
1202
+ no-doc-error"
1203
+ role="listitem"
1204
+ aria-label="CollapsibleTree">
1205
+ <div class="head">
1206
+ <div class="title">
1207
+ <h2><span class="status-dot dot-ok"></span> CollapsibleTree</h2>
1208
+ <div class="badges">
1209
+ <label for="c-7-example-collapsibletree-props" class="badge ok as-toggle">3 prop types</label>
1210
+ <label for="c-7-example-collapsibletree-info" class="badge info as-toggle">1 info</label>
1211
+ <label for="c-7-example-collapsibletree-stories" class="badge ok as-toggle">1 story</label>
1212
+
1213
+
1214
+ </div>
1215
+ </div>
1216
+ <div class="meta" title="./src/stories/CollapsibleTree.stories.jsx">example-collapsibletree · ./src/stories/CollapsibleTree.stories.jsx</div>
1217
+
1218
+
1219
+
1220
+ </div>
1221
+
1222
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
1223
+
1224
+ <input id="c-7-example-collapsibletree-info" class="tg tg-info" type="checkbox" hidden />
1225
+ <input id="c-7-example-collapsibletree-stories" class="tg tg-stories" type="checkbox" hidden />
1226
+
1227
+
1228
+ <input id="c-7-example-collapsibletree-props" class="tg tg-props" type="checkbox" hidden />
1229
+
1230
+ <div class="panels">
1231
+
1232
+
1233
+ <div class="panel panel-info">
1234
+
1235
+ <div class="note info">
1236
+ <div class="note-title">Info</div>
1237
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
1238
+ </div>
1239
+ </div>
1240
+
1241
+ <div class="panel panel-props">
1242
+ <div class="note ok">
1243
+ <div class="row">
1244
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
1245
+ <span class="badge ok">3 prop types</span>
1246
+ </div>
1247
+ <pre><code>Component: src/CollapsibleTree/CollapsibleTree.jsx::CollapsibleTree</code></pre>
1248
+ <pre><code>Props:</code></pre>
1249
+ <pre><code>data?: any = []
1250
+
1251
+ defaultDepthLevel?: any = 1
1252
+
1253
+ testId?: any = &#39;collapsible-tree&#39;</code></pre>
1254
+ </div>
1255
+ </div>
1256
+
1257
+ <div class="panel panel-stories">
1258
+
1259
+
1260
+
1261
+ <div class="note ok">
1262
+ <div class="row">
1263
+ <span class="ex-name">Imports</span>
1264
+ </div>
1265
+ <pre><code>import { CollapsibleTree } from "@sis-cc/dotstatsuite-visions";</code></pre>
1266
+ </div>
1267
+
1268
+
1269
+ <div class="note ok">
1270
+ <div class="row">
1271
+ <span class="ex-name">Default</span>
1272
+ <span class="badge ok">story ok</span>
1273
+ </div>
1274
+
1275
+
1276
+ <pre><code>const Default = () =&gt; &lt;CollapsibleTree /&gt;;</code></pre>
1277
+ </div>
1278
+ </div>
1279
+
1280
+
1281
+ </div>
1282
+ </article>
1283
+ <article
1284
+ class="card
1285
+ no-error
1286
+ has-info
1287
+ no-story-error
1288
+ no-doc-error"
1289
+ role="listitem"
1290
+ aria-label="Contact">
1291
+ <div class="head">
1292
+ <div class="title">
1293
+ <h2><span class="status-dot dot-ok"></span> Contact</h2>
1294
+ <div class="badges">
1295
+ <label for="c-8-example-contact-props" class="badge ok as-toggle">11 prop types</label>
1296
+ <label for="c-8-example-contact-info" class="badge info as-toggle">1 info</label>
1297
+ <label for="c-8-example-contact-stories" class="badge ok as-toggle">1 story</label>
1298
+
1299
+
1300
+ </div>
1301
+ </div>
1302
+ <div class="meta" title="./src/stories/Contact.stories.jsx">example-contact · ./src/stories/Contact.stories.jsx</div>
1303
+
1304
+
1305
+
1306
+ </div>
1307
+
1308
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
1309
+
1310
+ <input id="c-8-example-contact-info" class="tg tg-info" type="checkbox" hidden />
1311
+ <input id="c-8-example-contact-stories" class="tg tg-stories" type="checkbox" hidden />
1312
+
1313
+
1314
+ <input id="c-8-example-contact-props" class="tg tg-props" type="checkbox" hidden />
1315
+
1316
+ <div class="panels">
1317
+
1318
+
1319
+ <div class="panel panel-info">
1320
+
1321
+ <div class="note info">
1322
+ <div class="note-title">Info</div>
1323
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
1324
+ </div>
1325
+ </div>
1326
+
1327
+ <div class="panel panel-props">
1328
+ <div class="note ok">
1329
+ <div class="row">
1330
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
1331
+ <span class="badge ok">11 prop types</span>
1332
+ </div>
1333
+ <pre><code>Component: src/Contact/Contact.jsx::Contact</code></pre>
1334
+ <pre><code>Props:</code></pre>
1335
+ <pre><code>children?: node
1336
+
1337
+ defaultEmail?: string
1338
+
1339
+ defaultFullName?: string
1340
+
1341
+ defaultMode?: string = &#39;question&#39;
1342
+
1343
+ isAllContact?: any = false
1344
+
1345
+ isSubmitDisable?: bool
1346
+
1347
+ labels?: shape
1348
+
1349
+ lang?: string
1350
+
1351
+ modes?: array
1352
+
1353
+ send?: func
1354
+
1355
+ theme?: string</code></pre>
1356
+ </div>
1357
+ </div>
1358
+
1359
+ <div class="panel panel-stories">
1360
+
1361
+
1362
+
1363
+ <div class="note ok">
1364
+ <div class="row">
1365
+ <span class="ex-name">Imports</span>
1366
+ </div>
1367
+ <pre><code>import { Contact } from "@sis-cc/dotstatsuite-visions";</code></pre>
1368
+ </div>
1369
+
1370
+
1371
+ <div class="note ok">
1372
+ <div class="row">
1373
+ <span class="ex-name">Default</span>
1374
+ <span class="badge ok">story ok</span>
1375
+ </div>
1376
+
1377
+
1378
+ <pre><code>const Default = () =&gt; &lt;Contact /&gt;;</code></pre>
1379
+ </div>
1380
+ </div>
1381
+
1382
+
1383
+ </div>
1384
+ </article>
1385
+ <article
1386
+ class="card
1387
+ no-error
1388
+ has-info
1389
+ no-story-error
1390
+ no-doc-error"
1391
+ role="listitem"
1392
+ aria-label="CustomChip">
1393
+ <div class="head">
1394
+ <div class="title">
1395
+ <h2><span class="status-dot dot-ok"></span> CustomChip</h2>
1396
+ <div class="badges">
1397
+ <label for="c-9-example-chips-props" class="badge ok as-toggle">14 prop types</label>
1398
+ <label for="c-9-example-chips-info" class="badge info as-toggle">1 info</label>
1399
+ <label for="c-9-example-chips-stories" class="badge ok as-toggle">1 story</label>
1400
+
1401
+
1402
+ </div>
1403
+ </div>
1404
+ <div class="meta" title="./src/stories/Chips.stories.jsx">example-chips · ./src/stories/Chips.stories.jsx</div>
1405
+
1406
+
1407
+
1408
+ </div>
1409
+
1410
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
1411
+
1412
+ <input id="c-9-example-chips-info" class="tg tg-info" type="checkbox" hidden />
1413
+ <input id="c-9-example-chips-stories" class="tg tg-stories" type="checkbox" hidden />
1414
+
1415
+
1416
+ <input id="c-9-example-chips-props" class="tg tg-props" type="checkbox" hidden />
1417
+
1418
+ <div class="panels">
1419
+
1420
+
1421
+ <div class="panel panel-info">
1422
+
1423
+ <div class="note info">
1424
+ <div class="note-title">Info</div>
1425
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
1426
+ </div>
1427
+ </div>
1428
+
1429
+ <div class="panel panel-props">
1430
+ <div class="note ok">
1431
+ <div class="row">
1432
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
1433
+ <span class="badge ok">14 prop types</span>
1434
+ </div>
1435
+ <pre><code>Component: src/Chips/CustomChip.jsx::default</code></pre>
1436
+ <pre><code>Props:</code></pre>
1437
+ <pre><code>ariaLabel?: union = &#39;delete&#39;
1438
+
1439
+ ariaLabelTooltip?: string
1440
+
1441
+ chipClasses?: string
1442
+
1443
+ deprecated?: array
1444
+
1445
+ iconClasses?: string
1446
+
1447
+ id?: string
1448
+
1449
+ items?: array = []
1450
+
1451
+ label?: union
1452
+
1453
+ labelClasses?: string
1454
+
1455
+ labelRenderer?: func = R.prop(&#39;label&#39;)
1456
+
1457
+ onDelete?: func
1458
+
1459
+ parentId?: string
1460
+
1461
+ renderer?: func
1462
+
1463
+ testId?: string = &#39;deleteChip-test-id&#39;</code></pre>
1464
+ </div>
1465
+ </div>
1466
+
1467
+ <div class="panel panel-stories">
1468
+
1469
+
1470
+
1471
+ <div class="note ok">
1472
+ <div class="row">
1473
+ <span class="ex-name">Imports</span>
1474
+ </div>
1475
+ <pre><code>import { CustomChip } from "@sis-cc/dotstatsuite-visions";</code></pre>
1476
+ </div>
1477
+
1478
+
1479
+ <div class="note ok">
1480
+ <div class="row">
1481
+ <span class="ex-name">Default</span>
1482
+ <span class="badge ok">story ok</span>
1483
+ </div>
1484
+
1485
+
1486
+ <pre><code>const Default = () =&gt; &lt;CustomChip /&gt;;</code></pre>
1487
+ </div>
1488
+ </div>
1489
+
1490
+
1491
+ </div>
1492
+ </article>
1493
+ <article
1494
+ class="card
1495
+ no-error
1496
+ has-info
1497
+ no-story-error
1498
+ no-doc-error"
1499
+ role="listitem"
1500
+ aria-label="DataEdit">
1501
+ <div class="head">
1502
+ <div class="title">
1503
+ <h2><span class="status-dot dot-ok"></span> DataEdit</h2>
1504
+ <div class="badges">
1505
+
1506
+ <label for="c-10-example-dataedit-info" class="badge info as-toggle">1 info</label>
1507
+ <label for="c-10-example-dataedit-stories" class="badge ok as-toggle">1 story</label>
1508
+
1509
+
1510
+ </div>
1511
+ </div>
1512
+ <div class="meta" title="./src/stories/DataEdit.stories.jsx">example-dataedit · ./src/stories/DataEdit.stories.jsx</div>
1513
+
1514
+
1515
+
1516
+ </div>
1517
+
1518
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
1519
+
1520
+ <input id="c-10-example-dataedit-info" class="tg tg-info" type="checkbox" hidden />
1521
+ <input id="c-10-example-dataedit-stories" class="tg tg-stories" type="checkbox" hidden />
1522
+
1523
+
1524
+
1525
+
1526
+ <div class="panels">
1527
+
1528
+
1529
+ <div class="panel panel-info">
1530
+
1531
+ <div class="note info">
1532
+ <div class="note-title">Info</div>
1533
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
1534
+ </div>
1535
+ </div>
1536
+
1537
+
1538
+ <div class="panel panel-stories">
1539
+
1540
+
1541
+
1542
+ <div class="note ok">
1543
+ <div class="row">
1544
+ <span class="ex-name">Imports</span>
1545
+ </div>
1546
+ <pre><code>import { DataEdit } from "@sis-cc/dotstatsuite-visions";</code></pre>
1547
+ </div>
1548
+
1549
+
1550
+ <div class="note ok">
1551
+ <div class="row">
1552
+ <span class="ex-name">Default</span>
1553
+ <span class="badge ok">story ok</span>
1554
+ </div>
1555
+
1556
+
1557
+ <pre><code>const Default = () =&gt; &lt;DataEdit /&gt;;</code></pre>
1558
+ </div>
1559
+ </div>
1560
+
1561
+
1562
+ </div>
1563
+ </article>
1564
+ <article
1565
+ class="card
1566
+ no-error
1567
+ has-info
1568
+ no-story-error
1569
+ no-doc-error"
1570
+ role="listitem"
1571
+ aria-label="Dataflow">
1572
+ <div class="head">
1573
+ <div class="title">
1574
+ <h2><span class="status-dot dot-ok"></span> Dataflow</h2>
1575
+ <div class="badges">
1576
+ <label for="c-11-example-dataflow-props" class="badge ok as-toggle">4 prop types</label>
1577
+ <label for="c-11-example-dataflow-info" class="badge info as-toggle">1 info</label>
1578
+ <label for="c-11-example-dataflow-stories" class="badge ok as-toggle">1 story</label>
1579
+
1580
+
1581
+ </div>
1582
+ </div>
1583
+ <div class="meta" title="./src/stories/Dataflow.stories.jsx">example-dataflow · ./src/stories/Dataflow.stories.jsx</div>
1584
+
1585
+
1586
+
1587
+ </div>
1588
+
1589
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
1590
+
1591
+ <input id="c-11-example-dataflow-info" class="tg tg-info" type="checkbox" hidden />
1592
+ <input id="c-11-example-dataflow-stories" class="tg tg-stories" type="checkbox" hidden />
1593
+
1594
+
1595
+ <input id="c-11-example-dataflow-props" class="tg tg-props" type="checkbox" hidden />
1596
+
1597
+ <div class="panels">
1598
+
1599
+
1600
+ <div class="panel panel-info">
1601
+
1602
+ <div class="note info">
1603
+ <div class="note-title">Info</div>
1604
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
1605
+ </div>
1606
+ </div>
1607
+
1608
+ <div class="panel panel-props">
1609
+ <div class="note ok">
1610
+ <div class="row">
1611
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
1612
+ <span class="badge ok">4 prop types</span>
1613
+ </div>
1614
+ <pre><code>Component: src/Dataflow/Dataflow.jsx</code></pre>
1615
+ <pre><code>Props:</code></pre>
1616
+ <pre><code>categories?: any = []
1617
+
1618
+ dimensions?: any = []
1619
+
1620
+ highlights?: any = []
1621
+
1622
+ HTMLRenderer?: any = ({ html, ...rest }) =&gt; (
1623
+ &lt;span dangerouslySetInnerHTML={{ __html: html }} {...rest} /&gt;
1624
+ )</code></pre>
1625
+ </div>
1626
+ </div>
1627
+
1628
+ <div class="panel panel-stories">
1629
+
1630
+
1631
+
1632
+ <div class="note ok">
1633
+ <div class="row">
1634
+ <span class="ex-name">Imports</span>
1635
+ </div>
1636
+ <pre><code>import { Dataflow } from "@sis-cc/dotstatsuite-visions";</code></pre>
1637
+ </div>
1638
+
1639
+
1640
+ <div class="note ok">
1641
+ <div class="row">
1642
+ <span class="ex-name">Default</span>
1643
+ <span class="badge ok">story ok</span>
1644
+ </div>
1645
+
1646
+
1647
+ <pre><code>const Default = () =&gt; &lt;Dataflow /&gt;;</code></pre>
1648
+ </div>
1649
+ </div>
1650
+
1651
+
1652
+ </div>
1653
+ </article>
1654
+ <article
1655
+ class="card
1656
+ no-error
1657
+ has-info
1658
+ no-story-error
1659
+ no-doc-error"
1660
+ role="listitem"
1661
+ aria-label="DataFooter">
1662
+ <div class="head">
1663
+ <div class="title">
1664
+ <h2><span class="status-dot dot-ok"></span> DataFooter</h2>
1665
+ <div class="badges">
1666
+ <label for="c-12-example-datafooter-props" class="badge ok as-toggle">1 prop type</label>
1667
+ <label for="c-12-example-datafooter-info" class="badge info as-toggle">1 info</label>
1668
+ <label for="c-12-example-datafooter-stories" class="badge ok as-toggle">1 story</label>
1669
+
1670
+
1671
+ </div>
1672
+ </div>
1673
+ <div class="meta" title="./src/stories/DataFooter.stories.jsx">example-datafooter · ./src/stories/DataFooter.stories.jsx</div>
1674
+
1675
+
1676
+
1677
+ </div>
1678
+
1679
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
1680
+
1681
+ <input id="c-12-example-datafooter-info" class="tg tg-info" type="checkbox" hidden />
1682
+ <input id="c-12-example-datafooter-stories" class="tg tg-stories" type="checkbox" hidden />
1683
+
1684
+
1685
+ <input id="c-12-example-datafooter-props" class="tg tg-props" type="checkbox" hidden />
1686
+
1687
+ <div class="panels">
1688
+
1689
+
1690
+ <div class="panel panel-info">
1691
+
1692
+ <div class="note info">
1693
+ <div class="note-title">Info</div>
1694
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
1695
+ </div>
1696
+ </div>
1697
+
1698
+ <div class="panel panel-props">
1699
+ <div class="note ok">
1700
+ <div class="row">
1701
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
1702
+ <span class="badge ok">1 prop type</span>
1703
+ </div>
1704
+ <pre><code>Component: src/DataFooter/DataFooter.jsx::DataFooter</code></pre>
1705
+ <pre><code>Props:</code></pre>
1706
+ <pre><code>isSticky?: any = false</code></pre>
1707
+ </div>
1708
+ </div>
1709
+
1710
+ <div class="panel panel-stories">
1711
+
1712
+
1713
+
1714
+ <div class="note ok">
1715
+ <div class="row">
1716
+ <span class="ex-name">Imports</span>
1717
+ </div>
1718
+ <pre><code>import { DataFooter } from "@sis-cc/dotstatsuite-visions";</code></pre>
1719
+ </div>
1720
+
1721
+
1722
+ <div class="note ok">
1723
+ <div class="row">
1724
+ <span class="ex-name">Default</span>
1725
+ <span class="badge ok">story ok</span>
1726
+ </div>
1727
+
1728
+
1729
+ <pre><code>const Default = () =&gt; &lt;DataFooter /&gt;;</code></pre>
1730
+ </div>
1731
+ </div>
1732
+
1733
+
1734
+ </div>
1735
+ </article>
1736
+ <article
1737
+ class="card
1738
+ no-error
1739
+ has-info
1740
+ no-story-error
1741
+ no-doc-error"
1742
+ role="listitem"
1743
+ aria-label="DataHeader">
1744
+ <div class="head">
1745
+ <div class="title">
1746
+ <h2><span class="status-dot dot-ok"></span> DataHeader</h2>
1747
+ <div class="badges">
1748
+ <label for="c-13-example-dataheader-props" class="badge ok as-toggle">3 prop types</label>
1749
+ <label for="c-13-example-dataheader-info" class="badge info as-toggle">1 info</label>
1750
+ <label for="c-13-example-dataheader-stories" class="badge ok as-toggle">1 story</label>
1751
+
1752
+
1753
+ </div>
1754
+ </div>
1755
+ <div class="meta" title="./src/stories/DataHeader.stories.jsx">example-dataheader · ./src/stories/DataHeader.stories.jsx</div>
1756
+
1757
+
1758
+
1759
+ </div>
1760
+
1761
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
1762
+
1763
+ <input id="c-13-example-dataheader-info" class="tg tg-info" type="checkbox" hidden />
1764
+ <input id="c-13-example-dataheader-stories" class="tg tg-stories" type="checkbox" hidden />
1765
+
1766
+
1767
+ <input id="c-13-example-dataheader-props" class="tg tg-props" type="checkbox" hidden />
1768
+
1769
+ <div class="panels">
1770
+
1771
+
1772
+ <div class="panel panel-info">
1773
+
1774
+ <div class="note info">
1775
+ <div class="note-title">Info</div>
1776
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
1777
+ </div>
1778
+ </div>
1779
+
1780
+ <div class="panel panel-props">
1781
+ <div class="note ok">
1782
+ <div class="row">
1783
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
1784
+ <span class="badge ok">3 prop types</span>
1785
+ </div>
1786
+ <pre><code>Component: src/DataHeader/DataHeader.jsx::DataHeader</code></pre>
1787
+ <pre><code>Props:</code></pre>
1788
+ <pre><code>HTMLRenderer?: any = ({ html, ...rest }) =&gt; (
1789
+ &lt;span dangerouslySetInnerHTML={{ __html: html }} {...rest} /&gt;
1790
+ )
1791
+
1792
+ isSticky?: any = false
1793
+
1794
+ subtitle?: any = []</code></pre>
1795
+ </div>
1796
+ </div>
1797
+
1798
+ <div class="panel panel-stories">
1799
+
1800
+
1801
+
1802
+ <div class="note ok">
1803
+ <div class="row">
1804
+ <span class="ex-name">Imports</span>
1805
+ </div>
1806
+ <pre><code>import { DataHeader } from "@sis-cc/dotstatsuite-visions";</code></pre>
1807
+ </div>
1808
+
1809
+
1810
+ <div class="note ok">
1811
+ <div class="row">
1812
+ <span class="ex-name">Default</span>
1813
+ <span class="badge ok">story ok</span>
1814
+ </div>
1815
+
1816
+
1817
+ <pre><code>const Default = () =&gt; &lt;DataHeader /&gt;;</code></pre>
1818
+ </div>
1819
+ </div>
1820
+
1821
+
1822
+ </div>
1823
+ </article>
1824
+ <article
1825
+ class="card
1826
+ no-error
1827
+ has-info
1828
+ no-story-error
1829
+ no-doc-error"
1830
+ role="listitem"
1831
+ aria-label="DeleteAllChip">
1832
+ <div class="head">
1833
+ <div class="title">
1834
+ <h2><span class="status-dot dot-ok"></span> DeleteAllChip</h2>
1835
+ <div class="badges">
1836
+
1837
+ <label for="c-14-example-deleteallchip-info" class="badge info as-toggle">1 info</label>
1838
+ <label for="c-14-example-deleteallchip-stories" class="badge ok as-toggle">1 story</label>
1839
+
1840
+
1841
+ </div>
1842
+ </div>
1843
+ <div class="meta" title="./src/stories/DeleteAllChip.stories.jsx">example-deleteallchip · ./src/stories/DeleteAllChip.stories.jsx</div>
1844
+
1845
+
1846
+
1847
+ </div>
1848
+
1849
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
1850
+
1851
+ <input id="c-14-example-deleteallchip-info" class="tg tg-info" type="checkbox" hidden />
1852
+ <input id="c-14-example-deleteallchip-stories" class="tg tg-stories" type="checkbox" hidden />
1853
+
1854
+
1855
+
1856
+
1857
+ <div class="panels">
1858
+
1859
+
1860
+ <div class="panel panel-info">
1861
+
1862
+ <div class="note info">
1863
+ <div class="note-title">Info</div>
1864
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
1865
+ </div>
1866
+ </div>
1867
+
1868
+
1869
+ <div class="panel panel-stories">
1870
+
1871
+
1872
+
1873
+ <div class="note ok">
1874
+ <div class="row">
1875
+ <span class="ex-name">Imports</span>
1876
+ </div>
1877
+ <pre><code>import { DeleteAllChip } from "@sis-cc/dotstatsuite-visions";</code></pre>
1878
+ </div>
1879
+
1880
+
1881
+ <div class="note ok">
1882
+ <div class="row">
1883
+ <span class="ex-name">Default</span>
1884
+ <span class="badge ok">story ok</span>
1885
+ </div>
1886
+
1887
+
1888
+ <pre><code>const Default = () =&gt; &lt;DeleteAllChip /&gt;;</code></pre>
1889
+ </div>
1890
+ </div>
1891
+
1892
+
1893
+ </div>
1894
+ </article>
1895
+ <article
1896
+ class="card
1897
+ no-error
1898
+ has-info
1899
+ no-story-error
1900
+ no-doc-error"
1901
+ role="listitem"
1902
+ aria-label="DynamicDrawer">
1903
+ <div class="head">
1904
+ <div class="title">
1905
+ <h2><span class="status-dot dot-ok"></span> DynamicDrawer</h2>
1906
+ <div class="badges">
1907
+
1908
+ <label for="c-15-example-dynamicdrawer-info" class="badge info as-toggle">1 info</label>
1909
+ <label for="c-15-example-dynamicdrawer-stories" class="badge ok as-toggle">1 story</label>
1910
+
1911
+
1912
+ </div>
1913
+ </div>
1914
+ <div class="meta" title="./src/stories/DynamicDrawer.stories.jsx">example-dynamicdrawer · ./src/stories/DynamicDrawer.stories.jsx</div>
1915
+
1916
+
1917
+
1918
+ </div>
1919
+
1920
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
1921
+
1922
+ <input id="c-15-example-dynamicdrawer-info" class="tg tg-info" type="checkbox" hidden />
1923
+ <input id="c-15-example-dynamicdrawer-stories" class="tg tg-stories" type="checkbox" hidden />
1924
+
1925
+
1926
+
1927
+
1928
+ <div class="panels">
1929
+
1930
+
1931
+ <div class="panel panel-info">
1932
+
1933
+ <div class="note info">
1934
+ <div class="note-title">Info</div>
1935
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
1936
+ </div>
1937
+ </div>
1938
+
1939
+
1940
+ <div class="panel panel-stories">
1941
+
1942
+
1943
+
1944
+ <div class="note ok">
1945
+ <div class="row">
1946
+ <span class="ex-name">Imports</span>
1947
+ </div>
1948
+ <pre><code>import Button from "@mui/material/Button";
1949
+ import Container from "@mui/material/Container";
1950
+ import { DynamicDrawer, Tag } from "@sis-cc/dotstatsuite-visions";
1951
+ import Grid from "@mui/material/Grid";</code></pre>
1952
+ </div>
1953
+
1954
+
1955
+ <div class="note ok">
1956
+ <div class="row">
1957
+ <span class="ex-name">Controlled</span>
1958
+ <span class="badge ok">story ok</span>
1959
+ </div>
1960
+
1961
+
1962
+ <pre><code>const Controlled = () =&gt; &lt;ControlledDynamicDrawer /&gt;;</code></pre>
1963
+ </div>
1964
+ </div>
1965
+
1966
+
1967
+ </div>
1968
+ </article>
1969
+ <article
1970
+ class="card
1971
+ no-error
1972
+ has-info
1973
+ no-story-error
1974
+ no-doc-error"
1975
+ role="listitem"
1976
+ aria-label="ExpansionPanel">
1977
+ <div class="head">
1978
+ <div class="title">
1979
+ <h2><span class="status-dot dot-ok"></span> ExpansionPanel</h2>
1980
+ <div class="badges">
1981
+ <label for="c-16-example-expansionpanel-props" class="badge ok as-toggle">6 prop types</label>
1982
+ <label for="c-16-example-expansionpanel-info" class="badge info as-toggle">1 info</label>
1983
+ <label for="c-16-example-expansionpanel-stories" class="badge ok as-toggle">1 story</label>
1984
+
1985
+
1986
+ </div>
1987
+ </div>
1988
+ <div class="meta" title="./src/stories/ExpansionPanel.stories.jsx">example-expansionpanel · ./src/stories/ExpansionPanel.stories.jsx</div>
1989
+
1990
+
1991
+
1992
+ </div>
1993
+
1994
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
1995
+
1996
+ <input id="c-16-example-expansionpanel-info" class="tg tg-info" type="checkbox" hidden />
1997
+ <input id="c-16-example-expansionpanel-stories" class="tg tg-stories" type="checkbox" hidden />
1998
+
1999
+
2000
+ <input id="c-16-example-expansionpanel-props" class="tg tg-props" type="checkbox" hidden />
2001
+
2002
+ <div class="panels">
2003
+
2004
+
2005
+ <div class="panel panel-info">
2006
+
2007
+ <div class="note info">
2008
+ <div class="note-title">Info</div>
2009
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
2010
+ </div>
2011
+ </div>
2012
+
2013
+ <div class="panel panel-props">
2014
+ <div class="note ok">
2015
+ <div class="row">
2016
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
2017
+ <span class="badge ok">6 prop types</span>
2018
+ </div>
2019
+ <pre><code>Component: src/ExpansionPanel/ExpansionPanel.jsx</code></pre>
2020
+ <pre><code>Props:</code></pre>
2021
+ <pre><code>isNarrow?: any = false
2022
+
2023
+ isPopper?: any = false
2024
+
2025
+ maxHeight?: any = true
2026
+
2027
+ overflow?: any = true
2028
+
2029
+ popperLabels?: any = {}
2030
+
2031
+ testId?: any = &#39;expansion_panel&#39;</code></pre>
2032
+ </div>
2033
+ </div>
2034
+
2035
+ <div class="panel panel-stories">
2036
+
2037
+
2038
+
2039
+ <div class="note ok">
2040
+ <div class="row">
2041
+ <span class="ex-name">Imports</span>
2042
+ </div>
2043
+ <pre><code>import { ExpansionPanel } from "@sis-cc/dotstatsuite-visions";</code></pre>
2044
+ </div>
2045
+
2046
+
2047
+ <div class="note ok">
2048
+ <div class="row">
2049
+ <span class="ex-name">Default</span>
2050
+ <span class="badge ok">story ok</span>
2051
+ </div>
2052
+
2053
+
2054
+ <pre><code>const Default = () =&gt; &lt;ExpansionPanel /&gt;;</code></pre>
2055
+ </div>
2056
+ </div>
2057
+
2058
+
2059
+ </div>
2060
+ </article>
2061
+ <article
2062
+ class="card
2063
+ no-error
2064
+ has-info
2065
+ no-story-error
2066
+ no-doc-error"
2067
+ role="listitem"
2068
+ aria-label="GroupedChips">
2069
+ <div class="head">
2070
+ <div class="title">
2071
+ <h2><span class="status-dot dot-ok"></span> GroupedChips</h2>
2072
+ <div class="badges">
2073
+ <label for="c-17-example-groupedchips-props" class="badge ok as-toggle">5 prop types</label>
2074
+ <label for="c-17-example-groupedchips-info" class="badge info as-toggle">1 info</label>
2075
+ <label for="c-17-example-groupedchips-stories" class="badge ok as-toggle">1 story</label>
2076
+
2077
+
2078
+ </div>
2079
+ </div>
2080
+ <div class="meta" title="./src/stories/GroupedChips.stories.jsx">example-groupedchips · ./src/stories/GroupedChips.stories.jsx</div>
2081
+
2082
+
2083
+
2084
+ </div>
2085
+
2086
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2087
+
2088
+ <input id="c-17-example-groupedchips-info" class="tg tg-info" type="checkbox" hidden />
2089
+ <input id="c-17-example-groupedchips-stories" class="tg tg-stories" type="checkbox" hidden />
2090
+
2091
+
2092
+ <input id="c-17-example-groupedchips-props" class="tg tg-props" type="checkbox" hidden />
2093
+
2094
+ <div class="panels">
2095
+
2096
+
2097
+ <div class="panel panel-info">
2098
+
2099
+ <div class="note info">
2100
+ <div class="note-title">Info</div>
2101
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
2102
+ </div>
2103
+ </div>
2104
+
2105
+ <div class="panel panel-props">
2106
+ <div class="note ok">
2107
+ <div class="row">
2108
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
2109
+ <span class="badge ok">5 prop types</span>
2110
+ </div>
2111
+ <pre><code>Component: src/GroupedChips/GroupedChips.jsx::GroupedChips</code></pre>
2112
+ <pre><code>Props:</code></pre>
2113
+ <pre><code>ariaLabelTooltip?: any = &#39; parent of &#39;
2114
+
2115
+ itemProps?: any = {}
2116
+
2117
+ labelRenderer?: any = R.prop(&#39;label&#39;)
2118
+
2119
+ reducingNbChips?: any = 15
2120
+
2121
+ testId?: any = &#39;chips-test-id&#39;</code></pre>
2122
+ </div>
2123
+ </div>
2124
+
2125
+ <div class="panel panel-stories">
2126
+
2127
+
2128
+
2129
+ <div class="note ok">
2130
+ <div class="row">
2131
+ <span class="ex-name">Imports</span>
2132
+ </div>
2133
+ <pre><code>import { GroupedChips } from "@sis-cc/dotstatsuite-visions";</code></pre>
2134
+ </div>
2135
+
2136
+
2137
+ <div class="note ok">
2138
+ <div class="row">
2139
+ <span class="ex-name">Default</span>
2140
+ <span class="badge ok">story ok</span>
2141
+ </div>
2142
+
2143
+
2144
+ <pre><code>const Default = () =&gt; &lt;GroupedChips /&gt;;</code></pre>
2145
+ </div>
2146
+ </div>
2147
+
2148
+
2149
+ </div>
2150
+ </article>
2151
+ <article
2152
+ class="card
2153
+ no-error
2154
+ has-info
2155
+ no-story-error
2156
+ no-doc-error"
2157
+ role="listitem"
2158
+ aria-label="HierarchicalFilter">
2159
+ <div class="head">
2160
+ <div class="title">
2161
+ <h2><span class="status-dot dot-ok"></span> HierarchicalFilter</h2>
2162
+ <div class="badges">
2163
+
2164
+ <label for="c-18-example-hierarchicalfilter-info" class="badge info as-toggle">1 info</label>
2165
+ <label for="c-18-example-hierarchicalfilter-stories" class="badge ok as-toggle">1 story</label>
2166
+
2167
+
2168
+ </div>
2169
+ </div>
2170
+ <div class="meta" title="./src/stories/HierarchicalFilter.stories.jsx">example-hierarchicalfilter · ./src/stories/HierarchicalFilter.stories.jsx</div>
2171
+
2172
+
2173
+
2174
+ </div>
2175
+
2176
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2177
+
2178
+ <input id="c-18-example-hierarchicalfilter-info" class="tg tg-info" type="checkbox" hidden />
2179
+ <input id="c-18-example-hierarchicalfilter-stories" class="tg tg-stories" type="checkbox" hidden />
2180
+
2181
+
2182
+
2183
+
2184
+ <div class="panels">
2185
+
2186
+
2187
+ <div class="panel panel-info">
2188
+
2189
+ <div class="note info">
2190
+ <div class="note-title">Info</div>
2191
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
2192
+ </div>
2193
+ </div>
2194
+
2195
+
2196
+ <div class="panel panel-stories">
2197
+
2198
+
2199
+
2200
+ <div class="note ok">
2201
+ <div class="row">
2202
+ <span class="ex-name">Imports</span>
2203
+ </div>
2204
+ <pre><code>import { HierarchicalFilter } from "@sis-cc/dotstatsuite-visions";</code></pre>
2205
+ </div>
2206
+
2207
+
2208
+ <div class="note ok">
2209
+ <div class="row">
2210
+ <span class="ex-name">Default</span>
2211
+ <span class="badge ok">story ok</span>
2212
+ </div>
2213
+
2214
+
2215
+ <pre><code>const Default = () =&gt; &lt;HierarchicalFilter /&gt;;</code></pre>
2216
+ </div>
2217
+ </div>
2218
+
2219
+
2220
+ </div>
2221
+ </article>
2222
+ <article
2223
+ class="card
2224
+ no-error
2225
+ has-info
2226
+ no-story-error
2227
+ no-doc-error"
2228
+ role="listitem"
2229
+ aria-label="Input">
2230
+ <div class="head">
2231
+ <div class="title">
2232
+ <h2><span class="status-dot dot-ok"></span> Input</h2>
2233
+ <div class="badges">
2234
+
2235
+ <label for="c-19-example-input-info" class="badge info as-toggle">1 info</label>
2236
+ <label for="c-19-example-input-stories" class="badge ok as-toggle">1 story</label>
2237
+
2238
+
2239
+ </div>
2240
+ </div>
2241
+ <div class="meta" title="./src/stories/Input.stories.jsx">example-input · ./src/stories/Input.stories.jsx</div>
2242
+
2243
+
2244
+
2245
+ </div>
2246
+
2247
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2248
+
2249
+ <input id="c-19-example-input-info" class="tg tg-info" type="checkbox" hidden />
2250
+ <input id="c-19-example-input-stories" class="tg tg-stories" type="checkbox" hidden />
2251
+
2252
+
2253
+
2254
+
2255
+ <div class="panels">
2256
+
2257
+
2258
+ <div class="panel panel-info">
2259
+
2260
+ <div class="note info">
2261
+ <div class="note-title">Info</div>
2262
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
2263
+ </div>
2264
+ </div>
2265
+
2266
+
2267
+ <div class="panel panel-stories">
2268
+
2269
+
2270
+
2271
+ <div class="note ok">
2272
+ <div class="row">
2273
+ <span class="ex-name">Imports</span>
2274
+ </div>
2275
+ <pre><code>import { Input } from "@sis-cc/dotstatsuite-visions";</code></pre>
2276
+ </div>
2277
+
2278
+
2279
+ <div class="note ok">
2280
+ <div class="row">
2281
+ <span class="ex-name">Default</span>
2282
+ <span class="badge ok">story ok</span>
2283
+ </div>
2284
+
2285
+
2286
+ <pre><code>const Default = () =&gt; &lt;Input /&gt;;</code></pre>
2287
+ </div>
2288
+ </div>
2289
+
2290
+
2291
+ </div>
2292
+ </article>
2293
+ <article
2294
+ class="card
2295
+ no-error
2296
+ has-info
2297
+ no-story-error
2298
+ no-doc-error"
2299
+ role="listitem"
2300
+ aria-label="InputNumber">
2301
+ <div class="head">
2302
+ <div class="title">
2303
+ <h2><span class="status-dot dot-ok"></span> InputNumber</h2>
2304
+ <div class="badges">
2305
+ <label for="c-20-example-inputnumber-props" class="badge ok as-toggle">1 prop type</label>
2306
+ <label for="c-20-example-inputnumber-info" class="badge info as-toggle">1 info</label>
2307
+ <label for="c-20-example-inputnumber-stories" class="badge ok as-toggle">1 story</label>
2308
+
2309
+
2310
+ </div>
2311
+ </div>
2312
+ <div class="meta" title="./src/stories/InputNumber.stories.jsx">example-inputnumber · ./src/stories/InputNumber.stories.jsx</div>
2313
+
2314
+
2315
+
2316
+ </div>
2317
+
2318
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2319
+
2320
+ <input id="c-20-example-inputnumber-info" class="tg tg-info" type="checkbox" hidden />
2321
+ <input id="c-20-example-inputnumber-stories" class="tg tg-stories" type="checkbox" hidden />
2322
+
2323
+
2324
+ <input id="c-20-example-inputnumber-props" class="tg tg-props" type="checkbox" hidden />
2325
+
2326
+ <div class="panels">
2327
+
2328
+
2329
+ <div class="panel panel-info">
2330
+
2331
+ <div class="note info">
2332
+ <div class="note-title">Info</div>
2333
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
2334
+ </div>
2335
+ </div>
2336
+
2337
+ <div class="panel panel-props">
2338
+ <div class="note ok">
2339
+ <div class="row">
2340
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
2341
+ <span class="badge ok">1 prop type</span>
2342
+ </div>
2343
+ <pre><code>Component: src/InputNumber/InputNumber.jsx</code></pre>
2344
+ <pre><code>Props:</code></pre>
2345
+ <pre><code>placeholder?: any = &#39;--&#39;</code></pre>
2346
+ </div>
2347
+ </div>
2348
+
2349
+ <div class="panel panel-stories">
2350
+
2351
+
2352
+
2353
+ <div class="note ok">
2354
+ <div class="row">
2355
+ <span class="ex-name">Imports</span>
2356
+ </div>
2357
+ <pre><code>import { InputNumber } from "@sis-cc/dotstatsuite-visions";</code></pre>
2358
+ </div>
2359
+
2360
+
2361
+ <div class="note ok">
2362
+ <div class="row">
2363
+ <span class="ex-name">Default</span>
2364
+ <span class="badge ok">story ok</span>
2365
+ </div>
2366
+
2367
+
2368
+ <pre><code>const Default = () =&gt; &lt;InputNumber /&gt;;</code></pre>
2369
+ </div>
2370
+ </div>
2371
+
2372
+
2373
+ </div>
2374
+ </article>
2375
+ <article
2376
+ class="card
2377
+ no-error
2378
+ has-info
2379
+ no-story-error
2380
+ no-doc-error"
2381
+ role="listitem"
2382
+ aria-label="LabelDivider">
2383
+ <div class="head">
2384
+ <div class="title">
2385
+ <h2><span class="status-dot dot-ok"></span> LabelDivider</h2>
2386
+ <div class="badges">
2387
+
2388
+ <label for="c-21-example-labeldivider-info" class="badge info as-toggle">1 info</label>
2389
+ <label for="c-21-example-labeldivider-stories" class="badge ok as-toggle">1 story</label>
2390
+
2391
+
2392
+ </div>
2393
+ </div>
2394
+ <div class="meta" title="./src/stories/LabelDivider.stories.jsx">example-labeldivider · ./src/stories/LabelDivider.stories.jsx</div>
2395
+
2396
+
2397
+
2398
+ </div>
2399
+
2400
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2401
+
2402
+ <input id="c-21-example-labeldivider-info" class="tg tg-info" type="checkbox" hidden />
2403
+ <input id="c-21-example-labeldivider-stories" class="tg tg-stories" type="checkbox" hidden />
2404
+
2405
+
2406
+
2407
+
2408
+ <div class="panels">
2409
+
2410
+
2411
+ <div class="panel panel-info">
2412
+
2413
+ <div class="note info">
2414
+ <div class="note-title">Info</div>
2415
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
2416
+ </div>
2417
+ </div>
2418
+
2419
+
2420
+ <div class="panel panel-stories">
2421
+
2422
+
2423
+
2424
+ <div class="note ok">
2425
+ <div class="row">
2426
+ <span class="ex-name">Imports</span>
2427
+ </div>
2428
+ <pre><code>import { LabelDivider } from "@sis-cc/dotstatsuite-visions";</code></pre>
2429
+ </div>
2430
+
2431
+
2432
+ <div class="note ok">
2433
+ <div class="row">
2434
+ <span class="ex-name">Default</span>
2435
+ <span class="badge ok">story ok</span>
2436
+ </div>
2437
+
2438
+
2439
+ <pre><code>const Default = () =&gt; &lt;LabelDivider /&gt;;</code></pre>
2440
+ </div>
2441
+ </div>
2442
+
2443
+
2444
+ </div>
2445
+ </article>
2446
+ <article
2447
+ class="card
2448
+ no-error
2449
+ has-info
2450
+ no-story-error
2451
+ no-doc-error"
2452
+ role="listitem"
2453
+ aria-label="Loading">
2454
+ <div class="head">
2455
+ <div class="title">
2456
+ <h2><span class="status-dot dot-ok"></span> Loading</h2>
2457
+ <div class="badges">
2458
+ <label for="c-22-example-loading-props" class="badge ok as-toggle">4 prop types</label>
2459
+ <label for="c-22-example-loading-info" class="badge info as-toggle">1 info</label>
2460
+ <label for="c-22-example-loading-stories" class="badge ok as-toggle">1 story</label>
2461
+
2462
+
2463
+ </div>
2464
+ </div>
2465
+ <div class="meta" title="./src/stories/Loading.stories.jsx">example-loading · ./src/stories/Loading.stories.jsx</div>
2466
+
2467
+
2468
+
2469
+ </div>
2470
+
2471
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2472
+
2473
+ <input id="c-22-example-loading-info" class="tg tg-info" type="checkbox" hidden />
2474
+ <input id="c-22-example-loading-stories" class="tg tg-stories" type="checkbox" hidden />
2475
+
2476
+
2477
+ <input id="c-22-example-loading-props" class="tg tg-props" type="checkbox" hidden />
2478
+
2479
+ <div class="panels">
2480
+
2481
+
2482
+ <div class="panel panel-info">
2483
+
2484
+ <div class="note info">
2485
+ <div class="note-title">Info</div>
2486
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
2487
+ </div>
2488
+ </div>
2489
+
2490
+ <div class="panel panel-props">
2491
+ <div class="note ok">
2492
+ <div class="row">
2493
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
2494
+ <span class="badge ok">4 prop types</span>
2495
+ </div>
2496
+ <pre><code>Component: src/Loading/Loading.jsx::Loading</code></pre>
2497
+ <pre><code>Props:</code></pre>
2498
+ <pre><code>color?: string
2499
+
2500
+ isWarning?: bool = false
2501
+
2502
+ message?: union
2503
+
2504
+ variant?: string = &#39;primary&#39;</code></pre>
2505
+ </div>
2506
+ </div>
2507
+
2508
+ <div class="panel panel-stories">
2509
+
2510
+
2511
+
2512
+ <div class="note ok">
2513
+ <div class="row">
2514
+ <span class="ex-name">Imports</span>
2515
+ </div>
2516
+ <pre><code>import { Loading } from "@sis-cc/dotstatsuite-visions";</code></pre>
2517
+ </div>
2518
+
2519
+
2520
+ <div class="note ok">
2521
+ <div class="row">
2522
+ <span class="ex-name">Default</span>
2523
+ <span class="badge ok">story ok</span>
2524
+ </div>
2525
+
2526
+
2527
+ <pre><code>const Default = () =&gt; &lt;Loading /&gt;;</code></pre>
2528
+ </div>
2529
+ </div>
2530
+
2531
+
2532
+ </div>
2533
+ </article>
2534
+ <article
2535
+ class="card
2536
+ no-error
2537
+ has-info
2538
+ no-story-error
2539
+ no-doc-error"
2540
+ role="listitem"
2541
+ aria-label="Logo">
2542
+ <div class="head">
2543
+ <div class="title">
2544
+ <h2><span class="status-dot dot-ok"></span> Logo</h2>
2545
+ <div class="badges">
2546
+ <label for="c-23-example-logo-props" class="badge ok as-toggle">3 prop types</label>
2547
+ <label for="c-23-example-logo-info" class="badge info as-toggle">1 info</label>
2548
+ <label for="c-23-example-logo-stories" class="badge ok as-toggle">1 story</label>
2549
+
2550
+
2551
+ </div>
2552
+ </div>
2553
+ <div class="meta" title="./src/stories/Logo.stories.jsx">example-logo · ./src/stories/Logo.stories.jsx</div>
2554
+
2555
+
2556
+
2557
+ </div>
2558
+
2559
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2560
+
2561
+ <input id="c-23-example-logo-info" class="tg tg-info" type="checkbox" hidden />
2562
+ <input id="c-23-example-logo-stories" class="tg tg-stories" type="checkbox" hidden />
2563
+
2564
+
2565
+ <input id="c-23-example-logo-props" class="tg tg-props" type="checkbox" hidden />
2566
+
2567
+ <div class="panels">
2568
+
2569
+
2570
+ <div class="panel panel-info">
2571
+
2572
+ <div class="note info">
2573
+ <div class="note-title">Info</div>
2574
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
2575
+ </div>
2576
+ </div>
2577
+
2578
+ <div class="panel panel-props">
2579
+ <div class="note ok">
2580
+ <div class="row">
2581
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
2582
+ <span class="badge ok">3 prop types</span>
2583
+ </div>
2584
+ <pre><code>Component: src/Logo/Logo.jsx::Logo</code></pre>
2585
+ <pre><code>Props:</code></pre>
2586
+ <pre><code>alt?: any = &#39;logo&#39;
2587
+
2588
+ fetchPriority?: any = &#39;auto&#39;
2589
+
2590
+ maxHeight?: any = 150</code></pre>
2591
+ </div>
2592
+ </div>
2593
+
2594
+ <div class="panel panel-stories">
2595
+
2596
+
2597
+
2598
+ <div class="note ok">
2599
+ <div class="row">
2600
+ <span class="ex-name">Imports</span>
2601
+ </div>
2602
+ <pre><code>import { Logo } from "@sis-cc/dotstatsuite-visions";</code></pre>
2603
+ </div>
2604
+
2605
+
2606
+ <div class="note ok">
2607
+ <div class="row">
2608
+ <span class="ex-name">Default</span>
2609
+ <span class="badge ok">story ok</span>
2610
+ </div>
2611
+
2612
+
2613
+ <pre><code>const Default = () =&gt; &lt;Logo /&gt;;</code></pre>
2614
+ </div>
2615
+ </div>
2616
+
2617
+
2618
+ </div>
2619
+ </article>
2620
+ <article
2621
+ class="card
2622
+ no-error
2623
+ has-info
2624
+ no-story-error
2625
+ no-doc-error"
2626
+ role="listitem"
2627
+ aria-label="Mode">
2628
+ <div class="head">
2629
+ <div class="title">
2630
+ <h2><span class="status-dot dot-ok"></span> Mode</h2>
2631
+ <div class="badges">
2632
+ <label for="c-24-example-mode-props" class="badge ok as-toggle">3 prop types</label>
2633
+ <label for="c-24-example-mode-info" class="badge info as-toggle">1 info</label>
2634
+ <label for="c-24-example-mode-stories" class="badge ok as-toggle">1 story</label>
2635
+
2636
+
2637
+ </div>
2638
+ </div>
2639
+ <div class="meta" title="./src/stories/Mode.stories.jsx">example-mode · ./src/stories/Mode.stories.jsx</div>
2640
+
2641
+
2642
+
2643
+ </div>
2644
+
2645
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2646
+
2647
+ <input id="c-24-example-mode-info" class="tg tg-info" type="checkbox" hidden />
2648
+ <input id="c-24-example-mode-stories" class="tg tg-stories" type="checkbox" hidden />
2649
+
2650
+
2651
+ <input id="c-24-example-mode-props" class="tg tg-props" type="checkbox" hidden />
2652
+
2653
+ <div class="panels">
2654
+
2655
+
2656
+ <div class="panel panel-info">
2657
+
2658
+ <div class="note info">
2659
+ <div class="note-title">Info</div>
2660
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
2661
+ </div>
2662
+ </div>
2663
+
2664
+ <div class="panel panel-props">
2665
+ <div class="note ok">
2666
+ <div class="row">
2667
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
2668
+ <span class="badge ok">3 prop types</span>
2669
+ </div>
2670
+ <pre><code>Component: src/Mode/Mode.jsx::Mode</code></pre>
2671
+ <pre><code>Props:</code></pre>
2672
+ <pre><code>isSmall?: any = false
2673
+
2674
+ modes?: any = []
2675
+
2676
+ placement?: any = &#39;end&#39;</code></pre>
2677
+ </div>
2678
+ </div>
2679
+
2680
+ <div class="panel panel-stories">
2681
+
2682
+
2683
+
2684
+ <div class="note ok">
2685
+ <div class="row">
2686
+ <span class="ex-name">Imports</span>
2687
+ </div>
2688
+ <pre><code>import { Mode } from "@sis-cc/dotstatsuite-visions";</code></pre>
2689
+ </div>
2690
+
2691
+
2692
+ <div class="note ok">
2693
+ <div class="row">
2694
+ <span class="ex-name">Default</span>
2695
+ <span class="badge ok">story ok</span>
2696
+ </div>
2697
+
2698
+
2699
+ <pre><code>const Default = () =&gt; &lt;Mode /&gt;;</code></pre>
2700
+ </div>
2701
+ </div>
2702
+
2703
+
2704
+ </div>
2705
+ </article>
2706
+ <article
2707
+ class="card
2708
+ no-error
2709
+ has-info
2710
+ no-story-error
2711
+ no-doc-error"
2712
+ role="listitem"
2713
+ aria-label="NoData">
2714
+ <div class="head">
2715
+ <div class="title">
2716
+ <h2><span class="status-dot dot-ok"></span> NoData</h2>
2717
+ <div class="badges">
2718
+
2719
+ <label for="c-25-example-nodata-info" class="badge info as-toggle">1 info</label>
2720
+ <label for="c-25-example-nodata-stories" class="badge ok as-toggle">1 story</label>
2721
+
2722
+
2723
+ </div>
2724
+ </div>
2725
+ <div class="meta" title="./src/stories/NoData.stories.jsx">example-nodata · ./src/stories/NoData.stories.jsx</div>
2726
+
2727
+
2728
+
2729
+ </div>
2730
+
2731
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2732
+
2733
+ <input id="c-25-example-nodata-info" class="tg tg-info" type="checkbox" hidden />
2734
+ <input id="c-25-example-nodata-stories" class="tg tg-stories" type="checkbox" hidden />
2735
+
2736
+
2737
+
2738
+
2739
+ <div class="panels">
2740
+
2741
+
2742
+ <div class="panel panel-info">
2743
+
2744
+ <div class="note info">
2745
+ <div class="note-title">Info</div>
2746
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
2747
+ </div>
2748
+ </div>
2749
+
2750
+
2751
+ <div class="panel panel-stories">
2752
+
2753
+
2754
+
2755
+ <div class="note ok">
2756
+ <div class="row">
2757
+ <span class="ex-name">Imports</span>
2758
+ </div>
2759
+ <pre><code>import { NoData } from "@sis-cc/dotstatsuite-visions";</code></pre>
2760
+ </div>
2761
+
2762
+
2763
+ <div class="note ok">
2764
+ <div class="row">
2765
+ <span class="ex-name">Default</span>
2766
+ <span class="badge ok">story ok</span>
2767
+ </div>
2768
+
2769
+
2770
+ <pre><code>const Default = () =&gt; &lt;NoData /&gt;;</code></pre>
2771
+ </div>
2772
+ </div>
2773
+
2774
+
2775
+ </div>
2776
+ </article>
2777
+ <article
2778
+ class="card
2779
+ no-error
2780
+ has-info
2781
+ no-story-error
2782
+ no-doc-error"
2783
+ role="listitem"
2784
+ aria-label="Pagination">
2785
+ <div class="head">
2786
+ <div class="title">
2787
+ <h2><span class="status-dot dot-ok"></span> Pagination</h2>
2788
+ <div class="badges">
2789
+
2790
+ <label for="c-26-example-pagination-info" class="badge info as-toggle">1 info</label>
2791
+ <label for="c-26-example-pagination-stories" class="badge ok as-toggle">1 story</label>
2792
+
2793
+
2794
+ </div>
2795
+ </div>
2796
+ <div class="meta" title="./src/stories/Pagination.stories.jsx">example-pagination · ./src/stories/Pagination.stories.jsx</div>
2797
+
2798
+
2799
+
2800
+ </div>
2801
+
2802
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2803
+
2804
+ <input id="c-26-example-pagination-info" class="tg tg-info" type="checkbox" hidden />
2805
+ <input id="c-26-example-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
2806
+
2807
+
2808
+
2809
+
2810
+ <div class="panels">
2811
+
2812
+
2813
+ <div class="panel panel-info">
2814
+
2815
+ <div class="note info">
2816
+ <div class="note-title">Info</div>
2817
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
2818
+ </div>
2819
+ </div>
2820
+
2821
+
2822
+ <div class="panel panel-stories">
2823
+
2824
+
2825
+
2826
+ <div class="note ok">
2827
+ <div class="row">
2828
+ <span class="ex-name">Imports</span>
2829
+ </div>
2830
+ <pre><code>import { Pagination } from "@sis-cc/dotstatsuite-visions";</code></pre>
2831
+ </div>
2832
+
2833
+
2834
+ <div class="note ok">
2835
+ <div class="row">
2836
+ <span class="ex-name">Default</span>
2837
+ <span class="badge ok">story ok</span>
2838
+ </div>
2839
+
2840
+
2841
+ <pre><code>const Default = () =&gt; &lt;Pagination /&gt;;</code></pre>
2842
+ </div>
2843
+ </div>
2844
+
2845
+
2846
+ </div>
2847
+ </article>
2848
+ <article
2849
+ class="card
2850
+ no-error
2851
+ has-info
2852
+ no-story-error
2853
+ no-doc-error"
2854
+ role="listitem"
2855
+ aria-label="PeriodPicker">
2856
+ <div class="head">
2857
+ <div class="title">
2858
+ <h2><span class="status-dot dot-ok"></span> PeriodPicker</h2>
2859
+ <div class="badges">
2860
+ <label for="c-27-example-periodpicker-props" class="badge ok as-toggle">2 prop types</label>
2861
+ <label for="c-27-example-periodpicker-info" class="badge info as-toggle">1 info</label>
2862
+ <label for="c-27-example-periodpicker-stories" class="badge ok as-toggle">1 story</label>
2863
+
2864
+
2865
+ </div>
2866
+ </div>
2867
+ <div class="meta" title="./src/stories/PeriodPicker.stories.jsx">example-periodpicker · ./src/stories/PeriodPicker.stories.jsx</div>
2868
+
2869
+
2870
+
2871
+ </div>
2872
+
2873
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2874
+
2875
+ <input id="c-27-example-periodpicker-info" class="tg tg-info" type="checkbox" hidden />
2876
+ <input id="c-27-example-periodpicker-stories" class="tg tg-stories" type="checkbox" hidden />
2877
+
2878
+
2879
+ <input id="c-27-example-periodpicker-props" class="tg tg-props" type="checkbox" hidden />
2880
+
2881
+ <div class="panels">
2882
+
2883
+
2884
+ <div class="panel panel-info">
2885
+
2886
+ <div class="note info">
2887
+ <div class="note-title">Info</div>
2888
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
2889
+ </div>
2890
+ </div>
2891
+
2892
+ <div class="panel panel-props">
2893
+ <div class="note ok">
2894
+ <div class="row">
2895
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
2896
+ <span class="badge ok">2 prop types</span>
2897
+ </div>
2898
+ <pre><code>Component: src/PeriodPicker/PeriodPicker.jsx</code></pre>
2899
+ <pre><code>Props:</code></pre>
2900
+ <pre><code>availableFrequencies?: any = [defaultfreq]
2901
+
2902
+ defaultFrequency?: any = &#39;A&#39;</code></pre>
2903
+ </div>
2904
+ </div>
2905
+
2906
+ <div class="panel panel-stories">
2907
+
2908
+
2909
+
2910
+ <div class="note ok">
2911
+ <div class="row">
2912
+ <span class="ex-name">Imports</span>
2913
+ </div>
2914
+ <pre><code>import { PeriodPicker } from "@sis-cc/dotstatsuite-visions";</code></pre>
2915
+ </div>
2916
+
2917
+
2918
+ <div class="note ok">
2919
+ <div class="row">
2920
+ <span class="ex-name">Default</span>
2921
+ <span class="badge ok">story ok</span>
2922
+ </div>
2923
+
2924
+
2925
+ <pre><code>const Default = () =&gt; &lt;PeriodPicker /&gt;;</code></pre>
2926
+ </div>
2927
+ </div>
2928
+
2929
+
2930
+ </div>
2931
+ </article>
2932
+ <article
2933
+ class="card
2934
+ no-error
2935
+ has-info
2936
+ no-story-error
2937
+ no-doc-error"
2938
+ role="listitem"
2939
+ aria-label="Select">
2940
+ <div class="head">
2941
+ <div class="title">
2942
+ <h2><span class="status-dot dot-ok"></span> Select</h2>
2943
+ <div class="badges">
2944
+ <label for="c-28-example-select-props" class="badge ok as-toggle">4 prop types</label>
2945
+ <label for="c-28-example-select-info" class="badge info as-toggle">1 info</label>
2946
+ <label for="c-28-example-select-stories" class="badge ok as-toggle">1 story</label>
2947
+
2948
+
2949
+ </div>
2950
+ </div>
2951
+ <div class="meta" title="./src/stories/Select.stories.jsx">example-select · ./src/stories/Select.stories.jsx</div>
2952
+
2953
+
2954
+
2955
+ </div>
2956
+
2957
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2958
+
2959
+ <input id="c-28-example-select-info" class="tg tg-info" type="checkbox" hidden />
2960
+ <input id="c-28-example-select-stories" class="tg tg-stories" type="checkbox" hidden />
2961
+
2962
+
2963
+ <input id="c-28-example-select-props" class="tg tg-props" type="checkbox" hidden />
2964
+
2965
+ <div class="panels">
2966
+
2967
+
2968
+ <div class="panel panel-info">
2969
+
2970
+ <div class="note info">
2971
+ <div class="note-title">Info</div>
2972
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
2973
+ </div>
2974
+ </div>
2975
+
2976
+ <div class="panel panel-props">
2977
+ <div class="note ok">
2978
+ <div class="row">
2979
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
2980
+ <span class="badge ok">4 prop types</span>
2981
+ </div>
2982
+ <pre><code>Component: src/Select/Select.jsx::Select</code></pre>
2983
+ <pre><code>Props:</code></pre>
2984
+ <pre><code>dataTestId?: any = &#39;select-testid&#39;
2985
+
2986
+ items?: any = []
2987
+
2988
+ textFieldProps?: any = {}
2989
+
2990
+ value?: any = &#39;&#39;</code></pre>
2991
+ </div>
2992
+ </div>
2993
+
2994
+ <div class="panel panel-stories">
2995
+
2996
+
2997
+
2998
+ <div class="note ok">
2999
+ <div class="row">
3000
+ <span class="ex-name">Imports</span>
3001
+ </div>
3002
+ <pre><code>import { Select } from "@sis-cc/dotstatsuite-visions";</code></pre>
3003
+ </div>
3004
+
3005
+
3006
+ <div class="note ok">
3007
+ <div class="row">
3008
+ <span class="ex-name">Default</span>
3009
+ <span class="badge ok">story ok</span>
3010
+ </div>
3011
+
3012
+
3013
+ <pre><code>const Default = () =&gt; &lt;Select /&gt;;</code></pre>
3014
+ </div>
3015
+ </div>
3016
+
3017
+
3018
+ </div>
3019
+ </article>
3020
+ <article
3021
+ class="card
3022
+ no-error
3023
+ has-info
3024
+ no-story-error
3025
+ no-doc-error"
3026
+ role="listitem"
3027
+ aria-label="Share">
3028
+ <div class="head">
3029
+ <div class="title">
3030
+ <h2><span class="status-dot dot-ok"></span> Share</h2>
3031
+ <div class="badges">
3032
+
3033
+ <label for="c-29-example-share-info" class="badge info as-toggle">1 info</label>
3034
+ <label for="c-29-example-share-stories" class="badge ok as-toggle">1 story</label>
3035
+
3036
+
3037
+ </div>
3038
+ </div>
3039
+ <div class="meta" title="./src/stories/Share.stories.jsx">example-share · ./src/stories/Share.stories.jsx</div>
3040
+
3041
+
3042
+
3043
+ </div>
3044
+
3045
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3046
+
3047
+ <input id="c-29-example-share-info" class="tg tg-info" type="checkbox" hidden />
3048
+ <input id="c-29-example-share-stories" class="tg tg-stories" type="checkbox" hidden />
3049
+
3050
+
3051
+
3052
+
3053
+ <div class="panels">
3054
+
3055
+
3056
+ <div class="panel panel-info">
3057
+
3058
+ <div class="note info">
3059
+ <div class="note-title">Info</div>
3060
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
3061
+ </div>
3062
+ </div>
3063
+
3064
+
3065
+ <div class="panel panel-stories">
3066
+
3067
+
3068
+
3069
+ <div class="note ok">
3070
+ <div class="row">
3071
+ <span class="ex-name">Imports</span>
3072
+ </div>
3073
+ <pre><code>import { Share } from "@sis-cc/dotstatsuite-visions";</code></pre>
3074
+ </div>
3075
+
3076
+
3077
+ <div class="note ok">
3078
+ <div class="row">
3079
+ <span class="ex-name">Default</span>
3080
+ <span class="badge ok">story ok</span>
3081
+ </div>
3082
+
3083
+
3084
+ <pre><code>const Default = () =&gt; &lt;Share /&gt;;</code></pre>
3085
+ </div>
3086
+ </div>
3087
+
3088
+
3089
+ </div>
3090
+ </article>
3091
+ <article
3092
+ class="card
3093
+ no-error
3094
+ has-info
3095
+ no-story-error
3096
+ no-doc-error"
3097
+ role="listitem"
3098
+ aria-label="ShortUrls">
3099
+ <div class="head">
3100
+ <div class="title">
3101
+ <h2><span class="status-dot dot-ok"></span> ShortUrls</h2>
3102
+ <div class="badges">
3103
+ <label for="c-30-example-shorturls-props" class="badge ok as-toggle">1 prop type</label>
3104
+ <label for="c-30-example-shorturls-info" class="badge info as-toggle">1 info</label>
3105
+ <label for="c-30-example-shorturls-stories" class="badge ok as-toggle">1 story</label>
3106
+
3107
+
3108
+ </div>
3109
+ </div>
3110
+ <div class="meta" title="./src/stories/ShortUrls.stories.jsx">example-shorturls · ./src/stories/ShortUrls.stories.jsx</div>
3111
+
3112
+
3113
+
3114
+ </div>
3115
+
3116
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3117
+
3118
+ <input id="c-30-example-shorturls-info" class="tg tg-info" type="checkbox" hidden />
3119
+ <input id="c-30-example-shorturls-stories" class="tg tg-stories" type="checkbox" hidden />
3120
+
3121
+
3122
+ <input id="c-30-example-shorturls-props" class="tg tg-props" type="checkbox" hidden />
3123
+
3124
+ <div class="panels">
3125
+
3126
+
3127
+ <div class="panel panel-info">
3128
+
3129
+ <div class="note info">
3130
+ <div class="note-title">Info</div>
3131
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
3132
+ </div>
3133
+ </div>
3134
+
3135
+ <div class="panel panel-props">
3136
+ <div class="note ok">
3137
+ <div class="row">
3138
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
3139
+ <span class="badge ok">1 prop type</span>
3140
+ </div>
3141
+ <pre><code>Component: src/ShortUrls/ShortUrls.jsx::ShortUrls</code></pre>
3142
+ <pre><code>Props:</code></pre>
3143
+ <pre><code>isNotifOpen?: any = false</code></pre>
3144
+ </div>
3145
+ </div>
3146
+
3147
+ <div class="panel panel-stories">
3148
+
3149
+
3150
+
3151
+ <div class="note ok">
3152
+ <div class="row">
3153
+ <span class="ex-name">Imports</span>
3154
+ </div>
3155
+ <pre><code>import { ShortUrls } from "@sis-cc/dotstatsuite-visions";</code></pre>
3156
+ </div>
3157
+
3158
+
3159
+ <div class="note ok">
3160
+ <div class="row">
3161
+ <span class="ex-name">Default</span>
3162
+ <span class="badge ok">story ok</span>
3163
+ </div>
3164
+
3165
+
3166
+ <pre><code>const Default = () =&gt; &lt;ShortUrls /&gt;;</code></pre>
3167
+ </div>
3168
+ </div>
3169
+
3170
+
3171
+ </div>
3172
+ </article>
3173
+ <article
3174
+ class="card
3175
+ no-error
3176
+ has-info
3177
+ no-story-error
3178
+ no-doc-error"
3179
+ role="listitem"
3180
+ aria-label="SisccFooter">
3181
+ <div class="head">
3182
+ <div class="title">
3183
+ <h2><span class="status-dot dot-ok"></span> SisccFooter</h2>
3184
+ <div class="badges">
3185
+ <label for="c-31-example-sisccfooter-props" class="badge ok as-toggle">1 prop type</label>
3186
+ <label for="c-31-example-sisccfooter-info" class="badge info as-toggle">1 info</label>
3187
+ <label for="c-31-example-sisccfooter-stories" class="badge ok as-toggle">1 story</label>
3188
+
3189
+
3190
+ </div>
3191
+ </div>
3192
+ <div class="meta" title="./src/stories/SisccFooter.stories.jsx">example-sisccfooter · ./src/stories/SisccFooter.stories.jsx</div>
3193
+
3194
+
3195
+
3196
+ </div>
3197
+
3198
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3199
+
3200
+ <input id="c-31-example-sisccfooter-info" class="tg tg-info" type="checkbox" hidden />
3201
+ <input id="c-31-example-sisccfooter-stories" class="tg tg-stories" type="checkbox" hidden />
3202
+
3203
+
3204
+ <input id="c-31-example-sisccfooter-props" class="tg tg-props" type="checkbox" hidden />
3205
+
3206
+ <div class="panels">
3207
+
3208
+
3209
+ <div class="panel panel-info">
3210
+
3211
+ <div class="note info">
3212
+ <div class="note-title">Info</div>
3213
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
3214
+ </div>
3215
+ </div>
3216
+
3217
+ <div class="panel panel-props">
3218
+ <div class="note ok">
3219
+ <div class="row">
3220
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
3221
+ <span class="badge ok">1 prop type</span>
3222
+ </div>
3223
+ <pre><code>Component: src/SisccFooter/SisccFooter.jsx::SisccFooter</code></pre>
3224
+ <pre><code>Props:</code></pre>
3225
+ <pre><code>rightLabel?: any = []</code></pre>
3226
+ </div>
3227
+ </div>
3228
+
3229
+ <div class="panel panel-stories">
3230
+
3231
+
3232
+
3233
+ <div class="note ok">
3234
+ <div class="row">
3235
+ <span class="ex-name">Imports</span>
3236
+ </div>
3237
+ <pre><code>import { SisccFooter } from "@sis-cc/dotstatsuite-visions";</code></pre>
3238
+ </div>
3239
+
3240
+
3241
+ <div class="note ok">
3242
+ <div class="row">
3243
+ <span class="ex-name">Default</span>
3244
+ <span class="badge ok">story ok</span>
3245
+ </div>
3246
+
3247
+
3248
+ <pre><code>const Default = () =&gt; &lt;SisccFooter /&gt;;</code></pre>
3249
+ </div>
3250
+ </div>
3251
+
3252
+
3253
+ </div>
3254
+ </article>
3255
+ <article
3256
+ class="card
3257
+ no-error
3258
+ has-info
3259
+ no-story-error
3260
+ no-doc-error"
3261
+ role="listitem"
3262
+ aria-label="Spotlight">
3263
+ <div class="head">
3264
+ <div class="title">
3265
+ <h2><span class="status-dot dot-ok"></span> Spotlight</h2>
3266
+ <div class="badges">
3267
+ <label for="c-32-example-spotlight-props" class="badge ok as-toggle">12 prop types</label>
3268
+ <label for="c-32-example-spotlight-info" class="badge info as-toggle">1 info</label>
3269
+ <label for="c-32-example-spotlight-stories" class="badge ok as-toggle">1 story</label>
3270
+
3271
+
3272
+ </div>
3273
+ </div>
3274
+ <div class="meta" title="./src/stories/Spotlight.stories.jsx">example-spotlight · ./src/stories/Spotlight.stories.jsx</div>
3275
+
3276
+
3277
+
3278
+ </div>
3279
+
3280
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3281
+
3282
+ <input id="c-32-example-spotlight-info" class="tg tg-info" type="checkbox" hidden />
3283
+ <input id="c-32-example-spotlight-stories" class="tg tg-stories" type="checkbox" hidden />
3284
+
3285
+
3286
+ <input id="c-32-example-spotlight-props" class="tg tg-props" type="checkbox" hidden />
3287
+
3288
+ <div class="panels">
3289
+
3290
+
3291
+ <div class="panel panel-info">
3292
+
3293
+ <div class="note info">
3294
+ <div class="note-title">Info</div>
3295
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
3296
+ </div>
3297
+ </div>
3298
+
3299
+ <div class="panel panel-props">
3300
+ <div class="note ok">
3301
+ <div class="row">
3302
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
3303
+ <span class="badge ok">12 prop types</span>
3304
+ </div>
3305
+ <pre><code>Component: src/Spotlight/Spotlight.jsx::Spotlight</code></pre>
3306
+ <pre><code>Props:</code></pre>
3307
+ <pre><code>action?: func
3308
+
3309
+ classes?: object
3310
+
3311
+ className?: object
3312
+
3313
+ defaultSpotlight?: shape
3314
+
3315
+ fullWidth?: bool
3316
+
3317
+ hasClearAll?: bool
3318
+
3319
+ hasCommit?: bool
3320
+
3321
+ placeholder?: string
3322
+
3323
+ term?: string
3324
+
3325
+ testId?: string = &#39;spotlight&#39;
3326
+
3327
+ withAutoFocus?: bool = false
3328
+
3329
+ withBorder?: bool</code></pre>
3330
+ </div>
3331
+ </div>
3332
+
3333
+ <div class="panel panel-stories">
3334
+
3335
+
3336
+
3337
+ <div class="note ok">
3338
+ <div class="row">
3339
+ <span class="ex-name">Imports</span>
3340
+ </div>
3341
+ <pre><code>import { Spotlight } from "@sis-cc/dotstatsuite-visions";</code></pre>
3342
+ </div>
3343
+
3344
+
3345
+ <div class="note ok">
3346
+ <div class="row">
3347
+ <span class="ex-name">Default</span>
3348
+ <span class="badge ok">story ok</span>
3349
+ </div>
3350
+
3351
+
3352
+ <pre><code>const Default = () =&gt; &lt;Spotlight /&gt;;</code></pre>
3353
+ </div>
3354
+ </div>
3355
+
3356
+
3357
+ </div>
3358
+ </article>
3359
+ <article
3360
+ class="card
3361
+ no-error
3362
+ has-info
3363
+ no-story-error
3364
+ no-doc-error"
3365
+ role="listitem"
3366
+ aria-label="TableFooter">
3367
+ <div class="head">
3368
+ <div class="title">
3369
+ <h2><span class="status-dot dot-ok"></span> TableFooter</h2>
3370
+ <div class="badges">
3371
+ <label for="c-33-example-tablefooter-props" class="badge ok as-toggle">1 prop type</label>
3372
+ <label for="c-33-example-tablefooter-info" class="badge info as-toggle">1 info</label>
3373
+ <label for="c-33-example-tablefooter-stories" class="badge ok as-toggle">1 story</label>
3374
+
3375
+
3376
+ </div>
3377
+ </div>
3378
+ <div class="meta" title="./src/stories/TableFooter.stories.jsx">example-tablefooter · ./src/stories/TableFooter.stories.jsx</div>
3379
+
3380
+
3381
+
3382
+ </div>
3383
+
3384
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3385
+
3386
+ <input id="c-33-example-tablefooter-info" class="tg tg-info" type="checkbox" hidden />
3387
+ <input id="c-33-example-tablefooter-stories" class="tg tg-stories" type="checkbox" hidden />
3388
+
3389
+
3390
+ <input id="c-33-example-tablefooter-props" class="tg tg-props" type="checkbox" hidden />
3391
+
3392
+ <div class="panels">
3393
+
3394
+
3395
+ <div class="panel panel-info">
3396
+
3397
+ <div class="note info">
3398
+ <div class="note-title">Info</div>
3399
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
3400
+ </div>
3401
+ </div>
3402
+
3403
+ <div class="panel panel-props">
3404
+ <div class="note ok">
3405
+ <div class="row">
3406
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
3407
+ <span class="badge ok">1 prop type</span>
3408
+ </div>
3409
+ <pre><code>Component: src/TableFooter/TableFooter.jsx::TableFooter</code></pre>
3410
+ <pre><code>Props:</code></pre>
3411
+ <pre><code>height?: any = 25</code></pre>
3412
+ </div>
3413
+ </div>
3414
+
3415
+ <div class="panel panel-stories">
3416
+
3417
+
3418
+
3419
+ <div class="note ok">
3420
+ <div class="row">
3421
+ <span class="ex-name">Imports</span>
3422
+ </div>
3423
+ <pre><code>import { TableFooter } from "@sis-cc/dotstatsuite-visions";</code></pre>
3424
+ </div>
3425
+
3426
+
3427
+ <div class="note ok">
3428
+ <div class="row">
3429
+ <span class="ex-name">Default</span>
3430
+ <span class="badge ok">story ok</span>
3431
+ </div>
3432
+
3433
+
3434
+ <pre><code>const Default = () =&gt; &lt;TableFooter /&gt;;</code></pre>
3435
+ </div>
3436
+ </div>
3437
+
3438
+
3439
+ </div>
3440
+ </article>
3441
+ <article
3442
+ class="card
3443
+ no-error
3444
+ has-info
3445
+ no-story-error
3446
+ no-doc-error"
3447
+ role="listitem"
3448
+ aria-label="TableHeader">
3449
+ <div class="head">
3450
+ <div class="title">
3451
+ <h2><span class="status-dot dot-ok"></span> TableHeader</h2>
3452
+ <div class="badges">
3453
+
3454
+ <label for="c-34-example-tableheader-info" class="badge info as-toggle">1 info</label>
3455
+ <label for="c-34-example-tableheader-stories" class="badge ok as-toggle">1 story</label>
3456
+
3457
+
3458
+ </div>
3459
+ </div>
3460
+ <div class="meta" title="./src/stories/TableHeader.stories.jsx">example-tableheader · ./src/stories/TableHeader.stories.jsx</div>
3461
+
3462
+
3463
+
3464
+ </div>
3465
+
3466
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3467
+
3468
+ <input id="c-34-example-tableheader-info" class="tg tg-info" type="checkbox" hidden />
3469
+ <input id="c-34-example-tableheader-stories" class="tg tg-stories" type="checkbox" hidden />
3470
+
3471
+
3472
+
3473
+
3474
+ <div class="panels">
3475
+
3476
+
3477
+ <div class="panel panel-info">
3478
+
3479
+ <div class="note info">
3480
+ <div class="note-title">Info</div>
3481
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
3482
+ </div>
3483
+ </div>
3484
+
3485
+
3486
+ <div class="panel panel-stories">
3487
+
3488
+
3489
+
3490
+ <div class="note ok">
3491
+ <div class="row">
3492
+ <span class="ex-name">Imports</span>
3493
+ </div>
3494
+ <pre><code>import { TableHeader } from "@sis-cc/dotstatsuite-visions";</code></pre>
3495
+ </div>
3496
+
3497
+
3498
+ <div class="note ok">
3499
+ <div class="row">
3500
+ <span class="ex-name">Default</span>
3501
+ <span class="badge ok">story ok</span>
3502
+ </div>
3503
+
3504
+
3505
+ <pre><code>const Default = () =&gt; &lt;TableHeader /&gt;;</code></pre>
3506
+ </div>
3507
+ </div>
3508
+
3509
+
3510
+ </div>
3511
+ </article>
3512
+ <article
3513
+ class="card
3514
+ no-error
3515
+ has-info
3516
+ no-story-error
3517
+ no-doc-error"
3518
+ role="listitem"
3519
+ aria-label="TableHtml5">
3520
+ <div class="head">
3521
+ <div class="title">
3522
+ <h2><span class="status-dot dot-ok"></span> TableHtml5</h2>
3523
+ <div class="badges">
3524
+ <label for="c-35-example-tablehtml5-props" class="badge ok as-toggle">6 prop types</label>
3525
+ <label for="c-35-example-tablehtml5-info" class="badge info as-toggle">1 info</label>
3526
+ <label for="c-35-example-tablehtml5-stories" class="badge ok as-toggle">1 story</label>
3527
+
3528
+
3529
+ </div>
3530
+ </div>
3531
+ <div class="meta" title="./src/stories/TableHtml5.stories.jsx">example-tablehtml5 · ./src/stories/TableHtml5.stories.jsx</div>
3532
+
3533
+
3534
+
3535
+ </div>
3536
+
3537
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3538
+
3539
+ <input id="c-35-example-tablehtml5-info" class="tg tg-info" type="checkbox" hidden />
3540
+ <input id="c-35-example-tablehtml5-stories" class="tg tg-stories" type="checkbox" hidden />
3541
+
3542
+
3543
+ <input id="c-35-example-tablehtml5-props" class="tg tg-props" type="checkbox" hidden />
3544
+
3545
+ <div class="panels">
3546
+
3547
+
3548
+ <div class="panel panel-info">
3549
+
3550
+ <div class="note info">
3551
+ <div class="note-title">Info</div>
3552
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
3553
+ </div>
3554
+ </div>
3555
+
3556
+ <div class="panel panel-props">
3557
+ <div class="note ok">
3558
+ <div class="row">
3559
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
3560
+ <span class="badge ok">6 prop types</span>
3561
+ </div>
3562
+ <pre><code>Component: src/TableHtml5/TableHtml5.jsx::TableHtml5</code></pre>
3563
+ <pre><code>Props:</code></pre>
3564
+ <pre><code>cellValueAccessor?: any = _curry1(_identity)
3565
+
3566
+ headerData?: any = []
3567
+
3568
+ isNoWrap?: any = R.always(false)
3569
+
3570
+ labelAccessor?: any = (item) =&gt; {
3571
+ if (R.is(Object, item)) {
3572
+ return R.prop(&#39;name&#39;, item);
3573
+ }
3574
+ return R.pipe(R.pluck(&#39;name&#39;), R.join(&#39;, &#39;))(item);
3575
+ }
3576
+
3577
+ sectionsData?: any = []
3578
+
3579
+ testId?: any = &#39;vis-table&#39;</code></pre>
3580
+ </div>
3581
+ </div>
3582
+
3583
+ <div class="panel panel-stories">
3584
+
3585
+
3586
+
3587
+ <div class="note ok">
3588
+ <div class="row">
3589
+ <span class="ex-name">Imports</span>
3590
+ </div>
3591
+ <pre><code>import { TableHtml5 } from "@sis-cc/dotstatsuite-visions";</code></pre>
3592
+ </div>
3593
+
3594
+
3595
+ <div class="note ok">
3596
+ <div class="row">
3597
+ <span class="ex-name">Default</span>
3598
+ <span class="badge ok">story ok</span>
3599
+ </div>
3600
+
3601
+
3602
+ <pre><code>const Default = () =&gt; &lt;TableHtml5 /&gt;;</code></pre>
3603
+ </div>
3604
+ </div>
3605
+
3606
+
3607
+ </div>
3608
+ </article>
3609
+ <article
3610
+ class="card
3611
+ no-error
3612
+ has-info
3613
+ no-story-error
3614
+ no-doc-error"
3615
+ role="listitem"
3616
+ aria-label="TableLayout">
3617
+ <div class="head">
3618
+ <div class="title">
3619
+ <h2><span class="status-dot dot-ok"></span> TableLayout</h2>
3620
+ <div class="badges">
3621
+ <label for="c-36-example-tablelayout-props" class="badge ok as-toggle">4 prop types</label>
3622
+ <label for="c-36-example-tablelayout-info" class="badge info as-toggle">1 info</label>
3623
+ <label for="c-36-example-tablelayout-stories" class="badge ok as-toggle">1 story</label>
3624
+
3625
+
3626
+ </div>
3627
+ </div>
3628
+ <div class="meta" title="./src/stories/TableLayout.stories.jsx">example-tablelayout · ./src/stories/TableLayout.stories.jsx</div>
3629
+
3630
+
3631
+
3632
+ </div>
3633
+
3634
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3635
+
3636
+ <input id="c-36-example-tablelayout-info" class="tg tg-info" type="checkbox" hidden />
3637
+ <input id="c-36-example-tablelayout-stories" class="tg tg-stories" type="checkbox" hidden />
3638
+
3639
+
3640
+ <input id="c-36-example-tablelayout-props" class="tg tg-props" type="checkbox" hidden />
3641
+
3642
+ <div class="panels">
3643
+
3644
+
3645
+ <div class="panel panel-info">
3646
+
3647
+ <div class="note info">
3648
+ <div class="note-title">Info</div>
3649
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
3650
+ </div>
3651
+ </div>
3652
+
3653
+ <div class="panel panel-props">
3654
+ <div class="note ok">
3655
+ <div class="row">
3656
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
3657
+ <span class="badge ok">4 prop types</span>
3658
+ </div>
3659
+ <pre><code>Component: src/TableLayout/TableLayout.jsx</code></pre>
3660
+ <pre><code>Props:</code></pre>
3661
+ <pre><code>itemRenderer?: any = R.prop(&#39;name&#39;)
3662
+
3663
+ items?: any = []
3664
+
3665
+ layout?: any = {}
3666
+
3667
+ optionalItem?: any = {}</code></pre>
3668
+ </div>
3669
+ </div>
3670
+
3671
+ <div class="panel panel-stories">
3672
+
3673
+
3674
+
3675
+ <div class="note ok">
3676
+ <div class="row">
3677
+ <span class="ex-name">Imports</span>
3678
+ </div>
3679
+ <pre><code>import { TableLayout } from "@sis-cc/dotstatsuite-visions";</code></pre>
3680
+ </div>
3681
+
3682
+
3683
+ <div class="note ok">
3684
+ <div class="row">
3685
+ <span class="ex-name">Default</span>
3686
+ <span class="badge ok">story ok</span>
3687
+ </div>
3688
+
3689
+
3690
+ <pre><code>const Default = () =&gt; &lt;TableLayout /&gt;;</code></pre>
3691
+ </div>
3692
+ </div>
3693
+
3694
+
3695
+ </div>
3696
+ </article>
3697
+ <article
3698
+ class="card
3699
+ no-error
3700
+ has-info
3701
+ no-story-error
3702
+ no-doc-error"
3703
+ role="listitem"
3704
+ aria-label="TablePreview">
3705
+ <div class="head">
3706
+ <div class="title">
3707
+ <h2><span class="status-dot dot-ok"></span> TablePreview</h2>
3708
+ <div class="badges">
3709
+ <label for="c-37-example-tablepreview-props" class="badge ok as-toggle">4 prop types</label>
3710
+ <label for="c-37-example-tablepreview-info" class="badge info as-toggle">1 info</label>
3711
+ <label for="c-37-example-tablepreview-stories" class="badge ok as-toggle">1 story</label>
3712
+
3713
+
3714
+ </div>
3715
+ </div>
3716
+ <div class="meta" title="./src/stories/TablePreview.stories.jsx">example-tablepreview · ./src/stories/TablePreview.stories.jsx</div>
3717
+
3718
+
3719
+
3720
+ </div>
3721
+
3722
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3723
+
3724
+ <input id="c-37-example-tablepreview-info" class="tg tg-info" type="checkbox" hidden />
3725
+ <input id="c-37-example-tablepreview-stories" class="tg tg-stories" type="checkbox" hidden />
3726
+
3727
+
3728
+ <input id="c-37-example-tablepreview-props" class="tg tg-props" type="checkbox" hidden />
3729
+
3730
+ <div class="panels">
3731
+
3732
+
3733
+ <div class="panel panel-info">
3734
+
3735
+ <div class="note info">
3736
+ <div class="note-title">Info</div>
3737
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
3738
+ </div>
3739
+ </div>
3740
+
3741
+ <div class="panel panel-props">
3742
+ <div class="note ok">
3743
+ <div class="row">
3744
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
3745
+ <span class="badge ok">4 prop types</span>
3746
+ </div>
3747
+ <pre><code>Component: src/TablePreview/TablePreview.jsx</code></pre>
3748
+ <pre><code>Props:</code></pre>
3749
+ <pre><code>header?: any = []
3750
+
3751
+ labelRenderer?: any = R.prop(&#39;name&#39;)
3752
+
3753
+ rows?: any = []
3754
+
3755
+ sections?: any = []</code></pre>
3756
+ </div>
3757
+ </div>
3758
+
3759
+ <div class="panel panel-stories">
3760
+
3761
+
3762
+
3763
+ <div class="note ok">
3764
+ <div class="row">
3765
+ <span class="ex-name">Imports</span>
3766
+ </div>
3767
+ <pre><code>import { TablePreview } from "@sis-cc/dotstatsuite-visions";</code></pre>
3768
+ </div>
3769
+
3770
+
3771
+ <div class="note ok">
3772
+ <div class="row">
3773
+ <span class="ex-name">Default</span>
3774
+ <span class="badge ok">story ok</span>
3775
+ </div>
3776
+
3777
+
3778
+ <pre><code>const Default = () =&gt; &lt;TablePreview /&gt;;</code></pre>
3779
+ </div>
3780
+ </div>
3781
+
3782
+
3783
+ </div>
3784
+ </article>
3785
+ <article
3786
+ class="card
3787
+ no-error
3788
+ has-info
3789
+ no-story-error
3790
+ no-doc-error"
3791
+ role="listitem"
3792
+ aria-label="Tag">
3793
+ <div class="head">
3794
+ <div class="title">
3795
+ <h2><span class="status-dot dot-ok"></span> Tag</h2>
3796
+ <div class="badges">
3797
+
3798
+ <label for="c-38-example-tag-info" class="badge info as-toggle">1 info</label>
3799
+ <label for="c-38-example-tag-stories" class="badge ok as-toggle">1 story</label>
3800
+
3801
+
3802
+ </div>
3803
+ </div>
3804
+ <div class="meta" title="./src/stories/Tag.stories.jsx">example-tag · ./src/stories/Tag.stories.jsx</div>
3805
+
3806
+
3807
+
3808
+ </div>
3809
+
3810
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3811
+
3812
+ <input id="c-38-example-tag-info" class="tg tg-info" type="checkbox" hidden />
3813
+ <input id="c-38-example-tag-stories" class="tg tg-stories" type="checkbox" hidden />
3814
+
3815
+
3816
+
3817
+
3818
+ <div class="panels">
3819
+
3820
+
3821
+ <div class="panel panel-info">
3822
+
3823
+ <div class="note info">
3824
+ <div class="note-title">Info</div>
3825
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
3826
+ </div>
3827
+ </div>
3828
+
3829
+
3830
+ <div class="panel panel-stories">
3831
+
3832
+
3833
+
3834
+ <div class="note ok">
3835
+ <div class="row">
3836
+ <span class="ex-name">Imports</span>
3837
+ </div>
3838
+ <pre><code>import { Tag } from "@sis-cc/dotstatsuite-visions";</code></pre>
3839
+ </div>
3840
+
3841
+
3842
+ <div class="note ok">
3843
+ <div class="row">
3844
+ <span class="ex-name">Default</span>
3845
+ <span class="badge ok">story ok</span>
3846
+ </div>
3847
+
3848
+
3849
+ <pre><code>const Default = () =&gt; &lt;Tag /&gt;;</code></pre>
3850
+ </div>
3851
+ </div>
3852
+
3853
+
3854
+ </div>
3855
+ </article>
3856
+ <article
3857
+ class="card
3858
+ no-error
3859
+ has-info
3860
+ no-story-error
3861
+ no-doc-error"
3862
+ role="listitem"
3863
+ aria-label="ToggleButton">
3864
+ <div class="head">
3865
+ <div class="title">
3866
+ <h2><span class="status-dot dot-ok"></span> ToggleButton</h2>
3867
+ <div class="badges">
3868
+ <label for="c-39-example-togglebutton-props" class="badge ok as-toggle">2 prop types</label>
3869
+ <label for="c-39-example-togglebutton-info" class="badge info as-toggle">1 info</label>
3870
+ <label for="c-39-example-togglebutton-stories" class="badge ok as-toggle">1 story</label>
3871
+
3872
+
3873
+ </div>
3874
+ </div>
3875
+ <div class="meta" title="./src/stories/ToggleButton.stories.jsx">example-togglebutton · ./src/stories/ToggleButton.stories.jsx</div>
3876
+
3877
+
3878
+
3879
+ </div>
3880
+
3881
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3882
+
3883
+ <input id="c-39-example-togglebutton-info" class="tg tg-info" type="checkbox" hidden />
3884
+ <input id="c-39-example-togglebutton-stories" class="tg tg-stories" type="checkbox" hidden />
3885
+
3886
+
3887
+ <input id="c-39-example-togglebutton-props" class="tg tg-props" type="checkbox" hidden />
3888
+
3889
+ <div class="panels">
3890
+
3891
+
3892
+ <div class="panel panel-info">
3893
+
3894
+ <div class="note info">
3895
+ <div class="note-title">Info</div>
3896
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
3897
+ </div>
3898
+ </div>
3899
+
3900
+ <div class="panel panel-props">
3901
+ <div class="note ok">
3902
+ <div class="row">
3903
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
3904
+ <span class="badge ok">2 prop types</span>
3905
+ </div>
3906
+ <pre><code>Component: src/ToggleButton/ToggleButton.jsx::ToggleButton</code></pre>
3907
+ <pre><code>Props:</code></pre>
3908
+ <pre><code>tabIndex?: any = 0
3909
+
3910
+ textTransform?: any = &#39;capitalize&#39;</code></pre>
3911
+ </div>
3912
+ </div>
3913
+
3914
+ <div class="panel panel-stories">
3915
+
3916
+
3917
+
3918
+ <div class="note ok">
3919
+ <div class="row">
3920
+ <span class="ex-name">Imports</span>
3921
+ </div>
3922
+ <pre><code>import { ToggleButton } from "@sis-cc/dotstatsuite-visions";</code></pre>
3923
+ </div>
3924
+
3925
+
3926
+ <div class="note ok">
3927
+ <div class="row">
3928
+ <span class="ex-name">Default</span>
3929
+ <span class="badge ok">story ok</span>
3930
+ </div>
3931
+
3932
+
3933
+ <pre><code>const Default = () =&gt; &lt;ToggleButton /&gt;;</code></pre>
3934
+ </div>
3935
+ </div>
3936
+
3937
+
3938
+ </div>
3939
+ </article>
3940
+ <article
3941
+ class="card
3942
+ no-error
3943
+ has-info
3944
+ no-story-error
3945
+ no-doc-error"
3946
+ role="listitem"
3947
+ aria-label="Tooltip">
3948
+ <div class="head">
3949
+ <div class="title">
3950
+ <h2><span class="status-dot dot-ok"></span> Tooltip</h2>
3951
+ <div class="badges">
3952
+ <label for="c-40-example-tooltip-props" class="badge ok as-toggle">1 prop type</label>
3953
+ <label for="c-40-example-tooltip-info" class="badge info as-toggle">1 info</label>
3954
+ <label for="c-40-example-tooltip-stories" class="badge ok as-toggle">1 story</label>
3955
+
3956
+
3957
+ </div>
3958
+ </div>
3959
+ <div class="meta" title="./src/stories/Tooltip.stories.jsx">example-tooltip · ./src/stories/Tooltip.stories.jsx</div>
3960
+
3961
+
3962
+
3963
+ </div>
3964
+
3965
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3966
+
3967
+ <input id="c-40-example-tooltip-info" class="tg tg-info" type="checkbox" hidden />
3968
+ <input id="c-40-example-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
3969
+
3970
+
3971
+ <input id="c-40-example-tooltip-props" class="tg tg-props" type="checkbox" hidden />
3972
+
3973
+ <div class="panels">
3974
+
3975
+
3976
+ <div class="panel panel-info">
3977
+
3978
+ <div class="note info">
3979
+ <div class="note-title">Info</div>
3980
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
3981
+ </div>
3982
+ </div>
3983
+
3984
+ <div class="panel panel-props">
3985
+ <div class="note ok">
3986
+ <div class="row">
3987
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
3988
+ <span class="badge ok">1 prop type</span>
3989
+ </div>
3990
+ <pre><code>Component: src/Tooltip/Tooltip.jsx::Tooltip</code></pre>
3991
+ <pre><code>Props:</code></pre>
3992
+ <pre><code>variant?: any = &#39;dark&#39;</code></pre>
3993
+ </div>
3994
+ </div>
3995
+
3996
+ <div class="panel panel-stories">
3997
+
3998
+
3999
+
4000
+ <div class="note ok">
4001
+ <div class="row">
4002
+ <span class="ex-name">Imports</span>
4003
+ </div>
4004
+ <pre><code>import { Tooltip } from "@sis-cc/dotstatsuite-visions";</code></pre>
4005
+ </div>
4006
+
4007
+
4008
+ <div class="note ok">
4009
+ <div class="row">
4010
+ <span class="ex-name">Default</span>
4011
+ <span class="badge ok">story ok</span>
4012
+ </div>
4013
+
4014
+
4015
+ <pre><code>const Default = () =&gt; &lt;Tooltip /&gt;;</code></pre>
4016
+ </div>
4017
+ </div>
4018
+
4019
+
4020
+ </div>
4021
+ </article>
4022
+ <article
4023
+ class="card
4024
+ no-error
4025
+ has-info
4026
+ no-story-error
4027
+ no-doc-error"
4028
+ role="listitem"
4029
+ aria-label="UserRightForm">
4030
+ <div class="head">
4031
+ <div class="title">
4032
+ <h2><span class="status-dot dot-ok"></span> UserRightForm</h2>
4033
+ <div class="badges">
4034
+
4035
+ <label for="c-41-example-userrightform-info" class="badge info as-toggle">1 info</label>
4036
+ <label for="c-41-example-userrightform-stories" class="badge ok as-toggle">1 story</label>
4037
+
4038
+
4039
+ </div>
4040
+ </div>
4041
+ <div class="meta" title="./src/stories/UserRightForm.stories.jsx">example-userrightform · ./src/stories/UserRightForm.stories.jsx</div>
4042
+
4043
+
4044
+
4045
+ </div>
4046
+
4047
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
4048
+
4049
+ <input id="c-41-example-userrightform-info" class="tg tg-info" type="checkbox" hidden />
4050
+ <input id="c-41-example-userrightform-stories" class="tg tg-stories" type="checkbox" hidden />
4051
+
4052
+
4053
+
4054
+
4055
+ <div class="panels">
4056
+
4057
+
4058
+ <div class="panel panel-info">
4059
+
4060
+ <div class="note info">
4061
+ <div class="note-title">Info</div>
4062
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
4063
+ </div>
4064
+ </div>
4065
+
4066
+
4067
+ <div class="panel panel-stories">
4068
+
4069
+
4070
+
4071
+ <div class="note ok">
4072
+ <div class="row">
4073
+ <span class="ex-name">Imports</span>
4074
+ </div>
4075
+ <pre><code>import { UserRightForm } from "@sis-cc/dotstatsuite-visions";</code></pre>
4076
+ </div>
4077
+
4078
+
4079
+ <div class="note ok">
4080
+ <div class="row">
4081
+ <span class="ex-name">Default</span>
4082
+ <span class="badge ok">story ok</span>
4083
+ </div>
4084
+
4085
+
4086
+ <pre><code>const Default = () =&gt; &lt;UserRightForm /&gt;;</code></pre>
4087
+ </div>
4088
+ </div>
4089
+
4090
+
4091
+ </div>
4092
+ </article>
4093
+ <article
4094
+ class="card
4095
+ no-error
4096
+ has-info
4097
+ no-story-error
4098
+ no-doc-error"
4099
+ role="listitem"
4100
+ aria-label="VerticalButton">
4101
+ <div class="head">
4102
+ <div class="title">
4103
+ <h2><span class="status-dot dot-ok"></span> VerticalButton</h2>
4104
+ <div class="badges">
4105
+ <label for="c-42-example-verticalbutton-props" class="badge ok as-toggle">1 prop type</label>
4106
+ <label for="c-42-example-verticalbutton-info" class="badge info as-toggle">1 info</label>
4107
+ <label for="c-42-example-verticalbutton-stories" class="badge ok as-toggle">1 story</label>
4108
+
4109
+
4110
+ </div>
4111
+ </div>
4112
+ <div class="meta" title="./src/stories/VerticalButton.stories.jsx">example-verticalbutton · ./src/stories/VerticalButton.stories.jsx</div>
4113
+
4114
+
4115
+
4116
+ </div>
4117
+
4118
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
4119
+
4120
+ <input id="c-42-example-verticalbutton-info" class="tg tg-info" type="checkbox" hidden />
4121
+ <input id="c-42-example-verticalbutton-stories" class="tg tg-stories" type="checkbox" hidden />
4122
+
4123
+
4124
+ <input id="c-42-example-verticalbutton-props" class="tg tg-props" type="checkbox" hidden />
4125
+
4126
+ <div class="panels">
4127
+
4128
+
4129
+ <div class="panel panel-info">
4130
+
4131
+ <div class="note info">
4132
+ <div class="note-title">Info</div>
4133
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
4134
+ </div>
4135
+ </div>
4136
+
4137
+ <div class="panel panel-props">
4138
+ <div class="note ok">
4139
+ <div class="row">
4140
+ <span class="ex-name">Prop types <small>(react-docgen)</small></span>
4141
+ <span class="badge ok">1 prop type</span>
4142
+ </div>
4143
+ <pre><code>Component: src/VerticalButton/VerticalButton.jsx::VerticalButton</code></pre>
4144
+ <pre><code>Props:</code></pre>
4145
+ <pre><code>sizeLoading?: any = 18</code></pre>
4146
+ </div>
4147
+ </div>
4148
+
4149
+ <div class="panel panel-stories">
4150
+
4151
+
4152
+
4153
+ <div class="note ok">
4154
+ <div class="row">
4155
+ <span class="ex-name">Imports</span>
4156
+ </div>
4157
+ <pre><code>import { VerticalButton } from "@sis-cc/dotstatsuite-visions";</code></pre>
4158
+ </div>
4159
+
4160
+
4161
+ <div class="note ok">
4162
+ <div class="row">
4163
+ <span class="ex-name">Default</span>
4164
+ <span class="badge ok">story ok</span>
4165
+ </div>
4166
+
4167
+
4168
+ <pre><code>const Default = () =&gt; &lt;VerticalButton /&gt;;</code></pre>
4169
+ </div>
4170
+ </div>
4171
+
4172
+
4173
+ </div>
4174
+ </article>
4175
+ <article
4176
+ class="card
4177
+ no-error
4178
+ has-info
4179
+ no-story-error
4180
+ no-doc-error"
4181
+ role="listitem"
4182
+ aria-label="VirtualizedTree">
4183
+ <div class="head">
4184
+ <div class="title">
4185
+ <h2><span class="status-dot dot-ok"></span> VirtualizedTree</h2>
4186
+ <div class="badges">
4187
+
4188
+ <label for="c-43-example-virtualizedtree-info" class="badge info as-toggle">1 info</label>
4189
+ <label for="c-43-example-virtualizedtree-stories" class="badge ok as-toggle">1 story</label>
4190
+
4191
+
4192
+ </div>
4193
+ </div>
4194
+ <div class="meta" title="./src/stories/VirtualizedTree.stories.jsx">example-virtualizedtree · ./src/stories/VirtualizedTree.stories.jsx</div>
4195
+
4196
+
4197
+
4198
+ </div>
4199
+
4200
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
4201
+
4202
+ <input id="c-43-example-virtualizedtree-info" class="tg tg-info" type="checkbox" hidden />
4203
+ <input id="c-43-example-virtualizedtree-stories" class="tg tg-stories" type="checkbox" hidden />
4204
+
4205
+
4206
+
4207
+
4208
+ <div class="panels">
4209
+
4210
+
4211
+ <div class="panel panel-info">
4212
+
4213
+ <div class="note info">
4214
+ <div class="note-title">Info</div>
4215
+ <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
4216
+ </div>
4217
+ </div>
4218
+
4219
+
4220
+ <div class="panel panel-stories">
4221
+
4222
+
4223
+
4224
+ <div class="note ok">
4225
+ <div class="row">
4226
+ <span class="ex-name">Imports</span>
4227
+ </div>
4228
+ <pre><code>import Button from "@mui/material/Button";
4229
+ import Grid from "@mui/material/Grid";
4230
+ import { VirtualizedTree } from "@sis-cc/dotstatsuite-visions";</code></pre>
4231
+ </div>
4232
+
4233
+
4234
+ <div class="note ok">
4235
+ <div class="row">
4236
+ <span class="ex-name">Controlled</span>
4237
+ <span class="badge ok">story ok</span>
4238
+ </div>
4239
+
4240
+
4241
+ <pre><code>const Controlled = () =&gt; &lt;ControlledVirtualizedTree /&gt;;</code></pre>
4242
+ </div>
4243
+ </div>
4244
+
4245
+
4246
+ </div>
4247
+ </article>
4248
+ </div>
4249
+
4250
+
4251
+
4252
+ </div>
4253
+ </main>
4254
+ </body>
4255
+ </html>