bge-ui 1.0.21 → 1.0.23

package/src/icons/MonoArrowUp.vue

@@ -9,11 +9,18 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M6 15L18 15L12 8L6 15Z" fill="currentColor" />
+    <path
+      d="M7.08711 15L16.9129 15C17.3401 15 17.5705 14.4989 17.2925 14.1746L12.3796 8.4429C12.1801 8.21009 11.8199 8.21009 11.6204 8.4429L6.70748 14.1746C6.42948 14.4989 6.65993 15 7.08711 15Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -29,39 +36,11 @@ defineOptions({
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoBankCard.vue

@@ -9,17 +9,29 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M18 13.25H13V15.25H18V13.25Z" fill="currentColor" />
+    <path
+      d="M18 14.25C18 13.6977 17.5523 13.25 17 13.25H14C13.4477 13.25 13 13.6977 13 14.25C13 14.8023 13.4477 15.25 14 15.25H17C17.5523 15.25 18 14.8023 18 14.25Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M2 4V20H22V4H2ZM20 6H4V8.5H20V6ZM4 18V10.5H20V18H4Z"
+      d="M4 4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4H4ZM20 6H4V8.5H20V6ZM4 18V10.5H20V18H4Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -35,39 +47,11 @@ defineOptions({
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoBook15.vue

@@ -0,0 +1,48 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.5 3.75C6.61005 3.75 5.62413 4.03638 4.81608 4.33931C3.99211 4.64821 3.27743 5.00381 2.90819 5.19738C2.49277 5.41516 2.25 5.84262 2.25 6.29139V18.7816C2.25 19.6573 3.11205 20.239 3.90965 19.9824C4.83191 19.6857 6.3931 19.25 7.5 19.25C8.16786 19.25 9.02024 19.4109 9.81649 19.6139C10.6006 19.8139 11.2782 20.0409 11.5789 20.146C11.8519 20.2415 12.1481 20.2415 12.4211 20.146C12.7218 20.0409 13.3994 19.8139 14.1835 19.6139C14.9798 19.4109 15.8321 19.25 16.5 19.25C17.6069 19.25 19.1681 19.6857 20.0903 19.9824C20.888 20.239 21.75 19.6573 21.75 18.7816V6.29139C21.75 5.84262 21.5072 5.41516 21.0918 5.19738C20.7226 5.00381 20.0079 4.64821 19.1839 4.33931C18.3759 4.03638 17.39 3.75 16.5 3.75C15.6069 3.75 14.6171 4.03841 13.807 4.34271C13.0507 4.62685 12.3872 4.9498 12 5.14963C11.6128 4.9498 10.9493 4.62685 10.193 4.34271C9.38294 4.03841 8.39306 3.75 7.5 3.75ZM3.75 18.4601V6.45073C4.11283 6.2656 4.69354 5.9872 5.34264 5.74385C6.10303 5.45879 6.88478 5.25 7.5 5.25C8.11759 5.25 8.90278 5.46038 9.66545 5.74689C10.3114 5.98954 10.8888 6.26642 11.25 6.45073V18.4602C10.9396 18.3647 10.5761 18.2596 10.1871 18.1604C9.3581 17.949 8.35944 17.75 7.5 17.75C6.26801 17.75 4.7149 18.1631 3.75 18.4601ZM12.75 18.4602C13.0604 18.3647 13.4239 18.2596 13.8129 18.1604C14.6419 17.949 15.6406 17.75 16.5 17.75C17.732 17.75 19.2851 18.1631 20.25 18.4601V6.45073C19.8872 6.2656 19.3065 5.9872 18.6574 5.74385C17.897 5.45879 17.1152 5.25 16.5 5.25C15.8824 5.25 15.0972 5.46038 14.3345 5.74689C13.6886 5.98954 13.1112 6.26642 12.75 6.45073V18.4602Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoBook15',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoCalendar.vue

@@ -12,13 +12,17 @@
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M7 3H9V5H15V3H17V5H21V21H3V5H7V3ZM5 7H19V10.5H5V7ZM5 12.5V19H19V12.5H5Z"
+      d="M7 3C7 2.44772 7.44772 2 8 2C8.55228 2 9 2.44772 9 3V5H15V3C15 2.44772 15.4477 2 16 2C16.5523 2 17 2.44772 17 3V5H19C20.1046 5 21 5.89543 21 7V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V7C3 5.89543 3.89543 5 5 5H7V3ZM5 7H19V10.5H5V7ZM5 12.5V19H19V12.5H5Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -34,39 +38,11 @@ defineOptions({
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoChart.vue

@@ -0,0 +1,57 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 14.4142C12.3905 14.8047 13.0237 14.8047 13.4142 14.4142L16.7071 11.1213C17.0976 10.7308 17.0976 10.0976 16.7071 9.70711C16.3166 9.31658 15.6834 9.31658 15.2929 9.70711L12.7071 12.2929L10.9142 10.5C10.5237 10.1095 9.89052 10.1095 9.5 10.5L7.20711 12.7929C6.81658 13.1834 6.81658 13.8166 7.20711 14.2071C7.59763 14.5976 8.2308 14.5976 8.62132 14.2071L10.2071 12.6213L12 14.4142Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5 21C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5ZM5 5H19V19H5V5Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoChart',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoChart15.vue

@@ -0,0 +1,48 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM11.25 3.78363C7.04513 4.16255 3.75 7.69647 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.1314 20.25 19.5535 17.2132 20.1559 13.25H12.5C11.8096 13.25 11.25 12.6904 11.25 12V3.78363ZM20.2463 11.75C20.1216 7.56031 16.8732 4.15519 12.75 3.78363V11.75H20.2463Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoChart15',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoChevronDown.vue

@@ -0,0 +1,48 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.20975 8.72642C5.60695 8.32614 6.25421 8.32614 6.65141 8.72642L12 14.1166L17.3486 8.72642C17.7458 8.32614 18.3931 8.32614 18.7903 8.72642C19.1831 9.12234 19.1831 9.76103 18.7903 10.157L12.7098 16.2846C12.3187 16.6788 11.6813 16.6788 11.2902 16.2846L5.20975 10.157C4.81688 9.76103 4.81688 9.12235 5.20975 8.72642Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoChevronDown',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoChevronLeft.vue

@@ -12,13 +12,17 @@
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M16 5.93058L9.88339 12L16 18.0694L14.5583 19.5L7 12L14.5583 4.5L16 5.93058Z"
+      d="M15.2736 5.20975C15.6739 5.60695 15.6739 6.25421 15.2736 6.65141L9.8834 12L15.2736 17.3486C15.6739 17.7458 15.6739 18.3931 15.2736 18.7903C14.8776 19.1831 14.239 19.1831 13.843 18.7903L7.71536 12.7098C7.32118 12.3187 7.32118 11.6813 7.71536 11.2902L13.843 5.20975C14.239 4.81688 14.8776 4.81688 15.2736 5.20975Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -34,39 +38,11 @@ defineOptions({
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoChevronRight.vue

@@ -12,13 +12,17 @@
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M8 18.0694L14.1166 12L8 5.93058L9.4417 4.5L17 12L9.4417 19.5L8 18.0694Z"
+      d="M8.72644 18.7903C8.32615 18.3931 8.32615 17.7458 8.72644 17.3486L14.1166 12L8.72644 6.65141C8.32615 6.25421 8.32615 5.60695 8.72644 5.20975C9.12236 4.81688 9.76105 4.81688 10.157 5.20975L16.2846 11.2902C16.6788 11.6813 16.6788 12.3187 16.2846 12.7098L10.157 18.7903C9.76105 19.1831 9.12236 19.1831 8.72644 18.7903Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -34,39 +38,11 @@ defineOptions({
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoChevronRightDouble.vue

@@ -12,19 +12,28 @@
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M12.5 4.5L20 12L12.5 19.5L11.0694 18.0694L17.1388 12L11.0694 5.93058L12.5 4.5Z"
+      d="M11.7847 5.21529C12.1798 4.82025 12.8202 4.82025 13.2153 5.21529L19.2929 11.2929C19.6834 11.6834 19.6834 12.3166 19.2929 12.7071L13.2153 18.7847C12.8202 19.1798 12.1798 19.1798 11.7847 18.7847C11.3897 18.3897 11.3897 17.7492 11.7847 17.3541L17.1388 12L11.7847 6.64587C11.3897 6.25082 11.3897 5.61033 11.7847 5.21529Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M6.43058 4.5L13.9306 12L6.43058 19.5L5 18.0694L11.0694 12L5 5.93058L6.43058 4.5Z"
+      d="M5.71529 5.21529C6.11033 4.82025 6.75082 4.82025 7.14587 5.21529L13.2235 11.2929C13.614 11.6834 13.614 12.3166 13.2235 12.7071L7.14586 18.7847C6.75082 19.1798 6.11033 19.1798 5.71529 18.7847C5.32025 18.3897 5.32025 17.7492 5.71529 17.3541L11.0694 12L5.71529 6.64587C5.32025 6.25082 5.32025 5.61033 5.71529 5.21529Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -40,39 +49,11 @@ defineOptions({
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoChevronUp.vue

@@ -0,0 +1,48 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18.7903 15.2736C18.3931 15.6739 17.7458 15.6739 17.3486 15.2736L12 9.88341L6.65141 15.2736C6.25421 15.6739 5.60695 15.6739 5.20975 15.2736C4.81688 14.8777 4.81688 14.239 5.20975 13.8431L11.2902 7.71538C11.6813 7.32119 12.3187 7.32119 12.7098 7.71537L18.7903 13.8431C19.1831 14.239 19.1831 14.8777 18.7903 15.2736Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoChevronUp',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>