Dividers

<div class="card preset-filled-surface-100-900 w-full max-w-md p-4 space-y-4 text-center">
	<p class="opacity-60">Above the divider.</p>
	<!-- - -->
	<hr class="hr" />
	<!-- - -->
	<p class="opacity-60">Below the divider.</p>
</div>

<div class="card preset-filled-surface-100-900 grid grid-cols-[1fr_auto_1fr] gap-4 w-full max-w-md p-4 text-center">
	<p class="opacity-60">Left Side</p>
	<!-- - -->
	<span class="vr"></span>
	<!-- - -->
	<p class="opacity-60">Right Side</p>
</div>

<div class="w-full grid grid-cols-1 gap-4">
	<p>Default</p>
	<hr class="hr" />

	<p>border-t-2</p>
	<hr class="hr border-t-2" />

	<p>border-t-4</p>
	<hr class="hr border-t-4" />

	<p>border-t-8</p>
	<hr class="hr border-t-8" />
</div>

<div class="w-full grid grid-cols-1 gap-4">
	<p>border-solid</p>
	<hr class="hr border-solid" />

	<p>border-dashed</p>
	<hr class="hr border-dashed" />

	<p>border-dotted</p>
	<hr class="hr border-dotted" />

	<p>border-double</p>
	<hr class="hr border-4 border-double" />
</div>

<div class="w-full grid grid-cols-1 gap-4">
	<p>border-primary-500</p>
	<hr class="hr border-primary-500" />

	<p>border-secondary-500</p>
	<hr class="hr border-secondary-500" />

	<p>border-tertiary-500</p>
	<hr class="hr border-tertiary-500" />

	<p>border-success-500</p>
	<hr class="hr border-success-500" />

	<p>border-warning-500</p>
	<hr class="hr border-warning-500" />

	<p>border-error-500</p>
	<hr class="hr border-error-500" />

	<p>border-surface-950-50</p>
	<hr class="hr border-surface-950-50" />
</div>