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-uid="6a28ea5bbc174" 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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbc2be" data-component="icon">
                    </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-uid="6a28ea5bbc31c" 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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbc352" data-component="icon">
                    </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-uid="6a28ea5bbc391" 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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbc3c1" data-component="icon">
                    </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-uid="6a28ea5bbc407" 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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbc436" data-component="icon">
                    </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-uid="6a28ea5bbc46f" 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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbc49c" data-component="icon">
                    </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-uid="6a28ea5bbc58b" 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-uid="6a28ea5bbc5e4" 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-uid="6a28ea5bbc61d" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbc650" data-component="icon">
                    </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-uid="6a28ea5bbc693" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="chevron_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbc6c2" data-component="icon">
                    </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-uid="6a28ea5bbc6fe" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbc72c" data-component="icon">
                    </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-uid="6a28ea5bbc4df" 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-uid="6a28ea5bbc511" 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-uid="6a28ea5bbc7d1" 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-uid="6a28ea5bbc805" 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-uid="6a28ea5bbc837" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbc866" data-component="icon">
                    </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-uid="6a28ea5bbc76d" 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-uid="6a28ea5bbc79e" 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-uid="6a28ea5bbc907" 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-uid="6a28ea5bbc933" 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-uid="6a28ea5bbc964" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbc992" data-component="icon">
                    </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-uid="6a28ea5bbc8a6" 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-uid="6a28ea5bbc8d6" 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-uid="6a28ea5bbca30" 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-uid="6a28ea5bbca5c" 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-uid="6a28ea5bbca8c" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbcaba" data-component="icon">
                    </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-uid="6a28ea5bbc9d1" 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-uid="6a28ea5bbca00" 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-uid="6a28ea5bbcb5a" 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-uid="6a28ea5bbcb84" 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-uid="6a28ea5bbcbb4" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbcbea" data-component="icon">
                    </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-uid="6a28ea5bbcafb" 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-uid="6a28ea5bbcb2a" 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-uid="6a28ea5bbcc78" 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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbcca9" data-component="icon">
                    </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-uid="6a28ea5bbcce3" 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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbcd0f" data-component="icon">
                    </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-uid="6a28ea5bbcd47" 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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbcd72" data-component="icon">
                    </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-uid="6a28ea5bbcda8" 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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbcdd4" data-component="icon">
                    </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-uid="6a28ea5bbce09" 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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbce34" data-component="icon">
                    </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-uid="6a28ea5bbced4" 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-uid="6a28ea5bbcf01" 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-uid="6a28ea5bbcf32" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbcf5f" data-component="icon">
                    </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-uid="6a28ea5bbcf9a" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="chevron_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbcfd0" data-component="icon">
                    </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-uid="6a28ea5bbd00c" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbd039" data-component="icon">
                    </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-uid="6a28ea5bbce71" 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-uid="6a28ea5bbcea1" 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-uid="6a28ea5bbd0d8" 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-uid="6a28ea5bbd103" 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-uid="6a28ea5bbd133" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbd161" data-component="icon">
                    </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-uid="6a28ea5bbd076" 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-uid="6a28ea5bbd0a6" 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-uid="6a28ea5bbd215" 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-uid="6a28ea5bbd245" 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-uid="6a28ea5bbd27a" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbd2b2" data-component="icon">
                    </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-uid="6a28ea5bbd1a2" 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-uid="6a28ea5bbd1d1" 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-uid="6a28ea5bbd365" 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-uid="6a28ea5bbd396" 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-uid="6a28ea5bbd3d3" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbd406" data-component="icon">
                    </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-uid="6a28ea5bbd2fa" 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-uid="6a28ea5bbd32f" 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-uid="6a28ea5bbd4bf" 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-uid="6a28ea5bbd4ef" 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-uid="6a28ea5bbd524" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbd557" data-component="icon">
                    </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-uid="6a28ea5bbd44f" 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-uid="6a28ea5bbd489" 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-uid="6a28ea5bbd61c" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/10/400/300" 
    alt="Forest path"
    
></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-uid="6a28ea5bbd6ba" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/20/400/300" 
    alt="Mountain lake"
    
></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-uid="6a28ea5bbd724" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/30/400/300" 
    alt="Coastal view"
    
></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-uid="6a28ea5bbd824" 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-uid="6a28ea5bbd867" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbd898" data-component="icon">
                    </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="" type="button" aria-label="Previous image" data-uid="6a28ea5bbd8d3" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="chevron_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbd901" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        
        <!-- image.blade.php -->
    <figure class="c-image c-image--is-placeholder c-image--is-placeholder" data-uid="6a28ea5bbd793" 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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-xxl" data-material-symbol="broken_image" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a28ea5bbd7e4" data-component="icon">
                    </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="" type="button" aria-label="Next image" data-uid="6a28ea5bbd93a" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28ea5bbd967" data-component="icon">
                    </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