webcake-ui-kit 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/accordion-item/AccordionItem.vue

@@ -26,7 +26,7 @@
       </span>
       <span :class="['ui-accordion-item__icon', isOpen && 'ui-accordion-item__icon--open']">
         <slot name="icon">
-          <ChevronDownIcon :size="16" />
+          <WkiChevronDown :size="16" />
         </slot>
       </span>
     </button>
@@ -37,13 +37,13 @@
 </template>
 
 <script>
-import ChevronDownIcon from '../../icons/ChevronDownIcon.vue'
+import WkiChevronDown from '../../icons/ChevronDown.vue'
 
 let uidCounter = 0
 
 export default {
   name: 'AccordionItem',
-  components: { ChevronDownIcon },
+  components: { WkiChevronDown },
   inject: {
     accordion: { default: null }
   },

package/src/components/alert-dialog/AlertDialog.vue

@@ -1,5 +1,6 @@
 <template>
   <Dialog
+    v-bind="$attrs"
     :open="isOpen"
     :show-header="false"
     :footer="true"

package/src/components/breadcrumb/Breadcrumb.vue

@@ -5,8 +5,8 @@
         <li v-for="(item, index) in items" :key="index" class="ui-breadcrumb__row">
           <span v-if="index > 0" class="ui-breadcrumb__separator" aria-hidden="true">
             <slot name="separator" :type="separator">
-              <SlashIcon v-if="separator === 'slash'" :size="16" />
-              <ChevronRightIcon v-else :size="16" />
+              <WkiSlash v-if="separator === 'slash'" :size="16" />
+              <WkiChevronRight v-else :size="16" />
             </slot>
           </span>
           <component
@@ -30,14 +30,14 @@
 </template>
 
 <script>
-import SlashIcon from '../../icons/SlashIcon.vue'
-import ChevronRightIcon from '../../icons/ChevronRightIcon.vue'
+import WkiSlash from '../../icons/Slash.vue'
+import WkiChevronRight from '../../icons/ChevronRight.vue'
 
 export default {
   name: 'Breadcrumb',
   components: {
-    SlashIcon,
-    ChevronRightIcon
+    WkiSlash,
+    WkiChevronRight
   },
   props: {
     items: {

package/src/components/checkbox/Checkbox.vue

@@ -10,17 +10,17 @@
       @change="onChange"
     />
     <span class="ui-checkbox__box" aria-hidden="true">
-      <CheckIcon v-if="isChecked" :size="16" />
+      <WkiCheck v-if="isChecked" :size="16" />
     </span>
   </span>
 </template>
 
 <script>
-import CheckIcon from '../../icons/CheckIcon.vue'
+import WkiCheck from '../../icons/Check.vue'
 
 export default {
   name: 'Checkbox',
-  components: { CheckIcon },
+  components: { WkiCheck },
   inheritAttrs: false,
   model: { prop: 'checked', event: 'change' },
   props: {

package/src/components/dialog/Dialog.vue

@@ -40,8 +40,8 @@
                     :aria-label="minimized ? 'Restore' : 'Minimize'"
                     @click="toggleMinimize"
                   >
-                    <MinusIcon v-if="!minimized" />
-                    <UnfoldVerticalIcon v-else />
+                    <WkiMinus v-if="!minimized" />
+                    <WkiUnfoldVertical v-else />
                   </button>
                   <button
                     v-if="fullscreen"
@@ -50,8 +50,8 @@
                     :aria-label="isFullscreen ? 'Exit fullscreen' : 'Fullscreen'"
                     @click="toggleFullscreen"
                   >
-                    <ExpandIcon v-if="!isFullscreen" />
-                    <ShrinkIcon v-else />
+                    <WkiExpand v-if="!isFullscreen" />
+                    <WkiShrink v-else />
                   </button>
                   <button
                     v-if="closable"
@@ -60,7 +60,7 @@
                     aria-label="Close"
                     @click="handleCancel"
                   >
-                    <XIcon />
+                    <WkiX />
                   </button>
                 </div>
               </div>
@@ -95,15 +95,15 @@
 <script>
 import { acquire, release } from '../../floating/portal-root.js'
 import Button from '../button/Button.vue'
-import MinusIcon from '../../icons/MinusIcon.vue'
-import UnfoldVerticalIcon from '../../icons/UnfoldVerticalIcon.vue'
-import ExpandIcon from '../../icons/ExpandIcon.vue'
-import ShrinkIcon from '../../icons/ShrinkIcon.vue'
-import XIcon from '../../icons/XIcon.vue'
+import WkiMinus from '../../icons/Minus.vue'
+import WkiUnfoldVertical from '../../icons/UnfoldVertical.vue'
+import WkiExpand from '../../icons/Expand.vue'
+import WkiShrink from '../../icons/Shrink.vue'
+import WkiX from '../../icons/X.vue'
 
 export default {
   name: 'Dialog',
-  components: { Button, MinusIcon, UnfoldVerticalIcon, ExpandIcon, ShrinkIcon, XIcon },
+  components: { Button, WkiMinus, WkiUnfoldVertical, WkiExpand, WkiShrink, WkiX },
   model: { prop: 'open', event: 'change' },
   props: {
     open: { type: Boolean, default: false },

package/src/components/dropdown/DropdownMenuItems.vue

@@ -7,8 +7,13 @@
       <!-- Group: non-clickable label + flat children -->
       <div v-else-if="item._type === 'group'" class="ui-dropdown-items__group">
         <div class="ui-dropdown-items__group-label" :title="item.title || undefined">
-          <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" class="ui-dropdown-items__icon" />
-          <span>{{ item.label }}</span>
+          <component
+            :is="item.icon"
+            v-if="item.icon && isComponent(item.icon)"
+            class="ui-dropdown-items__icon"
+            :color="item.colorIcon"
+          />
+          <span :style="item.color ? { color: item.color } : undefined">{{ item.label }}</span>
         </div>
         <div
           v-for="child in item.children || []"
@@ -21,8 +26,15 @@
           :title="child.title || undefined"
           @click="onItemClick(child)"
         >
-          <component :is="child.icon" v-if="child.icon && isComponent(child.icon)" class="ui-dropdown-items__icon" />
-          <span class="ui-dropdown-items__label">{{ child.label }}</span>
+          <component
+            :is="child.icon"
+            v-if="child.icon && isComponent(child.icon)"
+            class="ui-dropdown-items__icon"
+            :color="item.colorIcon"
+          />
+          <span class="ui-dropdown-items__label" :style="child.color ? { color: child.color } : undefined">{{
+            child.label
+          }}</span>
           <span v-if="child.extra" class="ui-dropdown-items__extra">{{ child.extra }}</span>
         </div>
       </div>
@@ -37,8 +49,15 @@
           }"
           :title="item.title || undefined"
         >
-          <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" class="ui-dropdown-items__icon" />
-          <span class="ui-dropdown-items__label">{{ item.label }}</span>
+          <component
+            :is="item.icon"
+            v-if="item.icon && isComponent(item.icon)"
+            class="ui-dropdown-items__icon"
+            :color="item.colorIcon"
+          />
+          <span class="ui-dropdown-items__label" :style="item.color ? { color: item.color } : undefined">{{
+            item.label
+          }}</span>
         </div>
         <div
           v-for="child in item.children || []"
@@ -51,8 +70,15 @@
           :title="child.title || undefined"
           @click="onItemClick(child, item)"
         >
-          <component :is="child.icon" v-if="child.icon && isComponent(child.icon)" class="ui-dropdown-items__icon" />
-          <span class="ui-dropdown-items__label">{{ child.label }}</span>
+          <component
+            :is="child.icon"
+            v-if="child.icon && isComponent(child.icon)"
+            class="ui-dropdown-items__icon"
+            :color="item.colorIcon"
+          />
+          <span class="ui-dropdown-items__label" :style="child.color ? { color: child.color } : undefined">{{
+            child.label
+          }}</span>
           <span v-if="child.extra" class="ui-dropdown-items__extra">{{ child.extra }}</span>
         </div>
       </div>
@@ -68,8 +94,15 @@
         :title="item.title || undefined"
         @click="onItemClick(item)"
       >
-        <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" class="ui-dropdown-items__icon" />
-        <span class="ui-dropdown-items__label">{{ item.label }}</span>
+        <component
+          :is="item.icon"
+          v-if="item.icon && isComponent(item.icon)"
+          class="ui-dropdown-items__icon"
+          :color="item.colorIcon"
+        />
+        <span class="ui-dropdown-items__label" :style="item.color ? { color: item.color } : undefined">{{
+          item.label
+        }}</span>
         <span v-if="item.extra" class="ui-dropdown-items__extra">{{ item.extra }}</span>
       </div>
     </div>

package/src/components/pagination/Pagination.vue

@@ -2,7 +2,7 @@
   <nav class="ui-pagination" role="navigation" :aria-label="ariaLabel" :class="{ 'ui-pagination--disabled': disabled }">
     <Button variant="ghost" :disabled="isPrevDisabled" @click="goPrev" :label="prevLabel || ''">
       <template v-if="showIcon" #icon-left>
-        <ChevronLeftIcon />
+        <WkiChevronLeft />
       </template>
     </Button>
 
@@ -24,14 +24,14 @@
         @click="onEllipsisClick(item)"
       >
         <template #icon>
-          <EllipsisIcon />
+          <WkiEllipsis />
         </template>
       </Button>
     </template>
 
     <Button variant="ghost" :disabled="isNextDisabled" @click="goNext" :label="nextLabel || ''">
       <template v-if="showIcon" #icon-right>
-        <ChevronRightIcon />
+        <WkiChevronRight />
       </template>
     </Button>
   </nav>
@@ -39,9 +39,9 @@
 
 <script>
 import Button from '../button/Button.vue'
-import ChevronLeftIcon from '../../icons/ChevronLeftIcon.vue'
-import ChevronRightIcon from '../../icons/ChevronRightIcon.vue'
-import EllipsisIcon from '../../icons/EllipsisIcon.vue'
+import WkiChevronLeft from '../../icons/ChevronLeft.vue'
+import WkiChevronRight from '../../icons/ChevronRight.vue'
+import WkiEllipsis from '../../icons/Ellipsis.vue'
 
 function range(start, end) {
   if (end < start) return []
@@ -52,7 +52,7 @@ function range(start, end) {
 
 export default {
   name: 'Pagination',
-  components: { Button, ChevronLeftIcon, ChevronRightIcon, EllipsisIcon },
+  components: { Button, WkiChevronLeft, WkiChevronRight, WkiEllipsis },
 
   model: {
     prop: 'current',

package/src/components/select/Select.vue

@@ -39,7 +39,7 @@
         </span>
         <Spinner v-if="loading" type="mirrored" size="sm" />
         <span v-else class="ui-select__chevron">
-          <ChevronDownIcon :size="16" />
+          <WkiChevronDown :size="16" />
         </span>
       </div>
     </template>
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import ChevronDownIcon from '../../icons/ChevronDownIcon.vue'
+import WkiChevronDown from '../../icons/ChevronDown.vue'
 import Menu from '../menu/Menu.vue'
 import SelectOption from '../select-option/SelectOption.vue'
 import Spinner from '../spinner/Spinner.vue'
@@ -66,7 +66,7 @@ import Spinner from '../spinner/Spinner.vue'
 export default {
   name: 'Select',
 
-  components: { Menu, SelectOption, Spinner, ChevronDownIcon },
+  components: { Menu, SelectOption, Spinner, WkiChevronDown },
 
   provide() {
     return { select: this }

package/src/components/sidebar-group-label/SidebarGroupLabel.vue

@@ -16,7 +16,7 @@
         ><slot>{{ label }}</slot></span
       >
       <span class="ui-sidebar-group-label__chevron" aria-hidden="true">
-        <ChevronDownIcon :size="16" />
+        <WkiChevronDown :size="16" />
       </span>
     </button>
     <span v-else class="ui-sidebar-group-label__text"
@@ -29,11 +29,11 @@
 </template>
 
 <script>
-import ChevronDownIcon from '../../icons/ChevronDownIcon.vue'
+import WkiChevronDown from '../../icons/ChevronDown.vue'
 export default {
   name: 'SidebarGroupLabel',
   components: {
-    ChevronDownIcon
+    WkiChevronDown
   },
   props: {
     label: {

package/src/components/spinner/Spinner.vue

@@ -1,15 +1,15 @@
 <template>
   <span class="ui-spinner" :class="[`ui-spinner--${size}`, `ui-spinner--${type}`]" role="status" :aria-label="label">
-    <LoaderCircleIcon class="ui-spinner__svg" />
+    <WkiLoaderCircle class="ui-spinner__svg" />
   </span>
 </template>
 
 <script>
-import LoaderCircleIcon from '../../icons/LoaderCircleIcon.vue'
+import WkiLoaderCircle from '../../icons/LoaderCircle.vue'
 export default {
   name: 'Spinner',
   components: {
-    LoaderCircleIcon
+    WkiLoaderCircle
   },
   props: {
     size: {

package/src/icons/SectionBuilder.vue

@@ -0,0 +1,50 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M3 6.53571C3 4.58271 4.58271 3 6.53571 3C7.068 3 7.5 3.432 7.5 3.96429C7.5 4.49657 7.068 4.92857 6.53571 4.92857C5.64857 4.92857 4.92857 5.64857 4.92857 6.53571C4.92857 7.068 4.49657 7.5 3.96429 7.5C3.432 7.5 3 7.068 3 6.53571Z"
+        fill="#171717"
+      />
+      <path
+        d="M3 17.4643C3 19.4173 4.58271 21 6.53571 21C7.068 21 7.5 20.568 7.5 20.0357C7.5 19.5034 7.068 19.0714 6.53571 19.0714C5.64857 19.0714 4.92857 18.3514 4.92857 17.4643C4.92857 16.932 4.49657 16.5 3.96429 16.5C3.432 16.5 3 16.932 3 17.4643Z"
+        fill="#171717"
+      />
+      <path
+        d="M17.4643 3C19.4173 3 21 4.58271 21 6.53571C21 7.068 20.568 7.5 20.0357 7.5C19.5034 7.5 19.0714 7.068 19.0714 6.53571C19.0714 5.64857 18.3514 4.92857 17.4643 4.92857C16.932 4.92857 16.5 4.49657 16.5 3.96429C16.5 3.432 16.932 3 17.4643 3Z"
+        fill="#171717"
+      />
+      <path
+        d="M17.4643 21C19.4173 21 21 19.4173 21 17.4643C21 16.932 20.568 16.5 20.0357 16.5C19.5034 16.5 19.0714 16.932 19.0714 17.4643C19.0714 18.3514 18.3514 19.0714 17.4643 19.0714C16.932 19.0714 16.5 19.5034 16.5 20.0357C16.5 20.568 16.932 21 17.4643 21Z"
+        fill="#171717"
+      />
+      <path
+        d="M14.7 3.9C14.7 4.3968 14.1816 4.8 13.5429 4.8H10.4571C9.8184 4.8 9.3 4.3968 9.3 3.9C9.3 3.4032 9.8184 3 10.4571 3H13.5429C14.1816 3 14.7 3.4032 14.7 3.9Z"
+        fill="#171717"
+      />
+      <path
+        d="M13.5429 21C14.1816 21 14.7 20.5968 14.7 20.1C14.7 19.6032 14.1816 19.2 13.5429 19.2H10.4571C9.8184 19.2 9.3 19.6032 9.3 20.1C9.3 20.5968 9.8184 21 10.4571 21H13.5429Z"
+        fill="#171717"
+      />
+      <path
+        d="M19.2904 11.0779C19.2904 10.5187 18.8371 10.0654 18.2779 10.0654H5.67786C5.11867 10.0654 4.66536 10.5187 4.66536 11.0779V12.9645C4.66536 13.5237 5.11867 13.977 5.67786 13.977H18.2779C18.8371 13.977 19.2904 13.5237 19.2904 12.9645V11.0779ZM20.8654 12.9645C20.8654 14.3935 19.7069 15.552 18.2779 15.552H5.67786C4.24883 15.552 3.09036 14.3935 3.09036 12.9645V11.0779C3.09036 9.64884 4.24883 8.49038 5.67786 8.49038H18.2779C19.7069 8.49038 20.8654 9.64884 20.8654 11.0779V12.9645Z"
+        fill="#171717"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'SectionBuilder',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/index.js

@@ -1728,4 +1728,6 @@ export { default as WkiZodiacTaurus } from './ZodiacTaurus.vue'
 export { default as WkiZodiacVirgo } from './ZodiacVirgo.vue'
 export { default as WkiZoomIn } from './ZoomIn.vue'
 export { default as WkiZoomOut } from './ZoomOut.vue'
+export { default as WkiClickButton } from './ClickButton.vue'
+export { default as WkiSectionBuilder } from './SectionBuilder.vue'
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---

package/src/styles/color_general.css

@@ -78,6 +78,7 @@
 
   /* Components */
   --card: var(--color-white-alpha-100);
+  --card-hover: var(--color-neutral-50);
   --card-foreground: var(--color-brand-neutrals-950);
 
   --popover: var(--color-white-alpha-100);
@@ -184,6 +185,7 @@
 
   /* Components */
   --card: var(--color-brand-neutrals-900);
+  --card-hover: var(--color-brand-neutrals-800);
   --card-foreground: var(--color-white-alpha-100);
 
   --popover: var(--color-black-alpha-100);

package/src/icons/CheckIcon.vue

@@ -1,30 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="M20 6 9 17l-5-5" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'CheckIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/ChevronDownIcon.vue

@@ -1,30 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="m6 9 6 6 6-6" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'ChevronDownIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/ChevronLeftIcon.vue

@@ -1,30 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="m15 18-6-6 6-6" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'ChevronLeftIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/ChevronRightIcon.vue

@@ -1,30 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="m9 18 6-6-6-6" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'ChevronRightIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/ChevronUpIcon.vue

@@ -1,30 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="m18 15-6-6-6 6" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'ChevronUpIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/CircleXIcon.vue

@@ -1,32 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <path d="m15 9-6 6" />
-      <path d="m9 9 6 6" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'CircleXIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/EllipsisIcon.vue

@@ -1,32 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <circle cx="12" cy="12" r="1" />
-      <circle cx="19" cy="12" r="1" />
-      <circle cx="5" cy="12" r="1" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'EllipsisIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/ExpandIcon.vue

@@ -1,37 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="m15 15 6 6" />
-      <path d="m15 9 6-6" />
-      <path d="M21 16v5h-5" />
-      <path d="M21 8V3h-5" />
-      <path d="M3 16v5h5" />
-      <path d="m3 21 6-6" />
-      <path d="M3 8V3h5" />
-      <path d="M9 9 3 3" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'ExpandIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/LoaderCircleIcon.vue

@@ -1,30 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'LoaderCircleIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/LoaderIcon.vue

@@ -1,37 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="M12 2v4" />
-      <path d="m16.2 7.8 2.9-2.9" />
-      <path d="M18 12h4" />
-      <path d="m16.2 16.2 2.9 2.9" />
-      <path d="M12 18v4" />
-      <path d="m4.9 19.1 2.9-2.9" />
-      <path d="M2 12h4" />
-      <path d="m4.9 4.9 2.9 2.9" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'LoaderIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/MinusIcon.vue

@@ -1,30 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="M5 12h14" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'MinusIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/PlusIcon.vue

@@ -1,31 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="M5 12h14" />
-      <path d="M12 5v14" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'PlusIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/SearchIcon.vue

@@ -1,31 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <circle cx="11" cy="11" r="8" />
-      <path d="m21 21-4.3-4.3" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'SearchIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/ShrinkIcon.vue

@@ -1,33 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="m15 15 6 6m-6-6v4.8m0-4.8h4.8" />
-      <path d="M9 19.8V15m0 0H4.2M9 15l-6 6" />
-      <path d="M15 4.2V9m0 0h4.8M15 9l6-6" />
-      <path d="M9 4.2V9m0 0H4.2M9 9 3 3" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'ShrinkIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/SlashIcon.vue

@@ -1,30 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="M22 2 2 22" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'SlashIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/UnfoldVerticalIcon.vue

@@ -1,37 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="M12 22v-6" />
-      <path d="M12 8V2" />
-      <path d="M4 12H2" />
-      <path d="M10 12H8" />
-      <path d="M16 12h-2" />
-      <path d="M22 12h-2" />
-      <path d="m15 19-3 3-3-3" />
-      <path d="m15 5-3-3-3 3" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'UnfoldVerticalIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>

package/src/icons/XIcon.vue

@@ -1,31 +0,0 @@
-<template>
-  <BaseIcon v-bind="$attrs" v-on="listeners">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  </BaseIcon>
-</template>
-
-<script>
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  name: 'XIcon',
-  components: { BaseIcon },
-  inheritAttrs: false,
-  emits: [],
-  computed: {
-    listeners() {
-      return this.$listeners || {}
-    }
-  }
-}
-</script>