@bigtablet/design-system 1.1.2 → 1.1.3

package/dist/index.css

@@ -31,120 +31,6 @@
   padding: 1.5rem;
 }
 
-/* src/ui/feedback/alert/style.scss */
-.alert {
-  position: relative;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: start;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  border: 1px solid #e5e5e5;
-  background: #ffffff;
-}
-.alert::before {
-  content: "";
-  position: absolute;
-  inset: 0 auto 0 0;
-  width: 4px;
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-  background: #3b82f6;
-}
-.alert__icon {
-  margin-top: 2px;
-  color: #666666;
-  display: inline-grid;
-  place-items: center;
-}
-.alert__content {
-  min-width: 0;
-}
-.alert__title {
-  font-size: 1rem;
-  line-height: 1.5;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 0.25rem;
-}
-.alert__desc {
-  font-size: 0.9375rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #666666;
-}
-.alert__close {
-  align-self: start;
-  display: inline-grid;
-  place-items: center;
-  margin-left: 0.75rem;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: #666666;
-  line-height: 1;
-  cursor: pointer;
-  transition:
-    background 0.15s ease,
-    color 0.15s ease,
-    transform 0.05s ease;
-}
-.alert__close:hover {
-  background: rgba(0, 0, 0, 0.05);
-  color: #1a1a1a;
-}
-.alert__close:active {
-  transform: translateY(0.5px);
-}
-.alert__close:focus-visible {
-  outline: 2px solid rgba(0, 0, 0, 0.2);
-  outline-offset: 2px;
-}
-.alert--info {
-  background: rgb(243.24, 247.5, 254.46);
-  border-color: rgb(200.12, 220, 252.48);
-}
-.alert--info::before {
-  background: #3b82f6;
-}
-.alert--info .alert__icon {
-  color: #3b82f6;
-}
-.alert--success {
-  background: rgb(240.66, 250.8, 247.44);
-  border-color: rgb(188.08, 235.4, 219.72);
-}
-.alert--success::before {
-  background: #10b981;
-}
-.alert--success .alert__icon {
-  color: #10b981;
-}
-.alert--warning {
-  background: rgb(254.2, 247.24, 235.48);
-  border-color: rgb(251.8, 223.96, 176.92);
-}
-.alert--warning::before {
-  background: #f59e0b;
-}
-.alert--warning .alert__icon {
-  color: #f59e0b;
-}
-.alert--error {
-  background: rgb(254.04, 243.78, 243.78);
-  border-color: rgb(250.52, 202.64, 202.64);
-}
-.alert--error::before {
-  background: #ef4444;
-}
-.alert--error .alert__icon {
-  color: #ef4444;
-}
-
 /* src/ui/feedback/loading/style.scss */
 @keyframes spin {
   to {
@@ -158,833 +44,3 @@
   border-top-color: #000000;
   animation: spin 0.8s linear infinite;
 }
-
-/* src/ui/form/checkbox/style.scss */
-.checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  user-select: none;
-}
-.checkbox__input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-.checkbox__box {
-  width: 1.125rem;
-  height: 1.125rem;
-  border: 1px solid #e5e5e5;
-  border-radius: 6px;
-  background: #ffffff;
-  transition:
-    background 0.2s ease-out,
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out;
-}
-.checkbox__label {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: #1a1a1a;
-}
-.checkbox--sm .checkbox__box {
-  width: 1rem;
-  height: 1rem;
-}
-.checkbox--sm .checkbox__label {
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-.checkbox--md .checkbox__box {
-  width: 1.125rem;
-  height: 1.125rem;
-}
-.checkbox--lg .checkbox__box {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-.checkbox--lg .checkbox__label {
-  font-size: 1rem;
-  line-height: 1.5;
-}
-.checkbox:has(.checkbox__input:focus-visible) .checkbox__box {
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
-  border-color: #000000;
-}
-.checkbox:has(.checkbox__input:checked) .checkbox__box,
-.checkbox:has(.checkbox__input:indeterminate) .checkbox__box {
-  background: #000000;
-  border-color: #000000;
-}
-.checkbox:has(.checkbox__input:checked) .checkbox__box::after,
-.checkbox:has(.checkbox__input:indeterminate) .checkbox__box::after {
-  content: "";
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: #ffffff;
-  clip-path: polygon(14% 52%, 0 66%, 40% 100%, 100% 24%, 86% 10%, 38% 70%);
-}
-.checkbox:has(.checkbox__input:indeterminate) .checkbox__box::after {
-  clip-path: inset(40% 15% 40% 15%);
-}
-.checkbox:has(.checkbox__input:disabled) {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* src/ui/form/file/style.scss */
-.file {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-.file__input {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-.file__label {
-  border: 1px solid #e5e5e5;
-  border-radius: 8px;
-  background: #ffffff;
-  padding: 0.5rem 1rem;
-  color: #1a1a1a;
-  transition: background 0.2s ease-out, border-color 0.2s ease-out;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-}
-.file:hover .file__label {
-  border-color: rgba(0, 0, 0, 0.08);
-}
-.file:has(.file__input:focus-visible) .file__label {
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
-  border-color: #000000;
-}
-
-/* src/ui/form/radio/style.scss */
-.radio {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-.radio__input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-.radio__dot {
-  width: 1.125rem;
-  height: 1.125rem;
-  border: 1px solid #e5e5e5;
-  border-radius: 9999px;
-  background: #ffffff;
-  transition:
-    background 0.2s ease-out,
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out;
-}
-.radio__label {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: #1a1a1a;
-}
-.radio--sm .radio__dot {
-  width: 1rem;
-  height: 1rem;
-}
-.radio--sm .radio__label {
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-.radio--lg .radio__dot {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-.radio--lg .radio__label {
-  font-size: 1rem;
-  line-height: 1.5;
-}
-.radio:has(.radio__input:focus-visible) .radio__dot {
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
-  border-color: #000000;
-}
-.radio:has(.radio__input:checked) .radio__dot {
-  border-color: #000000;
-}
-.radio:has(.radio__input:checked) .radio__dot::after {
-  content: "";
-  display: block;
-  width: 60%;
-  height: 60%;
-  margin: 20%;
-  background: #000000;
-  border-radius: 9999px;
-}
-.radio:has(.radio__input:disabled) {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* src/ui/form/switch/style.scss */
-.switch {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  border-radius: 9999px;
-  background: #e5e5e5;
-  transition: background 0.2s ease-out;
-  cursor: pointer;
-  width: 40px;
-  height: 22px;
-  padding: 2px;
-}
-.switch__thumb {
-  width: 18px;
-  height: 18px;
-  background: #ffffff;
-  border-radius: 9999px;
-  transition: transform 0.2s ease-out;
-  transform: translateX(0);
-}
-.switch.is-on {
-  background: #000000;
-}
-.switch.is-on .switch__thumb {
-  transform: translateX(18px);
-}
-.switch--sm {
-  width: 34px;
-  height: 18px;
-}
-.switch--sm .switch__thumb {
-  width: 14px;
-  height: 14px;
-}
-.switch--sm.is-on .switch__thumb {
-  transform: translateX(16px);
-}
-.switch--lg {
-  width: 48px;
-  height: 26px;
-}
-.switch--lg .switch__thumb {
-  width: 22px;
-  height: 22px;
-}
-.switch--lg.is-on .switch__thumb {
-  transform: translateX(22px);
-}
-.switch.is-disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* src/ui/form/textfield/style.scss */
-.tf__label {
-  margin-bottom: 0.75rem;
-  color: #1a1a1a;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  font-weight: 500;
-}
-.tf__wrapper {
-  position: relative;
-  display: inline-flex;
-  width: 100%;
-  align-items: center;
-  gap: 0.75rem;
-}
-.tf__input--outline {
-  width: 100%;
-  border-radius: 8px;
-  transition:
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out,
-    background 0.2s ease-out;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: #1a1a1a;
-  background: #ffffff;
-}
-.tf__input--outline::placeholder {
-  color: #999999;
-}
-.tf__input--outline:disabled {
-  cursor: not-allowed;
-  background: #fafafa;
-  color: #999999;
-  opacity: 0.7;
-}
-.tf__input--outline {
-  border: 1px solid #e5e5e5;
-}
-.tf__input--outline:hover:not(:disabled) {
-  border-color: rgba(0, 0, 0, 0.08);
-}
-.tf__input--outline:focus-visible {
-  outline: none;
-  border-color: #000000;
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
-}
-.tf__input--filled {
-  width: 100%;
-  border-radius: 8px;
-  transition:
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out,
-    background 0.2s ease-out;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: #1a1a1a;
-  background: #ffffff;
-}
-.tf__input--filled::placeholder {
-  color: #999999;
-}
-.tf__input--filled:disabled {
-  cursor: not-allowed;
-  background: #fafafa;
-  color: #999999;
-  opacity: 0.7;
-}
-.tf__input--filled {
-  background: #fafafa;
-  border: 1px solid transparent;
-}
-.tf__input--filled:hover:not(:disabled) {
-  background: rgb(253.5, 253.5, 253.5);
-}
-.tf__input--filled:focus-visible {
-  outline: none;
-  border-color: #000000;
-  background: #ffffff;
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
-}
-.tf__input--ghost {
-  width: 100%;
-  border-radius: 8px;
-  transition:
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out,
-    background 0.2s ease-out;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: #1a1a1a;
-  background: #ffffff;
-}
-.tf__input--ghost::placeholder {
-  color: #999999;
-}
-.tf__input--ghost:disabled {
-  cursor: not-allowed;
-  background: #fafafa;
-  color: #999999;
-  opacity: 0.7;
-}
-.tf__input--ghost {
-  background: transparent;
-  border: 1px solid transparent;
-}
-.tf__input--ghost:hover:not(:disabled) {
-  background: rgba(0, 0, 0, 0.03);
-}
-.tf__input--ghost:focus-visible {
-  outline: none;
-  border-color: #000000;
-  background: #ffffff;
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
-}
-.tf__input--sm {
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-.tf__input--md {
-  padding: 0.75rem 1.25rem;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-}
-.tf__input--lg {
-  padding: 1rem 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-.tf__input--with-left {
-  padding-left: calc(1.25rem + 1.25rem);
-}
-.tf__input--with-right {
-  padding-right: calc(1.25rem + 1.25rem);
-}
-.tf__input--error {
-  border-color: #ef4444 !important;
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
-}
-.tf__input--success {
-  border-color: #10b981 !important;
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
-}
-.tf__icon {
-  position: absolute;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  color: #666666;
-}
-.tf__icon--left {
-  left: 0.75rem;
-}
-.tf__icon--right {
-  right: 0.75rem;
-}
-.tf__helper {
-  margin-top: 0.25rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: #666666;
-}
-.tf__helper--error {
-  color: #ef4444;
-}
-
-/* src/ui/general/button/style.scss */
-.btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  cursor: pointer;
-  transition: 0.2s ease-out;
-  font-weight: 500;
-  border-radius: 8px;
-}
-.btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.btn--primary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  cursor: pointer;
-  transition: 0.2s ease-out;
-  font-weight: 500;
-  border-radius: 8px;
-}
-.btn--primary:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.btn--primary {
-  background: #000000;
-  color: #ffffff;
-}
-.btn--primary:hover:not(:disabled) {
-  background: #333333;
-}
-.btn--primary:active:not(:disabled) {
-  transform: scale(0.98);
-}
-.btn--secondary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  cursor: pointer;
-  transition: 0.2s ease-out;
-  font-weight: 500;
-  border-radius: 8px;
-}
-.btn--secondary:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.btn--secondary {
-  background: transparent;
-  border: 1px solid #e5e5e5;
-  color: #1a1a1a;
-}
-.btn--secondary:hover:not(:disabled) {
-  background: #fafafa;
-}
-.btn--secondary:active:not(:disabled) {
-  transform: scale(0.98);
-}
-.btn--ghost {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  cursor: pointer;
-  transition: 0.2s ease-out;
-  font-weight: 500;
-  border-radius: 8px;
-}
-.btn--ghost:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.btn--ghost {
-  background: transparent;
-  color: #1a1a1a;
-}
-.btn--ghost:hover:not(:disabled) {
-  background: rgba(0, 0, 0, 0.05);
-}
-.btn--ghost:active:not(:disabled) {
-  transform: scale(0.95);
-}
-.btn--sm {
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-.btn--md {
-  padding: 0.75rem 1.25rem;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-}
-.btn--lg {
-  padding: 1rem 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-/* src/ui/general/select/style.scss */
-.select {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 0.25rem;
-  font-family: "Pretendard", sans-serif;
-}
-.select__label {
-  font-size: 0.875rem;
-  line-height: 1.5;
-  font-weight: 500;
-  color: #1a1a1a;
-}
-.select__control--outline {
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  cursor: pointer;
-  color: #1a1a1a;
-  background: #ffffff;
-  border-radius: 8px;
-  transition:
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out,
-    background 0.2s ease-out;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-}
-.select__control--outline:disabled,
-.select__control--outline.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.7;
-  background: #fafafa;
-  color: #999999;
-}
-.select__control--outline {
-  border: 1px solid #e5e5e5;
-}
-.select__control--outline:hover:not(.is-disabled) {
-  border-color: rgba(0, 0, 0, 0.08);
-}
-.select__control--outline.is-open {
-  border-color: #000000;
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
-}
-.select__control--filled {
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  cursor: pointer;
-  color: #1a1a1a;
-  background: #ffffff;
-  border-radius: 8px;
-  transition:
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out,
-    background 0.2s ease-out;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-}
-.select__control--filled:disabled,
-.select__control--filled.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.7;
-  background: #fafafa;
-  color: #999999;
-}
-.select__control--filled {
-  background: #fafafa;
-  border: 1px solid transparent;
-}
-.select__control--filled:hover:not(.is-disabled) {
-  background: rgb(253.5, 253.5, 253.5);
-}
-.select__control--filled.is-open {
-  background: #ffffff;
-  border-color: #000000;
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
-}
-.select__control--ghost {
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  cursor: pointer;
-  color: #1a1a1a;
-  background: #ffffff;
-  border-radius: 8px;
-  transition:
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out,
-    background 0.2s ease-out;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-}
-.select__control--ghost:disabled,
-.select__control--ghost.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.7;
-  background: #fafafa;
-  color: #999999;
-}
-.select__control--ghost {
-  background: transparent;
-  border: 1px solid transparent;
-}
-.select__control--ghost:hover:not(.is-disabled) {
-  background: rgba(0, 0, 0, 0.03);
-}
-.select__control--ghost.is-open {
-  background: #ffffff;
-  border-color: #000000;
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
-}
-.select__control--sm {
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-.select__control--md {
-  padding: 0.75rem 1.25rem;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-}
-.select__control--lg {
-  padding: 1rem 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-.select__control .select__value {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.9375rem;
-  font-weight: 400;
-  line-height: 1.5;
-}
-.select__control .select__placeholder {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.9375rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #999999;
-}
-.select__control .select__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: #666666;
-}
-.select__list {
-  position: absolute;
-  z-index: 10000;
-  top: calc(100% + 0.25rem);
-  left: 0;
-  width: 100%;
-  min-width: 100%;
-  box-sizing: border-box;
-  background: #ffffff;
-  border: 1px solid #e5e5e5;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
-  max-height: 18rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 0.25rem 0;
-}
-.select__option {
-  width: 100%;
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  color: #1a1a1a;
-  background: transparent;
-  font-size: 0.9375rem;
-  font-weight: 400;
-  line-height: 1.5;
-}
-.select__option > span:first-child {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.select__option:hover,
-.select__option.is-active {
-  background: #fafafa;
-}
-.select__option.is-selected {
-  font-weight: 500;
-}
-.select__option.is-disabled {
-  cursor: not-allowed;
-  color: #999999;
-}
-
-/* src/ui/navigation/pagination/style.scss */
-.pagination {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.pagination__item {
-  border: 1px solid #e5e5e5;
-  background: #ffffff;
-  color: #1a1a1a;
-  border-radius: 6px;
-  padding: 0.25rem 0.5rem;
-  cursor: pointer;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-.pagination__item.is-active {
-  background: #000000;
-  color: #ffffff;
-  border-color: #000000;
-}
-.pagination__item:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.pagination__item:focus-visible {
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
-  border-color: #000000;
-}
-.pagination__ellipsis {
-  padding: 0 0.25rem;
-  color: #999999;
-}
-
-/* src/ui/navigation/sidebar/style.scss */
-.sidebar {
-  height: 100%;
-  background: #ffffff;
-  border-right: 1px solid #e5e5e5;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.5rem;
-}
-.sidebar__toggle {
-  align-self: flex-end;
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
-  border: 1px solid #e5e5e5;
-  background: #ffffff;
-}
-.sidebar__nav {
-  display: grid;
-  gap: 0.25rem;
-}
-.sidebar__item {
-  display: grid;
-  grid-template-columns: 24px 1fr;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  border-radius: 8px;
-  color: #1a1a1a;
-  background: transparent;
-  border: 1px solid transparent;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  cursor: pointer;
-  transition: background 0.2s ease, color 0.2s ease;
-}
-.sidebar__item:hover {
-  background: #fafafa;
-}
-.sidebar__item.is-active {
-  background: rgb(25.5, 25.5, 25.5);
-  border-color: rgb(76.5, 76.5, 76.5);
-  color: #ffffff;
-}
-.sidebar__item.is-active .sidebar__icon {
-  color: #ffffff;
-}
-.sidebar__icon {
-  display: inline-grid;
-  place-items: center;
-  color: #666666;
-  transition: color 0.2s ease;
-}
-.sidebar.is-collapsed .sidebar__item {
-  grid-template-columns: 1fr;
-  place-items: center;
-}
-
-/* src/ui/overlay/modal/style.scss */
-.modal {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: grid;
-  place-items: center;
-  z-index: 10000;
-}
-.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);
-}
-.modal__header {
-  padding: 1rem;
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1.3;
-  color: #1a1a1a;
-  border-bottom: 1px solid #e5e5e5;
-}
-.modal__body {
-  padding: 1rem;
-}