() => {
    const [showPageBanner, setShowPageBanner] = useState(true);
    const [variant, setVariant] = useState('light');

    return (
        <>
          <ExamplePropsForm
            inputs={[
              {
                value: variant, setValue: setVariant, options: [
                  {name: 'light', value: 'light'},
                  {name: 'dark', value: 'dark'},
                  {name: 'accentA', value: 'accentA'},
                  {name: 'accentB', value: 'accentB'},
                  {name: 'warning', value: 'warning'}
                ], name: 'Banner Variants'
              },
            ]}
          />

            <div>
              <PageBanner
                show={showPageBanner}
                variant={variant}
                dismissible
                onDismiss={() => setShowPageBanner(false)}
              >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
              </PageBanner>
              {!showPageBanner && (
                <Button className="my-2 mie-2" onClick={() => setShowPageBanner(true)}>Show Page Banner</Button>)}

            </div>
        </>
    )
}

() => {
  return (
    <>
      <PageBanner
         variant="warning"
      >
        <Icon src={WarningFilled} className="mie-2"/> We will no longer support Internet Explorer 11.
      </PageBanner>
    </>
  )
}