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

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

@@ -0,0 +1,164 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import Chip from '../Chip.vue';
+
+const createWrapper = (props) => {
+  return mount(Chip, {
+    props,
+    global: {
+      stubs: {
+        UnnnicIcon: true,
+      },
+    },
+  });
+};
+
+describe('Chip', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createWrapper({ text: 'Test Chip', type: 'single' });
+  });
+
+  describe('Basic rendering', () => {
+    it('should render the chip with text', () => {
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.text()).toContain('Test Chip');
+      expect(wrapper.classes()).toContain('chip');
+    });
+
+    it('should render with default unselected state', () => {
+      expect(wrapper.classes()).toContain('chip--border');
+      expect(wrapper.classes()).not.toContain('chip--is-selected');
+    });
+  });
+
+  describe('Selection state', () => {
+    it('should apply selected styling when isSelected is true', async () => {
+      await wrapper.setProps({ isSelected: true });
+      
+      expect(wrapper.classes()).toContain('chip--is-selected');
+      expect(wrapper.classes()).not.toContain('chip--border');
+      
+      const textElement = wrapper.find('.chip__text');
+      expect(textElement.classes()).toContain('chip__text--is-selected');
+    });
+  });
+
+  describe('Count functionality', () => {
+    it('should render count when provided', async () => {
+      await wrapper.setProps({ count: 5 });
+      
+      const countElement = wrapper.find('.chip__count');
+      expect(countElement.exists()).toBe(true);
+      expect(countElement.text()).toBe('5');
+    });
+
+    it('should not render count when not provided or zero', async () => {
+      expect(wrapper.find('.chip__count').exists()).toBe(false);
+      
+      await wrapper.setProps({ count: 0 });
+      expect(wrapper.find('.chip__count').exists()).toBe(false);
+    });
+
+    it('should apply selected styling to count when chip is selected', async () => {
+      await wrapper.setProps({ count: 3, isSelected: true });
+      
+      const countElement = wrapper.find('.chip__count');
+      expect(countElement.classes()).toContain('chip__count--is-selected');
+    });
+  });
+
+  describe('Type functionality', () => {
+    it('should not render icon for single type', () => {
+      const icon = wrapper.findComponent({ name: 'UnnnicIcon' });
+      expect(icon.exists()).toBe(false);
+    });
+
+    it('should render correct icons for multiple type', async () => {
+      await wrapper.setProps({ type: 'multiple', isSelected: false });
+      
+      let icon = wrapper.findComponent({ name: 'UnnnicIcon' });
+      expect(icon.exists()).toBe(true);
+      expect(icon.props('icon')).toBe('add');
+      expect(icon.props('scheme')).toBe('feedback-grey');
+      expect(icon.props('size')).toBe('sm');
+
+      await wrapper.setProps({ isSelected: true });
+      
+      icon = wrapper.findComponent({ name: 'UnnnicIcon' });
+      expect(icon.props('icon')).toBe('close');
+      expect(icon.props('scheme')).toBe('teal-600');
+    });
+  });
+
+  describe('Combined functionality', () => {
+    it('should render all elements correctly when combined', async () => {
+      await wrapper.setProps({ 
+        text: 'Complete Chip',
+        count: 42,
+        type: 'multiple',
+        isSelected: true
+      });
+
+      expect(wrapper.text()).toContain('Complete Chip');
+      expect(wrapper.classes()).toContain('chip--is-selected');
+      
+      const countElement = wrapper.find('.chip__count');
+      expect(countElement.exists()).toBe(true);
+      expect(countElement.text()).toBe('42');
+      expect(countElement.classes()).toContain('chip__count--is-selected');
+      
+      const icon = wrapper.findComponent({ name: 'UnnnicIcon' });
+      expect(icon.exists()).toBe(true);
+      expect(icon.props('icon')).toBe('close');
+    });
+  });
+
+  describe('Click functionality', () => {
+    it('should emit click event when clicked', async () => {
+      await wrapper.setProps({ isClickable: true });
+      
+      await wrapper.trigger('click');
+      
+      expect(wrapper.emitted().click).toBeTruthy();
+      expect(wrapper.emitted().click).toHaveLength(1);
+    });
+
+    it('should apply clickable styling when isClickable is true', async () => {
+      await wrapper.setProps({ isClickable: true });
+      
+      expect(wrapper.classes()).toContain('chip--is-clickable');
+    });
+
+    it('should not apply clickable styling when isClickable is false', () => {
+      expect(wrapper.classes()).not.toContain('chip--is-clickable');
+    });
+
+    it('should emit click event even when not marked as clickable', async () => {
+      await wrapper.trigger('click');
+      
+      expect(wrapper.emitted().click).toBeTruthy();
+      expect(wrapper.emitted().click).toHaveLength(1);
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle negative count', async () => {
+      await wrapper.setProps({ count: -5 });
+      
+      const countElement = wrapper.find('.chip__count');
+      expect(countElement.exists()).toBe(true);
+      expect(countElement.text()).toBe('-5');
+    });
+
+    it('should handle empty text', async () => {
+      await wrapper.setProps({ text: '' });
+      
+      const textElement = wrapper.find('.chip__text');
+      expect(textElement.exists()).toBe(true);
+      expect(textElement.text()).toBe('');
+    });
+  });
+});

package/src/components/Chip/types.ts

@@ -0,0 +1,8 @@
+export interface ChipProps {
+  isSelected?: boolean;
+  text?: string;
+  count?: number;
+  type: 'single' | 'multiple';
+  isClickable?: boolean;
+  onClick?: (event: Event) => void;
+}

package/src/components/Disclaimer/types.ts

@@ -1,4 +1,4 @@
-import type { SchemeColor } from '../Icon/types';
+import type { SchemeColor } from '@/types/scheme-colors';
 
 export interface DisclaimerProps {
   text: string;

package/src/components/DropArea/DropArea.vue

@@ -11,7 +11,7 @@
     @dragleave.stop.prevent="dragleave"
     @dragend.stop.prevent="dragend"
     @drop.stop.prevent="drop"
-    @click="handleDropzoneClick"
+    @click="() => $refs.file.click()"
   >
     <UnnnicIcon
       class="unnnic-upload-area__dropzone__icon"
@@ -64,7 +64,7 @@
 </template>
 
 <script setup>
-import { ref, computed, getCurrentInstance, useTemplateRef } from 'vue';
+import { ref, computed, getCurrentInstance } from 'vue';
 import mime from 'mime';
 
 import UnnnicIcon from '../Icon.vue';
@@ -73,7 +73,6 @@ const isDragging = ref(false);
 const hasError = ref(false);
 const dragEnterCounter = ref(0);
 const file = ref();
-const fileRef = useTemplateRef('file');
 
 const props = defineProps({
   acceptMultiple: {
@@ -112,11 +111,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  }
 });
 
 const emit = defineEmits([
@@ -141,21 +135,15 @@ const formattedSupportedFormats = computed(() => {
 });
 
 function dragenter() {
-  if (props.disabled) return;
-
   dragEnterCounter.value += 1;
   isDragging.value = true;
 }
 
 function dragover() {
-  if (props.disabled) return;
-
   isDragging.value = true;
 }
 
 function dragleave() {
-  if (props.disabled) return;
-
   dragEnterCounter.value -= 1;
   if (dragEnterCounter.value === 0) {
     isDragging.value = false;
@@ -163,14 +151,10 @@ function dragleave() {
 }
 
 function dragend() {
-  if (props.disabled) return;
-
   isDragging.value = false;
 }
 
 function drop(event) {
-  if (props.disabled) return;
-
   isDragging.value = false;
 
   const { files } = event.dataTransfer;
@@ -180,15 +164,7 @@ function drop(event) {
   }
 }
 
-function handleDropzoneClick() {
-  if (props.disabled) return;
-
-  fileRef.value.click();
-}
-
 function handleFileChange(event) {
-  if (props.disabled) return;
-
   const { files } = event.target;
 
   if (validateFiles(files)) {

package/src/components/Icon/types.ts

@@ -1,91 +1,7 @@
-export type SchemeColor = 
-  | 'background-solo'
-  | 'background-sky'
-  | 'background-grass'
-  | 'background-carpet'
-  | 'background-snow'
-  | 'background-lightest'
-  | 'background-white'
-  | 'neutral-black'
-  | 'neutral-darkest'
-  | 'neutral-dark'
-  | 'neutral-cloudy'
-  | 'neutral-cleanest'
-  | 'neutral-clean'
-  | 'neutral-soft'
-  | 'neutral-lightest'
-  | 'neutral-light'
-  | 'neutral-white'
-  | 'neutral-snow'
-  | 'feedback-red'
-  | 'feedback-green'
-  | 'feedback-yellow'
-  | 'feedback-blue'
-  | 'feedback-grey'
-  | 'aux-blue'
-  | 'aux-purple'
-  | 'aux-orange'
-  | 'aux-lemon'
-  | 'aux-pink'
-  | 'aux-baby-blue'
-  | 'aux-baby-yellow'
-  | 'aux-baby-red'
-  | 'aux-baby-green'
-  | 'aux-baby-pink'
-  | 'aux-green-100'
-  | 'aux-green-300'
-  | 'aux-green-500'
-  | 'aux-green-700'
-  | 'aux-green-900'
-  | 'aux-blue-100'
-  | 'aux-blue-300'
-  | 'aux-blue-500'
-  | 'aux-blue-700'
-  | 'aux-blue-900'
-  | 'aux-purple-100'
-  | 'aux-purple-300'
-  | 'aux-purple-500'
-  | 'aux-purple-700'
-  | 'aux-purple-900'
-  | 'aux-red-100'
-  | 'aux-red-300'
-  | 'aux-red-500'
-  | 'aux-red-700'
-  | 'aux-red-900'
-  | 'aux-orange-100'
-  | 'aux-orange-300'
-  | 'aux-orange-500'
-  | 'aux-orange-700'
-  | 'aux-orange-900'
-  | 'aux-yellow-100'
-  | 'aux-yellow-300'
-  | 'aux-yellow-500'
-  | 'aux-yellow-700'
-  | 'aux-yellow-900'
-  | 'floweditor-blue'
-  | 'floweditor-purple'
-  | 'floweditor-wine'
-  | 'floweditor-orange'
-  | 'floweditor-pink'
-  | 'floweditor-turquoise'
-  | 'floweditor-green'
-  | 'weni-50'
-  | 'weni-100'
-  | 'weni-200'
-  | 'weni-300'
-  | 'weni-400'
-  | 'weni-500'
-  | 'weni-600'
-  | 'weni-700'
-  | 'weni-800'
-  | 'weni-900'
-  | 'weni-950'
-  | 'brand-weni'
-  | 'brand-weni-dark'
-  | 'brand-weni-soft'
-  | 'brand-sec-dark'
-  | 'brand-sec-soft'
-  | 'brand-sec';
+import type { SchemeColor } from "@/types/scheme-colors";
+
+// Re-export SchemeColor for backward compatibility
+export type { SchemeColor };
 
 export type IconSize = 
   | 'nano'

package/src/components/Icon.vue

@@ -40,7 +40,8 @@
 import { computed } from 'vue';
 import icons from '../utils/icons';
 import OldIconsMap from './Icon/OldIconsMap.json';
-import type { IconProps, IconSize, LineHeight, SchemeColor } from './Icon/types';
+import type { IconProps, IconSize, LineHeight } from './Icon/types';
+import type { SchemeColor } from '@/types/scheme-colors';
 
 defineOptions({
   name: 'UnnnicIcon',
@@ -95,95 +96,6 @@ const onClick = (event: Event) => {
 <style lang="scss">
 @use '@/assets/scss/unnnic' as *;
 
-$scheme-colors:
-  'background-solo' $unnnic-color-background-solo,
-  'background-sky' $unnnic-color-background-sky,
-  'background-grass' $unnnic-color-background-grass,
-  'background-carpet' $unnnic-color-background-carpet,
-  'background-snow' $unnnic-color-background-snow,
-  'background-lightest' $unnnic-color-background-lightest,
-  'background-white' $unnnic-color-background-white,
-  'neutral-black' $unnnic-color-neutral-black,
-  'neutral-darkest' $unnnic-color-neutral-darkest,
-  'neutral-dark' $unnnic-color-neutral-dark,
-  'neutral-cloudy' $unnnic-color-neutral-cloudy,
-  'neutral-cleanest' $unnnic-color-neutral-cleanest,
-  'neutral-clean' $unnnic-color-neutral-clean,
-  'neutral-soft' $unnnic-color-neutral-soft,
-  'neutral-lightest' $unnnic-color-neutral-lightest,
-  'neutral-light' $unnnic-color-neutral-light,
-  'neutral-white' $unnnic-color-neutral-white,
-  'neutral-snow' $unnnic-color-neutral-snow,
-  'feedback-red' $unnnic-color-feedback-red,
-  'feedback-green' $unnnic-color-feedback-green,
-  'feedback-yellow' $unnnic-color-feedback-yellow,
-  'feedback-blue' $unnnic-color-feedback-blue,
-  'feedback-grey' $unnnic-color-feedback-grey,
-  'aux-blue' $unnnic-color-aux-blue,
-  'aux-purple' $unnnic-color-aux-purple,
-  'aux-orange' $unnnic-color-aux-orange,
-  'aux-lemon' $unnnic-color-aux-lemon,
-  'aux-pink' $unnnic-color-aux-pink,
-  'aux-baby-blue' $unnnic-color-aux-baby-blue,
-  'aux-baby-yellow' $unnnic-color-aux-baby-yellow,
-  'aux-baby-red' $unnnic-color-aux-baby-red,
-  'aux-baby-green' $unnnic-color-aux-baby-green,
-  'aux-baby-pink' $unnnic-color-aux-baby-pink,
-  'aux-green-100' $unnnic-color-aux-green-100,
-  'aux-green-300' $unnnic-color-aux-green-300,
-  'aux-green-500' $unnnic-color-aux-green-500,
-  'aux-green-700' $unnnic-color-aux-green-700,
-  'aux-green-900' $unnnic-color-aux-green-900,
-  'aux-blue-100' $unnnic-color-aux-blue-100,
-  'aux-blue-300' $unnnic-color-aux-blue-300,
-  'aux-blue-500' $unnnic-color-aux-blue-500,
-  'aux-blue-700' $unnnic-color-aux-blue-700,
-  'aux-blue-900' $unnnic-color-aux-blue-900,
-  'aux-purple-100' $unnnic-color-aux-purple-100,
-  'aux-purple-300' $unnnic-color-aux-purple-300,
-  'aux-purple-500' $unnnic-color-aux-purple-500,
-  'aux-purple-700' $unnnic-color-aux-purple-700,
-  'aux-purple-900' $unnnic-color-aux-purple-900,
-  'aux-red-100' $unnnic-color-aux-red-100,
-  'aux-red-300' $unnnic-color-aux-red-300,
-  'aux-red-500' $unnnic-color-aux-red-500,
-  'aux-red-700' $unnnic-color-aux-red-700,
-  'aux-red-900' $unnnic-color-aux-red-900,
-  'aux-orange-100' $unnnic-color-aux-orange-100,
-  'aux-orange-300' $unnnic-color-aux-orange-300,
-  'aux-orange-500' $unnnic-color-aux-orange-500,
-  'aux-orange-700' $unnnic-color-aux-orange-700,
-  'aux-orange-900' $unnnic-color-aux-orange-900,
-  'aux-yellow-100' $unnnic-color-aux-yellow-100,
-  'aux-yellow-300' $unnnic-color-aux-yellow-300,
-  'aux-yellow-500' $unnnic-color-aux-yellow-500,
-  'aux-yellow-700' $unnnic-color-aux-yellow-700,
-  'aux-yellow-900' $unnnic-color-aux-yellow-900,
-  'floweditor-blue' $unnnic-color-floweditor-blue,
-  'floweditor-purple' $unnnic-color-floweditor-purple,
-  'floweditor-wine' $unnnic-color-floweditor-wine,
-  'floweditor-orange' $unnnic-color-floweditor-orange,
-  'floweditor-pink' $unnnic-color-floweditor-pink,
-  'floweditor-turquoise' $unnnic-color-floweditor-turquoise,
-  'floweditor-green' $unnnic-color-floweditor-green,
-  'weni-50' $unnnic-color-weni-50,
-  'weni-100' $unnnic-color-weni-100,
-  'weni-200' $unnnic-color-weni-200,
-  'weni-300' $unnnic-color-weni-300,
-  'weni-400' $unnnic-color-weni-400,
-  'weni-500' $unnnic-color-weni-500,
-  'weni-600' $unnnic-color-weni-600,
-  'weni-700' $unnnic-color-weni-700,
-  'weni-800' $unnnic-color-weni-800,
-  'weni-900' $unnnic-color-weni-900,
-  'weni-950' $unnnic-color-weni-950,
-  'brand-weni' $unnnic-color-brand-weni,
-  'brand-weni-dark' $unnnic-color-brand-weni-dark,
-  'brand-weni-soft' $unnnic-color-brand-weni-soft,
-  'brand-sec-dark' $unnnic-color-brand-sec-dark,
-  'brand-sec-soft' $unnnic-color-brand-sec-soft,
-  'brand-sec' $unnnic-color-brand-sec;
-
 $icon-sizes:
   'xl' $unnnic-icon-size-xl,
   'lg' $unnnic-icon-size-lg,
@@ -233,7 +145,7 @@ $icon-sizes:
     font-family: 'Material Symbols Rounded Filled';
   }
 
-  @each $name, $color in $scheme-colors {
+  @each $name, $color in $unnnic-scheme-colors {
     &.unnnic-icon-scheme--#{$name} {
       color: $color;
     }

package/src/components/ModalDialog/ModalDialog.vue

@@ -24,7 +24,10 @@
       </section>
 
       <section class="unnnic-modal-dialog__container__body">
-        <header v-if="title" class="unnnic-modal-dialog__container__header">
+        <header
+          v-if="title"
+          class="unnnic-modal-dialog__container__header"
+        >
           <section class="unnnic-modal-dialog__container__title-container">
             <UnnnicIcon
               v-if="icon || type"
@@ -46,7 +49,6 @@
             data-testid="close-icon"
             icon="close"
             clickable
-            scheme="neutral-cloudy"
             @click="close()"
           />
         </header>
@@ -96,12 +98,12 @@
 </template>
 
 <script>
-import UnnnicIcon from "../Icon.vue";
-import UnnnicButton from "../Button/Button.vue";
-import UnnnicI18n from "../../mixins/i18n";
+import UnnnicIcon from '../Icon.vue';
+import UnnnicButton from '../Button/Button.vue';
+import UnnnicI18n from '../../mixins/i18n';
 
 export default {
-  name: "UnnnicModalDialog",
+  name: 'UnnnicModalDialog',
   components: {
     UnnnicIcon,
     UnnnicButton,
@@ -118,29 +120,29 @@ export default {
     },
     type: {
       type: String,
-      default: "",
+      default: '',
       validate(type) {
-        return ["success", "warning", "attention"].includes(type);
+        return ['success', 'warning', 'attention'].includes(type);
       },
     },
     size: {
       type: String,
-      default: "md",
+      default: 'md',
       validate(size) {
-        return ["sm", "md", "lg"].includes(size);
+        return ['sm', 'md', 'lg'].includes(size);
       },
     },
     title: {
       type: String,
-      default: "",
+      default: '',
     },
     icon: {
       type: String,
-      default: "",
+      default: '',
     },
     iconScheme: {
       type: String,
-      default: "",
+      default: '',
     },
     showCloseIcon: {
       type: Boolean,
@@ -163,26 +165,26 @@ export default {
       default: () => ({}),
     },
   },
-  emits: ["primaryButtonClick", "secondaryButtonClick", "update:modelValue"],
+  emits: ['primaryButtonClick', 'secondaryButtonClick', 'update:modelValue'],
 
   data() {
     return {
       defaultTranslations: {
         cancel: {
-          "pt-br": "Cancelar",
-          en: "Cancel",
-          es: "Cancelar",
+          'pt-br': 'Cancelar',
+          en: 'Cancel',
+          es: 'Cancelar',
         },
       },
       iconsMapper: {
-        success: { icon: "check_circle", scheme: "aux-green-500" },
-        warning: { icon: "warning", scheme: "aux-red-500" },
-        attention: { icon: "error", scheme: "aux-yellow-500" },
+        success: { icon: 'check_circle', scheme: 'aux-green-500' },
+        warning: { icon: 'warning', scheme: 'aux-red-500' },
+        attention: { icon: 'error', scheme: 'aux-yellow-500' },
       },
       primaryButtonTypeMapper: {
-        success: "primary",
-        warning: "warning",
-        attention: "attention",
+        success: 'primary',
+        warning: 'warning',
+        attention: 'attention',
       },
     };
   },
@@ -193,17 +195,17 @@ export default {
   },
   methods: {
     close() {
-      this.$emit("update:modelValue", false);
+      this.$emit('update:modelValue', false);
     },
     updateBodyOverflow(isHidden) {
-      document.body.style.overflow = isHidden ? "hidden" : "";
+      document.body.style.overflow = isHidden ? 'hidden' : '';
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@use "@/assets/scss/unnnic" as *;
+@use '@/assets/scss/unnnic' as *;
 * {
   margin: 0;
   padding: 0;
@@ -310,7 +312,7 @@ export default {
   &__actions {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-areas: "secondary-button primary-button";
+    grid-template-areas: 'secondary-button primary-button';
     gap: $unnnic-spacing-sm;
     padding: $unnnic-spacing-md;
     flex-shrink: 0;

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

@@ -11,7 +11,7 @@ exports[`ModalDialog.vue > Elements rendering > matches the snapshot 1`] = `
           <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="test-icon" clickable="false" size="md" scheme="neutral-darkest" data-testid="title-icon" class="unnnic-modal-dialog__container__title-icon"></unnnic-icon-stub>
           <h1 data-v-68ebadeb="" class="unnnic-modal-dialog__container__title-text" data-testid="title-text">Test Title</h1>
         </section>
-        <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="close" clickable="true" size="md" scheme="neutral-cloudy" data-testid="close-icon"></unnnic-icon-stub>
+        <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="close" clickable="true" size="md" scheme="neutral-darkest" data-testid="close-icon"></unnnic-icon-stub>
       </header>
       <section data-v-68ebadeb="" class="unnnic-modal-dialog__container__content"></section>
       <section data-v-68ebadeb="" data-testid="actions-section" class="unnnic-modal-dialog__container__actions">

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-->