@bigtablet/design-system 1.24.0 → 1.24.2

package/dist/index.css

@@ -234,42 +234,6 @@
   animation: spinner_spin 0.8s linear infinite;
 }
 
-/* src/ui/feedback/top-loading/style.scss */
-@keyframes skeleton_loading {
-  0% {
-    background-position: 100% 0;
-  }
-  100% {
-    background-position: 0 0;
-  }
-}
-.top_loading {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  overflow: hidden;
-  background-color: transparent;
-}
-.top_loading_bar {
-  height: 100%;
-  background-color: #121212;
-  transition: width 0.2s ease-in-out;
-}
-.top_loading_indeterminate {
-  width: 30%;
-  animation: top_loading_indeterminate 1.5s ease-in-out infinite;
-}
-@keyframes top_loading_indeterminate {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(400%);
-  }
-}
-
 /* src/ui/feedback/toast/style.scss */
 @keyframes skeleton_loading {
   0% {
@@ -311,7 +275,7 @@
   position: fixed;
   top: 16px;
   right: 16px;
-  z-index: 1000;
+  z-index: 200;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -413,7 +377,7 @@
   background: #666666;
 }
 
-/* src/ui/general/button/style.scss */
+/* src/ui/feedback/top-loading/style.scss */
 @keyframes skeleton_loading {
   0% {
     background-position: 100% 0;
@@ -422,89 +386,31 @@
     background-position: 0 0;
   }
 }
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-  font-weight: 500;
-  transition:
-    background 0.2s ease-in-out,
-    color 0.2s ease-in-out,
-    box-shadow 0.2s ease-in-out,
-    transform 0.2s ease-in-out;
-}
-.button:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-.button_size_sm {
-  padding: 8px 16px;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  letter-spacing: 0px;
-}
-.button_size_md {
-  padding: 12px 20px;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 22.5px;
-  letter-spacing: 0px;
-}
-.button_size_lg {
-  padding: 16px 24px;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0px;
-}
-.button_variant_primary {
-  background: #121212;
-  color: #FFFFFF;
-}
-.button_variant_primary:hover:not(:disabled) {
-  background: #999999;
-}
-.button_variant_primary:active:not(:disabled) {
-  transform: scale(0.98);
-}
-.button_variant_secondary {
-  background: transparent;
-  border: 1px solid #E5E5E5;
-  color: #121212;
-}
-.button_variant_secondary:hover:not(:disabled) {
-  background: #F4F4F4;
-}
-.button_variant_secondary:active:not(:disabled) {
-  transform: scale(0.98);
-}
-.button_variant_ghost {
-  background: transparent;
-  color: #121212;
-}
-.button_variant_ghost:hover:not(:disabled) {
-  background: rgba(0, 0, 0, 0.05);
-}
-.button_variant_ghost:active:not(:disabled) {
-  transform: scale(0.96);
-}
-.button_variant_danger {
-  background: #EF4444;
-  color: #FFFFFF;
+.top_loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 500;
+  overflow: hidden;
+  background-color: transparent;
 }
-.button_variant_danger:hover:not(:disabled) {
-  background: rgb(235.7842364532, 30.4157635468, 30.4157635468);
+.top_loading_bar {
+  height: 100%;
+  background-color: #121212;
+  transition: width 0.2s ease-in-out;
 }
-.button_variant_danger:active:not(:disabled) {
-  transform: scale(0.98);
+.top_loading_indeterminate {
+  width: 30%;
+  animation: top_loading_indeterminate 1.5s ease-in-out infinite;
 }
-.button_full_width {
-  width: 100%;
+@keyframes top_loading_indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
 }
 
 /* src/ui/form/checkbox/style.scss */
@@ -633,6 +539,122 @@
   border-radius: 9999px;
 }
 
+/* src/ui/form/date-picker/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+.date_picker {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.date_picker select {
+  min-width: 88px;
+  height: 44px;
+  padding: 0 12px;
+  font-family: "Pretendard", sans-serif;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22.5px;
+  letter-spacing: 0px;
+  color: #121212;
+  background-color: #FFFFFF;
+  border: 1px solid #E5E5E5;
+  border-radius: 6px;
+  cursor: pointer;
+  transition:
+    border-color 0.1s ease-in-out,
+    box-shadow 0.1s ease-in-out,
+    background-color 0.1s ease-in-out;
+  appearance: none;
+  background-image:
+    linear-gradient(
+      45deg,
+      transparent 50%,
+      #666666 50%),
+    linear-gradient(
+      135deg,
+      #666666 50%,
+      transparent 50%);
+  background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px);
+  background-size: 5px 5px;
+  background-repeat: no-repeat;
+}
+.date_picker select:hover:not(:disabled) {
+  border-color: #121212;
+  background-color: #F4F4F4;
+}
+.date_picker select:focus-visible {
+  outline: none;
+  border-color: #121212;
+  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
+  background-color: #FFFFFF;
+}
+.date_picker select:disabled {
+  cursor: not-allowed;
+  color: rgba(26, 26, 26, 0.38);
+  background-color: #F4F4F4;
+  border-color: rgba(0, 0, 0, 0.08);
+}
+.date_picker select option {
+  color: #121212;
+}
+@media (max-width: 480px) {
+  .date_picker select {
+    flex: 1;
+    min-width: 0;
+  }
+}
+.date_picker_label {
+  color: #121212;
+  margin-bottom: 4px;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 24px;
+}
+.date_picker_required {
+  margin-left: 4px;
+  color: #EF4444;
+}
+.date_picker_fields {
+  display: flex;
+  gap: 8px;
+}
+@media (max-width: 480px) {
+  .date_picker_fields {
+    gap: 4px;
+  }
+}
+.date_picker_full_width {
+  width: 100%;
+}
+.date_picker_full_width .date_picker_fields {
+  width: 100%;
+}
+.date_picker_full_width select {
+  flex: 1;
+  min-width: 0;
+}
+.date_picker_disabled .date_picker_label {
+  color: rgba(26, 26, 26, 0.38);
+}
+.date_picker_sr_only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* src/ui/form/file/style.scss */
 @keyframes skeleton_loading {
   0% {
@@ -794,201 +816,6 @@
   cursor: not-allowed;
 }
 
-/* src/ui/general/select/style.scss */
-@keyframes skeleton_loading {
-  0% {
-    background-position: 100% 0;
-  }
-  100% {
-    background-position: 0 0;
-  }
-}
-.select {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 4px;
-  font-family: "Pretendard", sans-serif;
-}
-.select_label {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  letter-spacing: 0px;
-  font-weight: 500;
-  color: #121212;
-}
-.select_control {
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  cursor: pointer;
-  color: #121212;
-  background: #FFFFFF;
-  border-radius: 8px;
-  transition:
-    border-color 0.2s ease-in-out,
-    box-shadow 0.2s ease-in-out,
-    background 0.2s ease-in-out;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 22.5px;
-  letter-spacing: 0px;
-}
-.select_control:disabled,
-.select_control.is_disabled {
-  cursor: not-allowed;
-  opacity: 0.7;
-  background: #F4F4F4;
-  color: #888888;
-}
-.select_variant_outline {
-  border: 1px solid #E5E5E5;
-}
-.select_variant_outline:hover:not(.is_disabled) {
-  border-color: rgba(0, 0, 0, 0.08);
-}
-.select_variant_outline.is_open {
-  border-color: #121212;
-  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
-}
-.select_variant_filled {
-  background: #F4F4F4;
-  border: 1px solid transparent;
-}
-.select_variant_filled:hover:not(.is_disabled) {
-  background: rgb(251.7, 251.7, 251.7);
-}
-.select_variant_filled.is_open {
-  background: #FFFFFF;
-  border-color: #121212;
-  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
-}
-.select_variant_ghost {
-  background: transparent;
-  border: 1px solid transparent;
-}
-.select_variant_ghost:hover:not(.is_disabled) {
-  background: rgba(0, 0, 0, 0.05);
-}
-.select_variant_ghost.is_open {
-  background: #FFFFFF;
-  border-color: #121212;
-  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
-}
-.select_size_sm {
-  padding: 8px 16px;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  letter-spacing: 0px;
-}
-.select_size_md {
-  padding: 12px 20px;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 22.5px;
-  letter-spacing: 0px;
-}
-.select_size_lg {
-  padding: 16px 24px;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0px;
-}
-.select_value {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: start;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 22.5px;
-  letter-spacing: 0px;
-}
-.select_placeholder {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: start;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 22.5px;
-  letter-spacing: 0px;
-  color: #888888;
-}
-.select_icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: #666666;
-}
-.select_list {
-  position: absolute;
-  z-index: 1000;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  min-width: 100%;
-  box-sizing: border-box;
-  margin-top: 4px;
-  background: #FFFFFF;
-  border: 1px solid #E5E5E5;
-  border-radius: 8px;
-  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2), 0 6px 6px 0px rgba(0, 0, 0, 0.12);
-  max-height: 18rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 4px 0;
-}
-.select_list_up {
-  top: auto;
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: 4px;
-}
-.select_option {
-  width: 100%;
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  cursor: pointer;
-  color: #121212;
-  background: transparent;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 22.5px;
-  letter-spacing: 0px;
-}
-.select_option > span:first-child {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.select_option:hover,
-.select_option.is_active {
-  background: #F4F4F4;
-}
-.select_option.is_selected {
-  font-weight: 500;
-}
-.select_option.is_disabled {
-  cursor: not-allowed;
-  color: #888888;
-}
-
 /* src/ui/form/switch/style.scss */
 @keyframes skeleton_loading {
   0% {
@@ -1213,7 +1040,7 @@
   box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
 }
 
-/* src/ui/form/date-picker/style.scss */
+/* src/ui/general/button/style.scss */
 @keyframes skeleton_loading {
   0% {
     background-position: 100% 0;
@@ -1222,111 +1049,284 @@
     background-position: 0 0;
   }
 }
-.date_picker {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  transition:
+    background 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    transform 0.2s ease-in-out;
 }
-.date_picker select {
-  min-width: 88px;
-  height: 44px;
-  padding: 0 12px;
-  font-family: "Pretendard", sans-serif;
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.button_size_sm {
+  padding: 8px 16px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0px;
+}
+.button_size_md {
+  padding: 12px 20px;
   font-size: 15px;
   font-weight: 400;
   line-height: 22.5px;
   letter-spacing: 0px;
-  color: #121212;
-  background-color: #FFFFFF;
-  border: 1px solid #E5E5E5;
-  border-radius: 6px;
-  cursor: pointer;
-  transition:
-    border-color 0.1s ease-in-out,
-    box-shadow 0.1s ease-in-out,
-    background-color 0.1s ease-in-out;
-  appearance: none;
-  background-image:
-    linear-gradient(
-      45deg,
-      transparent 50%,
-      #666666 50%),
-    linear-gradient(
-      135deg,
-      #666666 50%,
-      transparent 50%);
-  background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px);
-  background-size: 5px 5px;
-  background-repeat: no-repeat;
 }
-.date_picker select:hover:not(:disabled) {
-  border-color: #121212;
-  background-color: #F4F4F4;
+.button_size_lg {
+  padding: 16px 24px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0px;
 }
-.date_picker select:focus-visible {
-  outline: none;
-  border-color: #121212;
-  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
-  background-color: #FFFFFF;
+.button_variant_primary {
+  background: #121212;
+  color: #FFFFFF;
 }
-.date_picker select:disabled {
-  cursor: not-allowed;
-  color: rgba(26, 26, 26, 0.38);
-  background-color: #F4F4F4;
-  border-color: rgba(0, 0, 0, 0.08);
+.button_variant_primary:hover:not(:disabled) {
+  background: #999999;
 }
-.date_picker select option {
+.button_variant_primary:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.button_variant_secondary {
+  background: transparent;
+  border: 1px solid #E5E5E5;
   color: #121212;
 }
-@media (max-width: 480px) {
-  .date_picker select {
-    flex: 1;
-    min-width: 0;
-  }
+.button_variant_secondary:hover:not(:disabled) {
+  background: #F4F4F4;
 }
-.date_picker_label {
+.button_variant_secondary:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.button_variant_ghost {
+  background: transparent;
   color: #121212;
-  margin-bottom: 4px;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 24px;
 }
-.date_picker_required {
-  margin-left: 4px;
-  color: #EF4444;
+.button_variant_ghost:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.05);
 }
-.date_picker_fields {
-  display: flex;
-  gap: 8px;
+.button_variant_ghost:active:not(:disabled) {
+  transform: scale(0.96);
 }
-@media (max-width: 480px) {
-  .date_picker_fields {
-    gap: 4px;
+.button_variant_danger {
+  background: #EF4444;
+  color: #FFFFFF;
+}
+.button_variant_danger:hover:not(:disabled) {
+  background: rgb(235.7842364532, 30.4157635468, 30.4157635468);
+}
+.button_variant_danger:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.button_full_width {
+  width: 100%;
+}
+
+/* src/ui/general/select/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
   }
 }
-.date_picker_full_width {
+.select {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
   width: 100%;
+  gap: 4px;
+  font-family: "Pretendard", sans-serif;
 }
-.date_picker_full_width .date_picker_fields {
+.select_label {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0px;
+  font-weight: 500;
+  color: #121212;
+}
+.select_control {
   width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  cursor: pointer;
+  color: #121212;
+  background: #FFFFFF;
+  border-radius: 8px;
+  transition:
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    background 0.2s ease-in-out;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22.5px;
+  letter-spacing: 0px;
 }
-.date_picker_full_width select {
-  flex: 1;
+.select_control:disabled,
+.select_control.is_disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+  background: #F4F4F4;
+  color: #888888;
+}
+.select_variant_outline {
+  border: 1px solid #E5E5E5;
+}
+.select_variant_outline:hover:not(.is_disabled) {
+  border-color: rgba(0, 0, 0, 0.08);
+}
+.select_variant_outline.is_open {
+  border-color: #121212;
+  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
+}
+.select_variant_filled {
+  background: #F4F4F4;
+  border: 1px solid transparent;
+}
+.select_variant_filled:hover:not(.is_disabled) {
+  background: rgb(251.7, 251.7, 251.7);
+}
+.select_variant_filled.is_open {
+  background: #FFFFFF;
+  border-color: #121212;
+  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
+}
+.select_variant_ghost {
+  background: transparent;
+  border: 1px solid transparent;
+}
+.select_variant_ghost:hover:not(.is_disabled) {
+  background: rgba(0, 0, 0, 0.05);
+}
+.select_variant_ghost.is_open {
+  background: #FFFFFF;
+  border-color: #121212;
+  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
+}
+.select_size_sm {
+  padding: 8px 16px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0px;
+}
+.select_size_md {
+  padding: 12px 20px;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22.5px;
+  letter-spacing: 0px;
+}
+.select_size_lg {
+  padding: 16px 24px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0px;
+}
+.select_value {
+  flex: 1 1 auto;
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: start;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22.5px;
+  letter-spacing: 0px;
 }
-.date_picker_disabled .date_picker_label {
-  color: rgba(26, 26, 26, 0.38);
+.select_placeholder {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: start;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22.5px;
+  letter-spacing: 0px;
+  color: #888888;
 }
-.date_picker_sr_only {
+.select_icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #666666;
+}
+.select_list {
   position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
+  z-index: 1000;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  min-width: 100%;
+  box-sizing: border-box;
+  margin-top: 4px;
+  background: #FFFFFF;
+  border: 1px solid #E5E5E5;
+  border-radius: 8px;
+  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2), 0 6px 6px 0px rgba(0, 0, 0, 0.12);
+  max-height: 18rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 4px 0;
+}
+.select_list_up {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+.select_option {
+  width: 100%;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  cursor: pointer;
+  color: #121212;
+  background: transparent;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22.5px;
+  letter-spacing: 0px;
+}
+.select_option > span:first-child {
+  min-width: 0;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  text-overflow: ellipsis;
   white-space: nowrap;
-  border: 0;
+}
+.select_option:hover,
+.select_option.is_active {
+  background: #F4F4F4;
+}
+.select_option.is_selected {
+  font-weight: 500;
+}
+.select_option.is_disabled {
+  cursor: not-allowed;
+  color: #888888;
 }
 
 /* src/ui/navigation/pagination/style.scss */
@@ -1423,7 +1423,7 @@
   display: grid;
   place-items: center;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 1000;
+  z-index: 100;
 }
 .modal_panel {
   background: #FFFFFF;