habit-ui - npm Package Compare versions

Comparing version 0.5.23 to 0.5.24

dist/index.es.js

@@ -0,1 +1,17 @@
+function ___$insertStylesToHeader(css) {
+  if (!css) {
+    return
+  }
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const style = document.createElement('style');
+
+  style.setAttribute('type', 'text/css');
+  style.innerHTML = css;
+  document.head.appendChild(style);
+  return css
+}
+
 import { ref, useSlots, computed, onMounted, watch, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, createElementVNode, vModelCheckbox, renderSlot, Fragment, createTextVNode, toDisplayString, createCommentVNode, pushScopeId, popScopeId } from 'vue';
@@ -114,2 +130,4 @@
 
+___$insertStylesToHeader("@charset \"UTF-8\";\n/* https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074 */\n/* https://codepen.io/dylanraga/pen/Qwqbab */\ninput.hb-checkbox__input[data-v-38625b18] {\n  position: absolute;\n  top: 0;\n  width: 1.25em;\n  height: 1.25em;\n  left: 0;\n  opacity: 0.001;\n  box-sizing: border-box;\n  margin: 0;\n  z-index: 1;\n  cursor: pointer;\n}\n\n.hb-checkbox[data-v-38625b18] {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  cursor: pointer;\n  /* background-color: rgba(0, 255, 0, 0.05); */\n  /* 여기 설정된 사이즈가 em이 되며 체크박스 및 꺾쇠의 크기를 결정합니다 */\n  /* PROP : Size (크기) 섹션에서 이 값을 변경합니다 */\n  font-size: 14px;\n}\n\n.hb-checkbox__label[data-v-38625b18] {\n  display: flex;\n  gap: 0.57em; /* 8px*/\n  width: fit-content;\n  cursor: pointer;\n}\n\n.hb-checkbox__mark[data-v-38625b18] {\n  height: 1.25em; /* 17.5 px; */\n  width: 1.25em; /* 17.5 px; */\n  flex-grow: 0;\n  flex-shrink: 0;\n  background: #aaa;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n.hb-checkbox__text[data-v-38625b18] {\n  /* background-color: rgba(0, 255, 0, 0.05); */\n  line-height: 1.25em;\n}\n\n.hb-checkbox__mark[data-v-38625b18]:before, .hb-checkbox__mark[data-v-38625b18]:after {\n  box-sizing: content-box !important;\n}\n\n.hb-checkbox .hb-checkbox__mark[data-v-38625b18],\n.hb-checkbox--box .hb-checkbox__mark[data-v-38625b18] {\n  border-radius: 3px;\n  background-color: white;\n  border: 2px solid #ced4da;\n}\n\n.hb-checkbox .hb-checkbox__label[data-v-38625b18],\n.hb-checkbox--box .hb-checkbox__label[data-v-38625b18] {\n  font-weight: bold;\n  color: rgba(52, 58, 64, 0.85);\n}\n\n.hb-checkbox .hb-checkbox__input:checked + .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18],\n.hb-checkbox--box .hb-checkbox__input:checked + .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18] {\n  background-color: #5c7cfa;\n  border: none;\n}\n\n.hb-checkbox .hb-checkbox__input:checked + .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18]:before,\n.hb-checkbox--box .hb-checkbox__input:checked + .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18]:before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0.45em;\n  left: 0.2em;\n  border-right: 0.2em solid transparent;\n  border-bottom: 0.2em solid transparent;\n  transform-origin: 0% 100%;\n  width: 0.3em;\n  height: 0.6em;\n  border-color: #ffffff;\n  transform: translate3d(0, -0.62em, 0) rotate(45deg);\n}\n\n.hb-checkbox .hb-checkbox__input:checked ~ .hb-checkbox__label[data-v-38625b18],\n.hb-checkbox--box .hb-checkbox__input:checked ~ .hb-checkbox__label[data-v-38625b18] {\n  color: #343a40;\n}\n\n.hb-checkbox--line .hb-checkbox__label[data-v-38625b18] {\n  font-weight: normal;\n  color: #495057;\n}\n\n.hb-checkbox--line .hb-checkbox__input ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18] {\n  background-color: transparent;\n  border: none;\n}\n\n.hb-checkbox--line .hb-checkbox__input:checked ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18] {\n  background-color: transparent;\n  border: none;\n}\n\n.hb-checkbox--line .hb-checkbox__mark[data-v-38625b18]:before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0.3em;\n  left: 0.11em;\n  width: 0.37em;\n  height: 0.73em;\n  border-right: 0.218em solid rgba(206, 212, 218, 0.8);\n  border-bottom: 0.218em solid rgba(206, 212, 218, 0.8);\n  transform: translate3d(0, -0.62em, 0) rotate(45deg);\n  transform-origin: 0% 100%;\n}\n\n.hb-checkbox--line .hb-checkbox__input:checked ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18]:before {\n  top: 0.3em;\n  left: 0.11em;\n  width: 0.37em;\n  height: 0.73em;\n  border-right: 0.218em solid #5c7cfa;\n  border-bottom: 0.218em solid #5c7cfa;\n}\n\n.hb-checkbox--line .hb-checkbox__input:checked ~ .hb-checkbox__label[data-v-38625b18] {\n  color: #343a40;\n}\n\n.hb-checkbox[data-v-38625b18] {\n  /* 여기 설정된 사이즈가 em이 되며 체크박스 및 꺾쇠의 크기를 결정합니다 */\n}\n\n.hb-checkbox--h2[data-v-38625b18] {\n  font-size: 18px;\n}\n\n.hb-checkbox--h3[data-v-38625b18] {\n  font-size: 16px;\n}\n\n.hb-checkbox__bracket[data-v-38625b18] {\n  margin-left: auto;\n  color: #ced4da;\n  width: 40px;\n  flex-shrink: 0;\n  height: 1.25em;\n  line-height: 1.25em;\n  text-align: center;\n  /* 시각적 정렬을 위해 위치를 오른쪽으로 약간 이동시킵니다 */\n  position: relative;\n  right: -12px;\n}\n\n.hb-checkbox--animation .hb-checkbox__input:checked ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18] {\n  background-color: #5c7cfa;\n  border: none;\n  animation: shrink-bounce-38625b18 200ms cubic-bezier(0.4, 0, 0.23, 1);\n}\n\n@keyframes shrink-bounce-38625b18 {\n  0% {\n    transform: scale(1);\n  }\n  33% {\n    transform: scale(0.85);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n.hb-checkbox--animation .hb-checkbox__input:checked ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18]:before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0.45em;\n  left: 0.2em;\n  border-right: 0.2em solid transparent;\n  border-bottom: 0.2em solid transparent;\n  transform: rotate(45deg);\n  transform-origin: 0% 100%;\n  animation: checkbox-check-38625b18 187.5ms 375ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n}\n\n@keyframes checkbox-check-38625b18 {\n  0% {\n    width: 0;\n    height: 0;\n    border-color: #ffffff;\n    transform: translate3d(0, 0, 0) rotate(45deg);\n  }\n  33% {\n    width: 0.3em;\n    height: 0;\n    transform: translate3d(0, 0, 0) rotate(45deg);\n  }\n  100% {\n    width: 0.3em;\n    height: 0.6em;\n    border-color: #ffffff;\n    transform: translate3d(0, -0.62em, 0) rotate(45deg);\n  }\n}\n.hb-checkbox--animation.hb-checkbox--line .hb-checkbox__input ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18] {\n  background-color: transparent;\n  border: none;\n}\n\n.hb-checkbox--animation.hb-checkbox--line .hb-checkbox__input:checked ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18] {\n  animation: none;\n}\n\n.hb-checkbox--animation.hb-checkbox--line .hb-checkbox__input:checked ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18]:before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0.3em;\n  left: 0.11em;\n  width: 0.37em;\n  height: 0.73em;\n  border-right: 0.218em solid rgba(206, 212, 218, 0.8);\n  border-bottom: 0.218em solid rgba(206, 212, 218, 0.8);\n  transform: translate3d(0, -0.62em, 0) rotate(45deg);\n  transform-origin: 0% 100%;\n  animation: checkbox-check-ver-shape-line-38625b18 187.5ms 375ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n}\n\n@keyframes checkbox-check-ver-shape-line-38625b18 {\n  0% {\n    width: 0;\n    height: 0;\n    border-color: #5c7cfa;\n    transform: translate3d(0em, 0.11em, 0) rotate(45deg);\n  }\n  33% {\n    width: 0.37em;\n    height: 0;\n    transform: translate3d(0em, 0.11em, 0) rotate(45deg);\n  }\n  100% {\n    width: 0.37em;\n    height: 0.73em;\n    border-color: #5c7cfa;\n    transform: translate3d(0, -0.62em, 0) rotate(45deg);\n  }\n}");
+
 script$2.__scopeId = "data-v-38625b18";
@@ -245,2 +263,4 @@ script$2.__file = "docs/.vitepress/components/hb-checkbox/index.vue";
 
+___$insertStylesToHeader("button[data-v-6210de47] {\n  border: 0;\n  outline: 0;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n}\n\n.hb-button[data-v-6210de47] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.hb-button[data-v-6210de47]:hover, .hb-button[data-v-6210de47]:active {\n  transition: 0.07s;\n}\n\n.hb-button[data-v-6210de47] {\n  background-color: #5c7cfa;\n  color: white;\n}\n\n.hb-button--primary[data-v-6210de47] {\n  background-color: #5c7cfa;\n  color: white;\n}\n\n.hb-button--primary[data-v-6210de47]:hover {\n  background-color: #4c6ef5;\n}\n\n.hb-button--primary[data-v-6210de47]:active {\n  background-color: #3b5bdb;\n}\n\n.hb-button--kakao[data-v-6210de47] {\n  background-color: #fde504;\n  color: black;\n}\n\n.hb-button--kakao[data-v-6210de47]:hover {\n  background-color: #ffe066;\n}\n\n.hb-button--kakao[data-v-6210de47]:active {\n  background-color: #ffd43b;\n}\n\n.hb-button--lightblue[data-v-6210de47] {\n  background-color: #edf2ff;\n  color: #5c7cfa;\n}\n\n.hb-button--lightblue[data-v-6210de47]:hover {\n  background-color: rgba(219, 228, 255, 0.75);\n}\n\n.hb-button--lightblue[data-v-6210de47]:active {\n  background-color: #dbe4ff;\n}\n\n.hb-button--lightgray[data-v-6210de47] {\n  background-color: #f1f3f5;\n  color: #495057;\n}\n\n.hb-button--lightgray[data-v-6210de47]:hover {\n  background-color: #e9ecef;\n}\n\n.hb-button--lightgray[data-v-6210de47]:active {\n  background-color: #dee2e6;\n}\n\n.hb-button--line[data-v-6210de47] {\n  background-color: white;\n  border: 1px solid;\n  border-color: #5c7cfa;\n  color: #5c7cfa;\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47] {\n  border-color: #5c7cfa;\n  color: #5c7cfa;\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47]:hover {\n  border-color: #4c6ef5;\n  background-color: rgba(237, 242, 255, 0.5);\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47]:active {\n  border-color: #3b5bdb;\n  background-color: #edf2ff;\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47] {\n  border-color: #ced4da;\n  color: #adb5bd;\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47]:hover {\n  border-color: #adb5bd;\n  background-color: rgba(248, 249, 250, 0.5);\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47]:active {\n  border-color: #adb5bd;\n  background-color: #f8f9fa;\n}\n\n.hb-button--text[data-v-6210de47] {\n  background-color: transparent;\n  border: 0;\n  color: #5c7cfa;\n}\n\n.hb-button--text[data-v-6210de47]:hover {\n  background-color: rgba(237, 242, 255, 0.5);\n}\n\n.hb-button--text[data-v-6210de47]:active {\n  background-color: #edf2ff;\n}\n\n.hb-button[data-v-6210de47]:disabled {\n  background-color: #ced4da !important;\n  color: #adb5bd !important;\n  border: none !important;\n}\n\n.hb-button--line[data-v-6210de47]:disabled {\n  background-color: #f1f3f5 !important;\n  border: 1px solid #ced4da !important;\n  color: #ced4da !important;\n}\n\n.hb-button--text[data-v-6210de47]:disabled {\n  background-color: transparent !important;\n  color: #ced4da !important;\n}\n\n.hb-button--xs[data-v-6210de47] {\n  height: 22px;\n  border-radius: 3px;\n  padding: 0 6px;\n  font-size: 11px;\n}\n\n.hb-button--sm[data-v-6210de47] {\n  height: 28px;\n  border-radius: 4px;\n  padding: 0 8px;\n  font-size: 13px;\n}\n\n.hb-button--md[data-v-6210de47] {\n  height: 36px;\n  border-radius: 6px;\n  padding: 0 12px;\n  font-size: 13px;\n}\n\n.hb-button--lg[data-v-6210de47] {\n  height: 48px;\n  border-radius: 6px;\n  padding: 0 16px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.hb-button--xl[data-v-6210de47] {\n  height: 56px;\n  border-radius: 6px;\n  padding: 0 20px;\n  font-size: 15px;\n  font-weight: bold;\n}\n\n.hb-button--full[data-v-6210de47] {\n  width: 100%;\n}\n\n.hb-button__icon--left[data-v-6210de47] {\n  margin-right: 10px;\n}\n\n.hb-button__icon--left[data-v-6210de47]::before {\n  vertical-align: middle;\n}\n\n.hb-button__icon--right[data-v-6210de47] {\n  margin-left: 10px;\n}\n\n.hb-button__icon--right[data-v-6210de47]::before {\n  vertical-align: middle;\n}");
+
 script$1.render = render$1;
@@ -290,2 +310,4 @@ script$1.__scopeId = "data-v-6210de47";
 
+___$insertStylesToHeader(".hb-button-wrap[data-v-2b59b4a6] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.hb-button-wrap--full[data-v-2b59b4a6] {\n  width: 100%;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n.hb-button-wrap--full .hb-button[data-v-2b59b4a6] {\n  width: 100%;\n}\n\n.hb-button-wrap--float[data-v-2b59b4a6] {\n  width: 100%;\n  box-sizing: border-box;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white 20%);\n  padding: 20px 16px 16px 16px;\n}\n\n.hb-button-wrap--grid[data-v-2b59b4a6] {\n  display: grid;\n}");
+
 script.render = render;
@@ -292,0 +314,0 @@ script.__scopeId = "data-v-2b59b4a6";

dist/index.js

@@ -7,2 +7,18 @@ (function (global, factory) {
 
+  function ___$insertStylesToHeader(css) {
+    if (!css) {
+      return
+    }
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    const style = document.createElement('style');
+
+    style.setAttribute('type', 'text/css');
+    style.innerHTML = css;
+    document.head.appendChild(style);
+    return css
+  }
+
   var _withScopeId = function _withScopeId(n) {
@@ -119,2 +135,4 @@ return vue.pushScopeId("data-v-38625b18"), n = n(), vue.popScopeId(), n;
 
+  ___$insertStylesToHeader("@charset \"UTF-8\";\n/* https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074 */\n/* https://codepen.io/dylanraga/pen/Qwqbab */\ninput.hb-checkbox__input[data-v-38625b18] {\n  position: absolute;\n  top: 0;\n  width: 1.25em;\n  height: 1.25em;\n  left: 0;\n  opacity: 0.001;\n  box-sizing: border-box;\n  margin: 0;\n  z-index: 1;\n  cursor: pointer;\n}\n\n.hb-checkbox[data-v-38625b18] {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  cursor: pointer;\n  /* background-color: rgba(0, 255, 0, 0.05); */\n  /* 여기 설정된 사이즈가 em이 되며 체크박스 및 꺾쇠의 크기를 결정합니다 */\n  /* PROP : Size (크기) 섹션에서 이 값을 변경합니다 */\n  font-size: 14px;\n}\n\n.hb-checkbox__label[data-v-38625b18] {\n  display: flex;\n  gap: 0.57em; /* 8px*/\n  width: fit-content;\n  cursor: pointer;\n}\n\n.hb-checkbox__mark[data-v-38625b18] {\n  height: 1.25em; /* 17.5 px; */\n  width: 1.25em; /* 17.5 px; */\n  flex-grow: 0;\n  flex-shrink: 0;\n  background: #aaa;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n.hb-checkbox__text[data-v-38625b18] {\n  /* background-color: rgba(0, 255, 0, 0.05); */\n  line-height: 1.25em;\n}\n\n.hb-checkbox__mark[data-v-38625b18]:before, .hb-checkbox__mark[data-v-38625b18]:after {\n  box-sizing: content-box !important;\n}\n\n.hb-checkbox .hb-checkbox__mark[data-v-38625b18],\n.hb-checkbox--box .hb-checkbox__mark[data-v-38625b18] {\n  border-radius: 3px;\n  background-color: white;\n  border: 2px solid #ced4da;\n}\n\n.hb-checkbox .hb-checkbox__label[data-v-38625b18],\n.hb-checkbox--box .hb-checkbox__label[data-v-38625b18] {\n  font-weight: bold;\n  color: rgba(52, 58, 64, 0.85);\n}\n\n.hb-checkbox .hb-checkbox__input:checked + .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18],\n.hb-checkbox--box .hb-checkbox__input:checked + .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18] {\n  background-color: #5c7cfa;\n  border: none;\n}\n\n.hb-checkbox .hb-checkbox__input:checked + .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18]:before,\n.hb-checkbox--box .hb-checkbox__input:checked + .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18]:before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0.45em;\n  left: 0.2em;\n  border-right: 0.2em solid transparent;\n  border-bottom: 0.2em solid transparent;\n  transform-origin: 0% 100%;\n  width: 0.3em;\n  height: 0.6em;\n  border-color: #ffffff;\n  transform: translate3d(0, -0.62em, 0) rotate(45deg);\n}\n\n.hb-checkbox .hb-checkbox__input:checked ~ .hb-checkbox__label[data-v-38625b18],\n.hb-checkbox--box .hb-checkbox__input:checked ~ .hb-checkbox__label[data-v-38625b18] {\n  color: #343a40;\n}\n\n.hb-checkbox--line .hb-checkbox__label[data-v-38625b18] {\n  font-weight: normal;\n  color: #495057;\n}\n\n.hb-checkbox--line .hb-checkbox__input ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18] {\n  background-color: transparent;\n  border: none;\n}\n\n.hb-checkbox--line .hb-checkbox__input:checked ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18] {\n  background-color: transparent;\n  border: none;\n}\n\n.hb-checkbox--line .hb-checkbox__mark[data-v-38625b18]:before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0.3em;\n  left: 0.11em;\n  width: 0.37em;\n  height: 0.73em;\n  border-right: 0.218em solid rgba(206, 212, 218, 0.8);\n  border-bottom: 0.218em solid rgba(206, 212, 218, 0.8);\n  transform: translate3d(0, -0.62em, 0) rotate(45deg);\n  transform-origin: 0% 100%;\n}\n\n.hb-checkbox--line .hb-checkbox__input:checked ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18]:before {\n  top: 0.3em;\n  left: 0.11em;\n  width: 0.37em;\n  height: 0.73em;\n  border-right: 0.218em solid #5c7cfa;\n  border-bottom: 0.218em solid #5c7cfa;\n}\n\n.hb-checkbox--line .hb-checkbox__input:checked ~ .hb-checkbox__label[data-v-38625b18] {\n  color: #343a40;\n}\n\n.hb-checkbox[data-v-38625b18] {\n  /* 여기 설정된 사이즈가 em이 되며 체크박스 및 꺾쇠의 크기를 결정합니다 */\n}\n\n.hb-checkbox--h2[data-v-38625b18] {\n  font-size: 18px;\n}\n\n.hb-checkbox--h3[data-v-38625b18] {\n  font-size: 16px;\n}\n\n.hb-checkbox__bracket[data-v-38625b18] {\n  margin-left: auto;\n  color: #ced4da;\n  width: 40px;\n  flex-shrink: 0;\n  height: 1.25em;\n  line-height: 1.25em;\n  text-align: center;\n  /* 시각적 정렬을 위해 위치를 오른쪽으로 약간 이동시킵니다 */\n  position: relative;\n  right: -12px;\n}\n\n.hb-checkbox--animation .hb-checkbox__input:checked ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18] {\n  background-color: #5c7cfa;\n  border: none;\n  animation: shrink-bounce-38625b18 200ms cubic-bezier(0.4, 0, 0.23, 1);\n}\n\n@keyframes shrink-bounce-38625b18 {\n  0% {\n    transform: scale(1);\n  }\n  33% {\n    transform: scale(0.85);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n.hb-checkbox--animation .hb-checkbox__input:checked ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18]:before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0.45em;\n  left: 0.2em;\n  border-right: 0.2em solid transparent;\n  border-bottom: 0.2em solid transparent;\n  transform: rotate(45deg);\n  transform-origin: 0% 100%;\n  animation: checkbox-check-38625b18 187.5ms 375ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n}\n\n@keyframes checkbox-check-38625b18 {\n  0% {\n    width: 0;\n    height: 0;\n    border-color: #ffffff;\n    transform: translate3d(0, 0, 0) rotate(45deg);\n  }\n  33% {\n    width: 0.3em;\n    height: 0;\n    transform: translate3d(0, 0, 0) rotate(45deg);\n  }\n  100% {\n    width: 0.3em;\n    height: 0.6em;\n    border-color: #ffffff;\n    transform: translate3d(0, -0.62em, 0) rotate(45deg);\n  }\n}\n.hb-checkbox--animation.hb-checkbox--line .hb-checkbox__input ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18] {\n  background-color: transparent;\n  border: none;\n}\n\n.hb-checkbox--animation.hb-checkbox--line .hb-checkbox__input:checked ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18] {\n  animation: none;\n}\n\n.hb-checkbox--animation.hb-checkbox--line .hb-checkbox__input:checked ~ .hb-checkbox__label .hb-checkbox__mark[data-v-38625b18]:before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0.3em;\n  left: 0.11em;\n  width: 0.37em;\n  height: 0.73em;\n  border-right: 0.218em solid rgba(206, 212, 218, 0.8);\n  border-bottom: 0.218em solid rgba(206, 212, 218, 0.8);\n  transform: translate3d(0, -0.62em, 0) rotate(45deg);\n  transform-origin: 0% 100%;\n  animation: checkbox-check-ver-shape-line-38625b18 187.5ms 375ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n}\n\n@keyframes checkbox-check-ver-shape-line-38625b18 {\n  0% {\n    width: 0;\n    height: 0;\n    border-color: #5c7cfa;\n    transform: translate3d(0em, 0.11em, 0) rotate(45deg);\n  }\n  33% {\n    width: 0.37em;\n    height: 0;\n    transform: translate3d(0em, 0.11em, 0) rotate(45deg);\n  }\n  100% {\n    width: 0.37em;\n    height: 0.73em;\n    border-color: #5c7cfa;\n    transform: translate3d(0, -0.62em, 0) rotate(45deg);\n  }\n}");
+
   script$2.__scopeId = "data-v-38625b18";
@@ -250,2 +268,4 @@ script$2.__file = "docs/.vitepress/components/hb-checkbox/index.vue";
 
+  ___$insertStylesToHeader("button[data-v-6210de47] {\n  border: 0;\n  outline: 0;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n}\n\n.hb-button[data-v-6210de47] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.hb-button[data-v-6210de47]:hover, .hb-button[data-v-6210de47]:active {\n  transition: 0.07s;\n}\n\n.hb-button[data-v-6210de47] {\n  background-color: #5c7cfa;\n  color: white;\n}\n\n.hb-button--primary[data-v-6210de47] {\n  background-color: #5c7cfa;\n  color: white;\n}\n\n.hb-button--primary[data-v-6210de47]:hover {\n  background-color: #4c6ef5;\n}\n\n.hb-button--primary[data-v-6210de47]:active {\n  background-color: #3b5bdb;\n}\n\n.hb-button--kakao[data-v-6210de47] {\n  background-color: #fde504;\n  color: black;\n}\n\n.hb-button--kakao[data-v-6210de47]:hover {\n  background-color: #ffe066;\n}\n\n.hb-button--kakao[data-v-6210de47]:active {\n  background-color: #ffd43b;\n}\n\n.hb-button--lightblue[data-v-6210de47] {\n  background-color: #edf2ff;\n  color: #5c7cfa;\n}\n\n.hb-button--lightblue[data-v-6210de47]:hover {\n  background-color: rgba(219, 228, 255, 0.75);\n}\n\n.hb-button--lightblue[data-v-6210de47]:active {\n  background-color: #dbe4ff;\n}\n\n.hb-button--lightgray[data-v-6210de47] {\n  background-color: #f1f3f5;\n  color: #495057;\n}\n\n.hb-button--lightgray[data-v-6210de47]:hover {\n  background-color: #e9ecef;\n}\n\n.hb-button--lightgray[data-v-6210de47]:active {\n  background-color: #dee2e6;\n}\n\n.hb-button--line[data-v-6210de47] {\n  background-color: white;\n  border: 1px solid;\n  border-color: #5c7cfa;\n  color: #5c7cfa;\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47] {\n  border-color: #5c7cfa;\n  color: #5c7cfa;\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47]:hover {\n  border-color: #4c6ef5;\n  background-color: rgba(237, 242, 255, 0.5);\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47]:active {\n  border-color: #3b5bdb;\n  background-color: #edf2ff;\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47] {\n  border-color: #ced4da;\n  color: #adb5bd;\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47]:hover {\n  border-color: #adb5bd;\n  background-color: rgba(248, 249, 250, 0.5);\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47]:active {\n  border-color: #adb5bd;\n  background-color: #f8f9fa;\n}\n\n.hb-button--text[data-v-6210de47] {\n  background-color: transparent;\n  border: 0;\n  color: #5c7cfa;\n}\n\n.hb-button--text[data-v-6210de47]:hover {\n  background-color: rgba(237, 242, 255, 0.5);\n}\n\n.hb-button--text[data-v-6210de47]:active {\n  background-color: #edf2ff;\n}\n\n.hb-button[data-v-6210de47]:disabled {\n  background-color: #ced4da !important;\n  color: #adb5bd !important;\n  border: none !important;\n}\n\n.hb-button--line[data-v-6210de47]:disabled {\n  background-color: #f1f3f5 !important;\n  border: 1px solid #ced4da !important;\n  color: #ced4da !important;\n}\n\n.hb-button--text[data-v-6210de47]:disabled {\n  background-color: transparent !important;\n  color: #ced4da !important;\n}\n\n.hb-button--xs[data-v-6210de47] {\n  height: 22px;\n  border-radius: 3px;\n  padding: 0 6px;\n  font-size: 11px;\n}\n\n.hb-button--sm[data-v-6210de47] {\n  height: 28px;\n  border-radius: 4px;\n  padding: 0 8px;\n  font-size: 13px;\n}\n\n.hb-button--md[data-v-6210de47] {\n  height: 36px;\n  border-radius: 6px;\n  padding: 0 12px;\n  font-size: 13px;\n}\n\n.hb-button--lg[data-v-6210de47] {\n  height: 48px;\n  border-radius: 6px;\n  padding: 0 16px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.hb-button--xl[data-v-6210de47] {\n  height: 56px;\n  border-radius: 6px;\n  padding: 0 20px;\n  font-size: 15px;\n  font-weight: bold;\n}\n\n.hb-button--full[data-v-6210de47] {\n  width: 100%;\n}\n\n.hb-button__icon--left[data-v-6210de47] {\n  margin-right: 10px;\n}\n\n.hb-button__icon--left[data-v-6210de47]::before {\n  vertical-align: middle;\n}\n\n.hb-button__icon--right[data-v-6210de47] {\n  margin-left: 10px;\n}\n\n.hb-button__icon--right[data-v-6210de47]::before {\n  vertical-align: middle;\n}");
+
   script$1.render = render$1;
@@ -295,2 +315,4 @@ script$1.__scopeId = "data-v-6210de47";
 
+  ___$insertStylesToHeader(".hb-button-wrap[data-v-2b59b4a6] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.hb-button-wrap--full[data-v-2b59b4a6] {\n  width: 100%;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n.hb-button-wrap--full .hb-button[data-v-2b59b4a6] {\n  width: 100%;\n}\n\n.hb-button-wrap--float[data-v-2b59b4a6] {\n  width: 100%;\n  box-sizing: border-box;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white 20%);\n  padding: 20px 16px 16px 16px;\n}\n\n.hb-button-wrap--grid[data-v-2b59b4a6] {\n  display: grid;\n}");
+
   script.render = render;
@@ -297,0 +319,0 @@ script.__scopeId = "data-v-2b59b4a6";

package.json

@@ -6,3 +6,3 @@ {
   ],
-  "version": "0.5.23",
+  "version": "0.5.24",
   "main": "dist/index.js",
@@ -9,0 +9,0 @@ "module": "dist/index.es.js",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

68306

decreased by-12.2%

Number of package files

12

decreased by-20%

Lines of code

891

decreased by-44.35%

Number of low supply chain risk alerts

5

increased by400%

No dependency changes