@useinsider/ab-components 0.0.59 → 0.0.61

package/dist/icons.svg

@@ -46,6 +46,9 @@
   <symbol viewBox="0 0 24 24" id="filled-dropdown-down">
     <path d="M7 10L12 15L17 10H7Z" fill="#495366"/>
   </symbol>
+  <symbol viewBox="0 0 24 24" id="dropdown-down-icon">
+    <path d="M8.04381 9H8.04582H15.9552H16C16.5523 9 17 9.44772 17 10L16.9998 10.0222C17.0057 10.2971 16.9037 10.5739 16.694 10.7836L12.7836 14.694C12.5682 14.9094 12.2821 15.0111 12 14.999C11.7179 15.0111 11.4318 14.9094 11.2164 14.694L7.30602 10.7836C7.09626 10.5739 6.99434 10.2971 7.00024 10.0222L7 10C7 9.44772 7.44772 9 8 9H8.04381Z" fill="#495366"/>
+  </symbol>
   <symbol id="filled-text-bold" width="24" height="24" viewBox="0 0 24 24">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2598 4C13.0787 4 13.815 4.10907 14.4685 4.32722C15.1221 4.54537 15.6693 4.84626 16.1102 5.2299C16.5512 5.61354 16.8898 6.06488 17.126 6.58392C17.3622 7.10296 17.4803 7.6709 17.4803 8.28773C17.4803 9.11519 17.2441 9.84109 16.7717 10.4654C16.2992 11.0898 15.7165 11.5073 15.0236 11.7179C15.4016 11.8082 15.7677 11.9549 16.122 12.158C16.4764 12.3611 16.7953 12.6206 17.0787 12.9365C17.3622 13.2525 17.5866 13.6248 17.752 14.0536C17.9173 14.4824 18 14.9525 18 15.464C18 16.126 17.874 16.7315 17.622 17.2807C17.3701 17.8298 17.0158 18.3075 16.5591 18.7137C16.1024 19.1199 15.5512 19.4358 14.9055 19.6615C14.2598 19.8872 13.5433 20 12.7559 20H8C6.89543 20 6 19.1046 6 18V6C6 4.89543 6.89543 4 8 4H12.2598ZM11.6693 10.409C12.3307 10.409 12.8543 10.2548 13.2401 9.9464C13.626 9.63798 13.8189 9.21297 13.8189 8.67136C13.8189 8.1448 13.6378 7.72731 13.2756 7.41889C12.9134 7.11048 12.3622 6.95627 11.622 6.95627H9.63779V10.409H11.6693ZM13.6772 16.5811C13.2677 16.9196 12.7008 17.0889 11.9764 17.0889H9.63779V13.3428H11.9764C12.7165 13.3428 13.2874 13.5158 13.689 13.8618C14.0905 14.2078 14.2913 14.6592 14.2913 15.2158C14.2913 15.7875 14.0866 16.2426 13.6772 16.5811Z"/>
   </symbol>
@@ -370,4 +373,16 @@
   <symbol id="line-change" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M6.23242 12.3064C6.63682 11.8984 7.29286 11.8984 7.69727 12.3064C8.10133 12.7144 8.10154 13.376 7.69727 13.7839L6.49121 14.9998H15C15.5522 14.9998 15.9998 15.4476 16 15.9998C16 16.552 15.5523 16.9998 15 16.9998H6.49121L7.69727 18.2166C8.10138 18.6245 8.10145 19.2861 7.69727 19.6941C7.29287 20.1021 6.63683 20.1021 6.23242 19.6941L3.30371 16.739C2.92459 16.3565 2.9007 15.751 3.23242 15.3406L3.30371 15.2615L6.23242 12.3064ZM16.3037 4.3064C16.7081 3.89839 17.3632 3.89843 17.7676 4.3064L20.6973 7.26147L20.7676 7.34058C21.0995 7.75093 21.0764 8.35641 20.6973 8.73901L17.7676 11.6941C17.3632 12.1018 16.708 12.1019 16.3037 11.6941C15.8993 11.2861 15.8993 10.6246 16.3037 10.2166L17.5088 8.99976H9C8.44782 8.99963 8 8.55196 8 7.99976C8.00015 7.44768 8.44792 6.99988 9 6.99976H17.5088L16.3037 5.78394C15.8993 5.37594 15.8994 4.71443 16.3037 4.3064Z" fill="#0A2ECC"/>
   </symbol>
+  <symbol id="feedback-helpful" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.6416 4.49316C9.90691 3.43807 10.9855 2.80456 12.0361 3.08691C13.7375 3.54428 14.9199 5.08686 14.9199 6.84863V10.041C14.9201 10.317 15.1439 10.5409 15.4199 10.541H17.3955C19.6043 10.5412 21.3953 12.3322 21.3955 14.541V17C21.3952 19.2088 19.6043 20.9998 17.3955 21H9.99121C8.88681 21 7.99149 20.1043 7.99121 19V11.6758C7.99121 11.2648 8.04237 10.8547 8.14258 10.4561L9.6416 4.49316ZM4.99609 10.9854C5.54743 10.9854 5.99512 11.4321 5.99512 11.9834V20.001C5.99512 20.5523 5.54743 20.999 4.99609 20.999C3.89367 20.9988 3.00005 20.1054 3 19.0029V12.9814C3.00005 11.879 3.89367 10.9856 4.99609 10.9854ZM10.082 10.9443C10.022 11.1834 9.99121 11.4293 9.99121 11.6758V19H17.3955C18.4997 18.9998 19.3952 18.1042 19.3955 17V14.541C19.3953 13.4368 18.4998 12.5412 17.3955 12.541H15.4199C14.0394 12.5409 12.9201 11.4215 12.9199 10.041V6.84863C12.9199 6.00915 12.3677 5.27327 11.5674 5.03418L10.082 10.9443Z" fill="#B1B7C4"/>
+  </symbol>
+  <symbol id="feedback-not-helpful" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.3594 19.5063C14.0941 20.5614 13.0155 21.195 11.9648 20.9126C10.2635 20.4552 9.08105 18.9126 9.08106 17.1509L9.08106 13.9585C9.0809 13.6825 8.85703 13.4586 8.58106 13.4585L6.60547 13.4585C4.39664 13.4583 2.60572 11.6673 2.60547 9.45849L2.60547 6.99951C2.60574 4.79072 4.39666 2.9997 6.60547 2.99951L14.0098 2.99951C15.1142 2.99951 16.0095 3.89518 16.0098 4.99951L16.0098 12.3237C16.0098 12.7347 15.9586 13.1449 15.8584 13.5435L14.3594 19.5063ZM19.0049 13.0142C18.4535 13.0142 18.0059 12.5674 18.0059 12.0161L18.0059 3.99853C18.0059 3.4472 18.4535 3.00049 19.0049 3.00049C20.1073 3.00074 21.0009 3.89411 21.001 4.99658L21.001 11.0181C21.0009 12.1205 20.1073 13.0139 19.0049 13.0142ZM13.9189 13.0552C13.979 12.8162 14.0098 12.5702 14.0098 12.3237L14.0098 4.99951L6.60547 4.99951C5.50123 4.9997 4.60574 5.89529 4.60547 6.99951L4.60547 9.45849C4.60572 10.5627 5.50121 11.4583 6.60547 11.4585L8.58106 11.4585C9.9616 11.4586 11.0809 12.578 11.0811 13.9585L11.0811 17.1509C11.0811 17.9904 11.6332 18.7262 12.4336 18.9653L13.9189 13.0552Z" fill="#B1B7C4"/>
+  </symbol>
+  <symbol id="feedback-helpful-selected" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.99609 10.9854C5.54738 10.9854 5.99503 11.4321 5.99512 11.9834V20.001C5.99512 20.5523 5.54743 21 4.99609 21C3.89364 20.9997 3 20.1054 3 19.0029V12.9814C3.00021 11.8791 3.89377 10.9856 4.99609 10.9854ZM9.75 4.06152C9.95732 3.23702 10.7894 2.73308 11.6162 2.93066C13.0131 3.26477 13.9989 4.51297 13.999 5.94922V10.041C13.999 10.3172 14.2229 10.541 14.499 10.541H17.3955C19.6043 10.5412 21.3953 12.3322 21.3955 14.541V17C21.3954 19.2089 19.6044 20.9998 17.3955 21H9.99121C8.88671 21 7.99132 20.1045 7.99121 19V11.6758C7.99121 11.2647 8.04233 10.8547 8.14258 10.4561L9.75 4.06152Z" fill="#656F85"/>
+  </symbol>
+  <symbol id="feedback-not-helpful-selected" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19.0049 13.0142C18.4536 13.0142 18.0059 12.5674 18.0059 12.0161L18.0059 3.99853C18.0059 3.4472 18.4535 2.99951 19.0049 2.99951C20.1073 2.99977 21.001 3.89407 21.001 4.99658L21.001 11.0181C21.0008 12.1204 20.1072 13.0139 19.0049 13.0142ZM14.251 19.938C14.0437 20.7624 13.2115 21.2673 12.3848 21.0698C10.9877 20.7358 10.002 19.4867 10.002 18.0503L10.002 13.9585C10.002 13.6824 9.7781 13.4585 9.50195 13.4585L6.60547 13.4585C4.39664 13.4583 2.60572 11.6673 2.60547 9.45849L2.60547 6.99951C2.60559 4.79059 4.39656 2.9997 6.60547 2.99951L14.0098 2.99951C15.1143 2.99951 16.0096 3.89504 16.0098 4.99951L16.0098 12.3237C16.0098 12.7348 15.9587 13.1448 15.8584 13.5435L14.251 19.938Z" fill="#656F85"/>
+  </symbol>
 </svg>

package/dist/index.d.ts

@@ -6,55 +6,68 @@ import { Placement } from '@floating-ui/vue';
 import { PublicProps } from 'vue';
 import { Ref } from 'vue';
 
-declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
-tooltipRef: HTMLDivElement;
-floatingArrowRef: HTMLDivElement;
-triggerRef: HTMLDivElement;
-}, any>;
+declare const __VLS_component: DefineComponent<CheckboxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: boolean) => any;
+change: (checked: boolean) => any;
+}, string, PublicProps, Readonly<CheckboxProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+onChange?: ((checked: boolean) => any) | undefined;
+}>, {
+label: string;
+disabled: boolean;
+name: string;
+checked: boolean;
+value: string | number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
 
-declare const __VLS_component_2: DefineComponent<ModalProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-submit: () => any;
+declare const __VLS_component_2: DefineComponent<ColorPickerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"color-change": (color: string) => any;
 close: () => any;
-}, string, PublicProps, Readonly<ModalProps> & Readonly<{
-onSubmit?: (() => any) | undefined;
+}, string, PublicProps, Readonly<ColorPickerProps> & Readonly<{
+"onColor-change"?: ((color: string) => any) | undefined;
 onClose?: (() => any) | undefined;
 }>, {
-hasOverlay: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+color: string;
+title: string;
+showSaveButton: boolean;
+presetColors: string[];
+showOpacityInHex: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+colorPickerRef: HTMLDivElement;
+hueSliderRef: HTMLDivElement;
+opacitySliderRef: HTMLDivElement;
+}, HTMLDivElement>;
 
-declare const __VLS_component_3: DefineComponent<InInfoBoxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<InInfoBoxProps> & Readonly<{}>, {
-variant: "information" | "warning" | "alert" | "smart" | "neutral";
-size: "small" | "medium" | "large";
-theme: "light" | "dark";
-titleStatus: boolean;
-titleText: string;
-descriptionStatus: boolean;
-descriptionText: string;
-fullWidthContentStatus: boolean;
+declare const __VLS_component_3: DefineComponent<InBoxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<InBoxProps> & Readonly<{}>, {
+border: string;
+borderRadius: string;
+borderTriangle: boolean;
+borderTrianglePosition: string;
+borderTriangleAlign: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_4: DefineComponent<InBasicTextInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 click: (event: MouseEvent) => any;
 input: (value: string | number) => any;
-blur: (event: FocusEvent) => any;
+"update:modelValue": (value: string | number) => any;
 change: (value: string | number) => any;
 focus: (event: FocusEvent) => any;
-keypress: (event: KeyboardEvent) => any;
+blur: (event: FocusEvent) => any;
 keyup: (event: KeyboardEvent) => any;
+keypress: (event: KeyboardEvent) => any;
 paste: (event: ClipboardEvent) => any;
-"update:modelValue": (value: string | number) => any;
 leftIconClick: (event: MouseEvent) => any;
 rightIconClick: (event: MouseEvent) => any;
 }, string, PublicProps, Readonly<InBasicTextInputProps> & Readonly<{
 onClick?: ((event: MouseEvent) => any) | undefined;
 onInput?: ((value: string | number) => any) | undefined;
-onBlur?: ((event: FocusEvent) => any) | undefined;
+"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 onChange?: ((value: string | number) => any) | undefined;
 onFocus?: ((event: FocusEvent) => any) | undefined;
-onKeypress?: ((event: KeyboardEvent) => any) | undefined;
+onBlur?: ((event: FocusEvent) => any) | undefined;
 onKeyup?: ((event: KeyboardEvent) => any) | undefined;
+onKeypress?: ((event: KeyboardEvent) => any) | undefined;
 onPaste?: ((event: ClipboardEvent) => any) | undefined;
-"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 onLeftIconClick?: ((event: MouseEvent) => any) | undefined;
 onRightIconClick?: ((event: MouseEvent) => any) | undefined;
 }>, {
@@ -62,7 +75,6 @@ leftIconName: IconNames;
 rightIconName: IconNames;
 type: "text" | "number";
 modelValue: string | number;
-preventXss: boolean;
 theme: "grey" | "white";
 labelStatus: boolean;
 labelText: string;
@@ -80,6 +92,7 @@ maxValue: number | string;
 autoFocus: boolean;
 allowDecimal: boolean;
 allowComma: boolean;
+preventXss: boolean;
 helperMessageStatus: boolean;
 helperMessage: string;
 stateMessage: string;
@@ -88,7 +101,18 @@ componentRoot: HTMLFieldSetElement;
 textInput: HTMLInputElement;
 }, HTMLFieldSetElement>;
 
-declare const __VLS_component_5: DefineComponent<InDropdownMenuProps, {
+declare const __VLS_component_5: DefineComponent<InInfoBoxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<InInfoBoxProps> & Readonly<{}>, {
+variant: "information" | "warning" | "alert" | "smart" | "neutral";
+size: "small" | "medium" | "large";
+theme: "light" | "dark";
+titleStatus: boolean;
+titleText: string;
+descriptionStatus: boolean;
+descriptionText: string;
+fullWidthContentStatus: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare const __VLS_component_6: DefineComponent<InDropdownMenuProps, {
 isOpen: Ref<boolean, boolean>;
 toggleMenu: () => void;
 closeMenu: () => void;
@@ -120,51 +144,43 @@ searchPlaceholder: string;
 showSelectedIcon: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_6: DefineComponent<PopoverProps, {
+declare const __VLS_component_7: DefineComponent<ModalProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+submit: () => any;
+close: () => any;
+}, string, PublicProps, Readonly<ModalProps> & Readonly<{
+onSubmit?: (() => any) | undefined;
+onClose?: (() => any) | undefined;
+}>, {
+hasOverlay: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_8: DefineComponent<PopoverProps, {
 isOpen: Ref<boolean, boolean>;
 toggle: () => void;
 close: () => void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-close: () => any;
 "update:modelValue": (value: boolean) => any;
+close: () => any;
 open: () => any;
 }, string, PublicProps, Readonly<PopoverProps> & Readonly<{
-onClose?: (() => any) | undefined;
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+onClose?: (() => any) | undefined;
 onOpen?: (() => any) | undefined;
 }>, {
 modelValue: boolean;
-align: "left" | "center" | "right";
+position: "bottom" | "top";
+align: "left" | "center" | "right" | "left-side" | "right-side";
+closeOnClickOutside: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 popoverRef: HTMLDivElement;
 contentRef: HTMLDivElement;
 }, HTMLDivElement>;
 
-declare const __VLS_component_7: DefineComponent<InBoxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<InBoxProps> & Readonly<{}>, {
-border: string;
-borderRadius: string;
-borderTriangle: boolean;
-borderTrianglePosition: string;
-borderTriangleAlign: string;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
-
-declare const __VLS_component_8: DefineComponent<ColorPickerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-close: () => any;
-"color-change": (color: string) => any;
-}, string, PublicProps, Readonly<ColorPickerProps> & Readonly<{
-onClose?: (() => any) | undefined;
-"onColor-change"?: ((color: string) => any) | undefined;
-}>, {
-color: string;
-title: string;
-showSaveButton: boolean;
-presetColors: string[];
-showOpacityInHex: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-colorPickerRef: HTMLDivElement;
-hueSliderRef: HTMLDivElement;
-opacitySliderRef: HTMLDivElement;
-}, HTMLDivElement>;
+declare const __VLS_component_9: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+tooltipRef: HTMLDivElement;
+floatingArrowRef: HTMLDivElement;
+triggerRef: HTMLDivElement;
+}, any>;
 
 declare type __VLS_Props = {
     id: string;
@@ -178,24 +194,23 @@ declare type __VLS_Props = {
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
-        contentSlot?(_: {}): any;
         default?(_: {}): any;
     };
-    refs: {
-        tooltipRef: HTMLDivElement;
-        floatingArrowRef: HTMLDivElement;
-        triggerRef: HTMLDivElement;
-    };
-    rootEl: any;
+    refs: {};
+    rootEl: HTMLLabelElement;
 };
 
 declare function __VLS_template_2(): {
     attrs: Partial<{}>;
     slots: {
-        section?(_: {}): any;
+        tabs?(_: {}): any;
     };
-    refs: {};
-    rootEl: any;
+    refs: {
+        colorPickerRef: HTMLDivElement;
+        hueSliderRef: HTMLDivElement;
+        opacitySliderRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
 };
 
 declare function __VLS_template_3(): {
@@ -221,6 +236,15 @@ declare function __VLS_template_4(): {
 };
 
 declare function __VLS_template_5(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_6(): {
     attrs: Partial<{}>;
     slots: {
         trigger?(_: {
@@ -239,7 +263,16 @@ declare function __VLS_template_5(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_6(): {
+declare function __VLS_template_7(): {
+    attrs: Partial<{}>;
+    slots: {
+        section?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_8(): {
     attrs: Partial<{}>;
     slots: {
         trigger?(_: {
@@ -255,26 +288,18 @@ declare function __VLS_template_6(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_7(): {
+declare function __VLS_template_9(): {
     attrs: Partial<{}>;
     slots: {
+        contentSlot?(_: {}): any;
         default?(_: {}): any;
     };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-
-declare function __VLS_template_8(): {
-    attrs: Partial<{}>;
-    slots: {
-        tabs?(_: {}): any;
-    };
     refs: {
-        colorPickerRef: HTMLDivElement;
-        hueSliderRef: HTMLDivElement;
-        opacitySliderRef: HTMLDivElement;
+        tooltipRef: HTMLDivElement;
+        floatingArrowRef: HTMLDivElement;
+        triggerRef: HTMLDivElement;
     };
-    rootEl: HTMLDivElement;
+    rootEl: any;
 };
 
 declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -293,6 +318,8 @@ declare type __VLS_TemplateResult_7 = ReturnType<typeof __VLS_template_7>;
 
 declare type __VLS_TemplateResult_8 = ReturnType<typeof __VLS_template_8>;
 
+declare type __VLS_TemplateResult_9 = ReturnType<typeof __VLS_template_9>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -341,6 +368,12 @@ declare type __VLS_WithTemplateSlots_8<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_9<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 export declare type AllIconNames = IconNames | CustomIconNames;
 
 export declare const Button: DefineComponent<ButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -374,6 +407,18 @@ declare interface ButtonProps {
     customClass?: string;
 }
 
+export declare const Checkbox: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+export declare interface CheckboxProps {
+    id: string;
+    name?: string;
+    label?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    value?: string | number;
+    modelValue?: boolean;
+}
+
 export declare const clickOutside: {
     mounted(el: ClickOutsideElement, binding: DirectiveBinding<DirectiveType>): void;
     unmounted(el: ClickOutsideElement): void;
@@ -384,7 +429,7 @@ declare interface ClickOutsideElement extends HTMLElement {
     clickOutsideCapture?: boolean;
 }
 
-export declare const ColorPicker: __VLS_WithTemplateSlots_8<typeof __VLS_component_8, __VLS_TemplateResult_8["slots"]>;
+export declare const ColorPicker: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
 
 declare interface ColorPickerProps {
     color?: string;
@@ -471,7 +516,7 @@ size: number | string;
  *
  * NOTE: This file was auto-generated from 'icons.svg'
  */
-export declare type IconNames = 'icon-info-box-error' | 'icon-tooltip-info' | 'filled-info-circle' | 'filled-caution-circle' | 'filled-caution-triangle' | 'filled-caution-triangle-colored' | 'filled-error-box-colored' | 'line-plus-netural' | 'line-close-netural' | 'no-color' | 'line-search' | 'filled-dropdown-down' | 'filled-text-bold' | 'filled-text-italic' | 'filled-text-underline' | 'filled-text-strikethrough' | 'line-caution-triangle' | 'filled-error-box' | 'filled-info-circle' | 'line-check-natural' | 'loading-circle' | 'icon-smart' | 'line-reset' | 'line-arrow-left' | 'line-academy-02' | 'line-undo' | 'line-redo' | 'line-ai-message-reply-plus' | 'line-architect-segments-closed' | 'line-ai-send-icon' | 'line-smart-sirius-ai' | 'line-smart-ai' | 'line-minus-netural' | 'line-check-netural' | 'filled-caution-triangle' | 'line-tooltip' | 'gamification-icon' | 'popup-icon' | 'line-delete' | 'line-duplicate' | 'line-test-link' | 'text-color-icon' | 'corner-icon' | 'border-icon' | 'border-color' | 'fill-color-icon' | 'text-icon' | 'mixed-text-color-icon' | 'line-height-icon' | 'letter-spacing-icon' | 'filled-text-aligned-left' | 'filled-text-aligned-center' | 'filled-text-aligned-right' | 'filled-text-aligned-justified' | 'filled-aligned-bottom' | 'filled-aligned-middle' | 'filled-aligned-top' | 'button-actions' | 'border-none' | 'border-solid' | 'border-dashed' | 'border-dotted' | 'individual-borders' | 'border-left' | 'border-top' | 'border-right' | 'border-bottom' | 'corner-top-left' | 'corner-top-right' | 'corner-bottom-left' | 'corner-bottom-right' | 'corners-individual' | 'padding-horizontal' | 'padding-vertical' | 'padding-individual' | 'padding-left' | 'padding-right' | 'padding-bottom' | 'padding-top' | 'line-password' | 'line-left-to-bottom' | 'line-right-to-top' | 'line-horizontal' | 'line-vertical' | 'line-change';
+export declare type IconNames = 'icon-info-box-error' | 'icon-tooltip-info' | 'filled-info-circle' | 'filled-caution-circle' | 'filled-caution-triangle' | 'filled-caution-triangle-colored' | 'filled-error-box-colored' | 'line-plus-netural' | 'line-close-netural' | 'no-color' | 'line-search' | 'filled-dropdown-down' | 'dropdown-down-icon' | 'filled-text-bold' | 'filled-text-italic' | 'filled-text-underline' | 'filled-text-strikethrough' | 'line-caution-triangle' | 'filled-error-box' | 'filled-info-circle' | 'line-check-natural' | 'loading-circle' | 'icon-smart' | 'line-reset' | 'line-arrow-left' | 'line-academy-02' | 'line-undo' | 'line-redo' | 'line-ai-message-reply-plus' | 'line-architect-segments-closed' | 'line-ai-send-icon' | 'line-smart-sirius-ai' | 'line-smart-ai' | 'line-minus-netural' | 'line-check-netural' | 'filled-caution-triangle' | 'line-tooltip' | 'gamification-icon' | 'popup-icon' | 'line-delete' | 'line-duplicate' | 'line-test-link' | 'text-color-icon' | 'corner-icon' | 'border-icon' | 'border-color' | 'fill-color-icon' | 'text-icon' | 'mixed-text-color-icon' | 'line-height-icon' | 'letter-spacing-icon' | 'filled-text-aligned-left' | 'filled-text-aligned-center' | 'filled-text-aligned-right' | 'filled-text-aligned-justified' | 'filled-aligned-bottom' | 'filled-aligned-middle' | 'filled-aligned-top' | 'button-actions' | 'border-none' | 'border-solid' | 'border-dashed' | 'border-dotted' | 'individual-borders' | 'border-left' | 'border-top' | 'border-right' | 'border-bottom' | 'corner-top-left' | 'corner-top-right' | 'corner-bottom-left' | 'corner-bottom-right' | 'corners-individual' | 'padding-horizontal' | 'padding-vertical' | 'padding-individual' | 'padding-left' | 'padding-right' | 'padding-bottom' | 'padding-top' | 'line-password' | 'line-left-to-bottom' | 'line-right-to-top' | 'line-horizontal' | 'line-vertical' | 'line-change' | 'feedback-helpful' | 'feedback-not-helpful' | 'feedback-helpful-selected' | 'feedback-not-helpful-selected';
 
 declare interface IconProps {
     name: AllIconNames;
@@ -513,7 +558,7 @@ declare interface InBasicTextInputProps {
     stateMessage?: string;
 }
 
-export declare const InBox: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
+export declare const InBox: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
 
 declare interface InBoxProps {
     border?: string;
@@ -523,7 +568,7 @@ declare interface InBoxProps {
     borderTriangleAlign?: string;
 }
 
-export declare const InDropdownMenu: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
+export declare const InDropdownMenu: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
 
 declare interface InDropdownMenuProps {
     modelValue?: string;
@@ -537,7 +582,7 @@ declare interface InDropdownMenuProps {
     showSelectedIcon?: boolean;
 }
 
-export declare const InInfoBox: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
+export declare const InInfoBox: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
 
 export declare interface InInfoBoxProps {
     id: string;
@@ -586,11 +631,11 @@ declare interface InputButtonProps {
 }
 
 export declare const InTabs: DefineComponent<InTabsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-change: (value: string) => any;
 "update:modelValue": (value: string) => any;
+change: (value: string) => any;
 }, string, PublicProps, Readonly<InTabsProps> & Readonly<{
-onChange?: ((value: string) => any) | undefined;
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+onChange?: ((value: string) => any) | undefined;
 }>, {
 disabled: boolean;
 modelValue: string;
@@ -606,27 +651,27 @@ export declare const InTextArea: DefineComponent<InTextAreaProps, {
 textareaRef: Ref<HTMLTextAreaElement | undefined, HTMLTextAreaElement | undefined>;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 click: (event: MouseEvent) => any;
+"update:modelValue": (value: string) => any;
 blur: (event: FocusEvent) => any;
-cut: (event: ClipboardEvent) => any;
-keypress: (event: KeyboardEvent) => any;
 keyup: (event: KeyboardEvent) => any;
+keypress: (event: KeyboardEvent) => any;
 paste: (event: ClipboardEvent) => any;
-"update:modelValue": (value: string) => any;
+cut: (event: ClipboardEvent) => any;
 }, string, PublicProps, Readonly<InTextAreaProps> & Readonly<{
 onClick?: ((event: MouseEvent) => any) | undefined;
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
 onBlur?: ((event: FocusEvent) => any) | undefined;
-onCut?: ((event: ClipboardEvent) => any) | undefined;
-onKeypress?: ((event: KeyboardEvent) => any) | undefined;
 onKeyup?: ((event: KeyboardEvent) => any) | undefined;
+onKeypress?: ((event: KeyboardEvent) => any) | undefined;
 onPaste?: ((event: ClipboardEvent) => any) | undefined;
-"onUpdate:modelValue"?: ((value: string) => any) | undefined;
+onCut?: ((event: ClipboardEvent) => any) | undefined;
 }>, {
 label: string;
 disabled: boolean;
 type: "default" | "smart";
-invalid: boolean;
-preventXss: boolean;
 theme: "grey" | "white";
+preventXss: boolean;
+invalid: boolean;
 withLabel: boolean;
 invalidMessage: string;
 rowLength: number;
@@ -649,6 +694,10 @@ export declare interface InTextAreaProps {
     rowLength?: number;
     preventXss?: boolean;
     maxLength?: number;
+    width?: string;
+    height?: string;
+    padding?: string;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
 }
 
 export declare const InToggle: DefineComponent<InToggleProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -681,7 +730,7 @@ declare interface MenuItem_2 {
     value: string;
 }
 
-export declare const Modal: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+export declare const Modal: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
 
 declare interface ModalProps {
     title: string;
@@ -692,29 +741,29 @@ declare interface ModalProps {
     hasOverlay?: boolean;
 }
 
-export declare const NumberInput: DefineComponent<Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+export declare const NumberInput: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 input: (event: Event) => any;
-blur: (event: FocusEvent) => any;
+"update:modelValue": (args_0: number | undefined) => any;
 change: (event: Event) => any;
 focus: (event: FocusEvent) => any;
+blur: (event: FocusEvent) => any;
 paste: (event: ClipboardEvent) => any;
-"update:modelValue": (args_0: number | undefined) => any;
-}, string, PublicProps, Readonly<Props_2> & Readonly<{
+}, string, PublicProps, Readonly<Props> & Readonly<{
 onInput?: ((event: Event) => any) | undefined;
-onBlur?: ((event: FocusEvent) => any) | undefined;
+"onUpdate:modelValue"?: ((args_0: number | undefined) => any) | undefined;
 onChange?: ((event: Event) => any) | undefined;
 onFocus?: ((event: FocusEvent) => any) | undefined;
+onBlur?: ((event: FocusEvent) => any) | undefined;
 onPaste?: ((event: ClipboardEvent) => any) | undefined;
-"onUpdate:modelValue"?: ((args_0: number | undefined) => any) | undefined;
 }>, {
 size: "default" | "small";
 label: string;
-placeholder: string;
-error: string;
 modelValue: number;
-maxLength: number;
+error: string;
+placeholder: string;
 min: number;
 max: number;
+maxLength: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 export declare const OnPageMessage: DefineComponent<OnPageMessageProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<OnPageMessageProps> & Readonly<{}>, {
@@ -726,40 +775,42 @@ declare interface OnPageMessageProps {
     text: string;
 }
 
-export declare const Popover: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
+export declare const Popover: __VLS_WithTemplateSlots_8<typeof __VLS_component_8, __VLS_TemplateResult_8["slots"]>;
 
 declare interface PopoverProps {
     modelValue?: boolean;
-    align?: 'left' | 'center' | 'right';
+    align?: 'left' | 'center' | 'right' | 'left-side' | 'right-side';
+    position?: 'bottom' | 'top';
+    closeOnClickOutside?: boolean;
 }
 
 declare interface Props {
     id: string;
     name: string;
-    modelValue?: string;
+    modelValue?: number;
     label?: string;
     placeholder?: string;
     maxLength?: number;
-    maxHeight?: number;
     error?: string;
-    multiline?: boolean;
-    autoGrow?: boolean;
+    errorStatus?: boolean;
     counter?: boolean;
+    min?: number;
+    max?: number;
+    size?: 'default' | 'small';
 }
 
 declare interface Props_2 {
     id: string;
     name: string;
-    modelValue?: number;
+    modelValue?: string;
     label?: string;
     placeholder?: string;
     maxLength?: number;
+    maxHeight?: number;
     error?: string;
-    errorStatus?: boolean;
+    multiline?: boolean;
+    autoGrow?: boolean;
     counter?: boolean;
-    min?: number;
-    max?: number;
-    size?: 'default' | 'small';
 }
 
 export declare const SegmentButton: DefineComponent<SegmentButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -797,25 +848,25 @@ export declare interface TabItem {
     disabled?: boolean;
 }
 
-export declare const TextInput: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+export declare const TextInput: DefineComponent<Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 input: (event: Event) => any;
-blur: (event: FocusEvent) => any;
+"update:modelValue": (args_0: string | undefined) => any;
 change: (event: Event) => any;
 focus: (event: FocusEvent) => any;
+blur: (event: FocusEvent) => any;
 paste: (event: ClipboardEvent) => any;
-"update:modelValue": (args_0: string | undefined) => any;
-}, string, PublicProps, Readonly<Props> & Readonly<{
+}, string, PublicProps, Readonly<Props_2> & Readonly<{
 onInput?: ((event: Event) => any) | undefined;
-onBlur?: ((event: FocusEvent) => any) | undefined;
+"onUpdate:modelValue"?: ((args_0: string | undefined) => any) | undefined;
 onChange?: ((event: Event) => any) | undefined;
 onFocus?: ((event: FocusEvent) => any) | undefined;
+onBlur?: ((event: FocusEvent) => any) | undefined;
 onPaste?: ((event: ClipboardEvent) => any) | undefined;
-"onUpdate:modelValue"?: ((args_0: string | undefined) => any) | undefined;
 }>, {
 label: string;
-placeholder: string;
-error: string;
 modelValue: string;
+error: string;
+placeholder: string;
 maxHeight: number;
 maxLength: number;
 multiline: boolean;
@@ -840,6 +891,6 @@ declare interface ToggleProps {
     disabled?: boolean;
 }
 
-export declare const Tooltip: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export declare const Tooltip: __VLS_WithTemplateSlots_9<typeof __VLS_component_9, __VLS_TemplateResult_9["slots"]>;
 
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/ab-components",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "type": "module",
   "files": [
     "dist"
@@ -29,9 +29,9 @@
     "test:unit": "vitest",
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
-    "pack:move": "npm pack --pack-destination ../design-editor",
-    "publish:sdb": "npm run build && npm pack && docker cp ./useinsider-ab-components-0.0.59.tgz  skeleton_design_bundle:/var/skeleton-design-bundle/design-editor-modules/ && docker exec -it skeleton_design_bundle sh -c 'npm i /var/skeleton-design-bundle/design-editor-modules/useinsider-ab-components-0.0.59.tgz && npm run dev'",
-    "publish:def": "npm run build && npm run pack:move && cd ../design-editor && npm i ./useinsider-ab-components-0.0.59.tgz && npm run dev",
+    "pack:move": "npm pack --pack-destination ../design-editor-frontend",
+    "publish:sdb": "npm run build && npm pack && docker cp ./useinsider-ab-components-0.0.61.tgz  skeleton_design_bundle:/var/skeleton-design-bundle/design-editor-modules/ && docker exec -it skeleton_design_bundle sh -c 'npm i /var/skeleton-design-bundle/design-editor-modules/useinsider-ab-components-0.0.61.tgz && npm run dev'",
+    "publish:def": "npm run build && npm run pack:move && cd ../design-editor-frontend && npm i ./useinsider-ab-components-0.0.61.tgz && npm run dev",
     "lint": "eslint . --fix",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"