@bigtablet/design-system 1.12.1 → 1.14.0

package/dist/index.css

@@ -1,55 +1,47 @@
-/* src/ui/display/card/style.scss */
+/* src/ui/display/card/style.module.scss */
 .card {
   background: #ffffff;
   border-radius: 12px;
 }
-.card_bordered {
+.bordered {
   border: 1px solid #e5e5e5;
 }
-.card {
-}
-.card_shadow_none {
+.shadow_none {
   box-shadow: none;
 }
-.card_shadow_sm {
+.shadow_sm {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
 }
-.card_shadow_md {
+.shadow_md {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
 }
-.card_shadow_lg {
+.shadow_lg {
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
 }
-.card {
-}
-.card_p_none {
+.p_none {
   padding: 0;
 }
-.card_p_sm {
+.p_sm {
   padding: 0.5rem;
 }
-.card_p_md {
+.p_md {
   padding: 1rem;
 }
-.card_p_lg {
+.p_lg {
   padding: 1.5rem;
 }
-.card {
-}
-.card_title {
+.title {
   font-size: 1.25rem;
   font-weight: 600;
   line-height: 1.3;
   margin-bottom: 0.75rem;
   color: #1f2937;
 }
-.card {
-}
-.card_body {
+.body {
   width: 100%;
 }
 
-/* src/ui/feedback/alert/style.scss */
+/* src/ui/feedback/alert/style.module.scss */
 @keyframes fade_in {
   from {
     opacity: 0;
@@ -68,7 +60,7 @@
     transform: translateY(0);
   }
 }
-.alert_overlay {
+.overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
@@ -78,7 +70,7 @@
   z-index: 10000;
   animation: fade_in 0.2s ease-in-out;
 }
-.alert_modal {
+.modal {
   background: #ffffff;
   border-radius: 12px;
   min-width: 320px;
@@ -87,14 +79,14 @@
   animation: slide_up 0.3s ease-in-out;
   overflow: hidden;
 }
-.alert_modal_title {
+.title {
   font-size: 1.125rem;
   line-height: 1.5;
   font-weight: 600;
   color: #3b82f6;
   padding: 0.75rem 1.25rem 0.25rem;
 }
-.alert_modal_message {
+.message {
   font-size: 0.9375rem;
   font-weight: 400;
   line-height: 1.5;
@@ -102,22 +94,22 @@
   padding: 1.25rem;
   line-height: 1.75;
 }
-.alert_modal_actions {
+.actions {
   display: flex;
   gap: 0.5rem;
   align-items: center;
   padding: 0 1.25rem 1.25rem;
 }
-.alert_modal_actions_left {
+.actions_left {
   justify-content: flex-start;
 }
-.alert_modal_actions_center {
+.actions_center {
   justify-content: center;
 }
-.alert_modal_actions_right {
+.actions_right {
   justify-content: flex-end;
 }
-.alert_modal_button {
+.button {
   min-width: 80px;
   padding: 10px 24px;
   border-radius: 6px;
@@ -131,90 +123,118 @@
     box-shadow 0.2s ease-in-out,
     transform 0.2s ease-in-out;
 }
-.alert_modal_button:focus-visible {
+.button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.alert_modal_button:active:not(:disabled) {
+.button:active:not(:disabled) {
   transform: scale(0.98);
 }
-.alert_modal_button:disabled {
+.button:disabled {
   cursor: not-allowed;
   opacity: 0.6;
 }
-.alert_modal_button_cancel {
+.button_cancel {
   background: #ffffff;
   border-color: #e5e5e5;
   color: #1a1a1a;
 }
-.alert_modal_button_cancel:hover:not(:disabled) {
+.button_cancel:hover:not(:disabled) {
   background: #fafafa;
   border-color: rgba(0, 0, 0, 0.08);
 }
-.alert_modal_button_confirm {
+.button_confirm {
   color: #ffffff;
 }
-.alert_modal_info .alert_modal_title {
+.variant_info .title {
   color: #3b82f6;
 }
-.alert_modal_info .alert_modal_button_confirm {
+.variant_info .button_confirm {
   background: #3b82f6;
   border-color: #3b82f6;
 }
-.alert_modal_info .alert_modal_button_confirm:hover:not(:disabled) {
+.variant_info .button_confirm:hover:not(:disabled) {
   background: rgb(29.7434146341, 111.3414634146, 244.6565853659);
   border-color: rgb(29.7434146341, 111.3414634146, 244.6565853659);
 }
-.alert_modal_success .alert_modal_title {
+.variant_success .title {
   color: #10b981;
 }
-.alert_modal_success .alert_modal_button_confirm {
+.variant_success .button_confirm {
   background: #10b981;
   border-color: #10b981;
 }
-.alert_modal_success .alert_modal_button_confirm:hover:not(:disabled) {
+.variant_success .button_confirm:hover:not(:disabled) {
   background: rgb(13.5641791045, 156.8358208955, 109.3611940299);
   border-color: rgb(13.5641791045, 156.8358208955, 109.3611940299);
 }
-.alert_modal_warning .alert_modal_title {
+.variant_warning .title {
   color: #f59e0b;
 }
-.alert_modal_warning .alert_modal_button_confirm {
+.variant_warning .button_confirm {
   background: #f59e0b;
   border-color: #f59e0b;
 }
-.alert_modal_warning .alert_modal_button_confirm:hover:not(:disabled) {
+.variant_warning .button_confirm:hover:not(:disabled) {
   background: rgb(216.525984252, 139.3220472441, 8.874015748);
   border-color: rgb(216.525984252, 139.3220472441, 8.874015748);
 }
-.alert_modal_error .alert_modal_title {
+.variant_error .title {
   color: #ef4444;
 }
-.alert_modal_error .alert_modal_button_confirm {
+.variant_error .button_confirm {
   background: #ef4444;
   border-color: #ef4444;
 }
-.alert_modal_error .alert_modal_button_confirm:hover:not(:disabled) {
+.variant_error .button_confirm:hover:not(:disabled) {
   background: rgb(236.5881773399, 39.8118226601, 39.8118226601);
   border-color: rgb(236.5881773399, 39.8118226601, 39.8118226601);
 }
 
-/* src/ui/feedback/loading/style.scss */
-@keyframes loading_spin {
+/* src/ui/feedback/spinner/style.module.scss */
+@keyframes spinner_spin {
   to {
     transform: rotate(360deg);
   }
 }
-.loading {
+.spinner {
   display: inline-block;
   box-sizing: border-box;
   border-radius: 50%;
   border: 2px solid #e5e5e5;
   border-top-color: #000000;
-  animation: loading_spin 0.8s linear infinite;
+  animation: spinner_spin 0.8s linear infinite;
 }
 
-/* src/ui/general/button/style.scss */
+/* src/ui/feedback/top-loading/style.module.scss */
+.top_loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10001;
+  overflow: hidden;
+  background-color: transparent;
+}
+.bar {
+  height: 100%;
+  background-color: #000000;
+  transition: width 0.2s ease-in-out;
+}
+@keyframes indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+.indeterminate {
+  width: 30%;
+  animation: indeterminate 1.5s ease-in-out infinite;
+}
+
+/* src/ui/general/button/style.module.scss */
 .button {
   display: inline-flex;
   align-items: center;
@@ -234,64 +254,64 @@
   cursor: not-allowed;
   opacity: 0.6;
 }
-.button_size_sm {
+.size_sm {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.button_size_md {
+.size_md {
   padding: 0.75rem 1.25rem;
   font-size: 0.9375rem;
   line-height: 1.5;
 }
-.button_size_lg {
+.size_lg {
   padding: 1rem 1.5rem;
   font-size: 1rem;
   line-height: 1.5;
 }
-.button_variant_primary {
+.variant_primary {
   background: #000000;
   color: #ffffff;
 }
-.button_variant_primary:hover:not(:disabled) {
+.variant_primary:hover:not(:disabled) {
   background: #333333;
 }
-.button_variant_primary:active:not(:disabled) {
+.variant_primary:active:not(:disabled) {
   transform: scale(0.98);
 }
-.button_variant_secondary {
+.variant_secondary {
   background: transparent;
   border: 1px solid #e5e5e5;
   color: #1a1a1a;
 }
-.button_variant_secondary:hover:not(:disabled) {
+.variant_secondary:hover:not(:disabled) {
   background: #fafafa;
 }
-.button_variant_secondary:active:not(:disabled) {
+.variant_secondary:active:not(:disabled) {
   transform: scale(0.98);
 }
-.button_variant_ghost {
+.variant_ghost {
   background: transparent;
   color: #1a1a1a;
 }
-.button_variant_ghost:hover:not(:disabled) {
+.variant_ghost:hover:not(:disabled) {
   background: rgba(0, 0, 0, 0.05);
 }
-.button_variant_ghost:active:not(:disabled) {
+.variant_ghost:active:not(:disabled) {
   transform: scale(0.96);
 }
-.button_variant_danger {
+.variant_danger {
   background: #ef4444;
   color: #ffffff;
 }
-.button_variant_danger:hover:not(:disabled) {
+.variant_danger:hover:not(:disabled) {
   background: rgb(235.7842364532, 30.4157635468, 30.4157635468);
 }
-.button_variant_danger:active:not(:disabled) {
+.variant_danger:active:not(:disabled) {
   transform: scale(0.98);
 }
 
-/* src/ui/form/checkbox/style.scss */
+/* src/ui/form/checkbox/style.module.scss */
 .checkbox {
   display: inline-flex;
   align-items: center;
@@ -300,7 +320,7 @@
   user-select: none;
   position: relative;
 }
-.checkbox_input {
+.input {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -309,7 +329,7 @@
   clip-path: inset(50%);
   white-space: nowrap;
 }
-.checkbox_box {
+.box {
   width: 1.125rem;
   height: 1.125rem;
   box-sizing: border-box;
@@ -323,46 +343,46 @@
   display: inline-block;
   position: relative;
 }
-.checkbox_label {
+.label {
   font-size: 0.9375rem;
   line-height: 1.5;
   color: #1a1a1a;
 }
-.checkbox_size_sm .checkbox_box {
+.size_sm .box {
   width: 1rem;
   height: 1rem;
 }
-.checkbox_size_sm .checkbox_label {
+.size_sm .label {
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.checkbox_size_md .checkbox_box {
+.size_md .box {
   width: 1.125rem;
   height: 1.125rem;
 }
-.checkbox_size_lg .checkbox_box {
+.size_lg .box {
   width: 1.25rem;
   height: 1.25rem;
 }
-.checkbox_size_lg .checkbox_label {
+.size_lg .label {
   font-size: 1rem;
   line-height: 1.5;
 }
-.checkbox_input:focus-visible + .checkbox_box {
+.input:focus-visible + .box {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
   border-color: #000000;
 }
-.checkbox_input:disabled + .checkbox_box,
-.checkbox_input:disabled ~ .checkbox_label {
+.input:disabled + .box,
+.input:disabled ~ .label {
   opacity: 0.6;
   cursor: not-allowed;
 }
-.checkbox_input:checked + .checkbox_box,
-.checkbox_input:indeterminate + .checkbox_box {
+.input:checked + .box,
+.input:indeterminate + .box {
   background: #000000;
   border-color: #000000;
 }
-.checkbox_input:checked + .checkbox_box::after {
+.input:checked + .box::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -374,7 +394,7 @@
   border-left: 0;
   transform: translate(-50%, -58%) rotate(45deg);
 }
-.checkbox_input:indeterminate + .checkbox_box::after {
+.input:indeterminate + .box::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -386,19 +406,22 @@
   border-radius: 9999px;
 }
 
-/* src/ui/form/file/style.scss */
+/* src/ui/form/file/style.module.scss */
 .file_input {
   position: relative;
   display: inline-flex;
   align-items: center;
 }
-.file_input_control {
+.file_input:hover .label {
+  border-color: rgba(0, 0, 0, 0.08);
+}
+.control {
   position: absolute;
   inset: 0;
   opacity: 0;
   cursor: pointer;
 }
-.file_input_label {
+.label {
   border: 1px solid #e5e5e5;
   border-radius: 8px;
   background: #ffffff;
@@ -411,28 +434,25 @@
     border-color 0.2s ease-in-out,
     box-shadow 0.2s ease-in-out;
 }
-.file_input:hover .file_input_label {
-  border-color: rgba(0, 0, 0, 0.08);
-}
-.file_input_control:focus-visible + .file_input_label {
+.control:focus-visible + .label {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
   border-color: #000000;
 }
-.file_input_disabled {
+.disabled {
   cursor: not-allowed;
 }
-.file_input_disabled .file_input_control {
+.disabled .control {
   cursor: not-allowed;
 }
-.file_input_disabled .file_input_label {
+.disabled .label {
   opacity: 0.6;
   cursor: not-allowed;
 }
-.file_input_disabled:hover .file_input_label {
+.disabled:hover .label {
   border-color: #e5e5e5;
 }
 
-/* src/ui/form/radio/style.scss */
+/* src/ui/form/radio/style.module.scss */
 .radio {
   position: relative;
   display: inline-flex;
@@ -441,14 +461,14 @@
   cursor: pointer;
   user-select: none;
 }
-.radio_input {
+.input {
   position: absolute;
   inset: 0;
   opacity: 0;
   cursor: pointer;
   margin: 0;
 }
-.radio_dot {
+.dot {
   width: 1rem;
   height: 1rem;
   box-sizing: border-box;
@@ -462,39 +482,39 @@
   position: relative;
   display: inline-block;
 }
-.radio_label {
+.label {
   font-size: 0.9375rem;
   line-height: 1.5;
   color: #1a1a1a;
 }
-.radio_size_sm .radio_dot {
+.size_sm .dot {
   width: 1rem;
   height: 1rem;
 }
-.radio_size_sm .radio_label {
+.size_sm .label {
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.radio_size_md .radio_dot {
+.size_md .dot {
   width: 1.125rem;
   height: 1.125rem;
 }
-.radio_size_lg .radio_dot {
+.size_lg .dot {
   width: 1.25rem;
   height: 1.25rem;
 }
-.radio_size_lg .radio_label {
+.size_lg .label {
   font-size: 1rem;
   line-height: 1.5;
 }
-.radio_input:focus-visible + .radio_dot {
+.input:focus-visible + .dot {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
   border-color: #000000;
 }
-.radio_input:checked + .radio_dot {
+.input:checked + .dot {
   border-color: #000000;
 }
-.radio_input:checked + .radio_dot::after {
+.input:checked + .dot::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -505,13 +525,13 @@
   background: #000000;
   border-radius: 9999px;
 }
-.radio_input:disabled + .radio_dot,
-.radio_input:disabled ~ .radio_label {
+.input:disabled + .dot,
+.input:disabled ~ .label {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
-/* src/ui/general/select/style.scss */
+/* src/ui/general/select/style.module.scss */
 .select {
   position: relative;
   display: inline-flex;
@@ -520,13 +540,13 @@
   gap: 0.25rem;
   font-family: "Pretendard", sans-serif;
 }
-.select_label {
+.label {
   font-size: 0.875rem;
   line-height: 1.5;
   font-weight: 500;
   color: #1a1a1a;
 }
-.select_control {
+.control {
   width: 100%;
   display: inline-flex;
   align-items: center;
@@ -543,64 +563,63 @@
   font-size: 0.9375rem;
   line-height: 1.5;
 }
-.select_control:disabled,
-.select_control.is_disabled {
+.control:disabled,
+.control.is_disabled {
   cursor: not-allowed;
   opacity: 0.7;
   background: #fafafa;
   color: #999999;
 }
-.select_control_variant_outline {
+.variant_outline {
   border: 1px solid #e5e5e5;
 }
-.select_control_variant_outline:hover:not(.is_disabled) {
+.variant_outline:hover:not(.is_disabled) {
   border-color: rgba(0, 0, 0, 0.08);
 }
-.select_control_variant_outline.is_open {
+.variant_outline.is_open {
   border-color: #000000;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.select_control_variant_filled {
+.variant_filled {
   background: #fafafa;
   border: 1px solid transparent;
 }
-.select_control_variant_filled:hover:not(.is_disabled) {
+.variant_filled:hover:not(.is_disabled) {
   background: rgb(253.5, 253.5, 253.5);
 }
-.select_control_variant_filled.is_open {
+.variant_filled.is_open {
   background: #ffffff;
   border-color: #000000;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.select_control_variant_ghost {
+.variant_ghost {
   background: transparent;
   border: 1px solid transparent;
 }
-.select_control_variant_ghost:hover:not(.is_disabled) {
+.variant_ghost:hover:not(.is_disabled) {
   background: rgba(0, 0, 0, 0.03);
 }
-.select_control_variant_ghost.is_open {
+.variant_ghost.is_open {
   background: #ffffff;
   border-color: #000000;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.select_control_size_sm {
+.size_sm {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.select_control_size_md {
+.size_md {
   padding: 0.75rem 1.25rem;
   font-size: 0.9375rem;
   line-height: 1.5;
 }
-.select_control_size_lg {
+.size_lg {
   padding: 1rem 1.5rem;
   font-size: 1rem;
   line-height: 1.5;
 }
-.select_value,
-.select_placeholder {
+.value {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
@@ -611,16 +630,25 @@
   font-weight: 400;
   line-height: 1.5;
 }
-.select_placeholder {
+.placeholder {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: start;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  line-height: 1.5;
   color: #999999;
 }
-.select_icon {
+.icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #666666;
 }
-.select_list {
+.list {
   position: absolute;
   z-index: 10000;
   top: 100%;
@@ -638,7 +666,7 @@
   overflow-x: hidden;
   padding: 0.25rem 0;
 }
-.select_option {
+.option {
   width: 100%;
   box-sizing: border-box;
   display: grid;
@@ -653,25 +681,25 @@
   font-weight: 400;
   line-height: 1.5;
 }
-.select_option > span:first-child {
+.option > span:first-child {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.select_option:hover,
-.select_option.is_active {
+.option:hover,
+.option.is_active {
   background: #fafafa;
 }
-.select_option.is_selected {
+.option.is_selected {
   font-weight: 500;
 }
-.select_option.is_disabled {
+.option.is_disabled {
   cursor: not-allowed;
   color: #999999;
 }
 
-/* src/ui/form/switch/style.scss */
+/* src/ui/form/switch/style.module.scss */
 .switch {
   position: relative;
   display: inline-flex;
@@ -684,7 +712,7 @@
   transition: background 0.2s ease-in-out;
   cursor: pointer;
 }
-.switch_thumb {
+.thumb {
   width: 18px;
   height: 18px;
   background: #ffffff;
@@ -692,79 +720,79 @@
   transition: transform 0.2s ease-in-out;
   transform: translateX(0);
 }
-.switch_on {
+.on {
   background: #000000;
 }
-.switch_on .switch_thumb {
+.on .thumb {
   transform: translateX(18px);
 }
-.switch_size_sm {
+.size_sm {
   width: 34px;
   height: 18px;
   padding: 2px;
 }
-.switch_size_sm .switch_thumb {
+.size_sm .thumb {
   width: 14px;
   height: 14px;
 }
-.switch_size_sm.switch_on .switch_thumb {
+.size_sm.on .thumb {
   transform: translateX(16px);
 }
-.switch_size_md {
+.size_md {
   width: 40px;
   height: 22px;
 }
-.switch_size_lg {
+.size_lg {
   width: 48px;
   height: 26px;
   padding: 2px;
 }
-.switch_size_lg .switch_thumb {
+.size_lg .thumb {
   width: 22px;
   height: 22px;
 }
-.switch_size_lg.switch_on .switch_thumb {
+.size_lg.on .thumb {
   transform: translateX(22px);
 }
-.switch_disabled {
+.disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
-/* src/ui/form/textfield/style.scss */
+/* src/ui/form/textfield/style.module.scss */
 .text_field {
   display: flex;
   flex-direction: column;
 }
-.text_field_full_width {
+.full_width {
   width: 100%;
 }
-.text_field_label {
+.label {
   margin-bottom: 0.25rem;
   color: #1a1a1a;
   font-size: 0.875rem;
   line-height: 1.5;
   font-weight: 500;
 }
-.text_field_wrap {
+.wrap {
   position: relative;
   display: inline-flex;
   width: 100%;
   align-items: center;
 }
-.text_field_helper {
+.helper {
   margin-top: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.5;
   color: #666666;
 }
-.text_field_helper_error {
+.helper_error {
   color: #ef4444;
 }
-.text_field_helper_success {
+.helper_success {
   color: #10b981;
 }
-.text_field_icon {
+.icon {
   position: absolute;
   display: inline-flex;
   align-items: center;
@@ -773,13 +801,13 @@
   height: 1.25rem;
   color: #666666;
 }
-.text_field_icon_left {
+.icon_left {
   left: 0.75rem;
 }
-.text_field_icon_right {
+.icon_right {
   right: 0.75rem;
 }
-.text_field_input {
+.input {
   width: 100%;
   border-radius: 8px;
   transition:
@@ -791,102 +819,88 @@
   color: #1a1a1a;
   background: #ffffff;
 }
-.text_field_input::placeholder {
+.input::placeholder {
   color: #999999;
 }
-.text_field_input:disabled {
+.input:disabled {
   cursor: not-allowed;
   background: #fafafa;
   color: #999999;
   opacity: 0.7;
 }
-.text_field_variant_outline {
+.variant_outline {
   border: 1px solid #e5e5e5;
 }
-.text_field_variant_outline:hover:not(:disabled) {
+.variant_outline:hover:not(:disabled) {
   border-color: rgba(0, 0, 0, 0.08);
 }
-.text_field_variant_outline:focus-visible {
+.variant_outline:focus-visible {
   outline: none;
   border-color: #000000;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.text_field_variant_filled {
+.variant_filled {
   background: #fafafa;
   border: 1px solid transparent;
 }
-.text_field_variant_filled:hover:not(:disabled) {
+.variant_filled:hover:not(:disabled) {
   background: rgb(253.5, 253.5, 253.5);
 }
-.text_field_variant_filled:focus-visible {
+.variant_filled:focus-visible {
   outline: none;
   border-color: #000000;
   background: #ffffff;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.text_field_variant_ghost {
+.variant_ghost {
   background: transparent;
   border: 1px solid transparent;
 }
-.text_field_variant_ghost:hover:not(:disabled) {
+.variant_ghost:hover:not(:disabled) {
   background: rgba(0, 0, 0, 0.03);
 }
-.text_field_variant_ghost:focus-visible {
+.variant_ghost:focus-visible {
   outline: none;
   border-color: #000000;
   background: #ffffff;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.text_field_size_sm {
+.size_sm {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.text_field_size_md {
+.size_md {
   padding: 0.75rem 1.25rem;
   font-size: 0.9375rem;
   line-height: 1.5;
 }
-.text_field_size_lg {
+.size_lg {
   padding: 1rem 1.5rem;
   font-size: 1rem;
   line-height: 1.5;
 }
-.text_field_with_left {
+.with_left {
   padding-left: calc(1.25rem + 1.25rem);
 }
-.text_field_with_right {
+.with_right {
   padding-right: calc(1.25rem + 1.25rem);
 }
-.text_field_error {
+.error {
   border-color: #ef4444 !important;
   box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
 }
-.text_field_success {
+.success {
   border-color: #10b981 !important;
   box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
 }
 
-/* src/ui/form/date-picker/style.scss */
+/* src/ui/form/date-picker/style.module.scss */
 .date_picker {
   display: flex;
+  flex-direction: column;
   gap: 0.25rem;
 }
-.date_picker_label {
-  color: #1a1a1a;
-  margin-bottom: 0.25rem;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-.date_picker_required {
-  margin-left: 0.25rem;
-  color: #ef4444;
-}
-.date_picker_fields {
-  display: flex;
-  gap: 0.5rem;
-}
 .date_picker select {
   min-width: 88px;
   height: 44px;
@@ -936,30 +950,47 @@
 .date_picker select option {
   color: #1a1a1a;
 }
-.date_picker_full {
+@media (max-width: 480px) {
+  .date_picker select {
+    flex: 1;
+    min-width: 0;
+  }
+}
+.label {
+  color: #1a1a1a;
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.required {
+  margin-left: 0.25rem;
+  color: #ef4444;
+}
+.fields {
+  display: flex;
+  gap: 0.5rem;
+}
+@media (max-width: 480px) {
+  .fields {
+    gap: 0.25rem;
+  }
+}
+.full {
   width: 100%;
 }
-.date_picker_full .date_picker_fields {
+.full .fields {
   width: 100%;
 }
-.date_picker_full select {
+.full select {
   flex: 1;
   min-width: 0;
 }
-.date_picker_disabled .date_picker_label {
+.disabled .label {
   color: #9ca3af;
 }
-@media (max-width: 480px) {
-  .date_picker_fields {
-    gap: 0.25rem;
-  }
-  .date_picker select {
-    flex: 1;
-    min-width: 0;
-  }
-}
 
-/* src/ui/navigation/pagination/style.scss */
+/* src/ui/navigation/pagination/style.module.scss */
 .pagination {
   display: flex;
   align-items: center;
@@ -967,7 +998,7 @@
   gap: 0.5rem;
   margin-top: 1.75rem;
 }
-.pagination_item {
+.item {
   border: 1px solid #e5e5e5;
   background: #ffffff;
   border-radius: 8px;
@@ -978,23 +1009,23 @@
   color: #1a1a1a;
   transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
 }
-.pagination_item:hover:not(:disabled) {
+.item:hover:not(:disabled) {
   background: #fafafa;
 }
-.pagination_item:disabled {
+.item:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.pagination_item:focus-visible {
+.item:focus-visible {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
   border-color: #000000;
 }
-.pagination_pages {
+.pages {
   display: flex;
   align-items: center;
   gap: 6px;
 }
-.pagination_pageButton {
+.pageButton {
   border: 0;
   background: transparent;
   min-width: 36px;
@@ -1005,18 +1036,18 @@
   color: #666666;
   transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
 }
-.pagination_pageButton:hover {
+.pageButton:hover {
   background: #fafafa;
   color: #1a1a1a;
 }
-.pagination_pageButton:focus-visible {
+.pageButton:focus-visible {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
 }
-.pagination_pageButton.is-active {
+.active {
   color: #1a1a1a;
   font-weight: 600;
 }
-.pagination_ellipsis {
+.ellipsis {
   min-width: 20px;
   text-align: center;
   font-size: 0.875rem;
@@ -1024,7 +1055,7 @@
   color: #999999;
 }
 
-/* src/ui/overlay/modal/style.scss */
+/* src/ui/overlay/modal/style.module.scss */
 .modal {
   position: fixed;
   inset: 0;
@@ -1033,14 +1064,14 @@
   background: rgba(0, 0, 0, 0.5);
   z-index: 10000;
 }
-.modal_panel {
+.panel {
   background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
   max-width: calc(100% - 32px);
   overflow: hidden;
 }
-.modal_header {
+.header {
   padding: 1rem;
   border-bottom: 1px solid #e5e5e5;
   color: #1a1a1a;
@@ -1048,6 +1079,6 @@
   font-weight: 600;
   line-height: 1.3;
 }
-.modal_body {
+.body {
   padding: 1rem;
 }