{
  "componentDescription": "",
  "propDescriptions": {
    "children": { "description": "The content of the component." },
    "classes": { "description": "Override or extend the styles applied to the component." },
    "color": { "description": "The dot can have a different colors." },
    "sx": {
      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
    },
    "variant": { "description": "The dot can appear filled or outlined." }
  },
  "classDescriptions": {
    "filled": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"filled\"</code>"
    },
    "filledGrey": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"grey\"</code> and <code>variant=\"filled\"</code>"
    },
    "filledPrimary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"primary\"</code> and <code>variant=\"filled\"</code>"
    },
    "filledSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"secondary\"</code> and <code>variant=\"filled\"</code>"
    },
    "outlined": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"outlined\"</code>"
    },
    "outlinedGrey": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"grey\"</code> and <code>variant=\"outlined\"</code>"
    },
    "outlinedPrimary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"primary\"</code> and <code>variant=\"outlined\"</code>"
    },
    "outlinedSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"secondary\"</code> and <code>variant=\"outlined\"</code>"
    },
    "root": { "description": "Styles applied to the root element." }
  }
}