<h1>Libraries</h1>

<pre class="prismjs">
<code>
{ { attach_library('ui_patterns/libraries.bs_forms') } }
{ { attach_library('ui_patterns/form-form.form_lib') } }
</code>
</pre>

<pre class="prismjs">
<code class="language-yml">
libraries:
  namespace: "Protons/TM - Libraries"
  use: "@protons/libraries/libraries.twig"
  label: Libraries
  description: Libraries such as Bootstrap, Popper and other

  libraries:
    - bs_popper:
        js:
          ../behaviors/bs_popper.js: {defer: true, async: true}
    - bs_badge:
        js:
          ../behaviors/bs_badge.js: {defer: true, async: true}
    - bs_card:
        css:
          component:
            ../styles/bs_card.css: {weight: 1, media: 'screen, speech'}
    - bs_collapse:
        js:
          ../behaviors/bs_collapse.js: {defer: true, async: true}
    - bs_carousel:
        js:
          ../behaviors/bs_carousel.js: {defer: true, async: true}
        css:
          component:
            ../styles/bs_carousel.css: {weight: 1, media: 'screen, speech'}
    - bs_dropdown:
        js:
          ../behaviors/bs_dropdown.js: {defer: true, async: true}
        css:
          component:
            ../styles/bs_dropdown.css: {weight: 1, media: 'screen, speech'}
    - bs_modal:
        js:
          ../behaviors/bs_modal.js: {defer: true, async: true}
        css:
          component:
            ../styles/bs_close.css: {weight: 1, media: 'screen, speech'}
            ../styles/bs_modal.css: {weight: 1, media: 'screen, speech'}
    - bs_tab:
        js:
          ../behaviors/bs_tab.js: {defer: true, async: true}
    - bs_tooltip:
        js:
          ../behaviors/bs_popper.js: {defer: true, async: true}
          ../behaviors/bs_tooltip.js: {defer: true, async: true}
        css:
          component:
            ../styles/bs_tooltip.css: {weight: 1, media: 'screen, speech'}
    - bs_popover:
        js:
          ../behaviors/bs_popper.js: {defer: true, async: true}
          ../behaviors/bs_popover.js: {defer: true, async: true}
        css:
          component:
            ../styles/bs_popover.css: {weight: 1, media: 'screen, speech'}
    - bs_progress:
        css:
          component:
            ../styles/bs_progress.css: {weight: 1, media: 'screen, speech'}
    - bs_nav:
        css:
          component:
            ../styles/bs_nav.css: {weight: 1, media: 'screen, speech'}
    - bs_alert:
        css:
          component:
            ../styles/bs_alert.css: {weight: 1, media: 'screen, speech'}
    - bs_buttons:
        css:
          component:
            ../styles/bs_buttons.css: {weight: 1, media: 'screen, speech'}
    - bs_forms:
        css:
          component:
            ../styles/bs_buttons.css: {weight: 1, media: 'screen, speech'}
            ../styles/bs_forms.css: {weight: 1, media: 'screen, speech'}
    - bs_spinners:
        css:
          component:
            ../styles/bs_spinners.css: {weight: 1, media: 'screen, speech'}
    - bs_accordion:
        css:
          component:
            ../styles/bs_accordion.css: {weight: 1, media: 'screen, speech'}
        js:
          ../behaviors/bs_collapse.js: {defer: true, async: true}
    - bs_breadcrumb:
        css:
          component:
            ../styles/bs_breadcrumb.css: {weight: 1, media: 'screen, speech'}
    - bs_pagination:
        css:
          component:
            ../styles/bs_pagination.css: {weight: 1, media: 'screen, speech'}
    - bs_offcanvas:
        css:
          component:
            ../styles/bs_close.css: {weight: 1, media: 'screen, speech'}
            ../styles/bs_offcanvas.css: {weight: 1, media: 'screen, speech'}
        js:
          ../behaviors/bs_offcanvas.js: {defer: true, async: true}
    - vendor_timeago:
        js:
          ../vendor/timeago.js: {defer: true, async: true}

</code>
</pre>
