@weni/unnnic-system 3.2.9-alpha.1 → 3.2.9-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.9-alpha.1",
+  "version": "3.2.9-alpha.11",
   "type": "module",
   "files": [
     "dist",

package/src/assets/scss/scheme-colors.scss

@@ -3,242 +3,118 @@
 
 // Global scheme colors mapping for all components
 
-$unnnic-scheme-colors:
-  'white' $unnnic-color-white,
-
-  'black' $unnnic-color-black,
-
-  'gray-50' $unnnic-color-gray-50,
-  'gray-100' $unnnic-color-gray-100,
-  'gray-200' $unnnic-color-gray-200,
-  'gray-300' $unnnic-color-gray-300,
-  'gray-400' $unnnic-color-gray-400,
-  'gray-500' $unnnic-color-gray-500,
-  'gray-600' $unnnic-color-gray-600,
-  'gray-700' $unnnic-color-gray-700,
-  'gray-800' $unnnic-color-gray-800,
-  'gray-900' $unnnic-color-gray-900,
-  'gray-950' $unnnic-color-gray-950,
-
-  'teal-50' $unnnic-color-teal-50,
-  'teal-100' $unnnic-color-teal-100,
-  'teal-200' $unnnic-color-teal-200,
-  'teal-300' $unnnic-color-teal-300,
-  'teal-400' $unnnic-color-teal-400,
-  'teal-500' $unnnic-color-teal-500,
-  'teal-600' $unnnic-color-teal-600,
-  'teal-700' $unnnic-color-teal-700,
-  'teal-800' $unnnic-color-teal-800,
-  'teal-900' $unnnic-color-teal-900,
-  'teal-950' $unnnic-color-teal-950,
-
-  'green-50' $unnnic-color-green-50,
-  'green-100' $unnnic-color-green-100,
-  'green-200' $unnnic-color-green-200,
-  'green-300' $unnnic-color-green-300,
-  'green-400' $unnnic-color-green-400,
-  'green-500' $unnnic-color-green-500,
-  'green-600' $unnnic-color-green-600,
-  'green-700' $unnnic-color-green-700,
-  'green-800' $unnnic-color-green-800,
-  'green-900' $unnnic-color-green-900,
-  'green-950' $unnnic-color-green-950,
-
-  'blue-50' $unnnic-color-blue-50,
-  'blue-100' $unnnic-color-blue-100,
-  'blue-200' $unnnic-color-blue-200,
-  'blue-300' $unnnic-color-blue-300,
-  'blue-400' $unnnic-color-blue-400,
-  'blue-500' $unnnic-color-blue-500,
-  'blue-600' $unnnic-color-blue-600,
-  'blue-700' $unnnic-color-blue-700,
-  'blue-800' $unnnic-color-blue-800,
-  'blue-900' $unnnic-color-blue-900,
-  'blue-950' $unnnic-color-blue-950,
-
-  'purple-50' $unnnic-color-purple-50,
-  'purple-100' $unnnic-color-purple-100,
-  'purple-200' $unnnic-color-purple-200,
-  'purple-300' $unnnic-color-purple-300,
-  'purple-400' $unnnic-color-purple-400,
-  'purple-500' $unnnic-color-purple-500,
-  'purple-600' $unnnic-color-purple-600,
-  'purple-700' $unnnic-color-purple-700,
-  'purple-800' $unnnic-color-purple-800,
-  'purple-900' $unnnic-color-purple-900,
-  'purple-950' $unnnic-color-purple-950,
-
-  'red-50' $unnnic-color-red-50,
-  'red-100' $unnnic-color-red-100,
-  'red-200' $unnnic-color-red-200,
-  'red-300' $unnnic-color-red-300,
-  'red-400' $unnnic-color-red-400,
-  'red-500' $unnnic-color-red-500,
-  'red-600' $unnnic-color-red-600,
-  'red-700' $unnnic-color-red-700,
-  'red-800' $unnnic-color-red-800,
-  'red-900' $unnnic-color-red-900,
-  'red-950' $unnnic-color-red-950,
-
-  'orange-50' $unnnic-color-orange-50,
-  'orange-100' $unnnic-color-orange-100,
-  'orange-200' $unnnic-color-orange-200,
-  'orange-300' $unnnic-color-orange-300,
-  'orange-400' $unnnic-color-orange-400,
-  'orange-500' $unnnic-color-orange-500,
-  'orange-600' $unnnic-color-orange-600,
-  'orange-700' $unnnic-color-orange-700,
-  'orange-800' $unnnic-color-orange-800,
-  'orange-900' $unnnic-color-orange-900,
-  'orange-950' $unnnic-color-orange-950,
-
-  'yellow-50' $unnnic-color-yellow-50,
-  'yellow-100' $unnnic-color-yellow-100,
-  'yellow-200' $unnnic-color-yellow-200,
-  'yellow-300' $unnnic-color-yellow-300,
-  'yellow-400' $unnnic-color-yellow-400,
-  'yellow-500' $unnnic-color-yellow-500,
-  'yellow-600' $unnnic-color-yellow-600,
-  'yellow-700' $unnnic-color-yellow-700,
-  'yellow-800' $unnnic-color-yellow-800,
-  'yellow-900' $unnnic-color-yellow-900,
-  'yellow-950' $unnnic-color-yellow-950,
-
-  'bg-base' $unnnic-color-bg-base,
-  'bg-soft' $unnnic-color-bg-soft,
-  'bg-muted' $unnnic-color-bg-muted,
-  'bg-active' $unnnic-color-bg-active,
-  'bg-info' $unnnic-color-bg-info,
-  'bg-success' $unnnic-color-bg-success,
-  'bg-warning' $unnnic-color-bg-warning,
-  'bg-critical' $unnnic-color-bg-critical,
-
-  'fg-base' $unnnic-color-fg-base,
-  'fg-muted' $unnnic-color-fg-muted,
-  'fg-emphasized' $unnnic-color-fg-emphasized,
-  'fg-inverted' $unnnic-color-fg-inverted,
-  'fg-active' $unnnic-color-fg-active,
-  'fg-info' $unnnic-color-fg-info,
-  'fg-success' $unnnic-color-fg-success,
-  'fg-warning' $unnnic-color-fg-warning,
-  'fg-critical' $unnnic-color-fg-critical,
-
-  'border-base' $unnnic-color-border-base,
-  'border-soft' $unnnic-color-border-soft,
-  'border-muted' $unnnic-color-border-muted,
-  'border-emphasized' $unnnic-color-border-emphasized,
-  'border-active' $unnnic-color-border-active,
-  'border-info' $unnnic-color-border-info,
-  'border-success' $unnnic-color-border-success,
-  'border-warning' $unnnic-color-border-warning,
-  'border-critical' $unnnic-color-border-critical,
-
-  // Deprecated
-  'background-solo' $unnnic-color-teal-50,
-  'background-sky' $unnnic-color-gray-50,
-  'background-grass' $unnnic-color-green-50,
-  'background-carpet' $unnnic-color-gray-50,
-  'background-snow' $unnnic-color-white,
-  'background-lightest' $unnnic-color-gray-50,
-  'background-white' $unnnic-color-white,
-  
-  'neutral-black' $unnnic-color-gray-900,
-  'neutral-darkest' $unnnic-color-gray-800,
-  'neutral-dark' $unnnic-color-gray-700,
-  'neutral-cloudy' $unnnic-color-gray-500,
-  'neutral-cleanest' $unnnic-color-gray-200,
-  'neutral-clean' $unnnic-color-gray-300,
-  'neutral-soft' $unnnic-color-gray-100,
-  'neutral-lightest' $unnnic-color-gray-50,
-  'neutral-light' $unnnic-color-gray-50,
-  'neutral-white' $unnnic-color-white,
-  'neutral-snow' $unnnic-color-white,
-  
-  'feedback-red' $unnnic-color-red-500,
-  'feedback-green' $unnnic-color-green-500,
-  'feedback-yellow' $unnnic-color-yellow-500,
-  'feedback-blue' $unnnic-color-blue-500,
-  'feedback-grey' $unnnic-color-gray-500,
-  
-  'aux-blue' $unnnic-color-blue-500,
-  'aux-purple' $unnnic-color-purple-500,
-  'aux-orange' $unnnic-color-orange-500,
-  'aux-lemon' $unnnic-color-yellow-400,
-  'aux-pink' $unnnic-color-red-300,
-  'aux-baby-blue' $unnnic-color-blue-200,
-  'aux-baby-yellow' $unnnic-color-yellow-200,
-  'aux-baby-red' $unnnic-color-red-200,
-  'aux-baby-green' $unnnic-color-green-200,
-  'aux-baby-pink' $unnnic-color-red-100,
-  
-  'aux-green-100' $unnnic-color-green-100,
-  'aux-green-300' $unnnic-color-green-300,
-  'aux-green-500' $unnnic-color-green-500,
-  'aux-green-700' $unnnic-color-green-700,
-  'aux-green-900' $unnnic-color-green-900,
-  'aux-blue-100' $unnnic-color-blue-100,
-  'aux-blue-300' $unnnic-color-blue-300,
-  'aux-blue-500' $unnnic-color-blue-500,
-  'aux-blue-700' $unnnic-color-blue-700,
-  'aux-blue-900' $unnnic-color-blue-900,
-  'aux-purple-100' $unnnic-color-purple-100,
-  'aux-purple-300' $unnnic-color-purple-300,
-  'aux-purple-500' $unnnic-color-purple-500,
-  'aux-purple-700' $unnnic-color-purple-700,
-  'aux-purple-900' $unnnic-color-purple-900,
-  'aux-red-100' $unnnic-color-red-100,
-  'aux-red-300' $unnnic-color-red-300,
-  'aux-red-500' $unnnic-color-red-500,
-  'aux-red-700' $unnnic-color-red-700,
-  'aux-red-900' $unnnic-color-red-900,
-  'aux-orange-100' $unnnic-color-orange-100,
-  'aux-orange-300' $unnnic-color-orange-300,
-  'aux-orange-500' $unnnic-color-orange-500,
-  'aux-orange-700' $unnnic-color-orange-700,
-  'aux-orange-900' $unnnic-color-orange-900,
-  'aux-yellow-100' $unnnic-color-yellow-100,
-  'aux-yellow-300' $unnnic-color-yellow-300,
-  'aux-yellow-500' $unnnic-color-yellow-500,
-  'aux-yellow-700' $unnnic-color-yellow-700,
-  'aux-yellow-900' $unnnic-color-yellow-900,
-  
-  'floweditor-blue' $unnnic-color-blue-600,
-  'floweditor-purple' $unnnic-color-purple-600,
-  'floweditor-wine' $unnnic-color-red-800,
-  'floweditor-orange' $unnnic-color-orange-600,
-  'floweditor-pink' $unnnic-color-red-400,
-  'floweditor-turquoise' $unnnic-color-teal-500,
-  'floweditor-green' $unnnic-color-green-600,
-  
-  'weni-50' $unnnic-color-teal-50,
-  'weni-100' $unnnic-color-teal-100,
-  'weni-200' $unnnic-color-teal-200,
-  'weni-300' $unnnic-color-teal-300,
-  'weni-400' $unnnic-color-teal-400,
-  'weni-500' $unnnic-color-teal-500,
-  'weni-600' $unnnic-color-teal-600,
-  'weni-700' $unnnic-color-teal-700,
-  'weni-800' $unnnic-color-teal-800,
-  'weni-900' $unnnic-color-teal-900,
-  'weni-950' $unnnic-color-teal-950,
-  'brand-weni' $unnnic-color-teal-600,
-  'brand-weni-dark' $unnnic-color-teal-800,
-  'brand-weni-soft' $unnnic-color-teal-100,
-  'brand-sec-dark' $unnnic-color-blue-800,
-  'brand-sec-soft' $unnnic-color-blue-100,
-  'brand-sec' $unnnic-color-blue-600,
-
-  'teal-50' $unnnic-color-teal-50,
-  'teal-100' $unnnic-color-teal-100,
-  'teal-200' $unnnic-color-teal-200,
-  'teal-300' $unnnic-color-teal-300,
-  'teal-400' $unnnic-color-teal-400,
-  'teal-500' $unnnic-color-teal-500,
-  'teal-600' $unnnic-color-teal-600,
-  'teal-700' $unnnic-color-teal-700,
-  'teal-800' $unnnic-color-teal-800,
-  'teal-900' $unnnic-color-teal-900,
-  'teal-950' $unnnic-color-teal-950;
+$unnnic-scheme-colors: 'background-solo'$unnnic-color-teal-50,
+  'background-sky'$unnnic-color-gray-50,
+  'background-grass'$unnnic-color-green-50,
+  'background-carpet'$unnnic-color-gray-50,
+  'background-snow'$unnnic-color-white,
+  'background-lightest'$unnnic-color-gray-50,
+  'background-white'$unnnic-color-white,
+
+  'neutral-black'$unnnic-color-gray-900,
+  'neutral-darkest'$unnnic-color-gray-800,
+  'neutral-dark'$unnnic-color-gray-700,
+  'neutral-cloudy'$unnnic-color-gray-500,
+  'neutral-cleanest'$unnnic-color-gray-200,
+  'neutral-clean'$unnnic-color-gray-300,
+  'neutral-soft'$unnnic-color-gray-100,
+  'neutral-lightest'$unnnic-color-gray-50,
+  'neutral-light'$unnnic-color-gray-50,
+  'neutral-white'$unnnic-color-white,
+  'neutral-snow'$unnnic-color-white,
+
+  'feedback-red'$unnnic-color-red-500,
+  'feedback-green'$unnnic-color-green-500,
+  'feedback-yellow'$unnnic-color-yellow-500,
+  'feedback-blue'$unnnic-color-blue-500,
+  'feedback-grey'$unnnic-color-gray-500,
+
+  'aux-blue'$unnnic-color-blue-500,
+  'aux-purple'$unnnic-color-purple-500,
+  'aux-orange'$unnnic-color-orange-500,
+  'aux-lemon'$unnnic-color-yellow-400,
+  'aux-pink'$unnnic-color-red-300,
+  'aux-baby-blue'$unnnic-color-blue-200,
+  'aux-baby-yellow'$unnnic-color-yellow-200,
+  'aux-baby-red'$unnnic-color-red-200,
+  'aux-baby-green'$unnnic-color-green-200,
+  'aux-baby-pink'$unnnic-color-red-100,
+
+  'aux-green-100'$unnnic-color-green-100,
+  'aux-green-300'$unnnic-color-green-300,
+  'aux-green-500'$unnnic-color-green-500,
+  'aux-green-700'$unnnic-color-green-700,
+  'aux-green-900'$unnnic-color-green-900,
+  'aux-blue-100'$unnnic-color-blue-100,
+  'aux-blue-300'$unnnic-color-blue-300,
+  'aux-blue-500'$unnnic-color-blue-500,
+  'aux-blue-700'$unnnic-color-blue-700,
+  'aux-blue-900'$unnnic-color-blue-900,
+  'aux-purple-100'$unnnic-color-purple-100,
+  'aux-purple-300'$unnnic-color-purple-300,
+  'aux-purple-500'$unnnic-color-purple-500,
+  'aux-purple-700'$unnnic-color-purple-700,
+  'aux-purple-900'$unnnic-color-purple-900,
+  'aux-red-100'$unnnic-color-red-100,
+  'aux-red-300'$unnnic-color-red-300,
+  'aux-red-500'$unnnic-color-red-500,
+  'aux-red-700'$unnnic-color-red-700,
+  'aux-red-900'$unnnic-color-red-900,
+  'aux-orange-100'$unnnic-color-orange-100,
+  'aux-orange-300'$unnnic-color-orange-300,
+  'aux-orange-500'$unnnic-color-orange-500,
+  'aux-orange-700'$unnnic-color-orange-700,
+  'aux-orange-900'$unnnic-color-orange-900,
+  'aux-yellow-100'$unnnic-color-yellow-100,
+  'aux-yellow-300'$unnnic-color-yellow-300,
+  'aux-yellow-500'$unnnic-color-yellow-500,
+  'aux-yellow-700'$unnnic-color-yellow-700,
+  'aux-yellow-900'$unnnic-color-yellow-900,
+
+  "fg-critical"$unnnic-color-fg-critical,
+  "fg-muted"$unnnic-color-fg-muted,
+  "fg-base"$unnnic-color-fg-base,
+
+  'floweditor-blue'$unnnic-color-blue-600,
+  'floweditor-purple'$unnnic-color-purple-600,
+  'floweditor-wine'$unnnic-color-red-800,
+  'floweditor-orange'$unnnic-color-orange-600,
+  'floweditor-pink'$unnnic-color-red-400,
+  'floweditor-turquoise'$unnnic-color-teal-500,
+  'floweditor-green'$unnnic-color-green-600,
+
+  'weni-50'$unnnic-color-teal-50,
+  'weni-100'$unnnic-color-teal-100,
+  'weni-200'$unnnic-color-teal-200,
+  'weni-300'$unnnic-color-teal-300,
+  'weni-400'$unnnic-color-teal-400,
+  'weni-500'$unnnic-color-teal-500,
+  'weni-600'$unnnic-color-teal-600,
+  'weni-700'$unnnic-color-teal-700,
+  'weni-800'$unnnic-color-teal-800,
+  'weni-900'$unnnic-color-teal-900,
+  'weni-950'$unnnic-color-teal-950,
+  'brand-weni'$unnnic-color-teal-600,
+  'brand-weni-dark'$unnnic-color-teal-800,
+  'brand-weni-soft'$unnnic-color-teal-100,
+  'brand-sec-dark'$unnnic-color-blue-800,
+  'brand-sec-soft'$unnnic-color-blue-100,
+  'brand-sec'$unnnic-color-blue-600,
+
+  'bg-base'$unnnic-color-bg-base,
+  'bg-soft'$unnnic-color-bg-soft,
+
+  'teal-50'$unnnic-color-teal-50,
+  'teal-100'$unnnic-color-teal-100,
+  'teal-200'$unnnic-color-teal-200,
+  'teal-300'$unnnic-color-teal-300,
+  'teal-400'$unnnic-color-teal-400,
+  'teal-500'$unnnic-color-teal-500,
+  'teal-600'$unnnic-color-teal-600,
+  'teal-700'$unnnic-color-teal-700,
+  'teal-800'$unnnic-color-teal-800,
+  'teal-900'$unnnic-color-teal-900,
+  'teal-950'$unnnic-color-teal-950;
 
 @mixin generate-scheme-classes($component-name, $property: 'background-color') {
   @each $name, $color in $unnnic-scheme-colors {
@@ -250,10 +126,11 @@ $unnnic-scheme-colors:
 
 @function get-scheme-color($name) {
   @each $scheme-name, $color in $unnnic-scheme-colors {
-    @if $scheme-name == $name {
+    @if $scheme-name ==$name {
       @return $color;
     }
   }
+
   @warn "Scheme color '#{$name}' not found in $unnnic-scheme-colors";
   @return null;
-}
+}

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

@@ -1,11 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UnnnicAlert.vue > matches the snapshot 1`] = `
-"<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>"
+"<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="material-symbols-rounded unnnic-icon-scheme--blue-500 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="material-symbols-rounded unnnic-icon-scheme--neutral-dark 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>"
 `;

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

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Alert.vue > matches snapshot 1`] = `
-"<div data-v-fb94f284="" class="alert-container">
+"<div data-v-fb94f284="" class="alert-container" version="1.0" linkhref="https://example.com" linktarget="_blank" linktext="Learn more">
   <div data-v-fb94f284="" class="alert alert--scheme-aux-green">
     <div data-v-fb94f284="" class="alert__progress"></div>
-    <div data-v-fb94f284="" class="alert__text">Test Alert</div><a data-v-fb94f284="" class="alert__link" href="https://example.com" target="_blank">Learn more</a>
+    <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" next="false" icon="close-1" clickable="false" size="sm" scheme="neutral-white"></unnnic-icon-stub>
     </div>

package/src/components/ChartFunnel/ChartFunnel.vue

@@ -6,6 +6,7 @@
 </template>
 
 <script>
+import ChartFunnelTwoRows from './SvgFunnel/ChartFunnelTwoRows.vue';
 import ChartFunnelThreeRows from './SvgFunnel/ChartFunnelThreeRows.vue';
 import ChartFunnelFourRows from './SvgFunnel/ChartFunnelFourRows.vue';
 import ChartFunnelFiveRows from './SvgFunnel/ChartFunnelFiveRows.vue';
@@ -15,6 +16,7 @@ export default {
   name: 'UnnnicChartFunnel',
 
   components: {
+    ChartFunnelTwoRows,
     ChartFunnelThreeRows,
     ChartFunnelFourRows,
     ChartFunnelFiveRows,
@@ -36,11 +38,13 @@ export default {
     chartComponent() {
       const componentMap = {
         default: {
+          2: ChartDefaultFunnelBase,
           3: ChartDefaultFunnelBase,
           4: ChartDefaultFunnelBase,
           5: ChartDefaultFunnelBase,
         },
         basic: {
+          2: 'ChartFunnelTwoRows',
           3: 'ChartFunnelThreeRows',
           4: 'ChartFunnelFourRows',
           5: 'ChartFunnelFiveRows',

package/src/components/ChartFunnel/DefaultFunnel/ChartDefaultFunnelBase.vue

@@ -44,6 +44,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+
 interface FunnelStep {
   percentage: number | string;
   value: number | string;
@@ -52,9 +54,13 @@ interface FunnelStep {
   color: string;
 }
 
-defineProps<{
+const props = defineProps<{
   data: FunnelStep[];
 }>();
+
+const calculatedTransform = computed(() => {
+  return `skew(${props.data.length === 2 ? '-8deg' : '-12deg'}, 0deg) translateX(-20px)`;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -76,7 +82,7 @@ defineProps<{
   &__card {
     height: 100%;
     transition: background-color 0.3s ease;
-    transform: skew(-12deg, 0deg) translateX(-20px);
+    transform: v-bind(calculatedTransform);
     border-radius: 0 0 $unnnic-spacing-xs 0;
 
     &.first-item {

package/src/components/ChartFunnel/SvgFunnel/ChartFunnelBaseRow.vue

@@ -34,7 +34,7 @@
 
 <script>
 export default {
-  name: 'UnnnicChartFunnelThreeRows',
+  name: 'UnnnicChartFunnelBaseRow',
 
   props: {
     rows: {

package/src/components/ChartFunnel/SvgFunnel/ChartFunnelTwoRows.vue

@@ -0,0 +1,64 @@
+<template>
+  <ChartFunnelBaseRow
+    class="unnnic-chart-funnel-two-rows"
+    :rows="rows"
+    viewBox="0 0 250 148"
+  />
+</template>
+
+<script>
+import ChartFunnelBaseRow from './ChartFunnelBaseRow.vue';
+export default {
+  name: 'UnnnicChartFunnelTwoRows',
+
+  components: {
+    ChartFunnelBaseRow,
+  },
+
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  computed: {
+    rows() {
+      const { data } = this;
+      return [
+        {
+          pathD:
+            'M362.938 0H12.025C6.30976 0 2.43799 5.81972 4.64626 11.0911L31 74H343.75L370.307 11.1122C372.535 5.83818 368.663 0 362.938 0Z',
+          titleX: '50%',
+          titleY: '32',
+          descriptionX: '50%',
+          descriptionY: '52',
+          title: data[0].title,
+          description: data[0].description,
+        },
+        {
+          pathD: 'M344 74H31L63.4654 148H311.535L344 74Z',
+          titleX: '50%',
+          titleY: '106',
+          descriptionX: '50%',
+          descriptionY: '126',
+          title: data[1].title,
+          description: data[1].description,
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@use '@/assets/scss/unnnic' as *;
+.unnnic-chart-funnel-two-rows {
+  [class$='row']:nth-child(1) {
+    fill: $unnnic-color-weni-950;
+  }
+  [class$='row']:nth-child(2) {
+    fill: $unnnic-color-weni-800;
+  }
+}
+</style>

package/src/components/Chip/Chip.vue

@@ -71,7 +71,7 @@ const chipClass = computed(() => {
 
 .chip {
   display: inline-flex;
-  height: 26px;
+  height: 22px;
   padding: $unnnic-space-1 $unnnic-space-3;
   justify-content: center;
   align-items: center;
@@ -79,6 +79,7 @@ const chipClass = computed(() => {
   flex-shrink: 0;
   border-radius: 600px;
   background-color: $unnnic-color-bg-base;
+  border: 1px solid transparent;
 
   &:hover {
     background-color: $unnnic-color-bg-soft;
@@ -96,7 +97,7 @@ const chipClass = computed(() => {
   }
 
   &--border {
-    border: 1px solid $unnnic-color-border-base;
+    border-color: $unnnic-color-border-base;
   }
 
   &__text {