@eturnity/eturnity_reusable_components 8.22.23-EPDM-14087.2 → 8.22.23-EPDM-15023.1

package/dist/main.es94.js

@@ -1,20 +1,28 @@
 import "./main.es3.js";
-import { openBlock, createElementBlock, createStaticVNode } from "./main.es6.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "81",
-  height: "80",
+  width: "13",
+  height: "23",
   fill: "none"
 };
-const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<path fill="#B2B9C5" fill-rule="evenodd" d="M51.61 40.35a.2.2 0 0 0-.134-.35h-8.101l5.527-17.3c.062-.195-.172-.346-.324-.21L29.39 39.65a.2.2 0 0 0 .134.35h8.101l-5.527 17.3c-.062.195.172.346.324.21z" clip-rule="evenodd"></path><path fill="#DEE2EB" d="M27.568 15.165c.654.654.64 1.73-.032 2.401-.672.672-1.747.686-2.401.032L17.367 9.83 19.8 7.397zM22.913 2.038a2.115 2.115 0 0 1 1.71 2.516c-.235 1.186-1.382 1.982-2.562 1.778L11.615 4.526 11.36.039zM25.903 19.989c.655.654.64 1.73-.031 2.401-.672.672-1.747.686-2.402.032l-9.347-9.348 2.433-2.433zM21.87 22.443c.654.654.64 1.73-.032 2.401-.672.672-1.747.686-2.402.032l-8.557-8.558 2.433-2.433zM16.256 23.317c.654.654.64 1.73-.032 2.401-.672.672-1.747.687-2.402.032l-6.187-6.187 2.433-2.433z"></path><path fill="#DEE2EB" d="M20.327 7.924 8.16 20.089l-6.055-6.056C-.076 11.852-.028 8.268 2.21 6.03l4.055-4.056c2.24-2.24 5.824-2.286 8.005-.105z"></path><path fill="#DEE2EB" d="m18.947 11.41-.811.811-1.053-1.053.81-.811zM15.703 14.654l-.811.811-1.053-1.053.81-.811zM11.932 17.372l-.81.81-.527-.526.81-.81zM6.266 1.973C8.294-.054 10.162-.079 11.36.04l.26.53-.138.402-1.879.825c-.44-.35-3.445.286-3.337.177M53.43 64.835c-.654-.654-.64-1.73.032-2.401.672-.672 1.747-.686 2.401-.032l7.768 7.768-2.433 2.433zM58.085 77.962a2.115 2.115 0 0 1-1.71-2.516c.234-1.186 1.382-1.982 2.562-1.778l10.446 1.806.255 4.487zM55.095 60.011c-.655-.654-.64-1.73.031-2.401.672-.672 1.747-.686 2.402-.032l9.347 9.348-2.433 2.433zM59.129 57.557c-.655-.654-.64-1.73.031-2.401.672-.672 1.747-.686 2.402-.032l8.557 8.557-2.433 2.434zM64.743 56.683c-.655-.654-.64-1.73.031-2.401.672-.672 1.747-.687 2.401-.032l6.188 6.187-2.433 2.434z"></path><path fill="#DEE2EB" d="m60.671 72.076 12.166-12.165 6.055 6.056c2.182 2.181 2.135 5.765-.105 8.004l-4.055 4.055c-2.24 2.24-5.823 2.287-8.005.106z"></path><path fill="#DEE2EB" d="m62.051 68.59.811-.811 1.053 1.053-.81.811zM65.295 65.346l.811-.811 1.053 1.053-.81.811zM69.066 62.628l.81-.81.527.526-.81.81zM74.732 78.027c-2.028 2.027-3.895 2.052-5.094 1.934l-.26-.53.138-.402 1.879-.825c.44.35 3.445-.286 3.337-.177M53.43 15.165c-.654.654-.64 1.73.032 2.401.672.672 1.747.686 2.401.032l7.768-7.768-2.433-2.433zM58.085 2.038a2.115 2.115 0 0 0-1.71 2.516c.234 1.186 1.382 1.982 2.562 1.778l10.446-1.806.255-4.487zM55.095 19.989c-.655.654-.64 1.73.031 2.401.672.672 1.747.686 2.402.032l9.347-9.348-2.433-2.433zM59.129 22.443c-.655.654-.64 1.73.031 2.401.672.672 1.747.686 2.402.032l8.557-8.558-2.433-2.433zM64.743 23.317c-.655.654-.64 1.73.031 2.401.672.672 1.747.687 2.401.032l6.188-6.187-2.433-2.433z"></path><path fill="#DEE2EB" d="m60.671 7.924 12.166 12.165 6.055-6.056c2.182-2.181 2.135-5.765-.105-8.004l-4.055-4.056c-2.24-2.24-5.823-2.286-8.005-.105z"></path><path fill="#DEE2EB" d="m62.051 11.41.811.811 1.053-1.053-.81-.811zM65.295 14.654l.811.811 1.053-1.053-.81-.811zM69.066 17.372l.81.81.527-.526-.81-.81zM74.732 1.973C72.704-.054 70.837-.079 69.638.04l-.26.53.138.402 1.879.825c.44-.35 3.445.286 3.337.177M27.568 64.835c.654-.654.64-1.73-.032-2.401-.672-.672-1.747-.686-2.401-.032l-7.768 7.768 2.433 2.433zM22.913 77.962a2.115 2.115 0 0 0 1.71-2.516c-.235-1.186-1.382-1.982-2.562-1.778l-10.446 1.806-.255 4.487zM25.903 60.011c.655-.654.64-1.73-.031-2.401-.672-.672-1.747-.686-2.402-.032l-9.347 9.348 2.433 2.433zM21.87 57.557c.654-.654.64-1.73-.032-2.401-.672-.672-1.747-.686-2.402-.032l-8.557 8.557 2.433 2.434zM16.256 56.683c.654-.654.64-1.73-.032-2.401-.672-.672-1.747-.687-2.402-.032l-6.187 6.187 2.433 2.434z"></path><path fill="#DEE2EB" d="M20.327 72.076 8.16 59.911l-6.055 6.056c-2.182 2.181-2.134 5.765.105 8.004l4.055 4.055c2.24 2.24 5.824 2.287 8.005.106z"></path><path fill="#DEE2EB" d="m18.947 68.59-.811-.811-1.053 1.053.81.811zM15.703 65.346l-.811-.811-1.053 1.053.81.811zM11.932 62.628l-.81-.81-.527.526.81.81zM6.266 78.027c2.028 2.027 3.896 2.052 5.094 1.934l.26-.53-.138-.402-1.879-.825c-.44.35-3.445-.286-3.337-.177"></path>', 10);
-const _hoisted_12 = [
-  _hoisted_2
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M21.5 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#99DB0C",
+  d: "m28.94 7.96-3.78 3.73-2.1.25.25-2.1 3.73-3.78z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_12);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const consumption_tariffs = { render };
+const context_menu1 = { render };
 export {
-  consumption_tariffs as default,
+  context_menu1 as default,
   render
 };

package/dist/main.es95.js

@@ -2,17 +2,17 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "13",
-  height: "23",
+  width: "8",
+  height: "16",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
   fill: "#263238",
-  d: "M21.5 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+  d: "M21.5 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
 }, null, -1);
 const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
   fill: "#99DB0C",
-  d: "m28.94 7.96-3.78 3.73-2.1.25.25-2.1 3.73-3.78z"
+  d: "m22.94 18.96-3.78 3.73-2.1.25.25-2.1 3.73-3.78z"
 }, null, -1);
 const _hoisted_4 = [
   _hoisted_2,
@@ -21,8 +21,8 @@ const _hoisted_4 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const context_menu1 = { render };
+const context_menu2 = { render };
 export {
-  context_menu1 as default,
+  context_menu2 as default,
   render
 };

package/dist/main.es96.js

@@ -2,27 +2,22 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "8",
+  width: "6",
   height: "16",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
   fill: "#263238",
-  d: "M21.5 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+  d: "M21.75 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
 }, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#99DB0C",
-  d: "m22.94 18.96-3.78 3.73-2.1.25.25-2.1 3.73-3.78z"
-}, null, -1);
-const _hoisted_4 = [
-  _hoisted_2,
-  _hoisted_3
+const _hoisted_3 = [
+  _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const context_menu2 = { render };
+const context_menu = { render };
 export {
-  context_menu2 as default,
+  context_menu as default,
   render
 };

package/dist/main.es97.js

@@ -2,13 +2,13 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "6",
-  height: "16",
+  width: "16",
+  height: "6",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M21.75 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+  fill: "#B2B9C5",
+  d: "M16.5 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M27 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
 }, null, -1);
 const _hoisted_3 = [
   _hoisted_2
@@ -16,8 +16,8 @@ const _hoisted_3 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const context_menu = { render };
+const context_menu_tabs = { render };
 export {
-  context_menu as default,
+  context_menu_tabs as default,
   render
 };

package/dist/main.es98.js

@@ -2,13 +2,14 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "6",
-  fill: "none"
+  width: "800",
+  height: "800",
+  viewBox: "0 0 512 512"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#B2B9C5",
-  d: "M16.5 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M27 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+  fill: "none",
+  "fill-rule": "evenodd",
+  d: "M426.667 128v320h-256V128zM384 170.667H213.333v234.666H384zm-64-128v42.666H128v256H85.333V42.667z"
 }, null, -1);
 const _hoisted_3 = [
   _hoisted_2
@@ -16,8 +17,8 @@ const _hoisted_3 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const context_menu_tabs = { render };
+const copy = { render };
 export {
-  context_menu_tabs as default,
+  copy as default,
   render
 };

package/dist/main.es99.js

@@ -2,23 +2,27 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "800",
-  height: "800",
-  viewBox: "0 0 512 512"
+  width: "10",
+  height: "10",
+  fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "none",
-  "fill-rule": "evenodd",
-  d: "M426.667 128v320h-256V128zM384 170.667H213.333v234.666H384zm-64-128v42.666H128v256H85.333V42.667z"
+  fill: "#000",
+  d: "m9.879 8.479-1.4 1.4L.12 1.52l1.4-1.4L5.7 4.3z"
 }, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m1.521 9.879-1.4-1.4L8.48.12l1.4 1.4z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const copy = { render };
+const cross = { render };
 export {
-  copy as default,
+  cross as default,
   render
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.22.23-EPDM-14087.2",
+  "version": "8.22.23-EPDM-15023.1",
   "files": [
     "dist",
     "src"

package/src/components/barchart/BottomFields.vue

@@ -22,7 +22,7 @@
         <!-- For stacked bar chart -->
         <template v-if="seriesData.length">
           <InputRow
-            v-for="series in seriesData"
+            v-for="(series, seriesIndex) in seriesData"
             :key="series.name"
             :data-series-name="series.name"
           >
@@ -36,8 +36,10 @@
                 :allow-negative="false"
                 :default-number="0"
                 :disabled="isInputsDisabled"
+                :error-message="getInputErrorMessage(series.data, item.label)"
                 input-height="36px"
                 :is-disabled-styled-only="true"
+                :is-error="getIsError(series.data, item.label)"
                 :is-info-border="
                   fieldMode === 'percentage'
                     ? calculatePercentageTotal(item.label) !== 100
@@ -117,8 +119,10 @@
               <InputNumber
                 :allow-negative="false"
                 :disabled="isInputsDisabled"
+                :error-message="item.errorMessage"
                 input-height="36px"
                 :is-disabled-styled-only="true"
+                :is-error="item.isError"
                 :min-decimals="0"
                 :number-precision="0"
                 text-align="center"
@@ -142,6 +146,11 @@
       </InfoCardBody>
     </InfoCard>
   </InfoCardContainer>
+  <InfoCardContainer v-if="hasInputErrors" :y-axis-width="yAxisWidth">
+    <InfoCard align-items="center" type="error_minor">
+      <InfoCardBody> {{ inputErrorMessage }} </InfoCardBody>
+    </InfoCard>
+  </InfoCardContainer>
 </template>
 
 <script setup>
@@ -204,6 +213,10 @@
       type: String,
       default: '',
     },
+    inputErrorMessage: {
+      type: String,
+      default: '',
+    },
   })
 
   const seriesData = ref([])
@@ -229,6 +242,8 @@
         label: d.label,
         value: d.value,
         percentage: d.percentage,
+        isError: d.isError,
+        errorMessage: d.errorMessage,
         originalValue: currentSeriesData.length
           ? currentSeriesData[itemIndex].data[dIndex].originalValue
           : d.value,
@@ -275,7 +290,7 @@
     }
   }
 
-  const getDisplayValue = (data, label, shouldRound = true) => {
+  const getDisplayValue = (data, label) => {
     if (props.fieldMode === 'absolute') {
       return data.find((d) => d.label === label)?.value
     }
@@ -283,6 +298,13 @@
     return data.find((d) => d.label === label)?.percentage
   }
 
+  const getIsError = (data, label) => {
+    return data.find((d) => d.label === label)?.isError
+  }
+  const getInputErrorMessage = (data, label) => {
+    return data.find((d) => d.label === label)?.errorMessage
+  }
+
   const calculatePercentageTotal = (label) => {
     const percentageTotal = seriesData.value.reduce((sum, series) => {
       const percentage =
@@ -336,6 +358,14 @@
       return calculatePercentageTotal(d.label) !== 100
     })
   })
+  const hasInputErrors = computed(() => {
+    if (seriesData.value.length) {
+      return seriesData.value.some((serie) =>
+        serie.data.some((item) => item.isError)
+      )
+    }
+    return props.data.some((item) => item.isError)
+  })
 
   const handleFieldsScroll = (event) => {
     emit('sync-scroll', event.target.scrollLeft)

package/src/components/barchart/index.vue

@@ -166,6 +166,7 @@
       :is-inputs-disabled="isLoading"
       :is-scrollable="isScrollable"
       :percentage-error-message="percentageErrorMessage"
+      :input-error-message="inputErrorMessage"
       :series="series"
       :y-axis-width="yAxisWidth"
       @input-blur="handleInputBlur"
@@ -307,6 +308,10 @@
       type: String,
       default: '',
     },
+    inputErrorMessage: {
+      type: String,
+      default: '',
+    },
   })
 
   const generateChartId = () =>

package/src/components/buttons/mainButton/index.vue

@@ -7,11 +7,13 @@
       :data-id="dataId"
       :data-qa-id="dataQaId"
       :height="height"
+      :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
       :type="type"
       :variant="variant"
+      :width="width"
     >
       <LabelComponent :has-icon="Boolean(icon)">
         <Icon
@@ -50,11 +52,13 @@
     type: String,
     isDisabled: Boolean,
     minWidth: String,
+    width: String,
     noWrap: Boolean,
     height: String,
     variant: String,
     buttonSize: String,
     appTheme: String,
+    isActive: Boolean,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
@@ -73,6 +77,9 @@
       props.isDisabled
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.backgroundColor
+        : props.isActive
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .active.backgroundColor
         : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .default.backgroundColor};
     border: ${(props) => {
@@ -91,7 +98,7 @@
     ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
     height: ${(props) => props.height};
     line-height: 1;
-
+    width: ${(props) => props.width};
     &:hover {
       background-color: ${(props) =>
         props.isDisabled
@@ -170,6 +177,11 @@
         default: false,
         type: Boolean,
       },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
       icon: {
         required: false,
         default: null,
@@ -204,6 +216,11 @@
         default: null,
         type: String,
       },
+      width: {
+        required: false,
+        default: 'auto',
+        type: String,
+      },
       height: {
         required: false,
         default: 'auto',

package/src/components/draggableCard/index.vue

@@ -169,7 +169,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 8px;
-    background: ${theme.colors.transparentBlack2};
+    background: ${theme.colors.eturnityGrey};
     word-break: break-word;
     overflow-wrap: break-word;
     white-space: normal;

package/src/components/iconWrapper/index.vue

@@ -1,14 +1,13 @@
 <template>
   <Wrapper
     :background-color="backgroundColor"
-    :border-color="borderColor || iconColor"
     :border-radius="borderRadius"
+    :color="iconColor"
     :data-id="dataId"
     :data-qa-id="dataQaId"
     :disabled="disabled"
     :has-border="hasBorder"
     :hovered-background-color="hoveredBackgroundColor"
-    :hovered-border-color="hoveredBorderColor"
     :is-hovered="isHovered"
     :no-cursor="noCursor"
     :size="size"
@@ -52,24 +51,22 @@
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
 
-  const LockContainer = styled.div`
-    position: absolute;
-    bottom: 6px;
-    right: 6px;
-  `
-
   const wrapperAttrs = {
+    color: String,
     isHovered: Boolean,
-    borderColor: String,
     borderRadius: String,
     disabled: Boolean,
     size: String,
     backgroundColor: String,
     hoveredBackgroundColor: String,
-    hoveredBorderColor: String,
     hasBorder: Boolean,
     noCursor: Boolean,
   }
+  const LockContainer = styled.div`
+    position: absolute;
+    bottom: 6px;
+    right: 6px;
+  `
   const Wrapper = styled('div', wrapperAttrs)`
     position: relative;
     display: inline-flex;
@@ -77,8 +74,7 @@
     height: ${(props) => props.size};
     border: ${(props) =>
       props.hasBorder
-        ? 'solid 1px ' +
-          (props.theme.colors[props.borderColor] || props.borderColor)
+        ? 'solid 1px ' + props.theme.colors[props.color] || props.color
         : ''};
     justify-content: center;
     align-items: center;
@@ -89,32 +85,14 @@
     border-radius: ${(props) => props.borderRadius};
     ${(props) =>
       props.isHovered
-        ? `
-          background-color: ${
-            props.theme.colors[props.hoveredBackgroundColor] ??
-            props.hoveredBackgroundColor
-          };
-          ${
-            props.hoveredBorderColor
-              ? `border-color: ${
-                  props.theme.colors[props.hoveredBorderColor] ??
-                  props.hoveredBorderColor
-                };`
-              : ''
-          }
-        `
-        : ''}
+        ? 'background-color:' +
+            props.theme.colors[props.hoveredBackgroundColor] ||
+          props.hoveredBackgroundColor
+        : ''};
     &:hover {
       background-color: ${(props) =>
-        props.theme.colors[props.hoveredBackgroundColor] ??
+        props.theme.colors[props.hoveredBackgroundColor] ||
         props.hoveredBackgroundColor};
-      ${(props) =>
-        props.hoveredBorderColor
-          ? `border-color: ${
-              props.theme.colors[props.hoveredBorderColor] ??
-              props.hoveredBorderColor
-            };`
-          : ''}
     }
   `
   const CaretIcon = styled.div`
@@ -134,69 +112,45 @@
     },
     props: {
       disabled: {
-        type: Boolean,
         required: false,
         default: false,
       },
       name: {
-        type: String,
         required: true,
       },
       iconColor: {
-        type: String,
         required: false,
         default: 'white',
       },
       hoveredIconColor: {
-        type: String,
         required: false,
-        default: null,
       },
       backgroundColor: {
-        type: String,
         required: false,
-        default: 'transparent',
       },
       hasBorder: {
-        type: Boolean,
         required: false,
-        default: false,
       },
       hoveredBackgroundColor: {
-        type: String,
         required: false,
         default: 'transparentWhite2',
       },
       size: {
-        type: String,
         required: false,
         default: '32px',
       },
       iconSize: {
-        type: String,
         required: false,
         default: '18px',
       },
       hasCaret: {
-        type: Boolean,
         required: false,
         default: false,
       },
       borderRadius: {
-        type: String,
         required: false,
         default: '6px',
       },
-      borderColor: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      hoveredBorderColor: {
-        type: String,
-        required: false,
-        default: null,
-      },
       dataId: {
         type: String,
         default: '',
@@ -206,27 +160,22 @@
         default: '',
       },
       isHovered: {
-        type: Boolean,
         required: false,
         default: false,
       },
       isStriked: {
-        type: Boolean,
         required: false,
         default: false,
       },
       isLoading: {
-        type: Boolean,
         required: false,
         default: false,
       },
       noCursor: {
-        type: Boolean,
         required: false,
         default: false,
       },
       hasLock: {
-        type: Boolean,
         required: false,
         default: false,
       },

package/src/components/infoText/index.vue

@@ -49,7 +49,10 @@
         <slot name="trigger"></slot>
       </IconWrapper>
     </div>
-    <Teleport v-if="isVisible && (!!text || $slots.default)" to="body">
+    <Teleport
+      v-if="!hideInfoText && isVisible && (!!text || $slots.default)"
+      to="body"
+    >
       <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"