Modal

<div style="display: grid; gap: 16px; justify-content: start; grid-template-columns: 1fr 1fr;">
  <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-standard" aria-label="Open standard modal" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M480 840 422 788Q321 697 255.0 631.0Q189 565 150.0 512.5Q111 460 95.5 416.0Q80 372 80 326Q80 232 143.0 169.0Q206 106 300 106Q352 106 399.0 128.0Q446 150 480 190Q514 150 561.0 128.0Q608 106 660 106Q754 106 817.0 169.0Q880 232 880 326Q880 372 864.5 416.0Q849 460 810.0 512.5Q771 565 705.0 631.0Q639 697 538 788ZM480 732Q576 646 638.0 584.5Q700 523 736.0 477.5Q772 432 786.0 396.5Q800 361 800 326Q800 266 760.0 226.0Q720 186 660 186Q613 186 573.0 212.5Q533 239 518 280H442Q427 239 387.0 212.5Q347 186 300 186Q240 186 200.0 226.0Q160 266 160 326Q160 361 174.0 396.5Q188 432 224.0 477.5Q260 523 322.0 584.5Q384 646 480 732ZM480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Z">
  </path></svg></span></span> <span class="c-button__label-text">Open standard modal</span></span></button> <button class=
  "c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-small" aria-label="Open small modal" data-component="button"><span class=
  "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M480 840 422 788Q321 697 255.0 631.0Q189 565 150.0 512.5Q111 460 95.5 416.0Q80 372 80 326Q80 232 143.0 169.0Q206 106 300 106Q352 106 399.0 128.0Q446 150 480 190Q514 150 561.0 128.0Q608 106 660 106Q754 106 817.0 169.0Q880 232 880 326Q880 372 864.5 416.0Q849 460 810.0 512.5Q771 565 705.0 631.0Q639 697 538 788ZM480 732Q576 646 638.0 584.5Q700 523 736.0 477.5Q772 432 786.0 396.5Q800 361 800 326Q800 266 760.0 226.0Q720 186 660 186Q613 186 573.0 212.5Q533 239 518 280H442Q427 239 387.0 212.5Q347 186 300 186Q240 186 200.0 226.0Q160 266 160 326Q160 361 174.0 396.5Q188 432 224.0 477.5Q260 523 322.0 584.5Q384 646 480 732ZM480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Z">
  </path></svg></span></span> <span class="c-button__label-text">Open small modal</span></span></button> <button class=
  "c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-medium" aria-label="Open medium modal" data-component="button"><span class=
  "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M480 840 422 788Q321 697 255.0 631.0Q189 565 150.0 512.5Q111 460 95.5 416.0Q80 372 80 326Q80 232 143.0 169.0Q206 106 300 106Q352 106 399.0 128.0Q446 150 480 190Q514 150 561.0 128.0Q608 106 660 106Q754 106 817.0 169.0Q880 232 880 326Q880 372 864.5 416.0Q849 460 810.0 512.5Q771 565 705.0 631.0Q639 697 538 788ZM480 732Q576 646 638.0 584.5Q700 523 736.0 477.5Q772 432 786.0 396.5Q800 361 800 326Q800 266 760.0 226.0Q720 186 660 186Q613 186 573.0 212.5Q533 239 518 280H442Q427 239 387.0 212.5Q347 186 300 186Q240 186 200.0 226.0Q160 266 160 326Q160 361 174.0 396.5Q188 432 224.0 477.5Q260 523 322.0 584.5Q384 646 480 732ZM480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Z">
  </path></svg></span></span> <span class="c-button__label-text">Open medium modal</span></span></button> <button class=
  "c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-large" aria-label="Open large modal" data-component="button"><span class=
  "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M480 840 422 788Q321 697 255.0 631.0Q189 565 150.0 512.5Q111 460 95.5 416.0Q80 372 80 326Q80 232 143.0 169.0Q206 106 300 106Q352 106 399.0 128.0Q446 150 480 190Q514 150 561.0 128.0Q608 106 660 106Q754 106 817.0 169.0Q880 232 880 326Q880 372 864.5 416.0Q849 460 810.0 512.5Q771 565 705.0 631.0Q639 697 538 788ZM480 732Q576 646 638.0 584.5Q700 523 736.0 477.5Q772 432 786.0 396.5Q800 361 800 326Q800 266 760.0 226.0Q720 186 660 186Q613 186 573.0 212.5Q533 239 518 280H442Q427 239 387.0 212.5Q347 186 300 186Q240 186 200.0 226.0Q160 266 160 326Q160 361 174.0 396.5Q188 432 224.0 477.5Q260 523 322.0 584.5Q384 646 480 732ZM480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Z">
  </path></svg></span></span> <span class="c-button__label-text">Open large modal</span></span></button> <button class=
  "c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-panel" aria-label="Open panel modal" data-component="button"><span class=
  "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M480 840 422 788Q321 697 255.0 631.0Q189 565 150.0 512.5Q111 460 95.5 416.0Q80 372 80 326Q80 232 143.0 169.0Q206 106 300 106Q352 106 399.0 128.0Q446 150 480 190Q514 150 561.0 128.0Q608 106 660 106Q754 106 817.0 169.0Q880 232 880 326Q880 372 864.5 416.0Q849 460 810.0 512.5Q771 565 705.0 631.0Q639 697 538 788ZM480 732Q576 646 638.0 584.5Q700 523 736.0 477.5Q772 432 786.0 396.5Q800 361 800 326Q800 266 760.0 226.0Q720 186 660 186Q613 186 573.0 212.5Q533 239 518 280H442Q427 239 387.0 212.5Q347 186 300 186Q240 186 200.0 226.0Q160 266 160 326Q160 361 174.0 396.5Q188 432 224.0 477.5Q260 523 322.0 584.5Q384 646 480 732ZM480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Z">
  </path></svg></span></span> <span class="c-button__label-text">Open panel modal</span></span></button>
</div><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--padding-3 c-modal--overlay-light" aria-labelledby="modal__label__modal-standard" aria-modal="true" role="dialog" id=
"modal-standard" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-standard" data-component="typography">
      Example modal standard
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
    "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span> <span class=
    "c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    <button class="c-button c-modal__prev c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-prev="" aria-label="chevron_left" type="button" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no"
    aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M560 720 320 480 560 240 616 296 432 480 616 664Z"></path></svg></span></span></span></button> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit
    amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    <button class="c-button c-modal__next c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-next="" aria-label="chevron_right" type="button" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no"
    aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M504 480 320 296 376 240 616 480 376 720 320 664Z"></path></svg></span></span></span></button>
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-component="button"><span class="c-button__label"><span class=
    "c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-sm c-modal--padding-3 c-modal--border-radius-lg c-modal--overlay-light" aria-labelledby="modal__label__modal-small"
aria-modal="true" role="dialog" id="modal-small" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-small" data-component="typography">
      Example modal small
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
    "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span> <span class=
    "c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-component="button"><span class="c-button__label"><span class=
    "c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-md c-modal--padding-3 c-modal--border-radius-md c-modal--overlay-light" aria-labelledby="modal__label__modal-medium"
aria-modal="true" role="dialog" id="modal-medium" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-medium" data-component="typography">
      Example modal medium
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
    "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span> <span class=
    "c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-component="button"><span class="c-button__label"><span class=
    "c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-lg c-modal--padding-3 c-modal--border-radius-sm c-modal--overlay-light" aria-labelledby="modal__label__modal-large"
aria-modal="true" role="dialog" id="modal-large" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-large" data-component="typography">
      Example modal large
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
    "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span> <span class=
    "c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-component="button"><span class="c-button__label"><span class=
    "c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-panel c-modal--slide-up c-modal--padding-2 c-modal--overlay-light" aria-labelledby="modal__label__modal-panel" aria-modal="true" role="dialog" id="modal-panel"
data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-panel" data-component="typography">
      Example modal panel
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
    "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span> <span class=
    "c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-component="button"><span class="c-button__label"><span class=
    "c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog>

@php
    $modals = [
        'standard' => [
            'isPanel' => false,
            'overlay' => 'light',
            'navigation' => true,
        ],
        'small' => [
            'size' => 'sm',
            'borderRadius' => 'lg',
        ],
        'medium' => [
            'size' => 'md',
            'borderRadius' => 'md',
        ],
        'large' => [
            'size' => 'lg',
            'borderRadius' => 'sm',
        ],
        'panel' => [
            'isPanel' => true,
            'animation' => 'slide-up',
            'padding' => 2,
        ],
    ];
@endphp

<div style="display: grid; gap: 16px; justify-content: start;  grid-template-columns: 1fr 1fr;">
    @foreach ($modals as $key => $modal)
        @button([
            'href' => '',
            'type' => 'filled',
            'text' => 'Open ' . $key . ' modal',
            'icon' => 'favorite',
            'size' => 'md',
            'color' => 'secondary',
            'classList' => ['open-modal', 'u-margin__left--0'],
            'attributeList' => ['data-open' => 'modal-' . $key],
        ])
        @endbutton
    @endforeach
</div>


@foreach ($modals as $key => $modal)
    @modal(
        array_merge(
            [
                'closeButtonText' => 'Close',
                'heading' => 'Example modal ' . $key,
                'id' => 'modal-' . $key
            ],
            (array) $modal
        )
    )
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        @slot('bottom')
            @button([
                'href' => '#',
                'type' => 'filled',
                'text' => 'Action',
                'size' => 'md',
                'color' => 'primary',
            ])
            @endbutton
            @button([
                'href' => '#',
                'type' => 'filled',
                'text' => 'Secondary action',
                'size' => 'md',
                'color' => 'secondary',
            ])
            @endbutton
        @endslot
    @endmodal
@endforeach

<div style="display: grid; gap: 16px; justify-content: start; grid-template-columns: 1fr 1fr;">
  <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-l-standard" aria-label="Open standard modal" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M480 840 422 788Q321 697 255.0 631.0Q189 565 150.0 512.5Q111 460 95.5 416.0Q80 372 80 326Q80 232 143.0 169.0Q206 106 300 106Q352 106 399.0 128.0Q446 150 480 190Q514 150 561.0 128.0Q608 106 660 106Q754 106 817.0 169.0Q880 232 880 326Q880 372 864.5 416.0Q849 460 810.0 512.5Q771 565 705.0 631.0Q639 697 538 788ZM480 732Q576 646 638.0 584.5Q700 523 736.0 477.5Q772 432 786.0 396.5Q800 361 800 326Q800 266 760.0 226.0Q720 186 660 186Q613 186 573.0 212.5Q533 239 518 280H442Q427 239 387.0 212.5Q347 186 300 186Q240 186 200.0 226.0Q160 266 160 326Q160 361 174.0 396.5Q188 432 224.0 477.5Q260 523 322.0 584.5Q384 646 480 732ZM480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Z">
  </path></svg></span></span> <span class="c-button__label-text">Open standard modal</span></span></button> <button class=
  "c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-l-small" aria-label="Open small modal" data-component="button"><span class=
  "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M480 840 422 788Q321 697 255.0 631.0Q189 565 150.0 512.5Q111 460 95.5 416.0Q80 372 80 326Q80 232 143.0 169.0Q206 106 300 106Q352 106 399.0 128.0Q446 150 480 190Q514 150 561.0 128.0Q608 106 660 106Q754 106 817.0 169.0Q880 232 880 326Q880 372 864.5 416.0Q849 460 810.0 512.5Q771 565 705.0 631.0Q639 697 538 788ZM480 732Q576 646 638.0 584.5Q700 523 736.0 477.5Q772 432 786.0 396.5Q800 361 800 326Q800 266 760.0 226.0Q720 186 660 186Q613 186 573.0 212.5Q533 239 518 280H442Q427 239 387.0 212.5Q347 186 300 186Q240 186 200.0 226.0Q160 266 160 326Q160 361 174.0 396.5Q188 432 224.0 477.5Q260 523 322.0 584.5Q384 646 480 732ZM480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Z">
  </path></svg></span></span> <span class="c-button__label-text">Open small modal</span></span></button> <button class=
  "c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-l-medium" aria-label="Open medium modal" data-component="button"><span class=
  "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M480 840 422 788Q321 697 255.0 631.0Q189 565 150.0 512.5Q111 460 95.5 416.0Q80 372 80 326Q80 232 143.0 169.0Q206 106 300 106Q352 106 399.0 128.0Q446 150 480 190Q514 150 561.0 128.0Q608 106 660 106Q754 106 817.0 169.0Q880 232 880 326Q880 372 864.5 416.0Q849 460 810.0 512.5Q771 565 705.0 631.0Q639 697 538 788ZM480 732Q576 646 638.0 584.5Q700 523 736.0 477.5Q772 432 786.0 396.5Q800 361 800 326Q800 266 760.0 226.0Q720 186 660 186Q613 186 573.0 212.5Q533 239 518 280H442Q427 239 387.0 212.5Q347 186 300 186Q240 186 200.0 226.0Q160 266 160 326Q160 361 174.0 396.5Q188 432 224.0 477.5Q260 523 322.0 584.5Q384 646 480 732ZM480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Z">
  </path></svg></span></span> <span class="c-button__label-text">Open medium modal</span></span></button> <button class=
  "c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-l-large" aria-label="Open large modal" data-component="button"><span class=
  "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M480 840 422 788Q321 697 255.0 631.0Q189 565 150.0 512.5Q111 460 95.5 416.0Q80 372 80 326Q80 232 143.0 169.0Q206 106 300 106Q352 106 399.0 128.0Q446 150 480 190Q514 150 561.0 128.0Q608 106 660 106Q754 106 817.0 169.0Q880 232 880 326Q880 372 864.5 416.0Q849 460 810.0 512.5Q771 565 705.0 631.0Q639 697 538 788ZM480 732Q576 646 638.0 584.5Q700 523 736.0 477.5Q772 432 786.0 396.5Q800 361 800 326Q800 266 760.0 226.0Q720 186 660 186Q613 186 573.0 212.5Q533 239 518 280H442Q427 239 387.0 212.5Q347 186 300 186Q240 186 200.0 226.0Q160 266 160 326Q160 361 174.0 396.5Q188 432 224.0 477.5Q260 523 322.0 584.5Q384 646 480 732ZM480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Z">
  </path></svg></span></span> <span class="c-button__label-text">Open large modal</span></span></button> <button class=
  "c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-l-panel" aria-label="Open panel modal" data-component="button"><span class=
  "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M480 840 422 788Q321 697 255.0 631.0Q189 565 150.0 512.5Q111 460 95.5 416.0Q80 372 80 326Q80 232 143.0 169.0Q206 106 300 106Q352 106 399.0 128.0Q446 150 480 190Q514 150 561.0 128.0Q608 106 660 106Q754 106 817.0 169.0Q880 232 880 326Q880 372 864.5 416.0Q849 460 810.0 512.5Q771 565 705.0 631.0Q639 697 538 788ZM480 732Q576 646 638.0 584.5Q700 523 736.0 477.5Q772 432 786.0 396.5Q800 361 800 326Q800 266 760.0 226.0Q720 186 660 186Q613 186 573.0 212.5Q533 239 518 280H442Q427 239 387.0 212.5Q347 186 300 186Q240 186 200.0 226.0Q160 266 160 326Q160 361 174.0 396.5Q188 432 224.0 477.5Q260 523 322.0 584.5Q384 646 480 732ZM480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480 459Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480.0 459.0Q480 459 480 459Z">
  </path></svg></span></span> <span class="c-button__label-text">Open panel modal</span></span></button>
</div><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--padding-3 c-modal--overlay-light" aria-labelledby="modal__label__modal-l-standard" aria-modal="true" role="dialog" id=
"modal-l-standard" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-l-standard" data-component="typography">
      Example modal with a very long title standard
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
    "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span> <span class=
    "c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    <button class="c-button c-modal__prev c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-prev="" aria-label="chevron_left" type="button" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no"
    aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M560 720 320 480 560 240 616 296 432 480 616 664Z"></path></svg></span></span></span></button> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit
    amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet
    fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet
    fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. <button class="c-button c-modal__next c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-next="" aria-label="chevron_right" type="button" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no"
    aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M504 480 320 296 376 240 616 480 376 720 320 664Z"></path></svg></span></span></span></button>
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-component="button"><span class="c-button__label"><span class=
    "c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-sm c-modal--padding-3 c-modal--border-radius-lg c-modal--overlay-light" aria-labelledby="modal__label__modal-l-small"
aria-modal="true" role="dialog" id="modal-l-small" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-l-small" data-component="typography">
      Example modal with a very long title small
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
    "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span> <span class=
    "c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
    quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna
    mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
    massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce
    dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus
    sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet
    fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-component="button"><span class="c-button__label"><span class=
    "c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-md c-modal--padding-3 c-modal--border-radius-md c-modal--overlay-light" aria-labelledby="modal__label__modal-l-medium"
aria-modal="true" role="dialog" id="modal-l-medium" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-l-medium" data-component="typography">
      Example modal with a very long title medium
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
    "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span> <span class=
    "c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
    quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna
    mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
    massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce
    dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus
    sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet
    fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-component="button"><span class="c-button__label"><span class=
    "c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-lg c-modal--padding-3 c-modal--border-radius-sm c-modal--overlay-light" aria-labelledby="modal__label__modal-l-large"
aria-modal="true" role="dialog" id="modal-l-large" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-l-large" data-component="typography">
      Example modal with a very long title large
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
    "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span> <span class=
    "c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
    quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna
    mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
    massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce
    dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus
    sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet
    fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-component="button"><span class="c-button__label"><span class=
    "c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-panel c-modal--slide-up c-modal--padding-2 c-modal--overlay-light" aria-labelledby="modal__label__modal-l-panel" aria-modal="true" role="dialog" id="modal-l-panel"
data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-l-panel" data-component="typography">
      Example modal with a very long title panel
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
    "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span> <span class=
    "c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
    quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna
    mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
    massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce
    dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus
    sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet
    fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-component="button"><span class="c-button__label"><span class=
    "c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog>

@php
    $modals = [
        'standard' => [
            'isPanel' => false,
            'overlay' => 'light',
            'navigation' => true,
        ],
        'small' => [
            'size' => 'sm',
            'borderRadius' => 'lg',
        ],
        'medium' => [
            'size' => 'md',
            'borderRadius' => 'md',
        ],
        'large' => [
            'size' => 'lg',
            'borderRadius' => 'sm',
        ],
        'panel' => [
            'isPanel' => true,
            'animation' => 'slide-up',
            'padding' => 2,
        ],
    ];
@endphp

<div style="display: grid; gap: 16px; justify-content: start;  grid-template-columns: 1fr 1fr;">
    @foreach ($modals as $key => $modal)
        @button([
            'href' => '',
            'type' => 'filled',
            'text' => 'Open ' . $key . ' modal',
            'icon' => 'favorite',
            'size' => 'md',
            'color' => 'secondary',
            'classList' => ['open-modal', 'u-margin__left--0'],
            'attributeList' => ['data-open' => 'modal-l-' . $key],
        ])
        @endbutton
    @endforeach
</div>


@foreach ($modals as $key => $modal)
    @modal(
        array_merge(
            [
                'closeButtonText' => 'Close',
                'heading' => 'Example modal with a very long title ' . $key,
                'id' => 'modal-l-' . $key
            ],
            (array) $modal
        )
    )
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        @slot('bottom')
            @button([
                'href' => '#',
                'type' => 'filled',
                'text' => 'Action',
                'size' => 'md',
                'color' => 'primary',
            ])
            @endbutton
            @button([
                'href' => '#',
                'type' => 'filled',
                'text' => 'Secondary action',
                'size' => 'md',
                'color' => 'secondary',
            ])
            @endbutton
        @endslot
    @endmodal
@endforeach

<div style="display: flex; gap: 8px;">
  <!-- image.blade.php -->
  <figure class="c-image" data-open="modal-navigation" data-large-img="https://picsum.photos/id/10/800/600" data-stepping="0" data-caption="Forest path" style="cursor: pointer; width: 150px;"
  data-component="image">
    <div class="c-image__image-wrapper">
      <img class="c-image__image" src="https://picsum.photos/id/10/400/300" alt="Forest path" loading="lazy" width="400" height="300" />
    </div>
  </figure><!-- image.blade.php -->
  <figure class="c-image" data-open="modal-navigation" data-large-img="https://picsum.photos/id/20/800/600" data-stepping="1" data-caption="Mountain lake" style="cursor: pointer; width: 150px;"
  data-component="image">
    <div class="c-image__image-wrapper">
      <img class="c-image__image" src="https://picsum.photos/id/20/400/300" alt="Mountain lake" loading="lazy" width="400" height="300" />
    </div>
  </figure><!-- image.blade.php -->
  <figure class="c-image" data-open="modal-navigation" data-large-img="https://picsum.photos/id/30/800/600" data-stepping="2" data-caption="Coastal view" style="cursor: pointer; width: 150px;"
  data-component="image">
    <div class="c-image__image-wrapper">
      <img class="c-image__image" src="https://picsum.photos/id/30/400/300" alt="Coastal view" loading="lazy" width="400" height="300" />
    </div>
  </figure>
</div><!-- modal.blade.php -->
<dialog class="c-modal c-modal--gallery c-modal--is-modal c-modal--slide-up c-modal--padding-3 c-modal--transparent c-modal--overlay-light" aria-labelledby="modal__label__modal-navigation"
aria-modal="true" role="dialog" id="modal-navigation" data-component="modal">
  <div class="c-modal__header">
    <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
    "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span> <span class=
    "c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    <button class="c-button c-modal__prev c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-prev="" aria-label="chevron_left" type="button" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no"
    aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M560 720 320 480 560 240 616 296 432 480 616 664Z"></path></svg></span></span></span></button> <!-- image.blade.php -->
    <figure class="c-image c-image--is-placeholder c-image--is-placeholder" data-component="image">
      <div class="c-image__placeholder" aria-label="">
        <!-- icon.blade.php -->
         <span class="c-icon c-icon--broken-image c-icon--material c-icon--material-broken_image c-icon--svg-material c-icon--size-xxl" role="img" data-nosnippet="" translate="no" aria-label=
        "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
        "fill:var(--icon-color, currentColor)">
        <path d=
        "M200 840Q167 840 143.5 816.5Q120 793 120 760V200Q120 167 143.5 143.5Q167 120 200 120H760Q793 120 816.5 143.5Q840 167 840 200V760Q840 793 816.5 816.5Q793 840 760 840ZM240 503 400 343 560 503 720 343 760 383V200Q760 200 760.0 200.0Q760 200 760 200H200Q200 200 200.0 200.0Q200 200 200 200V463ZM200 760H760Q760 760 760.0 760.0Q760 760 760 760V496L720 456L560 616L400 456L240 616L200 576V760Q200 760 200.0 760.0Q200 760 200 760ZM200 760Q200 760 200.0 760.0Q200 760 200 760V496V576V463V383V200Q200 200 200.0 200.0Q200 200 200 200Q200 200 200.0 200.0Q200 200 200 200V463V576V760Q200 760 200.0 760.0Q200 760 200 760Z">
        </path></svg></span>
      </div>
    </figure><button class="c-button c-modal__next c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-next="" aria-label="chevron_right" type="button" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no"
    aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M504 480 320 296 376 240 616 480 376 720 320 664Z"></path></svg></span></span></span></button>
  </div>
</dialog>

@php
    $navItems = [
        ['thumb' => 'https://picsum.photos/id/10/400/300',  'large' => 'https://picsum.photos/id/10/800/600',  'caption' => 'Forest path'],
        ['thumb' => 'https://picsum.photos/id/20/400/300',  'large' => 'https://picsum.photos/id/20/800/600',  'caption' => 'Mountain lake'],
        ['thumb' => 'https://picsum.photos/id/30/400/300',  'large' => 'https://picsum.photos/id/30/800/600',  'caption' => 'Coastal view'],
    ];
@endphp

<div style="display: flex; gap: 8px;">
    @foreach ($navItems as $i => $item)
        @image([
            'src' => $item['thumb'],
            'alt' => $item['caption'],
            'attributeList' => [
                'data-open'     => 'modal-navigation',
                'data-large-img' => $item['large'],
                'data-stepping' => $i,
                'data-caption'  => $item['caption'],
                'style'         => 'cursor: pointer; width: 150px;',
            ],
        ])
        @endimage
    @endforeach
</div>

@modal([
    'id'              => 'modal-navigation',
    'navigation'      => true,
    'transparent'     => true,
    'closeButtonText' => 'Close',
    'ariaLabels'      => (object) ['prev' => 'Previous image', 'next' => 'Next image'],
    'classList'       => ['c-modal--gallery'],
])
    @image(['src' => ''])
    @endimage
@endmodal