{
    "accordion": {
        "description": "An accordion allows a user to toggle the display of sections of content.\nThe accordion component wraps accordion panels that can be selected and expanded. It accepts children to define the content displayed within.",
        "methods": [],
        "props": {
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS class names to be added to the accordion component. _Tested with snapshot testing._"
            },
            "id": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "number"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "HTML id for accordion component. _Tested with snapshot testing._"
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": true,
                "description": "The panel content for the Accordion component. Accordion panels should be added as <AccordionPanel />. Event handler for the accordion panels should be added to `<AccordionPanel />`. Optional `panelContentActions` component may be passed as prop. _Tested with Mocha framework and snapshot testing._\n\nExample:\n```\n<SLDSAccordion>\n  <SLDSAccordionpanel />\n  <SLDSAccordionpanel />\n  <SLDSAccordionpanel />\n</SLDSAccordion>\n```"
            }
        },
        "route": "accordions",
        "display-name": "Accordions",
        "SLDS-component-path": "/components/accordions",
        "dependencies": [
            {
                "panel": {
                    "description": "The panel content for the Accordion component.",
                    "methods": [],
                    "props": {
                        "children": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "The panel content for the Accordion component. Accordion panels should be added as <AccordionPanel />. Event handler for the accordion panels should be added to `<AccordionPanel />`. Optional `panelContentActions` component may be passed as prop. _Tested with Mocha framework and snapshot testing._"
                        },
                        "expanded": {
                            "type": {
                                "name": "bool"
                            },
                            "required": true,
                            "description": "Indicates whether item is expanded or not, which should be handled by `onTogglePanel`. _Tested with Mocha framework and snapshot testing._"
                        },
                        "id": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "number"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": true,
                            "description": "Id of the item belonging to this panel. _Tested with snapshot testing._"
                        },
                        "panelContentActions": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "Component that can be passed as prop to `<Panel />`. As an example, a menu dropdown could be used here to handle additional actions for each accordion panel. _Tested with Mocha framework._"
                        },
                        "onTogglePanel": {
                            "type": {
                                "name": "func"
                            },
                            "required": true,
                            "description": "Callback that will run whenever a panel is toggled. Function should handle state to toggle `expanded` prop. _Tested with Mocha framework._"
                        },
                        "summary": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "string"
                                    },
                                    {
                                        "name": "node"
                                    }
                                ]
                            },
                            "required": true,
                            "description": "Summary in the span element in the header of this panel. The summary is truncated and so the title element should contain the full text so that it is accessible on hover. _Tested with snapshot testing._"
                        },
                        "title": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "HTML title attribute. _Tested with snapshot testing._"
                        }
                    },
                    "name": "panel",
                    "source": "/components/accordion/panel.jsx"
                }
            }
        ]
    },
    "alert": {
        "description": "Alert banners communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action. View [banner guidelines](https://www.lightningdesignsystem.com/guidelines/messaging/components/banners/).",
        "methods": [
            {
                "name": "saveButtonRef",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "component",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "closeButton": {
                            "name": "union",
                            "value": [
                                {
                                    "name": "string"
                                },
                                {
                                    "name": "node"
                                }
                            ],
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility**\nThis object is merged with the default props object on every render.\n* `closeButton`: This is a visually hidden label for the close button.\n_Tested with snapshot testing._",
                "defaultValue": {
                    "value": "{\n    closeButton: 'Close',\n}",
                    "computed": false
                }
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to tag with `.slds-notify_alert`. Uses `classNames` [API](https://github.com/JedWatson/classnames).\n_Tested with snapshot testing._"
            },
            "dismissible": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Allows user to click a close button. Banners should be dismissible only if they communicate future impact to the system,\n_Tested with snapshot testing._"
            },
            "icon": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Icon of type `~/components/icon`. This icon will be cloned and additional props appended. The default icons are:\n* info variant: `utility:info`\n* error variant: `utility:error`\n* offline variant: `utility:offline`\n* warning variant: `utility:warning`\n\n_Tested with snapshot testing._"
            },
            "labels": {
                "type": {
                    "name": "shape",
                    "value": {
                        "heading": {
                            "name": "union",
                            "value": [
                                {
                                    "name": "string"
                                },
                                {
                                    "name": "node"
                                }
                            ],
                            "required": false
                        },
                        "headingLink": {
                            "name": "union",
                            "value": [
                                {
                                    "name": "string"
                                },
                                {
                                    "name": "node"
                                }
                            ],
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Text labels for internationalization**\nThis object is merged with the default props object on every render.\n* `heading`: text within heading tag\n* `headingLink`: Text of link that triggers `onClickHeadingLink`. Inline links should pass a keyed array of React components into `labels.heading`.\n\n_Tested with snapshot testing._",
                "defaultValue": {
                    "value": "{}",
                    "computed": false
                }
            },
            "onClickHeadingLink": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered by link. _Tested with Mocha testing._"
            },
            "onRequestClose": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered by close button. This is a controlled component. _Tested with Mocha testing._"
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'error'",
                            "computed": false
                        },
                        {
                            "value": "'info'",
                            "computed": false
                        },
                        {
                            "value": "'offline'",
                            "computed": false
                        },
                        {
                            "value": "'warning'",
                            "computed": false
                        }
                    ]
                },
                "required": true,
                "description": "The type of alert. _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "'info'",
                    "computed": false
                }
            }
        },
        "route": "alerts",
        "display-name": "Alerts",
        "SLDS-component-path": "/components/alerts",
        "dependencies": [
            {
                "container": {
                    "description": "A fixed container for alert banners.",
                    "methods": [],
                    "props": {
                        "className": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "array"
                                    },
                                    {
                                        "name": "object"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "CSS classes to be added to tag with `.slds-notify_alert`. Uses `classNames` [API](https://github.com/JedWatson/classnames)."
                        },
                        "children": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "Alert components"
                        }
                    },
                    "name": "container",
                    "source": "/components/alert/container.jsx"
                }
            }
        ]
    },
    "app-launcher": {
        "description": "The App Launcher allows the user to quickly access all the apps and functionality with their organization.\nThe App Launcher should generally only be used as a sub-component of the [Global Navigation Bar](/components/global-navigation-bar)\n\nAlso note: App Launcher is not included in the standard component export. To import it, you must reference it directly via its path.\nExample:\n```\nimport AppLauncher from 'design-system-react/components/app-launcher';\nimport AppLauncherTile from 'design-system-react/components/app-launcher/tile';\nimport AppLauncherSection from 'design-system-react/components/app-launcher/section';\n```\n\nUSAGE EXAMPLE:\n```\n<AppLauncher>\n\t<AppLauncherSection>\n\t\t<AppLauncherTile />\n\t\t<AppLauncherTile />\n\t\t<AppLauncherTile />\n\t</AppLauncherSection>\n\t<AppLauncherSection>\n\t\t<AppLauncherTile />\n\t\t<AppLauncherTile />\n\t</AppLauncherSection>\n</AppLauncher>\n```\n\nBy default, `Modal`, a child component of App Launcher, will add `aria-hidden=true` to the `body` tag, but this disables some assistive technologies. To prevent this you can add the following to your application with `#mount` being the root node of your application that you would like to hide from assistive technologies when the `Modal` is open.\n```\nimport settings from 'design-system-react/components/settings';\nsettings.setAppElement('#mount');\n```",
        "methods": [
            {
                "name": "openAppLauncher",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "closeAppLauncher",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderSearch",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            }
        ],
        "props": {
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "trigger": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility.**\nThis object is merged with the default props object on every render.\n* `trigger`: This is a visually hidden label for the app launcher icon.",
                "defaultValue": {
                    "value": "{\n    trigger: 'Open App Launcher',\n}",
                    "computed": false
                }
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": true,
                "description": "One or more `<AppLauncherSection />`s each containing one or more `<AppLauncherTile />`s"
            },
            "isOpen": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Control the open/close state of the App Launcher"
            },
            "modalClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to App Launcher Modal."
            },
            "modalHeaderButton": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Button that exists in the upper right hand corner of the App Launcher modal"
            },
            "noTruncate": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Allows longer application names without truncating them."
            },
            "onClose": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Callback when the App Launcher Modal is closed"
            },
            "search": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Search bar for the Modal's header. Will typically be an instance of `design-system-react/input/search`"
            },
            "title": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Set the App Launcher's title text (for localization)",
                "defaultValue": {
                    "value": "'App Launcher'",
                    "computed": false
                }
            },
            "triggerName": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "This is typically the name of the cloud or application"
            },
            "triggerOnClick": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Callback when the App Launcher icon is clicked"
            }
        },
        "route": "app-launcher",
        "display-name": "App Launcher",
        "SLDS-component-path": "/components/app-launcher/#flavor-default",
        "dependencies": [
            {
                "section": {
                    "description": "App Launcher Sections allow users to categorize App Tiles as well as toggle their display",
                    "methods": [
                        {
                            "name": "toggleOpen",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "event",
                                    "type": null
                                }
                            ],
                            "returns": null
                        }
                    ],
                    "props": {
                        "assistiveText": {
                            "type": {
                                "name": "shape",
                                "value": {
                                    "collapseSection": {
                                        "name": "string",
                                        "required": false
                                    }
                                }
                            },
                            "required": false,
                            "description": "**Assistive text for accessibility.**\nThis object is merged with the default props object on every render.\n* `collapseSection`: The assistive text for the section collapse icons.",
                            "defaultValue": {
                                "value": "{\n    collapseSection: 'Toggle visibility of section',\n}",
                                "computed": false
                            }
                        },
                        "title": {
                            "type": {
                                "name": "string"
                            },
                            "required": true,
                            "description": "The title for this section of apps"
                        },
                        "toggleable": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Allows the user to show/hide the section"
                        },
                        "children": {
                            "type": {
                                "name": "node"
                            },
                            "required": true,
                            "description": "An array of applications to display"
                        },
                        "isOpen": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Controls the open/closed state of the section"
                        },
                        "onToggleClick": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Callback for when section is toggled. Passes \"isOpen\" bool. Forces `toggleable` to true"
                        }
                    },
                    "name": "section",
                    "source": "/components/app-launcher/section.jsx"
                }
            },
            {
                "tile": {
                    "description": "App Launcher Tiles provide information and links to a user's apps",
                    "methods": [],
                    "props": {
                        "title": {
                            "type": {
                                "name": "string"
                            },
                            "required": true,
                            "description": "App name for the tile's title."
                        },
                        "size": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'default'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'small'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Size of the rendered tile.",
                            "defaultValue": {
                                "value": "'default'",
                                "computed": false
                            }
                        },
                        "description": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "The description of the app. Not visible on small tiles."
                        },
                        "descriptionHeading": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Heading for app description"
                        },
                        "href": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "The `href` attribute of the tile. Please pass in bookmarkable URLs from your routing library. If the `onClick` callback is specified this URL will be prevented from changing the browser's location.",
                            "defaultValue": {
                                "value": "'javascript:void(0);'",
                                "computed": false
                            }
                        },
                        "isOpenTooltip": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Open the More Tooltip"
                        },
                        "moreLabel": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "The localized text for the \"More information\" tooltip.",
                            "defaultValue": {
                                "value": "' More'",
                                "computed": false
                            }
                        },
                        "className": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "array"
                                    },
                                    {
                                        "name": "object"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Class names to be added to the tile."
                        },
                        "onClick": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Function that will be executed when clicking on a tile"
                        },
                        "iconNode": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "Icon node for app tile. Takes priority over `iconText`"
                        },
                        "iconText": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Text to be used as an icon. Only renders if iconNode is undefined"
                        },
                        "search": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Text used to highlight content in app tiles"
                        }
                    },
                    "name": "tile",
                    "source": "/components/app-launcher/tile.jsx"
                }
            }
        ]
    },
    "avatar": {
        "description": "The avatar component represents an object or entity. An image is the preferred format for an avatar.\n If the `imgSrc` prop is undefined, and if a `label` or `initials` prop is available, the fallback avatar will render with initials. If initals are passed in directly in the `initials` prop, this will render in the fallback avatar. If `initals` prop is unavailable but a `label` prop is available, the fallback avatar will render with built initials of the user name or entity name.\n\n Intials built from the `label` prop will apply the following logic: If the label name contains two words, like first and last name, the first letter of each will be capitalized and returned. For labels that only have a single word name, the first two letters of that word, using one capital and one lower case letter, will be returned. For labels that contain three or more words, the first character of the first and last words will be capitalized and returned.\n\n If `initials` or `label` are not available, the fallback avatar will render a standard icon. If `variant='user'`, a user icon will\n render. If `variant='entity'`, an account icon will render.",
        "methods": [
            {
                "name": "buildInitials",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleImageError",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "renderBaseAvatar",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "renderIconAvatar",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "renderInitialsAvatar",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            }
        ],
        "props": {
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "icon": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility.**\nThis object is merged with the default props object on every render.\n* `icon`: Assistive text for accessibility that labels the icon.",
                "defaultValue": {
                    "value": "{\n    icon: 'User or Account Icon',\n}",
                    "computed": false
                }
            },
            "className": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Class names to be applied to Avatar component."
            },
            "imgAlt": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Alt attribute to be applied to image (base case) element.",
                "defaultValue": {
                    "value": "''",
                    "computed": false
                }
            },
            "imgSrc": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Source attribute to be applied to image (base case) element."
            },
            "initials": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Initials attribute to optionally pass in initials directly in case of \"initials\" fallback case."
            },
            "label": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Label attibute to display inside \"initials\" fallback case. Will be passed as title prop in `abbr` element to provide more specificity."
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'entity'",
                            "computed": false
                        },
                        {
                            "value": "'user'",
                            "computed": false
                        }
                    ]
                },
                "required": true,
                "description": "Avatar variants to apply relevant styling (circle: user, square: entity) and icon rendering if applicable.",
                "defaultValue": {
                    "value": "'user'",
                    "computed": false
                }
            },
            "size": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'x-small'",
                            "computed": false
                        },
                        {
                            "value": "'small'",
                            "computed": false
                        },
                        {
                            "value": "'medium'",
                            "computed": false
                        },
                        {
                            "value": "'large'",
                            "computed": false
                        }
                    ]
                },
                "required": true,
                "description": "Size of the icon in \"icon\" fallback case.",
                "defaultValue": {
                    "value": "'medium'",
                    "computed": false
                }
            },
            "title": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Title attribute for the avatar container.",
                "defaultValue": {
                    "value": "'user avatar'",
                    "computed": false
                }
            }
        },
        "route": "avatars",
        "display-name": "Avatars",
        "SLDS-component-path": "/components/avatars",
        "dependencies": []
    },
    "breadcrumb": {
        "description": "Use breadcrumbs to note the path of a record and help the user to navigate back to the parent.Breadcrumb based on SLDS 2.1.0-dev",
        "methods": [],
        "props": {
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "label": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility.**\nThis object is merged with the default props object on every render.\n* `label`: The assistive text for the breadcrumb trail.",
                "defaultValue": {
                    "value": "{\n    label: 'Breadcrumbs',\n}",
                    "computed": false
                }
            },
            "trail": {
                "type": {
                    "name": "array"
                },
                "required": false,
                "description": "An array of react elements presumably anchor elements."
            }
        },
        "route": "breadcrumbs",
        "display-name": "Breadcrumbs",
        "SLDS-component-path": "/components/breadcrumbs",
        "dependencies": []
    },
    "button": {
        "description": "The Button component is the Lightning Design System Button component. The Button should be used for label buttons, icon buttons, or buttons that have both labels and icons.\nEither a <code>label</code> or <code>assistiveText.icon</code> is required; see the Prop Details table below.\nFor buttons that maintain selected/unselected states, use the <a href=\"#/button-stateful\">ButtonStateful</a> component.",
        "methods": [
            {
                "name": "getClassName",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleClick",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderIcon",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "name",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderLabel",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "renderButton",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "renderTooltip",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            }
        ],
        "props": {
            "aria-describedby": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Used if the Button triggers a tooltip. The value should match the `id` of the element with `role=\"tooltip\"`."
            },
            "aria-controls": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Establishes a relationship between an interactive parent element and a child element to indicate which child element a parent element affects. Frequently used in cases where buttons or tabs are associated with exposing expandable regions."
            },
            "aria-expanded": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "bool"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Used if the Button triggers a menu or popup. Bool indicates if the menu or popup is open or closed."
            },
            "aria-haspopup": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "bool"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "True if Button triggers a menu or popup to open/close."
            },
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "icon": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility.**\nThis object is merged with the default props object on every render.\n* `icon`: Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means. If the button has an icon and a visible label, you can omit the <code>assistiveText.icon</code> prop and use the <code>label</code> prop.",
                "defaultValue": {
                    "value": "{ icon: '' }",
                    "computed": false
                }
            },
            "buttonRef": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Callback that passes in the DOM reference of the `<button>` DOM node within this component. Primary use is to allow `focus` to be called. You should still test if the node exists, since rendering is asynchronous. `buttonRef={(component) => { if(component) console.log(component); }}`"
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to button."
            },
            "disabled": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Disables the button and adds disabled styling.",
                "defaultValue": {
                    "value": "false",
                    "computed": false
                }
            },
            "hint": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Associates an icon button with another element on the page by changes the color of the SVG. Please reference <a href=\"http://www.lightningdesignsystem.com/components/buttons/#hint\">Lightning Design System Buttons > Hint</a>.",
                "defaultValue": {
                    "value": "false",
                    "computed": false
                }
            },
            "iconCategory": {
                "type": {
                    "name": "custom",
                    "raw": "requiredIf(\n    PropTypes.oneOf(['action', 'custom', 'doctype', 'standard', 'utility']),\n    (props) => !!props.iconName\n)"
                },
                "required": false,
                "description": "Name of the icon category. Visit <a href=\"http://www.lightningdesignsystem.com/resources/icons\">Lightning Design System Icons</a> to reference icon categories."
            },
            "iconClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to icon."
            },
            "iconName": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Name of the icon. Visit <a href=\"http://www.lightningdesignsystem.com/resources/icons\">Lightning Design System Icons</a> to reference icon names."
            },
            "iconPath": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Path to the icon. This will override any global icon settings."
            },
            "iconPosition": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'left'",
                            "computed": false
                        },
                        {
                            "value": "'right'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "If omitted, icon position is centered."
            },
            "iconSize": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'x-small'",
                            "computed": false
                        },
                        {
                            "value": "'small'",
                            "computed": false
                        },
                        {
                            "value": "'medium'",
                            "computed": false
                        },
                        {
                            "value": "'large'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Determines the size of the icon.",
                "defaultValue": {
                    "value": "'medium'",
                    "computed": false
                }
            },
            "iconVariant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'bare'",
                            "computed": false
                        },
                        {
                            "value": "'container'",
                            "computed": false
                        },
                        {
                            "value": "'border'",
                            "computed": false
                        },
                        {
                            "value": "'border-filled'",
                            "computed": false
                        },
                        {
                            "value": "'more'",
                            "computed": false
                        },
                        {
                            "value": "'global-header'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "For icon variants, please reference <a href=\"http://www.lightningdesignsystem.com/components/buttons/#icon\">Lightning Design System Icons</a>."
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Id string applied to button node."
            },
            "inverse": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, button/icon is white. Meant for buttons or utility icons on dark backgrounds."
            },
            "label": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "string"
                        },
                        {
                            "name": "node"
                        }
                    ]
                },
                "required": false,
                "description": "Visible label on the button. If the button is an icon button with no label, you must use the <code>assistiveText.icon</code> prop."
            },
            "onBlur": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when focus is removed."
            },
            "onClick": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when the button is clicked."
            },
            "onFocus": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when component is focused."
            },
            "onKeyDown": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a key is pressed down"
            },
            "onKeyPress": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a key is pressed and released"
            },
            "onKeyUp": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a key is released"
            },
            "onMouseDown": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a mouse button is pressed down"
            },
            "onMouseEnter": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a mouse arrow hovers"
            },
            "onMouseLeave": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a mouse arrow no longer hovers"
            },
            "responsive": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, button scales to 100% width on small form factors.",
                "defaultValue": {
                    "value": "false",
                    "computed": false
                }
            },
            "tabIndex": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Write <code>\"-1\"</code> if you don't want the user to tab to the button."
            },
            "type": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'reset'",
                            "computed": false
                        },
                        {
                            "value": "'submit'",
                            "computed": false
                        },
                        {
                            "value": "'button'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Button type",
                "defaultValue": {
                    "value": "'button'",
                    "computed": false
                }
            },
            "title": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "HTML title attribute"
            },
            "tooltip": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "[Deprecated] Tooltip on button. Button should be a child of `Tooltip` instead."
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'base'",
                            "computed": false
                        },
                        {
                            "value": "'link'",
                            "computed": false
                        },
                        {
                            "value": "'neutral'",
                            "computed": false
                        },
                        {
                            "value": "'brand'",
                            "computed": false
                        },
                        {
                            "value": "'destructive'",
                            "computed": false
                        },
                        {
                            "value": "'success'",
                            "computed": false
                        },
                        {
                            "value": "'icon'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Different types of buttons",
                "defaultValue": {
                    "value": "'neutral'",
                    "computed": false
                }
            }
        },
        "route": "buttons",
        "display-name": "Buttons",
        "SLDS-component-path": "/components/buttons",
        "dependencies": []
    },
    "button-stateful": {
        "description": "The ButtonStateful component is a variant of the Lightning Design System Button component. It is used for buttons that have a state of unselected or selected.\nFor icon buttons, use <code>variant='icon'</code>. For buttons with labels or buttons with labels and icons, pass data to the state props (ie. <code>stateOne={{iconName: 'add', label: 'Join'}}</code>).",
        "methods": [
            {
                "name": "getClassName",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "active",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleBlur",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "e",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleClick",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "e",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "active": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Specifies the current state of the button. If set, the button will act as a ['controlled' component](https://facebook.github.io/react/docs/forms.html#controlled-components)."
            },
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "icon": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility.**\nThis object is merged with the default props object on every render.\n* `icon`: Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means. This should also include the state of the button. If the button has an icon and a visible label, you can omit the <code>icon</code> prop and use the <code>label</code> prop.",
                "defaultValue": {
                    "value": "{ icon: '' }",
                    "computed": false
                }
            },
            "disabled": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Disables the button and adds disabled styling.",
                "defaultValue": {
                    "value": "false",
                    "computed": false
                }
            },
            "iconName": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Name of the icon. Visit <a href='http://www.lightningdesignsystem.com/resources/icons'>Lightning Design System Icons</a> to reference icon names."
            },
            "iconSize": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'x-small'",
                            "computed": false
                        },
                        {
                            "value": "'small'",
                            "computed": false
                        },
                        {
                            "value": "'medium'",
                            "computed": false
                        },
                        {
                            "value": "'large'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Determines the size of the icon.",
                "defaultValue": {
                    "value": "'medium'",
                    "computed": false
                }
            },
            "inverse": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, button/icon is white. Meant for buttons or utility icons on dark backgrounds."
            },
            "onBlur": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when focus is removed."
            },
            "onClick": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when the button is clicked."
            },
            "onFocus": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when component is focused."
            },
            "onKeyDown": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a key is pressed down"
            },
            "onKeyPress": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a key is pressed and released"
            },
            "onKeyUp": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a key is released"
            },
            "onMouseDown": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a mouse button is pressed down"
            },
            "onMouseEnter": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a mouse arrow hovers"
            },
            "onMouseLeave": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a mouse arrow no longer hovers"
            },
            "responsive": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, button scales to 100% width on small form factors.",
                "defaultValue": {
                    "value": "false",
                    "computed": false
                }
            },
            "stateOne": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "Initial label and icon (optional) of button.",
                "defaultValue": {
                    "value": "{ iconName: 'add', label: 'Follow' }",
                    "computed": false
                }
            },
            "stateTwo": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "Selected label and icon (optional) of button.",
                "defaultValue": {
                    "value": "{ iconName: 'check', label: 'Following' }",
                    "computed": false
                }
            },
            "stateThree": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "Deselect label and icon (optional) of button.",
                "defaultValue": {
                    "value": "{ iconName: 'close', label: 'Unfollow' }",
                    "computed": false
                }
            },
            "tabIndex": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Write \"-1\" if you don't want the user to tab to the button."
            },
            "tooltip": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "[Deprecated] Tooltip on button. Button should be a child of `Tooltip` instead."
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'base'",
                            "computed": false
                        },
                        {
                            "value": "'neutral'",
                            "computed": false
                        },
                        {
                            "value": "'brand'",
                            "computed": false
                        },
                        {
                            "value": "'destructive'",
                            "computed": false
                        },
                        {
                            "value": "'icon'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Different types of buttons"
            }
        },
        "route": "stateful-buttons",
        "display-name": "Stateful Buttons",
        "SLDS-component-path": "/components/buttons/#flavor-stateful",
        "dependencies": []
    },
    "button-group": {
        "description": "The ButtonGroup component wraps other components (ie. Button, MenuDropdown, PopoverTooltip, Checkboxes, etc).",
        "methods": [],
        "props": {
            "children": {
                "type": {
                    "name": "node"
                },
                "required": true,
                "description": "Children are expected to be components. If last button triggers a dropdown menu, use Dropdown instead of Button. _Tested with snapshot testing._"
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes added to `slds-button-group` or `slds-checkbox--button-group` tag"
            },
            "labels": {
                "type": {
                    "name": "shape",
                    "value": {
                        "error": {
                            "name": "string",
                            "required": false
                        },
                        "label": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Text labels for internationalization**\nThis object is merged with the default props object on every render.\n* `error`: Message to display when any of Checkboxes are in an error state. _Tested with snapshot testing._\n* `label`: This label appears above the button group. _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "{}",
                    "computed": false
                }
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'checkbox'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Use checkbox variant for \"Checkbox Button Group\" styling and add Checkbox components as children _Tested with snapshot testing._"
            }
        },
        "route": "button-groups",
        "display-name": "Button Groups",
        "SLDS-component-path": "/components/button-groups",
        "dependencies": []
    },
    "card": {
        "description": "Cards are used to apply a container around a related grouping of information. It has a header, a body, and an optional footer. It often contains a DataTable or Tile (coming soon). Actions associated with selected items or with all items are included within the header actions. Footer often contains pagination.",
        "methods": [],
        "props": {
            "bodyClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to the card body (wraps children)."
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "The main section of the card. It often contains a `DataTable` or `Tile`."
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to the card."
            },
            "empty": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "bool"
                        },
                        {
                            "name": "node"
                        }
                    ]
                },
                "required": false,
                "description": "Replaces the body (that is the children) with the specified empty state, this will also remove header actions, the filter, and the icon. If the default empty state is wanted, set to `true`."
            },
            "filter": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Adds a filter input to the card header."
            },
            "footer": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Footer often contains pagination."
            },
            "header": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Allows a custom header (the media object with the icon in the first column). `icon`, `heading` and other props are passed into the media object from Card if present. Use `design-system-react/components/media-object` to create your own custom header."
            },
            "heading": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "node"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": true,
                "description": "The heading is the name of the related item group and should only contain inline elements.",
                "defaultValue": {
                    "value": "'Related Items'",
                    "computed": false
                }
            },
            "headerActions": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Actions to perform on selected items or actions that are not specific to one item such as adding an item. If no group actions are needed, then the number of selected items is often present."
            },
            "icon": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Icon associated with the items within the `body`."
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Set the HTML `id` of the card. This also sets the `id` of the filter and the header actions."
            },
            "style": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "Custom styles to be added to the card."
            }
        },
        "route": "cards",
        "display-name": "Cards",
        "SLDS-component-path": "/components/cards",
        "dependencies": [
            {
                "empty": {
                    "description": "A default empty state for Cards.",
                    "methods": [],
                    "props": {
                        "children": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "Additional call to actions that will render under the heading. Often this is an \"Add Item\" button."
                        },
                        "heading": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Primary text for an Empty Card.",
                            "defaultValue": {
                                "value": "'No Related Items'",
                                "computed": false
                            }
                        }
                    },
                    "name": "empty",
                    "source": "/components/card/empty.jsx"
                }
            },
            {
                "filter": {
                    "description": "A default filter or search input for Cards that contain items.",
                    "methods": [],
                    "props": {
                        "id": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "The HTML `id` from the card with a suffixe."
                        },
                        "onChange": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "This callback fires when the input changes."
                        },
                        "placeholder": {
                            "type": {
                                "name": "string"
                            },
                            "required": true,
                            "description": "Text present in input until the user enters text. This text will also be used for a visually hidden label on the filter `input` element for accessibility.",
                            "defaultValue": {
                                "value": "'Find in List'",
                                "computed": false
                            }
                        }
                    },
                    "name": "filter",
                    "source": "/components/card/filter.jsx"
                }
            }
        ]
    },
    "checkbox": {
        "description": "The ability to style checkboxes with CSS varies across browsers. Using this component ensures checkboxes look the same everywhere.",
        "methods": [
            {
                "name": "getId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleChange",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleKeyDown",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderButtonGroupVariant",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "props",
                        "type": null
                    },
                    {
                        "name": "assistiveText",
                        "type": null
                    },
                    {
                        "name": "labels",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderBaseVariant",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "props",
                        "type": null
                    },
                    {
                        "name": "assistiveText",
                        "type": null
                    },
                    {
                        "name": "labels",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderToggleVariant",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "props",
                        "type": null
                    },
                    {
                        "name": "assistiveText",
                        "type": null
                    },
                    {
                        "name": "labels",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "aria-controls": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "An HTML ID that is shared with ARIA-supported devices with the\n`aria-controls` attribute in order to relate the input with\nanother region of the page. An example would be a select box\nthat shows or hides a panel."
            },
            "aria-describedby": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The `aria-describedby` attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need."
            },
            "aria-owns": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "`aria-owns` indicate that an element depends on the current one when the relation can't be determined by the hierarchy structure."
            },
            "aria-required": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "The `aria-required` attribute is used to indicate that user input is required on an element before a form can be submitted."
            },
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "label": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility**\nThis object is merged with the default props object on every render.\n* `label`: This is used as a visually hidden label if, no `labels.label` is provided.",
                "defaultValue": {
                    "value": "{}",
                    "computed": false
                }
            },
            "checked": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "The Checkbox should be a controlled component, and will always be in the state specified. If checked is not defined, the state of the uncontrolled native `input` component will be used."
            },
            "defaultChecked": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "This is the initial value of an uncontrolled form element and is present only\nto provide compatibility with hybrid framework applications that are not\nentirely React. It should only be used in an application without centralized\nstate (Redux, Flux). \"Controlled components\" with centralized state is highly recommended. See [Code Overview](https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#controlled-and-uncontrolled-components) for more information."
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Class names to be added to the outer container of the Checkbox."
            },
            "disabled": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Disables the Checkbox and prevents clicking it."
            },
            "errorText": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Message to display when the Checkbox is in an error state. When this is present, also visually highlights the component as in error."
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "A unique ID is needed in order to support keyboard navigation and ARIA support. This ID is added to the `input` element"
            },
            "indeterminate": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "The Checkbox will be indeterminate if its state can not be figured out or is partially checked. Once a checkbox is indeterminate, a click should cause it to be checked. Since a user cannot put a checkbox into an indeterminate state, it is assumed you are controlling the value of `checked` with the parent, also, and that this is a controlled component. **Note:** `indeterminate` proptype does nothing in the `toggle` variant, as [SLDS does not support it](https://lightningdesignsystem.com/components/forms/#flavor-checkbox-toggle-checkbox-toggle)."
            },
            "labels": {
                "type": {
                    "name": "shape",
                    "value": {
                        "label": {
                            "name": "string",
                            "required": false
                        },
                        "toggleDisabled": {
                            "name": "string",
                            "required": false
                        },
                        "toggleEnabled": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Text labels for internationalization**\nThis object is merged with the default props object on every render.\n* `label`: Label for the _enabled_ state of the Toggle variant. Defaults to \"Enabled\".\n* `toggleDisabled`: Label for the _disabled_ state of the Toggle variant. Defaults to \"Disabled\". Note that this uses SLDS language, and meaning, of \"Enabled\" and \"Disabled\"; referring to the state of whatever the checkbox is _toggling_, not whether the checkbox itself is enabled or disabled.\n* `toggleEnabled`: Label for the _enabled_ state of the Toggle variant. Defaults to \"Enabled\".",
                "defaultValue": {
                    "value": "{\n    toggleDisabled: 'Disabled',\n    toggleEnabled: 'Enabled',\n}",
                    "computed": false
                }
            },
            "name": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Name of the submitted form parameter."
            },
            "onBlur": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This event fires when the Checkbox looses focus. It passes in `{ event }`."
            },
            "onChange": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This event fires when the Checkbox changes. Passes in `event, { checked }`. This used to be `checked, event, { checked }`."
            },
            "onFocus": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This event fires when the Checkbox is focused. It passes in `{ event }`."
            },
            "onKeyDown": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This event fires when a key is pressed down. It passes in `{ event }`."
            },
            "onKeyPress": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This event fires when a character is typed. See [this article](http://www.bloggingdeveloper.com/post/KeyPress-KeyDown-KeyUp-The-Difference-Between-Javascript-Key-Events.aspx) for more information. It passes in `{ event }`."
            },
            "onKeyUp": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This event fires when a pressed key is released. It passes in `{ event }`."
            },
            "readOnly": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Displays the value of the input, but does not allow changes."
            },
            "required": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Highlights the Checkbox as a required field (does not perform any validation)."
            },
            "role": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The aria-role of the checkbox."
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'base'",
                            "computed": false
                        },
                        {
                            "value": "'toggle'",
                            "computed": false
                        },
                        {
                            "value": "'button-group'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Which UX pattern of checkbox? The default is `base` while other option is `toggle`. (**Note:** `toggle` variant does not support the `indeterminate` feature, because [SLDS does not support it](https://lightningdesignsystem.com/components/forms/#flavor-checkbox-toggle-checkbox-toggle).)",
                "defaultValue": {
                    "value": "'base'",
                    "computed": false
                }
            }
        },
        "route": "checkboxes",
        "display-name": "Checkboxes",
        "SLDS-component-path": "/components/checkbox/",
        "dependencies": []
    },
    "combobox": {
        "description": "A widget that provides a user with an input field that is either an autocomplete or readonly, accompanied with a listbox of pre-definfined options.",
        "methods": [
            {
                "name": "getDialog",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "{ menuRenderer }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "getErrorId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getId",
                "docblock": "Shared class property getter methods",
                "modifiers": [],
                "params": [],
                "returns": null,
                "description": "Shared class property getter methods"
            },
            {
                "name": "getIsActiveOption",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getIsOpen",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getNewActiveOptionIndex",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "{ activeOptionIndex, offset, options }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "getTargetElement",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "setInputRef",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "component",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleBlurPill",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleClickOutside",
                "docblock": "Menu open/close and sub-render methods",
                "modifiers": [],
                "params": [
                    {
                        "name": "event"
                    }
                ],
                "returns": null,
                "description": "Menu open/close and sub-render methods"
            },
            {
                "name": "handleClose",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleInputBlur",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleInputChange",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleInputFocus",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleInputSubmit",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleKeyDown",
                "docblock": "Input and menu keyboard event methods",
                "modifiers": [],
                "params": [
                    {
                        "name": "event"
                    }
                ],
                "returns": null,
                "description": "Input and menu keyboard event methods"
            },
            {
                "name": "handleKeyDownDown",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleKeyDownUp",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleNavigateListboxMenu",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    },
                    {
                        "name": "{ direction }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleNavigateListboxOfPills",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    },
                    {
                        "name": "{ direction }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleOpen",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    },
                    {
                        "name": "data",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handlePillClickListboxOfPills",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    },
                    {
                        "name": "{ option, index }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleRemoveSelectedOption",
                "docblock": "Selected options with listbox of pills event methods",
                "modifiers": [],
                "params": [
                    {
                        "name": "event"
                    },
                    {
                        "name": "{ option, index }"
                    }
                ],
                "returns": null,
                "description": "Selected options with listbox of pills event methods"
            },
            {
                "name": "handleRequestClose",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    },
                    {
                        "name": "data",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleRequestFocusListboxOfPills",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    },
                    {
                        "name": "{ ref }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleSelect",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    },
                    {
                        "name": "{ selection, option }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "isSelected",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "{ selection, option }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "openDialog",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "requestOpenMenu",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "renderBase",
                "docblock": "Combobox variant subrenders\n(these can probably be broken into function components\nif state is passed in as a prop)",
                "modifiers": [],
                "params": [
                    {
                        "name": "{ assistiveText, labels, props }"
                    }
                ],
                "returns": null,
                "description": "Combobox variant subrenders\n(these can probably be broken into function components\nif state is passed in as a prop)"
            },
            {
                "name": "renderInlineMultiple",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "{ assistiveText, labels, props }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderInlineSingle",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "{ assistiveText, labels, props }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderMenu",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "{ assistiveText, labels }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderReadOnlyMultiple",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "{ assistiveText, labels, props }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderReadOnlySingle",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "{ assistiveText, labels, props }",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "label": {
                            "name": "string",
                            "required": false
                        },
                        "optionSelectedInMenu": {
                            "name": "string",
                            "required": false
                        },
                        "removeSingleSelectedOption": {
                            "name": "string",
                            "required": false
                        },
                        "removePill": {
                            "name": "string",
                            "required": false
                        },
                        "selectedListboxLabel": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility**\nThis object is merged with the default props object on every render.\n* `label`: This is used as a visually hidden label if, no `labels.label` is provided.\n* `optionSelectedInMenu`: Added before selected menu items in Read-only variants (Picklists). The default is `Current Selection:`.\n* `removeSingleSelectedOption`: Used by inline-listbox, single-select variant to remove the selected item (pill). This is a button with focus. The default is `Remove selected option`.\n* `removePill`: Used by multiple selection Comboboxes to remove a selected item (pill). Focus is on the pill. This is not a button. The default  is `, Press delete or backspace to remove`.\n* `selectedListboxLabel`: This is a label for the selected listbox. The grouping of pills for multiple selection Comboboxes. The default is `Selected Options:`.\n_Tested with snapshot testing._",
                "defaultValue": {
                    "value": "{\n    optionSelectedInMenu: 'Current Selection:',\n    removeSingleSelectedOption: 'Remove selected option',\n    removePill: ', Press delete or backspace to remove',\n    selectedListboxLabel: 'Selected Options:',\n}",
                    "computed": false
                }
            },
            "aria-describedby": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The `aria-describedby` attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them.\nThis is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need. _Tested with snapshot testing._"
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to tag with `.slds-combobox`. Uses `classNames` [API](https://github.com/JedWatson/classnames). _Tested with snapshot testing._"
            },
            "classNameContainer": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to top level tag with `.slds-form-element` and not on `.slds-combobox_container`. Uses `classNames` [API](https://github.com/JedWatson/classnames). _Tested with snapshot testing._"
            },
            "classNameMenu": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to tag with `.slds-dropdown`. Uses `classNames` [API](https://github.com/JedWatson/classnames). Autocomplete/bass variant menu height should not scroll and should be determined by number items which should be no more than 10. _Tested with snapshot testing._"
            },
            "classNameMenuSubHeader": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to tag with `.slds-dropdown__header`. Uses `classNames` [API](https://github.com/JedWatson/classnames)."
            },
            "events": {
                "type": {
                    "name": "shape",
                    "value": {
                        "onBlur": {
                            "name": "func",
                            "required": false
                        },
                        "onChange": {
                            "name": "func",
                            "required": false
                        },
                        "onClose": {
                            "name": "func",
                            "required": false
                        },
                        "onFocus": {
                            "name": "func",
                            "required": false
                        },
                        "onOpen": {
                            "name": "func",
                            "required": false
                        },
                        "onRequestClose": {
                            "name": "func",
                            "required": false
                        },
                        "onRequestOpen": {
                            "name": "func",
                            "required": false
                        },
                        "onRequestRemoveSelectedOption": {
                            "name": "func",
                            "required": false
                        },
                        "onSelect": {
                            "name": "func",
                            "required": false
                        },
                        "onSubmit": {
                            "name": "func",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "Event Callbacks\n* `onBlur`: Called when `input` removes focus.\n* `onChange`: Called when keyboard events occur within `input`\n* `onClose`: Triggered when the menu has closed.\n* `onFocus`: Called when `input` receives focus.\n* `onOpen`: Triggered when the menu has opened.\n* `onRequestClose`: Function called when the menu would like to hide. Please use with `isOpen`.\n* `onRequestOpen`:  Function called when the menu would like to show. Please use with `isOpen`.\n* `onRequestRemoveSelectedOption`: Function called when a single selection option is to be removed.\n* `onSelect`: Function called when a menu item is selected\n* `onSubmit`: Function called when user presses enter or submits the `input`\n_Tested with Mocha testing._",
                "defaultValue": {
                    "value": "{}",
                    "computed": false
                }
            },
            "errorText": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Message to display when the input is in an error state. When this is present, also visually highlights the component as in error. _Tested with snapshot testing._"
            },
            "hasStaticAlignment": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "By default, dialogs will flip their alignment (such as bottom to top) if they extend beyond a boundary element such as a scrolling parent or a window/viewpoint. `hasStaticAlignment` disables this behavior and allows this component to extend beyond boundary elements. _Not tested._"
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "HTML id for component. _Tested with snapshot testing._"
            },
            "labels": {
                "type": {
                    "name": "shape",
                    "value": {
                        "label": {
                            "name": "union",
                            "value": [
                                {
                                    "name": "node"
                                },
                                {
                                    "name": "string"
                                }
                            ],
                            "required": false
                        },
                        "multipleOptionsSelected": {
                            "name": "string",
                            "required": false
                        },
                        "noOptionsFound": {
                            "name": "union",
                            "value": [
                                {
                                    "name": "node"
                                },
                                {
                                    "name": "string"
                                }
                            ],
                            "required": false
                        },
                        "placeholder": {
                            "name": "string",
                            "required": false
                        },
                        "placeholderReadOnly": {
                            "name": "string",
                            "required": false
                        },
                        "removePillTitle": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Text labels for internationalization**\nThis object is merged with the default props object on every render.\n* `label`: This label appears above the input.\n* `multipleOptionsSelected`: This label is used by the readonly variant when multiple options are selected. The default is `${props.selection.length} options selected`. This will override the entire string.\n* `noOptionsFound`: Custom message that renders when no matches found. The default empty state is just text that says, 'No matches found.'.\n* `placeholder`: Input placeholder\n* `placeholderReadOnly`: Placeholder for Picklist-like Combobox\n* `removePillTitle`: Title on `X` icon\n_Tested with snapshot testing._",
                "defaultValue": {
                    "value": "{\n    noOptionsFound: 'No matches found.',\n    placeholderReadOnly: 'Select an Option',\n    removePillTitle: 'Remove',\n}",
                    "computed": false
                }
            },
            "isOpen": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Forces the dropdown to be open or closed. See controlled/uncontrolled callback/prop pattern for more on suggested use view [Concepts and Best Practices](https://github.com/salesforce-ux/design-system-react/blob/master/CONTRIBUTING.md#concepts-and-best-practices) _Tested with snapshot testing._"
            },
            "inheritWidthOf": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'target'",
                            "computed": false
                        },
                        {
                            "value": "'menu'",
                            "computed": false
                        },
                        {
                            "value": "'none'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Sets the dialog width to the width of one of the following:\n* `target`: Sets the dialog width to the width of the target. (Menus attached to `input` typically follow this UX pattern),\n* `menu`: Consider setting a `menuMaxWidth` if using this value. If not, width will be set to width of largest menu item.\n* `none`: Does not set a width on the dialog. _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "'target'",
                    "computed": false
                }
            },
            "menuItem": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Accepts a custom menu item rendering function that becomes a custom component. The checkmark is still rendered in readonly variants. This function is passed the following props:\n* `assistiveText`: Object, `assistiveText` prop that is passed into Combobox\n* `option`: Object, option data for item being rendered that is passed into Combobox\n* `selected`: Boolean, allows rendering of `assistiveText.optionSelectedInMenu` in Readonly Combobox\n\n_Tested with snapshot testing._"
            },
            "menuPosition": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'absolute'",
                            "computed": false
                        },
                        {
                            "value": "'overflowBoundaryElement'",
                            "computed": false
                        },
                        {
                            "value": "'relative'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Please select one of the following:\n* `absolute` - (default) The dialog will use `position: absolute` and style attributes to position itself. This allows inverted placement or flipping of the dialog.\n* `overflowBoundaryElement` - The dialog will overflow scrolling parents. Use on elements that are aligned to the left or right of their target and don't care about the target being within a scrolling parent. Typically this is a popover or tooltip. Dropdown menus can usually open up and down if no room exists. In order to achieve this a portal element will be created and attached to `body`. This element will render into that detached render tree.\n* `relative` - No styling or portals will be used. Menus will be positioned relative to their triggers. This is a great choice for HTML snapshot testing.",
                "defaultValue": {
                    "value": "'absolute'",
                    "computed": false
                }
            },
            "menuMaxWidth": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Sets a maximum width that the menu will be used if `inheritWidthOf` is set to `menu`. (Example: 500px) _Tested with snapshot testing._"
            },
            "multiple": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Allows multiple selections _Tested with mocha testing._"
            },
            "options": {
                "type": {
                    "name": "array"
                },
                "required": true,
                "description": "Item added to the dropdown menu.\nTo add an item as a separator, set item `type` as `separator`. Note: At the moment, we don't support two consecutive separators. _Tested with snapshot testing._"
            },
            "readOnlyMenuItemVisibleLength": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "5",
                            "computed": false
                        },
                        {
                            "value": "7",
                            "computed": false
                        },
                        {
                            "value": "10",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Determines the height of the menu based on SLDS CSS classes. This only applies to the readonly variant. This is a `number`.",
                "defaultValue": {
                    "value": "5",
                    "computed": false
                }
            },
            "predefinedOptionsOnly": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Limits auto-complete input submission to one of the provided options. _Tested with mocha testing._"
            },
            "required": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Applies label styling for a required form element. _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "false",
                    "computed": false
                }
            },
            "selection": {
                "type": {
                    "name": "array"
                },
                "required": false,
                "description": "Accepts an array of item objects. For single selection, pass in an array of one object. _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "[]",
                    "computed": false
                }
            },
            "value": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Value of input. This is a controlled component, so you will need to control the input value. _Tested with snapshot testing._"
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'base'",
                            "computed": false
                        },
                        {
                            "value": "'inline-listbox'",
                            "computed": false
                        },
                        {
                            "value": "'readonly'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Changes styles of the input. Currently `entity` is not supported. _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "'base'",
                    "computed": false
                }
            }
        },
        "route": "comboboxes",
        "display-name": "Comboboxes",
        "SLDS-component-path": "/components/comboboxes",
        "dependencies": []
    },
    "data-table": {
        "description": "DataTables support the display of structured data in rows and columns with an HTML table. To sort, filter or paginate the table, simply update the data passed in the items to the table and it will re-render itself appropriately. The table will throw a sort event as needed, and helper components for paging and filtering are coming soon.",
        "methods": [
            {
                "name": "handleToggleAll",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "e",
                        "type": null
                    },
                    {
                        "name": "{ checked }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleRowToggle",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "item",
                        "type": null
                    },
                    {
                        "name": "selected",
                        "type": null
                    },
                    {
                        "name": "e",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "assistiveTextForActionsHeader": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Text for heading of actions column",
                "defaultValue": {
                    "value": "'Actions'",
                    "computed": false
                }
            },
            "assistiveTextForColumnSort": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Text for sort action on table column header",
                "defaultValue": {
                    "value": "'Sort by: '",
                    "computed": false
                }
            },
            "assistiveTextForColumnSortedAscending": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Text announced once a column is sorted in ascending order",
                "defaultValue": {
                    "value": "'Sorted Ascending'",
                    "computed": false
                }
            },
            "assistiveTextForColumnSortedDescending": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Text announced once a column is sorted in descending order",
                "defaultValue": {
                    "value": "'Sorted Descending'",
                    "computed": false
                }
            },
            "assistiveTextForSelectAllRows": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Text for select all checkbox within the table header",
                "defaultValue": {
                    "value": "'Select all rows'",
                    "computed": false
                }
            },
            "assistiveTextForSelectRow": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Text for select row",
                "defaultValue": {
                    "value": "'Select row'",
                    "computed": false
                }
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Provide children of the type `<DataTableColumn />` to define the structure of the data being represented and children of the type `<DataTableRowActions />` to define a menu which will be rendered for each item in the grid. Use a _higher-order component_ to customize a data table cell that will override the default cell rendering. `CustomDataTableCell` must have the same `displayName` as `DataTableCell` or it will be ignored. If you want complete control of the HTML, including the wrapping `td`, you don't have to use `DataTableCell`.\n```\nimport DataTableCell from 'design-system-react/data-table/cell';\nconst CustomDataTableCell = ({ children, ...props }) => (\n  <DataTableCell {...props} >\n  <a href=\"javascript:void(0);\">{children}</a>\n  </DataTableCell>\n);\nCustomDataTableCell.displayName = DataTableCell.displayName;\n\n<DataTable>\n  <DataTableColumn />\n  <DataTableColumn>\n  <DataTableCustomCell />\n  </DataTableColumn>\n  <DataTableRowActions />\n</DataTable>\n```"
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Class names to be added to the table."
            },
            "columnBordered": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "A variant which adds border to the vertical columns."
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "A unique ID is needed in order to support keyboard navigation and ARIA support.",
                "defaultValue": {
                    "value": "shortid.generate()",
                    "computed": true
                }
            },
            "fixedLayout": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Use this if you are creating an advanced table (selectable, sortable, or resizable rows)"
            },
            "items": {
                "type": {
                    "name": "array"
                },
                "required": true,
                "description": "The collection of items to render in the table."
            },
            "noRowHover": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "A variant which removes hover style on rows"
            },
            "onChange": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This function fires when the selection of rows changes."
            },
            "onSort": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This function fires when the table should be sorted."
            },
            "selection": {
                "type": {
                    "name": "array"
                },
                "required": false,
                "description": "The selected rows.",
                "defaultValue": {
                    "value": "[]",
                    "computed": false
                }
            },
            "selectRows": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "True if rows should be selectable."
            },
            "stacked": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "A variant which modifies table layout by stacking cells to accommodate smaller viewports. Should not be used at the same time as `stackedHorizontal`."
            },
            "stackedHorizontal": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "A variant which modifies table layout by displaying the header and row data side by side for smaller viewports. Should not be used at the same time as `stacked`."
            },
            "striped": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "A variant which adds stripes to alternating rows."
            },
            "unborderedRow": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Tables have horizontal borders by default. This removes them."
            },
            "unbufferedCell": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "A variant which removes horizontal padding. CSS class will be removed if `fixedLayout==true`."
            }
        },
        "route": "data-tables",
        "display-name": "Data Tables",
        "SLDS-component-path": "/components/data-tables",
        "dependencies": [
            {
                "cell": {
                    "description": "The default Cell renderer for the DataTable. Pass in any React component with the same `displayName` which takes the same props to provide custom rendering.",
                    "methods": [],
                    "props": {
                        "children": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "node"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "The contents of the cell. This can be simple text or DOM nodes. Equivalent to `props.item[props.property]`"
                        },
                        "className": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "array"
                                    },
                                    {
                                        "name": "object"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Class names to be added to the cell."
                        },
                        "fixedLayout": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Use this if you are creating an advanced table (selectable, sortable, or resizable rows)"
                        },
                        "item": {
                            "type": {
                                "name": "object"
                            },
                            "required": false,
                            "description": "The item from the items which represents this row."
                        },
                        "primaryColumn": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "The primary column for a row. This is almost always the first column."
                        },
                        "property": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "The property of this item to display."
                        },
                        "title": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Shows on hover. Useful for truncated cells."
                        },
                        "width": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Width of column. This is required for advanced/fixed layout tables. Please provide units. (`rems` are recommended)"
                        }
                    },
                    "name": "cell",
                    "source": "/components/data-table/cell.jsx"
                }
            },
            {
                "column": {
                    "description": "Columns define the structure of the data displayed in the DataTable.",
                    "methods": [],
                    "props": {
                        "children": {
                            "type": {
                                "name": "element"
                            },
                            "required": false,
                            "description": "Use a _higher-order component_ to customize a data table cell that will override the default cell rendering. `CustomDataTableCell` must have the same `displayName` as `DataTableCell` or it will be ignored. If you want complete control of the HTML, including the wrapping `td`, you don't have to use `DataTableCell`.\n```\nimport DataTableCell from 'design-system-react/data-table/cell';\nconst CustomDataTableCell = ({ children, ...props }) => (\n  <DataTableCell {...props} >\n    <a href=\"javascript:void(0);\">{children}</a>\n  </DataTableCell>\n);\nCustomDataTableCell.displayName = DataTableCell.displayName;\n\n<DataTable>\n  <DataTableColumn />\n  <DataTableColumn>\n    <DataTableCustomCell />\n  </DataTableColumn>\n  <DataTableRowActions />\n</DataTable>\n```"
                        },
                        "isSorted": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Selects this column as the currently sorted column."
                        },
                        "label": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "string"
                                    },
                                    {
                                        "name": "node"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "The column label. If a `string` is not passed in, no `title` attribute will be rendered."
                        },
                        "primaryColumn": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "The primary column for a row. This is almost always the first column."
                        },
                        "property": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "The property which corresponds to this column."
                        },
                        "sortable": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Whether or not the column is sortable."
                        },
                        "sortDirection": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'desc'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'asc'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "The current sort direction. If left out the component will track this internally. Required if `isSorted` is true."
                        },
                        "title": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Title used for truncation div within the cell."
                        },
                        "truncate": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Adds truncate to cell node."
                        },
                        "width": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Width of column. This is required for advanced/fixed layout tables. Please provide units. (`rems` are recommended)"
                        }
                    },
                    "name": "column",
                    "source": "/components/data-table/column.jsx"
                }
            },
            {
                "highlight-cell": {
                    "description": "A Cell renderer for the DataTable that automatically highlights search text.",
                    "methods": [],
                    "props": {
                        "children": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "string"
                                    },
                                    {
                                        "name": "number"
                                    },
                                    {
                                        "name": "bool"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "The contents of the cell. Equivalent to `props.item[props.property]`"
                        },
                        "search": {
                            "type": {
                                "name": "any"
                            },
                            "required": false,
                            "description": "The string of text (or Regular Expression) to highlight."
                        }
                    },
                    "name": "highlight-cell",
                    "source": "/components/data-table/highlight-cell.jsx"
                }
            },
            {
                "row-actions": {
                    "description": "RowActions provide a mechanism for defining a menu to display alongside each row in the DataTable.",
                    "methods": [
                        {
                            "name": "handleClick",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "e",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "handleSelect",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "selection",
                                    "type": null
                                }
                            ],
                            "returns": null
                        }
                    ],
                    "props": {
                        "assistiveText": {
                            "type": {
                                "name": "object"
                            },
                            "required": false,
                            "description": "Description of the menu for screenreaders.",
                            "defaultValue": {
                                "value": "{ icon: 'Actions' }",
                                "computed": false
                            }
                        },
                        "className": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Class names to be added to the actions menu."
                        },
                        "id": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "HTML ID to be added to the actions menu."
                        },
                        "item": {
                            "type": {
                                "name": "object"
                            },
                            "required": false,
                            "description": "`DataTable` row item"
                        },
                        "noHint": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Disable hint styling which changes the color of the dropdown svg on hover over.",
                            "defaultValue": {
                                "value": "false",
                                "computed": false
                            }
                        },
                        "onAction": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Triggered when an item is selected."
                        },
                        "options": {
                            "type": {
                                "name": "array"
                            },
                            "required": false,
                            "description": "`Dropdown` options. See `Dropdown`.",
                            "defaultValue": {
                                "value": "[]",
                                "computed": false
                            }
                        },
                        "dropdown": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "A [Dropdown](http://react.lightningdesignsystem.com/components/dropdown-menus/) component. The props from this drop will be merged and override any default props.\n**Note:** onAction will not be overridden, both `DropDown`'s onSelect(dropDownActionOption) and onAction(rowItem, dropdownActionOption) will be called with appropriate parameters"
                        }
                    },
                    "name": "row-actions",
                    "source": "/components/data-table/row-actions.jsx"
                }
            }
        ]
    },
    "date-picker": {
        "description": "A date picker is a non text input form element. You can select a single date from a popup or inline calendar. The date picker supplied by this library comes with an input by default, but other components could be passed in as children--however, pairing with other components is untested.\n\nThe calendar is rendered with time/dates based on local browser time of the client. All dates are in local user timezones. Another way to put it is if a user selects a date, they are selecting midnight their time on that day and not mightnight in UTC. If this component is being used in conjuction with a timezone input, you may want to convert dates provided to UTC in that timezone.\n\nThis component is wrapped in a [higher order component to listen for clicks outside itself](https://github.com/kentor/react-click-outside) and thus requires use of `ReactDOM`.",
        "methods": [
            {
                "name": "getDatePicker",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "{ labels, assistiveText }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "getDialog",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "{ labels, assistiveText }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "getId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getIsOpen",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "setInputRef",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "component",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleCalendarChange",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    },
                    {
                        "name": "{ date }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleClickOutside",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleClose",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleInputChange",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleKeyDown",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleOpen",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    },
                    {
                        "name": "{ portal }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleRequestClose",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "openDialog",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "parseDate",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "formattedValue",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "nextMonth": {
                            "name": "string",
                            "required": false
                        },
                        "openCalendar": {
                            "name": "string",
                            "required": false
                        },
                        "previousMonth": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility**\nThis object is merged with the default props object on every render.\n* `nextMonth`: Label for button to go to the next month _Tested with snapshot testing._\n* `openCalendar`: Call to action label for calendar dialog trigger _Tested with snapshot testing._\n* `previousMonth`: Label for button to go to the previous month _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "{\n    nextMonth: 'Next month',\n    openCalendar: 'Open Calendar',\n    previousMonth: 'Previous month',\n}",
                    "computed": false
                }
            },
            "align": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'left'",
                            "computed": false
                        },
                        {
                            "value": "'right'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Aligns the right or left side of the menu with the respective side of the trigger. _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "'left'",
                    "computed": false
                }
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Pass in an `<Input />` component to customize it. Event handlers for the input (if needed) should be added here and not to this component. `<Input onKeyDown... />`.` _Tested with Mocha framework._"
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to tag with `slds-datepicker`. If you are looking for the outer DOM node (slds-dropdown-trigger), please review `triggerClassName`. _Tested with snapshot testing._"
            },
            "disabled": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Disable input and calendar. _Tested with Mocha framework._"
            },
            "dateDisabled": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This function callback receives a data object with a key of `date`. Write your own validation and return `true` if the date should be disabled, otherwise please return `false`. The value of `date` is the day rendered in the calendar with the current local time and timezone.",
                "defaultValue": {
                    "value": "() => false",
                    "computed": false
                }
            },
            "formatter": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Date formatting function. _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "function(date) {\n    return date\n        ? `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`\n        : '';\n}",
                    "computed": false
                }
            },
            "formattedValue": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Value of input that gets passed to `parser` prop. Set the `value` prop if using a `Date` object. Use an external library such as [MomentJS](https://github.com/moment/moment/) if additional date formatting or internationalization is needed. _Not tested._"
            },
            "hasStaticAlignment": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Prevents the dropdown from changing position based on the viewport/window. If set to true your dropdowns can extend outside the viewport _and_ overflow outside of a scrolling parent. If this happens, you might want to consider making the dropdowns contents scrollable to fit the menu on the screen. `hasStaticAlignment` disables this behavior and allows this component to extend beyond boundary elements. _Not tested._"
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "HTML id for component _Tested with snapshot testing._"
            },
            "labels": {
                "type": {
                    "name": "shape",
                    "value": {
                        "abbreviatedWeekDays": {
                            "name": "array",
                            "required": false
                        },
                        "label": {
                            "name": "string",
                            "required": false
                        },
                        "months": {
                            "name": "array",
                            "required": false
                        },
                        "placeholder": {
                            "name": "string",
                            "required": false
                        },
                        "today": {
                            "name": "string",
                            "required": false
                        },
                        "weekDays": {
                            "name": "array",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Text labels for internationalization**\nThis object is merged with the default props object on every render.\n* `abbreviatedWeekDays`: Three letter abbreviations of the days of the week, starting on Sunday. _Tested with snapshot testing._\n* `months`: Names of the months. _Tested with snapshot testing._\n* `label`: This label appears above the input.\n* `placeholder`: Placeholder text for input. _Tested with snapshot testing._\n* `today`: Label of shortcut to jump to today within the calendar. This is also used for assistive text on today's date. _Tested with snapshot testing._\n* `weekDays`: Full names of the seven days of the week, starting on Sunday. _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "{\n    abbreviatedWeekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n    months: [\n        'January',\n        'February',\n        'March',\n        'April',\n        'May',\n        'June',\n        'July',\n        'August',\n        'September',\n        'October',\n        'November',\n        'December',\n    ],\n    placeholder: 'Pick a Date',\n    today: 'Today',\n    weekDays: [\n        'Sunday',\n        'Monday',\n        'Tuesday',\n        'Wednesday',\n        'Thursday',\n        'Friday',\n        'Saturday',\n    ],\n}",
                    "computed": false
                }
            },
            "isOpen": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Forces the dropdown to be open or closed. See controlled/uncontrolled callback/prop pattern for more on suggested use view [Concepts and Best Practices](https://github.com/salesforce-ux/design-system-react/blob/master/CONTRIBUTING.md#concepts-and-best-practices)"
            },
            "isIsoWeekday": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Makes Monday the first day of the week. _Tested with snapshot testing._"
            },
            "menuPosition": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'absolute'",
                            "computed": false
                        },
                        {
                            "value": "'overflowBoundaryElement'",
                            "computed": false
                        },
                        {
                            "value": "'relative'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Please select one of the following:\n* `absolute` - (default) The dialog will use `position: absolute` and style attributes to position itself. This allows inverted placement or flipping of the dialog.\n* `overflowBoundaryElement` - The dialog will overflow scrolling parents. Use on elements that are aligned to the left or right of their target and don't care about the target being within a scrolling parent. Typically this is a popover or tooltip. Dropdown menus can usually open up and down if no room exists. In order to achieve this a portal element will be created and attached to `body`. This element will render into that detached render tree.\n* `relative` - No styling or portals will be used. Menus will be positioned relative to their triggers. This is a great choice for HTML snapshot testing.",
                "defaultValue": {
                    "value": "'absolute'",
                    "computed": false
                }
            },
            "onCalendarFocus": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when the user wants to focus on a new day with the keyboard. If the target node is a day it will return the keyboard event a data object with the shape: `{date: [Date object]}`. Event will be `null` when new month is re-rendered.  _Tested with Mocha framework._"
            },
            "onChange": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when the date changes. `onChange` can be used for form validation if needed. It receives an event and a data object in the shape: `{date: [Date object], formattedDate: [string], timezoneOffset: [number]}`. `data.date` is Coordinated Universal Time (UTC), but the days of the calendar are in local time of the user. The `timezoneOffset` is the difference, in minutes, between UTC and the local time. Please note that this means that the offset is positive if the local timezone is behind UTC and negative if it is ahead. `timezoneOffset` is in minutes, for hours divide by `60`. _Tested with Mocha framework._"
            },
            "onClose": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when the calendar is closed. _Tested with Mocha framework._"
            },
            "onOpen": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when the calendar has opened. _Tested with Mocha framework._"
            },
            "onRequestClose": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Function called when the calendar dialog would like hide. This will turn the calendar dialog into into a controlled component. Please use with `isOpen`. _Tested with Mocha framework._"
            },
            "onRequestOpen": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Function called when the calendar dialog would like show. This will turn the calendar dialog into into a controlled component. Please use with `isOpen`. _Tested with Mocha framework._"
            },
            "parser": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Custom function to parse date string into and return a `Date` object. Default function passes the input value to `Date()` and prays for a miracle. Use an external library such as [MomentJS](https://github.com/moment/moment/) if additional date parsing is needed. _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "function(str) {\n    return new Date(str);\n}",
                    "computed": false
                }
            },
            "relativeYearFrom": {
                "type": {
                    "name": "number"
                },
                "required": false,
                "description": "Offset of year from current year that can be selected in the year selection dropdown. (2017 - 5 = 2012). _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "-5",
                    "computed": false
                }
            },
            "relativeYearTo": {
                "type": {
                    "name": "number"
                },
                "required": false,
                "description": "Offset of year from current year that can be selected in the year selection dropdown. (2017 + 5 = 2012). _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "5",
                    "computed": false
                }
            },
            "triggerClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to tag with `slds-datepicker-trigger`. This is typically a wrapping `div` around the input. _Tested with snapshot testing._"
            },
            "value": {
                "type": {
                    "name": "instanceOf",
                    "value": "Date"
                },
                "required": false,
                "description": "Sets date with a `Date` ECMAScript object. _Tested with snapshot testing._"
            }
        },
        "route": "datepickers",
        "display-name": "Datepickers",
        "SLDS-component-path": "/components/datepickers",
        "dependencies": []
    },
    "filter": {
        "description": "A Filter is a popover with custom trigger. It can be used by [Panel Filtering](/components/panels/). Menus within a Filter Popover will need to not have \"portal mounts\" and be inline.",
        "methods": [
            {
                "name": "getId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getCustomPopoverProps",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "{ assistiveText }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleFilterClick",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleClose",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleChange",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleRemove",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "align": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'left'",
                            "computed": false
                        },
                        {
                            "value": "'right'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Aligns the popover with the respective side of the trigger. That is `left` will place the `Popover` to the left of the Filter.",
                "defaultValue": {
                    "value": "'left'",
                    "computed": false
                }
            },
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "editFilter": {
                            "name": "string",
                            "required": false
                        },
                        "editFilterHeading": {
                            "name": "string",
                            "required": false
                        },
                        "removeFilter": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility**\n* `removeFilter`: Assistive text for removing a filter. The default is `Remove Filter: this.props.property this.props.predicate`.\n* `editFilter`: Assistive text for changing a filter.\n* `editFilterHeading`: Assistive text for Popover heading.",
                "defaultValue": {
                    "value": "{\n    editFilter: 'Edit filter:',\n    editFilterHeading: 'Choose filter criteria',\n}",
                    "computed": false
                }
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Contents of popover. That is the dropdowns and inputs that set the filter criteria."
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Custom CSS classes for `slds-filters__item` node. Uses `classNames` [API](https://github.com/JedWatson/classnames)."
            },
            "isError": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Applies error state styling. Per filter error messages are outside this components."
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the dropdown to the triggering button. An `id` will be generated if none is supplied."
            },
            "isLocked": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, the filter will not display an editing popover when clicked."
            },
            "isNew": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Applies new filter styling."
            },
            "isPermanent": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, the filter will not include a remove button."
            },
            "onChange": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Will be triggered when Done within the Popover is clicked. This is the place to update the filter props displayed. Callback will recieve parameters: `clickEvent, { id }`. An index into your store may be a good setting for `id`, so that it will be passed back here."
            },
            "onRemove": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Will be triggered when \"Remove Filter\" button is clicked. Callback will recieve parameters: `clickEvent, { id }`. An index into your store may be a good setting for `id`, so that it will be passed back here."
            },
            "onClick": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Will be triggered when Filter is clicked. This is the place to close/open popover if a custom popover is passed in"
            },
            "popover": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "A `Popover` component. The props from this popover will be merged and override any default props. This also allows a Filter's Popover dialog to be a controlled component. _Tested with Mocha framework._"
            },
            "predicate": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "The criteria you are filtering for. For instance, if \"Hair Color is PURPLE\" is your filter, \"is PURPLE\" is your filter predicate.",
                "defaultValue": {
                    "value": "'New Filter'",
                    "computed": false
                }
            },
            "property": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "The property you are filtering. For instance, if \"Hair Color is PURPLE\" is your filter, \"Hair Color\" is your filter property."
            }
        },
        "route": "filters",
        "display-name": "Filters",
        "SLDS-component-path": "/components/filter",
        "dependencies": []
    },
    "input": {
        "description": "The HTML `input` with a label and error messaging.",
        "methods": [
            {
                "name": "getId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getErrorId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getIconRender",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "position",
                        "type": null
                    },
                    {
                        "name": "iconPositionProp",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "aria-activedescendant": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The aria-activedescendant attribute contains the ID of the currently active child object that is part of a composite widget within the Document Object Model. It makes do with the overhead of having all or more than one child focusable. As the name specifies, it helps in managing the current active child of the composite widget."
            },
            "aria-autocomplete": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Indicates if the suggestions in a composite widget are values that complete the current textbox input."
            },
            "aria-controls": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "An HTML ID that is shared with ARIA-supported devices with the\n`aria-controls` attribute in order to relate the input with\nanother region of the page. An example would be a select box\nthat shows or hides a panel."
            },
            "aria-describedby": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The `aria-describedby` attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need."
            },
            "aria-expanded": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Use the `aria-expanded` state to indicate whether regions of the content are collapsible, and to expose whether a region is currently expanded or collapsed."
            },
            "aria-haspopup": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Indicates that the element has a popup context menu or sub-level menu."
            },
            "aria-labelledby": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The aria-labelledby attribute contains the element IDs of labels in objects such as input elements, widgets, and groups. The attribute establishes relationships between objects and their labels. Assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them. Without an element ID, the assistive technology cannot catalog the object."
            },
            "aria-owns": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "An HTML ID that is shared with ARIA-supported devices with the\n`aria-controls` attribute in order to relate the input with\nanother region of the page. An example would be a search field\nthat shows search results."
            },
            "aria-required": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "The `aria-required` attribute is used to indicate that user input is required on an element before a form can be submitted."
            },
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "label": {
                            "name": "string",
                            "required": false
                        },
                        "spinner": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility**\n* `label`: Visually hidden label but read out loud by screen readers.\n* `spinner`: Text for loading spinner icon."
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Elements are added after the `input`."
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Class names to be added to the outer container of the input."
            },
            "defaultValue": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "This is the initial value of an uncontrolled form element and\nis present only to provide compatibility with hybrid framework\napplications that are not entirely React. It should only be used\nin an application without centralized state (Redux, Flux).\n\"Controlled components\" with centralized state is highly recommended.\nSee [Code Overview](https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#controlled-and-uncontrolled-components) for more information."
            },
            "disabled": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Disables the input and prevents editing the contents."
            },
            "errorText": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "node"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Message to display when the input is in an error state. When this is present, also visually highlights the component as in error."
            },
            "fixedTextLeft": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "node"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Displays text or node to the left of the input. This follows the fixed text input UX pattern."
            },
            "fixedTextRight": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "node"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Displays text or node to the right of the input. This follows the fixed text input UX pattern."
            },
            "hasSpinner": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, loading spinner appears inside input on right hand side."
            },
            "iconLeft": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Left aligned icon, must be instace of `design-system-react/components/icon/input-icon`"
            },
            "iconRight": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Right aligned icon, must be instace of `design-system-react/components/icon/input-icon`"
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Every input must have a unique ID in order to support keyboard navigation and ARIA support."
            },
            "inputRef": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This callback exposes the input reference / DOM node to parent components. `<Parent inputRef={(inputComponent) => this.input = inputComponent} />"
            },
            "isStatic": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Displays the value of the input statically. This follows the static input UX pattern."
            },
            "label": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "This label appears above the input."
            },
            "onBlur": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when focus is removed."
            },
            "onChange": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This callback fires when the input changes. The synthetic React event will be the first parameter to the callback. You will probably want to reference `event.target.value` in your callback. No custom data object is provided."
            },
            "onClick": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This event fires when the input is clicked."
            },
            "onFocus": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when component is focused."
            },
            "onInput": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Similar to `onchange`. Triggered when an element gets user input."
            },
            "onInvalid": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a submittable `<input>` element is invalid."
            },
            "onKeyDown": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a key is pressed down"
            },
            "onKeyPress": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a key is pressed and released"
            },
            "onKeyUp": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a key is released"
            },
            "onSelect": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered after some text has been selected in an element."
            },
            "onSubmit": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Fires when a form is submitted."
            },
            "placeholder": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Text that will appear in an empty input."
            },
            "minLength": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Sets the minimum number of characters that an `<input>` can accept."
            },
            "maxLength": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Sets the maximum number of characters that an `<input>` can accept."
            },
            "name": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Name of the submitted form parameter."
            },
            "readOnly": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Displays the value of the input as read-only. This is used in the inline edit UX pattern."
            },
            "required": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Highlights the input as a required field (does not perform any validation)."
            },
            "role": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "ARIA role"
            },
            "type": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'text'",
                            "computed": false
                        },
                        {
                            "value": "'password'",
                            "computed": false
                        },
                        {
                            "value": "'datetime'",
                            "computed": false
                        },
                        {
                            "value": "'datetime-local'",
                            "computed": false
                        },
                        {
                            "value": "'date'",
                            "computed": false
                        },
                        {
                            "value": "'month'",
                            "computed": false
                        },
                        {
                            "value": "'time'",
                            "computed": false
                        },
                        {
                            "value": "'week'",
                            "computed": false
                        },
                        {
                            "value": "'number'",
                            "computed": false
                        },
                        {
                            "value": "'email'",
                            "computed": false
                        },
                        {
                            "value": "'url'",
                            "computed": false
                        },
                        {
                            "value": "'search'",
                            "computed": false
                        },
                        {
                            "value": "'tel'",
                            "computed": false
                        },
                        {
                            "value": "'color'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "The `<Input>` element includes support for all HTML5 types.",
                "defaultValue": {
                    "value": "'text'",
                    "computed": false
                }
            },
            "value": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The input is a controlled component, and will always display this value."
            }
        },
        "route": "inputs",
        "display-name": "Inputs",
        "SLDS-component-path": "/components/input/",
        "dependencies": []
    },
    "global-header": {
        "description": "The global header is the anchor for the Salesforce platform and spans all other parts of the UI. It accepts children to define the items displayed within.\n\nExample:\n```\n<SLDSGlobalHeader>\n  <SLDSGlobalHeaderSearch />\n  <SLDSGlobalHeaderButton />\n  <SLDSGlobalHeaderDropdown />\n  <SLDSGlobalHeaderDropdown />\n  <SLDSGlobalHeaderProfile />\n</SLDSGlobalHeader>\n```",
        "methods": [
            {
                "name": "handleSkipToContent",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "e",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleSkipToNav",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "e",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "skipToNav": {
                            "name": "string",
                            "required": false
                        },
                        "skipToContent": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility.**\nThis object is merged with the default props object on every render.\n* `skipToNav`: The localized text that will be read back for the \"Skip to Navigation\" accessibility link.\n* `skipToContent`: The localized text that will be read back for the \"Skip to Main Content\" accessibility link.",
                "defaultValue": {
                    "value": "{\n    skipToNav: 'Skip to Navigation',\n    skipToContent: 'Skip to Main Content',\n}",
                    "computed": false
                }
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "See the component description, this accepts some combination of `SLDSGlobalHeaderSearch`, `SLDSGlobalHeaderButton`, `SLDSGlobalHeaderDropdown`, and `SLDSGlobalHeaderProfile` components."
            },
            "logoSrc": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The Salesforce logo to display in the header.",
                "defaultValue": {
                    "value": "'/assets/images/logo-noname.svg'",
                    "computed": false
                }
            },
            "navigation": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Pass in the Global Navigation Bar component"
            },
            "onSkipToContent": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Required for accessibility. Should jump the user to the primary content area."
            },
            "onSkipToNav": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Required for accessibility. Should jump the user to the primary navigation."
            }
        },
        "route": "global-header",
        "display-name": "Global Header",
        "SLDS-component-path": "/components/global-header#flavor-base",
        "dependencies": [
            {
                "button": {
                    "description": "A helper component that renders a Button in the tools area of the Global Header. Currently defaults to a bare icon, but this can be overriden if text-based buttons are required.",
                    "methods": [],
                    "name": "button",
                    "source": "/components/global-header/button.jsx"
                }
            },
            {
                "dropdown": {
                    "description": "This component is an implementation of `MenuDropdown` with a custom trigger. All the properties listed below are provided to the `MenuDropdown` component. Any additional properties are provided to the Custom Trigger (that is the `Button` or `li` tag).",
                    "methods": [],
                    "props": {
                        "align": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'left'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'right'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Aligns the right or left side of the menu with the respective side of the trigger. This is not intended for use with `nubbinPosition`.",
                            "defaultValue": {
                                "value": "'right'",
                                "computed": false
                            }
                        },
                        "className": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Extra classnames to apply to the dropdown menu."
                        },
                        "buttonClassName": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "array"
                                    },
                                    {
                                        "name": "object"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "CSS classes to be added to `li` element."
                        },
                        "iconName": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Name of the icon. Visit <a href=\"http://www.lightningdesignsystem.com/resources/icons\">Lightning Design System Icons</a> to reference icon names."
                        },
                        "iconVariant": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'bare'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'container'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'border'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'border-filled'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'more'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'global-header'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "For icon variants, please reference <a href=\"http://www.lightningdesignsystem.com/components/buttons/#icon\">Lightning Design System Icons</a>.",
                            "defaultValue": {
                                "value": "'global-header'",
                                "computed": false
                            }
                        },
                        "id": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the dropdown to the triggering button."
                        },
                        "globalAction": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Adds custom styling such as inverse fill and special sizing/spacing"
                        },
                        "nubbinPosition": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'top left'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'top'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'top right'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'bottom left'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'bottom'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'bottom right'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Positions dropdown menu with a nubbin--that is the arrow notch. The placement options correspond to the placement of the nubbin. This is implemeted with CSS classes and is best used with a `Button` with \"icon container\" styling. Dropdown menus will still be contained to the closest scrolling parent.",
                            "defaultValue": {
                                "value": "'top right'",
                                "computed": false
                            }
                        },
                        "offset": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Offset adds pixels to the absolutely positioned dropdown menu in the format: ([vertical]px [horizontal]px).",
                            "defaultValue": {
                                "value": "'12px 16px'",
                                "computed": false
                            }
                        },
                        "onSelect": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Triggered when an item in the menu is clicked."
                        },
                        "options": {
                            "type": {
                                "name": "array"
                            },
                            "required": true,
                            "description": "An array of menu item."
                        },
                        "buttonVariant": {
                            "defaultValue": {
                                "value": "'icon'",
                                "computed": false
                            }
                        }
                    },
                    "name": "dropdown",
                    "source": "/components/global-header/dropdown.jsx"
                }
            },
            {
                "profile": {
                    "description": "A helper component that renders a MenuDropdown for the user profile.",
                    "methods": [],
                    "props": {
                        "align": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'left'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'right'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Aligns the right or left side of the menu with the respective side of the trigger. This is not intended for use with `nubbinPosition`.",
                            "defaultValue": {
                                "value": "'right'",
                                "computed": false
                            }
                        },
                        "children": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "By default, any children passed into this component will be rendered inside the dropdown menu. If you need custom content and a list, import 'design-system-react/components/utilities/menu-list/list' and pass in `<List>`.\n\n```\n<Dropdown>\n  <div>Look ma! This is Custom Content.</div>\n  <List options={[myArray]}/>\n</Dropdown>\n```"
                        },
                        "className": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Extra classnames to apply to the dropdown menu."
                        },
                        "avatar": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "An image URL to display for the user profile."
                        },
                        "buttonClassName": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "array"
                                    },
                                    {
                                        "name": "object"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "CSS classes to be added to `li` element."
                        },
                        "id": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the dropdown to the triggering button."
                        },
                        "nubbinPosition": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'top left'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'top'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'top right'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'bottom left'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'bottom'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'bottom right'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Positions dropdown menu with a nubbin--that is the arrow notch. The placement options correspond to the placement of the nubbin. This is implemeted with CSS classes and is best used with a `Button` with \"icon container\" styling. Dropdown menus will still be contained to the closest scrolling parent.",
                            "defaultValue": {
                                "value": "'top right'",
                                "computed": false
                            }
                        },
                        "offset": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Offset adds pixels to the absolutely positioned dropdown menu in the format: ([vertical]px [horizontal]px).",
                            "defaultValue": {
                                "value": "'-12px -18px'",
                                "computed": false
                            }
                        },
                        "onSelect": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Triggered when an item in the menu is clicked."
                        },
                        "options": {
                            "type": {
                                "name": "array"
                            },
                            "required": false,
                            "description": "An array of menu item."
                        },
                        "buttonVariant": {
                            "defaultValue": {
                                "value": "'icon'",
                                "computed": false
                            }
                        },
                        "iconVariant": {
                            "defaultValue": {
                                "value": "'container'",
                                "computed": false
                            }
                        }
                    },
                    "name": "profile",
                    "source": "/components/global-header/profile.jsx"
                }
            },
            {
                "search": {
                    "description": "The Global Header Search component is currently a Lookup. In the future this wrapper may provide additional presets or features.",
                    "methods": [],
                    "name": "search",
                    "source": "/components/global-header/search.jsx"
                }
            }
        ]
    },
    "global-navigation-bar": {
        "description": "Global Navigation Bar represents a list of links that either take the user to another page or parts of the page the user is in.",
        "methods": [],
        "props": {
            "children": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "The items to be displayed in the Global Navigation Bar."
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS class names to be added to the container element."
            },
            "cloud": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Typically the cloud name (e.g.- \"sales\" or \"marketing\"). This primarily changes the background color.",
                "defaultValue": {
                    "value": "'default'",
                    "computed": false
                }
            },
            "theme": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'light'",
                            "computed": false
                        },
                        {
                            "value": "'dark'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Transforms text and interactions (such as hover) to be more visually accessible.",
                "defaultValue": {
                    "value": "'dark'",
                    "computed": false
                }
            }
        },
        "route": "global-navigation-bar",
        "display-name": "Global Navigation Bar",
        "SLDS-component-path": "/components/global-navigation#flavor-navigation-bar",
        "dependencies": [
            {
                "button": {
                    "description": "A helper component that renders a Button as an item in the Global Navigation Bar. All props are passed onto `Button` except `active` and `dividerPosition`.",
                    "methods": [],
                    "props": {
                        "active": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Whether the item is active or not."
                        },
                        "dividerPosition": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'left'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'right'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Determines position of separating bar."
                        },
                        "className": {
                            "defaultValue": {
                                "value": "'slds-context-bar__label-action slds-text-body--regular'",
                                "computed": false
                            }
                        },
                        "style": {
                            "defaultValue": {
                                "value": "{ lineHeight: 'inherit' }",
                                "computed": false
                            }
                        },
                        "variant": {
                            "defaultValue": {
                                "value": "'base'",
                                "computed": false
                            }
                        }
                    },
                    "name": "button",
                    "source": "/components/global-navigation-bar/button.jsx"
                }
            },
            {
                "dropdown": {
                    "description": "This component is an implementation of `MenuDropdown` with a custom trigger. All the properties listed below are provided to the `MenuDropdown` component. Any additional properties are provided to the Custom Trigger (that is the `Button` or `li` tag).",
                    "methods": [],
                    "props": {
                        "active": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Whether the item is active or not."
                        },
                        "activeBackgroundColor": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Allows alignment of active item with active application background color."
                        },
                        "assistiveText": {
                            "type": {
                                "name": "shape",
                                "value": {
                                    "icon": {
                                        "name": "string",
                                        "required": false
                                    }
                                }
                            },
                            "required": false,
                            "description": "**Assistive text for accessibility.**\nThis object is merged with the default props object on every render.\n* `icon`: Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means. If the button has an icon and a visible label, you can omit the <code>assistiveText.icon</code> prop and use the <code>label</code> prop."
                        },
                        "align": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'left'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'right'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Aligns the right or left side of the menu with the respective side of the trigger. This is not intended for use with `nubbinPosition`.",
                            "defaultValue": {
                                "value": "'right'",
                                "computed": false
                            }
                        },
                        "className": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Extra classnames to apply to the dropdown menu."
                        },
                        "dividerPosition": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'left'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'right'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Determines position of separating bar."
                        },
                        "buttonClassName": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "array"
                                    },
                                    {
                                        "name": "object"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "CSS classes to be added to `li` element."
                        },
                        "id": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the dropdown to the triggering button."
                        },
                        "length": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "null",
                                        "computed": false
                                    },
                                    {
                                        "value": "'5'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'7'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'10'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Provided to List to indicate number of items visible in the List. Pass `null` to display all items, or a string containing one of the numeric option values listed under [Dropdown Height](https://www.lightningdesignsystem.com/components/menus/#flavor-dropdown-height) at the right (eg. '5').",
                            "defaultValue": {
                                "value": "null",
                                "computed": false
                            }
                        },
                        "offset": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Offset adds pixels to the absolutely positioned dropdown menu in the format: ([vertical]px [horizontal]px)."
                        },
                        "onSelect": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Triggered when an item in the menu is clicked."
                        },
                        "options": {
                            "type": {
                                "name": "array"
                            },
                            "required": true,
                            "description": "An array of menu item."
                        }
                    },
                    "name": "dropdown",
                    "source": "/components/global-navigation-bar/dropdown.jsx"
                }
            },
            {
                "label": {
                    "description": "Wraps text in the proper markup and removes link styling to support use in the GlobalNavigationBar.",
                    "methods": [],
                    "props": {
                        "className": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "array"
                                    },
                                    {
                                        "name": "object"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Class names to be added to the `span` element"
                        },
                        "dividerPosition": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'left'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'right'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Determines position of separating bar."
                        },
                        "id": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Id string applied to first <span> inside of <li>"
                        },
                        "label": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Text to show"
                        }
                    },
                    "name": "label",
                    "source": "/components/global-navigation-bar/label.jsx"
                }
            },
            {
                "link": {
                    "description": "Wraps a link in the proper markup to support use in the GlobalNavigationBar.",
                    "methods": [],
                    "props": {
                        "active": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Whether the item is active or not."
                        },
                        "activeBackgroundColor": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Allows alignment of active item with active application background color. If application background is dark, text color may need to be `#fff`. This can be done with the style prop."
                        },
                        "className": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "array"
                                    },
                                    {
                                        "name": "object"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Class names to be added to the anchor element"
                        },
                        "dividerPosition": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'left'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'right'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Determines position of separating bar."
                        },
                        "href": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "The `href` attribute of the link. Please pass in bookmarkable URLs from your routing library. Use `GlobalNavigationBarButton` if a \"real URL\" is not desired. If the `onClick` callback is specified this URL will still be prevented from changing the browser's location.",
                            "defaultValue": {
                                "value": "'javascript:void(0);'",
                                "computed": false
                            }
                        },
                        "id": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "The `id` attribute is applied to the `li` tag. _This was recently changed from being on the anchor tag._"
                        },
                        "label": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Text to show for link item."
                        },
                        "onBlur": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Triggered when focus is removed."
                        },
                        "onClick": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "`function (event, href)` - fires when the link is clicked. If set, the browser location change to the `href` specified will be ignored, but the `href` will be included in an additional parameter passed to the callback."
                        },
                        "onFocus": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Triggered when component is focused."
                        },
                        "onKeyDown": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Triggered when a key is pressed down"
                        },
                        "onKeyPress": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Triggered when a key is pressed and released"
                        },
                        "onKeyUp": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Triggered when a key is released"
                        },
                        "onMouseEnter": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Triggered when a mouse arrow hovers"
                        },
                        "onMouseLeave": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Triggered when a mouse arrow no longer hovers"
                        },
                        "tabIndex": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Write \"-1\" if you don't want the user to tab to the button."
                        }
                    },
                    "name": "link",
                    "source": "/components/global-navigation-bar/link.jsx"
                }
            },
            {
                "region": {
                    "description": "Regions make up a GlobalNavigation Bar and typically contain links and dropdowns. The Primary region contains the AppSwitcher, Application Name, and Object Switcher. The secondary region typically has navigation betweens sections of the application. The tertiary region is aligned to the right side of the screen and contains shortcuts or actions.",
                    "methods": [],
                    "props": {
                        "children": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "Contents of region. Expects `GlobalNavigationBarLink`, `GlobalNavigationBarDropdown`, `GlobalNavigationBarApplicationName`, `AppSwitcher`, but could be any component. This is the place to pass in an Object Switcher until that is supported."
                        },
                        "dividerPosition": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'left'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'right'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Determines position of separating bar."
                        },
                        "className": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "array"
                                    },
                                    {
                                        "name": "object"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "CSS classes to be added to the region"
                        },
                        "navigation": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Wraps the `secondary` region in a `nav` and adds a role attribute"
                        },
                        "region": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'primary'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'secondary'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'tertiary'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": true,
                            "description": "Region wrap children in styling specific to that region."
                        }
                    },
                    "name": "region",
                    "source": "/components/global-navigation-bar/region.jsx"
                }
            }
        ]
    },
    "icon": {
        "description": "The Icon component is the Lightning Design System Icon component and should be used for naked icons. For icons that are buttons, use the <a href='/components/buttons/'>Button component</a> component with <code>variant='icon'</code>.",
        "methods": [],
        "props": {
            "assistiveText": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means.\nNaked icons must have assistive text, however, if you also have visible descriptive text with the icon,\ndeclare this prop as <code>assistiveText=''</code>."
            },
            "category": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'action'",
                            "computed": false
                        },
                        {
                            "value": "'custom'",
                            "computed": false
                        },
                        {
                            "value": "'doctype'",
                            "computed": false
                        },
                        {
                            "value": "'standard'",
                            "computed": false
                        },
                        {
                            "value": "'utility'",
                            "computed": false
                        }
                    ]
                },
                "required": true,
                "description": "Icon category from [lightningdesignsystem.com/icons/](https://www.lightningdesignsystem.com/icons/)",
                "defaultValue": {
                    "value": "'standard'",
                    "computed": false
                }
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes that are applied to the SVG."
            },
            "containerClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes that are applied to the span."
            },
            "colorVariant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'base'",
                            "computed": false
                        },
                        {
                            "value": "'default'",
                            "computed": false
                        },
                        {
                            "value": "'error'",
                            "computed": false
                        },
                        {
                            "value": "'warning'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Icon color variants"
            },
            "icon": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "A custom SVG object to use instead of the supplied SLDS icons, look in `design-system-react/icons` for examples and syntax."
            },
            "inverse": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Setting `inverse` to true will switch the color of the icon: light to dark, dark to light."
            },
            "name": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Name of the icon. Visit <a href='http://www.lightningdesignsystem.com/resources/icons'>Lightning Design System Icons</a> to reference icon names."
            },
            "path": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Path to the icon. This will override any global icon settings"
            },
            "size": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'xx-small'",
                            "computed": false
                        },
                        {
                            "value": "'x-small'",
                            "computed": false
                        },
                        {
                            "value": "'small'",
                            "computed": false
                        },
                        {
                            "value": "'medium'",
                            "computed": false
                        },
                        {
                            "value": "'large'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Size of the icon. Visit [lightningdesignsystem.com/components/icons/#flavor-sizes](https://www.lightningdesignsystem.com/components/icons/#flavor-sizes)",
                "defaultValue": {
                    "value": "'medium'",
                    "computed": false
                }
            },
            "style": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "Custom styles to be passed to the SVG. Could be used to change icon or background color."
            },
            "title": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Title attribute for the icon container"
            }
        },
        "route": "icons",
        "display-name": "Icons",
        "SLDS-component-path": "/components/icons",
        "dependencies": []
    },
    "icon-settings": {
        "description": "The Icon Settings component allows for the path to the icons to be specified in all child components and is recommended to be used at the root of the application. It's render function is `return this.props.children`, so it can only have one child node.\n\n**Individual sprites**\nIf you are using webpack it is advised to use the sprite properties\n{actionSprite, standardSprite...} to specify the individual sprite paths so that webpack can\neasily re-write the paths.\n```\nimport actionSprite from '......';\n\n<IconSettings actionSprite={actionSprite} ......>\n```\n**Root icon path**\nOtherwise use the iconPath to specify the root path to where the icon files will be located in you application\nsuch as `/assets/icons`.",
        "methods": [],
        "props": {
            "iconPath": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Path to the root icon folder\nexample: `/assets/icons`"
            },
            "actionSprite": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Path to the action sprite\nexample: '@salesforce-ux/design-system/assets/icons/action-sprite/svg/symbols.svg';"
            },
            "customSprite": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Path to the custom sprite\nexample: '@salesforce-ux/design-system/assets/icons/custom-sprite/svg/symbols.svg';"
            },
            "doctypeSprite": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Path to the doctype sprite\nexample: '@salesforce-ux/design-system/assets/icons/doctype-sprite/svg/symbols.svg';"
            },
            "standardSprite": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Path to the standard sprite\nexample: '@salesforce-ux/design-system/assets/icons/standard-sprite/svg/symbols.svg';"
            },
            "utilitySprite": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Path to the utility sprite\nexample: '@salesforce-ux/design-system/assets/icons/utility-sprite/svg/symbols.svg';"
            }
        },
        "route": "icon-settings",
        "display-name": "Icon Settings",
        "SLDS-component-path": "/components/icons-settings",
        "dependencies": []
    },
    "illustration": {
        "description": "An illustration is an image and inline text that work in tandem to communicate a state in a more friendly way.",
        "methods": [],
        "props": {
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes that are applied to the SVG. _Tested with Mocha testing._"
            },
            "heading": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "A heading text. It is required if illustration is present. _Tested with snapshot testing._ _Tested with Mocha testing._"
            },
            "illustration": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "A custom SVG object to use instead of the supplied SLDS illustrations, look in `design-system-react/assets/images/illustrations` for examples and syntax. _Tested with snapshot testing._ _Tested with Mocha testing._"
            },
            "internalIllustration": {
                "type": {
                    "name": "bool"
                },
                "required": true,
                "description": "Indicates whether the illustration SVGs are from the design-system-react repo. If yes, set to true.",
                "defaultValue": {
                    "value": "true",
                    "computed": false
                }
            },
            "messageBody": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "string"
                        },
                        {
                            "name": "node"
                        }
                    ]
                },
                "required": false,
                "description": "A message body below the heading to further communicate the state of the component. _Tested with snapshot testing._ _Tested with Mocha testing._"
            },
            "name": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Name of the illustration. Visit <a href='https://lightningdesignsystem.com/components/illustration/'>Lightning Design System Illustration</a> to reference illustration names. _Tested with snapshot testing._ _Tested with Mocha testing._"
            },
            "path": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Path to the illustration SVG image. _Tested with snapshot testing._"
            },
            "size": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'small'",
                            "computed": false
                        },
                        {
                            "value": "'large'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Size of the illustration. _Tested with snapshot testing._ _Tested with Mocha testing._",
                "defaultValue": {
                    "value": "'small'",
                    "computed": false
                }
            },
            "style": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "Custom styles to be passed to the illustration SVG. _Tested with Mocha testing._",
                "defaultValue": {
                    "value": "{}",
                    "computed": false
                }
            }
        },
        "route": "illustrations",
        "display-name": "Illustrations",
        "SLDS-component-path": "/components/illustrations",
        "dependencies": []
    },
    "media-object": {
        "description": "When you need text and a figure next to each other, use a media object.",
        "methods": [],
        "props": {
            "canTruncate": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Often the body may need to be truncated for correct layout. This is only applicable if using the component within a flexbox container."
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Class names to be added to the component's HTML tag with `slds-media` class."
            },
            "body": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "The body is often text such as a heading or paragraph."
            },
            "figure": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "The figure is the optional visualization of the text within the body."
            },
            "verticalCenter": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Vertically centers the body with the middle of the figure."
            }
        },
        "route": "media-objects",
        "display-name": "Media Objects",
        "SLDS-component-path": "/components/utilities/media-objects/",
        "dependencies": []
    },
    "menu-dropdown": {
        "description": "The MenuDropdown component is a variant of the Lightning Design System Menu component. This component\nmay require a polyfill such as [classList](https://github.com/yola/classlist-polyfill) due to\n[react-onclickoutside](https://github.com/Pomax/react-onclickoutside) if Internet Explorer 11\nsupport is needed.\n\nThis component is wrapped in a [higher order component to listen for clicks outside itself](https://github.com/kentor/react-click-outside) and thus requires use of `ReactDOM`.",
        "methods": [
            {
                "name": "getId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getIsOpen",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getIndexByValue",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "value",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "getValueByIndex",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "index",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "getListItemRenderer",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "setFocus",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getMenu",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getMenuItem",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "index",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "setCurrentSelectedIndices",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "nextProps",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "saveRefToTrigger",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "trigger",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "saveRefToTriggerContainer",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "triggerContainer",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "saveRefToList",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "list",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "saveRefToListItem",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "listItem",
                        "type": null
                    },
                    {
                        "name": "index",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleClose",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleOpen",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleMouseEnter",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleMouseLeave",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleClick",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleFocus",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleClickCustomContent",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleSelect",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "index",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleKeyDown",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleCancel",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleClickOutside",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "toggleOpen",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "renderDefaultMenuContent",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "customListProps",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderMenuContent",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "customContent",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderInlineMenu",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "customContent",
                        "type": null
                    },
                    {
                        "name": "isOpen",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderDialog",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "customContent",
                        "type": null
                    },
                    {
                        "name": "isOpen",
                        "type": null
                    },
                    {
                        "name": "outsideClickIgnoreClass",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderOverlay",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "isOpen",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "align": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'left'",
                            "computed": false
                        },
                        {
                            "value": "'right'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Aligns the right or left side of the menu with the respective side of the trigger. This is not intended for use with `nubbinPosition`.",
                "defaultValue": {
                    "value": "'left'",
                    "computed": false
                }
            },
            "assistiveText": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "This prop is passed onto the triggering `Button`. Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means. You can omit this prop if you are using the `label` prop."
            },
            "buttonClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to triggering button."
            },
            "buttonInverse": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, button/icon is white. Meant for buttons or utility icons on dark backgrounds."
            },
            "buttonVariant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'base'",
                            "computed": false
                        },
                        {
                            "value": "'neutral'",
                            "computed": false
                        },
                        {
                            "value": "'brand'",
                            "computed": false
                        },
                        {
                            "value": "'destructive'",
                            "computed": false
                        },
                        {
                            "value": "'icon'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "This prop is passed onto the triggering `Button`. Determines variant of the Button component that triggers dropdown."
            },
            "checkmark": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, renders checkmark icon on the selected Menu Item."
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "By default, any children passed into this component will be rendered inside the dropdown menu. If you only need a standard menu, use `options`. If you need custom list items markup, use `listItemRenderer` and `options`. `children` with a `List` should _only_ used if you have a listbox and additional content.\n\nIf you need to modify the trigger button, import the module `design-system-react/dropdown/button-trigger` and render a grandchild of the element type `Button`. Any `props` specified on that `Button` will be assigned to the trigger button. Any `id` prop or event hanlders (`onBlur`, `onClick`, etc.) set on the button grandchild will be overwritten by `MenuDropdown` to enable functionality and accessibility. A custom trigger child will not be considered content for the dropdown menu.\n\n**List as a child is an experimental API.** If you need custom content _and_ a list, import 'design-system-react/components/menu-list/list' and pass in `<List>`.\n```\n<Dropdown>\n  <Trigger>\n  <Button iconCategory=\"utility\" iconName=\"settings\" />\n  </Trigger>\n  <div>Look ma! This is Custom Content.</div>\n  <List options={[myArray]}/>\n</Dropdown>\n```"
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to dropdown menu."
            },
            "containerClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "By default, these class names will be added to the absolutely-positioned `Dialog` component."
            },
            "disabled": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "This prop is passed onto the triggering `Button`. Prevent dropdown menu from opening. Also applies disabled styling to trigger button."
            },
            "hasStaticAlignment": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Prevents the dropdown from changing position based on the viewport/window. If set to true your dropdowns can extend outside the viewport _and_ overflow outside of a scrolling parent. If this happens, you might want to consider making the dropdowns contents scrollable to fit the menu on the screen. `hasStaticAlignment` disables this behavior and allows this component to extend beyond boundary elements. _Not tested._"
            },
            "hint": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "This prop is passed onto the triggering `Button`. Associates an icon button with another element on the page by changes the color of the SVG. Please reference <a href=\"http://www.lightningdesignsystem.com/components/buttons/#hint\">Lightning Design System Buttons > Hint</a>."
            },
            "hoverCloseDelay": {
                "type": {
                    "name": "number"
                },
                "required": false,
                "description": "Delay on menu closing in milliseconds.",
                "defaultValue": {
                    "value": "300",
                    "computed": false
                }
            },
            "iconCategory": {
                "type": {
                    "name": "custom",
                    "raw": "requiredIf(\n    PropTypes.oneOf(['action', 'custom', 'doctype', 'standard', 'utility']),\n    (props) => !!props.iconName\n)"
                },
                "required": false,
                "description": "Name of the icon category. Visit <a href=\"http://www.lightningdesignsystem.com/resources/icons\">Lightning Design System Icons</a> to reference icon categories."
            },
            "iconName": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Name of the icon. Visit <a href=\"http://www.lightningdesignsystem.com/resources/icons\">Lightning Design System Icons</a> to reference icon names."
            },
            "iconPosition": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'left'",
                            "computed": false
                        },
                        {
                            "value": "'right'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "If omitted, icon position is centered."
            },
            "iconVariant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'bare'",
                            "computed": false
                        },
                        {
                            "value": "'container'",
                            "computed": false
                        },
                        {
                            "value": "'border'",
                            "computed": false
                        },
                        {
                            "value": "'border-filled'",
                            "computed": false
                        },
                        {
                            "value": "'small'",
                            "computed": false
                        },
                        {
                            "value": "'more'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "For icon variants, please reference <a href=\"http://www.lightningdesignsystem.com/components/buttons/#icon\">Lightning Design System Icons</a>."
            },
            "iconSize": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'x-small'",
                            "computed": false
                        },
                        {
                            "value": "'small'",
                            "computed": false
                        },
                        {
                            "value": "'medium'",
                            "computed": false
                        },
                        {
                            "value": "'large'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Determines the size of the icon."
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the dropdown to the triggering button."
            },
            "isOpen": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Forces the dropdown to be open or closed. See controlled/uncontrolled callback/prop pattern for more on suggested use view [Concepts and Best Practices](https://github.com/salesforce-ux/design-system-react/blob/master/CONTRIBUTING.md#concepts-and-best-practices)"
            },
            "label": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "string"
                        },
                        {
                            "name": "node"
                        }
                    ]
                },
                "required": false,
                "description": "This prop is passed onto the triggering `Button`. Text within the trigger button."
            },
            "listItemRenderer": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Custom element that overrides the default Menu Item component."
            },
            "length": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "null",
                            "computed": false
                        },
                        {
                            "value": "'5'",
                            "computed": false
                        },
                        {
                            "value": "'7'",
                            "computed": false
                        },
                        {
                            "value": "'10'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "This prop is passed into the List for the menu. Pass null to make it the size of the content, or a string with an integer from here: https://www.lightningdesignsystem.com/components/menus/#flavor-dropdown-height"
            },
            "menuPosition": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'absolute'",
                            "computed": false
                        },
                        {
                            "value": "'overflowBoundaryElement'",
                            "computed": false
                        },
                        {
                            "value": "'relative'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Please select one of the following:\n* `absolute` - (default) The dialog will use `position: absolute` and style attributes to position itself. This allows inverted placement or flipping of the dialog.\n* `overflowBoundaryElement` - The dialog will overflow scrolling parents. Use on elements that are aligned to the left or right of their target and don't care about the target being within a scrolling parent. Typically this is a popover or tooltip. Dropdown menus can usually open up and down if no room exists. In order to achieve this a portal element will be created and attached to `body`. This element will render into that detached render tree.\n* `relative` - No styling or portals will be used. Menus will be positioned relative to their triggers. This is a great choice for HTML snapshot testing.",
                "defaultValue": {
                    "value": "'absolute'",
                    "computed": false
                }
            },
            "menuStyle": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "Style applied to menu element (that is the `.slds-dropdown` element)"
            },
            "nubbinPosition": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'top left'",
                            "computed": false
                        },
                        {
                            "value": "'top'",
                            "computed": false
                        },
                        {
                            "value": "'top right'",
                            "computed": false
                        },
                        {
                            "value": "'bottom left'",
                            "computed": false
                        },
                        {
                            "value": "'bottom'",
                            "computed": false
                        },
                        {
                            "value": "'bottom right'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Positions dropdown menu with a nubbin--that is the arrow notch. The placement options correspond to the placement of the nubbin. This is implemeted with CSS classes and is best used with a `Button` with \"icon container\" styling (`iconVariant=\"container\"`). Use with `isInline` prop, since positioning is determined by CSS via absolute-relative positioning, and using an absolutely positioned menu will not position the menu correctly without manual offsets."
            },
            "offset": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Offset adds pixels to the absolutely positioned dropdown menu in the format: ([vertical]px [horizontal]px)."
            },
            "onBlur": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Is only called when `openOn` is set to `hover` and when the triggering button loses focus."
            },
            "onClick": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This prop is passed onto the triggering `Button`. Triggered when the trigger button is clicked."
            },
            "onFocus": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Is only called when `openOn` is set to `hover` and when the triggering button gains focus."
            },
            "openOn": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'hover'",
                            "computed": false
                        },
                        {
                            "value": "'click'",
                            "computed": false
                        },
                        {
                            "value": "'hybrid'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Determines if mouse hover or click opens or closes the dropdown menu. The default of `click` opens the menu on click, touch, or keyboard navigation and is highly recommended to comply with accessibility standards. The other options are `hover` which opens when the mouse enters the focusable area, and `hybrid` which causes the menu to open on clicking of the trigger, but closes the menu when the mouse leaves the menu and trigger area. If you are planning on using `hover` or `hybrid`, please pause a moment and reconsider.",
                "defaultValue": {
                    "value": "'click'",
                    "computed": false
                }
            },
            "onKeyDown": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Called when a key pressed."
            },
            "onMouseDown": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Called when mouse clicks down on the trigger button."
            },
            "onMouseEnter": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Called when mouse hovers over the trigger button. This is only called if `this.props.openOn` is set to `hover`."
            },
            "onMouseLeave": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Called when mouse hover leaves the trigger button. This is only called if `this.props.openOn` is set to `hover`."
            },
            "onSelect": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when an item in the menu is clicked."
            },
            "onOpen": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when the dropdown is opened."
            },
            "onClose": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when the dropdown is closed."
            },
            "options": {
                "type": {
                    "name": "array"
                },
                "required": false,
                "description": "An array of menu item objects. `className` and `id` object keys are applied to the `li` DOM node. `divider` key can have a value of `top` or `bottom`. `rightIcon` and `leftIcon` are not actually `Icon` components, but prop objects that get passed to an `Icon` component. The `href` key will be added to the `a` and its default click event will be prevented. Here is a sample:\n```\n[{\n  className: 'custom-li-class',\n    divider: 'bottom',\n    label: 'A Header',\n    type: 'header'\n }, {\n    href: 'http://sfdc.co/',\n    id: 'custom-li-id',\n    label: 'Has a value',\n  leftIcon: {\n   name: 'settings',\n   category: 'utility'\n  },\n  rightIcon: {\n   name: 'settings',\n   category: 'utility'\n  },\n    type: 'item',\n    value: 'B0'\n }, {\n  type: 'divider'\n}]\n```"
            },
            "style": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "An object of CSS styles that are applied to the triggering button."
            },
            "tabIndex": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Write <code>\"-1\"</code> if you don't want the user to tab to the button."
            },
            "overlay": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "bool"
                        },
                        {
                            "name": "func"
                        }
                    ]
                },
                "required": false,
                "description": "If `true`, adds a transparent overlay when the menu is open to handle outside clicks. Allows clicks on iframes to be captured, but also forces a double-click to interact with other elements. If a function is passed, custom overlay logic may be defined by the app."
            },
            "value": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "number"
                        },
                        {
                            "name": "string"
                        },
                        {
                            "name": "array"
                        }
                    ]
                },
                "required": false,
                "description": "Current selected menu item."
            },
            "tooltip": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "This prop is passed onto the triggering `Button`. It creates a tooltip with the content of the `node` provided."
            },
            "triggerClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to wrapping trigger `div` around the button."
            },
            "multiple": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Whether this dropdown supports multi select."
            }
        },
        "route": "dropdown-menus",
        "display-name": "Dropdown Menus",
        "SLDS-component-path": "/components/menus#flavor-dropdown",
        "dependencies": [
            {
                "button-trigger": {
                    "description": "The Dropdown Button Trigger renders the default trigger button for the dropdown menu. If this component has children, it does not render itself to the DOM. Instead, it renders its child element, `Button`, and all that child's properties. This component may be used as a template to create custom triggers that do not use `Button`.",
                    "methods": [],
                    "props": {
                        "children": {
                            "type": {
                                "name": "element"
                            },
                            "required": false,
                            "description": "Import the module `design-system-react/dropdown/button-trigger` and render a grandchild of the element type `Button`. Any `props` specified on that `Button` will be assigned to the triggering button. Any `id` prop or event hanlders (`onBlur`, `onClick`, etc.) set on the button grandchild will be overwritten by `MenuDropdown` to allow functionality and accessibility.\n```\n<Dropdown>\n  <Trigger>\n  <Button iconCategory=\"utility\" iconName=\"settings\" />\n  </Trigger>\n</Dropdown>\n```"
                        },
                        "className": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "array"
                                    },
                                    {
                                        "name": "object"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "CSS classes to be added to triggering button."
                        },
                        "id": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the dropdown to the triggering button. This is provided by the `MenuDropdown`. Please use `MenuDropdown` to set."
                        },
                        "isOpen": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Informs the trigger on the open/close state of the dropdown menu"
                        },
                        "menu": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "By Default the dropdown menu is inside a `Dialog` component."
                        },
                        "onBlur": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Is only called when `openOn` is set to `hover` and when the triggering button loses focus."
                        },
                        "onClick": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "This prop is passed onto the triggering `Button`. Triggered when the trigger button is clicked."
                        },
                        "onFocus": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Is only called when `openOn` is set to `hover` and when the triggering button gains focus."
                        },
                        "onKeyDown": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Called when a key pressed."
                        },
                        "onMouseDown": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Called when mouse clicks down on the trigger button."
                        },
                        "onMouseEnter": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Called when mouse hovers over the trigger button. This is only called if `this.props.openOn` is set to `hover`."
                        },
                        "onMouseLeave": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Called when mouse hover leaves the trigger button. This is only called if `this.props.openOn` is set to `hover`."
                        },
                        "openOn": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'hover'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'click'",
                                        "computed": false
                                    },
                                    {
                                        "value": "'hybrid'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Determines if mouse hover or click opens the dropdown menu. The default of `click` is highly recommended to comply with accessibility standards. If you are planning on using hover, please pause a moment and reconsider."
                        },
                        "triggerRef": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "The ref of the actual triggering button."
                        },
                        "triggerClassName": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "array"
                                    },
                                    {
                                        "name": "object"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "CSS classes to be added to wrapping trigger `div` around the button."
                        }
                    },
                    "name": "button-trigger",
                    "source": "/components/menu-dropdown/button-trigger.jsx"
                }
            }
        ]
    },
    "modal": {
        "description": "The Modal component is used for the Lightning Design System Modal and Notification > Prompt components. The Modal opens from a state change outside of the component itself (pass this state to the <code>isOpen</code> prop). For more details on the Prompt markup, please review the <a href=\"http://www.lightningdesignsystem.com/components/notifications#prompt\">Notifications > Prompt</a>.\n\nBy default, `Modal` will add `aria-hidden=true` to the `body` tag, but this disables some assistive technologies. To prevent this you can add the following to your application with `#mount` being the root node of your application that you would like to hide from assistive technologies when the `Modal` is open.\n```\nimport settings from 'design-system-react/components/settings';\nsettings.setAppElement('#mount');\n```\nThis component uses a portalMount (a disconnected React subtree mount) to create a modal as a child of `body`.",
        "methods": [
            {
                "name": "getId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getModal",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "setReturnFocus",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "clearBodyScroll",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "closeModal",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "dismissModal",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "dismissModalOnClickOutside",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "footerComponent",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleModalClick",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleSubmitModal",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "headerComponent",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "isPrompt",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "updateBodyScroll",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            }
        ],
        "props": {
            "align": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'top'",
                            "computed": false
                        },
                        {
                            "value": "'center'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Vertical alignment of Modal.",
                "defaultValue": {
                    "value": "'center'",
                    "computed": false
                }
            },
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "dialogLabel": {
                            "name": "string",
                            "required": false
                        },
                        "closeButton": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility.**\nThis object is merged with the default props object on every render.\n* `dialogLabel`: This is a visually hidden label for the dialog. If not provided, `title` is used.\n* `closeButton`: This is a visually hidden label for the close button.",
                "defaultValue": {
                    "value": "{\n    dialogLabel: '',\n    closeButton: 'Close',\n}",
                    "computed": false
                }
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": true,
                "description": "Modal content."
            },
            "containerClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Custom CSS classes for the modal's container. This is the element with `.slds-modal__container`. Use `classNames` [API](https://github.com/JedWatson/classnames)."
            },
            "contentClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Custom CSS classes for the modal's body. This is the element that has overflow rules and should be used to set a static height if desired. Use `classNames` [API](https://github.com/JedWatson/classnames)."
            },
            "contentStyle": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "Custom styles for the modal's body. This is the element that has overflow rules and should be used to set a static height if desired."
            },
            "directional": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, modal footer buttons render left and right. An example use case would be for \"back\" and \"next\" buttons."
            },
            "dismissible": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, Modals can be dismissed by clicking on the close icon or pressing esc key.",
                "defaultValue": {
                    "value": "true",
                    "computed": false
                }
            },
            "dismissOnClickOutside": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, Modals can be dismissed by clicking outside of modal. If unspecified, defaults to dismissible."
            },
            "onRequestClose": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Callback to fire with Modal is dismissed"
            },
            "footer": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "node"
                        }
                    ]
                },
                "required": false,
                "description": "Accepts a node or array of nodes that are typically a `Button` or `ProgressIndicator`. If an array, the nodes render on the right side first but are then floated left and right if <code>directional</code> prop is `true`."
            },
            "header": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Allows for a custom modal header that does not scroll with modal content. If this is defined, `title` and `tagline` will be ignored. The close button will still be present."
            },
            "headerClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Adds CSS classes to the container surrounding the modal header and the close button. Use `classNames` [API](https://github.com/JedWatson/classnames)."
            },
            "isOpen": {
                "type": {
                    "name": "bool"
                },
                "required": true,
                "description": "Forces the modal to be open or closed."
            },
            "parentSelector": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Function whose return value is the mount node to insert the Modal element into. The default is `() => document.body`."
            },
            "portalClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Custom CSS classes for the portal DOM node. This node is a direct descendant of the `body` and is the parent of `ReactModal__Overlay`. Use `classNames` [API](https://github.com/JedWatson/classnames)."
            },
            "prompt": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'success'",
                            "computed": false
                        },
                        {
                            "value": "'warning'",
                            "computed": false
                        },
                        {
                            "value": "'error'",
                            "computed": false
                        },
                        {
                            "value": "'wrench'",
                            "computed": false
                        },
                        {
                            "value": "'offline'",
                            "computed": false
                        },
                        {
                            "value": "'info'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Styles the modal as a prompt."
            },
            "size": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'medium'",
                            "computed": false
                        },
                        {
                            "value": "'large'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Specifiies the modal's width. May be deprecated in favor of `width` in the future."
            },
            "tagline": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Content underneath the title in the modal header."
            },
            "title": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Text heading at the top of a modal."
            },
            "toast": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Allows adding additional notifications within the modal."
            }
        },
        "route": "modals",
        "display-name": "Modals",
        "SLDS-component-path": "/components/modals",
        "dependencies": []
    },
    "navigation": {
        "description": "Navigation represents a list of links that either take the user to another page or parts of the page the user is in.",
        "methods": [
            {
                "name": "getId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getVariant",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getSelectedId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            }
        ],
        "props": {
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "HTML id for component. _Tested with snapshot testing._"
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS class names to be added to the container element. _Tested with snapshot testing._"
            },
            "categories": {
                "type": {
                    "name": "array"
                },
                "required": false,
                "description": "Array of categories. The required shape is: `{id: string, label: string, items: array}`. The required shape of an item is `{id: string, label: string, url: string}`. All item ids are expected to be unique. _Tested with snapshot testing._"
            },
            "selectedId": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The ID of the item that is currently selected. Defaults to the ID of the first item. _Tested with Mocha framework._"
            },
            "onSelect": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when the selection changes. It receives an event and an item object in the shape: `event, {item: [object] }`. _Tested with Mocha framework._"
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'default'",
                            "computed": false
                        },
                        {
                            "value": "'shade'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Determines component style. _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "'default'",
                    "computed": false
                }
            }
        },
        "route": "navigation",
        "display-name": "Navigation",
        "SLDS-component-path": "/components/navigation",
        "dependencies": []
    },
    "panel": {
        "description": "A panel provides detailed contextual information or contextual filtering options. [Filter](/components/filters/) component should be used as children. Menus within a Filter Popover will need to not have \"portal mounts\" and be inline.",
        "methods": [],
        "props": {
            "children": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "The contents of the panel"
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'filters'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "The type of panel"
            }
        },
        "route": "panels",
        "display-name": "Panels",
        "SLDS-component-path": "/components/panels",
        "dependencies": [
            {
                "filtering/group": {
                    "description": "A filtering panel contextual filtering options.",
                    "methods": [],
                    "props": {
                        "addFilterLabel": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "Localized description of the \"Add Filter\" button in the footer",
                            "defaultValue": {
                                "value": "'Add Filter'",
                                "computed": false
                            }
                        },
                        "assistiveTextCloseFilterPanel": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "Localized description of the close button for the panel for screen readers",
                            "defaultValue": {
                                "value": "'Close Filter Panel'",
                                "computed": false
                            }
                        },
                        "cancelLabel": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Label for button that cancels modified filters",
                            "defaultValue": {
                                "value": "'Cancel'",
                                "computed": false
                            }
                        },
                        "children": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "Pass in `FilterList`'s of `Filters`:\n\n```\n<FilterGroup\n  variant=\"panel\"\n>\n  <FilterList>\n  <Filter\n    property=\"Show Me\"\n    predicate=\"All Wackamoles\"\n  >\n  {popoverContents}\n  </Filter>\n  </FilterList>\n</FilterGroup>\n```"
                        },
                        "errorLabel": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Label for the error message at the top of the panel."
                        },
                        "footer": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "Allows for customization of footer. This will be added after any `FilterList`'s in the DOM. If using Panel Filter Group outside of a panel, do not set the variant to `panel` and header and footer will be removed."
                        },
                        "header": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "Allows for customization of header. This will be added before any `FilterList`'s in the DOM. If using Panel Filter Group outside of a panel, do not set the variant to `panel` and header and footer will be removed."
                        },
                        "heading": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "node"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "The heading within the header of the filtering panel",
                            "defaultValue": {
                                "value": "'Filter'",
                                "computed": false
                            }
                        },
                        "modified": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Shows confirmation heading. Please see `onRequestCancel` and `onRequestSave`."
                        },
                        "onClickAdd": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Callback triggered when \"Add Filter\" is clicked. Recieves an `event`."
                        },
                        "onClickRemoveAll": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Callback triggered when \"Remove All\" is clicked. Recieves an `event`."
                        },
                        "onRequestCancel": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "When the panel's cancel button is clicked in order to reset filter panel to previous state."
                        },
                        "onRequestClose": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "When the panel's close button is clicked. Please place Panel within another element to control position and visibility."
                        },
                        "onRequestSave": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "When the panel's save button is clicked in order to confirm filter panel state."
                        },
                        "removeAllLabel": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "Localized description of the \"Remove All\" button in the footer",
                            "defaultValue": {
                                "value": "'Remove All'",
                                "computed": false
                            }
                        },
                        "saveLabel": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Label for button that saves modified filters",
                            "defaultValue": {
                                "value": "'Save'",
                                "computed": false
                            }
                        },
                        "variant": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "'panel'",
                                        "computed": false
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Adds in default Panel header and footer"
                        }
                    },
                    "name": "filtering/group",
                    "source": "/components/panel/filtering/group.jsx"
                }
            },
            {
                "filtering/list-heading": {
                    "description": "A filtering panel contextual filtering options.",
                    "methods": [],
                    "props": {
                        "heading": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "node"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "Heading for following PanelFilterList",
                            "defaultValue": {
                                "value": "'Matching all these filters'",
                                "computed": false
                            }
                        },
                        "isLocked": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Displayed a heading for a locked list of filters"
                        },
                        "lockedHeading": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "Heading for a group of filters that are locked"
                        },
                        "lockedLabel": {
                            "defaultValue": {
                                "value": "'Locked filters'",
                                "computed": false
                            }
                        }
                    },
                    "name": "filtering/list-heading",
                    "source": "/components/panel/filtering/list-heading.jsx"
                }
            },
            {
                "filtering/list": {
                    "description": "A list of Filters. This is a higher order component for filters that decorates the filter to work within a Filtering Panel. It also adds support for a Filter error label.",
                    "methods": [
                        {
                            "name": "propTypes",
                            "docblock": null,
                            "modifiers": [],
                            "params": [],
                            "returns": null
                        }
                    ],
                    "props": {
                        "children": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "Pass in `Filter` components"
                        }
                    },
                    "name": "filtering/list",
                    "source": "/components/panel/filtering/list.jsx"
                }
            }
        ]
    },
    "pill": {
        "description": "A pill represents an object that can be viewed with or without an icon.",
        "methods": [
            {
                "name": "getHref",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "blur",
                "docblock": "Removes focus from the component.",
                "modifiers": [],
                "params": [],
                "returns": null,
                "description": "Removes focus from the component."
            },
            {
                "name": "focus",
                "docblock": "Give focus to the Pill component.",
                "modifiers": [],
                "params": [],
                "returns": null,
                "description": "Give focus to the Pill component."
            },
            {
                "name": "handleKeyDown",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    },
                    {
                        "name": "...rest",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleRef",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "root",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "restProps",
                "docblock": "Extracts a set of custom properties. A custom property is a property, which is not described in propTypes of a component.",
                "modifiers": [],
                "params": [],
                "returns": null,
                "description": "Extracts a set of custom properties. A custom property is a property, which is not described in propTypes of a component."
            },
            {
                "name": "renderIcon",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "renderLabel",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "renderRemoveIcon",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            }
        ],
        "props": {
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "remove": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility**\nThis object is merged with the default props object on every render.\n* `remove`: This is a visually hidden label for the close button.\n_Tested with snapshot testing._",
                "defaultValue": {
                    "value": "{}",
                    "computed": false
                }
            },
            "avatar": {
                "type": {
                    "name": "element"
                },
                "required": false,
                "description": "SLDSAvatar component to show on the left of the pill.\n_Tested with Mocha framework._"
            },
            "bare": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Applies the bare style to the component.\n_Tested with Mocha framework._"
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "This is a way to specify custom contents for the pill in the case a simple text label is not enough.\n_Tested with Mocha framework._"
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to tag with `.slds-pill`. Uses `classNames` [API](https://github.com/JedWatson/classnames).\n_Tested with Mocha framework._"
            },
            "hasError": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Applies the error style to the component.\n_Tested with Mocha framework._"
            },
            "href": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "An href to use if the pill is shown as a link.\n_Tested with Mocha framework._"
            },
            "icon": {
                "type": {
                    "name": "element"
                },
                "required": false,
                "description": "SLDSIcon component to show on the left of the pill.\n_Tested with Mocha framework._"
            },
            "labels": {
                "type": {
                    "name": "shape",
                    "value": {
                        "label": {
                            "name": "string",
                            "required": false
                        },
                        "title": {
                            "name": "string",
                            "required": false
                        },
                        "removeTitle": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Text labels for internationalization**\nThis object is merged with the default props object on every render.\n* `label`: Pill's label.\n* `title`: Pill's title.\n* `removeTitle`: A title to use for the remove icon.\n\n_Tested with snapshot testing._",
                "defaultValue": {
                    "value": "{}",
                    "computed": false
                }
            },
            "onBlur": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "`onBlur` callback executes when the component loses focus.\n_Tested with Mocha framework._"
            },
            "onClick": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "`onClick` callback executes when a user clicks on the pill or presses the Enter key.\n_Tested with Mocha framework._"
            },
            "onFocus": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "`onFocus` callback executes when the component receives focus.\n_Tested with Mocha framework._"
            },
            "onKeyDown": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "`onKeyDown` callback executes when a user presses a key.\n_Tested with Mocha framework._"
            },
            "onRemove": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "`onRemove` callback executes when a user clicks on the pill's remove icon or presses the delete or the backspace keys.\n_Tested with Mocha framework._"
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'link'",
                            "computed": false
                        },
                        {
                            "value": "'option'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "A variant of a pill\n_Tested with Mocha framework._",
                "defaultValue": {
                    "value": "'link'",
                    "computed": false
                }
            }
        },
        "route": "pills",
        "display-name": "Pills",
        "SLDS-component-path": "/components/pills",
        "dependencies": []
    },
    "popover": {
        "description": "The Popover component is a non-modal dialog. It should be paired with a clickable trigger such as a `Button`. It traps focus from the page and must be exited if focus needs to be outside the Popover. Use a `Tooltip` if there are no call to actions within the dialog. A `Tooltip` does not need to be clicked. Multiple popovers open at the same time, each with focus trap is not supported.",
        "methods": [
            {
                "name": "getId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getIsOpen",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getMenu",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "setMenuRef",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "component",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "setContainerRef",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "component",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleDialogClose",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    },
                    {
                        "name": "data",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleClose",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    },
                    {
                        "name": "data",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleOpen",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleMouseEnter",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleMouseLeave",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleClick",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    },
                    {
                        "name": "{ triggerOnClickCallback }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleFocus",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleKeyDown",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleCancel",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleClickOutside",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "toggleOpenFromKeyboard",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderDialog",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "isOpen",
                        "type": null
                    },
                    {
                        "name": "outsideClickIgnoreClass",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderOverlay",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "isOpen",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "align": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'top'",
                            "computed": false
                        },
                        {
                            "value": "'top left'",
                            "computed": false
                        },
                        {
                            "value": "'top right'",
                            "computed": false
                        },
                        {
                            "value": "'right'",
                            "computed": false
                        },
                        {
                            "value": "'bottom'",
                            "computed": false
                        },
                        {
                            "value": "'bottom left'",
                            "computed": false
                        },
                        {
                            "value": "'bottom right'",
                            "computed": false
                        },
                        {
                            "value": "'left'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Aligns the popover with the respective side of the trigger. That is `top` will place the `Popover` above the trigger.",
                "defaultValue": {
                    "value": "'right'",
                    "computed": false
                }
            },
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "closeButton": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility.**\nThis object is merged with the default props object on every render.\n* `closeButton`: This is a visually hidden label for the close button.",
                "defaultValue": {
                    "value": "{\n    closeButton: 'Close dialog',\n}",
                    "computed": false
                }
            },
            "ariaLabelledby": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "HTML `id` of heading for popover. Only use if your header is within your popover body."
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": true,
                "description": "The trigger of the component. This must be a **single node**. Many props will be passed into this trigger related to popover interactions. The child needs to be a clickable element, such as a `Button` or an anchor tag (`a`)."
            },
            "body": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "node"
                        },
                        {
                            "name": "array"
                        }
                    ]
                },
                "required": true,
                "description": "The contents of the popover. This should also accept arrays."
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to the popover. That is the element with `.slds-popover` on it."
            },
            "disabled": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "This prop is passed onto the triggering `Button`. Prevent popover from opening. Also applies disabled styling to trigger button."
            },
            "footer": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "A footer is an optional. Buttons are often placed here."
            },
            "hasStaticAlignment": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Prevents the Popover from changing position based on the viewport/window. If set to true your popover can extend outside the viewport _and_ overflow outside of a scrolling parent. If this happens, you might want to consider making the popover contents scrollable to fit the menu on the screen. When enabled, `position` `absolute` is used."
            },
            "heading": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "string"
                        },
                        {
                            "name": "node"
                        }
                    ]
                },
                "required": false,
                "description": "All popovers require a heading that labels the popover for assistive technology users. This text will be placed within a heading HTML tag. A heading is **highly recommended for accessibility reasons.** Please see `ariaLabelledby` prop."
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "By default, a unique ID will be created at render to support keyboard navigation, ARIA roles, and connect the popover to the triggering button. This ID will be applied to the triggering element. `${id}-popover`, `${id}-dialog-heading`, `${id}-dialog-body` are also created."
            },
            "isOpen": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Forces the popover to be open or closed. See controlled/uncontrolled callback/prop pattern for more on suggested use [](https://github.com/salesforce-ux/design-system-react/blob/master/CONTRIBUTING.md#concepts-and-best-practices) You will want this if Popover is to be a controlled component."
            },
            "offset": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Offset adds pixels to the absolutely positioned dialog in the format: ([vertical]px [horizontal]px)."
            },
            "onClick": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This function is passed onto the triggering `Button`. Triggered when the trigger button is clicked. You will want this if Popover is to be a controlled component."
            },
            "onClose": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This function is triggered when the dialog is closed. This occurs when the Dialog child component (that is the actual popover) is unmounted and removed from the DOM. This function returns `{event, { trigger, componentWillUnmount }`. Trigger can have the values `cancel`, `clickOutside`, or `newPopover`."
            },
            "onKeyDown": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Called when a key is pressed."
            },
            "onMouseDown": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Called when mouse clicks down on the trigger button."
            },
            "onOpen": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This function is triggered when the Dialog child component (that is the actual popover) is mounted and added to the DOM. The parameters are `event, { portal: }`. `portal` can be used as a React tree root node."
            },
            "onRequestClose": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This function is triggered when the user clicks outside the Popover or clicks the close button. You will want to define this if Popover is to be a controlled component. Most of the time you will want wnat to set `isOpen` to `false` when this is triggered unless you need to validate something."
            },
            "position": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'absolute'",
                            "computed": false
                        },
                        {
                            "value": "'overflowBoundaryElement'",
                            "computed": false
                        },
                        {
                            "value": "'relative'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Please select one of the following:\n* `absolute` - (default) The dialog will use `position: absolute` and style attributes to position itself. This allows inverted placement or flipping of the dialog.\n* `overflowBoundaryElement` - The dialog will overflow scrolling parents. Use on elements that are aligned to the left or right of their target and don't care about the target being within a scrolling parent. Typically this is a popover or tooltip. Dropdown menus can usually open up and down if no room exists. In order to achieve this a portal element will be created and attached to `body`. This element will render into that detached render tree.\n* `relative` - No styling or portals will be used. Menus will be positioned relative to their triggers. This is a great choice for HTML snapshot testing.",
                "defaultValue": {
                    "value": "'absolute'",
                    "computed": false
                }
            },
            "style": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "An object of CSS styles that are applied to the `slds-popover` DOM element."
            },
            "overlay": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "bool"
                        },
                        {
                            "name": "func"
                        }
                    ]
                },
                "required": false,
                "description": "If `true`, adds a transparent overlay when the menu is open to handle outside clicks. Allows clicks on iframes to be captured, but also forces a double-click to interact with other elements. If a function is passed, custom overlay logic may be defined by the app."
            },
            "triggerClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to wrapping trigger `div` around the button."
            },
            "hoverCloseDelay": {
                "defaultValue": {
                    "value": "300",
                    "computed": false
                }
            },
            "openOn": {
                "defaultValue": {
                    "value": "'click'",
                    "computed": false
                }
            }
        },
        "route": "popovers",
        "display-name": "Popovers",
        "SLDS-component-path": "/components/popovers",
        "dependencies": []
    },
    "page-header": {
        "description": "The PageHeader component adds PageHeader, PageHeader.Info, PageHeader.Title, PageHeader.DetailRow, and PageHeader.DetailBlock.",
        "methods": [
            {
                "name": "_getClassNames",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "className",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "className": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Optional class name",
                "defaultValue": {
                    "value": "''",
                    "computed": false
                }
            },
            "variant": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The type of component",
                "defaultValue": {
                    "value": "'base'",
                    "computed": false
                }
            },
            "label": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "string"
                        },
                        {
                            "name": "element"
                        }
                    ]
                },
                "required": false,
                "description": "The info property can be a string or a React element"
            },
            "title": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "string"
                        },
                        {
                            "name": "element"
                        }
                    ]
                },
                "required": false,
                "description": "The title property can be a string or a React element"
            },
            "info": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "string"
                        },
                        {
                            "name": "element"
                        }
                    ]
                },
                "required": false,
                "description": "The info property can be a string or a React element"
            },
            "icon": {
                "type": {
                    "name": "element"
                },
                "required": false,
                "description": "The page header icon"
            },
            "iconName": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Name of the icon. Visit <a href=\"http://www.lightningdesignsystem.com/resources/icons\">Lightning Design System Icons</a> to reference icon names."
            },
            "iconCategory": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'action'",
                            "computed": false
                        },
                        {
                            "value": "'custom'",
                            "computed": false
                        },
                        {
                            "value": "'doctype'",
                            "computed": false
                        },
                        {
                            "value": "'standard'",
                            "computed": false
                        },
                        {
                            "value": "'utility'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "The icons category"
            },
            "iconPosition": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'left'",
                            "computed": false
                        },
                        {
                            "value": "'right'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "If omitted, icon position is centered."
            },
            "iconSize": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'x-small'",
                            "computed": false
                        },
                        {
                            "value": "'small'",
                            "computed": false
                        },
                        {
                            "value": "'medium'",
                            "computed": false
                        },
                        {
                            "value": "'large'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Determines the size of the icon."
            },
            "iconVariant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'container'",
                            "computed": false
                        },
                        {
                            "value": "'border'",
                            "computed": false
                        },
                        {
                            "value": "'border-filled'",
                            "computed": false
                        },
                        {
                            "value": "'small'",
                            "computed": false
                        },
                        {
                            "value": "'more'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "For icon variants, please reference <a href='http://www.lightningdesignsystem.com/components/buttons/#icon'>Lightning Design System Icons</a>."
            },
            "contentRight": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "string"
                        },
                        {
                            "name": "element"
                        }
                    ]
                },
                "required": false,
                "description": "Content to appear on the right hand side of the page header",
                "defaultValue": {
                    "value": "''",
                    "computed": false
                }
            },
            "details": {
                "type": {
                    "name": "array"
                },
                "required": false,
                "description": "An array of buttons which appear on the component's right hand side.",
                "defaultValue": {
                    "value": "[]",
                    "computed": false
                }
            },
            "navRight": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "string"
                        },
                        {
                            "name": "element"
                        }
                    ]
                },
                "required": false,
                "description": "Nav content which appears in the upper right hand corner.",
                "defaultValue": {
                    "value": "''",
                    "computed": false
                }
            },
            "trail": {
                "type": {
                    "name": "array"
                },
                "required": false,
                "description": "An array of react elements presumably anchor <a> elements.",
                "defaultValue": {
                    "value": "[]",
                    "computed": false
                }
            }
        },
        "route": "page-headers",
        "display-name": "Page Headers",
        "SLDS-component-path": "/components/page-headers",
        "dependencies": []
    },
    "progress-indicator": {
        "description": "Progress Indicator is a component that communicates to the user the progress of a particular process.",
        "methods": [
            {
                "name": "getId",
                "docblock": "Get the progress indicator's HTML id. Generate a new one if no ID present.",
                "modifiers": [],
                "params": [],
                "returns": null,
                "description": "Get the progress indicator's HTML id. Generate a new one if no ID present."
            },
            {
                "name": "getSteps",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            }
        ],
        "props": {
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "percentage": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility**\nThis object is merged with the default props object on every render.\n* `percentage`: Label for Progress Bar. The default is `Progress: [this.props.value]%`",
                "defaultValue": {
                    "value": "{}",
                    "computed": false
                }
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS class names to be added to the container element. `array`, `object`, or `string` are accepted."
            },
            "completedSteps": {
                "type": {
                    "name": "array"
                },
                "required": false,
                "description": "Stores all completed steps. It is an array of step objects.",
                "defaultValue": {
                    "value": "[]",
                    "computed": false
                }
            },
            "disabledSteps": {
                "type": {
                    "name": "array"
                },
                "required": false,
                "description": "Stores all disabled steps. It is an array of step objects. Steps are still clickable/focusable,\nthis only disables cursor change and removes onClick and onFocus event callbacks.",
                "defaultValue": {
                    "value": "[]",
                    "computed": false
                }
            },
            "errorSteps": {
                "type": {
                    "name": "array"
                },
                "required": false,
                "description": "Stores all error steps. It is an array of step objects and usually there is only one error step, the current step.",
                "defaultValue": {
                    "value": "[]",
                    "computed": false
                }
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "HTML id for component."
            },
            "onStepClick": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when an individual step is clicked. By default, it receives an event and returns step state and the step object clicked: `{ isCompleted, isDisabled, isError, isSelected, step }`. Users are able to pass a callback handleClick function in forms of: <function name>(event, data) where data is the callback result.\n```\nconst handleStepClick = function(event, data) { console.log(data); };\n  <ProgressIndicator onStepClick={handleStepClick} />\n```",
                "defaultValue": {
                    "value": "() => {}",
                    "computed": false
                }
            },
            "onStepFocus": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when an individual step is focused. By default, it receives an event and returns step state and the step object clicked: `{ isCompleted, isDisabled, isError, isSelected, step }`. Users are able to pass a callback handleClick function in forms of: <function name>(event, data) where data is the callback result.\n```\nconst handleStepFocus = function(event, data) { console.log(data); };\n  <ProgressIndicator onStepFocus={handleStepFocus} />\n```",
                "defaultValue": {
                    "value": "() => {}",
                    "computed": false
                }
            },
            "selectedStep": {
                "type": {
                    "name": "object"
                },
                "required": true,
                "description": "Represents the currently selected or active step. It is a step object.",
                "defaultValue": {
                    "value": "defaultSteps[0]",
                    "computed": true
                }
            },
            "steps": {
                "type": {
                    "name": "array"
                },
                "required": true,
                "description": "It is an array of step objects in the following form:\n```\n [{\n   id: <PropTypes.number> or <PropTypes.string>, has to be unique\n   label: <PropTypes.string>, representing the tooltip content\n   assistiveText: <PropTypes.string>, The default is `[Step props.index + 1]: [status]`. Status is if the step has been completed or in an error state.\n }],\n ```"
            },
            "tooltipIsOpenSteps": {
                "type": {
                    "name": "array"
                },
                "required": false,
                "description": "Stores all steps with opened tooltips. This property is mainly for development purposes. The tooltip should only show on hover for the user."
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'base'",
                            "computed": false
                        },
                        {
                            "value": "'modal'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Determines component style.",
                "defaultValue": {
                    "value": "'base'",
                    "computed": false
                }
            }
        },
        "route": "progress-indicators",
        "display-name": "Progress Indicators",
        "SLDS-component-path": "/components/progress-indicator",
        "dependencies": []
    },
    "progress-ring": {
        "description": "Customizable and configurable progress ring. Will display progress in a circular progress bar factor, and is capable of displaying iconography inside of the ring structure.",
        "methods": [
            {
                "name": "icon",
                "docblock": "Gets the icon to display\n@returns {node} Icon",
                "modifiers": [],
                "params": [],
                "returns": {
                    "description": "Icon",
                    "type": {
                        "name": "node"
                    }
                },
                "description": "Gets the icon to display"
            },
            {
                "name": "percentDecimal",
                "docblock": "Percentage as a decimal\n@returns {decimal} Percentage",
                "modifiers": [],
                "params": [],
                "returns": {
                    "description": "Percentage",
                    "type": {
                        "name": "decimal"
                    }
                },
                "description": "Percentage as a decimal"
            },
            {
                "name": "themeClass",
                "docblock": "Gets the theme CSS class\n@returns {string} Class name",
                "modifiers": [],
                "params": [],
                "returns": {
                    "description": "Class name",
                    "type": {
                        "name": "string"
                    }
                },
                "description": "Gets the theme CSS class"
            }
        ],
        "props": {
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "HTML id for component."
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to tag with `.slds-progress-ring`. Uses `classNames` [API](https://github.com/JedWatson/classnames)."
            },
            "theme": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'warning'",
                            "computed": false
                        },
                        {
                            "value": "'expired'",
                            "computed": false
                        },
                        {
                            "value": "'complete'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "The theme applied to the ring."
            },
            "icon": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Overrides the icon to be displayed."
            },
            "hasIcon": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Display the icon associated with the theme."
            },
            "value": {
                "type": {
                    "name": "number"
                },
                "required": true,
                "description": "Percentage of progress completion, ranging [0, 100]."
            }
        },
        "route": "progress-rings",
        "display-name": "Progress Rings",
        "SLDS-component-path": "/components/progress-ring",
        "dependencies": []
    },
    "radio": {
        "description": "A radio input that can have a single input checked at any one time. Radios should be wrapped with\na [RadioGroup](/components/radio-group) or [RadioButtonGroup](/components/radio-button-group)",
        "methods": [
            {
                "name": "getId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            }
        ],
        "props": {
            "aria-describedby": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The ID of an element that describes this radio input. Often used for error messages."
            },
            "checked": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "This is a controlled component. This radio is checked according to this value."
            },
            "defaultChecked": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "This is the initial value of an uncontrolled form element and is present only to provide compatibility\nwith hybrid framework applications that are not entirely React. It should only be used in an application\nwithout centralized state (Redux, Flux). \"Controlled components\" with centralized state is highly recommended.\nSee [Code Overview](https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#controlled-and-uncontrolled-components) for more information."
            },
            "disabled": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Disable this radio input."
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "A unique ID that is used to associating a label to the `input` element. This ID is added to the `input` element."
            },
            "label": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "string"
                        },
                        {
                            "name": "element"
                        }
                    ]
                },
                "required": true,
                "description": "The string or element that is shown as both the title and the label for this radio input."
            },
            "name": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The name of the radio input group."
            },
            "onChange": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This event fires when the radio selection changes."
            },
            "value": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The value of this radio input."
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'base'",
                            "computed": false
                        },
                        {
                            "value": "'button-group'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Variant of the Radio button. Base is the default and button-group makes the radio button look like a normal button (should be a child of <RadioButtonGroup>).",
                "defaultValue": {
                    "value": "'base'",
                    "computed": false
                }
            }
        },
        "route": "radios",
        "display-name": "Radios",
        "SLDS-component-path": "/components/radio-group/",
        "dependencies": []
    },
    "split-view": {
        "description": "Split view is used to navigate between records in a list while staying on the same screen.",
        "methods": [
            {
                "name": "getId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getMasterViewId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "setIsOpen",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "isOpen",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "toggle",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "masterContent",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            }
        ],
        "props": {
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "toggleButtonOpen": {
                            "name": "string",
                            "required": false
                        },
                        "toggleButtonClose": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility**\n* `toggleButtonOpen`: The button used to open the split view.\n* `toggleButtonClose`: The button used to close the split view.",
                "defaultValue": {
                    "value": "{\n    toggleButtonOpen: 'Close split view',\n    toggleButtonClose: 'Open split view',\n}",
                    "computed": false
                }
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "HTML Id for the component."
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to the root `div` tag. Uses `classNames` [API](https://github.com/JedWatson/classnames)."
            },
            "isOpen": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Sets the split view to be open or closed."
            },
            "events": {
                "type": {
                    "name": "shape",
                    "value": {
                        "onClose": {
                            "name": "func",
                            "required": false
                        },
                        "onOpen": {
                            "name": "func",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "Event Callbacks\n* `onClose`: Triggered when the split view has closed.\n* `onOpen`: Triggered when the split view has opened.",
                "defaultValue": {
                    "value": "{}",
                    "computed": false
                }
            },
            "master": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "arrayOf",
                            "value": {
                                "name": "element"
                            }
                        },
                        {
                            "name": "element"
                        }
                    ]
                },
                "required": true,
                "description": "The React component that is rendered in the master section.\nYou need to pass in an array of elements in order for the scrolling to in the SplitViewList to work correctly.\nReact requires that you also supply a unique `key` for each element [React Lists and Keys](https://reactjs.org/docs/lists-and-keys.html#keys)."
            },
            "masterWidth": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The width of the master section.",
                "defaultValue": {
                    "value": "'20rem'",
                    "computed": false
                }
            },
            "detail": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "arrayOf",
                            "value": {
                                "name": "element"
                            }
                        },
                        {
                            "name": "element"
                        }
                    ]
                },
                "required": true,
                "description": "The React component that is rendered in the detail section."
            }
        },
        "route": "split-view",
        "display-name": "Split View",
        "SLDS-component-path": "/components/split-view",
        "dependencies": [
            {
                "header": {
                    "description": "The Split View Header takes the same properties as the [PageHeader](https://react.lightningdesignsystem.com/components/page-headers/) component.",
                    "methods": [],
                    "name": "header",
                    "source": "/components/split-view/header.jsx"
                }
            },
            {
                "listbox": {
                    "description": "The menu with the ARIA role of a listbox.",
                    "methods": [
                        {
                            "name": "isListItemFocused",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "item",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "isSelected",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "item",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "isUnread",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "item",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "handleKeyDown",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "event",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "moveToNextItem",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "event",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "moveToPreviousItem",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "event",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "moveToIndex",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "event",
                                    "type": null
                                },
                                {
                                    "name": "index",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "focusFirstItem",
                            "docblock": null,
                            "modifiers": [],
                            "params": [],
                            "returns": null
                        },
                        {
                            "name": "focusItem",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "item",
                                    "type": null
                                },
                                {
                                    "name": "setDataOnly",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "deselectAllListItems",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "event",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "selectAllListItems",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "event",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "selectListItem",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "item",
                                    "type": null
                                },
                                {
                                    "name": "event",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "handleOnSelect",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "event",
                                    "type": null
                                },
                                {
                                    "name": "{ item }",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "sortDirection",
                            "docblock": null,
                            "modifiers": [],
                            "params": [],
                            "returns": null
                        },
                        {
                            "name": "headerWrapper",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "children",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "header",
                            "docblock": null,
                            "modifiers": [],
                            "params": [],
                            "returns": null
                        },
                        {
                            "name": "addListItemComponent",
                            "docblock": null,
                            "modifiers": [],
                            "params": [
                                {
                                    "name": "component",
                                    "type": null
                                },
                                {
                                    "name": "index",
                                    "type": null
                                }
                            ],
                            "returns": null
                        },
                        {
                            "name": "listItems",
                            "docblock": null,
                            "modifiers": [],
                            "params": [],
                            "returns": null
                        }
                    ],
                    "props": {
                        "assistiveText": {
                            "type": {
                                "name": "shape",
                                "value": {
                                    "list": {
                                        "name": "string",
                                        "required": false
                                    },
                                    "sort": {
                                        "name": "shape",
                                        "value": {
                                            "sortedBy": {
                                                "name": "string",
                                                "required": false
                                            },
                                            "descending": {
                                                "name": "string",
                                                "required": false
                                            },
                                            "ascending": {
                                                "name": "string",
                                                "required": false
                                            }
                                        },
                                        "required": false
                                    },
                                    "unreadItem": {
                                        "name": "string",
                                        "required": false
                                    }
                                }
                            },
                            "required": false,
                            "description": "**Assistive text for accessibility**\n* `list`: aria label for the list\n* `sort`\n   * `sortedBy`: Clickable sort header for the list.\n   * `descending`: Descending sorting.\n   * `ascending`: Ascending sorting.",
                            "defaultValue": {
                                "value": "{\n    list: 'Select an item to open it in a new workspace tab.',\n    sort: {\n        sortedBy: 'Sorted by',\n        descending: 'Descending',\n        ascending: 'Ascending',\n    },\n}",
                                "computed": false
                            }
                        },
                        "className": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "array"
                                    },
                                    {
                                        "name": "object"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "CSS classes to be added to the parent `div` tag."
                        },
                        "events": {
                            "type": {
                                "name": "shape",
                                "value": {
                                    "onSelect": {
                                        "name": "func",
                                        "required": true
                                    },
                                    "onSort": {
                                        "name": "func",
                                        "required": false
                                    }
                                }
                            },
                            "required": false,
                            "description": "Event Callbacks\n* `onSelect`: Called when a list item is selected.\n   * event {object} List item click event\n   * Meta {object}\n      * selectedItems {array} List of selected items.\n      * item {object} Last selected item.\n* `onSort`: Called when the list is sorted.\n   * event {object} Sort click event",
                            "defaultValue": {
                                "value": "{}",
                                "computed": false
                            }
                        },
                        "id": {
                            "type": {
                                "name": "string"
                            },
                            "required": false,
                            "description": "HTML id for component."
                        },
                        "labels": {
                            "type": {
                                "name": "shape",
                                "value": {
                                    "header": {
                                        "name": "string",
                                        "required": false
                                    }
                                }
                            },
                            "required": false,
                            "description": "**Text labels for internationalization**\n* `header`: This is the header of the list.",
                            "defaultValue": {
                                "value": "{}",
                                "computed": false
                            }
                        },
                        "sortDirection": {
                            "type": {
                                "name": "enum",
                                "value": [
                                    {
                                        "value": "SORT_OPTIONS.UP",
                                        "computed": true
                                    },
                                    {
                                        "value": "SORT_OPTIONS.DOWN",
                                        "computed": true
                                    }
                                ]
                            },
                            "required": false,
                            "description": "The direction of the sort arrow. Option are:\n* SORT_OPTIONS.UP: `up`\n* SORT_OPTIONS.DOWN: `down`"
                        },
                        "multiple": {
                            "type": {
                                "name": "bool"
                            },
                            "required": false,
                            "description": "Allows multiple item to be selection"
                        },
                        "options": {
                            "type": {
                                "name": "array"
                            },
                            "required": true,
                            "description": "The list of items.\nIt is recommended that you have a unique `id` for each item."
                        },
                        "selection": {
                            "type": {
                                "name": "array"
                            },
                            "required": false,
                            "description": "Accepts an array of item objects. For single selection, pass in an array of one object.",
                            "defaultValue": {
                                "value": "[]",
                                "computed": false
                            }
                        },
                        "unread": {
                            "type": {
                                "name": "array"
                            },
                            "required": false,
                            "description": "Accepts an array of item objects. For single unread, pass in an array of one object.",
                            "defaultValue": {
                                "value": "[]",
                                "computed": false
                            }
                        },
                        "listItem": {
                            "type": {
                                "name": "func"
                            },
                            "required": false,
                            "description": "Custom list item template for the list item content. The select and unread functionality wraps the custom list item.\nThis should be a React component that accepts props."
                        }
                    },
                    "name": "listbox",
                    "source": "/components/split-view/listbox.jsx"
                }
            }
        ]
    },
    "radio-group": {
        "description": "A styled select list that can have a single entry checked at any one time.\nThe RadioGroup component wraps [Radio](/components/radios) components, which should be used as children.",
        "methods": [
            {
                "name": "getErrorId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getName",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "hasError",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            }
        ],
        "props": {
            "children": {
                "type": {
                    "name": "node"
                },
                "required": true,
                "description": "Children are expected to be Radio components."
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Custom CSS classes added to the node."
            },
            "labels": {
                "type": {
                    "name": "shape",
                    "value": {
                        "error": {
                            "name": "string",
                            "required": false
                        },
                        "label": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Text labels for internationalization**\nThis object is merged with the default props object on every render.\n* `error`: Message to display when any of Checkboxes are in an error state.\n* `label`: This label appears above the radio group.",
                "defaultValue": {
                    "value": "{}",
                    "computed": false
                }
            },
            "onChange": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This event fires when the radio selection changes."
            },
            "disabled": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Disable all radio inputs."
            },
            "required": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Adds an indicator that this field is required."
            },
            "name": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The name of this radio group."
            },
            "errorId": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The ID of the error message, for linking to radio inputs with aria-describedby."
            }
        },
        "route": "radio-groups",
        "display-name": "Radio Groups",
        "SLDS-component-path": "/components/radio-group",
        "dependencies": []
    },
    "radio-button-group": {
        "description": "A styled select list that can have a single entry checked at any one time.\nThe RadioButtonGroup component wraps [Radio](/components/radios) components, which should be used as children.",
        "methods": [
            {
                "name": "getErrorId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getName",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "hasError",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            }
        ],
        "props": {
            "children": {
                "type": {
                    "name": "node"
                },
                "required": true,
                "description": "Children are expected to be Radio components."
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Custom CSS classes added to `slds-radio_button-group` node."
            },
            "labels": {
                "type": {
                    "name": "shape",
                    "value": {
                        "error": {
                            "name": "string",
                            "required": false
                        },
                        "label": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Text labels for internationalization**\nThis object is merged with the default props object on every render.\n* `error`: Message to display when any of Checkboxes are in an error state.\n* `label`: This label appears above the button group.",
                "defaultValue": {
                    "value": "{}",
                    "computed": false
                }
            },
            "onChange": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This event fires when the radio selection changes."
            },
            "disabled": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Disable all radio inputs."
            },
            "required": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Adds an indicator that this field is required."
            },
            "name": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The name of this radio group."
            },
            "errorId": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The ID of the error message, for linking to radio inputs with aria-describedby."
            }
        },
        "route": "radio-button-groups",
        "display-name": "Radio Button Groups",
        "SLDS-component-path": "/components/radio-button-group",
        "dependencies": []
    },
    "slider": {
        "description": "The ability to style sliders with CSS varies across browsers. Using this component ensures sliders look the same everywhere.",
        "methods": [
            {
                "name": "getId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getErrorId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleChange",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleInput",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "aria-describedby": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The `aria-describedby` attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need."
            },
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "label": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "Assistive text for accessibility**\n`label`: Visually hidden label but read out loud by screen readers."
            },
            "classNameContainer": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Class names to be added to the outer container of the Slider."
            },
            "defaultValue": {
                "type": {
                    "name": "number"
                },
                "required": false,
                "description": "This is the initial value of an uncontrolled form element and is present\nonly to provide compatibility with hybrid framework applications that\nare not entirely React. It should only be used in an application without\ncentralized state (Redux, Flux). \"Controlled components\" with centralized\nstate is highly recommended. See [Code Overview](https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#controlled-and-uncontrolled-components) for more information."
            },
            "disabled": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Disables the Slider and prevents clicking it. Only available on the horizontal view."
            },
            "errorText": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Message to display when the Slider is in an error state. When this is present, also visually highlights the component as in error."
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Set the HTML `id` of the slider."
            },
            "label": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "This label appears above the Slider."
            },
            "max": {
                "type": {
                    "name": "number"
                },
                "required": false,
                "description": "Maximum value of a specified range. Defaults to 100.",
                "defaultValue": {
                    "value": "100",
                    "computed": false
                }
            },
            "min": {
                "type": {
                    "name": "number"
                },
                "required": false,
                "description": "Minimum value of a specified range. Defaults to 0.",
                "defaultValue": {
                    "value": "0",
                    "computed": false
                }
            },
            "name": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Name of the submitted form parameter."
            },
            "onChange": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This event fires whenever the user has modified the data of the control. This callback recieves the following parameters `event, { value: [string] }`."
            },
            "onInput": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This event fires when the value is committed. This callback recieves the following parameters `event, { value: [string] }`."
            },
            "size": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'x-small'",
                            "computed": false
                        },
                        {
                            "value": "'small'",
                            "computed": false
                        },
                        {
                            "value": "'medium'",
                            "computed": false
                        },
                        {
                            "value": "'large'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Size of the slider."
            },
            "step": {
                "type": {
                    "name": "number"
                },
                "required": false,
                "description": "By default, the granularity is 1 and the value is always an integer. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of step to 0.01",
                "defaultValue": {
                    "value": "1",
                    "computed": false
                }
            },
            "value": {
                "type": {
                    "name": "number"
                },
                "required": false,
                "description": "The Slider should be a controlled component, and will always display this value. This should always be used if you are using a Flux/Redux framework."
            },
            "vertical": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Modifier that makes the slider vertical"
            }
        },
        "route": "slider",
        "display-name": "Slider",
        "SLDS-component-path": "/components/slider",
        "dependencies": []
    },
    "tabs": {
        "description": "A tab keeps related content in a single container that is shown and hidden through navigation.",
        "methods": [
            {
                "name": "getNextTab",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "index",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "getPanelsCount",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getPrevTab",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "index",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "getSelectedIndex",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getTab",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "index",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "getTabNode",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "index",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "getTabsCount",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getVariant",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "setSelected",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "index",
                        "type": null
                    },
                    {
                        "name": "focus",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleClick",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "e",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleKeyDown",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "isTabFromContainer",
                "docblock": "Determine if a node from event.target is a Tab element for the current Tabs container.\nIf the clicked element is not a Tab, it returns false.\nIf it finds another Tabs container between the Tab and `this`, it returns false.",
                "modifiers": [],
                "params": [
                    {
                        "name": "node"
                    }
                ],
                "returns": null,
                "description": "Determine if a node from event.target is a Tab element for the current Tabs container.\nIf the clicked element is not a Tab, it returns false.\nIf it finds another Tabs container between the Tab and `this`, it returns false."
            },
            {
                "name": "renderTabPanels",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "parentId",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "renderTabsList",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "parentId",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "HTML `id` attribute of primary element that has `.slds-tabs--default` on it. Optional: If one is not supplied, a `shortid` will be created."
            },
            "children": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "arrayOf",
                            "value": {
                                "name": "node"
                            }
                        },
                        {
                            "name": "node"
                        },
                        {
                            "name": "element"
                        }
                    ]
                },
                "required": true,
                "description": "The `children` are the actual tabs and panels to be displayed.\n\nNote that the structure of the `<Tabs />` component **does not** correspond to the DOM structure that is rendered. The `<Tabs />` component requires one or more children of type `<TabsPanel />`, which themselves require a `label` property which will be what shows in the `<Tab />` and has `children`, which end up being the _contents of the tab's corresponding panel_.\n\nThe component iterates through each `<TabsPanel />` and rendering one `<Tab />` and one `<TabPanel />` for each of them. The tab(s) end up being children of the `<TabsList />`.\n\n```\n<Tabs>\n\t<TabsPanel label=\"Tab 1\">\n\t\t<div>\n\t\t\t<h2 className=\"slds-text-heading--medium\">This is my tab 1 contents!</h2>\n\t\t\t<p>They show when you click the first tab.</p>\n\t\t</div>\n\t</TabsPanel>\n\t<TabsPanel label=\"Tab 2\">\n\t\t<div>\n\t\t\t<h2 className=\"slds-text-heading--medium\">This is my tab 2 contents!</h2>\n\t\t\t<p>They show when you click the second tab.</p>\n\t\t</div>\n\t</TabsPanel>\n</Tabs>\n```"
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Class names to be added to the container element and is passed along to its children."
            },
            "defaultSelectedIndex": {
                "type": {
                    "name": "number"
                },
                "required": false,
                "description": "The Tab (and corresponding TabPanel) that is selected when the component first renders. Defaults to `0`.",
                "defaultValue": {
                    "value": "0",
                    "computed": false
                }
            },
            "onSelect": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This function triggers when a tab is selected."
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'default'",
                            "computed": false
                        },
                        {
                            "value": "'scoped'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "If the Tabs should be scopped, defaults to false",
                "defaultValue": {
                    "value": "'default'",
                    "computed": false
                }
            },
            "selectedIndex": {
                "type": {
                    "name": "number"
                },
                "required": false,
                "description": "The Tab (and corresponding TabPanel) that is currently selected."
            }
        },
        "route": "tabs",
        "display-name": "Tabs",
        "SLDS-component-path": "/components/tabs",
        "dependencies": [
            {
                "panel": {
                    "description": "The `<TabsPanel />` component allows us to simplify the structure of the `<Tabs />` component.\n\nRather than require different (deeply nested) children for tabslist, with its tab(s) as well as tabpanel(s), we provide this `TabsPanel` component which takes a `label` property that will become what is shown on the `<Tab />` that will be associated with it.\n\nThe `children` of the Panel will be fed to the `<TabPanel />` component, while its `label` is handled in `<Tab />`, via `<TabsList />`.\n\n```\n<TabsPanel label=\"Tab 1\">\n\t<div>\n\t\t<h2 className=\"slds-text-heading--medium\">This is my tab 1 contents!</h2>\n\t\t<p>They show when you click the first tab.</p>\n\t</div>\n</TabsPanel>\n```",
                    "methods": [],
                    "props": {
                        "label": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "string"
                                    },
                                    {
                                        "name": "element"
                                    }
                                ]
                            },
                            "required": true,
                            "description": "The string or element that is handed off to the `<Tab />` component, ends up being the title and the label for the tab associated with its tab panel."
                        },
                        "children": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "arrayOf",
                                        "value": {
                                            "name": "node"
                                        }
                                    },
                                    {
                                        "name": "node"
                                    },
                                    {
                                        "name": "element"
                                    }
                                ]
                            },
                            "required": true,
                            "description": "The `children` are the actual tab panels to be rendered. They get created by [tabs/index.jsx](./index.jsx) in the `renderTabPanels` function.\n\nNote that the `<TabsPanel />` component inserts a `div` element around the children, because React requires exactly one \"parent\" element returned. The `<TabPanel />` component simply dips down into `children` to get the children of this wrapping `div` so that it does not get rendered in the DOM."
                        }
                    },
                    "name": "panel",
                    "source": "/components/tabs/panel.jsx"
                }
            }
        ]
    },
    "textarea": {
        "description": "A multi-line plain-text editing control.",
        "methods": [
            {
                "name": "getId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getErrorId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            }
        ],
        "props": {
            "aria-activedescendant": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The aria-activedescendant attribute contains the ID of the currently active child object that is part of a composite widget within the Document Object Model. It makes do with the overhead of having all or more than one child focusable. As the name specifies, it helps in managing the current active child of the composite widget."
            },
            "aria-autocomplete": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Indicates if the suggestions in a composite widget are values that complete the current textbox input."
            },
            "aria-controls": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "An HTML ID that is shared with ARIA-supported devices with the\n`aria-controls` attribute in order to relate the input with\nanother region of the page. An example would be a select box\nthat shows or hides a panel."
            },
            "aria-describedby": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The `aria-describedby` attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need."
            },
            "aria-expanded": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Use the `aria-expanded` state to indicate whether regions of the content are collapsible, and to expose whether a region is currently expanded or collapsed."
            },
            "aria-haspopup": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Indicates that the element has a popup context menu or sub-level menu."
            },
            "aria-labelledby": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The aria-labelledby attribute contains the element IDs of labels in objects such as input elements, widgets, and groups. The attribute establishes relationships between objects and their labels. Assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them. Without an element ID, the assistive technology cannot catalog the object."
            },
            "aria-owns": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "An HTML ID that is shared with ARIA-supported devices with the\n`aria-controls` attribute in order to relate the input with\nanother region of the page. An example would be a search field\nthat shows search results."
            },
            "aria-required": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "The `aria-required` attribute is used to indicate that user input is required on an element before a form can be submitted."
            },
            "autoFocus": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Specifies is the textarea should automatically get focus when the page loads. This is typically a poor user experience."
            },
            "assistiveText": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "If present, the label associated with this `textarea` is overwritten\nby this text and is visually not shown."
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Elements are added after the `textarea`."
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Class names to be added to the textarea component."
            },
            "classNameContainer": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Allows for ability to apply classNames to outer textarea div."
            },
            "disabled": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Disables the textarea and prevents editing the contents."
            },
            "errorText": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Message to display when the textarea is in an error state. When this is present, also visually highlights the component as in error."
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Every textarea must have a unique ID in order to support keyboard navigation and ARIA support."
            },
            "textareaRef": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This callback exposes the textarea reference / DOM node to parent components. `<Parent textareaRef={(textareaComponent) => this.textarea = textareaComponent} />"
            },
            "label": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "This label appears above the textarea."
            },
            "onBlur": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when focus is removed."
            },
            "onChange": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This callback fires when the textarea changes. The synthetic React event will be the first parameter to the callback. You will probably want to reference `event.target.value` in your callback. No custom data object is provided."
            },
            "onClick": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This event fires when the textarea is clicked."
            },
            "onFocus": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when component is focused."
            },
            "onInput": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Similar to `onchange`. Triggered when an element gets user input."
            },
            "onInvalid": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a submittable <input> element is invalid."
            },
            "onKeyDown": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a key is pressed down"
            },
            "onKeyPress": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a key is pressed and released"
            },
            "onKeyUp": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered when a key is released"
            },
            "onSelect": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered after some text has been selected in an element."
            },
            "onSubmit": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Fires when a form is submitted."
            },
            "maxLength": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Maximum number of characters allowed."
            },
            "name": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Name of the submitted form parameter."
            },
            "placeholder": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Text that will appear in an empty textarea."
            },
            "required": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Highlights the textarea as a required field (does not perform any validation)."
            },
            "value": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The textarea is a controlled component, and will always display this value."
            },
            "defaultValue": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "The textarea is a uncontrolled component, and this will be the initial value."
            },
            "wrap": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'soft'",
                            "computed": false
                        },
                        {
                            "value": "'hard'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Specifies how the text in a text area is to be wrapped when submitted in a form."
            }
        },
        "route": "textareas",
        "display-name": "Textareas",
        "SLDS-component-path": "/components/forms#flavor-textarea",
        "dependencies": []
    },
    "time-picker": {
        "description": "Component description.",
        "methods": [
            {
                "name": "getOptions",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "parseDate",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "strValue",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleChange",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "date",
                        "type": null
                    },
                    {
                        "name": "strValue",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleSelect",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "val",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleInputChange",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "event",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "constrainToScrollParent": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, constrains the menu to the scroll parent. See `Dropdown`."
            },
            "disabled": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Disables the input and prevents editing the contents."
            },
            "formatter": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Time formatting function",
                "defaultValue": {
                    "value": "function(date) {\n    if (date) {\n        return date.toLocaleTimeString(navigator.language, {\n            hour: '2-digit',\n            minute: '2-digit',\n        });\n    }\n\n    return null;\n}",
                    "computed": false
                }
            },
            "inheritTargetWidth": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Sets the dialog width to the width of the target. Menus attached to `input` typically follow this UX pattern."
            },
            "label": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "This label appears above the input."
            },
            "listItemRenderer": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Custom element that overrides the default Menu Item component."
            },
            "menuPosition": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'absolute'",
                            "computed": false
                        },
                        {
                            "value": "'overflowBoundaryElement'",
                            "computed": false
                        },
                        {
                            "value": "'relative'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Please select one of the following:\n* `absolute` - (default) The dialog will use `position: absolute` and style attributes to position itself. This allows inverted placement or flipping of the dialog.\n* `overflowBoundaryElement` - The dialog will overflow scrolling parents. Use on elements that are aligned to the left or right of their target and don't care about the target being within a scrolling parent. Typically this is a popover or tooltip. Dropdown menus can usually open up and down if no room exists. In order to achieve this a portal element will be created and attached to `body`. This element will render into that detached render tree.\n* `relative` - No styling or portals will be used. Menus will be positioned relative to their triggers. This is a great choice for HTML snapshot testing.",
                "defaultValue": {
                    "value": "'absolute'",
                    "computed": false
                }
            },
            "onDateChange": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Receives the props `(dateValue, stringValue)`"
            },
            "parser": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Parsing date string into Date",
                "defaultValue": {
                    "value": "function(timeStr) {\n    const date = new Date();\n    const dateStr = date.toLocaleString(navigator.language, {\n        year: 'numeric',\n        month: 'numeric',\n        day: 'numeric',\n    });\n    return new Date(`${dateStr} ${timeStr}`);\n}",
                    "computed": false
                }
            },
            "placeholder": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Text that will appear in an empty input.",
                "defaultValue": {
                    "value": "'Pick Time'",
                    "computed": false
                }
            },
            "required": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "If true, adds asterisk next to input label to indicate it is a required field."
            },
            "stepInMinutes": {
                "type": {
                    "name": "number"
                },
                "required": false,
                "description": "Frequency of options",
                "defaultValue": {
                    "value": "30",
                    "computed": false
                }
            },
            "strValue": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Value for input that is parsed to create an internal state in the `date` format."
            },
            "value": {
                "type": {
                    "name": "instanceOf",
                    "value": "Date"
                },
                "required": false,
                "description": "Instance an internal state in the `date` format.",
                "defaultValue": {
                    "value": "null",
                    "computed": false
                }
            }
        },
        "route": "timepickers",
        "display-name": "Timepickers",
        "SLDS-component-path": "/components/datepickers",
        "dependencies": []
    },
    "toast": {
        "description": "Toast serves as a feedback & confirmation mechanism after the user takes an action. View [banner guidelines](https://www.lightningdesignsystem.com/guidelines/messaging/components/banners/).",
        "methods": [
            {
                "name": "onClose",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "saveButtonRef",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "component",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "closeButton": {
                            "name": "union",
                            "value": [
                                {
                                    "name": "string"
                                },
                                {
                                    "name": "node"
                                }
                            ],
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility**\nThis object is merged with the default props object on every render.\n* `closeButton`: This is a visually hidden label for the close button.\n_Tested with snapshot testing._",
                "defaultValue": {
                    "value": "{\n    closeButton: 'Close',\n}",
                    "computed": false
                }
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to tag with `.slds-notify_toast`. Uses `classNames` [API](https://github.com/JedWatson/classnames).\n_Tested with snapshot testing._"
            },
            "duration": {
                "type": {
                    "name": "number"
                },
                "required": false,
                "description": "If duration exists, the Toast will disappear after that amount of time. Time in milliseconds. _Tested with Mocha testing._"
            },
            "labels": {
                "type": {
                    "name": "shape",
                    "value": {
                        "details": {
                            "name": "union",
                            "value": [
                                {
                                    "name": "string"
                                },
                                {
                                    "name": "node"
                                }
                            ],
                            "required": false
                        },
                        "heading": {
                            "name": "union",
                            "value": [
                                {
                                    "name": "string"
                                },
                                {
                                    "name": "node"
                                }
                            ],
                            "required": false
                        },
                        "headingLink": {
                            "name": "union",
                            "value": [
                                {
                                    "name": "string"
                                },
                                {
                                    "name": "node"
                                }
                            ],
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Text labels for internationalization**\nThis object is merged with the default props object on every render.\n* `details`: Secondary text below heading\n* `heading`: text within heading tag\n* `headingLink`: Text of link that triggers `onClickHeadingLink`. Inline links should pass a keyed array of React components into `labels.heading`.\n\n_Tested with snapshot testing._"
            },
            "onClickHeadingLink": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered by link. _Tested with Mocha testing._"
            },
            "icon": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Icon of type `~/components/icon`. This icon will be cloned and additional props appended. The default icons are:\n* info variant: `utility:info`\n* error variant: `utility:error`\n* success variant: `utility:success`\n* warning variant: `utility:warning`\n\n_Tested with snapshot testing._"
            },
            "onRequestClose": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "Triggered by close button. _Tested with Mocha testing._"
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'error'",
                            "computed": false
                        },
                        {
                            "value": "'info'",
                            "computed": false
                        },
                        {
                            "value": "'success'",
                            "computed": false
                        },
                        {
                            "value": "'warning'",
                            "computed": false
                        }
                    ]
                },
                "required": true,
                "description": "The type of Toast. _Tested with snapshot testing._",
                "defaultValue": {
                    "value": "'info'",
                    "computed": false
                }
            }
        },
        "route": "toasts",
        "display-name": "Toasts",
        "SLDS-component-path": "/components/toasts",
        "dependencies": [
            {
                "container": {
                    "description": "A fixed container for toast banners.",
                    "methods": [],
                    "props": {
                        "className": {
                            "type": {
                                "name": "union",
                                "value": [
                                    {
                                        "name": "array"
                                    },
                                    {
                                        "name": "object"
                                    },
                                    {
                                        "name": "string"
                                    }
                                ]
                            },
                            "required": false,
                            "description": "CSS classes to be added to tag with `.slds-notify-container`. Uses `classNames` [API](https://github.com/JedWatson/classnames)."
                        },
                        "children": {
                            "type": {
                                "name": "node"
                            },
                            "required": false,
                            "description": "Toast components"
                        }
                    },
                    "name": "container",
                    "source": "/components/toast/container.jsx"
                }
            }
        ]
    },
    "tooltip": {
        "description": "The PopoverTooltip component is variant of the Lightning Design System Popover component. This component wraps an element that triggers it to open. It must be a focusable child element (either a button or an anchor), so that keyboard users can navigate to it.",
        "methods": [
            {
                "name": "getContent",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getId",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getTooltip",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getTooltipContent",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "getTooltipTarget",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleCancel",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleMouseEnter",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleMouseLeave",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "saveTriggerRef",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "component",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "align": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'top'",
                            "computed": false
                        },
                        {
                            "value": "'top left'",
                            "computed": false
                        },
                        {
                            "value": "'top right'",
                            "computed": false
                        },
                        {
                            "value": "'right'",
                            "computed": false
                        },
                        {
                            "value": "'right top'",
                            "computed": false
                        },
                        {
                            "value": "'right bottom'",
                            "computed": false
                        },
                        {
                            "value": "'bottom'",
                            "computed": false
                        },
                        {
                            "value": "'bottom left'",
                            "computed": false
                        },
                        {
                            "value": "'bottom right'",
                            "computed": false
                        },
                        {
                            "value": "'left'",
                            "computed": false
                        },
                        {
                            "value": "'left top'",
                            "computed": false
                        },
                        {
                            "value": "'left bottom'",
                            "computed": false
                        }
                    ]
                },
                "required": true,
                "description": "Alignment of the Tooltip relative to the element that triggers it.",
                "defaultValue": {
                    "value": "'top'",
                    "computed": false
                }
            },
            "assistiveText": {
                "type": {
                    "name": "shape",
                    "value": {
                        "tooltipTipLearnMoreIcon": {
                            "name": "string",
                            "required": false
                        },
                        "triggerLearnMoreIcon": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Assistive text for accessibility**\nThis object is merged with the default props object on every render.\n* `tooltipTipLearnMoreIcon`: This text is inside the info icon within the tooltip content and exists to \"complete the sentence\" for assistive tech users.\n* `triggerLearnMoreIcon`: This text is inside the info icon that triggers the tooltip in order to have text within the link.",
                "defaultValue": {
                    "value": "{\n    tooltipTipLearnMoreIcon: 'this link',\n    triggerLearnMoreIcon: 'Learn More',\n}",
                    "computed": false
                }
            },
            "children": {
                "type": {
                    "name": "node"
                },
                "required": false,
                "description": "Pass the one element that triggers the Tooltip as a child. It must be an element with `tabIndex` or an element that already has a `tabIndex` set such as an anchor or a button, so that keyboard users can tab to it."
            },
            "content": {
                "type": {
                    "name": "node"
                },
                "required": true,
                "description": "Content inside Tooltip.",
                "defaultValue": {
                    "value": "<span>Tooltip</span>",
                    "computed": false
                }
            },
            "hasStaticAlignment": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "By default, dialogs will flip their alignment (such as bottom to top) if they extend beyond a boundary element such as a scrolling parent or a window/viewpoint. `hasStaticAlignment` disables this behavior and allows this component to extend beyond boundary elements. _Not tested._"
            },
            "hoverCloseDelay": {
                "type": {
                    "name": "number"
                },
                "required": false,
                "description": "Delay on Tooltip closing.",
                "defaultValue": {
                    "value": "50",
                    "computed": false
                }
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the popover to the triggering element."
            },
            "labels": {
                "type": {
                    "name": "shape",
                    "value": {
                        "learnMoreAfter": {
                            "name": "string",
                            "required": false
                        },
                        "learnMoreBefore": {
                            "name": "string",
                            "required": false
                        }
                    }
                },
                "required": false,
                "description": "**Text labels for internationalization**\nThis object is merged with the default props object on every render.\n* `learnMoreAfter`: This label appears in the tooltip after the info icon.\n* `learnMoreBefore`: This label appears in the tooltip before the info icon.",
                "defaultValue": {
                    "value": "{\n    learnMoreAfter: 'to learn more.',\n    learnMoreBefore: 'Click',\n}",
                    "computed": false
                }
            },
            "isOpen": {
                "type": {
                    "name": "bool"
                },
                "required": false,
                "description": "Forces tooltip to be open. A value of `false` will disable any interaction with the tooltip."
            },
            "triggerClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "CSS classes to be added to tag with `slds-tooltip-trigger`."
            },
            "position": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'absolute'",
                            "computed": false
                        },
                        {
                            "value": "'overflowBoundaryElement'",
                            "computed": false
                        },
                        {
                            "value": "'relative'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Please select one of the following:\n* `absolute` - (default) The dialog will use `position: absolute` and style attributes to position itself. This allows inverted placement or flipping of the dialog.\n* `overflowBoundaryElement` - The dialog will overflow scrolling parents. Use on elements that are aligned to the left or right of their target and don't care about the target being within a scrolling parent. Typically this is a popover or tooltip. Dropdown menus can usually open up and down if no room exists. In order to achieve this a portal element will be created and attached to `body`. This element will render into that detached render tree.\n* `relative` - No styling or portals will be used. Menus will be positioned relative to their triggers. This is a great choice for HTML snapshot testing.",
                "defaultValue": {
                    "value": "'absolute'",
                    "computed": false
                }
            },
            "triggerStyle": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "Custom styles to be added to wrapping triggering `div`."
            },
            "theme": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'info'",
                            "computed": false
                        },
                        {
                            "value": "'error'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Determines the theme of tooltip: for informative purpose (blue background) or warning purpose (red background). This used to be `variant`.",
                "defaultValue": {
                    "value": "'info'",
                    "computed": false
                }
            },
            "variant": {
                "type": {
                    "name": "enum",
                    "value": [
                        {
                            "value": "'base'",
                            "computed": false
                        },
                        {
                            "value": "'learnMore'",
                            "computed": false
                        }
                    ]
                },
                "required": false,
                "description": "Determines the type of the tooltip.",
                "defaultValue": {
                    "value": "'base'",
                    "computed": false
                }
            }
        },
        "route": "tooltips",
        "display-name": "Tooltips",
        "SLDS-component-path": "/components/tooltips",
        "dependencies": []
    },
    "tree": {
        "description": "A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed. This is a controlled component, since visual state is present in the `nodes` data.",
        "methods": [
            {
                "name": "flattenTree",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "root",
                        "type": null
                    },
                    {
                        "name": "treeIndex",
                        "type": null
                    },
                    {
                        "name": "firstLevel",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleSelect",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "{ event, data, clearSelectedNodes, fromFocus }",
                        "type": null
                    }
                ],
                "returns": null
            },
            {
                "name": "handleNodeBlur",
                "docblock": null,
                "modifiers": [],
                "params": [],
                "returns": null
            },
            {
                "name": "handleExpand",
                "docblock": null,
                "modifiers": [],
                "params": [
                    {
                        "name": "{ event, data }",
                        "type": null
                    }
                ],
                "returns": null
            }
        ],
        "props": {
            "assistiveText": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "For users of assistive technology, if set the heading will be hidden. One of `heading` or `assistiveText` must be set in order to label the tree."
            },
            "className": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Class names to be added to the container element which has the heading and the `ul.slds-tree` element as children."
            },
            "listClassName": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "array"
                        },
                        {
                            "name": "object"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "Class names to be added to the top-level `ul` element of the tree."
            },
            "getNodes": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "A function that will be called by every branch to receive its child nodes. The parent `node` object with the branch data is passed into this function: `getNodes(node)`. If your state engine is Flux or Redux, then your tree data structure will probably be flattened or normalized within the store. This will allow you to build out your tree without transversing an actual tree of data and may be more performant.",
                "defaultValue": {
                    "value": "(node) => node.nodes",
                    "computed": false
                }
            },
            "heading": {
                "type": {
                    "name": "union",
                    "value": [
                        {
                            "name": "node"
                        },
                        {
                            "name": "string"
                        }
                    ]
                },
                "required": false,
                "description": "This is the tree's heading and describes its contents. It can be hidden, see `assistiveText`."
            },
            "id": {
                "type": {
                    "name": "string"
                },
                "required": true,
                "description": "HTML `id` of primary element that has `.slds-tree` on it. This component has a wrapping container element outside of `.slds-tree`."
            },
            "nodes": {
                "type": {
                    "name": "arrayOf",
                    "value": {
                        "name": "union",
                        "value": [
                            {
                                "name": "number"
                            },
                            {
                                "name": "string"
                            },
                            {
                                "name": "shape",
                                "value": {
                                    "id": {
                                        "name": "union",
                                        "value": [
                                            {
                                                "name": "number"
                                            },
                                            {
                                                "name": "string"
                                            }
                                        ],
                                        "required": true
                                    },
                                    "label": {
                                        "name": "string",
                                        "required": true
                                    },
                                    "type": {
                                        "name": "string",
                                        "required": true
                                    }
                                }
                            }
                        ]
                    }
                },
                "required": true,
                "description": "Array of items starting at the top of the tree. The shape each node in the array is:\n```\n{\n  expanded: string,\n  id: string,\n  label: string or node,\n  selected: string,\n  type: string,\n  nodes: array\n}\n```\n`assistiveText: string` is optional and helpful if the label is not a string. Only `id` and `label` are required. Use `type: 'branch'` for folder and categories."
            },
            "onClick": {
                "type": {
                    "name": "func"
                },
                "required": true,
                "description": "Function that will run whenever an item or branch is selected due to click or keyboard navigation."
            },
            "onExpandClick": {
                "type": {
                    "name": "func"
                },
                "required": true,
                "description": "This function triggers when the expand or collapse icon is clicked or due to keyboard navigation."
            },
            "onScroll": {
                "type": {
                    "name": "func"
                },
                "required": false,
                "description": "This function triggers when the top-level `ul` element scrolls. This can be used to implement an \"infinite scroll\" pattern and update the `nodes` prop accordingly."
            },
            "searchTerm": {
                "type": {
                    "name": "string"
                },
                "required": false,
                "description": "Highlights term if found in node label. This does not auto-expand branches."
            },
            "listStyle": {
                "type": {
                    "name": "object"
                },
                "required": false,
                "description": "Styles to be added to the top-level `ul` element. Useful for `overflow:hidden`."
            }
        },
        "route": "tree",
        "display-name": "Tree",
        "SLDS-component-path": "/components/tree",
        "dependencies": []
    }
}