@eturnity/eturnity_reusable_components 9.3.1-EPDM-13987.1 → 9.3.1-EPDM-1744.5

package/README.md

@@ -1,11 +1,99 @@
 # eturnity_reusable_components
 
-## To use in a project:
+## Installation
 
-```
+```bash
 npm install @eturnity/eturnity_reusable_components
 ```
 
+## Usage
+
+### Setting up the theme
+
+The library now includes its own theme. You need to wrap your application with the `ThemeProvider` component from this library.
+
+**Recommended approach - Using the exported theme:**
+
+```vue
+<!-- App.vue -->
+<template>
+  <ThemeProvider :theme="eturnityTheme">
+    <RouterView />
+    <!-- Your app content -->
+  </ThemeProvider>
+</template>
+
+<script>
+  import {
+    ThemeProvider,
+    theme as eturnityTheme,
+  } from '@eturnity/eturnity_reusable_components'
+
+  export default {
+    components: { ThemeProvider },
+    setup() {
+      return {
+        eturnityTheme,
+      }
+    },
+  }
+</script>
+```
+
+**Alternative - Using the plugin (for non-styled-component scenarios):**
+
+If you also need the theme accessible via Vue's provide/inject:
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import EturnityComponentsPlugin from '@eturnity/eturnity_reusable_components'
+
+const app = createApp(App)
+app.use(EturnityComponentsPlugin)
+app.mount('#app')
+```
+
+### Using individual components
+
+You can still import and use individual components directly:
+
+```javascript
+import MainButton from '@eturnity/eturnity_reusable_components/src/components/buttons/mainButton'
+import InputText from '@eturnity/eturnity_reusable_components/src/components/inputs/inputText'
+```
+
+### Overriding the theme (optional)
+
+If you need to customize or override the theme, you can pass your own theme when installing the plugin:
+
+```javascript
+import EturnityComponentsPlugin, {
+  theme as defaultTheme,
+} from '@eturnity/eturnity_reusable_components'
+
+const customTheme = {
+  ...defaultTheme,
+  colors: {
+    ...defaultTheme.colors,
+    primary: '#YOUR_COLOR',
+  },
+}
+
+app.use(EturnityComponentsPlugin, { theme: customTheme })
+```
+
+### Direct access to theme
+
+You can also import and use the theme directly:
+
+```javascript
+import { theme } from '@eturnity/eturnity_reusable_components'
+// or
+import theme from '@eturnity/eturnity_reusable_components/theme'
+```
+
 ### To run locally
 
 ```

package/dist/index.es.js

@@ -0,0 +1,17 @@
+import { ThemeProvider } from "vue3-styled-components";
+import { withLibraryTheme } from "./index.es2.js";
+import theme from "./index.es3.js";
+const EturnityComponentsPlugin = {
+  install(app, options = {}) {
+    const finalTheme = options.theme || theme;
+    app.provide("eturnityTheme", finalTheme);
+    app.config.globalProperties.$eturnityTheme = finalTheme;
+  }
+};
+export {
+  EturnityComponentsPlugin,
+  ThemeProvider,
+  EturnityComponentsPlugin as default,
+  theme,
+  withLibraryTheme
+};

package/dist/index.es2.js

@@ -0,0 +1,27 @@
+import { defineComponent, h } from "vue";
+import { ThemeProvider } from "vue3-styled-components";
+import theme from "./index.es3.js";
+function withLibraryTheme(component, componentName = "Component") {
+  return defineComponent({
+    name: `Eturnity${componentName}`,
+    inheritAttrs: true,
+    setup(props, {
+      attrs,
+      slots
+    }) {
+      return () => h(ThemeProvider, {
+        theme
+      }, {
+        default: () => h(component, {
+          ...props,
+          ...attrs
+        }, slots)
+      });
+    }
+  });
+}
+export {
+  withLibraryTheme as default,
+  theme,
+  withLibraryTheme
+};

package/dist/{main.es8.js → index.es3.js}

@@ -71,7 +71,7 @@ const theme = (() => {
     disabled: "#dfe1e1",
     transparentWhite2: "#ffffff32",
     transparentWhite1: "#ffffff16",
-    transparentBlack1: "#162228e6",
+    transparentBlack1: "#263238e6",
     transparentBlack2: "#263238e5",
     transparentBlue1: "#20a4cae6",
     blueElectric: "#66dffa",
@@ -177,39 +177,6 @@ const theme = (() => {
       700: "#993434",
       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 = {
@@ -575,23 +542,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: ""
             }
           },
@@ -629,18 +596,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]
             }
           },
@@ -678,18 +694,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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.3.1-EPDM-13987.1",
+  "version": "9.3.1-EPDM-1744.5",
   "files": [
     "dist",
     "src"
   ],
-  "main": "./dist/main.umd.js",
-  "module": "./dist/main.es.js",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -20,6 +20,10 @@
     "merge-remote-master": "node scripts/merge-remote-master.js",
     "prepublishOnly": "npm run test && npm run build"
   },
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "vue3-styled-components": "^1.0.0"
+  },
   "dependencies": {
     "@originjs/vite-plugin-commonjs": "1.0.3",
     "@vue/compat": "3.3.4",

package/src/assets/svgIcons/cookie.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.76848 0.499692C7.27285 0.482653 7.51085 0.982283 7.40227 1.34149V1.34247C7.31195 1.6384 7.28786 2.11586 7.41985 2.50946C7.54138 2.8714 7.77048 3.11974 8.20891 3.15887H8.21087C8.25521 3.16302 8.29937 3.17126 8.34173 3.18426L8.46477 3.237L8.57415 3.31219L8.66595 3.40887L8.73528 3.52215L8.78118 3.64813L8.79973 3.77997C8.80149 3.82413 8.7992 3.86895 8.79192 3.91278L8.78997 3.9245C8.69351 4.42951 8.79248 4.76904 8.95891 4.95672C9.11653 5.13404 9.43841 5.29125 10.0585 5.20477L10.0761 5.20282C10.1493 5.19522 10.2235 5.19956 10.2949 5.21649L10.3652 5.23797L10.4325 5.26629C10.4763 5.28787 10.5177 5.31464 10.5556 5.3454L10.6103 5.3952L10.6581 5.44989C10.6883 5.48847 10.7145 5.53055 10.7353 5.57489L10.7626 5.64325L10.7822 5.71356C10.7977 5.78511 10.8009 5.85928 10.7919 5.93231L10.7909 5.94012C10.7298 6.37631 10.8905 6.67501 11.1249 6.8161C11.3671 6.96157 11.841 7.03044 12.5751 6.66082L12.5771 6.65985C12.9695 6.46382 13.5189 6.72222 13.499 7.24676C13.4345 8.9266 12.7218 10.5165 11.5107 11.6823C10.2993 12.8481 8.68311 13.4996 7.00188 13.4997C5.29835 13.4988 3.66225 12.8294 2.44719 11.6354C1.2324 10.4415 0.534515 8.81797 0.503824 7.11493C0.473259 5.41173 1.11283 3.76395 2.2841 2.52704C3.45538 1.2903 5.06528 0.561917 6.76751 0.499692H6.76848ZM6.34856 1.53582C5.07869 1.6884 3.89567 2.27896 3.00969 3.21454C2.01866 4.2611 1.47809 5.65529 1.50383 7.09637C1.52977 8.53759 2.1203 9.91217 3.14836 10.9225C4.17649 11.9328 5.56048 12.4989 7.00188 12.4997L7.26751 12.4929C8.59383 12.4287 9.85626 11.8866 10.8173 10.9616C11.7009 10.111 12.2701 8.99358 12.4452 7.79071C11.75 8.01196 11.1114 7.97533 10.6093 7.67352C10.0857 7.35864 9.81085 6.81654 9.78118 6.2243C9.13445 6.23459 8.58523 6.04228 8.21087 5.62079C7.84388 5.20726 7.71936 4.65775 7.76165 4.09051C7.0627 3.90439 6.6585 3.38441 6.47161 2.82782C6.32856 2.40142 6.30313 1.93704 6.34856 1.53582ZM6.49993 9.99969C6.77593 9.99969 6.9997 10.2237 6.99993 10.4997C6.99993 10.7758 6.77607 10.9997 6.49993 10.9997C6.22382 10.9997 5.99993 10.7758 5.99993 10.4997C6.00015 10.2238 6.22396 9.99973 6.49993 9.99969ZM9.49993 8.99969C9.77593 8.99969 9.9997 9.22374 9.99993 9.49969C9.99993 9.77583 9.77607 9.99969 9.49993 9.99969C9.22382 9.99965 8.99993 9.77581 8.99993 9.49969C9.00016 9.22377 9.22396 8.99973 9.49993 8.99969ZM3.49992 7.99969C3.77592 7.99969 3.99969 8.22374 3.99992 8.49969C3.99992 8.77583 3.77607 8.99969 3.49992 8.99969C3.22381 8.99965 2.99992 8.77581 2.99992 8.49969C3.00015 8.22377 3.22396 7.99973 3.49992 7.99969ZM6.49993 6.99969C6.77593 6.99969 6.9997 7.22374 6.99993 7.49969C6.99993 7.77583 6.77607 7.99969 6.49993 7.99969C6.22382 7.99965 5.99993 7.77581 5.99993 7.49969C6.00016 7.22377 6.22396 6.99973 6.49993 6.99969ZM4.49992 3.99969C4.77592 3.99969 4.99969 4.22374 4.99992 4.49969C4.99992 4.77583 4.77607 4.99969 4.49992 4.99969C4.22382 4.99965 3.99992 4.77581 3.99992 4.49969C4.00015 4.22377 4.22396 3.99973 4.49992 3.99969Z" fill="#263238"/>
+</svg>

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/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/icon/icon.spec.js

@@ -22,7 +22,8 @@ describe('RCIcon.vue', () => {
 
     expect(iconWrapper.exists()).toBe(true)
     expect(iconImage.exists()).toBe(true)
-    expect(wrapper.props('size')).toBe('30px')
+    // The wrapper component doesn't expose props directly, so we check the icon component
+    expect(wrapper.findComponent({ name: 'EturnityIcon' }).exists()).toBe(true)
   })
 
   it('renders striked line when isStriked is true', async () => {

package/src/components/icon/index.js

@@ -0,0 +1,14 @@
+import { h } from 'vue'
+import { ThemeProvider } from 'vue3-styled-components'
+import theme from '../../assets/theme.js'
+import IconComponent from './Icon.vue'
+
+export default {
+  name: 'EturnityIcon',
+  setup(props, { attrs, slots }) {
+    return () =>
+      h(ThemeProvider, { theme }, () =>
+        h(IconComponent, { ...props, ...attrs }, slots)
+      )
+  },
+}

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

@@ -718,7 +718,7 @@
       },
     },
     setup() {
-      const modalRef = inject('modalRef', null)
+      const modalRef = inject('modalRef')
 
       return {
         modalRef,

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

@@ -12,7 +12,6 @@
         <InfoText v-if="infoTextMessage" size="16px" :text="infoTextMessage" />
       </LabelWrapper>
       <InputContainer
-        :app-theme="appTheme"
         :disabled="isDisabled"
         :font-size="fontSize"
         :input-width="inputWidth"
@@ -79,7 +78,6 @@
     disabled: Boolean,
     fontSize: String,
     inputWidth: String,
-    appTheme: String,
   }
 
   const InputContainer = styled('div', inputProps)`
@@ -92,12 +90,7 @@
         props.hasUnit ? '11px 40px 11px 10px !important' : '15px !important'};
       border-radius: 4px !important;
       font-size: ${(props) => `${props.fontSize} !important`};
-      color: ${({ appTheme, theme }) =>
-        `${
-          appTheme == 'dark' ? theme.colors.white : theme.colors.grey1
-        } !important`};
-      background-color: ${({ appTheme }) =>
-        appTheme == 'dark' ? 'transparent' : 'white'};
+      color: ${(props) => `${props.theme.colors.grey1} !important`};
       width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
       max-width: 100%;
       box-sizing: border-box; // to allow width of 100% with padding
@@ -214,10 +207,6 @@
         default: false,
         type: Boolean,
       },
-      appTheme: {
-        type: String,
-        default: 'light',
-      },
     },
     methods: {
       onChangeHandler($event) {