@weni/unnnic-system 3.3.1-alpha.0 → 3.3.1

package/src/types/scheme-colors.d.ts

@@ -1,122 +1,4 @@
 export type SchemeColor =
-  | 'white'
-  | 'black'
-  | 'gray-50'
-  | 'gray-100'
-  | 'gray-200'
-  | 'gray-300'
-  | 'gray-400'
-  | 'gray-500'
-  | 'gray-600'
-  | 'gray-700'
-  | 'gray-800'
-  | 'gray-900'
-  | 'gray-950'
-  | 'teal-50'
-  | 'teal-100'
-  | 'teal-200'
-  | 'teal-300'
-  | 'teal-400'
-  | 'teal-500'
-  | 'teal-600'
-  | 'teal-700'
-  | 'teal-800'
-  | 'teal-900'
-  | 'teal-950'
-  | 'green-50'
-  | 'green-100'
-  | 'green-200'
-  | 'green-300'
-  | 'green-400'
-  | 'green-500'
-  | 'green-600'
-  | 'green-700'
-  | 'green-800'
-  | 'green-900'
-  | 'green-950'
-  | 'blue-50'
-  | 'blue-100'
-  | 'blue-200'
-  | 'blue-300'
-  | 'blue-400'
-  | 'blue-500'
-  | 'blue-600'
-  | 'blue-700'
-  | 'blue-800'
-  | 'blue-900'
-  | 'blue-950'
-  | 'purple-50'
-  | 'purple-100'
-  | 'purple-200'
-  | 'purple-300'
-  | 'purple-400'
-  | 'purple-500'
-  | 'purple-600'
-  | 'purple-700'
-  | 'purple-800'
-  | 'purple-900'
-  | 'purple-950'
-  | 'red-50'
-  | 'red-100'
-  | 'red-200'
-  | 'red-300'
-  | 'red-400'
-  | 'red-500'
-  | 'red-600'
-  | 'red-700'
-  | 'red-800'
-  | 'red-900'
-  | 'red-950'
-  | 'orange-50'
-  | 'orange-100'
-  | 'orange-200'
-  | 'orange-300'
-  | 'orange-400'
-  | 'orange-500'
-  | 'orange-600'
-  | 'orange-700'
-  | 'orange-800'
-  | 'orange-900'
-  | 'orange-950'
-  | 'yellow-50'
-  | 'yellow-100'
-  | 'yellow-200'
-  | 'yellow-300'
-  | 'yellow-400'
-  | 'yellow-500'
-  | 'yellow-600'
-  | 'yellow-700'
-  | 'yellow-800'
-  | 'yellow-900'
-  | 'yellow-950'
-  | 'bg-base'
-  | 'bg-soft'
-  | 'bg-muted'
-  | 'bg-active'
-  | 'bg-info'
-  | 'bg-success'
-  | 'bg-warning'
-  | 'bg-critical'
-  | 'fg-base'
-  | 'fg-muted'
-  | 'fg-emphasized'
-  | 'fg-inverted'
-  | 'fg-active'
-  | 'fg-info'
-  | 'fg-success'
-  | 'fg-warning'
-  | 'fg-critical'
-  | 'border-base'
-  | 'border-soft'
-  | 'border-muted'
-  | 'border-emphasized'
-  | 'border-active'
-  | 'border-info'
-  | 'border-success'
-  | 'border-warning'
-  | 'border-critical'
-
-  // Deprecated
   | 'background-solo'
   | 'background-sky'
   | 'background-grass'
@@ -140,7 +22,6 @@ export type SchemeColor =
   | 'feedback-yellow'
   | 'feedback-blue'
   | 'feedback-grey'
-  | 'fg-base'
   | 'aux-blue'
   | 'aux-purple'
   | 'aux-orange'
@@ -204,4 +85,17 @@ export type SchemeColor =
   | 'brand-weni-soft'
   | 'brand-sec-dark'
   | 'brand-sec-soft'
-  | 'brand-sec';
+  | 'brand-sec'
+  | 'bg-base'
+  | 'bg-soft'
+  | 'teal-50'
+  | 'teal-100'
+  | 'teal-200'
+  | 'teal-300'
+  | 'teal-400'
+  | 'teal-500'
+  | 'teal-600'
+  | 'teal-700'
+  | 'teal-800'
+  | 'teal-900'
+  | 'teal-950';

package/src/utils/call.js

@@ -1,58 +1,30 @@
 import { createApp } from 'vue';
 import Alert from '../components/Alert/Alert.vue';
 import Modal from '../components/Modal/Modal.vue';
-import ToastInstance from '../components/Toast/ToastManager';
 import mitt from 'mitt';
 
 const emitter = mitt();
-const callAlert = ({ props, containerRef, seconds }) => {
-  if (props.version === '1.1' || containerRef) {
-    const AlertComponent = createApp(Alert, {
-      ...props,
-      seconds,
-      version: '1.1',
-      onClose: () => {
+
+const callAlert = ({ props, containerRef }) => {
+  const AlertComponent = createApp(Alert, {
+    ...props,
+    onClose: () => {
+      instance.$el.remove();
+    },
+    created() {
+      emitter.on(['close'], () => {
         instance.$el.remove();
-      },
-      created() {
-        emitter.on(['close'], () => {
-          instance.$el.remove();
-        });
-      },
-    });
-    const element = document.createElement('div');
-    const instance = AlertComponent.mount(element);
+      });
+    },
+  });
+  const element = document.createElement('div');
+  const instance = AlertComponent.mount(element);
 
-    if (containerRef) {
-      instance.$el.style.position = 'absolute';
-      containerRef.appendChild(instance.$el);
-    } else {
-      document.body.appendChild(instance.$el);
-    }
+  if (containerRef) {
+    instance.$el.style.position = 'absolute';
+    containerRef.appendChild(instance.$el);
   } else {
-    const typeMap = {
-      success: 'success',
-      error: 'error',
-      attention: 'attention',
-      default: 'informational',
-      'feedback-green': 'success',
-      'feedback-red': 'error',
-    };
-
-    const toastProps = {
-      timeout: seconds ? seconds * 1000 : 5000,
-      type: typeMap[props.scheme || props.type] || typeMap.default,
-
-      onClose: () => {
-        emitter.emit(['close']);
-      },
-    };
-
-    ToastInstance.show({
-      title: props.text,
-      description: '',
-      ...toastProps,
-    });
+    document.body.appendChild(instance.$el);
   }
 };
 

package/dist/components/TemplatePreview/TemplatePreview.vue.d.ts

@@ -1,9 +0,0 @@
-import { Template } from './types';
-interface Props {
-    template?: Template | null;
-}
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    template: Template | null;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
-export default _default;
-//# sourceMappingURL=TemplatePreview.vue.d.ts.map

package/dist/components/TemplatePreview/TemplatePreview.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TemplatePreview.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TemplatePreview/TemplatePreview.vue"],"names":[],"mappings":"AAmGA;AAgQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQxC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC5B;;cADY,QAAQ,GAAG,IAAI;;AAkN5B,wBAQG"}

package/dist/components/TemplatePreview/TemplatePreviewModal.vue.d.ts

@@ -1,15 +0,0 @@
-import { Template } from './types';
-interface Props {
-    locale?: string;
-    template: Template;
-    modelValue: boolean;
-}
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    close: () => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    onClose?: (() => any) | undefined;
-}>, {
-    locale: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;
-//# sourceMappingURL=TemplatePreviewModal.vue.d.ts.map

package/dist/components/TemplatePreview/TemplatePreviewModal.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TemplatePreviewModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TemplatePreview/TemplatePreviewModal.vue"],"names":[],"mappings":"AAWA;AAwDA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAUxC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB;;;;;;YAHU,MAAM;;AAgGjB,wBASG"}

package/dist/components/Toast/Toast.vue.d.ts

@@ -1,16 +0,0 @@
-import { ToastProps } from './types';
-declare const _default: import('vue').DefineComponent<ToastProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    close: () => any;
-    destroy: () => any;
-}, string, import('vue').PublicProps, Readonly<ToastProps> & Readonly<{
-    onClose?: (() => any) | undefined;
-    onDestroy?: (() => any) | undefined;
-}>, {
-    type: import('./types').ToastType;
-    description: string;
-    button: import('./types').ToastButton;
-    title: string;
-    timeout: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;
-//# sourceMappingURL=Toast.vue.d.ts.map

package/dist/components/Toast/Toast.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toast.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.vue"],"names":[],"mappings":"AA4DA;AAmPA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,SAAS,CAAC;;;;;;;;;;;;;;AAmQtD,wBASG"}

package/dist/components/Toast/ToastManager.d.ts

@@ -1,14 +0,0 @@
-import { ToastProps, ToastInstance, ToastCall } from './types';
-declare class ToastManager implements ToastManager {
-    private toasts;
-    private container;
-    private nextId;
-    private createContainer;
-    private generateId;
-    show(props: ToastProps): ToastInstance;
-    close(id: string): void;
-}
-declare const toastManager: ToastManager;
-export declare const toast: ToastCall;
-export default toastManager;
-//# sourceMappingURL=ToastManager.d.ts.map

package/dist/components/Toast/ToastManager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToastManager.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/ToastManager.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,UAAU,EACV,aAAa,EAEb,SAAS,EACV,MAAM,SAAS,CAAC;AAEjB,cAAM,YAAa,YAAW,YAAY;IACxC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,MAAM,CAAK;IAEnB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,UAAU;IAIlB,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa;IAsCtC,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;CAMxB;AAED,QAAA,MAAM,YAAY,cAAqB,CAAC;AAExC,eAAO,MAAM,KAAK,EAAE,SA6BnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/Toast/types.d.ts

@@ -1,35 +0,0 @@
-export interface ToastManager {
-    show: (props: ToastProps) => ToastInstance;
-    close: (id: string) => void;
-}
-export interface ToastButton {
-    text: string;
-    action: () => void;
-}
-export type ToastType = 'informational' | 'attention' | 'success' | 'error';
-export interface ToastProps extends ToastOptions {
-    title: string;
-    description?: string;
-}
-export interface ToastOptions {
-    type?: ToastType;
-    button?: ToastButton;
-    timeout?: number;
-}
-export interface ToastEmits {
-    close: [];
-    destroy: [];
-}
-export interface ToastInstance {
-    id: string;
-    props: ToastProps;
-    close: () => void;
-    promise: Promise<void>;
-}
-export interface ToastCall {
-    info: (title: string, description?: string, options?: ToastOptions) => Promise<void>;
-    success: (title: string, description?: string, options?: ToastOptions) => Promise<void>;
-    attention: (title: string, description?: string, options?: ToastOptions) => Promise<void>;
-    error: (title: string, description?: string, options?: ToastOptions) => Promise<void>;
-}
-//# sourceMappingURL=types.d.ts.map

package/dist/components/Toast/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,aAAa,CAAC;IAC3C,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5E,MAAM,WAAW,UAAW,SAAQ,YAAY;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,EAAE,CAAC;IACV,OAAO,EAAE,EAAE,CAAC;CACb;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,CACJ,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,YAAY,KACnB,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,OAAO,EAAE,CACP,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,YAAY,KACnB,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,SAAS,EAAE,CACT,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,YAAY,KACnB,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,KAAK,EAAE,CACL,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,YAAY,KACnB,OAAO,CAAC,IAAI,CAAC,CAAC;CACpB"}

package/src/assets/icons/radio-checked.svg

@@ -1,3 +0,0 @@
-<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="4.5" cy="4.5" r="4" fill="white"/>
-</svg>

package/src/components/Popover/__tests__/Popover.spec.js

@@ -1,147 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
-import UnnnicPopover from '@/components/Popover/index.vue';
-
-vi.mock('@vueuse/core', () => ({
-  onClickOutside: vi.fn(),
-  useResizeObserver: vi.fn(),
-}));
-
-describe('UnnnicPopover.vue', () => {
-  let wrapper;
-
-  const defaultSlots = {
-    trigger: '<button data-testid="trigger-button">Click me</button>',
-    content: '<div data-testid="popover-content">Popover content</div>',
-  };
-
-  const mountWrapper = (props) => {
-    return mount(UnnnicPopover, {
-      slots: defaultSlots,
-      props: {
-        ...props,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    wrapper = mountWrapper();
-  });
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  test('renders correctly', () => {
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('.unnnic-popover').exists()).toBe(true);
-  });
-
-  test('renders trigger slot', () => {
-    const trigger = wrapper.find('[data-testid="popover-trigger"]');
-    const triggerButton = wrapper.find('[data-testid="trigger-button"]');
-
-    expect(trigger.exists()).toBe(true);
-    expect(triggerButton.exists()).toBe(true);
-    expect(triggerButton.text()).toBe('Click me');
-  });
-
-  test('renders content slot inside balloon', async () => {
-    wrapper.vm.open = true;
-    await wrapper.vm.$nextTick();
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    const content = wrapper.find('[data-testid="popover-content"]');
-
-    expect(balloon.exists()).toBe(true);
-    expect(content.exists()).toBe(true);
-    expect(content.text()).toBe('Popover content');
-  });
-
-  test('balloon is hidden by default', () => {
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    expect(balloon.exists()).toBe(false);
-  });
-
-  test('toggles balloon visibility when trigger is clicked', async () => {
-    const trigger = wrapper.find('[data-testid="popover-trigger"]');
-
-    let balloon = wrapper.find('[data-testid="popover-balloon"]');
-
-    expect(balloon.exists()).toBe(false);
-
-    await trigger.trigger('click');
-    await wrapper.vm.$nextTick();
-
-    balloon = wrapper.find('[data-testid="popover-balloon"]');
-
-    expect(balloon.exists()).toBe(true);
-  });
-
-  test('uses modelValue when provided', async () => {
-    const wrapper = mountWrapper({ modelValue: true });
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    expect(balloon.isVisible()).toBe(true);
-  });
-
-  test('emits update:modelValue when open state changes', async () => {
-    await wrapper.setProps({ modelValue: false });
-
-    const trigger = wrapper.find('[data-testid="popover-trigger"]');
-    await trigger.trigger('click');
-
-    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-    expect(wrapper.emitted('update:modelValue')[0]).toEqual([true]);
-  });
-
-  test('does not emit update:modelValue when modelValue is undefined', async () => {
-    const trigger = wrapper.find('[data-testid="popover-trigger"]');
-    await trigger.trigger('click');
-
-    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
-  });
-
-  test('exposes open ref', () => {
-    expect(wrapper.vm.open).toBeDefined();
-    expect(typeof wrapper.vm.open).toBe('boolean');
-  });
-
-  test('open ref can be controlled programmatically', async () => {
-    wrapper.vm.open = true;
-    await wrapper.vm.$nextTick();
-
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    expect(balloon.isVisible()).toBe(true);
-  });
-
-  test('persistent prop prevents closing on outside click', async () => {
-    await wrapper.setProps({ persistent: true });
-
-    const { onClickOutside } = await import('@vueuse/core');
-    const mockOnClickOutside = vi.mocked(onClickOutside);
-
-    const callback = mockOnClickOutside.mock.calls[0][1];
-
-    wrapper.vm.open = true;
-    await wrapper.vm.$nextTick();
-
-    callback();
-
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    expect(balloon.isVisible()).toBe(true);
-  });
-
-  test('applies correct CSS classes', async () => {
-    wrapper.vm.open = true;
-    await wrapper.vm.$nextTick();
-
-    const popover = wrapper.find('.unnnic-popover');
-    const balloon = wrapper.find('.unnnic-popover__balloon');
-
-    expect(popover.exists()).toBe(true);
-    expect(balloon.exists()).toBe(true);
-  });
-
-  test('matches the snapshot', () => {
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-});

package/src/components/Popover/__tests__/__snapshots__/Popover.spec.js.snap

@@ -1,8 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`UnnnicPopover.vue > matches the snapshot 1`] = `
-"<section data-v-5a3125ac="" class="unnnic-popover">
-  <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger"><button data-testid="trigger-button">Click me</button></div>
-  <!--v-if-->
-</section>"
-`;

package/src/components/Popover/index.vue

@@ -1,146 +0,0 @@
-<template>
-  <section
-    ref="popover"
-    class="unnnic-popover"
-  >
-    <div
-      class="unnnic-popover__trigger"
-      data-testid="popover-trigger"
-      @click="toggleOpen()"
-    >
-      <slot name="trigger" />
-    </div>
-    <div
-      v-if="open"
-      class="unnnic-popover__balloon"
-      data-testid="popover-balloon"
-    >
-      <slot name="content" />
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
-import { onClickOutside, useResizeObserver } from '@vueuse/core';
-
-const target = useTemplateRef<HTMLDivElement>('popover');
-
-const popoverWidth = ref<string>('');
-
-useResizeObserver(target, (entries) => {
-  const entry = entries[0];
-  const { width } = entry.contentRect;
-  popoverWidth.value = `${width}px`;
-});
-
-onClickOutside(target, () => {
-  if (props.persistent) return;
-  open.value = false;
-});
-
-defineOptions({
-  name: 'UnnnicPopover',
-});
-
-interface PopoverBalloonProps {
-  width?: string;
-  height?: string;
-  maxHeight?: string;
-}
-
-interface PopoverProps {
-  modelValue?: boolean;
-  persistent?: boolean;
-  popoverBalloonProps?: PopoverBalloonProps;
-}
-
-const props = withDefaults(defineProps<PopoverProps>(), {
-  modelValue: undefined,
-  persistent: false,
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean];
-}>();
-
-const useModelValue = computed(() => props.modelValue !== undefined);
-
-const open = ref<boolean>(
-  useModelValue.value ? Boolean(props.modelValue) : false,
-);
-
-const toggleOpen = () => {
-  open.value = !open.value;
-};
-
-const calculatedPopoverWidth = computed(() => {
-  return props.popoverBalloonProps?.width || popoverWidth.value;
-});
-
-const popoverHeight = computed(() => {
-  return props.popoverBalloonProps?.height || 'unset';
-});
-
-const popoverMaxHeight = computed(() => {
-  return props.popoverBalloonProps?.maxHeight || 'unset';
-});
-
-onMounted(() => {
-  if (useModelValue.value) {
-    open.value = Boolean(props.modelValue);
-  }
-});
-
-watch(open, (value) => {
-  if (useModelValue.value) {
-    emit('update:modelValue', value);
-  }
-});
-
-watch(
-  () => props.modelValue,
-  (value) => {
-    open.value = !!value;
-  },
-);
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.unnnic-popover {
-  &__balloon {
-    border-radius: $unnnic-radius-2;
-    padding: $unnnic-space-4;
-    background: $unnnic-color-bg-base;
-    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
-    // margin-top: $unnnic-space-1;
-    position: fixed;
-    width: v-bind(calculatedPopoverWidth);
-    height: v-bind(popoverHeight);
-    max-height: v-bind(popoverMaxHeight);
-    overflow: auto;
-
-    &::-webkit-scrollbar {
-      width: $unnnic-spacing-inline-nano;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-neutral-cleanest;
-      border-radius: $unnnic-border-radius-pill;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: $unnnic-color-neutral-soft;
-      border-radius: $unnnic-border-radius-pill;
-    }
-  }
-}
-</style>