const basicNotification='\n<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">\n    <div class="toast-header">\n        <img class="me-8" src="..." alt="...">\n        <strong class="me-auto">Yoda</strong>\n        <small>11 mins ago</small>\n        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n    </div>\n\n    <div class="toast-body">\n        Hello, world! This is a toast message.\n    </div>\n</div>\n\n',live='\n<button type="button" class="btn btn-primary toast-btn" data-id="liveToast" id="liveToastBtn">Show live toast</button>\n\n<div class="position-fixed bottom-0 end-0 p-16" style="z-index: 99">\n    <div data-id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">\n        <div class="toast-header">\n            <img class="me-8" src="..." alt="...">\n            <strong class="me-auto">Yoda</strong>\n            <small>11 mins ago</small>\n            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n        </div>\n\n        <div class="toast-body">\n            Hello, world! This is a toast message.\n        </div>\n    </div>\n</div>\n\n',translucent='\n<div class="hp-bg-black-100 hp-bg-dark-0 rounded p-32">\n    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">\n        <div class="toast-header">\n            <img class="me-8" src="..." alt="...">\n            <strong class="me-auto">Yoda</strong>\n            <small class="text-muted">11 mins ago</small>\n            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n        </div>\n\n        <div class="toast-body">\n            Hello, world! This is a toast message.\n        </div>\n    </div>\n</div>\n\n',stacking='\n<button type="button" class="btn btn-primary toast-btn" data-id="stacking-1">Toast 1</button>\n\n<button type="button" class="btn btn-primary toast-btn" data-id="stacking-2">Toast 2</button>\n\n<div class="position-fixed top-0 end-0 p-16" style="z-index: 99">\n    <div class="toast-container">\n        <div data-id="stacking-1" class="toast fade hide" role="alert" aria-live="assertive" aria-atomic="true">\n            <div class="toast-header">\n                <img class="me-8" src="..." alt="...">\n                <strong class="me-auto">Yoda</strong>\n                <small class="text-muted">just now</small>\n                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n            </div>\n\n            <div class="toast-body">\n                See? Just like this.\n            </div>\n        </div>\n\n        <div data-id="stacking-2" class="toast fade hide" role="alert" aria-live="assertive" aria-atomic="true">\n            <div class="toast-header">\n                <img class="me-8" src="..." alt="...">\n                <strong class="me-auto">Yoda</strong>\n                <small class="text-muted">2 seconds ago</small>\n                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n            </div>\n\n            <div class="toast-body">\n                Heads up, toasts will stack automatically\n            </div>\n        </div>\n    </div>\n</div>\n\n';$("pre code").each((function(){"notification"===$(this).data("component")&&($(this).text($.trim($(this).data("code"))),"basic"===$(this).data("code")&&$(this).text(basicNotification),"live"===$(this).data("code")&&$(this).text(live),"translucent"===$(this).data("code")&&$(this).text(translucent),"stacking"===$(this).data("code")&&$(this).text(stacking))}));