@tabler/core 1.1.0 → 1.1.1

package/docs/ui/components/countup.mdx

@@ -0,0 +1,165 @@
+---
+title: Countup
+summary: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
+libs: countup
+description: Display numbers dynamically with countups.
+---
+
+The countup component is used to display numbers dynamically. It is a great way to make the interface more interactive and engaging. The countup component is a simple and easy way to animate numbers in your application.
+
+To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
+
+For more advanced features of countups, click [here](https://inorganik.github.io/countUp.js/) and see what more you can do.
+
+## Basic usage
+
+To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
+
+```html
+<h1 data-countup>30000</h1>
+```
+
+The results can be seen in the example below.
+
+```html example libs="countup" centered
+<h1 data-countup>30000</h1>
+```
+
+## Duration
+
+Set the `duration` to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.
+
+```html
+<h1 data-countup='{"duration":4}'>30000</h1>
+```
+
+Look at the example below to see how the duration affects the animation.
+
+```html example libs="countup" centered vertical separated
+<h1 data-countup>30000</h1>
+<h1 data-countup='{"duration":4}'>30000</h1>
+<h1 data-countup='{"duration":6}'>30000</h1>
+```
+
+## Starting value
+
+By default the countup will start from zero. If you want to set a different start value use `startVal`.
+You can also set the start value to be greater than the final value, so that it counts down instead of up.
+
+```html
+<h1 data-countup='{"startVal":12345}'>30000</h1>
+```
+
+To see how the starting value affects the animation, look at the example below.
+
+```html example libs="countup" centered vertical separated
+<h1 data-countup='{"startVal":12345}'>30000</h1>
+<h1 data-countup='{"startVal":47655}'>30000</h1>
+```
+
+## Decimal places
+
+Set how many decimal numbers should be displayed using `decimalPlaces`. By default, the number of decimal places is set to 0.
+
+```html
+<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
+```
+
+Look at the example below to see how the number of decimal places affects the animation.
+
+```html example libs="countup" centered vertical separated height="20rem"
+<h1 data-countup>3.123</h1>
+<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
+<h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
+<h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
+```
+
+## Easing
+
+Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration. Easing can be disabled to make the animation linear.
+
+```html
+<h1 data-countup='{"useEasing": false}'>30000</h1>
+```
+
+Look at the example below to see how easing affects the animation.
+
+```html example libs="countup" centered vertical separated
+<h1 data-countup>30000</h1>
+<h1 data-countup='{"useEasing": false}'>30000</h1>
+```
+
+## Use grouping
+
+Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default, so that the number is displayed with a separator.
+
+```html
+<h1 data-countup='{"useGrouping": false}'>30000</h1>
+```
+
+Example below shows how grouping affects the animation.
+
+```html example libs="countup" centered vertical separated
+<h1 data-countup>30000</h1>
+<h1 data-countup='{"useGrouping": false}'>30000</h1>
+```
+
+## Separator
+
+You can change the default separator using `separator` and specifying the one you wish to use.
+
+```html
+<h1 data-countup='{"separator":" "}'>3000000</h1>
+```
+
+This example shows how the separator affects the animation.
+
+```html example libs="countup" centered vertical separated
+<h1 data-countup>3000000</h1>
+<h1 data-countup='{"separator":" "}'>3000000</h1>
+```
+
+## Decimal separator
+
+You can change the default decimal separator using `decimal` and specifying the one you wish to use.
+
+```html
+<h1 data-countup='{"decimal":","}'>3.12</h1>
+```
+
+Look at the example below to see how the decimal separator affects the animation.
+
+```html example libs="countup" centered vertical separated
+<h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
+<h1 data-countup='{"decimalPlaces":2,"decimal":","}'>3.12</h1>
+```
+
+## Prefix
+
+Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.
+
+```html
+<h1 data-countup='{"prefix":"$"}'>30000</h1>
+```
+
+Look at the example below to see how the prefix affects the animation.
+
+```html example libs="countup" centered vertical separated
+<h1 data-countup='{"prefix":"$"}'>30000</h1>
+<h1 data-countup='{"prefix":"€"}'>30000</h1>
+```
+
+## Suffix
+
+Set the countup suffix using `suffix` and specifying the suffix you want to add, for instance a percentage symbol.
+
+```html
+<h1 data-countup='{"suffix":"%"}'>300</h1>
+```
+
+Look at the example below to see how the suffix affects the animation.
+
+```html example libs="countup" centered vertical separated
+<h1 data-countup='{"suffix":"%"}'>300</h1>
+<h1 data-countup='{"suffix":"‰"}'>300</h1>
+```

package/docs/ui/components/datagrid.mdx

@@ -0,0 +1,120 @@
+---
+title: Data grid
+summary: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
+description: Detailed product information in grids.
+---
+
+```html example vcentered height="460px"
+<div class="datagrid">
+  <div class="datagrid-item">
+    <div class="datagrid-title">Registrar</div>
+    <div class="datagrid-content">Third Party</div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Nameservers</div>
+    <div class="datagrid-content">Third Party</div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Port number</div>
+    <div class="datagrid-content">3306</div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Expiration date</div>
+    <div class="datagrid-content">–</div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Creator</div>
+    <div class="datagrid-content">
+      <div class="d-flex align-items-center">
+        <span
+          class="avatar avatar-xs me-2 rounded"
+          style="background-image: url(/samples/avatars/027m.jpg)"
+        ></span>
+        Paweł Kuna
+      </div>
+    </div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Age</div>
+    <div class="datagrid-content">15 days</div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Edge network</div>
+    <div class="datagrid-content">
+      <span class="status status-green"> Active </span>
+    </div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Avatars list</div>
+    <div class="datagrid-content">
+      <div class="avatar-list avatar-list-stacked">
+        <span
+          class="avatar avatar-xs rounded"
+          style="background-image: url(/samples/avatars/029f.jpg)"
+        ></span>
+        <span class="avatar avatar-xs rounded">JL</span>
+        <span
+          class="avatar avatar-xs rounded"
+          style="background-image: url(/samples/avatars/015f.jpg)"
+        ></span>
+        <span
+          class="avatar avatar-xs rounded"
+          style="background-image: url(/samples/avatars/004m.jpg)"
+        ></span>
+        <span
+          class="avatar avatar-xs rounded"
+          style="background-image: url(/samples/avatars/037m.jpg)"
+        ></span>
+        <span class="avatar avatar-xs rounded">+3</span>
+      </div>
+    </div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Checkbox</div>
+    <div class="datagrid-content">
+      <label class="form-check">
+        <input class="form-check-input" type="checkbox" checked />
+        <span class="form-check-label">Click me</span>
+      </label>
+    </div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Icon</div>
+    <div class="datagrid-content">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon text-green"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M5 12l5 5l10 -10" />
+      </svg>
+      Checked
+    </div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Form control</div>
+    <div class="datagrid-content">
+      <input type="text" class="form-control form-control-flush" placeholder="Input placeholder" />
+    </div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Longer description</div>
+    <div class="datagrid-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
+  </div>
+</div>
+```
+
+You can adjust the datagrid to your needs by setting the values of variables:
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `--tblr-datagrid-item-width` | Width of the datagrid item | `15rem` |
+| `--tblr-datagrid-padding` | Gap between the datagrid items | `1.5rem` |

package/docs/ui/components/divider.mdx

@@ -0,0 +1,68 @@
+---
+title: Divider
+summary: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
+description: Separate content with clear dividers.
+---
+
+## Default markup
+
+Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.
+
+```html example
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+</p>
+<div class="hr-text">See also</div>
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
+  rerum, saepe sed, sit!
+</p>
+```
+
+## Text position
+
+You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.
+
+```html example height="380px"
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+</p>
+<div class="hr-text hr-text-start">Start divider</div>
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
+  rerum, saepe sed, sit!
+</p>
+<div class="hr-text">Centered divider</div>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+</p>
+<div class="hr-text hr-text-end">End divider</div>
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
+  rerum, saepe sed, sit!
+</p>
+```
+
+## Divider color
+
+Customize the color of dividers to make them go well with your design. Click [here](/docs/ui/base/colors) to see the list of available colors.
+
+```html example height="380px"
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+</p>
+<div class="hr-text text-green">Green divider</div>
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
+  rerum, saepe sed, sit!
+</p>
+<div class="hr-text text-red">Red divider</div>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+</p>
+<div class="hr-text text-primary">Primary divider</div>
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
+  rerum, saepe sed, sit!
+</p>
+```

package/docs/ui/components/dropdowns.mdx

@@ -0,0 +1,302 @@
+---
+title: Dropdowns
+summary: Use dropdowns to display lists of options or include more items in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
+bootstrapLink: components/dropdowns
+description: Organize options with dropdown menus.
+---
+
+## Default dropdown
+
+With small markup changes, you can turn any `.btn` into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.
+
+```html example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Third action</a>
+  </div>
+</div>
+```
+
+## Dropdown divider
+
+Use dropdown dividers to separate groups of dropdown items for greater clarity.
+
+```html example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#"> Action </a>
+    <a class="dropdown-item" href="#"> Another action </a>
+    <div class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
+</div>
+```
+
+## Active state
+
+Make a dropdown item look active, so that it highlights when a user hovers over a given option.
+
+```html example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#"> Action </a>
+    <a class="dropdown-item" href="#"> Another action </a>
+    <a class="dropdown-item active" href="#">Active action</a>
+  </div>
+</div>
+```
+
+## Disabled state
+
+Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.
+
+```html example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#"> Action </a>
+    <a class="dropdown-item" href="#"> Another action </a>
+    <a class="dropdown-item disabled" href="#">Disabled action</a>
+  </div>
+</div>
+```
+
+## Dropdown header
+
+Add a dropdown header to group dropdown items into sections and name them accordingly.
+
+```html example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <span class="dropdown-header">Dropdown header</span>
+    <a class="dropdown-item" href="#"> Action </a>
+    <a class="dropdown-item" href="#"> Another action </a>
+  </div>
+</div>
+```
+
+## Dropdown with icons
+
+Use icons in your dropdowns to add more visual content and make the options easy to identify for users.
+
+```html example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <span class="dropdown-header">Dropdown header</span>
+    <a class="dropdown-item" href="#">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon dropdown-item-icon icon-tabler icon-tabler-settings"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path
+          d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
+        ></path>
+        <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+      </svg>
+      Action
+    </a>
+    <a class="dropdown-item" href="#">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon dropdown-item-icon icon-tabler icon-tabler-pencil"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
+        <path d="M13.5 6.5l4 4"></path>
+      </svg>
+      Another action
+    </a>
+  </div>
+</div>
+```
+
+## Dropdown with arrow
+
+Add an arrow that points at the dropdown button.
+
+```html example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu dropdown-menu-arrow">
+    <a class="dropdown-item" href="#"> Action </a>
+    <a class="dropdown-item" href="#"> Another action </a>
+  </div>
+</div>
+```
+
+## Dropdown with badge
+
+Add a badge to your dropdown items to show additional information related to an item or distinguish it from other elements.
+
+```html example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">
+      Action
+      <span class="badge bg-primary ms-auto">12</span>
+    </a>
+    <a class="dropdown-item" href="#">
+      Another action
+      <span class="badge bg-green ms-auto"></span>
+    </a>
+  </div>
+</div>
+```
+
+## Dropdown with checkboxes
+
+Use dropdowns with checkboxes to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.
+
+```html example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <label class="dropdown-item">
+      <input class="form-check-input m-0 me-2" type="radio" /> Option 1
+    </label>
+    <label class="dropdown-item">
+      <input class="form-check-input m-0 me-2" type="radio" /> Option 2
+    </label>
+    <label class="dropdown-item">
+      <input class="form-check-input m-0 me-2" type="radio" /> Option 3
+    </label>
+  </div>
+</div>
+```
+
+## Dark dropdown
+
+Make your dropdown suit the dark mode of your website or software.
+
+```html example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu dropdown-menu-arrow bg-dark text-white">
+    <span class="dropdown-header">Dropdown header</span>
+    <a class="dropdown-item" href="#">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon dropdown-item-icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path
+          d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
+        />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+      Action
+    </a>
+    <a class="dropdown-item" href="#">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon dropdown-item-icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
+        <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
+        <path d="M16 5l3 3" />
+      </svg>
+      Another action
+    </a>
+  </div>
+</div>
+```
+
+## Dropdown with card content
+
+Use a dropdown with card content to make it easy for users to get more information on a given subject and avoid ovewhelming them with too much content at once.
+
+```html example height="35rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu dropdown-menu-card" style="max-width: 16rem">
+    <div class="card d-flex flex-column">
+      <a href="#">
+        <img
+          class="card-img-top"
+          src="/samples/photos/friends-at-a-restaurant-drinking-wine.jpg"
+          alt="How do you know she is a witch?"
+        />
+      </a>
+      <div class="card-body d-flex flex-column">
+        <h3 class="card-title">
+          <a href="#">How do you know she is a witch?</a>
+        </h3>
+        <div class="text-secondary">
+          Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a
+          wart. You ...
+        </div>
+        <div class="d-flex align-items-center pt-4 mt-auto">
+          <span class="avatar" style="background-image: url(/samples/avatars/013m.jpg)"></span>
+          <div class="ms-3">
+            <a href="#" class="text-body">Maryjo Lebarree</a>
+            <div class="text-secondary">3 days ago</div>
+          </div>
+          <div class="ms-auto">
+            <a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="icon"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path
+                  d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"
+                />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```