@weni/unnnic-system 3.2.7-alpha.0 → 3.2.8

package/src/components/TableNext/__test__/__snapshots__/TableNext.spec.js.snap

@@ -42,7 +42,7 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
     <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 1 of 1</p>
     <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--ant unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
+        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
           <path d="M26.8368 35.0005C26.5868 35.0005 26.3506 34.903 26.1743 34.7255L12.7743 21.3255C12.4206 20.9717 12.2256 20.5017 12.2256 20.0017C12.2256 19.5017 12.4193 19.0305 12.7731 18.6767L26.1743 5.27549C26.3506 5.09799 26.5868 5.00049 26.8368 5.00049C27.0868 5.00049 27.3231 5.09799 27.4993 5.27549C27.6768 5.45174 27.7743 5.68799 27.7743 5.93799C27.7743 6.18799 27.6768 6.42424 27.4993 6.60049L14.0993 20.0005L27.4993 33.4005C27.6768 33.578 27.7743 33.813 27.7743 34.063C27.7743 34.313 27.6768 34.5492 27.4993 34.7255C27.3218 34.9017 27.0868 35.0005 26.8368 35.0005Z" fill="#3B414D" class="primary"></path>
         </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
@@ -53,7 +53,7 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
         <!--v-if-->
       </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--ant unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
+        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
           <path d="M13.1635 35.0005C12.9135 35.0005 12.6772 34.903 12.501 34.7255C12.136 34.3605 12.136 33.7655 12.501 33.3992L25.901 20.0005L12.501 6.60049C12.3235 6.42424 12.226 6.18799 12.226 5.93799C12.226 5.68799 12.3235 5.45174 12.501 5.27549C12.6772 5.09799 12.9135 5.00049 13.1635 5.00049C13.4135 5.00049 13.6497 5.09799 13.826 5.27549L27.226 18.6755C27.956 19.4055 27.9572 20.5942 27.2272 21.3242L13.826 34.7255C13.6497 34.903 13.4135 35.0005 13.1635 35.0005Z" fill="#3B414D" class="primary"></path>
         </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->

package/src/components/TableNext/__test__/__snapshots__/TablePagination.spec.js.snap

@@ -5,7 +5,7 @@ exports[`TablePagination.vue > matches the snapshot 1`] = `
   <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 10 of 100</p>
   <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--ant unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
+      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
         <path d="M26.8368 35.0005C26.5868 35.0005 26.3506 34.903 26.1743 34.7255L12.7743 21.3255C12.4206 20.9717 12.2256 20.5017 12.2256 20.0017C12.2256 19.5017 12.4193 19.0305 12.7731 18.6767L26.1743 5.27549C26.3506 5.09799 26.5868 5.00049 26.8368 5.00049C27.0868 5.00049 27.3231 5.09799 27.4993 5.27549C27.6768 5.45174 27.7743 5.68799 27.7743 5.93799C27.7743 6.18799 27.6768 6.42424 27.4993 6.60049L14.0993 20.0005L27.4993 33.4005C27.6768 33.578 27.7743 33.813 27.7743 34.063C27.7743 34.313 27.6768 34.5492 27.4993 34.7255C27.3218 34.9017 27.0868 35.0005 26.8368 35.0005Z" fill="#3B414D" class="primary"></path>
       </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
@@ -36,7 +36,7 @@ exports[`TablePagination.vue > matches the snapshot 1`] = `
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--ant unnnic-icon-scheme--neutral-dark" data-testid="icon-center" style="visibility: visible;">
+      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-dark" data-testid="icon-center" style="visibility: visible;">
         <path d="M13.1635 35.0005C12.9135 35.0005 12.6772 34.903 12.501 34.7255C12.136 34.3605 12.136 33.7655 12.501 33.3992L25.901 20.0005L12.501 6.60049C12.3235 6.42424 12.226 6.18799 12.226 5.93799C12.226 5.68799 12.3235 5.45174 12.501 5.27549C12.6772 5.09799 12.9135 5.00049 13.1635 5.00049C13.4135 5.00049 13.6497 5.09799 13.826 5.27549L27.226 18.6755C27.956 19.4055 27.9572 20.5942 27.2272 21.3242L13.826 34.7255C13.6497 34.903 13.4135 35.0005 13.1635 35.0005Z" fill="#3B414D" class="primary"></path>
       </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->

package/src/components/Tag/TagNext.vue

@@ -1,10 +1,5 @@
 <template>
-  <section 
-    :class="[
-      'unnnic-tag-next',
-      `unnnic-tag-next--${scheme}`
-    ]"
-  >
+  <section :class="['unnnic-tag-next', `unnnic-tag-next--${scheme}`]">
     <p class="unnnic-tag-next__text">
       {{ text }}
     </p>
@@ -61,6 +56,5 @@ export default {
     background-color: $unnnic-color-weni-100;
     color: $unnnic-color-weni-600;
   }
-
 }
-</style> 
+</style>

package/src/components/TextArea/TextArea.vue

@@ -18,14 +18,13 @@
       :disabled="disabled"
       :value="modelValue"
       @input="$emit('update:modelValue', fullySanitize($event.target.value))"
-    />
+    ></textarea>
 
     <template
       v-if="maxLength"
       #rightMessage
+      >{{ modelValue.length }}/{{ maxLength }}</template
     >
-      {{ modelValue.length }}/{{ maxLength }}
-    </template>
   </UnnnicFormElement>
 </template>
 
@@ -97,12 +96,6 @@ export default {
 @use '@/assets/scss/unnnic' as *;
 @use '@/components/Input/Input' as *;
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 .unnnic-text-area {
   &__textarea {
     @include input-base;
@@ -110,22 +103,24 @@ export default {
     display: block;
     width: 100%;
     resize: vertical;
+    box-sizing: border-box;
 
     scrollbar-width: thin;
 
-    padding: $unnnic-space-3 $unnnic-space-4;
-
     &--size-md {
       @include input-md-font;
 
-      min-height: 100px;
-      
+      min-height: 6.25 * $unnnic-font-size;
+      padding: ($unnnic-spacing-ant - $unnnic-border-width-thinner)
+        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
     }
 
     &--size-sm {
       @include input-sm-font;
 
-      min-height: $unnnic-space-20;
+      min-height: 5 * $unnnic-font-size;
+      padding: ($unnnic-spacing-xs)
+        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
     }
 
     &.unnnic-text-area__textarea--type-error {

package/src/components/TextArea/__test__/__snapshots__/TextArea.spec.js.snap

@@ -3,12 +3,7 @@
 exports[`TextArea.vue > matches the snapshot 1`] = `
 "<section data-v-9f8d6c86="" data-v-735b3c51="" class="unnnic-form-element">
   <p data-v-9f8d6c86="" class="unnnic-form-element__label">Description</p><textarea data-v-735b3c51="" class="unnnic-text-area__textarea unnnic-text-area__textarea--size-md unnnic-text-area__textarea--type-normal" placeholder="Enter text" maxlength="200" value=""></textarea>
-  <section data-v-9f8d6c86="" class="unnnic-form-element__hints-container">
-    <section data-v-9f8d6c86="" class="unnnic-form-element__message-container">
-      <!--v-if-->
-      <!--v-if-->
-    </section>
-    <p data-v-9f8d6c86="">0/200</p>
-  </section>
+  <!--v-if-->
+  <p data-v-9f8d6c86="" class="unnnic-form-element__message"> <span data-v-9f8d6c86="" class="unnnic-form-element__right-message">0/200</span></p>
 </section>"
 `;

package/src/components/Tour/TourPopover.vue

@@ -128,7 +128,7 @@ export default {
         left: attachedTop - popoverHeight / 2 + attachedHeight / 2,
       };
 
-      let style = {
+      const style = {
         transform: `translate(${translateXMap[step.popoverPosition]}px, ${translateYMap[step.popoverPosition]}px)`,
         transition: 'transform .3s ease',
       };

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

@@ -35,8 +35,8 @@ const commonTests = async (wrapper) => {
 describe('Icon', () => {
   it('should accept valid lineHeight props', () => {
     const validValues = ['sm', 'md', 'lg', null];
-    
-    validValues.forEach(value => {
+
+    validValues.forEach((value) => {
       const wrapper = createWrapper({ lineHeight: value });
       expect(wrapper.exists()).toBe(true);
     });

package/src/components/index.ts

@@ -1,97 +1,95 @@
-import type { Component } from "vue";
-import { unnnicFontSize as fontSize } from "./config";
-import formElement from "./FormElement/FormElement.vue";
-import input from "./Input/Input.vue";
-import inputNext from "./InputNext/InputNext.vue";
-import inputDatePicker from "./InputDatePicker/InputDatePicker.vue";
-import button from "./Button/Button.vue";
-import buttonIcon from "./Button/ButtonIcon.vue";
-import sidebar from "./Sidebar/index.vue";
-import sidebarItem from "./Sidebar/SidebarItem.vue";
-import table from "./Table/Table.vue";
-import tableRow from "./Table/TableRow.vue";
-import dropdown from "./Dropdown/Dropdown.vue";
-import dropdownItem from "./Dropdown/DropdownItem.vue";
-import avatarIcon from "./AvatarIcon/AvatarIcon.vue";
-import icon from "./Icon.vue";
-import iconLoading from "./IconLoading/IconLoading.vue";
-import toolTip from "./ToolTip/ToolTip.vue";
-import card from "./Card/Card.vue";
-import cardSimple from "./Card/SimpleCard.vue";
-import cardCompany from "./Card/CardCompany.vue";
-import cardData from "./Card/CardData.vue";
-import cardImage from "./CardImage/CardImage.vue";
+import type { Component } from 'vue';
+import { unnnicFontSize as fontSize } from './config';
+import formElement from './FormElement/FormElement.vue';
+import input from './Input/Input.vue';
+import inputNext from './InputNext/InputNext.vue';
+import inputDatePicker from './InputDatePicker/InputDatePicker.vue';
+import button from './Button/Button.vue';
+import buttonIcon from './Button/ButtonIcon.vue';
+import sidebar from './Sidebar/index.vue';
+import sidebarItem from './Sidebar/SidebarItem.vue';
+import table from './Table/Table.vue';
+import tableRow from './Table/TableRow.vue';
+import dropdown from './Dropdown/Dropdown.vue';
+import dropdownItem from './Dropdown/DropdownItem.vue';
+import avatarIcon from './AvatarIcon/AvatarIcon.vue';
+import icon from './Icon.vue';
+import iconLoading from './IconLoading/IconLoading.vue';
+import toolTip from './ToolTip/ToolTip.vue';
+import card from './Card/Card.vue';
+import cardSimple from './Card/SimpleCard.vue';
+import cardCompany from './Card/CardCompany.vue';
+import cardData from './Card/CardData.vue';
+import cardImage from './CardImage/CardImage.vue';
 // import cardFlow from './CardFlow/CardFlow.vue';
-import cardProject from "./CardProject/CardProject.vue";
-import cardInformation from "./CardInformation/CardInformation.vue";
-import checkbox from "./Checkbox/Checkbox.vue";
-import collapse from "./Collapse/Collapse.vue";
-import radio from "./Radio/Radio.vue";
-import languageSelect from "./Dropdown/LanguageSelect.vue";
-import modal from "./Modal/Modal.vue";
-import modalUpload from "./ModalUpload/ModalUpload.vue";
-import { callAlert, callModal } from "../utils/call";
-import selectSmart from "./SelectSmart/SelectSmart.vue";
+import cardProject from './CardProject/CardProject.vue';
+import cardInformation from './CardInformation/CardInformation.vue';
+import checkbox from './Checkbox/Checkbox.vue';
+import collapse from './Collapse/Collapse.vue';
+import radio from './Radio/Radio.vue';
+import languageSelect from './Dropdown/LanguageSelect.vue';
+import modal from './Modal/Modal.vue';
+import modalUpload from './ModalUpload/ModalUpload.vue';
+import { callAlert, callModal } from '../utils/call';
+import selectSmart from './SelectSmart/SelectSmart.vue';
 // import select from './Select/Select.vue';
-import selectItem from "./Select/SelectItem.vue";
+import selectItem from './Select/SelectItem.vue';
 // import selectListItem from './SelectListItem/SelectListItem.vue';
-import multiSelect from "./MultiSelect/MultiSelect.vue";
-import alert from "./Alert/Alert.vue";
+import multiSelect from './MultiSelect/MultiSelect.vue';
+import alert from './Alert/Alert.vue';
 // import autocomplete from './Input/Autocomplete.vue';
 // import autocompleteSelect from './AutocompleteSelect/AutocompleteSelect.vue';
-import tag from "./Tag/Tag.vue";
-import accordion from "./Accordion/Accordion.vue";
-import indicator from "./Indicator/Indicator.vue";
-import skeletonLoading from "./SkeletonLoading/SkeletonLoading.vue"; // TODO: Unbreak this component
-import carousel from "./Carousel/Carousel.vue";
-import label from "./Label/Label.vue";
-import tab from "./Tab/Tab.vue";
-import tabsExpanded from "./TabsExpanded/TabsExpanded.vue";
-import banner from "./Banner/Banner.vue";
-import comment from "./Comment/Comment.vue";
-import datePicker from "./DatePicker/DatePicker.vue";
-import breadcrumb from "./Breadcrumb/Breadcrumb.vue";
-import Switch from "./Switch/Switch.vue";
-import Slider from "./Slider/Slider.vue";
-import DataArea from "./DataArea/DataArea.vue";
-import Pagination from "./Pagination/Pagination.vue";
-import DropArea from "./DropArea/DropArea.vue";
-import UploadArea from "./UploadArea/UploadArea.vue";
-import ImportCard from "./ImportCard/ImportCard.vue";
-import DateFilter from "./DateFilter/DateFilter.vue";
-import ChatText from "./ChatText/ChatText.vue";
-import TextArea from "./TextArea/TextArea.vue";
-import CardNumber from "./CardNumber/CardNumber.vue";
-import chartRainbow from "./ChartRainbow/ChartRainbow.vue";
-import chartBar from "./ChartBar/ChartBar.vue";
-import chartLine from "./ChartLine/ChartLine.vue";
-import moodRating from "./MoodRating/MoodRating.vue";
-import starRating from "./StarRating/StarRating.vue";
-import audioRecorder from "./AudioRecorder/AudioRecorder.vue";
-import circleProgressBar from "./CircleProgressBar/CircleProgressBar.vue";
-import progressBar from "./ProgressBar/ProgressBar.vue";
-import ChatsContact from "./ChatsContact/ChatsContact.vue";
-import ChatsDashboardTagLive from "./ChatsDashboardTagLive/ChatsDashboardTagLive.vue";
-import ChatsHeader from "./ChatsHeader/ChatsHeader.vue";
-import ChatsMessage from "./ChatsMessage/ChatsMessage.vue";
-import ReplyMessage from "./ChatsMessage/ReplyMessage.vue";
-import ChatsNavbar from "./ChatsNavbar/ChatsNavbar.vue";
-import ChatsUserAvatar from "./ChatsUserAvatar/ChatsUserAvatar.vue";
-import ChartMultiLine from "./ChartMultiLine/ChartMultiLine.vue";
-import EmojiPicker from "./EmojiPicker/EmojiPicker.vue";
-import ChartFunnel from "./ChartFunnel/ChartFunnel.vue";
-import Disclaimer from "./Disclaimer/Disclaimer.vue";
-import Drawer from "./Drawer/Drawer.vue";
-import TableNext from "./TableNext/TableNext.vue";
-import ModalNext from "./ModalNext/ModalNext.vue";
-import ModalDialog from "./ModalDialog/ModalDialog.vue";
-import Tour from "./Tour/Tour.vue";
-import Navigator from "./Navigator/index.vue";
-import SelectTime from "./SelectTime/index.vue";
-import TemplatePreview from "./TemplatePreview/TemplatePreview.vue";
-import TemplatePreviewModal from "./TemplatePreview/TemplatePreviewModal.vue";
+import tag from './Tag/Tag.vue';
+import accordion from './Accordion/Accordion.vue';
+import indicator from './Indicator/Indicator.vue';
+import skeletonLoading from './SkeletonLoading/SkeletonLoading.vue'; // TODO: Unbreak this component
+import carousel from './Carousel/Carousel.vue';
+import label from './Label/Label.vue';
+import tab from './Tab/Tab.vue';
+import tabsExpanded from './TabsExpanded/TabsExpanded.vue';
+import banner from './Banner/Banner.vue';
+import comment from './Comment/Comment.vue';
+import datePicker from './DatePicker/DatePicker.vue';
+import breadcrumb from './Breadcrumb/Breadcrumb.vue';
+import Switch from './Switch/Switch.vue';
+import Slider from './Slider/Slider.vue';
+import DataArea from './DataArea/DataArea.vue';
+import Pagination from './Pagination/Pagination.vue';
+import DropArea from './DropArea/DropArea.vue';
+import UploadArea from './UploadArea/UploadArea.vue';
+import ImportCard from './ImportCard/ImportCard.vue';
+import DateFilter from './DateFilter/DateFilter.vue';
+import ChatText from './ChatText/ChatText.vue';
+import TextArea from './TextArea/TextArea.vue';
+import CardNumber from './CardNumber/CardNumber.vue';
+import chartRainbow from './ChartRainbow/ChartRainbow.vue';
+import chartBar from './ChartBar/ChartBar.vue';
+import chartLine from './ChartLine/ChartLine.vue';
+import moodRating from './MoodRating/MoodRating.vue';
+import starRating from './StarRating/StarRating.vue';
+import audioRecorder from './AudioRecorder/AudioRecorder.vue';
+import circleProgressBar from './CircleProgressBar/CircleProgressBar.vue';
+import progressBar from './ProgressBar/ProgressBar.vue';
+import ChatsContact from './ChatsContact/ChatsContact.vue';
+import ChatsDashboardTagLive from './ChatsDashboardTagLive/ChatsDashboardTagLive.vue';
+import ChatsHeader from './ChatsHeader/ChatsHeader.vue';
+import ChatsMessage from './ChatsMessage/ChatsMessage.vue';
+import ReplyMessage from './ChatsMessage/ReplyMessage.vue';
+import ChatsNavbar from './ChatsNavbar/ChatsNavbar.vue';
+import ChatsUserAvatar from './ChatsUserAvatar/ChatsUserAvatar.vue';
+import ChartMultiLine from './ChartMultiLine/ChartMultiLine.vue';
+import EmojiPicker from './EmojiPicker/EmojiPicker.vue';
+import ChartFunnel from './ChartFunnel/ChartFunnel.vue';
+import Disclaimer from './Disclaimer/Disclaimer.vue';
+import Drawer from './Drawer/Drawer.vue';
+import TableNext from './TableNext/TableNext.vue';
+import ModalNext from './ModalNext/ModalNext.vue';
+import ModalDialog from './ModalDialog/ModalDialog.vue';
+import Tour from './Tour/Tour.vue';
+import Navigator from './Navigator/index.vue';
+import SelectTime from './SelectTime/index.vue';
 import DataTable from './DataTable/index.vue';
-import Chip from "./Chip/Chip.vue";
+import Chip from './Chip/Chip.vue';
 
 type VueComponent = Component;
 
@@ -190,8 +188,6 @@ export const components: ComponentsMap = {
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
   unnnicSelectTime: SelectTime,
-  unnnicTemplatePreview: TemplatePreview,
-  unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
   unnnicChip: Chip,
 };
@@ -286,10 +282,8 @@ export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
-export const unnnicSelectTime = SelectTime as VueComponent;
-export const unnnicTemplatePreview = TemplatePreview as VueComponent;
-export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 export const unnnicDataTable = DataTable as VueComponent;
+export const unnnicSelectTime = SelectTime as VueComponent;
 export const unnnicChip = Chip;
 
 export const UnnnicFontSize = fontSize;
@@ -382,8 +376,6 @@ export const UnnnicDrawer = Drawer;
 export const UnnnicTableNext = TableNext;
 export const UnnnicTour = Tour;
 export const UnnnicNavigator = Navigator;
-export const UnnnicSelectTime = SelectTime as VueComponent;
-export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
-export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 export const UnnnicDataTable = DataTable as VueComponent;
+export const UnnnicSelectTime = SelectTime as VueComponent;
 export const UnnnicChip = Chip;

package/src/index.ts

@@ -16,4 +16,4 @@ const Unnnic: UnnnicPlugin = {
 };
 
 export default Unnnic;
-export * from '@/components'; 
+export * from '@/components';

package/src/main.ts

@@ -5,4 +5,4 @@ import Unnnic from './index';
 const app = createApp(App);
 
 app.use(Unnnic);
-app.mount('#app'); 
+app.mount('#app');

package/src/stories/Button.stories.js

@@ -8,7 +8,7 @@ export default {
       description: {
         component: `Allows users to perform an action or navigate to another page. 
           It has styles for various needs and are ideal for directing the user's attention. 
-          It is divided into 5 types: Primary, Secondary, Tertiary, Warning, Attention.
+          It is divided into 6 types: Primary, Secondary, Tertiary, Alternative, Warning, Attention.
           Each of these types has its states.
           <br/>
           <br/>
@@ -40,6 +40,7 @@ export default {
         'primary',
         'secondary',
         'tertiary',
+        'alternative',
         'warning',
         'attention',
       ],
@@ -103,7 +104,7 @@ export const FilledIcon = {
   args: {
     text: 'Button Text',
     iconLeft: 'play_arrow',
-    iconsFilled: true, 
+    iconsFilled: true,
   },
 };
 
@@ -113,6 +114,14 @@ export const OnlyIcon = {
   },
 };
 
+export const Alternative = {
+  args: {
+    type: 'alternative',
+    iconLeft: 'add',
+    text: 'Text',
+  },
+};
+
 export const Warning = {
   parameters: {
     docs: {

package/src/stories/ChatsHeader.stories.js

@@ -51,7 +51,7 @@ export const ContactRightSlot = {
         </template>
       </UnnnicChatsHeader>`,
   }),
-}
+};
 
 export const Dashboard = {
   args: {

package/src/stories/ChatsMessage.stories.js

@@ -103,7 +103,6 @@ export default {
 
 export const Default = { args: {} };
 
-
 export const Automatic = {
   args: {
     automatic: true,

package/src/stories/Chip.stories.js

@@ -25,7 +25,8 @@ export default {
     type: {
       control: { type: 'select' },
       options: ['single', 'multiple'],
-      description: 'The type of chip - single for basic display, multiple for selection with icons',
+      description:
+        'The type of chip - single for basic display, multiple for selection with icons',
     },
     text: {
       control: { type: 'text' },
@@ -33,7 +34,8 @@ export default {
     },
     isSelected: {
       control: { type: 'boolean' },
-      description: 'Whether the chip is in selected state (affects styling and icons)',
+      description:
+        'Whether the chip is in selected state (affects styling and icons)',
     },
     count: {
       control: { type: 'number' },
@@ -41,7 +43,8 @@ export default {
     },
     isClickable: {
       control: { type: 'boolean' },
-      description: 'Whether the chip should show clickable styling (cursor pointer)',
+      description:
+        'Whether the chip should show clickable styling (cursor pointer)',
     },
   },
 };
@@ -170,4 +173,4 @@ export const Interactive = {
       />
     `,
   }),
-};
+};

package/src/stories/Input.stories.js

@@ -35,7 +35,9 @@ export default {
       },
     },
     template: `
-        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" label="Label" />
+      <unnnic-form-element label="Label" message="Helper text">
+        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
+      </unnnic-form-element>
     `,
   }),
 };
@@ -154,20 +156,4 @@ export const Mask = {
     placeholder: 'Text',
     mask: ['###.###.###-##', '##.###.###/####-##'],
   },
-
-};
-
-export const LimitMaxLength = {
-  args: {
-    placeholder: 'Text',
-    maxlength: 10,
-    showMaxlengthCounter: true,
-  },
 };
-
-export const WithTooltip = {
-  args: {
-    placeholder: 'Text',
-    tooltip: 'Tooltip',
-  },
-};

package/src/stories/SelectSmart.stories.js

@@ -284,7 +284,7 @@ export const Multiple = {
       { value: 'spain', label: 'Espanha' },
       { value: 'saudi_arabia', label: 'Arábia Saudita' },
     ],
-    multiple:true,
+    multiple: true,
     multipleWithoutSelectsMessage: 'No country selected yet :(',
   },
 };

package/src/stories/TableNext.stories.js

@@ -111,7 +111,7 @@ const addButton = {
   events: {
     click: (event) => {
       event.preventDefault();
-      // eslint-disable-next-line no-alert
+
       console.log('click');
     },
   },

package/src/types/index.d.ts

@@ -1,6 +1,6 @@
-import type { App, Component } from "vue";
+import type { App, Component } from 'vue';
 
-export type { IconProps } from "../components/Icon.vue";
+export type { IconProps } from '../components/Icon.vue';
 
 export interface UnnnicPlugin {
   install(app: App): void;

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

@@ -1,4 +1,4 @@
-export type SchemeColor = 
+export type SchemeColor =
   | 'background-solo'
   | 'background-sky'
   | 'background-grass'
@@ -99,4 +99,3 @@ export type SchemeColor =
   | 'teal-800'
   | 'teal-900'
   | 'teal-950';
-