@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

package/ui/components/atoms/vc-card/vc-card.vue

@@ -8,13 +8,17 @@
       class="vc-card__header"
       @click="onHeaderClick"
     >
-      <VcIcon
-        v-if="icon"
-        class="vc-card__icon"
-        :icon="icon"
-        size="xl"
-      ></VcIcon>
-      <div class="vc-card__title">{{ header }}</div>
+      <slot name="header">
+        <div>
+          <VcIcon
+            v-if="icon"
+            class="vc-card__icon"
+            :icon="icon"
+            size="xl"
+          ></VcIcon>
+          <div class="vc-card__title">{{ header }}</div>
+        </div>
+      </slot>
       <div
         v-if="$slots['actions']"
         class="vc-card__actions"
@@ -69,6 +73,7 @@ const emit = defineEmits<Emits>();
 defineSlots<{
   default: (props?: any) => any;
   actions: (props?: any) => any;
+  header: (props?: any) => any;
 }>();
 
 const isCollapsedInternal = ref();
@@ -96,10 +101,8 @@ watch(
 :root {
   --card-background: var(--additional-50);
   --card-border-radius: 6px;
-  --card-box-shadow-color: var(--secondary-600);
-  --card-box-shadow: 1px 1px 7px rgb(from var(--card-box-shadow-color) r g b / 15%);
   --card-header-background: var(--secondary-50);
-  --card-header-color: var(--secondary-600);
+  --card-header-color: var(--secondary-950);
 
   --card-header-background-success: var(--success-100);
   --card-header-background-danger: var(--danger-100);
@@ -107,10 +110,10 @@ watch(
   --card-header-color-success: var(--success-600);
   --card-header-color-danger: var(--danger-600);
 
-  --card-header-padding-hor: 16px;
-  --card-header-padding-vert: 12px;
+  --card-header-padding-hor: 24px;
+  --card-header-padding-vert: 17px;
 
-  --card-border-color: var(--base-border-color, var(--neutrals-200));
+  --card-border-color: var(--neutrals-200);
 }
 
 $variants: success, danger;
@@ -118,12 +121,11 @@ $variants: success, danger;
 .vc-card {
   @apply tw-bg-[color:var(--card-background)] tw-border
   tw-border-[color:var(--card-border-color)] tw-border-solid tw-box-border
-  tw-shadow-[var(--card-box-shadow)]
   tw-rounded-[var(--card-border-radius)] tw-overflow-hidden
   tw-flex-grow tw-flex tw-flex-col;
 
   &__header {
-    @apply tw-bg-[color:var(--card-header-background)] tw-px-[var(--card-header-padding-hor)] tw-py-[var(--card-header-padding-vert)] tw-flex tw-items-center tw-content-between tw-w-full tw-box-border;
+    @apply tw-border-b tw-border-[color:var(--card-border-color)] tw-border-solid tw-bg-[color:var(--card-header-background)] tw-px-[var(--card-header-padding-hor)] tw-py-[var(--card-header-padding-vert)] tw-flex tw-items-center tw-content-between tw-w-full tw-box-border;
   }
 
   &_collapsable &__header {
@@ -131,7 +133,7 @@ $variants: success, danger;
   }
 
   &__title {
-    @apply tw-uppercase tw-flex-grow
+    @apply tw-normal-case tw-flex-grow
    tw-text-[color:var(--card-header-color)]
    tw-text-sm tw-font-bold;
   }

package/ui/components/atoms/vc-col/index.ts

@@ -1 +1 @@
-export { default as VcCol } from "./vc-col.vue";
+export { default as VcCol } from "./vc-col.vue";

package/ui/components/atoms/vc-col/vc-col.stories.ts

@@ -1,22 +1,22 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcCol } from "./";
-import { VcRow } from "./../vc-row";
-import { VcImage } from "./../../";
-
-export default {
-  title: "atoms/VcCol",
-  component: VcCol,
-} satisfies Meta<typeof VcCol>;
-
-export const Primary: StoryFn<typeof VcCol> = (args) => ({
-  components: { VcCol, VcImage, VcRow },
-  setup() {
-    return { args };
-  },
-  template: `
-      <vc-col v-bind="args">
-        <vc-image src="https://picsum.photos/200" size="xl"/>
-        <vc-image src="https://picsum.photos/200" size="xl"/>
-        <vc-image src="https://picsum.photos/200" size="xl"/>
-      </vc-col>`,
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcCol } from "./";
+import { VcRow } from "./../vc-row";
+import { VcImage } from "./../../";
+
+export default {
+  title: "atoms/VcCol",
+  component: VcCol,
+} satisfies Meta<typeof VcCol>;
+
+export const Primary: StoryFn<typeof VcCol> = (args) => ({
+  components: { VcCol, VcImage, VcRow },
+  setup() {
+    return { args };
+  },
+  template: `
+      <vc-col v-bind="args">
+        <vc-image src="https://picsum.photos/200" size="xl"/>
+        <vc-image src="https://picsum.photos/200" size="xl"/>
+        <vc-image src="https://picsum.photos/200" size="xl"/>
+      </vc-col>`,
+});

package/ui/components/atoms/vc-col/vc-col.vue

@@ -1,29 +1,29 @@
-<template>
-  <div
-    class="vc-col"
-    :style="{ flexGrow: size }"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-export interface Props {
-  size?: number;
-}
-
-withDefaults(defineProps<Props>(), {
-  size: 1,
-});
-
-defineSlots<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  default: (props: any) => any;
-}>();
-</script>
-
-<style lang="scss">
-.vc-col {
-  @apply tw-flex tw-flex-col tw-min-w-0 tw-basis-0;
-}
-</style>
+<template>
+  <div
+    class="vc-col"
+    :style="{ flexGrow: size }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+export interface Props {
+  size?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 1,
+});
+
+defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: (props: any) => any;
+}>();
+</script>
+
+<style lang="scss">
+.vc-col {
+  @apply tw-flex tw-flex-col tw-min-w-0 tw-basis-0;
+}
+</style>

package/ui/components/atoms/vc-container/index.ts

@@ -1,10 +1,10 @@
-import { VNode } from "vue";
-import _Container from "./vc-container.vue";
-
-export const VcContainer = _Container as typeof _Container & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};
+import { VNode } from "vue";
+import _Container from "./vc-container.vue";
+
+export const VcContainer = _Container as typeof _Container & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

package/ui/components/atoms/vc-container/vc-container.stories.ts

@@ -1,29 +1,29 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { VcContainer } from "./";
-
-const meta: Meta<typeof VcContainer> = {
-  title: "atoms/VcContainer",
-  component: VcContainer,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcContainer>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcContainer },
-    setup() {
-      return { args };
-    },
-    template: `<div style="width: 400px; height: 300px"><vc-container v-bind="args">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque tortor id lacus viverra, ut mollis libero auctor. Curabitur viverra, justo eu convallis pulvinar, dui nisi luctus quam, ut egestas tortor dolor quis nisi. Sed dignissim tellus ac enim dignissim dapibus. Duis vitae ipsum sit amet leo ornare fringilla sit amet a felis. Quisque finibus elementum dolor eu rhoncus. Donec dapibus non nisl blandit lobortis. Suspendisse pellentesque elit nunc, at auctor orci dignissim sed. Cras malesuada nibh id porttitor hendrerit.</p>
-    <p>Maecenas ut malesuada risus, a euismod ligula. Mauris fringilla arcu a vestibulum varius. Phasellus et quam facilisis, egestas magna ut, ultrices est. Maecenas accumsan sit amet metus sit amet laoreet. Sed at accumsan orci, id tincidunt nibh. Nam laoreet eu nisl a condimentum. Fusce ac blandit justo. Vestibulum sollicitudin eros euismod, cursus arcu ac, blandit eros. Phasellus tempor mi et iaculis pulvinar. Cras blandit, tortor sit amet fermentum aliquet, metus ipsum ultricies est, eu congue dui nunc nec ligula.</p>
-    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque porttitor felis non turpis volutpat, ut consequat nulla vestibulum. Donec ipsum dui, convallis a faucibus eget, vehicula faucibus quam. Maecenas et velit odio. Suspendisse posuere faucibus est vel condimentum. Mauris et est placerat risus tincidunt rutrum. Sed venenatis nunc a mollis dignissim. Nam felis nisl, blandit in venenatis et, sollicitudin ut eros. Quisque ornare lacus metus, sed placerat lacus malesuada et. Sed venenatis, turpis in porta suscipit, libero ex tristique erat, nec pretium lectus justo malesuada dolor.</p>
-    <p>Vivamus non nisi quis elit pellentesque pharetra quis eget augue. Donec tincidunt nunc id placerat tincidunt. Mauris ultrices quam id risus sodales, at euismod mauris convallis. Morbi quis aliquam nibh. Cras vitae mi a risus dapibus lacinia sit amet eu erat. Morbi ligula ex, aliquet ac nunc a, tempus lacinia lacus. Integer pretium arcu augue, vitae egestas libero rutrum eu.</p>
-    <p>Suspendisse malesuada nisl tempor tellus ullamcorper, ut varius enim molestie. Suspendisse eleifend at libero id ultricies. Duis sagittis quis metus eget condimentum. Praesent iaculis viverra mauris et mattis. Pellentesque cursus, turpis sed venenatis volutpat, nibh tortor eleifend eros, non varius neque lectus ut dolor. Sed eget lectus et risus hendrerit molestie. Cras lorem enim, rutrum sed pellentesque in, tristique et diam. Donec aliquet dolor sit amet cursus facilisis. Donec a placerat nibh.</p>
-  </vc-container></div>`,
-  }),
-  args: {
-    shadow: false,
-  },
-};
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcContainer } from "./";
+
+const meta: Meta<typeof VcContainer> = {
+  title: "atoms/VcContainer",
+  component: VcContainer,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcContainer>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcContainer },
+    setup() {
+      return { args };
+    },
+    template: `<div style="width: 400px; height: 300px"><vc-container v-bind="args">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque tortor id lacus viverra, ut mollis libero auctor. Curabitur viverra, justo eu convallis pulvinar, dui nisi luctus quam, ut egestas tortor dolor quis nisi. Sed dignissim tellus ac enim dignissim dapibus. Duis vitae ipsum sit amet leo ornare fringilla sit amet a felis. Quisque finibus elementum dolor eu rhoncus. Donec dapibus non nisl blandit lobortis. Suspendisse pellentesque elit nunc, at auctor orci dignissim sed. Cras malesuada nibh id porttitor hendrerit.</p>
+    <p>Maecenas ut malesuada risus, a euismod ligula. Mauris fringilla arcu a vestibulum varius. Phasellus et quam facilisis, egestas magna ut, ultrices est. Maecenas accumsan sit amet metus sit amet laoreet. Sed at accumsan orci, id tincidunt nibh. Nam laoreet eu nisl a condimentum. Fusce ac blandit justo. Vestibulum sollicitudin eros euismod, cursus arcu ac, blandit eros. Phasellus tempor mi et iaculis pulvinar. Cras blandit, tortor sit amet fermentum aliquet, metus ipsum ultricies est, eu congue dui nunc nec ligula.</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque porttitor felis non turpis volutpat, ut consequat nulla vestibulum. Donec ipsum dui, convallis a faucibus eget, vehicula faucibus quam. Maecenas et velit odio. Suspendisse posuere faucibus est vel condimentum. Mauris et est placerat risus tincidunt rutrum. Sed venenatis nunc a mollis dignissim. Nam felis nisl, blandit in venenatis et, sollicitudin ut eros. Quisque ornare lacus metus, sed placerat lacus malesuada et. Sed venenatis, turpis in porta suscipit, libero ex tristique erat, nec pretium lectus justo malesuada dolor.</p>
+    <p>Vivamus non nisi quis elit pellentesque pharetra quis eget augue. Donec tincidunt nunc id placerat tincidunt. Mauris ultrices quam id risus sodales, at euismod mauris convallis. Morbi quis aliquam nibh. Cras vitae mi a risus dapibus lacinia sit amet eu erat. Morbi ligula ex, aliquet ac nunc a, tempus lacinia lacus. Integer pretium arcu augue, vitae egestas libero rutrum eu.</p>
+    <p>Suspendisse malesuada nisl tempor tellus ullamcorper, ut varius enim molestie. Suspendisse eleifend at libero id ultricies. Duis sagittis quis metus eget condimentum. Praesent iaculis viverra mauris et mattis. Pellentesque cursus, turpis sed venenatis volutpat, nibh tortor eleifend eros, non varius neque lectus ut dolor. Sed eget lectus et risus hendrerit molestie. Cras lorem enim, rutrum sed pellentesque in, tristique et diam. Donec aliquet dolor sit amet cursus facilisis. Donec a placerat nibh.</p>
+  </vc-container></div>`,
+  }),
+  args: {
+    shadow: false,
+  },
+};

package/ui/components/atoms/vc-hint/index.ts

@@ -1,10 +1,10 @@
-import _Hint from "./vc-hint.vue";
-import { VNode } from "vue";
-
-export const VcHint = _Hint as typeof _Hint & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};
+import _Hint from "./vc-hint.vue";
+import { VNode } from "vue";
+
+export const VcHint = _Hint as typeof _Hint & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

package/ui/components/atoms/vc-hint/vc-hint.stories.ts

@@ -1,23 +1,23 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcHint } from "./";
-
-export default {
-  title: "atoms/VcHint",
-  component: VcHint,
-  args: {
-    default: "This is a hint",
-  },
-  argTypes: {
-    default: {
-      control: "text",
-    },
-  },
-} satisfies Meta<typeof VcHint>;
-
-export const Primary: StoryFn<typeof VcHint> = (args) => ({
-  components: { VcHint },
-  setup() {
-    return { args };
-  },
-  template: '<vc-hint v-bind="args">{{args.default}}</vc-hint>',
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcHint } from "./";
+
+export default {
+  title: "atoms/VcHint",
+  component: VcHint,
+  args: {
+    default: "This is a hint",
+  },
+  argTypes: {
+    default: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof VcHint>;
+
+export const Primary: StoryFn<typeof VcHint> = (args) => ({
+  components: { VcHint },
+  setup() {
+    return { args };
+  },
+  template: '<vc-hint v-bind="args">{{args.default}}</vc-hint>',
+});

package/ui/components/atoms/vc-hint/vc-hint.vue

@@ -7,7 +7,7 @@
 <style lang="scss">
 :root {
   --hint-color: var(--neutrals-500);
-  --hint-font-size: 12px;
+  --hint-font-size: 10px;
 }
 
 .vc-hint {

package/ui/components/atoms/vc-icon/icons/AppWindowIcon.vue

@@ -0,0 +1,15 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+<path d="M3.3335 6.00033V14.0003C3.3335 14.9337 3.3335 15.4002 3.51515 15.7567C3.67494 16.0703 3.92972 16.3256 4.24333 16.4854C4.5995 16.6668 5.06599 16.6668 5.99759 16.6668H14.0027C14.9343 16.6668 15.4002 16.6668 15.7563 16.4854C16.0699 16.3256 16.3256 16.0703 16.4854 15.7567C16.6668 15.4006 16.6668 14.9347 16.6668 14.0031V5.99759C16.6668 5.06599 16.6668 4.5995 16.4854 4.24333C16.3256 3.92972 16.0699 3.67494 15.7563 3.51515C15.3998 3.3335 14.9337 3.3335 14.0003 3.3335H6.00033C5.0669 3.3335 4.59985 3.3335 4.24333 3.51515C3.92972 3.67494 3.67494 3.92972 3.51515 4.24333C3.3335 4.59985 3.3335 5.0669 3.3335 6.00033Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="4.1665" y1="8.1665" x2="15.8332" y2="8.1665" stroke="currentColor" stroke-width="2"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ArrowLeftIcon.vue

@@ -0,0 +1,20 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 10" fill="none" :width="width" :height="height">
+  <path
+    d="M11 5H1M1 5L5 9M1 5L5 1"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ArrowRightIcon.vue

@@ -0,0 +1,13 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 10" fill="none" :width="width" :height="height">
+  <path d="M1 5H11M11 5L7 1M11 5L7 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>  
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/BellIcon.vue

@@ -0,0 +1,14 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 20" fill="none" :width="width" :height="height">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.25178 3.30157C5.55825 4.09224 5.16667 5.23859 5.16667 6.60195V8.33529C5.16667 9.19582 4.77938 9.91075 4.36882 10.4555C3.99335 10.9537 3.52576 11.4009 3.15857 11.7522C3.12774 11.7817 3.09761 11.8105 3.06831 11.8386C2.72481 12.1681 2.5 12.6156 2.5 13.1353C2.5 13.6605 2.89364 14.002 3.27778 14.002H15.7222C16.1064 14.002 16.5 13.6605 16.5 13.1353C16.5 12.6156 16.2752 12.1681 15.9317 11.8386C15.9024 11.8105 15.8723 11.7817 15.8414 11.7522C15.4742 11.4009 15.0066 10.9536 14.6312 10.4555C14.2206 9.91075 13.8333 9.19582 13.8333 8.33529V6.60195C13.8333 5.23859 13.4417 4.09224 12.7482 3.30157C12.0713 2.52978 11.0251 2.00195 9.5 2.00195C7.97494 2.00195 6.92875 2.52978 6.25178 3.30157ZM4.74822 1.98274C5.84903 0.727732 7.4695 0.00195312 9.5 0.00195312C11.5305 0.00195312 13.151 0.727732 14.2518 1.98274C15.336 3.21887 15.8333 4.87252 15.8333 6.60195V8.33529C15.8333 8.57932 15.9428 8.87289 16.2283 9.2517C16.502 9.61482 16.8573 9.95538 17.2498 10.3316C17.2718 10.3527 17.294 10.374 17.3163 10.3954C18 11.0513 18.5 12.0016 18.5 13.1353C18.5 14.672 17.3018 16.002 15.7222 16.002H3.27778C1.69824 16.002 0.5 14.672 0.5 13.1353C0.5 12.0016 0.999968 11.0513 1.68372 10.3954C1.706 10.374 1.72817 10.3527 1.75022 10.3316C2.1427 9.95539 2.49798 9.61482 2.77166 9.25171C3.05716 8.8729 3.16667 8.57932 3.16667 8.33529V6.60195C3.16667 4.87252 3.66397 3.21887 4.74822 1.98274Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.94301 17.1715C7.4017 16.8639 8.02291 16.9864 8.33051 17.4451C8.4299 17.5933 8.5843 17.7331 8.79191 17.8365C8.99975 17.9401 9.24442 17.9985 9.49998 17.9985C9.75554 17.9985 10.0002 17.9401 10.2081 17.8365C10.4157 17.7331 10.5701 17.5933 10.6694 17.4451C10.9771 16.9864 11.5983 16.8639 12.057 17.1715C12.5156 17.4791 12.6381 18.1003 12.3305 18.559C12.0234 19.017 11.5943 19.3803 11.0999 19.6266C10.6058 19.8729 10.0545 19.9985 9.49998 19.9985C8.94542 19.9985 8.39418 19.8729 7.90002 19.6266C7.40562 19.3803 6.97656 19.017 6.66945 18.559C6.36184 18.1003 6.48432 17.4791 6.94301 17.1715Z" fill="currentColor"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ChevronDownIcon.vue

@@ -0,0 +1,13 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" :width="width" :height="height">
+  <path d="M14 7L9.5 11.5L5 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ChevronLeftIcon.vue

@@ -0,0 +1,13 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 11" fill="none" :width="width" :height="height">
+<path d="M5 9.5L1 5.5L5 1.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ChevronRightIcon.vue

@@ -0,0 +1,13 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 11" fill="none" :width="width" :height="height">
+  <path d="M1 1.5L5 5.5L1 9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ChevronUpIcon.vue

@@ -0,0 +1,13 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" :width="width" :height="height">
+  <path d="M5 11.5L9.5 7L14 11.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/CircleDotsIcon.vue

@@ -0,0 +1,16 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2Z" fill="#737373"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.6998 6.0002C8.6998 6.71817 9.28183 7.3002 9.9998 7.3002C10.7178 7.3002 11.2998 6.71817 11.2998 6.0002C11.2998 5.28223 10.7178 4.7002 9.9998 4.7002C9.28183 4.7002 8.6998 5.28222 8.6998 6.0002Z" fill="#737373"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.6998 14.0002C8.6998 14.7182 9.28183 15.3002 9.9998 15.3002C10.7178 15.3002 11.2998 14.7182 11.2998 14.0002C11.2998 13.2822 10.7178 12.7002 9.9998 12.7002C9.28183 12.7002 8.6998 13.2822 8.6998 14.0002Z" fill="#737373"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.6998 10.0002C8.6998 10.7182 9.28183 11.3002 9.9998 11.3002C10.7178 11.3002 11.2998 10.7182 11.2998 10.0002C11.2998 9.28223 10.7178 8.7002 9.9998 8.7002C9.28183 8.7002 8.6998 9.28222 8.6998 10.0002Z" fill="#737373"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/CrossSignIcon.vue

@@ -0,0 +1,20 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" :width="width" :height="height">
+  <path
+    d="M11 11L6.00001 6.00001M6.00001 6.00001L1 1M6.00001 6.00001L11 1M6.00001 6.00001L1 11"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/DoubleArrowLeftIcon.vue

@@ -0,0 +1,14 @@
+
+<template>
+<svg viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M11 9L7 5L11 1M5 9L1 5L5 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/DoubleArrowRightIcon.vue

@@ -0,0 +1,14 @@
+
+<template>
+<svg viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M7 1L11 5L7 9M1 1L5 5L1 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/FulfillmentCentersIcon.vue

@@ -0,0 +1,27 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Building outline -->
+    <path d="M1 19H19" />
+    <path d="M1 8L10 1L19 8V19H1V8Z" />
+
+    <!-- Door and details -->
+    <rect x="7" y="13" width="6" height="6" />
+
+    <!-- Windows -->
+    <rect x="4" y="6" width="3" height="3" />
+    <rect x="13" y="6" width="3" height="3" />
+
+    <!-- Flag/sign -->
+    <path d="M4 8.5V4.5" />
+  </g>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/GridDotsIcon.vue

@@ -0,0 +1,22 @@
+
+<template>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M17 18C17 18.5523 17.4477 19 18 19C18.5523 19 19 18.5523 19 18C19 17.4477 18.5523 17 18 17C17.4477 17 17 17.4477 17 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 18C5 18.5523 5.44772 19 6 19C6.55228 19 7 18.5523 7 18C7 17.4477 6.55228 17 6 17C5.44772 17 5 17.4477 5 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 12C17 12.5523 17.4477 13 18 13C18.5523 13 19 12.5523 19 12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 12C5 12.5523 5.44772 13 6 13C6.55228 13 7 12.5523 7 12C7 11.4477 6.55228 11 6 11C5.44772 11 5 11.4477 5 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5C17.4477 5 17 5.44772 17 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 6C11 6.55228 11.4477 7 12 7C12.5523 7 13 6.55228 13 6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5C5.44772 5 5 5.44772 5 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/LogoutIcon.vue

@@ -0,0 +1,13 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" :width="width" :height="height">
+  <path d="M9 12L12 9M12 9L9 6M12 9H1M1 4.24802V4.2002C1 3.08009 1 2.51962 1.21799 2.0918C1.40973 1.71547 1.71547 1.40973 2.0918 1.21799C2.51962 1 3.08009 1 4.2002 1H13.8002C14.9203 1 15.4796 1 15.9074 1.21799C16.2837 1.40973 16.5905 1.71547 16.7822 2.0918C17 2.5192 17 3.07899 17 4.19691V13.8036C17 14.9215 17 15.4805 16.7822 15.9079C16.5905 16.2842 16.2837 16.5905 15.9074 16.7822C15.48 17 14.921 17 13.8031 17H4.19691C3.07899 17 2.5192 17 2.0918 16.7822C1.71547 16.5905 1.40973 16.2839 1.21799 15.9076C1 15.4798 1 14.9201 1 13.8V13.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/MenuBurgerIcon.vue

@@ -0,0 +1,20 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" :width="width" :height="height">
+  <path
+    d="M6 11H11M1 6H11M1 1H11"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>