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

package/dist/main.es95.js

@@ -2,27 +2,24 @@ 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: "15",
-  height: "15",
+  width: "14",
+  height: "14",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#FF5656",
-  d: "m26.293 14.792-1.076-1.077-11.502 11.502 1.076 1.076z"
+  stroke: "#fff",
+  "stroke-width": "1.273",
+  d: "m3 2 4 3 4-3M3 12l4-3 4 3",
+  class: "fix"
 }, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#FF5656",
-  d: "m25.208 26.285 1.077-1.076-11.502-11.502-1.076 1.076z"
-}, 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 close = { render };
+const collapse_all = { render };
 export {
-  close as default,
+  collapse_all as default,
   render
 };

package/dist/main.es96.js

@@ -8,28 +8,16 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
   fill: "#263238",
-  d: "M6 7H3S2 7 2 6V3s0-1 1-1h3s1 0 1 1v3s0 1-1 1"
+  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 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  "fill-rule": "evenodd",
-  d: "M16 9a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2h-5a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2zm-1-2a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1zM7 18a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2zm-1-2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1z",
-  "clip-rule": "evenodd"
-}, null, -1);
-const _hoisted_4 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M15 16h-3s-1 0-1-1v-3s0-1 1-1h3s1 0 1 1v3s0 1-1 1"
-}, null, -1);
-const _hoisted_5 = [
-  _hoisted_2,
-  _hoisted_3,
-  _hoisted_4
+const _hoisted_3 = [
+  _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_5);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const co_branding = { render };
+const collections = { render };
 export {
-  co_branding as default,
+  collections as default,
   render
 };

package/dist/main.es97.js

@@ -2,22 +2,25 @@ 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: "12",
-  height: "14",
-  fill: "none"
+  width: "29",
+  height: "29",
+  fill: "#333"
 };
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "m20 19 5-5H15zM20 21l-5 5h10z"
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", { d: "m10.5 14 4-8 4 8z" }, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#ccc",
+  d: "m10.5 16 4 8 4-8z",
+  class: "fix"
 }, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
+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 collapse = { render };
+const compass = { render };
 export {
-  collapse as default,
+  compass as default,
   render
 };

package/dist/main.es98.js

@@ -2,24 +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: "14",
-  height: "14",
+  width: "42",
+  height: "42",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  stroke: "#fff",
-  "stroke-width": "1.273",
-  d: "m3 2 4 3 4-3M3 12l4-3 4 3",
-  class: "fix"
+  fill: "#B2B9C5",
+  d: "M6.2 4.5H38c1.1 0 2-.9 2-2s-.9-2-2-2H6c-3.3 0-6 2.7-6 6 0 1.7.7 3.2 1.8 4.2 1 1.1 2.5 1.8 4.2 1.8h32c1.1 0 2-.9 2-2s-.9-2-2-2H6c-1.2 0-2.2-1.1-2-2.3.2-1 1.1-1.7 2.2-1.7M6.1 32.5H38c1.1 0 2-.9 2-2s-.9-2-2-2H6c-3.3 0-6 2.7-6 6 0 1.7.7 3.2 1.8 4.2 1 1.1 2.5 1.8 4.2 1.8h32c1.1 0 2-.9 2-2s-.9-2-2-2H6c-1.2 0-2.2-1.1-2-2.3.2-1 1.1-1.7 2.1-1.7M33.9 22.5H2c-1.1 0-2 .9-2 2s.9 2 2 2h32c3.3 0 6-2.7 6-6 0-1.7-.7-3.2-1.8-4.2-1-1.1-2.5-1.8-4.2-1.8H2c-1.1 0-2 .9-2 2s.9 2 2 2h32c1.2 0 2.2 1.1 2 2.3-.2 1-1.1 1.7-2.1 1.7"
 }, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#FF5656",
+  d: "m17.1 19.5-4-3-4 3v-15h8z"
+}, null, -1);
+const _hoisted_4 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#F58F46",
+  d: "m30.9 33.5-4-3-4 3v-15h8z"
+}, 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 collapse_all = { render };
+const component_library = { render };
 export {
-  collapse_all as default,
+  component_library as default,
   render
 };

package/dist/main.es99.js

@@ -1,23 +1,20 @@
 import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+import { openBlock, createElementBlock, createStaticVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
+  width: "81",
+  height: "80",
   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"
-}, null, -1);
-const _hoisted_3 = [
+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
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_12);
 }
-const collapse_all_corners = { render };
+const consumption_tariffs = { render };
 export {
-  collapse_all_corners as default,
+  consumption_tariffs as default,
   render
 };

package/package.json

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

package/src/assets/theme.js

@@ -654,7 +654,7 @@ const theme = (() => {
           cancel: {
             // variant
             default: {
-              backgroundColor: 'transparent',
+              backgroundColor: semanticColors.teal[200],
               textColor: semanticColors.red[400],
               borderColor: semanticColors.teal[500],
             },

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"
@@ -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',

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,

package/src/components/modals/modal/index.vue

@@ -15,7 +15,7 @@
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
-      <Spinner v-if="isLoading" :limited-to-modal="true" size="large" />
+      <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
       <ContentContainer v-if="!isLoading">
         <slot></slot>
       </ContentContainer>
@@ -173,10 +173,6 @@
         type: Boolean,
         default: true,
       },
-      closeOnEscape: {
-        type: Boolean,
-        default: true,
-      },
     },
     setup() {
       const modalRef = ref(null)
@@ -209,7 +205,7 @@
         this.$emit('on-close')
       },
       handleKeyDown({ key }) {
-        if (this.closeOnEscape && key === 'Escape') {
+        if (key === 'Escape') {
           this.onCloseModal()
         }
       },

package/src/components/styledText/index.js

@@ -0,0 +1,76 @@
+import styled from 'vue3-styled-components'
+
+const TEXT_VARIANTS = {
+  HEADING_MEDIUM: 'heading-medium',
+  HEADING_LARGE: 'heading-large',
+  BODY_SMALL: 'body-small',
+  BODY_MEDIUM: 'body-medium',
+  BODY_LARGE: 'body-large',
+  SUBHEADING_SMALL: 'subheading-small',
+  SUBHEADING_MEDIUM: 'subheading-medium',
+  SUBHEADING_LARGE: 'subheading-large',
+}
+
+const textVariants = {
+  [TEXT_VARIANTS.HEADING_MEDIUM]: {
+    fontSize: '20px',
+    fontWeight: '500',
+    lineHeight: '130%',
+    letterSpacing: '-0.3px',
+  },
+  [TEXT_VARIANTS.HEADING_LARGE]: {
+    fontSize: '24px',
+    fontWeight: '500',
+    lineHeight: '130%',
+    letterSpacing: '-0.36px',
+  },
+  [TEXT_VARIANTS.SUBHEADING_SMALL]: {
+    fontSize: '12px',
+    fontWeight: '500',
+    lineHeight: '140%',
+    letterSpacing: '-0.12px',
+  },
+  [TEXT_VARIANTS.SUBHEADING_MEDIUM]: {
+    fontSize: '14px',
+    fontWeight: '500',
+    lineHeight: '140%',
+    letterSpacing: '-0.14px',
+  },
+  [TEXT_VARIANTS.SUBHEADING_LARGE]: {
+    fontSize: '16px',
+    fontWeight: '500',
+    lineHeight: '140%',
+    letterSpacing: '-0.16px',
+  },
+  [TEXT_VARIANTS.BODY_SMALL]: {
+    fontSize: '12px',
+    fontWeight: '400',
+    lineHeight: '150%',
+  },
+  [TEXT_VARIANTS.BODY_MEDIUM]: {
+    fontSize: '14px',
+    fontWeight: '400',
+    lineHeight: '150%',
+  },
+  [TEXT_VARIANTS.BODY_LARGE]: {
+    fontSize: '16px',
+    fontWeight: '400',
+    lineHeight: '150%',
+  },
+}
+
+const StyledText = styled('div', {
+  fontColor: String,
+  type: String,
+})`
+  color: ${(props) => props.fontColor};
+  font-style: normal;
+
+  font-size: ${(props) => textVariants[props.type]?.fontSize ?? '14px'};
+  font-weight: ${(props) => textVariants[props.type]?.fontWeight ?? '400'};
+  line-height: ${(props) => textVariants[props.type]?.lineHeight ?? '150%'};
+  letter-spacing: ${(props) =>
+    textVariants[props.type]?.letterSpacing ?? 'normal'};
+`
+
+export default StyledText

package/src/components/threeDots/index.vue

@@ -45,15 +45,10 @@
             {{ child.name }}
           </OptionChild>
         </ChildrenContainer>
-        <OptionsContainer
-          v-if="!isLoading"
-          :color-theme="colorTheme"
-          :text-wrap="textWrap"
-        >
+        <OptionsContainer v-if="!isLoading" :text-wrap="textWrap">
           <OptionItem
             v-for="(item, index) in options"
             :key="item.value"
-            :color-theme="colorTheme"
             :data-id="item.dataId"
             :is-disabled="item.disabled"
             tabindex="0"
@@ -159,9 +154,7 @@
     }
   `
 
-  const ButtonContainer = styled('div', {
-    iconColor: String,
-  })`
+  const ButtonContainer = styled('div', { iconColor: String })`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -203,19 +196,14 @@
     background: #fff;
   `
 
-  const OptionsContainerAttrs = { textWrap: Boolean, colorTheme: String }
+  const OptionsContainerAttrs = { textWrap: Boolean }
   const OptionsContainer = styled('div', OptionsContainerAttrs)`
-    border: 1px solid
-      ${(props) =>
-        props.colorTheme == 'dark'
-          ? props.theme.semanticColors.teal[500]
-          : props.theme.colors.grey3};
+    border: 1px solid ${(props) => props.theme.colors.grey3};
     display: grid;
     grid-template-columns: 1fr;
     ${(props) => (props.textWrap ? 'width: 220px' : 'width: max-content')};
     border-radius: 4px;
-    background-color: ${({ colorTheme }) =>
-      colorTheme == 'dark' ? theme.colors.black : '#fff'};
+    background-color: #fff;
     max-height: 220px;
     overflow: auto;
     height: max-content;
@@ -223,7 +211,7 @@
       props.textWrap ? 'white-space: normal' : 'white-space: nowrap'};
   `
 
-  const optionAttrs = { isDisabled: Boolean, colorTheme: String }
+  const optionAttrs = { isDisabled: Boolean }
   const OptionItem = styled('div', optionAttrs)`
     padding: 12px;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -231,19 +219,13 @@
     position: relative;
     ${(props) =>
       props.isDisabled
-        ? `background-color:  ${(colorTheme) =>
-            colorTheme == 'dark'
-              ? theme.semanticColors.teal[700]
-              : props.theme.colors.grey5}!important`
+        ? `background-color: ${props.theme.colors.grey5}!important`
         : ''};
     ${(props) =>
       props.isDisabled ? `color: ${props.theme.colors.grey2}` : ''};
 
     &:hover {
-      background-color: ${(props) =>
-        props.colorTheme == 'dark'
-          ? theme.semanticColors.teal[700]
-          : '#ebeef4'};
+      background-color: #ebeef4;
     }
 
     &:focus-visible {
@@ -251,17 +233,14 @@
       background-color: #ebeef4;
     }
   `
-  const OptionChild = styled('div', { colorTheme: String })`
+  const OptionChild = styled.div`
     padding: 12px;
     cursor: pointer;
     font-size: 13px;
     position: relative;
 
     &:hover {
-      background-color: ${(props) =>
-        props.colorTheme == 'dark'
-          ? theme.semanticColors.teal[600]
-          : '#ebeef4'};
+      background-color: #ebeef4;
     }
 
     &:focus-visible {
@@ -321,25 +300,14 @@
     props: {
       options: {
         required: true,
-        type: Array,
       },
       isLoading: {
         required: false,
         default: false,
-        type: Boolean,
       },
       textWrap: {
         required: false,
         default: true,
-        type: Boolean,
-      },
-      colorTheme: {
-        type: String,
-        default: 'light',
-      },
-      dropdownPosition: {
-        type: String,
-        default: 'horizontal',
       },
       iconColor: {
         type: String,
@@ -391,42 +359,20 @@
 
         const positionArray = this.determineElementQuarter(button, rectButton)
         contextMenu.style.transform = ''
-        if (this.dropdownPosition == 'vertical') {
-          // Position horizontally (left/right/center)
-          if (positionArray.includes('left')) {
-            contextMenu.style.left =
-              rectButton.left - rectRelativeParent.left + 'px'
-          } else {
-            contextMenu.style.left =
-              rectButton.right - rectRelativeParent.left + 'px'
-            contextMenu.style.transform = 'translateX(-100%)'
-          }
-          // Position vertically (above/below)
-          if (positionArray.includes('top')) {
-            contextMenu.style.top =
-              rectButton.bottom - rectRelativeParent.top + 5 + 'px'
-          } else {
-            contextMenu.style.top =
-              rectButton.top - rectRelativeParent.top - 5 + 'px'
-            contextMenu.style.transform += ' translateY(-100%)'
-          }
+        if (positionArray.includes('left')) {
+          contextMenu.style.left =
+            rectButton.right - rectRelativeParent.left + 5 + 'px'
         } else {
-          if (positionArray.includes('left')) {
-            contextMenu.style.left =
-              rectButton.right - rectRelativeParent.left + 5 + 'px'
-          } else {
-            contextMenu.style.left =
-              rectButton.left - rectRelativeParent.left - 5 + 'px'
-            contextMenu.style.transform = 'translateX(-100%)'
-          }
-          if (positionArray.includes('top')) {
-            contextMenu.style.top =
-              rectButton.top - rectRelativeParent.top + 'px'
-          } else {
-            contextMenu.style.top =
-              rectButton.bottom - rectRelativeParent.top + 'px'
-            contextMenu.style.transform += ' translateY(-100%)'
-          }
+          contextMenu.style.left =
+            rectButton.left - rectRelativeParent.left - 5 + 'px'
+          contextMenu.style.transform = 'translateX(-100%)'
+        }
+        if (positionArray.includes('top')) {
+          contextMenu.style.top = rectButton.top - rectRelativeParent.top + 'px'
+        } else {
+          contextMenu.style.top =
+            rectButton.bottom - rectRelativeParent.top + 'px'
+          contextMenu.style.transform += ' translateY(-100%)'
         }
       },
       findRelativeParent(element) {

package/dist/main.es747.js

@@ -1,4 +0,0 @@
-const __vite_glob_0_345 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMiIgd2lkdGg9IjEuNSIgaGVpZ2h0PSIxMSIgZmlsbD0iIzI2MzIzOCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMgMlYzLjVMMCAzLjVWMkgzWk0xMiAyVjMuNVY5SDEwLjVMMTAuNSAzLjVMNSAzLjVWMkgxMC41SDEyWk0xMC41IDE0SDEyVjExLjVIMTRWMTBMMiAxMEwyIDExLjVMMTAuNSAxMS41VjE0WiIgZmlsbD0iIzI2MzIzOCIvPgo8L3N2Zz4K";
-export {
-  __vite_glob_0_345 as default
-};

package/dist/main.es748.js

@@ -1,4 +0,0 @@
-const __vite_glob_0_346 = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjEyIiB2aWV3Ym94PSIxMiAxNCAxNiAxMiIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMjUuMDkwOSAxNy40NTQ2SDIzLjE4MThWMTQuOTA5MkgxNC4yNzI3QzEzLjU3MjcgMTQuOTA5MiAxMyAxNS40ODE5IDEzIDE2LjE4MTlWMjMuMTgxOUgxNC4yNzI3QzE0LjI3MjcgMjQuMjM4MyAxNS4xMjU1IDI1LjA5MSAxNi4xODE4IDI1LjA5MUMxNy4yMzgyIDI1LjA5MSAxOC4wOTA5IDI0LjIzODMgMTguMDkwOSAyMy4xODE5SDIxLjkwOTFDMjEuOTA5MSAyNC4yMzgzIDIyLjc2MTggMjUuMDkxIDIzLjgxODIgMjUuMDkxQzI0Ljg3NDUgMjUuMDkxIDI1LjcyNzMgMjQuMjM4MyAyNS43MjczIDIzLjE4MTlIMjdWMjAuMDAwMUwyNS4wOTA5IDE3LjQ1NDZaTTE2LjE4MTggMjQuMTM2NUMxNS42NTM2IDI0LjEzNjUgMTUuMjI3MyAyMy43MTAxIDE1LjIyNzMgMjMuMTgxOUMxNS4yMjczIDIyLjY1MzcgMTUuNjUzNiAyMi4yMjc0IDE2LjE4MTggMjIuMjI3NEMxNi43MSAyMi4yMjc0IDE3LjEzNjQgMjIuNjUzNyAxNy4xMzY0IDIzLjE4MTlDMTcuMTM2NCAyMy43MTAxIDE2LjcxIDI0LjEzNjUgMTYuMTgxOCAyNC4xMzY1Wk0yNC43NzI3IDE4LjQwOTJMMjYuMDIgMjAuMDAwMUgyMy4xODE4VjE4LjQwOTJIMjQuNzcyN1pNMjMuODE4MiAyNC4xMzY1QzIzLjI5IDI0LjEzNjUgMjIuODYzNiAyMy43MTAxIDIyLjg2MzYgMjMuMTgxOUMyMi44NjM2IDIyLjY1MzcgMjMuMjkgMjIuMjI3NCAyMy44MTgyIDIyLjIyNzRDMjQuMzQ2NCAyMi4yMjc0IDI0Ljc3MjcgMjIuNjUzNyAyNC43NzI3IDIzLjE4MTlDMjQuNzcyNyAyMy43MTAxIDI0LjM0NjQgMjQuMTM2NSAyMy44MTgyIDI0LjEzNjVaIiBmaWxsPSIjMjYzMjM4Ij48L3BhdGg+Cjwvc3ZnPgo=";
-export {
-  __vite_glob_0_346 as default
-};

package/dist/main.es749.js

@@ -1,4 +0,0 @@
-const __vite_glob_0_347 = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjExIiB2aWV3Ym94PSIxNiAxNCA5IDExIiB3aWR0aD0iOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyLjAwMzEgMjAuNjE0M0MyMS40NzE4IDIxLjE0NTcgMjAuNzUxMSAyMS40NDQyIDE5Ljk5OTcgMjEuNDQ0MkMxOS4yNDgyIDIxLjQ0NDIgMTguNTI3NSAyMS4xNDU3IDE3Ljk5NjIgMjAuNjE0M0MxNy40NjQ4IDIwLjA4MjkgMTcuMTY2MyAxOS4zNjIzIDE3LjE2NjMgMTguNjEwOFYxNS41SDE3LjU1NTVWMTguNjA2QzE3LjU0OTUgMTguOTI5NCAxNy42MDc4IDE5LjI1MDggMTcuNzI2OSAxOS41NTE2QzE3Ljg0NjggMTkuODU0IDE4LjAyNTcgMjAuMTI5NiAxOC4yNTM0IDIwLjM2MkMxOC40ODExIDIwLjU5NDQgMTguNzUyOCAyMC43NzkgMTkuMDUyNyAyMC45MDUxQzE5LjM1MjcgMjEuMDMxMiAxOS42NzQ3IDIxLjA5NjEgMjAuMDAwMSAyMS4wOTYxQzIwLjMyNTQgMjEuMDk2MSAyMC42NDc1IDIxLjAzMTIgMjAuOTQ3NCAyMC45MDUxQzIxLjI0NzMgMjAuNzc5IDIxLjUxOTEgMjAuNTk0NCAyMS43NDY4IDIwLjM2MkMyMS45NzQ0IDIwLjEyOTYgMjIuMTUzNCAxOS44NTQgMjIuMjczMiAxOS41NTE2QzIyLjM5MjQgMTkuMjUwOCAyMi40NTA2IDE4LjkyOTQgMjIuNDQ0NyAxOC42MDZWMTUuNUgyMi44MzNWMTguNjEwOEMyMi44MzMgMTkuMzYyMyAyMi41MzQ1IDIwLjA4MjkgMjIuMDAzMSAyMC42MTQzWk0xNi42MTEzIDI0LjA2NzVIMjMuMzg4OFYyNC41SDE2LjYxMTNWMjQuMDY3NVoiIHN0cm9rZT0iIzUwNUNBNiI+PC9wYXRoPgo8L3N2Zz4K";
-export {
-  __vite_glob_0_347 as default
-};

package/dist/main.es750.js

@@ -1,4 +0,0 @@
-const __vite_glob_0_348 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxNCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNDgwOTYgMkgzLjQ4MDk2VjRIOS40ODA5NlYyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTkuNDgwOTYgOEg1LjQ4MDk2VjEwSDkuNDgwOTZWOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zLjQ4MDk2IDUuOTIzMjFMMC41MTkzNDkgMi45NjE2MUwzLjQ4MDk2IDBMMy40ODA5NiA1LjkyMzIxWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTYuMDE2MDkgOEM2LjcwNzcxIDkuMTk1NiA4LjAwMDM5IDEwIDkuNDgwOTYgMTBDMTEuNjkwMSAxMCAxMy40ODEgOC4yMDkxNCAxMy40ODEgNkMxMy40ODEgMy43OTA4NiAxMS42OTAxIDIgOS40ODA5NiAyQzguMDAwMzkgMiA2LjcwNzcgMi44MDQ0IDYuMDE2MDkgNEg5LjQ4MDk2QzEwLjU4NTUgNCAxMS40ODEgNC44OTU0MyAxMS40ODEgNkMxMS40ODEgNy4xMDQ1NyAxMC41ODU1IDggOS40ODA5NiA4SDYuMDE2MDlaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K";
-export {
-  __vite_glob_0_348 as default
-};

package/dist/main.es751.js

@@ -1,4 +0,0 @@
-const __vite_glob_0_349 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuOTk4NjYgMTMuOTk5OUM4LjI3NDggMTMuOTk5OSA4LjQ5ODY2IDEzLjc3NjEgOC40OTg2NiAxMy40OTk5VjMuNzA1OTlMMTEuMTQ2MSA2LjM1MzQ1TDExLjIyNDIgNi40MTc5MUMxMS40MTgzIDYuNTQ2MDMgMTEuNjgyMyA2LjUyNDE0IDExLjg1MzIgNi4zNTM0NUMxMi4wMjQgNi4xODI1OSAxMi4wNDU4IDUuOTE4NjEgMTEuOTE3NiA1LjcyNDU1TDExLjg1MzIgNS42NDY0Mkw4LjM1MjE3IDIuMTQ2NDJDOC4yNTg0MyAyLjA1Mjg5IDguMTMxMSAxLjk5OTkzIDcuOTk4NjYgMS45OTk5NEM3Ljg5OTM4IDIuMDAwMDkgNy44MDI2OSAyLjAyOTYgNy43MjEzMSAyLjA4MzkyTDcuNjQ1MTQgMi4xNDY0Mkw0LjE0NjEyIDUuNjQ2NDJDMy45NTExNCA1Ljg0MTY0IDMuOTUxMTIgNi4xNTgyNSA0LjE0NjEyIDYuMzUzNDVDNC4zNDEzMiA2LjU0ODYzIDQuNjU3ODkgNi41NDg1MSA0Ljg1MzE1IDYuMzUzNDVMNy40OTg2NiAzLjcwNjk3VjEzLjQ5OTlDNy40OTg2NiAxMy43NzU4IDcuNzIyODcgMTMuOTk5NSA3Ljk5ODY2IDEzLjk5OTlaIiBmaWxsPSIjMjYzMjM4Ii8+Cjwvc3ZnPgo=";
-export {
-  __vite_glob_0_349 as default
-};

package/dist/main.es752.js

@@ -1,4 +0,0 @@
-const __vite_glob_0_350 = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Ym94PSIxMiAxMiAxNiAxNiIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMjYuNjUgMTQuNzI2N0wyNS41Njg5IDEzLjQyQzI1LjM1MTEgMTMuMTYzMyAyNS4wMzIyIDEzIDI0LjY2NjcgMTNIMTUuMzMzM0MxNC45Njc4IDEzIDE0LjY0ODkgMTMuMTYzMyAxNC40Mzg5IDEzLjQyNzhMMTMuMzU3OCAxNC43MjY3QzEzLjEzMjIgMTQuOTk4OSAxMyAxNS4zNDExIDEzIDE1LjcyMjJWMjUuNDQ0NEMxMyAyNi4zIDEzLjY5MjIgMjcgMTQuNTU1NiAyN0gyNS40NDQ0QzI2LjMgMjcgMjcgMjYuMyAyNyAyNS40NDQ0VjE1LjcyMjJDMjcgMTUuMzQxMSAyNi44Njc4IDE0Ljk5ODkgMjYuNjUgMTQuNzI2N1pNMjAgMTguMDU1NkwyNC4yNzc4IDIyLjMzMzNIMjEuNTU1NlYyMy44ODg5SDE4LjQ0NDRWMjIuMzMzM0gxNS43MjIyTDIwIDE4LjA1NTZaTTE0LjY0ODkgMTQuNTU1NkwxNS4yODY3IDEzLjc3NzhIMjQuNjJMMjUuMzQzMyAxNC41NTU2SDE0LjY0ODlaIiBmaWxsPSIjMjYzMjM4Ij48L3BhdGg+Cjwvc3ZnPgo=";
-export {
-  __vite_glob_0_350 as default
-};