[
  {
    "tags": {},
    "description": "Modals can be used to display a simple task, to confirm actions, prompt users to input information, or display additional information.",
    "methods": [],
    "displayName": "LeafygreenUiMarketingModal",
    "props": {
      "MarketingModalProps": {
        "title": {
          "name": "title",
          "defaultValue": null,
          "description": "Text of header element",
          "required": true,
          "type": {
            "name": "enum",
            "raw": "ReactNode",
            "value": [
              {
                "value": "string"
              },
              {
                "value": "number"
              },
              {
                "value": "false"
              },
              {
                "value": "true"
              },
              {
                "value": "ReactElement<any, string | JSXElementConstructor<any>>",
                "description": "",
                "fullComment": "",
                "tags": {}
              },
              {
                "value": "Iterable<ReactNode>",
                "description": "",
                "fullComment": "",
                "tags": {}
              },
              {
                "value": "ReactPortal",
                "description": "",
                "fullComment": "",
                "tags": {}
              }
            ]
          },
          "tags": {}
        },
        "graphic": {
          "name": "graphic",
          "defaultValue": null,
          "description": "React Element to be rendered as the modal's hero image",
          "required": true,
          "type": {
            "name": "ReactElement<any, string | JSXElementConstructor<any>>"
          },
          "tags": {}
        },
        "graphicStyle": {
          "name": "graphicStyle",
          "defaultValue": {
            "value": "center"
          },
          "description": "Determines the rendering style of the graphic.\n\n`fill` adds a curving effect to the bottom border of the graphic.",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "GraphicStyle",
            "value": [
              {
                "value": "\"center\""
              },
              {
                "value": "\"fill\""
              }
            ]
          },
          "tags": {}
        },
        "onLinkClick": {
          "name": "onLinkClick",
          "defaultValue": null,
          "description": "Callback fired when the secondary link element is clicked.",
          "required": false,
          "type": {
            "name": "() => void"
          },
          "tags": {}
        },
        "onClose": {
          "name": "onClose",
          "defaultValue": null,
          "description": "Callback fired when the modal is closed",
          "required": false,
          "type": {
            "name": "() => void"
          },
          "tags": {}
        },
        "buttonProps": {
          "name": "buttonProps",
          "defaultValue": {
            "value": "{}"
          },
          "description": "An object that accepts all Button props except for the `variant` prop.",
          "required": false,
          "type": {
            "name": "CustomButtonProps"
          },
          "tags": {}
        },
        "linkText": {
          "name": "linkText",
          "defaultValue": null,
          "description": "Text of the secondary link element",
          "required": true,
          "type": {
            "name": "string"
          },
          "tags": {}
        },
        "blobPosition": {
          "name": "blobPosition",
          "defaultValue": {
            "value": "top left"
          },
          "description": "Position of the blob visual effect. Defaults to top-left.\n\nNote: The blob is only rendered if: `showBlob` prop is `true`, and the `graphicStyle` prop is `center`.",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "BlobPosition",
            "value": [
              {
                "value": "\"top left\""
              },
              {
                "value": "\"top right\""
              },
              {
                "value": "\"bottom right\""
              }
            ]
          },
          "tags": {}
        },
        "showBlob": {
          "name": "showBlob",
          "defaultValue": {
            "value": false
          },
          "description": "Determines whether the blob should be rendered.",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "boolean",
            "value": [
              {
                "value": "false"
              },
              {
                "value": "true"
              }
            ]
          },
          "tags": {}
        },
        "disclaimer": {
          "name": "disclaimer",
          "defaultValue": null,
          "description": "Disclaimer text to be rendered under the primary action button",
          "required": false,
          "type": {
            "name": "ReactElement<any, string | JSXElementConstructor<any>>"
          },
          "tags": {}
        }
      },
      "ModalProps": {
        "children": {
          "name": "children",
          "defaultValue": null,
          "description": "Content that will appear inside of the Modal component.",
          "required": true,
          "type": {
            "name": "enum",
            "raw": "ReactNode",
            "value": [
              {
                "value": "string"
              },
              {
                "value": "number"
              },
              {
                "value": "false"
              },
              {
                "value": "true"
              },
              {
                "value": "ReactElement<any, string | JSXElementConstructor<any>>",
                "description": "",
                "fullComment": "",
                "tags": {}
              },
              {
                "value": "Iterable<ReactNode>",
                "description": "",
                "fullComment": "",
                "tags": {}
              },
              {
                "value": "ReactPortal",
                "description": "",
                "fullComment": "",
                "tags": {}
              }
            ]
          },
          "tags": {}
        },
        "open": {
          "name": "open",
          "defaultValue": {
            "value": "false"
          },
          "description": "Determines the open state of the modal",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "boolean",
            "value": [
              {
                "value": "false"
              },
              {
                "value": "true"
              }
            ]
          },
          "tags": {
            "default": "false"
          }
        },
        "setOpen": {
          "name": "setOpen",
          "defaultValue": {
            "value": "() => {}"
          },
          "description": "Callback to change the open state of the Modal.",
          "required": false,
          "type": {
            "name": "(open: boolean) => void | Dispatch<SetStateAction<boolean>>"
          },
          "tags": {
            "default": "() => {}"
          }
        },
        "shouldClose": {
          "name": "shouldClose",
          "defaultValue": {
            "value": "() => true"
          },
          "description": "Callback to determine whether or not Modal should close when user tries to close it.",
          "required": false,
          "type": {
            "name": "() => boolean"
          },
          "tags": {
            "default": "() => true"
          }
        },
        "initialFocus": {
          "name": "initialFocus",
          "defaultValue": {
            "value": "\"auto\""
          },
          "description": "Specifies which element should receive focus when the modal opens.\n\n**Options:**\n- `\"auto\"`: Automatically focuses the first focusable element in the modal\n- `string`: CSS selector passed to `querySelector()` to specify an element\n- `React.RefObject<HTMLElement>`: Reference to the element that should receive focus. This is recommended over using a CSS selector for better type safety.\n- `null`: Disables automatic focus management. Use sparingly - disabling focus management may create accessibility issues\n\n**Priority order:**\n1. If `initialFocus` is a selector or ref, that element will be focused\n2. If any child element has the `autoFocus` attribute, that element will be focused\n3. If `initialFocus` is `\"auto\"` and no child element has the `autoFocus` attribute, the first focusable element will be focused\n4. If `initialFocus` is `null`, no automatic focus will occur",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "string | RefObject<HTMLElement>",
            "value": [
              {
                "value": "string"
              },
              {
                "value": "RefObject<HTMLElement>",
                "description": "",
                "fullComment": "",
                "tags": {}
              }
            ]
          },
          "tags": {
            "default": "\"auto\"",
            "example": "// Relying on `autoFocus` attribute\n<Modal>\n  <button autoFocus>Submit</button>\n</Modal>\n// Using a ref (recommended over selector)\nconst submitRef = useRef<HTMLButtonElement>(null);\n<Modal initialFocus={submitRef}>\n  <button ref={submitRef}>Submit</button>\n</Modal>\n// Using a selector\n<Modal initialFocus=\"#submit-button\">\n  <button id=\"submit-button\">Submit</button>\n</Modal>\n// Disabling automatic focus\n<Modal initialFocus={null}>\n  <CustomEditor />\n</Modal>"
          }
        },
        "backdropClassName": {
          "name": "backdropClassName",
          "defaultValue": null,
          "description": "",
          "required": false,
          "type": {
            "name": "string"
          },
          "tags": {
            "deprecated": "Use CSS `::backdrop` pseudo-element instead. This prop will be removed in a future version.\n\nThis prop exists only to ease migration from the previous Modal implementation to Modal v20.\nThe preferred approach is to use the native CSS `::backdrop` pseudo-element for backdrop styling.\n\n**Preferred approach:**\n```css\n.my-modal::backdrop {\n// custom backdrop styles\n}\n```"
          }
        }
      },
      "HTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes",
      "DialogHTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog",
      "AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes",
      "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes",
      "DarkModeProps": {
        "darkMode": {
          "name": "darkMode",
          "defaultValue": {
            "value": "false"
          },
          "description": "Renders the component with dark mode styles.",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "boolean",
            "value": [
              {
                "value": "false"
              },
              {
                "value": "true"
              }
            ]
          },
          "tags": {
            "default": "false"
          }
        }
      },
      "LgIdProps": {
        "data-lgid": {
          "name": "data-lgid",
          "defaultValue": null,
          "description": "LG test id passed to the component wrapper.",
          "required": false,
          "type": {
            "name": "`lg-${string}`"
          },
          "tags": {}
        },
        "data-testid": {
          "name": "data-testid",
          "defaultValue": null,
          "description": "An additional test id passed to the component wrapper, meant for use by consumers of the library.",
          "required": false,
          "type": {
            "name": "string"
          },
          "tags": {}
        }
      },
      "CloseIconColorProp": {
        "closeIconColor": {
          "name": "closeIconColor",
          "defaultValue": {
            "value": "CloseIconColor.Default"
          },
          "description": "Determines the color of the close icon.",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "CloseIconColor",
            "value": [
              {
                "value": "\"default\""
              },
              {
                "value": "\"dark\""
              },
              {
                "value": "\"light\""
              }
            ]
          },
          "tags": {
            "default": "'default'"
          }
        }
      }
    }
  },
  {
    "tags": {},
    "description": "Modals can be used to display a simple task, to confirm actions, prompt users to input information, or display additional information.",
    "methods": [],
    "displayName": "MarketingModal",
    "props": {
      "MarketingModalProps": {
        "title": {
          "name": "title",
          "defaultValue": null,
          "description": "Text of header element",
          "required": true,
          "type": {
            "name": "enum",
            "raw": "ReactNode",
            "value": [
              {
                "value": "string"
              },
              {
                "value": "number"
              },
              {
                "value": "false"
              },
              {
                "value": "true"
              },
              {
                "value": "ReactElement<any, string | JSXElementConstructor<any>>",
                "description": "",
                "fullComment": "",
                "tags": {}
              },
              {
                "value": "Iterable<ReactNode>",
                "description": "",
                "fullComment": "",
                "tags": {}
              },
              {
                "value": "ReactPortal",
                "description": "",
                "fullComment": "",
                "tags": {}
              }
            ]
          },
          "tags": {}
        },
        "graphic": {
          "name": "graphic",
          "defaultValue": null,
          "description": "React Element to be rendered as the modal's hero image",
          "required": true,
          "type": {
            "name": "ReactElement<any, string | JSXElementConstructor<any>>"
          },
          "tags": {}
        },
        "graphicStyle": {
          "name": "graphicStyle",
          "defaultValue": {
            "value": "center"
          },
          "description": "Determines the rendering style of the graphic.\n\n`fill` adds a curving effect to the bottom border of the graphic.",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "GraphicStyle",
            "value": [
              {
                "value": "\"center\""
              },
              {
                "value": "\"fill\""
              }
            ]
          },
          "tags": {}
        },
        "onLinkClick": {
          "name": "onLinkClick",
          "defaultValue": null,
          "description": "Callback fired when the secondary link element is clicked.",
          "required": false,
          "type": {
            "name": "() => void"
          },
          "tags": {}
        },
        "onClose": {
          "name": "onClose",
          "defaultValue": null,
          "description": "Callback fired when the modal is closed",
          "required": false,
          "type": {
            "name": "() => void"
          },
          "tags": {}
        },
        "buttonProps": {
          "name": "buttonProps",
          "defaultValue": {
            "value": "{}"
          },
          "description": "An object that accepts all Button props except for the `variant` prop.",
          "required": false,
          "type": {
            "name": "CustomButtonProps"
          },
          "tags": {}
        },
        "linkText": {
          "name": "linkText",
          "defaultValue": null,
          "description": "Text of the secondary link element",
          "required": true,
          "type": {
            "name": "string"
          },
          "tags": {}
        },
        "blobPosition": {
          "name": "blobPosition",
          "defaultValue": {
            "value": "top left"
          },
          "description": "Position of the blob visual effect. Defaults to top-left.\n\nNote: The blob is only rendered if: `showBlob` prop is `true`, and the `graphicStyle` prop is `center`.",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "BlobPosition",
            "value": [
              {
                "value": "\"top left\""
              },
              {
                "value": "\"top right\""
              },
              {
                "value": "\"bottom right\""
              }
            ]
          },
          "tags": {}
        },
        "showBlob": {
          "name": "showBlob",
          "defaultValue": {
            "value": false
          },
          "description": "Determines whether the blob should be rendered.",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "boolean",
            "value": [
              {
                "value": "false"
              },
              {
                "value": "true"
              }
            ]
          },
          "tags": {}
        },
        "disclaimer": {
          "name": "disclaimer",
          "defaultValue": null,
          "description": "Disclaimer text to be rendered under the primary action button",
          "required": false,
          "type": {
            "name": "ReactElement<any, string | JSXElementConstructor<any>>"
          },
          "tags": {}
        }
      },
      "ModalProps": {
        "children": {
          "name": "children",
          "defaultValue": null,
          "description": "Content that will appear inside of the Modal component.",
          "required": true,
          "type": {
            "name": "enum",
            "raw": "ReactNode",
            "value": [
              {
                "value": "string"
              },
              {
                "value": "number"
              },
              {
                "value": "false"
              },
              {
                "value": "true"
              },
              {
                "value": "ReactElement<any, string | JSXElementConstructor<any>>",
                "description": "",
                "fullComment": "",
                "tags": {}
              },
              {
                "value": "Iterable<ReactNode>",
                "description": "",
                "fullComment": "",
                "tags": {}
              },
              {
                "value": "ReactPortal",
                "description": "",
                "fullComment": "",
                "tags": {}
              }
            ]
          },
          "tags": {}
        },
        "open": {
          "name": "open",
          "defaultValue": {
            "value": "false"
          },
          "description": "Determines the open state of the modal",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "boolean",
            "value": [
              {
                "value": "false"
              },
              {
                "value": "true"
              }
            ]
          },
          "tags": {
            "default": "false"
          }
        },
        "setOpen": {
          "name": "setOpen",
          "defaultValue": {
            "value": "() => {}"
          },
          "description": "Callback to change the open state of the Modal.",
          "required": false,
          "type": {
            "name": "(open: boolean) => void | Dispatch<SetStateAction<boolean>>"
          },
          "tags": {
            "default": "() => {}"
          }
        },
        "shouldClose": {
          "name": "shouldClose",
          "defaultValue": {
            "value": "() => true"
          },
          "description": "Callback to determine whether or not Modal should close when user tries to close it.",
          "required": false,
          "type": {
            "name": "() => boolean"
          },
          "tags": {
            "default": "() => true"
          }
        },
        "initialFocus": {
          "name": "initialFocus",
          "defaultValue": {
            "value": "\"auto\""
          },
          "description": "Specifies which element should receive focus when the modal opens.\n\n**Options:**\n- `\"auto\"`: Automatically focuses the first focusable element in the modal\n- `string`: CSS selector passed to `querySelector()` to specify an element\n- `React.RefObject<HTMLElement>`: Reference to the element that should receive focus. This is recommended over using a CSS selector for better type safety.\n- `null`: Disables automatic focus management. Use sparingly - disabling focus management may create accessibility issues\n\n**Priority order:**\n1. If `initialFocus` is a selector or ref, that element will be focused\n2. If any child element has the `autoFocus` attribute, that element will be focused\n3. If `initialFocus` is `\"auto\"` and no child element has the `autoFocus` attribute, the first focusable element will be focused\n4. If `initialFocus` is `null`, no automatic focus will occur",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "string | RefObject<HTMLElement>",
            "value": [
              {
                "value": "string"
              },
              {
                "value": "RefObject<HTMLElement>",
                "description": "",
                "fullComment": "",
                "tags": {}
              }
            ]
          },
          "tags": {
            "default": "\"auto\"",
            "example": "// Relying on `autoFocus` attribute\n<Modal>\n  <button autoFocus>Submit</button>\n</Modal>\n// Using a ref (recommended over selector)\nconst submitRef = useRef<HTMLButtonElement>(null);\n<Modal initialFocus={submitRef}>\n  <button ref={submitRef}>Submit</button>\n</Modal>\n// Using a selector\n<Modal initialFocus=\"#submit-button\">\n  <button id=\"submit-button\">Submit</button>\n</Modal>\n// Disabling automatic focus\n<Modal initialFocus={null}>\n  <CustomEditor />\n</Modal>"
          }
        },
        "backdropClassName": {
          "name": "backdropClassName",
          "defaultValue": null,
          "description": "",
          "required": false,
          "type": {
            "name": "string"
          },
          "tags": {
            "deprecated": "Use CSS `::backdrop` pseudo-element instead. This prop will be removed in a future version.\n\nThis prop exists only to ease migration from the previous Modal implementation to Modal v20.\nThe preferred approach is to use the native CSS `::backdrop` pseudo-element for backdrop styling.\n\n**Preferred approach:**\n```css\n.my-modal::backdrop {\n// custom backdrop styles\n}\n```"
          }
        }
      },
      "HTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes",
      "DialogHTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog",
      "AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes",
      "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes",
      "DarkModeProps": {
        "darkMode": {
          "name": "darkMode",
          "defaultValue": {
            "value": "false"
          },
          "description": "Renders the component with dark mode styles.",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "boolean",
            "value": [
              {
                "value": "false"
              },
              {
                "value": "true"
              }
            ]
          },
          "tags": {
            "default": "false"
          }
        }
      },
      "LgIdProps": {
        "data-lgid": {
          "name": "data-lgid",
          "defaultValue": null,
          "description": "LG test id passed to the component wrapper.",
          "required": false,
          "type": {
            "name": "`lg-${string}`"
          },
          "tags": {}
        },
        "data-testid": {
          "name": "data-testid",
          "defaultValue": null,
          "description": "An additional test id passed to the component wrapper, meant for use by consumers of the library.",
          "required": false,
          "type": {
            "name": "string"
          },
          "tags": {}
        }
      },
      "CloseIconColorProp": {
        "closeIconColor": {
          "name": "closeIconColor",
          "defaultValue": {
            "value": "CloseIconColor.Default"
          },
          "description": "Determines the color of the close icon.",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "CloseIconColor",
            "value": [
              {
                "value": "\"default\""
              },
              {
                "value": "\"dark\""
              },
              {
                "value": "\"light\""
              }
            ]
          },
          "tags": {
            "default": "'default'"
          }
        }
      }
    }
  }
]