import{_ as t}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{y as r,z as n,Q as s}from"./runtime-dom.esm-bundler-COsyWSZ4.js";const d={},a={id:"badges",class:"scroll-mt-40"};function l(x,e){return n(),r("div",a,e[0]||(e[0]=[s('<h4 class="mb-4 text-xl text-default-900">Badges</h4><div class="space-y-4"><div class="rounded-lg border border-default-200 bg-white dark:bg-default-50"><div class="border-b border-default-200 px-6 py-3"><h4 class="text-lg text-default-900">Default Badges</h4></div><div class="p-6"><div class="flex flex-wrap items-center gap-2"><span class="inline-flex items-center gap-x-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-white">Primary</span><span class="inline-flex items-center gap-x-1.5 rounded-md bg-gray-600 px-3 py-1.5 text-xs font-medium text-white">Gray</span><span class="inline-flex items-center gap-x-1.5 rounded-md bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white">Emerald</span><span class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-3 py-1.5 text-xs font-medium text-white">Red</span><span class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white">Blue</span><span class="inline-flex items-center gap-x-1.5 rounded-md bg-yellow-600 px-3 py-1.5 text-xs font-medium text-white">Yellow</span><span class="inline-flex items-center gap-x-1.5 rounded-md bg-sky-600 px-3 py-1.5 text-xs font-medium text-white">Sky</span><span class="inline-flex items-center gap-x-1.5 rounded-md bg-cyan-600 px-3 py-1.5 text-xs font-medium text-white">Cyan</span><span class="inline-flex items-center gap-x-1.5 rounded-md bg-purple-600 px-3 py-1.5 text-xs font-medium text-white">Purple</span><span class="inline-flex items-center gap-x-1.5 rounded-md bg-gray-800 px-3 py-1.5 text-xs font-medium text-white">Dark</span><span class="inline-flex items-center gap-x-1.5 rounded-md bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-900">Light</span></div></div></div><div class="rounded-lg border border-default-200 bg-white dark:bg-default-50"><div class="border-b border-default-200 px-6 py-3"><h4 class="text-lg text-default-900">Rounded Badges</h4></div><div class="p-6"><div class="flex flex-wrap items-center gap-2"><span class="inline-flex items-center gap-x-1.5 rounded-full bg-primary px-3 py-1.5 text-xs font-medium text-white">Primary</span><span class="inline-flex items-center gap-x-1.5 rounded-full bg-gray-600 px-3 py-1.5 text-xs font-medium text-white">Gray</span><span class="inline-flex items-center gap-x-1.5 rounded-full bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white">Emerald</span><span class="inline-flex items-center gap-x-1.5 rounded-full bg-red-600 px-3 py-1.5 text-xs font-medium text-white">Red</span><span class="inline-flex items-center gap-x-1.5 rounded-full bg-blue-600 px-3 py-1.5 text-xs font-medium text-white">Blue</span><span class="inline-flex items-center gap-x-1.5 rounded-full bg-yellow-600 px-3 py-1.5 text-xs font-medium text-white">Yellow</span><span class="inline-flex items-center gap-x-1.5 rounded-full bg-sky-600 px-3 py-1.5 text-xs font-medium text-white">Sky</span><span class="inline-flex items-center gap-x-1.5 rounded-full bg-cyan-600 px-3 py-1.5 text-xs font-medium text-white">Cyan</span><span class="inline-flex items-center gap-x-1.5 rounded-full bg-purple-600 px-3 py-1.5 text-xs font-medium text-white">Purple</span><span class="inline-flex items-center gap-x-1.5 rounded-full bg-gray-800 px-3 py-1.5 text-xs font-medium text-white">Dark</span><span class="inline-flex items-center gap-x-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-900">Light</span></div></div></div><div class="rounded-lg border border-default-200 bg-white dark:bg-default-50"><div class="border-b border-default-200 px-6 py-3"><h4 class="text-lg text-default-900">Outline Badges</h4></div><div class="p-6"><div class="flex flex-wrap items-center gap-2"><span class="inline-flex items-center gap-x-1.5 rounded-md border border-primary px-3 py-1.5 text-xs font-medium text-primary">Primary</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-gray-600 px-3 py-1.5 text-xs font-medium text-gray-600">Gray</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-emerald-600 px-3 py-1.5 text-xs font-medium text-emerald-600">Emerald</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-red-600 px-3 py-1.5 text-xs font-medium text-red-600">Red</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-blue-600 px-3 py-1.5 text-xs font-medium text-blue-600">Blue</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-yellow-600 px-3 py-1.5 text-xs font-medium text-yellow-600">Yellow</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-sky-600 px-3 py-1.5 text-xs font-medium text-sky-600">Sky</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-cyan-600 px-3 py-1.5 text-xs font-medium text-cyan-600">Cyan</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-purple-600 px-3 py-1.5 text-xs font-medium text-purple-600">Purple</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-gray-800 px-3 py-1.5 text-xs font-medium text-gray-800">Dark</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-gray-100 px-3 py-1.5 text-xs font-medium text-gray-100">Light</span></div></div></div><div class="rounded-lg border border-default-200 bg-white dark:bg-default-50"><div class="border-b border-default-200 px-6 py-3"><h4 class="text-lg text-default-900">Outline Rounded Badges</h4></div><div class="p-6"><div class="flex flex-wrap items-center gap-2"><span class="inline-flex items-center gap-x-1.5 rounded-full border border-primary px-3 py-1.5 text-xs font-medium text-primary">Primary</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-gray-600 px-3 py-1.5 text-xs font-medium text-gray-600">Gray</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-emerald-600 px-3 py-1.5 text-xs font-medium text-emerald-600">Emerald</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-red-600 px-3 py-1.5 text-xs font-medium text-red-600">Red</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-blue-600 px-3 py-1.5 text-xs font-medium text-blue-600">Blue</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-yellow-600 px-3 py-1.5 text-xs font-medium text-yellow-600">Yellow</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-sky-600 px-3 py-1.5 text-xs font-medium text-sky-600">Sky</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-cyan-600 px-3 py-1.5 text-xs font-medium text-cyan-600">Cyan</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-purple-600 px-3 py-1.5 text-xs font-medium text-purple-600">Purple</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-gray-800 px-3 py-1.5 text-xs font-medium text-gray-800">Dark</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-gray-100 px-3 py-1.5 text-xs font-medium text-gray-100">Light</span></div></div></div><div class="rounded-lg border border-default-200 bg-white dark:bg-default-50"><div class="border-b border-default-200 px-6 py-3"><h4 class="text-lg text-default-900">Soft Badges</h4></div><div class="p-6"><div class="flex flex-wrap items-center gap-2"><span class="inline-flex items-center gap-x-1.5 rounded-md border border-primary/20 bg-primary/10 px-3 py-1.5 text-xs font-medium text-primary">Primary</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-gray-600/20 bg-gray-600/10 px-3 py-1.5 text-xs font-medium text-gray-600">Gray</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-emerald-600/20 bg-emerald-600/10 px-3 py-1.5 text-xs font-medium text-emerald-600">Emerald</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-red-600/20 bg-red-600/10 px-3 py-1.5 text-xs font-medium text-red-600">Red</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-blue-600/20 bg-blue-600/10 px-3 py-1.5 text-xs font-medium text-blue-600">Blue</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-yellow-600/20 bg-yellow-600/10 px-3 py-1.5 text-xs font-medium text-yellow-600">Yellow</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-sky-600/20 bg-sky-600/10 px-3 py-1.5 text-xs font-medium text-sky-600">Sky</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-cyan-600/20 bg-cyan-600/10 px-3 py-1.5 text-xs font-medium text-cyan-600">Cyan</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-purple-600/20 bg-purple-600/10 px-3 py-1.5 text-xs font-medium text-purple-600">Purple</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-gray-800/20 bg-gray-800/10 px-3 py-1.5 text-xs font-medium text-gray-800">Dark</span><span class="inline-flex items-center gap-x-1.5 rounded-md border border-gray-100/20 bg-gray-100/10 px-3 py-1.5 text-xs font-medium text-gray-100">Light</span></div></div></div><div class="rounded-lg border border-default-200 bg-white dark:bg-default-50"><div class="border-b border-default-200 px-6 py-3"><h4 class="text-lg text-default-900">Soft Rounded Badges</h4></div><div class="p-6"><div class="flex flex-wrap items-center gap-2"><span class="inline-flex items-center gap-x-1.5 rounded-full border border-primary/20 bg-primary/10 px-3 py-1.5 text-xs font-medium text-primary">Primary</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-gray-600/20 bg-gray-600/10 px-3 py-1.5 text-xs font-medium text-gray-600">Gray</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-emerald-600/20 bg-emerald-600/10 px-3 py-1.5 text-xs font-medium text-emerald-600">Emerald</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-red-600/20 bg-red-600/10 px-3 py-1.5 text-xs font-medium text-red-600">Red</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-blue-600/20 bg-blue-600/10 px-3 py-1.5 text-xs font-medium text-blue-600">Blue</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-yellow-600/20 bg-yellow-600/10 px-3 py-1.5 text-xs font-medium text-yellow-600">Yellow</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-sky-600/20 bg-sky-600/10 px-3 py-1.5 text-xs font-medium text-sky-600">Sky</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-cyan-600/20 bg-cyan-600/10 px-3 py-1.5 text-xs font-medium text-cyan-600">Cyan</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-purple-600/20 bg-purple-600/10 px-3 py-1.5 text-xs font-medium text-purple-600">Purple</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-gray-800/20 bg-gray-800/10 px-3 py-1.5 text-xs font-medium text-gray-800">Dark</span><span class="inline-flex items-center gap-x-1.5 rounded-full border border-gray-100/20 bg-gray-100/10 px-3 py-1.5 text-xs font-medium text-gray-100">Light</span></div></div></div></div>',2)]))}const o=t(d,[["render",l]]);export{o as default};