@bigtablet/design-system 1.14.0 → 1.14.1

package/dist/index.css

@@ -1,48 +1,48 @@
-/* src/ui/display/card/style.module.scss */
+/* src/ui/display/card/style.scss */
 .card {
   background: #ffffff;
   border-radius: 12px;
 }
-.bordered {
+.card_bordered {
   border: 1px solid #e5e5e5;
 }
-.shadow_none {
+.card_shadow_none {
   box-shadow: none;
 }
-.shadow_sm {
+.card_shadow_sm {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
 }
-.shadow_md {
+.card_shadow_md {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
 }
-.shadow_lg {
+.card_shadow_lg {
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
 }
-.p_none {
+.card_p_none {
   padding: 0;
 }
-.p_sm {
+.card_p_sm {
   padding: 0.5rem;
 }
-.p_md {
+.card_p_md {
   padding: 1rem;
 }
-.p_lg {
+.card_p_lg {
   padding: 1.5rem;
 }
-.title {
+.card_title {
   font-size: 1.25rem;
   font-weight: 600;
   line-height: 1.3;
   margin-bottom: 0.75rem;
   color: #1f2937;
 }
-.body {
+.card_body {
   width: 100%;
 }
 
-/* src/ui/feedback/alert/style.module.scss */
-@keyframes fade_in {
+/* src/ui/feedback/alert/style.scss */
+@keyframes alert_fade_in {
   from {
     opacity: 0;
   }
@@ -50,7 +50,7 @@
     opacity: 1;
   }
 }
-@keyframes slide_up {
+@keyframes alert_slide_up {
   from {
     opacity: 0;
     transform: translateY(20px);
@@ -60,7 +60,7 @@
     transform: translateY(0);
   }
 }
-.overlay {
+.alert_overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
@@ -68,25 +68,25 @@
   align-items: center;
   justify-content: center;
   z-index: 10000;
-  animation: fade_in 0.2s ease-in-out;
+  animation: alert_fade_in 0.2s ease-in-out;
 }
-.modal {
+.alert_modal {
   background: #ffffff;
   border-radius: 12px;
   min-width: 320px;
   max-width: 480px;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  animation: slide_up 0.3s ease-in-out;
+  animation: alert_slide_up 0.3s ease-in-out;
   overflow: hidden;
 }
-.title {
+.alert_title {
   font-size: 1.125rem;
   line-height: 1.5;
   font-weight: 600;
   color: #3b82f6;
   padding: 0.75rem 1.25rem 0.25rem;
 }
-.message {
+.alert_message {
   font-size: 0.9375rem;
   font-weight: 400;
   line-height: 1.5;
@@ -94,22 +94,22 @@
   padding: 1.25rem;
   line-height: 1.75;
 }
-.actions {
+.alert_actions {
   display: flex;
   gap: 0.5rem;
   align-items: center;
   padding: 0 1.25rem 1.25rem;
 }
-.actions_left {
+.alert_actions_left {
   justify-content: flex-start;
 }
-.actions_center {
+.alert_actions_center {
   justify-content: center;
 }
-.actions_right {
+.alert_actions_right {
   justify-content: flex-end;
 }
-.button {
+.alert_button {
   min-width: 80px;
   padding: 10px 24px;
   border-radius: 6px;
@@ -123,75 +123,75 @@
     box-shadow 0.2s ease-in-out,
     transform 0.2s ease-in-out;
 }
-.button:focus-visible {
+.alert_button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.button:active:not(:disabled) {
+.alert_button:active:not(:disabled) {
   transform: scale(0.98);
 }
-.button:disabled {
+.alert_button:disabled {
   cursor: not-allowed;
   opacity: 0.6;
 }
-.button_cancel {
+.alert_button_cancel {
   background: #ffffff;
   border-color: #e5e5e5;
   color: #1a1a1a;
 }
-.button_cancel:hover:not(:disabled) {
+.alert_button_cancel:hover:not(:disabled) {
   background: #fafafa;
   border-color: rgba(0, 0, 0, 0.08);
 }
-.button_confirm {
+.alert_button_confirm {
   color: #ffffff;
 }
-.variant_info .title {
+.alert_variant_info .alert_title {
   color: #3b82f6;
 }
-.variant_info .button_confirm {
+.alert_variant_info .alert_button_confirm {
   background: #3b82f6;
   border-color: #3b82f6;
 }
-.variant_info .button_confirm:hover:not(:disabled) {
+.alert_variant_info .alert_button_confirm:hover:not(:disabled) {
   background: rgb(29.7434146341, 111.3414634146, 244.6565853659);
   border-color: rgb(29.7434146341, 111.3414634146, 244.6565853659);
 }
-.variant_success .title {
+.alert_variant_success .alert_title {
   color: #10b981;
 }
-.variant_success .button_confirm {
+.alert_variant_success .alert_button_confirm {
   background: #10b981;
   border-color: #10b981;
 }
-.variant_success .button_confirm:hover:not(:disabled) {
+.alert_variant_success .alert_button_confirm:hover:not(:disabled) {
   background: rgb(13.5641791045, 156.8358208955, 109.3611940299);
   border-color: rgb(13.5641791045, 156.8358208955, 109.3611940299);
 }
-.variant_warning .title {
+.alert_variant_warning .alert_title {
   color: #f59e0b;
 }
-.variant_warning .button_confirm {
+.alert_variant_warning .alert_button_confirm {
   background: #f59e0b;
   border-color: #f59e0b;
 }
-.variant_warning .button_confirm:hover:not(:disabled) {
+.alert_variant_warning .alert_button_confirm:hover:not(:disabled) {
   background: rgb(216.525984252, 139.3220472441, 8.874015748);
   border-color: rgb(216.525984252, 139.3220472441, 8.874015748);
 }
-.variant_error .title {
+.alert_variant_error .alert_title {
   color: #ef4444;
 }
-.variant_error .button_confirm {
+.alert_variant_error .alert_button_confirm {
   background: #ef4444;
   border-color: #ef4444;
 }
-.variant_error .button_confirm:hover:not(:disabled) {
+.alert_variant_error .alert_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/spinner/style.module.scss */
+/* src/ui/feedback/spinner/style.scss */
 @keyframes spinner_spin {
   to {
     transform: rotate(360deg);
@@ -206,7 +206,7 @@
   animation: spinner_spin 0.8s linear infinite;
 }
 
-/* src/ui/feedback/top-loading/style.module.scss */
+/* src/ui/feedback/top-loading/style.scss */
 .top_loading {
   position: fixed;
   top: 0;
@@ -216,12 +216,16 @@
   overflow: hidden;
   background-color: transparent;
 }
-.bar {
+.top_loading_bar {
   height: 100%;
   background-color: #000000;
   transition: width 0.2s ease-in-out;
 }
-@keyframes indeterminate {
+.top_loading_indeterminate {
+  width: 30%;
+  animation: top_loading_indeterminate 1.5s ease-in-out infinite;
+}
+@keyframes top_loading_indeterminate {
   0% {
     transform: translateX(-100%);
   }
@@ -229,12 +233,8 @@
     transform: translateX(400%);
   }
 }
-.indeterminate {
-  width: 30%;
-  animation: indeterminate 1.5s ease-in-out infinite;
-}
 
-/* src/ui/general/button/style.module.scss */
+/* src/ui/general/button/style.scss */
 .button {
   display: inline-flex;
   align-items: center;
@@ -254,64 +254,64 @@
   cursor: not-allowed;
   opacity: 0.6;
 }
-.size_sm {
+.button_size_sm {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.size_md {
+.button_size_md {
   padding: 0.75rem 1.25rem;
   font-size: 0.9375rem;
   line-height: 1.5;
 }
-.size_lg {
+.button_size_lg {
   padding: 1rem 1.5rem;
   font-size: 1rem;
   line-height: 1.5;
 }
-.variant_primary {
+.button_variant_primary {
   background: #000000;
   color: #ffffff;
 }
-.variant_primary:hover:not(:disabled) {
+.button_variant_primary:hover:not(:disabled) {
   background: #333333;
 }
-.variant_primary:active:not(:disabled) {
+.button_variant_primary:active:not(:disabled) {
   transform: scale(0.98);
 }
-.variant_secondary {
+.button_variant_secondary {
   background: transparent;
   border: 1px solid #e5e5e5;
   color: #1a1a1a;
 }
-.variant_secondary:hover:not(:disabled) {
+.button_variant_secondary:hover:not(:disabled) {
   background: #fafafa;
 }
-.variant_secondary:active:not(:disabled) {
+.button_variant_secondary:active:not(:disabled) {
   transform: scale(0.98);
 }
-.variant_ghost {
+.button_variant_ghost {
   background: transparent;
   color: #1a1a1a;
 }
-.variant_ghost:hover:not(:disabled) {
+.button_variant_ghost:hover:not(:disabled) {
   background: rgba(0, 0, 0, 0.05);
 }
-.variant_ghost:active:not(:disabled) {
+.button_variant_ghost:active:not(:disabled) {
   transform: scale(0.96);
 }
-.variant_danger {
+.button_variant_danger {
   background: #ef4444;
   color: #ffffff;
 }
-.variant_danger:hover:not(:disabled) {
+.button_variant_danger:hover:not(:disabled) {
   background: rgb(235.7842364532, 30.4157635468, 30.4157635468);
 }
-.variant_danger:active:not(:disabled) {
+.button_variant_danger:active:not(:disabled) {
   transform: scale(0.98);
 }
 
-/* src/ui/form/checkbox/style.module.scss */
+/* src/ui/form/checkbox/style.scss */
 .checkbox {
   display: inline-flex;
   align-items: center;
@@ -320,7 +320,7 @@
   user-select: none;
   position: relative;
 }
-.input {
+.checkbox_input {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -329,7 +329,7 @@
   clip-path: inset(50%);
   white-space: nowrap;
 }
-.box {
+.checkbox_box {
   width: 1.125rem;
   height: 1.125rem;
   box-sizing: border-box;
@@ -343,46 +343,46 @@
   display: inline-block;
   position: relative;
 }
-.label {
+.checkbox_label {
   font-size: 0.9375rem;
   line-height: 1.5;
   color: #1a1a1a;
 }
-.size_sm .box {
+.checkbox_size_sm .checkbox_box {
   width: 1rem;
   height: 1rem;
 }
-.size_sm .label {
+.checkbox_size_sm .checkbox_label {
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.size_md .box {
+.checkbox_size_md .checkbox_box {
   width: 1.125rem;
   height: 1.125rem;
 }
-.size_lg .box {
+.checkbox_size_lg .checkbox_box {
   width: 1.25rem;
   height: 1.25rem;
 }
-.size_lg .label {
+.checkbox_size_lg .checkbox_label {
   font-size: 1rem;
   line-height: 1.5;
 }
-.input:focus-visible + .box {
+.checkbox_input:focus-visible + .checkbox_box {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
   border-color: #000000;
 }
-.input:disabled + .box,
-.input:disabled ~ .label {
+.checkbox_input:disabled + .checkbox_box,
+.checkbox_input:disabled ~ .checkbox_label {
   opacity: 0.6;
   cursor: not-allowed;
 }
-.input:checked + .box,
-.input:indeterminate + .box {
+.checkbox_input:checked + .checkbox_box,
+.checkbox_input:indeterminate + .checkbox_box {
   background: #000000;
   border-color: #000000;
 }
-.input:checked + .box::after {
+.checkbox_input:checked + .checkbox_box::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -394,7 +394,7 @@
   border-left: 0;
   transform: translate(-50%, -58%) rotate(45deg);
 }
-.input:indeterminate + .box::after {
+.checkbox_input:indeterminate + .checkbox_box::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -406,22 +406,22 @@
   border-radius: 9999px;
 }
 
-/* src/ui/form/file/style.module.scss */
+/* src/ui/form/file/style.scss */
 .file_input {
   position: relative;
   display: inline-flex;
   align-items: center;
 }
-.file_input:hover .label {
+.file_input:hover .file_input_label {
   border-color: rgba(0, 0, 0, 0.08);
 }
-.control {
+.file_input_control {
   position: absolute;
   inset: 0;
   opacity: 0;
   cursor: pointer;
 }
-.label {
+.file_input_label {
   border: 1px solid #e5e5e5;
   border-radius: 8px;
   background: #ffffff;
@@ -434,25 +434,25 @@
     border-color 0.2s ease-in-out,
     box-shadow 0.2s ease-in-out;
 }
-.control:focus-visible + .label {
+.file_input_control:focus-visible + .file_input_label {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
   border-color: #000000;
 }
-.disabled {
+.file_input_disabled {
   cursor: not-allowed;
 }
-.disabled .control {
+.file_input_disabled .file_input_control {
   cursor: not-allowed;
 }
-.disabled .label {
+.file_input_disabled .file_input_label {
   opacity: 0.6;
   cursor: not-allowed;
 }
-.disabled:hover .label {
+.file_input_disabled:hover .file_input_label {
   border-color: #e5e5e5;
 }
 
-/* src/ui/form/radio/style.module.scss */
+/* src/ui/form/radio/style.scss */
 .radio {
   position: relative;
   display: inline-flex;
@@ -461,14 +461,14 @@
   cursor: pointer;
   user-select: none;
 }
-.input {
+.radio_input {
   position: absolute;
   inset: 0;
   opacity: 0;
   cursor: pointer;
   margin: 0;
 }
-.dot {
+.radio_dot {
   width: 1rem;
   height: 1rem;
   box-sizing: border-box;
@@ -482,39 +482,39 @@
   position: relative;
   display: inline-block;
 }
-.label {
+.radio_label {
   font-size: 0.9375rem;
   line-height: 1.5;
   color: #1a1a1a;
 }
-.size_sm .dot {
+.radio_size_sm .radio_dot {
   width: 1rem;
   height: 1rem;
 }
-.size_sm .label {
+.radio_size_sm .radio_label {
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.size_md .dot {
+.radio_size_md .radio_dot {
   width: 1.125rem;
   height: 1.125rem;
 }
-.size_lg .dot {
+.radio_size_lg .radio_dot {
   width: 1.25rem;
   height: 1.25rem;
 }
-.size_lg .label {
+.radio_size_lg .radio_label {
   font-size: 1rem;
   line-height: 1.5;
 }
-.input:focus-visible + .dot {
+.radio_input:focus-visible + .radio_dot {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
   border-color: #000000;
 }
-.input:checked + .dot {
+.radio_input:checked + .radio_dot {
   border-color: #000000;
 }
-.input:checked + .dot::after {
+.radio_input:checked + .radio_dot::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -525,13 +525,13 @@
   background: #000000;
   border-radius: 9999px;
 }
-.input:disabled + .dot,
-.input:disabled ~ .label {
+.radio_input:disabled + .radio_dot,
+.radio_input:disabled ~ .radio_label {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
-/* src/ui/general/select/style.module.scss */
+/* src/ui/general/select/style.scss */
 .select {
   position: relative;
   display: inline-flex;
@@ -540,13 +540,13 @@
   gap: 0.25rem;
   font-family: "Pretendard", sans-serif;
 }
-.label {
+.select_label {
   font-size: 0.875rem;
   line-height: 1.5;
   font-weight: 500;
   color: #1a1a1a;
 }
-.control {
+.select_control {
   width: 100%;
   display: inline-flex;
   align-items: center;
@@ -563,63 +563,63 @@
   font-size: 0.9375rem;
   line-height: 1.5;
 }
-.control:disabled,
-.control.is_disabled {
+.select_control:disabled,
+.select_control.is_disabled {
   cursor: not-allowed;
   opacity: 0.7;
   background: #fafafa;
   color: #999999;
 }
-.variant_outline {
+.select_variant_outline {
   border: 1px solid #e5e5e5;
 }
-.variant_outline:hover:not(.is_disabled) {
+.select_variant_outline:hover:not(.is_disabled) {
   border-color: rgba(0, 0, 0, 0.08);
 }
-.variant_outline.is_open {
+.select_variant_outline.is_open {
   border-color: #000000;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.variant_filled {
+.select_variant_filled {
   background: #fafafa;
   border: 1px solid transparent;
 }
-.variant_filled:hover:not(.is_disabled) {
+.select_variant_filled:hover:not(.is_disabled) {
   background: rgb(253.5, 253.5, 253.5);
 }
-.variant_filled.is_open {
+.select_variant_filled.is_open {
   background: #ffffff;
   border-color: #000000;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.variant_ghost {
+.select_variant_ghost {
   background: transparent;
   border: 1px solid transparent;
 }
-.variant_ghost:hover:not(.is_disabled) {
+.select_variant_ghost:hover:not(.is_disabled) {
   background: rgba(0, 0, 0, 0.03);
 }
-.variant_ghost.is_open {
+.select_variant_ghost.is_open {
   background: #ffffff;
   border-color: #000000;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.size_sm {
+.select_size_sm {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.size_md {
+.select_size_md {
   padding: 0.75rem 1.25rem;
   font-size: 0.9375rem;
   line-height: 1.5;
 }
-.size_lg {
+.select_size_lg {
   padding: 1rem 1.5rem;
   font-size: 1rem;
   line-height: 1.5;
 }
-.value {
+.select_value {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
@@ -630,7 +630,7 @@
   font-weight: 400;
   line-height: 1.5;
 }
-.placeholder {
+.select_placeholder {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
@@ -642,13 +642,13 @@
   line-height: 1.5;
   color: #999999;
 }
-.icon {
+.select_icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #666666;
 }
-.list {
+.select_list {
   position: absolute;
   z-index: 10000;
   top: 100%;
@@ -666,7 +666,7 @@
   overflow-x: hidden;
   padding: 0.25rem 0;
 }
-.option {
+.select_option {
   width: 100%;
   box-sizing: border-box;
   display: grid;
@@ -681,25 +681,25 @@
   font-weight: 400;
   line-height: 1.5;
 }
-.option > span:first-child {
+.select_option > span:first-child {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.option:hover,
-.option.is_active {
+.select_option:hover,
+.select_option.is_active {
   background: #fafafa;
 }
-.option.is_selected {
+.select_option.is_selected {
   font-weight: 500;
 }
-.option.is_disabled {
+.select_option.is_disabled {
   cursor: not-allowed;
   color: #999999;
 }
 
-/* src/ui/form/switch/style.module.scss */
+/* src/ui/form/switch/style.scss */
 .switch {
   position: relative;
   display: inline-flex;
@@ -712,7 +712,7 @@
   transition: background 0.2s ease-in-out;
   cursor: pointer;
 }
-.thumb {
+.switch_thumb {
   width: 18px;
   height: 18px;
   background: #ffffff;
@@ -720,79 +720,79 @@
   transition: transform 0.2s ease-in-out;
   transform: translateX(0);
 }
-.on {
+.switch_on {
   background: #000000;
 }
-.on .thumb {
+.switch_on .switch_thumb {
   transform: translateX(18px);
 }
-.size_sm {
+.switch_size_sm {
   width: 34px;
   height: 18px;
   padding: 2px;
 }
-.size_sm .thumb {
+.switch_size_sm .switch_thumb {
   width: 14px;
   height: 14px;
 }
-.size_sm.on .thumb {
+.switch_size_sm.switch_on .switch_thumb {
   transform: translateX(16px);
 }
-.size_md {
+.switch_size_md {
   width: 40px;
   height: 22px;
 }
-.size_lg {
+.switch_size_lg {
   width: 48px;
   height: 26px;
   padding: 2px;
 }
-.size_lg .thumb {
+.switch_size_lg .switch_thumb {
   width: 22px;
   height: 22px;
 }
-.size_lg.on .thumb {
+.switch_size_lg.switch_on .switch_thumb {
   transform: translateX(22px);
 }
-.disabled {
+.switch_disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
-/* src/ui/form/textfield/style.module.scss */
+/* src/ui/form/textfield/style.scss */
 .text_field {
   display: flex;
   flex-direction: column;
 }
-.full_width {
+.text_field_full_width {
   width: 100%;
 }
-.label {
+.text_field_label {
   margin-bottom: 0.25rem;
   color: #1a1a1a;
   font-size: 0.875rem;
   line-height: 1.5;
   font-weight: 500;
 }
-.wrap {
+.text_field_wrap {
   position: relative;
   display: inline-flex;
   width: 100%;
   align-items: center;
 }
-.helper {
+.text_field_helper {
   margin-top: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.5;
   color: #666666;
 }
-.helper_error {
+.text_field_helper_error {
   color: #ef4444;
 }
-.helper_success {
+.text_field_helper_success {
   color: #10b981;
 }
-.icon {
+.text_field_icon {
   position: absolute;
   display: inline-flex;
   align-items: center;
@@ -801,13 +801,13 @@
   height: 1.25rem;
   color: #666666;
 }
-.icon_left {
+.text_field_icon_left {
   left: 0.75rem;
 }
-.icon_right {
+.text_field_icon_right {
   right: 0.75rem;
 }
-.input {
+.text_field_input {
   width: 100%;
   border-radius: 8px;
   transition:
@@ -819,83 +819,83 @@
   color: #1a1a1a;
   background: #ffffff;
 }
-.input::placeholder {
+.text_field_input::placeholder {
   color: #999999;
 }
-.input:disabled {
+.text_field_input:disabled {
   cursor: not-allowed;
   background: #fafafa;
   color: #999999;
   opacity: 0.7;
 }
-.variant_outline {
+.text_field_variant_outline {
   border: 1px solid #e5e5e5;
 }
-.variant_outline:hover:not(:disabled) {
+.text_field_variant_outline:hover:not(:disabled) {
   border-color: rgba(0, 0, 0, 0.08);
 }
-.variant_outline:focus-visible {
+.text_field_variant_outline:focus-visible {
   outline: none;
   border-color: #000000;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.variant_filled {
+.text_field_variant_filled {
   background: #fafafa;
   border: 1px solid transparent;
 }
-.variant_filled:hover:not(:disabled) {
+.text_field_variant_filled:hover:not(:disabled) {
   background: rgb(253.5, 253.5, 253.5);
 }
-.variant_filled:focus-visible {
+.text_field_variant_filled:focus-visible {
   outline: none;
   border-color: #000000;
   background: #ffffff;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.variant_ghost {
+.text_field_variant_ghost {
   background: transparent;
   border: 1px solid transparent;
 }
-.variant_ghost:hover:not(:disabled) {
+.text_field_variant_ghost:hover:not(:disabled) {
   background: rgba(0, 0, 0, 0.03);
 }
-.variant_ghost:focus-visible {
+.text_field_variant_ghost:focus-visible {
   outline: none;
   border-color: #000000;
   background: #ffffff;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.size_sm {
+.text_field_size_sm {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.size_md {
+.text_field_size_md {
   padding: 0.75rem 1.25rem;
   font-size: 0.9375rem;
   line-height: 1.5;
 }
-.size_lg {
+.text_field_size_lg {
   padding: 1rem 1.5rem;
   font-size: 1rem;
   line-height: 1.5;
 }
-.with_left {
+.text_field_with_left {
   padding-left: calc(1.25rem + 1.25rem);
 }
-.with_right {
+.text_field_with_right {
   padding-right: calc(1.25rem + 1.25rem);
 }
-.error {
+.text_field_error {
   border-color: #ef4444 !important;
   box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
 }
-.success {
+.text_field_success {
   border-color: #10b981 !important;
   box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
 }
 
-/* src/ui/form/date-picker/style.module.scss */
+/* src/ui/form/date-picker/style.scss */
 .date_picker {
   display: flex;
   flex-direction: column;
@@ -956,41 +956,41 @@
     min-width: 0;
   }
 }
-.label {
+.date_picker_label {
   color: #1a1a1a;
   margin-bottom: 0.25rem;
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.required {
+.date_picker_required {
   margin-left: 0.25rem;
   color: #ef4444;
 }
-.fields {
+.date_picker_fields {
   display: flex;
   gap: 0.5rem;
 }
 @media (max-width: 480px) {
-  .fields {
+  .date_picker_fields {
     gap: 0.25rem;
   }
 }
-.full {
+.date_picker_full {
   width: 100%;
 }
-.full .fields {
+.date_picker_full .date_picker_fields {
   width: 100%;
 }
-.full select {
+.date_picker_full select {
   flex: 1;
   min-width: 0;
 }
-.disabled .label {
+.date_picker_disabled .date_picker_label {
   color: #9ca3af;
 }
 
-/* src/ui/navigation/pagination/style.module.scss */
+/* src/ui/navigation/pagination/style.scss */
 .pagination {
   display: flex;
   align-items: center;
@@ -998,7 +998,7 @@
   gap: 0.5rem;
   margin-top: 1.75rem;
 }
-.item {
+.pagination_item {
   border: 1px solid #e5e5e5;
   background: #ffffff;
   border-radius: 8px;
@@ -1009,23 +1009,23 @@
   color: #1a1a1a;
   transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
 }
-.item:hover:not(:disabled) {
+.pagination_item:hover:not(:disabled) {
   background: #fafafa;
 }
-.item:disabled {
+.pagination_item:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.item:focus-visible {
+.pagination_item:focus-visible {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
   border-color: #000000;
 }
-.pages {
+.pagination_pages {
   display: flex;
   align-items: center;
   gap: 6px;
 }
-.pageButton {
+.pagination_page_button {
   border: 0;
   background: transparent;
   min-width: 36px;
@@ -1036,18 +1036,18 @@
   color: #666666;
   transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
 }
-.pageButton:hover {
+.pagination_page_button:hover {
   background: #fafafa;
   color: #1a1a1a;
 }
-.pageButton:focus-visible {
+.pagination_page_button:focus-visible {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
 }
-.active {
+.pagination_active {
   color: #1a1a1a;
   font-weight: 600;
 }
-.ellipsis {
+.pagination_ellipsis {
   min-width: 20px;
   text-align: center;
   font-size: 0.875rem;
@@ -1055,7 +1055,7 @@
   color: #999999;
 }
 
-/* src/ui/overlay/modal/style.module.scss */
+/* src/ui/overlay/modal/style.scss */
 .modal {
   position: fixed;
   inset: 0;
@@ -1064,14 +1064,14 @@
   background: rgba(0, 0, 0, 0.5);
   z-index: 10000;
 }
-.panel {
+.modal_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;
 }
-.header {
+.modal_header {
   padding: 1rem;
   border-bottom: 1px solid #e5e5e5;
   color: #1a1a1a;
@@ -1079,6 +1079,6 @@
   font-weight: 600;
   line-height: 1.3;
 }
-.body {
+.modal_body {
   padding: 1rem;
 }