@weni/unnnic-system 3.8.2-alpha.0 → 3.8.2-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.8.2-alpha.0",
+  "version": "3.8.2-alpha.1",
   "type": "commonjs",
   "files": [
     "dist",

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

@@ -1,15 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UnnnicAlert.vue > matches the snapshot 1`] = `
-"<transition-stub data-v-c3231c18="" name="toast-slide" appear="true" persisted="false" css="true" icon="alert-icon" position="top-right" closetext="Close">
-  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--informational" role="status" aria-live="polite" data-testid="unnnic-toast">
-    <section data-v-c3231c18="" class="unnnic-toast__content">
-      <header data-v-c3231c18="" class="unnnic-toast__header"><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--blue-500 unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="toast-type-icon" translate="no">info</span>
-        <h3 data-v-c3231c18="" class="unnnic-toast__title">Test Alert</h3><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable unnnic-toast__close" data-testid="toast-close-button" translate="no">close</span>
-      </header>
-      <!--v-if-->
-    </section>
-    <!--v-if-->
-  </aside>
-</transition-stub>"
+"<div data-v-284427ba="" class="unnnic-alert unnnic-alert-position--top-right"><span data-v-26446d8e="" data-v-284427ba="" class="material-symbols-rounded unnnic-icon-scheme--primary unnnic-icon-size--sm" data-testid="material-icon" translate="no" data-test="unnnic-icon">alert-icon</span>
+  <div data-v-284427ba="" class="unnnic-alert__content">
+    <div data-v-284427ba="" class="unnnic-alert__title">TEST ALERT</div>
+    <div data-v-284427ba="" class="unnnic-alert__text">This is an alert message</div>
+  </div>
+  <div data-v-284427ba="" class="unnnic-alert__close-text unnnic--clickable">CLOSE</div>
+</div>"
 `;

package/src/components/Alert/__tests__/__snapshots__/AlertBanner.spec.js.snap

@@ -2,9 +2,9 @@
 
 exports[`AlertBanner.vue > matches the snapshot 1`] = `
 "<section data-v-e8e4d051="" class="banner-alert banner-alert--banner-danger">
-  <header data-v-e8e4d051="" class="banner-alert__container-text"><span data-v-26446d8e="" data-v-e8e4d051="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-white unnnic-icon-size--sm unnnic-icon__size--sm banner-alert__textIcon" data-testid="material-icon" translate="no" data-test="unnnic-icon">block</span>
+  <header data-v-e8e4d051="" class="banner-alert__container-text"><span data-v-26446d8e="" data-v-e8e4d051="" class="material-symbols-rounded unnnic-icon-scheme--neutral-white unnnic-icon-size--sm banner-alert__textIcon" data-testid="material-icon" translate="no" data-test="unnnic-icon">block</span>
     <p data-v-e8e4d051="" class="text">This is a banner alert</p><a data-v-e8e4d051="" class="banner-alert__link" href="https://example.com" target="_self">Learn more</a>
   </header>
-  <div data-v-e8e4d051="" class="banner-alert__close"><span data-v-26446d8e="" data-v-e8e4d051="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-white unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="material-icon" translate="no" data-test="unnnic-close-icon">close</span></div>
+  <div data-v-e8e4d051="" class="banner-alert__close"><span data-v-26446d8e="" data-v-e8e4d051="" class="material-symbols-rounded unnnic-icon-scheme--neutral-white unnnic-icon-size--sm" data-testid="material-icon" translate="no" data-test="unnnic-close-icon">close</span></div>
 </section>"
 `;

package/src/components/Alert/__tests__/__snapshots__/Version1dot1.spec.js.snap

@@ -6,7 +6,7 @@ exports[`Alert.vue > matches snapshot 1`] = `
     <div data-v-fb94f284="" class="alert__progress"></div>
     <div data-v-fb94f284="" class="alert__text">Test Alert</div>
     <div data-v-fb94f284="" class="alert__close">
-      <unnnic-icon-stub data-v-fb94f284="" filled="false" icon="close-1" clickable="false" size="sm" scheme="neutral-white"></unnnic-icon-stub>
+      <unnnic-icon-stub data-v-fb94f284="" filled="false" next="false" icon="close-1" clickable="false" size="sm" scheme="neutral-white"></unnnic-icon-stub>
     </div>
   </div>
 </div>"

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

@@ -2,6 +2,6 @@
 
 exports[`AvatarIcon.vue > matches the snapshot 1`] = `
 "<div data-v-5f185a90="" class="unnnic-avatar-icon aux-blue sm">
-  <unnnic-icon-stub data-v-5f185a90="" filled="false" icon="graph-stats-1" clickable="false" size="md" scheme="aux-blue"></unnnic-icon-stub>
+  <unnnic-icon-stub data-v-5f185a90="" filled="false" next="false" icon="graph-stats-1" clickable="false" size="md" scheme="aux-blue"></unnnic-icon-stub>
 </div>"
 `;

package/src/components/Checkbox/Checkbox.vue

@@ -1,11 +1,16 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <section class="unnnic-checkbox-wrapper">
-    <label>
+  <section class="unnnic-checkbox">
+    <label
+      :class="[
+        'unnnic-checkbox__input-wrapper',
+        { 'unnnic-checkbox__input-wrapper--disabled': disabled },
+      ]"
+    >
       <input
         :class="[
-          'unnnic-checkbox',
-          { 'unnnic-checkbox--less': modelValue === 'less' },
+          'unnnic-checkbox__input',
+          { 'unnnic-checkbox__input--less': modelValue === 'less' },
         ]"
         type="checkbox"
         :disabled="disabled"
@@ -104,71 +109,84 @@ export default {
 
 $checkbox-size: 21px;
 
-.unnnic-checkbox-wrapper {
+.unnnic-checkbox {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-}
 
-label {
-  display: flex;
-  align-items: center;
-  column-gap: $unnnic-space-2;
-}
+  &__input-wrapper {
+    width: fit-content;
 
-.unnnic-checkbox {
-  appearance: none;
-  width: $checkbox-size;
-  height: $checkbox-size;
-  margin: 0;
-  background-color: $unnnic-color-bg-base;
-  border: 1px solid $unnnic-color-border-base;
-  border-radius: $unnnic-radius-1;
-  box-sizing: border-box;
-
-  outline: none;
-
-  &:checked {
-    border-width: 0;
-    background-color: $unnnic-color-bg-active;
-    background-image: url('../../assets/icons/checkbox-checked.svg');
-    background-repeat: no-repeat;
-    background-position: center;
-
-    &.unnnic-checkbox--less {
-      background-image: url('../../assets/icons/checkbox-less.svg');
+    display: flex;
+    align-items: center;
+    column-gap: $unnnic-space-2;
+
+    cursor: pointer;
+
+    &--disabled {
+      cursor: not-allowed;
     }
   }
 
-  &:disabled,
-  &:disabled:checked {
-    background-color: $unnnic-color-bg-muted;
-    border: 1px solid $unnnic-color-border-muted;
-  }
+  &__input {
+    appearance: none;
+    width: $checkbox-size;
+    min-width: $checkbox-size;
+    height: $checkbox-size;
+    margin: 0;
+    background-color: $unnnic-color-bg-base;
+    border: 1px solid $unnnic-color-border-base;
+    border-radius: $unnnic-radius-1;
+    box-sizing: border-box;
+
+    outline: none;
+
+    cursor: pointer;
+
+    &:checked {
+      border-width: 0;
+      background-color: $unnnic-color-bg-active;
+      background-image: url('../../assets/icons/checkbox-checked.svg');
+      background-repeat: no-repeat;
+      background-position: center;
+
+      &.unnnic-checkbox__input--less {
+        background-image: url('../../assets/icons/checkbox-less.svg');
+      }
+    }
+
+    &:disabled,
+    &:disabled:checked {
+      background-color: $unnnic-color-bg-muted;
+      border: 1px solid $unnnic-color-border-muted;
 
-  &:disabled:checked {
-    background-image: url('../../assets/icons/checkbox-checked-disabled.svg');
+      cursor: not-allowed;
+    }
 
-    &.unnnic-checkbox--less {
-      background-image: url('../../assets/icons/checkbox-less-disabled.svg');
+    &:disabled:checked {
+      background-image: url('../../assets/icons/checkbox-checked-disabled.svg');
+
+      &.unnnic-checkbox__input--less {
+        background-image: url('../../assets/icons/checkbox-less-disabled.svg');
+      }
     }
   }
-}
 
-.unnnic-checkbox__label {
-  margin: 0;
-  font: $unnnic-font-body;
-  color: $unnnic-color-fg-emphasized;
+  &__label {
+    margin: 0;
+    font: $unnnic-font-body;
+    color: $unnnic-color-fg-emphasized;
 
-  &--disabled {
-    color: $unnnic-color-fg-muted;
+    &--disabled {
+      color: $unnnic-color-fg-muted;
+    }
   }
-}
 
-.unnnic-checkbox__helper {
-  margin: 0;
-  margin-left: $checkbox-size + $unnnic-space-2;
-  font: $unnnic-font-caption-2;
-  color: $unnnic-color-fg-base;
+  &__helper {
+    margin: 0;
+    margin-left: $checkbox-size + $unnnic-space-2;
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-base;
+  }
 }
 </style>

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

@@ -2,7 +2,9 @@
 
 exports[`Collapse.vue > matches the snapshot 1`] = `
 "<div data-v-7d0d9fbd="" data-testid="collapse" class="unnnic-collapse unnnic-collapse--size-lg">
-  <div data-v-7d0d9fbd="" data-testid="collapse-header" class="unnnic-collapse__header">Test Title<span data-v-26446d8e="" data-v-7d0d9fbd="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--xs unnnic-icon__size--xs" data-testid="material-icon" translate="no">expand_more</span></div>
+  <div data-v-7d0d9fbd="" data-testid="collapse-header" class="unnnic-collapse__header">Test Title<svg data-v-26446d8e="" data-v-7d0d9fbd="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--xs unnnic-icon-scheme--neutral-cloudy" data-testid="old-map-icons">
+      <path d="M5.31471 14.0096L19.0432 29.5967C19.1676 29.7264 19.3169 29.8296 19.4822 29.9001C19.6474 29.9707 19.8253 30.007 20.005 30.007C20.1847 30.007 20.3625 29.9707 20.5278 29.9001C20.6931 29.8296 20.8424 29.7264 20.9668 29.5967L34.689 14.0096C34.7987 13.886 34.8825 13.7415 34.9353 13.5849C34.9882 13.4282 35.009 13.2625 34.9965 13.0977C34.984 12.9328 34.9385 12.7721 34.8627 12.6252C34.7869 12.4783 34.6824 12.3481 34.5553 12.2423L32.243 10.2963C31.9852 10.0789 31.6522 9.97163 31.316 9.99759C30.9797 10.0235 30.6671 10.1807 30.4457 10.435L20.2406 22.25C20.2112 22.2841 20.1749 22.3114 20.134 22.3302C20.0931 22.3489 20.0487 22.3587 20.0037 22.3587C19.9588 22.3587 19.9143 22.3489 19.8734 22.3302C19.8326 22.3114 19.7962 22.2841 19.7669 22.25L9.558 10.4338C9.33639 10.1806 9.02374 10.0252 8.68809 10.0013C8.52167 9.9865 8.35397 10.0052 8.19489 10.0563C8.03582 10.1074 7.8886 10.1898 7.76195 10.2988L5.44845 12.2423C5.32061 12.3479 5.21534 12.4781 5.13889 12.6252C5.06245 12.7723 5.0164 12.9332 5.0035 13.0985C4.99099 13.2635 5.01212 13.4294 5.06562 13.586C5.11911 13.7426 5.20386 13.8868 5.31471 14.0096Z" fill="#3B414D" class="primary"></path>
+    </svg></div>
   <div data-v-7d0d9fbd="" class="unnnic-collapse__body" style="display: none;"></div>
 </div>"
 `;

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

@@ -10,12 +10,12 @@ exports[`Drawer.vue > Component Rendering > Component Rendering > matches the sn
           <h1 data-v-196de012="" class="unnnic-drawer__title" data-testid="drawer-title">Test Title</h1>
           <p data-v-196de012="" class="unnnic-drawer__description" data-testid="drawer-description">Test Description</p>
         </section>
-        <unnnic-icon-stub data-v-196de012="" filled="false" icon="arrow_back" clickable="true" size="avatar-nano" scheme="neutral-darkest" class="unnnic-drawer__close" data-testid="close-icon"></unnnic-icon-stub>
+        <unnnic-icon-stub data-v-196de012="" filled="false" next="false" icon="arrow_back" clickable="true" size="avatar-nano" scheme="neutral-darkest" class="unnnic-drawer__close" data-testid="close-icon"></unnnic-icon-stub>
       </header>
       <section data-v-196de012="" class="unnnic-drawer__content"></section>
       <footer data-v-196de012="" class="unnnic-drawer__footer" data-testid="footer">
-        <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="secondary-button"></unnnic-button-stub>
-        <unnnic-button-stub data-v-196de012="" size="large" text="Primary Action" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
+        <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" next="false" disabled="false" loading="false" data-testid="secondary-button"></unnnic-button-stub>
+        <unnnic-button-stub data-v-196de012="" size="large" text="Primary Action" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" next="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
       </footer>
     </section>
   </transition-stub>

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

@@ -1,18 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Input.vue > matches the snapshot 1`] = `
-"<section data-v-9f8d6c86="" data-v-d890ad85="" class="unnnic-form-element unnnic-form md" data-testid="form-element">
-  <section data-v-7f222291="" data-v-9f8d6c86="" class="unnnic-label unnnic-form-element__label">
-    <p data-v-7f222291="" class="unnnic-label__label">Sample Label</p>
-    <!--v-if-->
-  </section>
-  <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-form-input" hascloudycolor="false" mask="####-####"><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-form-input input-itself input size-md normal input--has-icon-left input--has-icon-right unnnic-form-input input-itself" hascloudycolor="false" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>
-  <section data-v-9f8d6c86="" class="unnnic-form-element__hints-container">
-    <section data-v-9f8d6c86="" class="unnnic-form-element__message-container">
-      <p data-v-9f8d6c86="" class="unnnic-form-element__message">Error message</p>
-      <!--v-if-->
-    </section>
-    <!--v-if-->
-  </section>
-</section>"
+"<div data-v-d890ad85="" class="unnnic-form md">
+  <p data-v-d890ad85="" class="unnnic-form__label">Sample Label</p>
+  <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md text-input--icon-right-size-sm unnnic-form-input" mask="####-####"><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-form-input input-itself input size-md normal input--has-icon-left input--has-icon-right unnnic-form-input input-itself" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" iconrightsize="sm" hascloudycolor="false" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>
+  <p data-v-d890ad85="" class="unnnic-form__message">Error message</p>
+</div>"
 `;

package/src/components/Input/__test__/__snapshots__/TextInput.spec.js.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`TextInput.vue > matches the snapshot 1`] = `"<div data-v-a0d36167="" class="text-input size--md"><input data-v-86533b41="" data-v-a0d36167="" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" allowtogglepassword="false" class="input-itself input size-md normal input--has-icon-left input--has-icon-right input-itself" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>"`;
+exports[`TextInput.vue > matches the snapshot 1`] = `"<div data-v-a0d36167="" class="text-input size--md text-input--icon-right-size-sm"><input data-v-86533b41="" data-v-a0d36167="" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" iconrightsize="sm" allowtogglepassword="false" hascloudycolor="false" class="input-itself input size-md normal input--has-icon-left input--has-icon-right input-itself" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>"`;

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

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Label > applies the correct classes and styles 1`] = `"<p data-v-7f222291="" class="unnnic-label__label">Label Test</p>"`;
+exports[`Label > applies the correct classes and styles 1`] = `"<p class="unnnic-label__label">Label Test</p>"`;

package/src/components/Radio/Radio.vue

@@ -1,9 +1,14 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <section class="unnnic-radio-container">
-    <label>
+  <section class="unnnic-radio">
+    <label
+      :class="[
+        'unnnic-radio__input-wrapper',
+        { 'unnnic-radio__input-wrapper--disabled': disabled },
+      ]"
+    >
       <input
-        class="unnnic-radio"
+        class="unnnic-radio__input"
         type="radio"
         :disabled="disabled"
         :checked="computedModelValue === value"
@@ -81,18 +86,27 @@ const computedName = computed(() => {
 
 $radio-size: 21px;
 
-.unnnic-radio-container {
+.unnnic-radio {
   display: inline-flex;
   flex-direction: column;
 
-  label {
+  &__input-wrapper {
+    width: fit-content;
+
     display: flex;
     align-items: center;
     gap: $unnnic-space-2;
+
+    cursor: pointer;
+
+    &--disabled {
+      cursor: not-allowed;
+    }
   }
 
-  .unnnic-radio {
+  &__input {
     appearance: none;
+    min-width: $radio-size;
     width: $radio-size;
     height: $radio-size;
     margin: 0;
@@ -102,6 +116,8 @@ $radio-size: 21px;
     box-sizing: border-box;
     outline: none;
 
+    cursor: pointer;
+
     &:checked {
       border-width: 0;
       background-color: $unnnic-color-bg-active;
@@ -113,10 +129,12 @@ $radio-size: 21px;
     &:disabled {
       background-color: $unnnic-color-bg-muted;
       border: 1px solid $unnnic-color-border-muted;
+
+      cursor: not-allowed;
     }
   }
 
-  .unnnic-radio__label {
+  &__label {
     margin: 0;
     font: $unnnic-font-body;
     color: $unnnic-color-fg-emphasized;

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Radio.vue > matches the snapshot 1`] = `
-"<section data-v-38c6bf5e="" class="unnnic-radio-container" size="md"><label data-v-38c6bf5e=""><input data-v-38c6bf5e="" class="unnnic-radio" type="radio" name="">
-    <p data-v-38c6bf5e="" class="unnnic-radio__label"> Option 1</p>
-  </label></section>"
+"<div data-v-38c6bf5e="" class="unnnic-radio-container unnnic-radio-container--md"><svg data-v-26446d8e="" data-v-38c6bf5e="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--md unnnic-icon-scheme--neutral-cleanest unnnic-radio" data-testid="old-map-icons">
+    <circle cx="20" cy="20.0005" r="14.5" stroke="#3B414D" class="primary-stroke"></circle>
+  </svg><span data-v-38c6bf5e="" class="label">Option 1</span></div>"
 `;

package/src/components/Switch/Switch.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="unnnic-switch-wrapper">
+  <section class="unnnic-switch">
     <UnnnicLabel
       v-if="label"
       :label="label"
@@ -8,9 +8,14 @@
       class="unnnic-switch__label"
     />
 
-    <label>
+    <label
+      :class="[
+        'unnnic-switch__input-wrapper',
+        { 'unnnic-switch__input-wrapper--disabled': disabled },
+      ]"
+    >
       <input
-        class="unnnic-switch"
+        class="unnnic-switch__input"
         type="checkbox"
         :disabled="disabled"
         :checked="modelValue"
@@ -143,47 +148,56 @@ export default {
 $switch-width: 38px;
 $switch-height: 20px;
 
-.unnnic-switch-wrapper {
+.unnnic-switch {
   display: flex;
   flex-direction: column;
 
-  label {
+  &__input-wrapper {
+    width: fit-content;
+
     display: flex;
     align-items: center;
     column-gap: $unnnic-space-2;
-  }
-}
 
-.unnnic-switch {
-  appearance: none;
-  width: $switch-width;
-  height: $switch-height;
-  margin: 0;
-  background-color: $unnnic-color-bg-muted;
-  border-radius: $unnnic-radius-3;
-  box-sizing: border-box;
-  outline: none;
-
-  background-image: url('@/assets/icons/switch-checked.svg');
-  background-repeat: no-repeat;
-  background-position: 4px center;
-
-  transition:
-    120ms linear background-position,
-    120ms linear background-color;
-
-  cursor: pointer;
-
-  &:checked {
-    background-color: $unnnic-color-bg-active;
-    background-position: 20px center;
+    cursor: pointer;
+
+    &--disabled {
+      cursor: not-allowed;
+    }
   }
 
-  &:disabled {
+  &__input {
+    appearance: none;
+    width: $switch-width;
+    min-width: $switch-width;
+    height: $switch-height;
+    margin: 0;
     background-color: $unnnic-color-bg-muted;
-    background-image: url('@/assets/icons/switch-checked-disabled.svg');
+    border-radius: $unnnic-radius-3;
+    box-sizing: border-box;
+    outline: none;
+
+    background-image: url('@/assets/icons/switch-checked.svg');
+    background-repeat: no-repeat;
+    background-position: 4px center;
+
+    transition:
+      120ms linear background-position,
+      120ms linear background-color;
+
+    cursor: pointer;
 
-    cursor: not-allowed;
+    &:checked {
+      background-color: $unnnic-color-bg-active;
+      background-position: 20px center;
+    }
+
+    &:disabled {
+      background-color: $unnnic-color-bg-muted;
+      background-image: url('@/assets/icons/switch-checked-disabled.svg');
+
+      cursor: not-allowed;
+    }
   }
 
   &__label {

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

@@ -1,10 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Switch > should match the snapshot 1`] = `
-"<section data-v-e4356c9d="" class="unnnic-switch-wrapper">
-  <!--v-if--><label data-v-e4356c9d=""><input data-v-e4356c9d="" class="unnnic-switch" type="checkbox">
-    <!--v-if-->
-  </label>
+"<div data-v-e4356c9d="" class="unnnic-switch">
+  <!--v-if--><svg data-v-3d58a7dd="" data-v-26446d8e="" data-v-e4356c9d="" id="default" width="80" height="40" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--md unnnic--clickable unnnic-icon-scheme--neutral-soft unnnic-switch__icon" data-testid="old-map-icons" disabled="false" data-test-id="switch-icon">
+    <rect data-v-3d58a7dd="" x="4.20013" y="2.10046" width="71.6" height="35.8" rx="17.9" class="primary"></rect>
+    <circle data-v-3d58a7dd="" id="default-circle" cx="22.5" cy="20.0005" r="12.5" fill="white"></circle>
+  </svg>
   <!--v-if-->
-</section>"
+</div>"
 `;

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

@@ -4,7 +4,7 @@ exports[`Tab.vue > matches the snapshot 1`] = `
 "<div data-v-b4e39fac="" class="tab size-md">
   <header data-v-b4e39fac="" class="tab-header">
     <ul data-v-b4e39fac="" class="tab-content">
-      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-bf0cf546="" data-v-b4e39fac="" class="unnnic-tooltip"><span data-v-26446d8e="" data-v-b4e39fac="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="material-icon" translate="no">help</span><span data-v-bf0cf546="" class="unnnic-tooltip-label unnnic-tooltip-label-bottom" data-testid="tooltip-label" style="left: 0px; top: 8px;">Tooltip text <br data-v-bf0cf546=""><!--v-if--></span></div>
+      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-bf0cf546="" data-v-b4e39fac="" class="unnnic-tooltip"><span data-v-26446d8e="" data-v-b4e39fac="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cleanest unnnic-icon-size--sm material-symbols-rounded--filled" data-testid="material-icon" translate="no">info</span><span data-v-bf0cf546="" class="unnnic-tooltip-label unnnic-tooltip-label-bottom" data-testid="tooltip-label" style="left: 0px; top: 8px;">Tooltip text <br data-v-bf0cf546=""><!--v-if--></span></div>
       </li>
       <li data-v-b4e39fac="" class="tab-head tab-head--active">tab2
         <!--v-if-->

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--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
       </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
         <!--v-if-->
@@ -51,7 +51,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--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
       </button></div>
   </section>

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--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
       <!--v-if-->
@@ -34,7 +34,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--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
     </button></div>
 </section>"

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

@@ -2,16 +2,8 @@
 
 exports[`TextArea.vue > matches the snapshot 1`] = `
 "<section data-v-9f8d6c86="" data-v-735b3c51="" class="unnnic-form-element">
-  <section data-v-7f222291="" data-v-9f8d6c86="" class="unnnic-label unnnic-form-element__label">
-    <p data-v-7f222291="" class="unnnic-label__label">Description</p>
-    <!--v-if-->
-  </section><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>
+  <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>
+  <!--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>"
 `;