message: feat(collapse): add support for aria-hidden when collapse is closed
diff: import * as React from "react"
  import { useBoolean } from "@chakra-ui/hooks"
  -import { Collapse } from "../src/collapse"
  +import { Collapse, CollapseOptions } from "../src/collapse"
  export default {
  title: "Transition / Collapse",
  }
  -export const Basic = () => {
  +const CollapseExample = (props: CollapseOptions) => {
  const [open, { toggle }] = useBoolean()
  return (
  <>
  <button onClick={toggle}>Toggle Accordion</button>
  - <Collapse isOpen={open}>
  + <Collapse isOpen={open} {...props}>
  <div
  style={{
  background: "red",
  @@ -19,50 +19,27 @@ export const Basic = () => {
  marginTop: 8,
  }}
  >
  - Accordion Content
  + Lorem Ipsum is simply dummy text of the printing and typesetting
  + industry. Lorem Ipsum has been the industry's standard dummy text ever
  + since the 1500s, when an unknown printer took a galley of type and
  + scrambled it to make a type specimen book. It has survived not only
  + five centuries, but also the leap into electronic typesetting,
  + remaining essentially unchanged. It was popularised in the 1960s with
  + the release of Letraset sheets containing Lorem Ipsum passages, and
  + more recently with desktop publishing software like Aldus PageMaker
  + including versions of Lorem Ipsum.
  </div>
  </Collapse>
  </>
  )
  }
  -export const WithStartingHeight = () => {
  - const [open, { toggle }] = useBoolean()
  - return (
  - <>
  - <button onClick={toggle}>Toggle Accordion</button>
  - <Collapse startingHeight={40} isOpen={open}>
  - <div
  - style={{
  - background: "red",
  - padding: 30,
  - marginTop: 8,
  - }}
  - >
  - Accordion Content
  - </div>
  - </Collapse>
  - </>
  - )
  -}
  +export const Basic = () => <CollapseExample />
  -export const WithUnmount = () => {
  - const [open, { toggle }] = useBoolean()
  +export const WithStartingHeight = () => <CollapseExample startingHeight={40} />
  - return (
  - <>
  - <button onClick={toggle}>Toggle Accordion</button>
  - <Collapse unmountOnExit startingHeight={40} isOpen={open}>
  - <div
  - style={{
  - background: "red",
  - padding: 30,
  - marginTop: 8,
  - }}
  - >
  - Accordion Content
  - </div>
  - </Collapse>
  - </>
  +export const WithUnmount = () => <CollapseExample unmountOnExit />
  +
  +export const WithoutOpacityTransition = () => (
  + <CollapseExample animateOpacity={false} />
  )
  -}
  