<script lang="ts" setup>
import AddressLocation from '#adata-ui/illustrations/address-location.vue'
import PersonWithPhone from '#adata-ui/illustrations/person-with-phone.vue'
import DocWithStamp from '#adata-ui/illustrations/doc-with-stamp.vue'
import PeopleGroup from '#adata-ui/illustrations/people-group.vue'
import CoinPercent from '#adata-ui/illustrations/coin-percent.vue'
import PhoneCheck from '#adata-ui/illustrations/phone-check.vue'
import TwoPersons from '#adata-ui/illustrations/two-persons.vue'
import CoinsStack from '#adata-ui/illustrations/coins-stack.vue'
import Calendar from '#adata-ui/illustrations/calendar.vue'
import StopHand from '#adata-ui/illustrations/stop-hand.vue'
import Hammer from '#adata-ui/illustrations/hammer.vue'
import Mail from '#adata-ui/illustrations/mail.vue'
import Chains from '#adata-ui/illustrations/chains.vue'
import Bill from '#adata-ui/illustrations/bill.vue'
import EmptyBox from '#adata-ui/illustrations/empty-box.vue'
import Info from '#adata-ui/illustrations/info.vue'
import StopSign from '#adata-ui/illustrations/stop-sign.vue'
import Person from '#adata-ui/illustrations/person.vue'
import BallWithChain from '#adata-ui/illustrations/ball-with-chain.vue'
import GraphInCoin from '#adata-ui/illustrations/graph-in-coin.vue'
</script>
<template>
  <Story title="Elements/Illustrations">
    <Variant title="Illustrations">
      <template #default>
        <div class="flex h-full w-full flex-wrap items-center gap-2">
          <address-location />
          <ball-with-chain />
          <bill />
          <calendar />
          <chains />
          <coin-percent />
          <coins-stack />
          <doc-with-stamp />
          <empty-box />
          <graph-in-coin />
          <hammer />
          <info />
          <mail />
          <people-group />
          <person />
          <person-with-phone />
          <phone-check />
          <stop-hand />
          <stop-sign />
          <two-persons />
        </div>
      </template>
    </Variant>
  </Story>
</template>
