@eturnity/eturnity_reusable_components 9.3.1-EPDM-13987.0 → 9.3.1-EPDM-16285.0

package/dist/main.es82.js

@@ -1,33 +1,31 @@
 import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+import { openBlock, createElementBlock, createBlock, withCtx, createTextVNode, resolveDynamicComponent, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "40",
-  height: "37.5",
-  version: "1.0"
+  "xml:space": "preserve",
+  id: "Layer_1",
+  x: "0",
+  y: "0",
+  version: "1.1",
+  viewBox: "0 0 20 20"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  d: "M22.5 23V3",
-  style: { "fill": "none", "fill-opacity": ".75", "fill-rule": "evenodd", "stroke": "#000", "stroke-width": "1px", "stroke-linecap": "butt", "stroke-linejoin": "miter", "stroke-opacity": "1" }
+  d: "M15.777 8.974h3v-2h-3V6h-1c-1.857 0-3.404 1.272-3.855 2.987H8.889V1H1.223v18H8.89v-8.013h2.025A3.99 3.99 0 0 0 14.777 14h1v-1.026h3v-2h-3v-2M6.889 17H3.223V3H6.89v14z",
+  class: "st2"
 }, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  d: "M22.933 23.5 15 31.5",
-  style: { "fill": "none", "fill-opacity": ".75", "fill-rule": "evenodd", "stroke": "#000", "stroke-width": "1.00000012px", "stroke-linecap": "butt", "stroke-linejoin": "miter", "stroke-opacity": "1" }
-}, null, -1);
-const _hoisted_4 = /* @__PURE__ */ createBaseVNode("path", {
-  d: "m3 31.5 8-8h24l-8 8",
-  style: { "fill": "none", "fill-opacity": ".75", "fill-rule": "evenodd", "stroke": "#000", "stroke-width": "1px", "stroke-linecap": "butt", "stroke-linejoin": "miter", "stroke-opacity": "1" }
-}, null, -1);
-const _hoisted_5 = [
-  _hoisted_2,
-  _hoisted_3,
-  _hoisted_4
-];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_5);
+  return openBlock(), createElementBlock("svg", _hoisted_1, [
+    (openBlock(), createBlock(resolveDynamicComponent("style"), null, {
+      default: withCtx(() => [
+        createTextVNode(".st1{display:inline}.st2{fill:#fff}")
+      ]),
+      _: 1
+    })),
+    _hoisted_2
+  ]);
 }
-const chassis_ground_symbol = { render };
+const charger_icon_white = { render };
 export {
-  chassis_ground_symbol as default,
+  charger_icon_white as default,
   render
 };

package/dist/main.es83.js

@@ -2,22 +2,32 @@ 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: "16",
-  fill: "none"
+  width: "40",
+  height: "37.5",
+  version: "1.0"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M25.444 13H14.556c-.864 0-1.556.7-1.556 1.556v10.888C13 26.3 13.692 27 14.556 27h10.888c.864 0 1.556-.7 1.556-1.556V14.556C27 13.7 26.308 13 25.444 13m-7 10.889L14.556 20l1.096-1.097 2.792 2.785 5.904-5.904 1.096 1.105z"
+  d: "M22.5 23V3",
+  style: { "fill": "none", "fill-opacity": ".75", "fill-rule": "evenodd", "stroke": "#000", "stroke-width": "1px", "stroke-linecap": "butt", "stroke-linejoin": "miter", "stroke-opacity": "1" }
 }, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  d: "M22.933 23.5 15 31.5",
+  style: { "fill": "none", "fill-opacity": ".75", "fill-rule": "evenodd", "stroke": "#000", "stroke-width": "1.00000012px", "stroke-linecap": "butt", "stroke-linejoin": "miter", "stroke-opacity": "1" }
+}, null, -1);
+const _hoisted_4 = /* @__PURE__ */ createBaseVNode("path", {
+  d: "m3 31.5 8-8h24l-8 8",
+  style: { "fill": "none", "fill-opacity": ".75", "fill-rule": "evenodd", "stroke": "#000", "stroke-width": "1px", "stroke-linecap": "butt", "stroke-linejoin": "miter", "stroke-opacity": "1" }
+}, null, -1);
+const _hoisted_5 = [
+  _hoisted_2,
+  _hoisted_3,
+  _hoisted_4
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_5);
 }
-const checkbox = { render };
+const chassis_ground_symbol = { render };
 export {
-  checkbox as default,
+  chassis_ground_symbol as default,
   render
 };

package/dist/main.es84.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: "20",
-  height: "20",
+  width: "16",
+  height: "16",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#fff",
-  d: "M17.069 17.069a9.99 9.99 0 0 0 0-14.138 9.99 9.99 0 0 0-14.138 0 9.99 9.99 0 0 0 0 14.138 9.99 9.99 0 0 0 14.138 0M6.424 8.503l2.245 2.245 4.907-4.906 1.746 1.746-4.906 4.907-1.747 1.663-1.746-1.663-2.245-2.245z"
+  fill: "#263238",
+  d: "M25.444 13H14.556c-.864 0-1.556.7-1.556 1.556v10.888C13 26.3 13.692 27 14.556 27h10.888c.864 0 1.556-.7 1.556-1.556V14.556C27 13.7 26.308 13 25.444 13m-7 10.889L14.556 20l1.096-1.097 2.792 2.785 5.904-5.904 1.096 1.105z"
 }, 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 checkmark = { render };
+const checkbox = { render };
 export {
-  checkmark as default,
+  checkbox as default,
   render
 };

package/dist/main.es85.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: "16",
-  height: "16",
+  width: "20",
+  height: "20",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#99DB0C",
-  d: "M14.461 4.616a.762.762 0 1 0-1.077-1.077l-7.705 7.704a.762.762 0 1 0 1.078 1.078z"
+  fill: "#fff",
+  d: "M17.069 17.069a9.99 9.99 0 0 0 0-14.138 9.99 9.99 0 0 0-14.138 0 9.99 9.99 0 0 0 0 14.138 9.99 9.99 0 0 0 14.138 0M6.424 8.503l2.245 2.245 4.907-4.906 1.746 1.746-4.906 4.907-1.747 1.663-1.746-1.663-2.245-2.245z"
 }, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#99DB0C",
-  d: "M5.634 12.33a.762.762 0 1 0 1.077-1.077L2.616 7.158A.762.762 0 0 0 1.54 8.235z"
-}, 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 checkmark_thin = { render };
+const checkmark = { render };
 export {
-  checkmark_thin as default,
+  checkmark as default,
   render
 };

package/dist/main.es86.js

@@ -6,15 +6,13 @@ const _hoisted_1 = {
   height: "16",
   fill: "none"
 };
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("circle", {
-  cx: "8",
-  cy: "8",
-  r: "7",
-  fill: "#fff"
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#99DB0C",
+  d: "M14.461 4.616a.762.762 0 1 0-1.077-1.077l-7.705 7.704a.762.762 0 1 0 1.078 1.078z"
 }, null, -1);
 const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
   fill: "#99DB0C",
-  d: "M12.958 12.941A7 7 0 1 0 3.042 3.06a7 7 0 0 0 9.916 9.882m-7.455-6.02 1.575 1.575 3.448-3.424 1.219 1.196-3.447 3.47-1.226 1.22-1.219-1.22-1.575-1.574z"
+  d: "M5.634 12.33a.762.762 0 1 0 1.077-1.077L2.616 7.158A.762.762 0 0 0 1.54 8.235z"
 }, null, -1);
 const _hoisted_4 = [
   _hoisted_2,
@@ -23,8 +21,8 @@ const _hoisted_4 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const checkmark_white = { render };
+const checkmark_thin = { render };
 export {
-  checkmark_white as default,
+  checkmark_thin as default,
   render
 };

package/dist/main.es87.js

@@ -9,18 +9,22 @@ const _hoisted_1 = {
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("circle", {
   cx: "8",
   cy: "8",
-  r: "6",
-  stroke: "#fff",
-  class: "isStroke"
+  r: "7",
+  fill: "#fff"
 }, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#99DB0C",
+  d: "M12.958 12.941A7 7 0 1 0 3.042 3.06a7 7 0 0 0 9.916 9.882m-7.455-6.02 1.575 1.575 3.448-3.424 1.219 1.196-3.447 3.47-1.226 1.22-1.219-1.22-1.575-1.574z"
+}, 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 circle = { render };
+const checkmark_white = { render };
 export {
-  circle as default,
+  checkmark_white as default,
   render
 };

package/dist/main.es99.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: "16",
-  height: "16",
+  width: "18",
+  height: "18",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#000",
-  d: "M13.646 14.354a.5.5 0 1 0 .707-.707l-2.48-2.48H14a.5.5 0 1 0 0-1h-3.333a.5.5 0 0 0-.5.5V14a.5.5 0 0 0 .99.102l.01-.102v-2.126zm-12-12.707a.5.5 0 0 1 .629-.065l.079.065 2.48 2.48V2a.5.5 0 1 1 1 0v3.333a.5.5 0 0 1-.5.5H2a.5.5 0 1 1 0-1h2.126l-2.48-2.48-.064-.079a.5.5 0 0 1 .065-.627m8.52.353v3.333a.5.5 0 0 0 .5.5H14l.101-.01a.5.5 0 0 0 0-.98L14 4.833h-2.126l2.48-2.48.064-.079a.5.5 0 0 0-.692-.692l-.08.065-2.48 2.48V2a.5.5 0 0 0-1 0M5.834 14a.5.5 0 0 1-1 0v-2.126l-2.48 2.48a.5.5 0 1 1-.706-.707l2.48-2.48H2a.5.5 0 0 1 0-1h3.333l.1.01a.5.5 0 0 1 .4.49z"
+  fill: "#263238",
+  d: "M17 10H1c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1M4 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2M17 0H1C.45 0 0 .45 0 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1M4 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2"
 }, 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 collapse_all_corners = { render };
+const collections = { render };
 export {
-  collapse_all_corners as default,
+  collections as default,
   render
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.3.1-EPDM-13987.0",
+  "version": "9.3.1-EPDM-16285.0",
   "files": [
     "dist",
     "src"

package/src/assets/theme.js

@@ -70,7 +70,7 @@ const theme = (() => {
     disabled: '#dfe1e1',
     transparentWhite2: '#ffffff32',
     transparentWhite1: '#ffffff16',
-    transparentBlack1: '#162228e6',
+    transparentBlack1: '#263238e6',
     transparentBlack2: '#263238e5',
     transparentBlue1: '#20a4cae6',
     blueElectric: '#66dffa',
@@ -178,39 +178,6 @@ const theme = (() => {
       800: '#662222',
       900: '#331111',
     },
-    transparentWhite: {
-      100: '#ffffff24',
-      200: '#ffffff48',
-      300: '#ffffff64',
-      400: '#ffffff80',
-      500: '#ffffff96',
-      600: '#ffffffb4',
-      700: '#ffffffd4',
-      800: '#ffffffe6',
-      900: '#fffffffa',
-    },
-    transparentBlack: {
-      100: '#00000024',
-      200: '#00000048',
-      300: '#00000064',
-      400: '#00000080',
-      500: '#00000096',
-      600: '#000000b4',
-      700: '#000000d4',
-      800: '#000000e6',
-      900: '#000000fa',
-    },
-    transparentTeal: {
-      100: '#6E8E9E24',
-      200: '#6E8E9E48',
-      300: '#6E8E9E64',
-      400: '#6E8E9E80',
-      500: '#6E8E9E96',
-      600: '#6E8E9Eb4',
-      700: '#6E8E9Ed4',
-      800: '#6E8E9Ee6',
-      900: '#6E8E9Efa',
-    },
   }
 
   const chartGradients = {
@@ -566,23 +533,23 @@ const theme = (() => {
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: 'transparent',
+              backgroundColor: semanticColors.teal[800],
               textColor: semanticColors.purple[50],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.transparentTeal[500],
+              backgroundColor: semanticColors.teal[600],
               textColor: semanticColors.purple[50],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.transparentTeal[300],
+              backgroundColor: semanticColors.teal[700],
               textColor: semanticColors.purple[50],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.transparentTeal[600],
               textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
               borderColor: '',
             },
           },
@@ -620,18 +587,67 @@ const theme = (() => {
               borderColor: semanticColors.teal[500],
             },
             hover: {
-              backgroundColor: semanticColors.transparentTeal[500],
+              backgroundColor: semanticColors.teal[600],
+              textColor: semanticColors.purple[50],
+              borderColor: semanticColors.teal[400],
+            },
+            active: {
+              backgroundColor: semanticColors.teal[700],
+              textColor: semanticColors.purple[50],
+              borderColor: semanticColors.teal[300],
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: semanticColors.grey[800],
+            },
+          },
+          cancel: {
+            // variant
+            default: {
+              backgroundColor: semanticColors.teal[200],
+              textColor: semanticColors.red[400],
+              borderColor: semanticColors.teal[500],
+            },
+            hover: {
+              backgroundColor: semanticColors.red[700],
+              textColor: semanticColors.red[700],
+              borderColor: semanticColors.teal[400],
+            },
+            active: {
+              backgroundColor: semanticColors.red[600],
+              textColor: semanticColors.red[200],
+              borderColor: semanticColors.teal[300],
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: semanticColors.grey[800],
+            },
+          },
+        },
+        tertiary: {
+          // type
+          main: {
+            // variant: this is the default variant
+            default: {
+              backgroundColor: 'transparent',
+              textColor: semanticColors.purple[50],
+              borderColor: semanticColors.teal[500],
+            },
+            hover: {
+              backgroundColor: semanticColors.teal[600],
               textColor: semanticColors.purple[50],
               borderColor: semanticColors.teal[400],
             },
             active: {
-              backgroundColor: semanticColors.transparentTeal[300],
+              backgroundColor: semanticColors.teal[700],
               textColor: semanticColors.purple[50],
               borderColor: semanticColors.teal[300],
             },
             disabled: {
-              backgroundColor: semanticColors.transparentTeal[600],
               textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
               borderColor: semanticColors.grey[800],
             },
           },
@@ -669,18 +685,18 @@ const theme = (() => {
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.transparentTeal[500],
+              backgroundColor: semanticColors.teal[600],
               textColor: semanticColors.purple[50],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.transparentTeal[300],
+              backgroundColor: semanticColors.teal[700],
               textColor: semanticColors.purple[50],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.transparentTeal[600],
               textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
               borderColor: '',
             },
           },

package/src/components/accordion/Accordion.stories.js

@@ -1,4 +1,5 @@
 import Accordion from './index.vue'
+import theme from '@/assets/theme'
 
 export default {
   title: 'Accordion',
@@ -26,6 +27,9 @@ const Template = (args, { argTypes }) => ({
       </div>
   </template>
 </Accordion>`,
+  provide: {
+    theme,
+  },
 })
 
 export const Default = Template.bind({})

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

@@ -10,7 +10,6 @@
       :height="height"
       :is-active="isActive"
       :is-disabled="isDisabled"
-      :is-hovered="isHovered"
       :min-width="minWidth"
       :type="type"
       :variant="variant"
@@ -47,7 +46,7 @@
         data-test-id="button-icon-text"
         :height="height"
       >
-        {{ isFirstLetterCapitalized ? capitalizeFirstLetter(text) : text }}
+        {{ text }}
         <Icon
           v-if="showCaret"
           :color="
@@ -116,13 +115,11 @@
     variant: String,
     appTheme: String,
     isActive: Boolean,
-    isHovered: Boolean,
     height: String,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     position: relative;
     display: grid;
-    align-content: center
     grid-template-columns: auto 1fr auto;
     height: ${({ height }) => height};
     font-size: ${(props) =>
@@ -143,9 +140,6 @@
         : props.isActive
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .active.backgroundColor
-        : props.isHovered
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .hover.backgroundColor
         : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .default.backgroundColor};
     border: ${(props) => {
@@ -215,7 +209,6 @@
     width: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.iconWidth};
     background: rgba(255, 255, 255, 0.1);
-    border-radius: 4px 0 0 4px;
     border-right: ${(props) => {
       const borderColor =
         props.theme.mainButton[props.appTheme][props.type][props.variant]
@@ -357,11 +350,6 @@
         default: false,
         type: Boolean,
       },
-      isHovered: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
       fillType: {
         required: false,
         default: 'fill',
@@ -401,21 +389,20 @@
         type: String,
         default: '',
       },
-      isFirstLetterCapitalized: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     data() {
       return {
         theme: Theme,
       }
     },
-    methods: {
-      capitalizeFirstLetter(word) {
-        return word.charAt(0).toUpperCase() + word.slice(1)
-      },
-    },
+    // computed: {
+    //   getIconColor() {
+    //     console.log(this.theme[this.themeType][this.type][this.variant])
+    //     return (
+    //       this.iconColor ||
+    //       this.theme[this.themeType][this.type][this.variant].textColor
+    //     )
+    //   },
+    // },
   }
 </script>

package/src/components/infoCard/index.vue

@@ -10,13 +10,15 @@
     :padding="padding"
     :preset-styles="presetStyles"
   >
-    <RCIcon
-      :color="iconColor ? iconColor : presetStyles.iconColor"
-      data-test-id="info_card_icon"
-      :hovered-color="iconColor ? iconColor : presetStyles.iconColor"
-      :name="getIconName()"
-      size="18px"
-    />
+    <IconWrapper :size="iconWrapperSize ? iconWrapperSize : iconSize">
+      <RCIcon
+        :color="iconColor ? iconColor : presetStyles.iconColor"
+        data-test-id="info_card_icon"
+        :hovered-color="iconColor ? iconColor : presetStyles.iconColor"
+        :name="getIconName()"
+        :size="iconSize"
+      />
+    </IconWrapper>
     <TextContainer data-test-id="info_card_text_container">
       <slot></slot>
     </TextContainer>
@@ -65,12 +67,23 @@
     width: 100%;
   `
 
+  const IconWrapper = styled('div', {
+    size: String,
+  })`
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `
+
   export default {
     name: 'InfoCard',
     components: {
       RCIcon,
       InfoContainer,
       TextContainer,
+      IconWrapper,
     },
     props: {
       type: {
@@ -128,6 +141,16 @@
         type: String,
         default: '',
       },
+      iconSize: {
+        required: false,
+        type: String,
+        default: '18px',
+      },
+      iconWrapperSize: {
+        required: false,
+        type: String,
+        default: null,
+      },
     },
     computed: {
       isInfoSimple() {

package/src/components/inputs/select/index.vue

@@ -25,6 +25,7 @@
               : 'eturnityGrey'
           "
           :font-size="fontSize"
+          :font-weight="labelFontWeight"
           >{{ label }}
           <IsRequiredLabelStar v-if="isRequiredLabel" />
           <OptionalLabel v-if="labelOptional">
@@ -287,14 +288,14 @@
     overflow: hidden;`}
   `
 
-  const labelAttrs = { fontSize: String, fontColor: String }
+  const labelAttrs = { fontSize: String, fontColor: String, fontWeight: String }
   const InputLabel = styled('div', labelAttrs)`
     color: ${(props) =>
       props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
     font-size: ${(props) => props.fontSize};
-    font-weight: 700;
+    font-weight: ${(props) => props.fontWeight};
   `
   const OptionalLabel = styled.span`
     font-weight: 300;
@@ -539,6 +540,11 @@
       label: {
         required: false,
       },
+      labelFontWeight: {
+        required: false,
+        default: '700',
+        type: String,
+      },
       isRequiredLabel: {
         required: false,
         default: false,
@@ -718,7 +724,7 @@
       },
     },
     setup() {
-      const modalRef = inject('modalRef', null)
+      const modalRef = inject('modalRef')
 
       return {
         modalRef,