@czi-sds/mcp 0.16.0 → 0.18.0

package/data/component-props/DropdownMenu.json

@@ -2,49 +2,154 @@
   "DropdownMenu": {
     "props": {
       "ClickAwayListenerProps": {
-        "type": "Partial<ClickAwayListenerProps>",
-        "isRequired": false
+        "description": "Passes props to the MUI ClickAwayListener .",
+        "isRequired": false,
+        "type": "Partial<ClickAwayListenerProps>"
       },
       "groupBy": {
-        "type": "any",
-        "isRequired": false
+        "description": "Groups menu items according to their assigned section.",
+        "isRequired": false,
+        "type": "function"
       },
       "keepSearchOnSelect": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Maintains a search input when a user selects a menu item (only if multiple selections are allowed via the multiple prop; otherwise the dropdown closes upon selection).",
+        "isRequired": false,
+        "type": "boolean"
       },
       "label": {
-        "type": "string",
-        "isRequired": false
+        "defaultValue": "Search",
+        "description": "The placeholder text of the search input.",
+        "isRequired": false,
+        "type": "string"
       },
       "multiple": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Allows user to select multiple menu items; see more in the MUI Autocomplete API .",
+        "isRequired": false,
+        "type": "boolean"
       },
       "open": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Whether the menu is showing. The menu holds no open state of its own, so this and anchorEl are what the opening control sets.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "options": {
-        "type": "any",
-        "isRequired": false
+        "description": "Required. One object per menu item, each needing at least a name. An option that itself has an options array turns the menu into columns, which changes how it is sized.",
+        "isRequired": false,
+        "type": "T[]"
       },
       "search": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Provides a search bar at the top of the menu from which users can narrow the list of menu items.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "title": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "Sets a heading for the menu.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "subTitle": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "A second line below the header's title. It is only rendered when title is set as well.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "width": {
-        "type": "\"string\" | \"number\" | \"string & {}\"",
-        "isRequired": false
+        "defaultValue": 160,
+        "description": "The width of the menu, as a number of pixels or any CSS width. The 160px minimum still applies underneath it, and a menu whose options are laid out in columns ignores this and sizes itself to its content.",
+        "isRequired": false,
+        "type": "string | number | string & {}"
+      },
+      "anchorEl": {
+        "description": "Required. The element the menu is positioned against, usually the control that opens it. Until it is set the menu renders an empty container: the list is only mounted once there is something to anchor it to. See the MUI Popper API .",
+        "isRequired": true,
+        "type": "HTMLElement | null"
+      },
+      "children": {
+        "description": "Rendered inside the menu below the list, for footers such as an apply button.",
+        "isRequired": false,
+        "type": "JSX.Element | null"
+      },
+      "headerComponentSlot": {
+        "description": "Rendered in the menu's header, below title. Either one is enough to give the menu a header.",
+        "isRequired": false,
+        "type": "Element"
+      },
+      "InputBaseProps": {
+        "description": "Passed to the InputSearch the search prop renders. The menu sets autoFocus from isSearchAutoFocus and onClick to a no-op after these, so those two are the menu's to decide.",
+        "isRequired": false,
+        "type": "Partial<InputSearchProps>"
+      },
+      "isOptionEqualToValue": {
+        "defaultValue": "(option, val) => option.name === val.name",
+        "description": "Changes how a selected value is compared against the available options; see more in the MUI Autocomplete API or in the Recipes section.",
+        "isRequired": false,
+        "type": "function"
+      },
+      "isSearchAutoFocus": {
+        "defaultValue": true,
+        "description": "Puts the cursor in the search input as the menu opens. It overrides any autoFocus given through InputBaseProps.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "noOptionsText": {
+        "defaultValue": "No options",
+        "description": "Sets the text that displays if there are no matching search results; see more in the MUI Autocomplete API .",
+        "isRequired": false,
+        "type": "string"
+      },
+      "onClickAway": {
+        "defaultValue": "noop",
+        "description": "Sets what happens when a user clicks outside of the DropdownMenu. This is where a menu is normally closed. Signature: function(event: MouseEvent | TouchEvent) => void",
+        "isRequired": false,
+        "type": "function"
+      },
+      "onClose": {
+        "description": "Called when the list asks to close, such as on selecting an option in a single-select menu. Closing is still yours to carry out through open. Signature: function(event: SyntheticEvent, reason: AutocompleteCloseReason) => void",
+        "isRequired": false,
+        "type": "(event: SyntheticEvent<Element, Event>, reason: AutocompleteCloseReason) => void"
+      },
+      "onInputChange": {
+        "description": "Called as the search text changes; see more in the MUI Autocomplete API or in the Recipes section. Signature: function(event: SyntheticEvent, value: string, reason: AutocompleteInputChangeReason) => void",
+        "isRequired": false,
+        "type": "(event: SyntheticEvent<Element, Event>, value: string, reason: AutocompleteInputChangeReason) => void"
+      },
+      "onOpen": {
+        "description": "Called when the list asks to open. Signature: function(event: SyntheticEvent) => void",
+        "isRequired": false,
+        "type": "(event: SyntheticEvent<Element, Event>) => void"
+      },
+      "PaperComponent": {
+        "defaultValue": "SDSs StyledPaper",
+        "description": "The surface the menu is drawn on. Replace it to restyle the menu's background, border and shadow.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "PopperBaseProps": {
+        "defaultValue": {},
+        "description": "Passes custom props to the MUI Popper the menu is placed with. Learn more in the Popper documentation , and see all the props available to pass to it on the Popper API page . See an example of PopperBaseProps in use in the Recipes section. Its sx is merged over the menu's own sizing, so this is also how the 160px minimum width is lifted.",
+        "isRequired": false,
+        "type": "Partial<PopperProps>"
+      },
+      "PopperComponent": {
+        "defaultValue": "SDSs StyledPopper",
+        "description": "The MUI Popper component is included as part of the SDS DropdownMenu component, and its styles can be changed or added to.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "PopperPlacement": {
+        "defaultValue": "bottom-start",
+        "description": "Where the menu sits relative to its anchor, as MUI's Popper understands it: one of \"auto\", \"top\", \"bottom\", \"left\", \"right\", each also available with a -start or -end suffix.",
+        "isRequired": false,
+        "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | \"auto\" | \"auto-start\" | \"auto-end\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\""
+      },
+      "renderInput": {
+        "description": "Replaces the search input entirely. Most menus want InputBaseProps instead, which keeps the SDS input. Signature: function(params: AutocompleteRenderInputParams) => ReactNode",
+        "isRequired": false,
+        "type": "ReactNode"
       }
     }
   }
-}
+}

package/data/component-props/HeatmapChart.json

@@ -2,28 +2,104 @@
   "HeatmapChart": {
     "props": {
       "axisPointer": {
-        "type": "\"AxisPointerOption\" | \"AxisPointerOption[]\"",
+        "defaultValue": "hidden",
+        "description": "The crosshair following the pointer. One object applies to both axes; a\ntwo-entry array configures them separately.\nhttps://echarts.apache.org/en/option.html#axisPointer",
         "isRequired": false,
-        "description": "Display reference line and axis value under mouse pointer\nhttps://echarts.apache.org/en/option.html#axisPointer"
+        "type": "AxisPointerOption | AxisPointerOption[]"
       },
       "camera": {
-        "type": "{ active: boolean; height: number; width: number; }",
+        "defaultValue": "40 × 20 when active",
+        "description": "Renders only a window of the grid, measured in cells, and lets the pointer\npan it. Sizes are ignored unless `active` is true.\n\nThe `camera` prop is utilized for implementing camera view port functionality\nwithin a specific area of the chart. This feature empowers users to render\na confined portion of the heatmap. This selective rendering strategy becomes\nespecially advantageous when dealing with extensive datasets. Instead of\nrendering the entire heatmap at once, the chart dynamically loads and renders\nspecific segments as the user scrolls through the data. This approach optimizes\nperformance and enables the creation of heatmaps with large amounts of data.\n\nThe `height` and `width` properties are used to specify the dimensions of the\ncamera view port. The `active` property is used to enable or disable the camera\nview port functionality.",
         "isRequired": false,
-        "description": "The `camera` prop is utilized for implementing camera view port functionality\nwithin a specific area of the chart. This feature empowers users to render\na confined portion of the heatmap. This selective rendering strategy becomes\nespecially advantageous when dealing with extensive datasets. Instead of\nrendering the entire heatmap at once, the chart dynamically loads and renders\nspecific segments as the user scrolls through the data. This approach optimizes\nperformance and enables the creation of heatmaps with large amounts of data.\n\nThe `height` and `width` properties are used to specify the dimensions of the\ncamera view port. The `active` property is used to enable or disable the camera\nview port functionality."
+        "type": "{ active: boolean; height: number; width: number; }"
       },
       "echartsRendererMode": {
-        "type": "\"svg\" | \"canvas\"",
-        "isRequired": false
+        "defaultValue": "svg",
+        "description": "Which renderer ECharts initialises with. Canvas copes better with very\nlarge grids. Changing it rebuilds the chart.",
+        "isRequired": false,
+        "type": "\"canvas\" | \"svg\""
       },
       "symbol": {
-        "type": "\"circle\" | \"rect\" | \"roundRect\"",
+        "defaultValue": "rect",
+        "description": "The shape of a cell. Circles turn the grid into a dot plot, where diameter\ncan carry a second measurement.",
         "isRequired": false,
-        "description": "The shape of the symbol."
+        "type": "\"circle\" | \"rect\" | \"roundRect\""
+      },
+      "data": {
+        "defaultValue": "- (required)",
+        "description": "The cells, as a flat array of objects whose fields are named by `encode`.\nThe data point object shape can be whatever you like, but it must be consistent with the `encode` option\nFor example, if the data point shape is:\n{\n  geneIndex: 0,\n  cellTypeIndex: 0,\n  percentage: 0.5\n}\nand you want geneIndex to be encoded to x axis and cellTypeIndex to be encoded to y axis, then make sure your encode option is:\nencode: {\n  x: 'geneIndex',\n  y: 'cellTypeIndex'\n}",
+        "isRequired": true,
+        "type": "OptionSourceDataTypedArray | OptionSourceDataOriginal<OptionDataValue, OptionDataItemOriginal<OptionDataValue>> | OptionSourceDataObjectRows<OptionDataValue> | OptionSourceDataArrayRows<OptionDataValue> | OptionSourceDataKeyedColumns<OptionDataValue>"
+      },
+      "xAxisData": {
+        "defaultValue": "- (required)",
+        "description": "The categories along the x axis. A cell's encoded x value is an index into\nthis array.\nFor example:\n[{ value: \"gene1\", textStyle: { color: \"red\" } }, \"gene2\", \"gene3\"]",
+        "isRequired": true,
+        "type": "CategoryAxisData"
+      },
+      "yAxisData": {
+        "defaultValue": "- (required)",
+        "description": "The categories along the y axis.\nFor example:\n[{ value: \"cellType1\", textStyle: { color: \"red\" } }, \"cellType2\", \"cellType3\"]",
+        "isRequired": true,
+        "type": "CategoryAxisData"
+      },
+      "width": {
+        "defaultValue": "- (required)",
+        "description": "Width of the chart in pixels. Must be greater than zero; the component\nthrows otherwise.",
+        "isRequired": true,
+        "type": "number"
+      },
+      "height": {
+        "defaultValue": "- (required)",
+        "description": "Height of the chart in pixels, under the same rule.",
+        "isRequired": true,
+        "type": "number"
       },
-      "tooltip": {
-        "type": "any",
-        "isRequired": false
+      "encode": {
+        "description": "Which fields of a data item place it on each axis. Omitting it leaves\nECharts to guess from the field order.\nFor example, if the data is:\n{\n  geneIndex: 0,\n  cellTypeIndex: 0,\n  percentage: 0.5\n}\nand we want to encode `geneIndex` to x axis and `cellTypeIndex` to y axis, then\nencode: {\n x: 'geneIndex',\n y: 'cellTypeIndex'\n}\nhttps://echarts.apache.org/en/option.html#series-scatter.encode",
+        "isRequired": false,
+        "type": "{ x: string; y: string; }"
+      },
+      "symbolSize": {
+        "defaultValue": 5,
+        "description": "Cell size in pixels: one number, a [width, height] pair, or a callback\ngiven the data item. Set it to the cell pitch for a solid grid.\n\n`symbolSize` can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is 10.\n\nIf size of symbols needs to be different, you can set with callback function in the following format:\n\n(value: Array|number, params: Object) => number|Array\n\nThe first parameter value is the value in data, and the second parameter params is the rest parameters of data item.\nhttps://echarts.apache.org/en/option.html#series-scatter.symbolSize",
+        "isRequired": false,
+        "type": "number | number[] | SymbolSizeCallback<CallbackDataParams>"
+      },
+      "itemStyle": {
+        "defaultValue": "solid black",
+        "description": "How a cell is painted. Its color accepts a callback receiving the data\nitem, which is how a value becomes a color.\nhttps://echarts.apache.org/en/option.html#series-scatter.itemStyle",
+        "isRequired": false,
+        "type": "ItemStyleOption<CallbackDataParams>"
+      },
+      "emphasis": {
+        "defaultValue": "a 2–4px border",
+        "description": "How a cell is drawn while the pointer is over it. Takes the same shape as\n`itemStyle`: color, border, opacity.\nhttps://echarts.apache.org/en/option.html#series-scatter.emphasis",
+        "isRequired": false,
+        "type": "ScatterStateOption<CallbackDataParams> & { focus?: DefaultEmphasisFocus | undefined; scale?: number | boolean | undefined; } & { ...; }"
+      },
+      "dataZoom": {
+        "defaultValue": "the camera window",
+        "description": "ECharts' dataZoom configuration for that window, merged over the defaults\nit sets. One object applies to both axes; a two-entry array configures them\nseparately. It reaches the chart only while `camera.active` is true.\n\nThe `dataZoom` prop is utilized for implementing zoom functionality within a\nspecific area of the chart. This feature empowers users to inspect data in\ngranular detail, obtain an overview of the entire dataset, or eliminate\noutlier points.\nBy applying the `dataZoom` prop while locking the zoom level, the chart\nefficiently renders a confined portion of the heatmap. This selective\nrendering strategy becomes especially advantageous when dealing with\nextensive datasets. Instead of rendering the entire heatmap at once,\nthe chart dynamically loads and renders specific segments as the user\nscrolls through the data. This approach optimizes performance and enables\nthe creation of heatmaps with large amounts of data.\nhttps://echarts.apache.org/en/option.html#dataZoom",
+        "isRequired": false,
+        "type": "SliderDataZoomOption | InsideDataZoomOption | DataZoomComponentOption[]"
+      },
+      "grid": {
+        "defaultValue": "fills the container",
+        "description": "Where the plotting area sits inside the container. The function form\nreceives the computed default, for insetting it without recomputing the\nsize.\nhttps://echarts.apache.org/en/option.html#grid",
+        "isRequired": false,
+        "type": "GridOption | GridOption[] | (defaultOption: GridOption | GridOption[] | undefined) => GridOption | GridOption[] | undefined"
+      },
+      "options": {
+        "description": "Anything else ECharts understands, merged over the generated options.\nhttps://echarts.apache.org/en/option.html",
+        "isRequired": false,
+        "type": "EChartsOption"
+      },
+      "onEvents": {
+        "description": "ECharts event listeners by name. Each handler gets the raw event, whose\ndata property is the cell, and the chart instance.\nhttps://echarts.apache.org/en/api.html#events",
+        "isRequired": false,
+        "type": "Record<string, (event: unknown, chart: EChartsType) => void>"
       }
     }
   }
-}
+}

package/data/component-props/Hero.json

@@ -2,81 +2,122 @@
   "Hero": {
     "props": {
       "backgroundFill": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "A string becomes the background color, so any CSS color or gradient works. A node is rendered full-bleed behind the content, and an img or video inside it is scaled to cover the section.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "captionText": {
-        "type": "string",
-        "isRequired": false
+        "description": "Supporting copy rendered below the headline.",
+        "isRequired": false,
+        "type": "string"
       },
       "darkeningMask": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Adds a solid layer over the background. Pair it with darkeningMaskOpacity, which is 0 by default.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "darkeningMaskColor": {
-        "type": "string",
-        "isRequired": false
+        "defaultValue": "#000000",
+        "description": "The color of that layer.",
+        "isRequired": false,
+        "type": "string"
       },
       "darkeningMaskOpacity": {
-        "type": "number",
-        "isRequired": false
+        "defaultValue": 0,
+        "description": "The opacity of that layer, from 0 to 1.",
+        "isRequired": false,
+        "type": "number"
       },
       "darkeningVignette": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Draws a 40px gradient along the top edge, above the content, so a transparent header navigation stays legible.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "hasInvertTextColor": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Sets the headline and caption in the light text color, for a hero over a dark backdrop: imagery, or a darkening mask over it. The color is the same in both themes, because the backdrop it is read against is.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "headerFontSize": {
-        "type": "\"s\" | \"m\" | \"l\"",
-        "isRequired": false
+        "defaultValue": "m",
+        "description": "The type scale of the headline.",
+        "isRequired": false,
+        "type": "\"s\" | \"m\" | \"l\""
       },
       "headerText": {
-        "type": "string",
-        "isRequired": false
+        "description": "The headline. Rendered as an h1 and omitted entirely when not provided.",
+        "isRequired": false,
+        "type": "string"
       },
       "heroHeight": {
-        "type": "string",
-        "isRequired": false
+        "defaultValue": "fit-content",
+        "description": "Any CSS height. Below a 512px viewport it is ignored and the section falls back to fit-content.",
+        "isRequired": false,
+        "type": "string"
       },
       "overlayContainerMinMargin": {
-        "type": "{ small: number; medium: number; large: number; }",
-        "isRequired": false
+        "defaultValue": "24px / 40px / 120px",
+        "description": "Overrides the side padding at each breakpoint. The value is written straight into CSS, so it needs a unit. The number type in the signature is wrong: a plain number produces an invalid declaration and the side padding drops to zero.",
+        "isRequired": false,
+        "type": "{ small: number; medium: number; large: number; }"
       },
       "overlayContentWidth": {
-        "type": "string",
-        "isRequired": false
+        "defaultValue": "100%",
+        "description": "Any CSS width for the content block, for example \"60%\" or \"640px\".",
+        "isRequired": false,
+        "type": "string"
       },
       "overlayContentPosition": {
-        "type": "\"left\" | \"center\" | \"right\" | \"top-left\" | \"top\" | \"top-right\" | \"bottom-left\" | \"bottom\" | \"bottom-right\"",
-        "isRequired": false
+        "defaultValue": "center",
+        "description": "Where the content block sits inside the section. Only visible when the section is taller or wider than the content.",
+        "isRequired": false,
+        "type": "\"center\" | \"bottom\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\""
       },
       "overlayMedia": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "A media layer above the background and independent of the text block. An img or video inside it is scaled to cover the layer.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "overlayMediaPosition": {
-        "type": "\"left\" | \"center\" | \"right\" | \"top-left\" | \"top\" | \"top-right\" | \"bottom-left\" | \"bottom\" | \"bottom-right\"",
-        "isRequired": false
+        "defaultValue": "center",
+        "description": "Where that layer sits inside the section.",
+        "isRequired": false,
+        "type": "\"center\" | \"bottom\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\""
       },
       "overlayMediaMaxHeight": {
-        "type": "string",
-        "isRequired": false
+        "description": "Sets the height of the media layer, with the same caveat.",
+        "isRequired": false,
+        "type": "string"
       },
       "overlayMediaMaxWidth": {
-        "type": "string",
-        "isRequired": false
+        "description": "Sets the width of the media layer outright rather than a maximum, despite the name. Without it the layer has no width.",
+        "isRequired": false,
+        "type": "string"
       },
       "overlayMediaMargin": {
-        "type": "\"string\" | \"{ small: string; medium: string; large: string; }\"",
-        "isRequired": false
+        "defaultValue": "0",
+        "description": "A margin shorthand for the media layer. Pass the object form to vary it by breakpoint: small below md, medium below lg, large above.",
+        "isRequired": false,
+        "type": "string | { small: string; medium: string; large: string; }"
       },
       "textAlignment": {
-        "type": "\"left\" | \"center\" | \"right\"",
-        "isRequired": false
+        "description": "Aligns the text within the content block, which starts at the leading edge when the prop is unset. This is separate from overlayContentPosition, which moves the block itself.",
+        "isRequired": false,
+        "type": "\"center\" | \"left\" | \"right\""
+      },
+      "children": {
+        "description": "Rendered in a full-width slot below the caption. Use it for buttons, links, or a search field.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "className": {
+        "description": "Declared so it type-checks, but nothing in the component reads it: it travels with the rest of the props onto the section element.",
+        "isRequired": false,
+        "type": "string"
       }
     }
   }
-}
+}

package/data/component-props/Icon.json

@@ -2,21 +2,32 @@
   "Icon": {
     "props": {
       "color": {
-        "type": "\"blue\" | \"gray\" | \"green\" | \"purple\" | \"indigo\" | \"red\" | \"yellow\"",
-        "isRequired": false
+        "defaultValue": "indigo",
+        "description": "A hue from the SDS palette. Note that this is the SDS color prop, not the MUI one, and it does not accept a CSS color.",
+        "isRequired": false,
+        "type": "\"blue\" | \"gray\" | \"green\" | \"purple\" | \"indigo\" | \"red\" | \"yellow\""
       },
       "sdsIcon": {
-        "type": "complex",
-        "isRequired": true
+        "description": "Required. The name of the icon, as listed in the Icon Bank. Names are case-sensitive, for example \"XMark\" and \"LightBulb\".",
+        "isRequired": true,
+        "type": "\"ArrowsDiagonalIn\" | \"ArrowsDiagonalOut\" | \"ArrowsUpDown\" | \"Bacteria\" | \"BarChartHorizontal3\" | \"BarChartVertical3\" | \"BarChartVertical4\" | \"Book\" | \"Check\" | \"CheckCircle\" | \"ChevronDown\" | \"ChevronDown2\" | \"ChevronLeft2\" | \"ChevronLeft\" | \"ChevronRight2\" | \"ChevronRight\" | \"ChevronUp\" | \"ChevronUp2\" | \"CirclesOverlap2\" | \"Cli\" | \"Code\" | \"Compass\" | \"Copy\" | \"Cube\" | \"DNA\" | \"Document\" | \"DotPlot\" | \"DotsHorizontal\" | \"Download\" | \"Droplet\" | \"Edit\" | \"Envelope\" | \"ExclamationMarkCircle\" | \"ExclamationMarkSpeechBubble\" | \"EyeClosed\" | \"EyeOpen\" | \"Filter\" | \"FlagCheck\" | \"FlagOutline\" | \"FlagQuestionMark\" | \"FlagXMark\" | \"Flask\" | \"FlaskPrivate\" | \"FlaskPublic\" | \"Gear\" | \"Gene\" | \"Github\" | \"Globe\" | \"GlobeBasic\" | \"Grid\" | \"GridDots3\" | \"GridPrivate\" | \"GridPublic\" | \"House\" | \"Hand\" | \"HandOpen\" | \"HandPointer\" | \"Image\" | \"InfoCircle\" | \"InfoSpeechBubble\" | \"Label\" | \"Lasso\" | \"LifeRing\" | \"LightBulb\" | \"LinesDashed3Solid1\" | \"LinesHorizontal3\" | \"Link\" | \"List\" | \"Loading\" | \"Lock\" | \"LockCircle\" | \"Maximize\" | \"Minimize\" | \"Minus\" | \"Open\" | \"Package\" | \"Pause\" | \"People\" | \"Percentage\" | \"Person\" | \"PieChart\" | \"PieChartXMark\" | \"Pin\" | \"PinLocation\" | \"Play\" | \"Plus\" | \"PlusCircle\" | \"ProjectPrivate\" | \"ProjectPublic\" | \"PuzzlePiece\" | \"QuestionMark\" | \"QuestionMarkCircle\" | \"Quote\" | \"Read\" | \"Refresh\" | \"Report\" | \"Rocket\" | \"RotateLeft\" | \"RotateRight\" | \"Save\" | \"Scale\" | \"ScatterPlot\" | \"Search\" | \"SearchLinesHorizontal3\" | \"Send\" | \"Share\" | \"SlidersHorizontal\" | \"Sparkle\" | \"Sparkles\" | \"SpeechBubbles\" | \"SquareOnDashedSquare\" | \"SquareOnSquareArrowDownRight\" | \"Starburst\" | \"Star\" | \"Table\" | \"ThumbsDown\" | \"ThumbsUp\" | \"TrashCan\" | \"TreeDendogram\" | \"TreeHorizontal\" | \"TreeHorizontalPrivate\" | \"TreeHorizontalPublic\" | \"TreeHorizontalTopRightFilled\" | \"TreeVertical\" | \"TriangleDown\" | \"TriangleLeft\" | \"TriangleRight\" | \"TriangleUp\" | \"Update\" | \"Umap\" | \"Upload\" | \"Virus\" | \"VirusCircleS\" | \"Widget\" | \"XMark\" | \"XMarkCircle\""
       },
       "sdsSize": {
-        "type": "\"xxs\" | \"xs\" | \"s\" | \"l\" | \"xl\"",
-        "isRequired": true
+        "description": "Required. Which sizes are accepted depends on the icon named in sdsIcon.",
+        "isRequired": true,
+        "type": "\"s\" | \"xs\" | \"l\" | \"xl\" | \"xxs\""
       },
       "shade": {
-        "type": "\"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\"",
-        "isRequired": false
+        "defaultValue": "500 in light mode, 600 in dark mode",
+        "description": "The step within the chosen hue.",
+        "isRequired": false,
+        "type": "100 | 200 | 300 | 400 | 500 | 600 | 700 | 800"
+      },
+      "className": {
+        "description": "Applied to the SVG. Useful for overriding the fill from a parent component.",
+        "isRequired": false,
+        "type": "string"
       }
     }
   }
-}
+}

package/data/component-props/InputCheckbox.json

@@ -2,32 +2,54 @@
   "InputCheckbox": {
     "props": {
       "caption": {
-        "type": "string",
-        "isRequired": false
+        "description": "The caption of the InputCheckbox appears beneath the label in a lighter text color.",
+        "isRequired": false,
+        "type": "string"
       },
       "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
+        "defaultValue": false,
         "description": "If `true`, the component is disabled.",
-        "defaultValue": false
+        "isRequired": false,
+        "type": "boolean"
       },
       "intent": {
-        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\"",
-        "isRequired": false
+        "defaultValue": "default",
+        "description": "Colors the border of the empty box. The checked box always uses the accent color.",
+        "isRequired": false,
+        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\""
       },
       "label": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "The label of the InputCheckbox. When omitted, the box renders on its own with no label element.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "stage": {
-        "type": "\"indeterminate\" | \"checked\" | \"unchecked\"",
-        "isRequired": false
+        "description": "Sets the state of the checkbox. It overrides checked, so a checkbox with a stage only changes when you recompute the stage from an onChange handler. Omit it to let the checkbox manage its own state.",
+        "isRequired": false,
+        "type": "\"checked\" | \"indeterminate\" | \"unchecked\""
       },
       "classes": {
-        "type": "complex",
+        "defaultValue": {},
+        "description": "Class names for the internal elements: root, labelCaptionContainer, label,\ncaption, checkbox, checkboxCheckedIcon, checkboxDefaultIcon, and\ncheckboxIndeterminateIcon.",
+        "isRequired": false,
+        "type": "{ root?: string | undefined; labelCaptionContainer?: string | undefined; label?: string | undefined; caption?: string | undefined; checkbox?: string | undefined; checkboxCheckedIcon?: string | undefined; checkboxDefaultIcon?: string | undefined; checkboxIndeterminateIcon?: string | undefined; }"
+      },
+      "checkboxProps": {
+        "defaultValue": {},
+        "description": "Directly pass these props to the underlying MUI checkbox.",
+        "isRequired": false,
+        "type": "Partial<CheckboxProps>"
+      },
+      "checked": {
+        "description": "If `true`, the component is checked.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "onChange": {
+        "description": "Callback fired when the state is changed.\n@param event The event source of the callback.\nYou can pull out the new checked state by accessing `event.target.checked` (boolean).",
         "isRequired": false,
-        "description": "Override or extend the styles applied to the component."
+        "type": "function"
       }
     }
   }
-}
+}