bge-ui 1.2.7 → 1.2.9

package/dist/index.js

@@ -22,7 +22,11 @@ const _sfc_main$1Y = /* @__PURE__ */ defineComponent({
         "primary",
         "secondary",
         "white",
-        "violet"
+        "black",
+        "violet",
+        "opacity",
+        "red",
+        "green"
       ],
       type: String
     },
@@ -1202,7 +1206,7 @@ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$1q = /* @__PURE__ */ createStaticVNode('<path d="M5 9.5C5 8.94772 4.55228 8.5 4 8.5C3.44772 8.5 3 8.94772 3 9.5C3 10.0523 3.44772 10.5 4 10.5C4.55228 10.5 5 10.0523 5 9.5Z" fill="currentColor"></path><path d="M19 9.5C19 8.94772 19.4477 8.5 20 8.5C20.5523 8.5 21 8.94772 21 9.5C21 10.0523 20.5523 10.5 20 10.5C19.4477 10.5 19 10.0523 19 9.5Z" fill="currentColor"></path><path d="M5 15C5 14.4477 4.55228 14 4 14C3.44772 14 3 14.4477 3 15C3 15.5523 3.44772 16 4 16C4.55228 16 5 15.5523 5 15Z" fill="currentColor"></path><path d="M19 15C19 14.4477 19.4477 14 20 14C20.5523 14 21 14.4477 21 15C21 15.5523 20.5523 16 20 16C19.4477 16 19 15.5523 19 15Z" fill="currentColor"></path><path d="M21 20C21 19.4477 20.5523 19 20 19H4C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20Z" fill="currentColor"></path><path d="M5 4C5 3.44772 4.55228 3 4 3C3.44772 3 3 3.44772 3 4C3 4.55228 3.44772 5 4 5C4.55228 5 5 4.55228 5 4Z" fill="currentColor"></path><path d="M19 4C19 3.44772 19.4477 3 20 3C20.5523 3 21 3.44772 21 4C21 4.55228 20.5523 5 20 5C19.4477 5 19 4.55228 19 4Z" fill="currentColor"></path><path d="M10.5 4C10.5 3.44772 10.0523 3 9.5 3C8.94772 3 8.5 3.44772 8.5 4C8.5 4.55228 8.94772 5 9.5 5C10.0523 5 10.5 4.55228 10.5 4Z" fill="currentColor"></path><path d="M15.5 4C15.5 3.44772 15.0523 3 14.5 3C13.9477 3 13.5 3.44772 13.5 4C13.5 4.55228 13.9477 5 14.5 5C15.0523 5 15.5 4.55228 15.5 4Z" fill="currentColor"></path>', 9);
-const _hoisted_10$1 = [
+const _hoisted_10$2 = [
   _hoisted_1$1q
 ];
 const _sfc_main$1u = /* @__PURE__ */ defineComponent({
@@ -1229,7 +1233,7 @@ const _sfc_main$1u = /* @__PURE__ */ defineComponent({
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
-      }, _hoisted_10$1, 4);
+      }, _hoisted_10$2, 4);
     };
   }
 });
@@ -2751,7 +2755,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$P = /* @__PURE__ */ createStaticVNode('<path d="M11 2C11 1.44772 11.4477 1 12 1C12.5523 1 13 1.44772 13 2V4C13 4.55228 12.5523 5 12 5C11.4477 5 11 4.55228 11 4V2Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 15.3137 15.3137 18 12 18C8.6863 18 6 15.3137 6 12C6 8.6863 8.6863 6 12 6C15.3137 6 18 8.6863 18 12ZM12 8C9.79087 8 8 9.79087 8 12C8 14.2091 9.79087 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79087 14.2091 8 12 8Z" fill="currentColor"></path><path d="M12 23C12.5523 23 13 22.5523 13 22V20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20V22C11 22.5523 11.4477 23 12 23Z" fill="currentColor"></path><path d="M18.364 4.22183C18.7545 3.8313 19.3877 3.8313 19.7782 4.22183C20.1687 4.61235 20.1687 5.24551 19.7782 5.63604L18.364 7.05025C17.9734 7.44078 17.3403 7.44078 16.9497 7.05025C16.5592 6.65973 16.5592 6.02656 16.9497 5.63604L18.364 4.22183Z" fill="currentColor"></path><path d="M7.05025 18.364C7.44078 17.9734 7.44078 17.3403 7.05025 16.9497C6.65973 16.5592 6.02657 16.5592 5.63604 16.9497L4.22183 18.364C3.8313 18.7545 3.8313 19.3877 4.22183 19.7782C4.61235 20.1687 5.24552 20.1687 5.63604 19.7782L7.05025 18.364Z" fill="currentColor"></path><path d="M22 11C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H20C19.4477 13 19 12.5523 19 12C19 11.4477 19.4477 11 20 11H22Z" fill="currentColor"></path><path d="M3.99999 13C4.55228 13 4.99999 12.5523 4.99999 12C4.99999 11.4477 4.55228 11 3.99999 11H1.99999C1.44771 11 0.999992 11.4477 0.999992 12C0.999992 12.5523 1.44771 13 1.99999 13H3.99999Z" fill="currentColor"></path><path d="M19.7782 18.364C20.1687 18.7545 20.1687 19.3877 19.7782 19.7782C19.3876 20.1687 18.7545 20.1687 18.364 19.7782L16.9497 18.364C16.5592 17.9734 16.5592 17.3403 16.9497 16.9498C17.3403 16.5592 17.9734 16.5592 18.364 16.9498L19.7782 18.364Z" fill="currentColor"></path><path d="M5.63604 7.05025C6.02657 7.44077 6.65973 7.44077 7.05026 7.05025C7.44078 6.65973 7.44078 6.02656 7.05026 5.63604L5.63604 4.22182C5.24552 3.8313 4.61235 3.8313 4.22183 4.22182C3.8313 4.61235 3.8313 5.24551 4.22183 5.63604L5.63604 7.05025Z" fill="currentColor"></path>', 9);
-const _hoisted_10 = [
+const _hoisted_10$1 = [
   _hoisted_1$P
 ];
 const _sfc_main$T = /* @__PURE__ */ defineComponent({
@@ -2778,7 +2782,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
-      }, _hoisted_10, 4);
+      }, _hoisted_10$1, 4);
     };
   }
 });
@@ -4340,7 +4344,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$a = /* @__PURE__ */ createStaticVNode('<path d="M10.8333 5.00002C10.8333 4.53978 11.2064 4.16669 11.6667 4.16669H15C15.4602 4.16669 15.8333 4.53978 15.8333 5.00002C15.8333 5.46026 15.4602 5.83335 15 5.83335H11.6667C11.2064 5.83335 10.8333 5.46026 10.8333 5.00002Z" fill="currentColor" fill-opacity="0.48"></path><path d="M10.8333 8.33333C10.8333 7.8731 11.2064 7.5 11.6667 7.5H15C15.4602 7.5 15.8333 7.8731 15.8333 8.33333C15.8333 8.79357 15.4602 9.16667 15 9.16667H11.6667C11.2064 9.16667 10.8333 8.79357 10.8333 8.33333Z" fill="currentColor" fill-opacity="0.48"></path><path d="M10.8333 11.6666C10.8333 11.2064 11.2064 10.8333 11.6667 10.8333H15C15.4602 10.8333 15.8333 11.2064 15.8333 11.6666C15.8333 12.1269 15.4602 12.5 15 12.5H11.6667C11.2064 12.5 10.8333 12.1269 10.8333 11.6666Z" fill="currentColor" fill-opacity="0.48"></path><path d="M10.8333 15C10.8333 14.5398 11.2064 14.1667 11.6667 14.1667H15C15.4602 14.1667 15.8333 14.5398 15.8333 15C15.8333 15.4603 15.4602 15.8334 15 15.8334H11.6667C11.2064 15.8334 10.8333 15.4603 10.8333 15Z" fill="currentColor" fill-opacity="0.48"></path><path d="M4.16666 5.00002C4.16666 4.53978 4.61437 4.16669 5.16666 4.16669H8.16666C8.71894 4.16669 9.16666 4.53978 9.16666 5.00002V8.33335C9.16666 8.79359 8.71894 9.16669 8.16666 9.16669H5.16666C4.61437 9.16669 4.16666 8.79359 4.16666 8.33335V5.00002Z" class="bge-fill-bg-green"></path><path d="M4.16666 11.6666C4.16666 11.2064 4.61437 10.8333 5.16666 10.8333H8.16666C8.71894 10.8333 9.16666 11.2064 9.16666 11.6666V15C9.16666 15.4602 8.71894 15.8333 8.16666 15.8333H5.16666C4.61437 15.8333 4.16666 15.4602 4.16666 15V11.6666Z" class="bge-fill-bg-red"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.8333 2.91669H4.16666C3.4763 2.91669 2.91666 3.47633 2.91666 4.16669V15.8334C2.91666 16.5237 3.4763 17.0834 4.16666 17.0834H15.8333C16.5237 17.0834 17.0833 16.5237 17.0833 15.8334V4.16669C17.0833 3.47633 16.5237 2.91669 15.8333 2.91669ZM4.16666 1.66669C2.78594 1.66669 1.66666 2.78597 1.66666 4.16669V15.8334C1.66666 17.2141 2.78594 18.3334 4.16666 18.3334H15.8333C17.214 18.3334 18.3333 17.2141 18.3333 15.8334V4.16669C18.3333 2.78598 17.214 1.66669 15.8333 1.66669H4.16666Z" fill="currentColor" fill-opacity="0.32"></path>', 7);
-const _hoisted_8 = [
+const _hoisted_8$1 = [
   _hoisted_1$a
 ];
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
@@ -4367,7 +4371,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         viewBox: "0 0 20 20",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
-      }, _hoisted_8, 4);
+      }, _hoisted_8$1, 4);
     };
   }
 });
@@ -8749,32 +8753,43 @@ message._context = null;
 const _hoisted_1$3 = { class: "bge-checkbox__input" };
 const _hoisted_2$2 = ["id", "disabled"];
 const _hoisted_3$2 = {
+  key: 0,
   class: "bge-checkbox__inner",
   viewBox: "0 0 16 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_4$2 = {
-  key: 0,
+const _hoisted_4$2 = /* @__PURE__ */ createElementVNode("path", {
   class: "border",
   "fill-rule": "evenodd",
   "clip-rule": "evenodd",
-  d: "M13 3H3V13H13V3ZM2 2V14H14V2H2Z",
-  fill: "#455666"
+  d: "M13 4C13 3.44772 12.5523 3 12 3H4C3.44772 3 3 3.44772 3 4V12C3 12.5523 3.44772 13 4 13H12C12.5523 13 13 12.5523 13 12V4ZM4 2C2.89543 2 2 2.89543 2 4V12C2 13.1046 2.89543 14 4 14H12C13.1046 14 14 13.1046 14 12V4C14 2.89543 13.1046 2 12 2H4Z"
+}, null, -1);
+const _hoisted_5$1 = [
+  _hoisted_4$2
+];
+const _hoisted_6$1 = {
+  key: 1,
+  class: "bge-checkbox__inner",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_5$1 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_7$1 = /* @__PURE__ */ createElementVNode("path", {
   class: "bg",
-  d: "M2 2H14V14H2V2Z",
-  fill: "#FFFF38"
+  d: "M2 4C2 2.89543 2.89543 2 4 2H12C13.1046 2 14 2.89543 14 4V12C14 13.1046 13.1046 14 12 14H4C2.89543 14 2 13.1046 2 12V4Z"
 }, null, -1);
-const _hoisted_6$1 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_8 = /* @__PURE__ */ createElementVNode("path", {
   class: "check",
   "fill-rule": "evenodd",
   "clip-rule": "evenodd",
-  d: "M11.6426 6.0971L7.5381 10.9479L4.36133 8.16819L5.23933 7.16475L7.3959 9.05174L10.6247 5.23584L11.6426 6.0971Z",
-  fill: "#0E1114"
+  d: "M11.1337 5.66647C11.4147 5.9043 11.4498 6.32495 11.212 6.60602L7.83726 10.5943C7.67284 10.7886 7.38111 10.8105 7.18955 10.6429L4.86305 8.60719C4.58595 8.36473 4.55788 7.94356 4.80033 7.66647C5.04279 7.38938 5.46396 7.3613 5.74105 7.60375L7.3959 9.05174L10.1941 5.74476C10.4319 5.46369 10.8526 5.42864 11.1337 5.66647Z"
 }, null, -1);
-const _hoisted_7$1 = ["for"];
+const _hoisted_9 = [
+  _hoisted_7$1,
+  _hoisted_8
+];
+const _hoisted_10 = ["for"];
 const formItemContextKey$2 = "bge-form-item-context";
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...{
@@ -8788,7 +8803,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     },
     size: {
       type: String,
-      default: "large"
+      default: "default"
     },
     modelValue: {
       type: [Array, String, Number, Boolean],
@@ -8871,7 +8886,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
-        class: normalizeClass(["bge-checkbox", { "bge-checkbox_large": __props.size === "large", "bge-checkbox_disabled": __props.disabled }])
+        class: normalizeClass(["bge-checkbox", { "bge-checkbox_large": __props.size === "large", "bge-checkbox_mini": __props.size === "mini", "bge-checkbox_disabled": __props.disabled }])
       }, [
         createElementVNode("span", _hoisted_1$3, [
           withDirectives(createElementVNode("input", {
@@ -8886,19 +8901,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           }, null, 40, _hoisted_2$2), [
             [vModelCheckbox, input.value]
           ]),
-          (openBlock(), createElementBlock("svg", _hoisted_3$2, [
-            !input.value ? (openBlock(), createElementBlock("path", _hoisted_4$2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-              _hoisted_5$1,
-              _hoisted_6$1
-            ], 64))
-          ]))
+          !input.value ? (openBlock(), createElementBlock("svg", _hoisted_3$2, _hoisted_5$1)) : (openBlock(), createElementBlock("svg", _hoisted_6$1, _hoisted_9))
         ]),
         createElementVNode("label", {
           for: id.value,
           class: normalizeClass(["bge-checkbox__label", { checked: input.value }])
         }, [
           renderSlot(_ctx.$slots, "default")
-        ], 10, _hoisted_7$1)
+        ], 10, _hoisted_10)
       ], 2);
     };
   }

package/dist/style.css

@@ -58,6 +58,13 @@
   --btn-pressed: var(--btn-violet-hover);
   --btn-disable: var(--btn-violet-disable);
 }
+.bge-button.bge-button--opacity {
+  --color: var(--persistent-white);
+  --btn: var(---bg-opacity);
+  --btn-hover: var(---bg-opacity-hover);
+  --btn-pressed: var(---bg-opacity-hover);
+  --btn-disable: var(---bg-opacity);
+}
 .bge-button.bge-button--red {
   --color: var(--persistent-white);
   --btn: var(--btn-red);
@@ -90,7 +97,7 @@
   font-size: 12px;
   font-weight: 500;
   line-height: 20px;
-  padding: 4px 16px;
+  padding: 4px 12px;
 }
 .bge-button.bge-button--mini .loading-icon {
   height: 16px;
@@ -111,7 +118,7 @@
   background: var(--btn-disable);
 }
 .bge-button:disabled span {
-  opacity: 0.4;
+  color: var(--tc-quaternary);
 }
 .bge-button:disabled .loading-icon {
   opacity: 0;
@@ -1273,18 +1280,28 @@ to {
 }.bge-checkbox {
   display: inline-flex;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   margin-right: 8px;
 }
 .bge-checkbox_large .bge-checkbox__label {
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
-  line-height: 24px;
+  line-height: 28px;
 }
 .bge-checkbox_large .bge-checkbox__inner,
 .bge-checkbox_large .bge-checkbox__original {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
+}
+.bge-checkbox_mini .bge-checkbox__label {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+}
+.bge-checkbox_mini .bge-checkbox__inner,
+.bge-checkbox_mini .bge-checkbox__original {
+  width: 16px;
+  height: 16px;
 }
 .bge-checkbox_disabled {
   --tc-secondary: var(--tc-quaternary);
@@ -1306,9 +1323,9 @@ to {
 .bge-checkbox__label {
   display: inline-block;
   padding-left: 8px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
-  line-height: 20px;
+  line-height: 24px;
   color: var(--tc-secondary);
 }
 .bge-checkbox__label.checked {
@@ -1322,8 +1339,8 @@ to {
   position: relative;
 }
 .bge-checkbox__original {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   opacity: 0;
   outline: none;
   z-index: 0;
@@ -1332,10 +1349,10 @@ to {
   display: inline-block;
   position: absolute;
   left: 0;
-  top: 2px;
+  top: 0;
   box-sizing: border-box;
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   background-color: transparent;
   z-index: 1;
   transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), outline 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bge-ui",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",

package/src/button/index.vue

@@ -20,7 +20,11 @@ defineProps({
       'primary',
       'secondary',
       'white',
-      'violet'
+      'black',
+      'violet',
+      'opacity',
+      'red',
+      'green'
     ],
     type: String,
   },
@@ -89,6 +93,14 @@ defineProps({
     --btn-disable: var(--btn-violet-disable);
   }
 
+  &.bge-button--opacity {
+    --color: var(--persistent-white);
+    --btn: var(---bg-opacity);
+    --btn-hover: var(---bg-opacity-hover);
+    --btn-pressed: var(---bg-opacity-hover);
+    --btn-disable: var(---bg-opacity);
+  }
+
   &.bge-button--red {
     --color: var(--persistent-white);
     --btn: var(--btn-red);
@@ -128,7 +140,7 @@ defineProps({
     font-size: 12px;
     font-weight: 500;
     line-height: 20px;
-    padding: 4px 16px;
+    padding: 4px 12px;
 
     .loading-icon {
       height: 16px;
@@ -175,7 +187,7 @@ defineProps({
     background: var(--btn-disable);
 
     span {
-      opacity: 0.4;
+      color: var(--tc-quaternary);
     }
     .loading-icon {
       opacity: 0;

package/src/checkbox/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <label class="bge-checkbox" :class="{'bge-checkbox_large': size === 'large', 'bge-checkbox_disabled': disabled}">
+  <label class="bge-checkbox" :class="{'bge-checkbox_large': size === 'large', 'bge-checkbox_mini': size === 'mini', 'bge-checkbox_disabled': disabled}">
     <span class="bge-checkbox__input">
       <input
         :id="id"
@@ -10,12 +10,13 @@
         @change="handleChange"
         @click.stop
       />
-      <svg class="bge-checkbox__inner" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path class="border" v-if="!input" fill-rule="evenodd" clip-rule="evenodd" d="M13 3H3V13H13V3ZM2 2V14H14V2H2Z" fill="#455666"/>
-        <template v-else>
-          <path class="bg" d="M2 2H14V14H2V2Z" fill="#FFFF38"/>
-          <path class="check" fill-rule="evenodd" clip-rule="evenodd" d="M11.6426 6.0971L7.5381 10.9479L4.36133 8.16819L5.23933 7.16475L7.3959 9.05174L10.6247 5.23584L11.6426 6.0971Z" fill="#0E1114"/>
-        </template>
+      <svg v-if="!input" class="bge-checkbox__inner" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path class="border" fill-rule="evenodd" clip-rule="evenodd" d="M13 4C13 3.44772 12.5523 3 12 3H4C3.44772 3 3 3.44772 3 4V12C3 12.5523 3.44772 13 4 13H12C12.5523 13 13 12.5523 13 12V4ZM4 2C2.89543 2 2 2.89543 2 4V12C2 13.1046 2.89543 14 4 14H12C13.1046 14 14 13.1046 14 12V4C14 2.89543 13.1046 2 12 2H4Z" />
+      </svg>
+
+      <svg v-else class="bge-checkbox__inner" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path class="bg" d="M2 4C2 2.89543 2.89543 2 4 2H12C13.1046 2 14 2.89543 14 4V12C14 13.1046 13.1046 14 12 14H4C2.89543 14 2 13.1046 2 12V4Z" />
+        <path class="check" fill-rule="evenodd" clip-rule="evenodd" d="M11.1337 5.66647C11.4147 5.9043 11.4498 6.32495 11.212 6.60602L7.83726 10.5943C7.67284 10.7886 7.38111 10.8105 7.18955 10.6429L4.86305 8.60719C4.58595 8.36473 4.55788 7.94356 4.80033 7.66647C5.04279 7.38938 5.46396 7.3613 5.74105 7.60375L7.3959 9.05174L10.1941 5.74476C10.4319 5.46369 10.8526 5.42864 11.1337 5.66647Z" />
       </svg>
     </span>
     <label :for="id" class="bge-checkbox__label" :class="{checked: input}">
@@ -50,7 +51,7 @@ const props = defineProps({
   },
   size: {
     type: String,
-    default: 'large'
+    default: 'default'
   },
   modelValue: {
     type: [Array, String, Number, Boolean],
@@ -129,21 +130,35 @@ function handleChange (e: Event) {
   .bge-checkbox {
     display: inline-flex;
     justify-content: flex-start;
-    align-items: flex-start;
+    align-items: center;
     margin-right: 8px;
   }
 
   .bge-checkbox_large {
     .bge-checkbox__label {
-      font-size: 14px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 28px;
+    }
+
+    .bge-checkbox__inner,
+    .bge-checkbox__original {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .bge-checkbox_mini {
+    .bge-checkbox__label {
+      font-size: 12px;
       font-weight: 500;
-      line-height: 24px;
+      line-height: 20px;
     }
 
     .bge-checkbox__inner,
     .bge-checkbox__original {
-      width: 20px;
-      height: 20px;
+      width: 16px;
+      height: 16px;
     }
   }
 
@@ -176,9 +191,9 @@ function handleChange (e: Event) {
   .bge-checkbox__label {
     display: inline-block;
     padding-left: 8px;
-    font-size: 12px;
+    font-size: 14px;
     font-weight: 500;
-    line-height: 20px;
+    line-height: 24px;
     color: var(--tc-secondary);
 
     &.checked {
@@ -195,8 +210,8 @@ function handleChange (e: Event) {
   }
 
   .bge-checkbox__original {
-    width: 16px;
-    height: 16px;
+    width: 20px;
+    height: 20px;
     opacity: 0;
     outline: none;
     z-index: 0;
@@ -206,11 +221,11 @@ function handleChange (e: Event) {
     display: inline-block;
     position: absolute;
     left: 0;
-    top: 2px;
+    top: 0;
     
     box-sizing: border-box;
-    width: 16px;
-    height: 16px;
+    width: 20px;
+    height: 20px;
     background-color: transparent;
     z-index: 1;
     transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46), background-color .25s cubic-bezier(.71,-.46,.29,1.46), outline .25s cubic-bezier(.71,-.46,.29,1.46);