@rufous/ui 0.1.72 → 0.1.81

package/dist/main.css

@@ -26,7 +26,8 @@
 }
 .add-btn:hover,
 .btn-add:hover {
-  background-color: var(--hover-color);
+  background-color: var(--primary-color);
+  color: #ffffff !important;
 }
 .cancel-btn,
 .btn-cancel {
@@ -223,31 +224,32 @@
   align-items: flex-start;
 }
 .dialog-title {
-  padding: 24px 24px 16px;
+  padding: 15px 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-shrink: 0;
 }
 .dialog-title h2 {
-  font-size: 1.5rem;
+  font-size: 1.1rem;
   font-weight: 700;
   margin: 0;
   color: var(--text-color);
 }
 .btn-close {
-  background: none;
-  border: none;
+  background: var(--surface-color);
+  border: 1px solid var(--border-color);
   cursor: pointer;
   padding: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
-  border-radius: 50%;
+  border-radius: 8px;
   flex-shrink: 0;
 }
 .btn-close:hover {
+  border-color: var(--primary-color);
   background-color: var(--hover-color);
 }
 .btn-close svg {
@@ -255,12 +257,12 @@
   transition: fill 0.2s;
 }
 .btn-close:hover svg {
-  fill: var(--text-color);
+  fill: var(--primary-color);
 }
 .dialog-divider {
   border: none;
   border-top: 1px solid var(--border-color);
-  margin: 0 24px;
+  margin: 0;
   flex-shrink: 0;
 }
 .dialog-body {
@@ -275,6 +277,9 @@
   justify-content: flex-end;
   flex-shrink: 0;
 }
+.dialog-container.size-fullScreen .dialog-footer {
+  padding-bottom: 16px;
+}
 .spinner {
   width: 18px;
   height: 18px;
@@ -300,8 +305,8 @@
 }
 .rufous-loader-circle {
   fill: none;
-  strokewidth: 9;
-  strokelinecap: round;
+  stroke-width: 5;
+  stroke-linecap: round;
   stroke-dasharray: 283;
   stroke-dashoffset: 280;
   transform-origin: 50% 50%;
@@ -326,6 +331,89 @@
     stroke-dashoffset: -260;
   }
 }
+.rufous-logo-loader {
+  display: inline-block;
+  animation: rufous-logo-breathe 2.2s ease-in-out infinite;
+}
+.rufous-logo-loader__svg {
+  display: block;
+}
+@keyframes rufous-logo-breathe {
+  0%, 100% {
+    filter: drop-shadow(0 2px 6px rgba(168, 29, 8, 0.20));
+    transform: scale(1);
+  }
+  50% {
+    filter: drop-shadow(0 4px 18px rgba(168, 29, 8, 0.55));
+    transform: scale(1.06);
+  }
+}
+@keyframes rufous-stripe-shimmer {
+  0%, 100% {
+    opacity: 1;
+  }
+  45% {
+    opacity: 0.15;
+  }
+}
+.rufous-ls {
+  animation: rufous-stripe-shimmer 1.6s ease-in-out infinite;
+}
+.rufous-ls-1 {
+  animation-delay: 0.00s;
+}
+.rufous-ls-2 {
+  animation-delay: 0.09s;
+}
+.rufous-ls-3 {
+  animation-delay: 0.18s;
+}
+.rufous-ls-4 {
+  animation-delay: 0.27s;
+}
+.rufous-ls-5 {
+  animation-delay: 0.36s;
+}
+.rufous-ls-6 {
+  animation-delay: 0.45s;
+}
+.rufous-ls-7 {
+  animation-delay: 0.54s;
+}
+.rufous-ls-8 {
+  animation-delay: 0.63s;
+}
+.rufous-ls-9 {
+  animation-delay: 0.72s;
+}
+.rufous-loader--with-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.rufous-loader__icon-wrap {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.rufous-loader__icon--spin-y {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: rufous-icon-spin-y 1.8s ease-in-out infinite;
+}
+@keyframes rufous-icon-spin-y {
+  0% {
+    transform: rotateY(0deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
 
 /* lib/styles/datagrid.css */
 .dg-root {
@@ -845,7 +933,7 @@
 .dg-filter-select,
 .dg-filter-input {
   flex: 1;
-  padding: 8px 12px;
+  padding: 8px 30px 8px 12px;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   background: var(--background-color);
@@ -853,6 +941,12 @@
   font-size: 0.85rem;
   outline: none;
 }
+.dg-filter-select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+}
 .dg-filter-select:focus,
 .dg-filter-input:focus {
   border-color: var(--primary-color);
@@ -861,6 +955,27 @@
   width: 140px;
   flex: none;
 }
+.dg-filter-modal {
+  overflow: visible;
+}
+.dg-filter-modal .dg-modal-header {
+  border-radius: 14px 14px 0 0;
+}
+.dg-filter-modal .dg-modal-body {
+  overflow: visible;
+}
+.dg-filter-modal .dg-modal-footer {
+  border-radius: 0 0 14px 14px;
+}
+.dg-filter-datefield {
+  flex: 1;
+}
+.dg-filter-datefield .rf-date-field {
+  width: 100%;
+  --tf-border-color: var(--border-color);
+  --tf-hover-border-color: var(--text-secondary);
+  --tf-primary-color: var(--primary-color);
+}
 .dg-empty {
   padding: 60px 20px;
   text-align: center;
@@ -1297,6 +1412,4724 @@ pre {
   margin-top: 4px;
 }
 
+/* lib/styles/date-field.css */
+.rf-date-field {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  font-family: inherit;
+  width: 200px;
+}
+.rf-date-field--full-width {
+  width: 100%;
+}
+.rf-date-field__icon-btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(164, 27, 6, 0.6);
+  border-radius: 50%;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  outline: none;
+}
+.rf-date-field__icon-btn:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+  color: #a41b06;
+}
+.rf-date-field__icon-btn:disabled {
+  pointer-events: none;
+  opacity: 0.38;
+}
+.rf-date-field__anchor {
+  position: relative;
+  width: 100%;
+}
+.rf-date-picker {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 1400;
+  background: #ffffff !important;
+  color: #111111 !important;
+  color-scheme: light;
+  border-radius: 12px;
+  box-shadow:
+    0 4px 6px rgba(0, 0, 0, 0.07),
+    0 8px 24px rgba(0, 0, 0, 0.13),
+    0 0 0 1px rgba(0, 0, 0, 0.06);
+  min-width: 310px;
+  padding: 0;
+  overflow: hidden;
+  animation: rf-date-picker-appear 0.12s cubic-bezier(0.2, 0, 0, 1.2);
+  transform-origin: top left;
+}
+.rf-date-picker--side {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  min-width: 0;
+}
+.rf-date-picker__cal-col {
+  display: flex;
+  flex-direction: column;
+  min-width: 310px;
+}
+@keyframes rf-date-picker-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.94) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+.rf-date-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 20px 12px;
+}
+.rf-date-picker__month-label {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #111111;
+  letter-spacing: -0.01em;
+  cursor: pointer;
+  user-select: none;
+}
+.rf-date-picker__nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.rf-date-picker__nav-btn {
+  background: none;
+  border: none;
+  padding: 6px 9px;
+  cursor: pointer;
+  border-radius: 8px;
+  color: #444444;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease;
+  outline: none;
+}
+.rf-date-picker__nav-btn:hover {
+  background-color: rgba(164, 27, 6, 0.07);
+}
+.rf-date-picker__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  padding: 4px 16px 8px;
+}
+.rf-date-picker__weekday {
+  text-align: center;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: #999999;
+  letter-spacing: 0.05em;
+  padding: 4px 0;
+}
+.rf-date-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  padding: 0 16px 8px;
+  row-gap: 2px;
+}
+.rf-date-picker__day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  margin: auto;
+  border-radius: 50%;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: #222222;
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  line-height: 1;
+}
+.rf-date-picker__day:hover:not(.rf-date-picker__day--selected):not(.rf-date-picker__day--empty) {
+  background-color: rgba(164, 27, 6, 0.08);
+}
+.rf-date-picker__day--empty {
+  pointer-events: none;
+  cursor: default;
+  background: none;
+}
+.rf-date-picker__day--selected {
+  background-color: #a41b06;
+  color: #ffffff;
+  font-weight: 600;
+}
+.rf-date-picker__day--selected:hover {
+  background-color: #8a1705;
+}
+.rf-date-picker__day--today:not(.rf-date-picker__day--selected) {
+  color: #a41b06;
+  font-weight: 600;
+}
+.rf-date-picker__divider {
+  height: 1px;
+  background-color: rgba(0, 0, 0, 0.08);
+}
+.rf-date-picker__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px 16px;
+}
+.rf-date-picker__footer-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: #a41b06;
+  padding: 4px 0;
+  outline: none;
+  transition: color 0.15s ease;
+  text-transform: uppercase;
+}
+.rf-date-picker__footer-btn:hover {
+  color: #8a1705;
+}
+.rf-date-picker__footer-btn--clear {
+  color: #888888;
+}
+.rf-date-picker__footer-btn--clear:hover {
+  color: #333333;
+}
+.rf-date-picker__time-section {
+  padding: 10px 20px 4px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: #fff5f5;
+}
+.rf-date-picker__time-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: #999999;
+  margin-bottom: 8px;
+}
+.rf-date-picker__time-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.rf-date-picker__time-input-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+.rf-date-picker__time-spin-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 3px 6px;
+  border-radius: 4px;
+  color: #666666;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  outline: none;
+  line-height: 1;
+  font-size: 0.8rem;
+}
+.rf-date-picker__time-spin-btn:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+  color: #a41b06;
+}
+.rf-date-picker__time-digit {
+  width: 44px;
+  text-align: center;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #111111;
+  background: rgba(0, 0, 0, 0.04);
+  border: 1.5px solid rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  padding: 5px 4px;
+  outline: none;
+  transition: border-color 0.15s;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.rf-date-picker__time-digit::-webkit-inner-spin-button,
+.rf-date-picker__time-digit::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.rf-date-picker__time-digit:focus {
+  border-color: #a41b06;
+  background: rgba(164, 27, 6, 0.04);
+}
+.rf-date-picker__time-colon {
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: #444444;
+  line-height: 1;
+  margin-bottom: 24px;
+}
+.rf-date-picker__ampm {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-left: 4px;
+}
+.rf-date-picker__ampm-btn {
+  background: none;
+  border: 1.5px solid rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  padding: 5px 10px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: #777777;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  outline: none;
+}
+.rf-date-picker__ampm-btn--active {
+  background-color: #a41b06;
+  border-color: #a41b06;
+  color: #ffffff;
+}
+.rf-date-picker__ampm-btn:hover:not(.rf-date-picker__ampm-btn--active) {
+  background-color: rgba(164, 27, 6, 0.06);
+  border-color: rgba(164, 27, 6, 0.3);
+  color: #a41b06;
+}
+.rf-date-picker__side-panel {
+  width: 150px;
+  border-left: 1px solid rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 12px;
+  gap: 12px;
+  background: #fff5f5;
+  flex-shrink: 0;
+  justify-content: center;
+}
+.rf-date-picker__side-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #aaaaaa;
+  margin-bottom: 4px;
+}
+.rf-date-picker__side-spinner {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 4px;
+}
+.rf-date-picker__side-spinner .rf-date-picker__time-row {
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.rf-date-picker__side-spinner .rf-date-picker__time-colon {
+  display: none;
+}
+.rf-date-picker__side-spinner .rf-date-picker__ampm {
+  flex-direction: row;
+  margin-left: 0;
+  gap: 6px;
+}
+.rf-date-picker__side-spinner .rf-date-picker__ampm-btn {
+  padding: 4px 8px;
+  font-size: 0.7rem;
+}
+.rf-date-picker__side-time-display {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #a41b06;
+  background: rgba(164, 27, 6, 0.06);
+  border-radius: 8px;
+  padding: 7px 12px;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  margin-top: 4px;
+}
+.rf-timescroll {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+  width: 100%;
+  justify-content: center;
+  position: relative;
+}
+.rf-timescroll__col-wrapper {
+  position: relative;
+  height: 144px;
+  width: 44px;
+  overflow: hidden;
+}
+.rf-timescroll__col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  position: relative;
+  width: 100%;
+}
+.rf-timescroll__col::-webkit-scrollbar {
+  display: none;
+}
+.rf-timescroll__spacer {
+  height: 54px;
+  flex-shrink: 0;
+}
+.rf-timescroll__item {
+  height: 36px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #bbbbbb;
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  scroll-snap-align: center;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+.rf-timescroll__item--active {
+  color: #a41b06;
+  font-weight: 700;
+  font-size: 1.15rem;
+  transform: scale(1.1);
+}
+.rf-timescroll__mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 54px;
+  pointer-events: none;
+  z-index: 2;
+}
+.rf-timescroll__mask--top {
+  top: 0;
+  background:
+    linear-gradient(
+      to bottom,
+      #fff5f5 0%,
+      rgba(255, 245, 245, 0) 100%);
+}
+.rf-timescroll__mask--bottom {
+  bottom: 0;
+  background:
+    linear-gradient(
+      to top,
+      #fff5f5 0%,
+      rgba(255, 245, 245, 0) 100%);
+}
+.rf-timescroll::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(50% - 18px);
+  height: 36px;
+  background: rgba(164, 27, 6, 0.06);
+  border-top: 1px solid rgba(164, 27, 6, 0.1);
+  border-bottom: 1px solid rgba(164, 27, 6, 0.1);
+  pointer-events: none;
+  z-index: 0;
+}
+.rf-timescroll__colon {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #444444;
+  padding: 0 2px;
+  line-height: 1;
+  align-self: center;
+  margin-top: -2px;
+}
+.rf-text-field--compact .rf-date-field__icon-btn {
+  color: rgba(0, 0, 0, 0.45);
+}
+.rf-text-field--compact .rf-date-field__icon-btn:hover {
+  color: rgba(0, 0, 0, 0.75);
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* lib/styles/date-range-field.css */
+.rf-date-range-field {
+  width: 300px;
+}
+.rf-dr-picker {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 1400;
+  background: #ffffff;
+  color: #111111;
+  color-scheme: light;
+  border-radius: 12px;
+  box-shadow:
+    0 4px 6px rgba(0, 0, 0, 0.07),
+    0 8px 24px rgba(0, 0, 0, 0.13),
+    0 0 0 1px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  animation: rf-date-picker-appear 0.12s cubic-bezier(0.2, 0, 0, 1.2);
+  transform-origin: top left;
+}
+.rf-dr-picker--panel {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  min-width: 520px;
+}
+.rf-dr-picker__presets {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0;
+  min-width: 156px;
+  border-right: 1px solid rgba(0, 0, 0, 0.07);
+  background: #ffffff;
+}
+.rf-dr-picker__preset-sep {
+  height: 1px;
+  background: rgba(0, 0, 0, 0.06);
+  margin: 0 16px;
+}
+.rf-dr-picker__preset-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  padding: 13px 24px;
+  font-size: 0.9rem;
+  font-weight: 400;
+  color: #333333;
+  transition: background-color 0.12s ease;
+  outline: none;
+  width: 100%;
+}
+.rf-dr-picker__preset-btn:hover {
+  background-color: rgba(164, 27, 6, 0.05);
+}
+.rf-dr-picker__preset-btn--active {
+  background-color: rgba(164, 27, 6, 0.07);
+  color: #a41b06;
+  font-weight: 500;
+}
+.rf-dr-picker__manual {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 22px 16px;
+  gap: 12px;
+  min-width: 260px;
+}
+.rf-dr-picker__date-field-wrap {
+  display: flex;
+  flex-direction: column;
+}
+.rf-dr-picker__date-field {
+  display: flex;
+  flex-direction: column;
+  border: 1.5px solid rgba(0, 0, 0, 0.18);
+  border-radius: 8px;
+  padding: 10px 14px 8px;
+  position: relative;
+  background: #ffffff;
+  transition: border-color 0.15s;
+}
+.rf-dr-picker__date-field:hover {
+  border-color: rgba(0, 0, 0, 0.35);
+}
+.rf-dr-picker__date-field--active {
+  border-color: #a41b06;
+}
+.rf-dr-picker__date-floating-label {
+  font-size: 0.67rem;
+  font-weight: 500;
+  color: #888888;
+  letter-spacing: 0.03em;
+  position: absolute;
+  top: -8px;
+  left: 10px;
+  background: #ffffff;
+  padding: 0 4px;
+}
+.rf-dr-picker__date-field--active .rf-dr-picker__date-floating-label {
+  color: #a41b06;
+}
+.rf-dr-picker__date-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 24px;
+}
+.rf-dr-picker__date-text {
+  font-size: 0.975rem;
+  font-weight: 400;
+  color: #111111;
+  flex: 1;
+}
+.rf-dr-picker__date-input {
+  font-size: 0.975rem;
+  font-weight: 400;
+  color: #111111;
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0;
+  min-width: 0;
+  font-family: inherit;
+}
+.rf-dr-picker__date-input::placeholder {
+  color: #cccccc;
+  font-style: italic;
+}
+.rf-dr-picker__cal-icon-btn {
+  background: none;
+  border: none;
+  padding: 2px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  color: rgba(164, 27, 6, 0.5);
+  border-radius: 4px;
+  transition: color 0.15s, background-color 0.15s;
+  outline: none;
+  flex-shrink: 0;
+}
+.rf-dr-picker__cal-icon-btn:hover {
+  color: #a41b06;
+  background-color: rgba(164, 27, 6, 0.06);
+}
+.rf-dr-mini-cal {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background: #ffffff;
+  margin-top: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+.rf-dr-mini-cal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px 6px;
+}
+.rf-dr-picker__days-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px 0 0;
+}
+.rf-dr-picker__days-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.rf-dr-picker__days-label {
+  font-size: 0.875rem;
+  color: #333333;
+  font-weight: 400;
+  white-space: nowrap;
+}
+.rf-dr-picker__days-input {
+  width: 76px;
+  text-align: center;
+  font-size: 0.975rem;
+  font-weight: 500;
+  color: #111111;
+  background: #ffffff;
+  border: 1.5px solid rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  padding: 7px 8px;
+  outline: none;
+  transition: border-color 0.15s;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  flex-shrink: 0;
+}
+.rf-dr-picker__days-input::-webkit-inner-spin-button,
+.rf-dr-picker__days-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.rf-dr-picker__days-input:focus {
+  border-color: #a41b06;
+  background: rgba(164, 27, 6, 0.02);
+}
+.rf-dr-picker__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(0, 0, 0, 0.07);
+}
+.rf-dr-picker__close-btn {
+  background: none;
+  border: 1.5px solid rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  padding: 7px 18px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: #555555;
+  cursor: pointer;
+  transition: all 0.15s;
+  outline: none;
+}
+.rf-dr-picker__close-btn:hover {
+  border-color: rgba(0, 0, 0, 0.28);
+  color: #111111;
+  background: rgba(0, 0, 0, 0.03);
+}
+.rf-dr-picker__apply-btn {
+  background: #a41b06;
+  border: none;
+  border-radius: 6px;
+  padding: 7px 18px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: #ffffff;
+  cursor: pointer;
+  transition: background-color 0.15s;
+  outline: none;
+}
+.rf-dr-picker__apply-btn:hover {
+  background: #8a1705;
+}
+.rf-dr-picker--calendar {
+  min-width: 640px;
+}
+.rf-dr-picker__calendars {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+.rf-dr-picker__cal-col-divider {
+  width: 1px;
+  background: rgba(0, 0, 0, 0.08);
+  align-self: stretch;
+}
+.rf-dr-picker__divider {
+  height: 1px;
+  background: rgba(0, 0, 0, 0.08);
+}
+.rf-dr-picker__cal-hint {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 20px;
+  background: rgba(164, 27, 6, 0.04);
+  border-top: 1px solid rgba(164, 27, 6, 0.08);
+  font-size: 0.78rem;
+  color: #a41b06;
+}
+.rf-dr-picker__cal-hint-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #a41b06;
+  flex-shrink: 0;
+}
+.rf-dr-picker__cal-footer {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  gap: 10px;
+}
+.rf-dr-picker__cal-range-label {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: #444444;
+}
+.rf-dr-picker__cal-range-days {
+  font-size: 0.78rem;
+  font-weight: 400;
+  color: #888888;
+}
+.rf-dr-calendar {
+  flex: 1;
+  min-width: 300px;
+}
+.rf-dr-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 20px 12px;
+}
+.rf-dr-calendar__month-label {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #111111;
+  letter-spacing: -0.01em;
+  user-select: none;
+}
+.rf-dr-calendar__nav-btn {
+  background: none;
+  border: none;
+  padding: 6px 9px;
+  cursor: pointer;
+  border-radius: 8px;
+  color: #444444;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s;
+  outline: none;
+}
+.rf-dr-calendar__nav-btn:hover {
+  background-color: rgba(164, 27, 6, 0.07);
+}
+.rf-dr-calendar__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  padding: 4px 16px 8px;
+}
+.rf-dr-calendar__weekday {
+  text-align: center;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: #999999;
+  letter-spacing: 0.05em;
+  padding: 4px 0;
+}
+.rf-dr-calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  padding: 0 16px 12px;
+  row-gap: 2px;
+}
+.rf-dr-calendar__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: 38px;
+}
+.rf-dr-calendar__cell--empty {
+  pointer-events: none;
+}
+.rf-dr-calendar__cell--in-range::before {
+  content: "";
+  position: absolute;
+  inset: 1px 0;
+  background: rgba(164, 27, 6, 0.08);
+  z-index: 0;
+  pointer-events: none;
+}
+.rf-dr-calendar__cell--range-start::after {
+  content: "";
+  position: absolute;
+  inset: 1px 0;
+  left: 50%;
+  background: rgba(164, 27, 6, 0.08);
+  z-index: 0;
+  pointer-events: none;
+}
+.rf-dr-calendar__cell--range-end::after {
+  content: "";
+  position: absolute;
+  inset: 1px 0;
+  right: 50%;
+  background: rgba(164, 27, 6, 0.08);
+  z-index: 0;
+  pointer-events: none;
+}
+.rf-dr-calendar__day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: #222222;
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  position: relative;
+  z-index: 1;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.rf-dr-calendar__day:hover:not(.rf-dr-calendar__day--selected) {
+  background-color: rgba(164, 27, 6, 0.1);
+}
+.rf-dr-calendar__day--selected {
+  background-color: #a41b06;
+  color: #ffffff;
+  font-weight: 600;
+}
+.rf-dr-calendar__day--selected:hover {
+  background-color: #8a1705;
+}
+.rf-dr-calendar__day--today:not(.rf-dr-calendar__day--selected) {
+  color: #a41b06;
+  font-weight: 600;
+}
+
+/* lib/styles/autocomplete.css */
+.rf-autocomplete {
+  position: relative;
+}
+.rf-autocomplete .rf-text-field__wrapper {
+  flex-wrap: wrap;
+  gap: 4px;
+  cursor: text;
+  min-height: 56px;
+  align-items: center;
+  padding: 6px 56px 6px 10px;
+}
+.rf-autocomplete.rf-text-field--small .rf-text-field__wrapper {
+  min-height: 40px;
+  padding: 3px 56px 3px 10px;
+}
+.rf-autocomplete.rf-text-field--filled .rf-text-field__wrapper {
+  padding-top: 20px;
+}
+.rf-autocomplete.rf-text-field--small.rf-text-field--filled .rf-text-field__wrapper {
+  padding-top: 16px;
+}
+.rf-autocomplete .rf-text-field__input {
+  padding: 4px 0 4px 4px;
+  min-width: 60px;
+  width: auto;
+  flex: 1;
+}
+.rf-autocomplete.rf-text-field--filled .rf-text-field__input {
+  padding-left: 2px;
+}
+.rf-autocomplete.rf-text-field--standard .rf-text-field__input {
+  padding-left: 0;
+  margin-top: 0;
+}
+.rf-autocomplete__icon-btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(0, 0, 0, 0.54);
+  border-radius: 50%;
+  transition: background-color 0.15s, color 0.15s;
+  outline: none;
+  flex-shrink: 0;
+}
+.rf-autocomplete__icon-btn:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+  color: #a41b06;
+}
+.rf-autocomplete__icon-btn--popup {
+  transition:
+    background-color 0.15s,
+    color 0.15s,
+    transform 0.2s;
+}
+.rf-autocomplete__icon-btn--popup.rf-autocomplete__icon-btn--open {
+  transform: rotate(180deg);
+  color: #a41b06;
+}
+.rf-autocomplete__endgroup {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  flex-shrink: 0;
+}
+.rf-autocomplete__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background-color: rgba(164, 27, 6, 0.08);
+  border: 1px solid rgba(164, 27, 6, 0.2);
+  border-radius: 16px;
+  padding: 2px 4px 2px 10px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #a41b06;
+  max-width: 180px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.4;
+  flex-shrink: 0;
+}
+.rf-autocomplete.rf-text-field--small .rf-autocomplete__tag {
+  font-size: 0.75rem;
+  padding: 1px 3px 1px 8px;
+}
+.rf-autocomplete__tag-delete {
+  background: none;
+  border: none;
+  padding: 1px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(164, 27, 6, 0.5);
+  border-radius: 50%;
+  transition: background-color 0.12s, color 0.12s;
+  outline: none;
+  flex-shrink: 0;
+}
+.rf-autocomplete__tag-delete:hover {
+  background-color: rgba(164, 27, 6, 0.15);
+  color: #a41b06;
+}
+.rf-autocomplete__tag-more {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+  padding: 2px 6px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.rf-autocomplete__popup {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 1400;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow:
+    0 4px 6px rgba(0, 0, 0, 0.06),
+    0 10px 28px rgba(0, 0, 0, 0.12),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  animation: rf-ac-appear 0.12s cubic-bezier(0.2, 0, 0, 1.15);
+  transform-origin: top center;
+}
+@keyframes rf-ac-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+.rf-autocomplete__listbox {
+  list-style: none;
+  margin: 0;
+  padding: 0 0;
+  max-height: 280px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+}
+.rf-autocomplete__listbox::-webkit-scrollbar {
+  width: 6px;
+}
+.rf-autocomplete__listbox::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+}
+.rf-autocomplete__group-header {
+  padding: 6px 16px 4px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: #a41b06;
+  background: #fff5f5;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.rf-autocomplete__group-items {
+  padding: 0;
+  list-style: none;
+  margin: 0;
+}
+.rf-autocomplete__option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  font-size: 0.9rem;
+  color: rgba(0, 0, 0, 0.87);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.1s;
+  min-height: 40px;
+  box-sizing: border-box;
+}
+.rf-autocomplete__option:hover,
+.rf-autocomplete__option--focused {
+  background-color: rgba(164, 27, 6, 0.05);
+}
+.rf-autocomplete__option--selected {
+  background-color: rgba(164, 27, 6, 0.08);
+  font-weight: 500;
+}
+.rf-autocomplete__option--selected:hover,
+.rf-autocomplete__option--selected.rf-autocomplete__option--focused {
+  background-color: rgba(164, 27, 6, 0.12);
+}
+.rf-autocomplete__option--disabled {
+  opacity: 0.45;
+  cursor: default;
+  pointer-events: none;
+}
+.rf-autocomplete__option-check {
+  color: #a41b06;
+  flex-shrink: 0;
+  margin-left: auto;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+.rf-autocomplete__option--selected .rf-autocomplete__option-check {
+  opacity: 1;
+}
+.rf-autocomplete__no-options,
+.rf-autocomplete__loading {
+  padding: 12px 16px;
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.45);
+  text-align: center;
+}
+.rf-autocomplete__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  color: #a41b06;
+}
+.rf-ac-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(164, 27, 6, 0.2);
+  border-top-color: #a41b06;
+  border-radius: 50%;
+  animation: rf-ac-spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+@keyframes rf-ac-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* lib/styles/select.css */
+.rf-select {
+  position: relative;
+}
+.rf-select .rf-text-field__wrapper {
+  cursor: pointer;
+  user-select: none;
+}
+.rf-select.rf-text-field--disabled .rf-text-field__wrapper {
+  cursor: not-allowed;
+}
+.rf-select__display {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  padding: 16.5px 14px;
+  font-size: 1rem;
+  line-height: 1.4375em;
+  color: var(--tf-text-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  z-index: 2;
+  box-sizing: border-box;
+}
+.rf-select__display--placeholder {
+  color: var(--tf-placeholder-color);
+}
+.rf-select.rf-text-field--small .rf-select__display {
+  padding: 8.5px 14px;
+  font-size: 0.875rem;
+}
+.rf-select.rf-text-field--filled .rf-select__display {
+  padding: 25px 12px 8px;
+}
+.rf-select.rf-text-field--small.rf-text-field--filled .rf-select__display {
+  padding: 21px 12px 4px;
+}
+.rf-select.rf-text-field--standard .rf-select__display {
+  padding: 4px 0 5px;
+  margin-top: 16px;
+}
+.rf-select__chips {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  flex: 1;
+  padding: 6px 14px;
+  min-height: 56px;
+  box-sizing: border-box;
+  z-index: 2;
+}
+.rf-select.rf-text-field--small .rf-select__chips {
+  min-height: 40px;
+  padding: 3px 14px;
+}
+.rf-select.rf-text-field--filled .rf-select__chips {
+  padding-top: 20px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.rf-select__chip {
+  display: inline-flex;
+  align-items: center;
+  background-color: rgba(164, 27, 6, 0.08);
+  border: 1px solid rgba(164, 27, 6, 0.2);
+  border-radius: 16px;
+  padding: 2px 8px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--primary-color, #a41b06);
+  white-space: nowrap;
+  line-height: 1.4;
+}
+.rf-select.rf-text-field--small .rf-select__chip {
+  font-size: 0.75rem;
+  padding: 1px 6px;
+}
+.rf-select__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--primary-color, #a41b06);
+  color: #fff;
+  border-radius: 12px;
+  padding: 2px 8px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.rf-select__arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+  margin-left: 2px;
+  color: rgba(0, 0, 0, 0.54);
+  flex-shrink: 0;
+  transition: transform 0.2s ease, color 0.15s;
+  z-index: 2;
+}
+.rf-select--open .rf-select__arrow {
+  transform: rotate(180deg);
+  color: var(--primary-color, #a41b06);
+}
+.rf-select.rf-text-field--standard .rf-select__arrow {
+  margin-right: 0;
+  margin-top: 16px;
+}
+.rf-select.rf-text-field--filled .rf-select__arrow {
+  margin-top: 17px;
+}
+.rf-select__popup {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 1400;
+  background: var(--surface-color, #ffffff);
+  border-radius: 8px;
+  box-shadow:
+    0 4px 6px rgba(0, 0, 0, 0.06),
+    0 10px 28px rgba(0, 0, 0, 0.12),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  animation: rf-select-appear 0.12s cubic-bezier(0.2, 0, 0, 1.15);
+  transform-origin: top center;
+}
+@keyframes rf-select-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+.rf-select__listbox {
+  list-style: none;
+  margin: 0;
+  padding: 6px 0;
+  max-height: 280px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+}
+.rf-select__listbox::-webkit-scrollbar {
+  width: 6px;
+}
+.rf-select__listbox::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+}
+.rf-select__option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  font-size: 0.9rem;
+  color: rgba(0, 0, 0, 0.87);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.1s;
+  min-height: 40px;
+  box-sizing: border-box;
+}
+.rf-select__option:hover,
+.rf-select__option--focused {
+  background-color: rgba(164, 27, 6, 0.05);
+}
+.rf-select__option--selected {
+  background-color: rgba(164, 27, 6, 0.08);
+  font-weight: 500;
+}
+.rf-select__option--selected:hover,
+.rf-select__option--selected.rf-select__option--focused {
+  background-color: rgba(164, 27, 6, 0.12);
+}
+.rf-select__option--disabled {
+  opacity: 0.45;
+  cursor: default;
+  pointer-events: none;
+}
+.rf-select__option-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rf-select__option-check {
+  color: var(--primary-color, #a41b06);
+  flex-shrink: 0;
+  margin-left: auto;
+  opacity: 0;
+  transition: opacity 0.1s;
+  display: flex;
+  align-items: center;
+}
+.rf-select__option--selected .rf-select__option-check {
+  opacity: 1;
+}
+
+/* lib/styles/slider.css */
+.rf-slider {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 200px;
+  font-family: var(--font-family, "Roboto", sans-serif);
+}
+.rf-slider--full-width,
+.rf-slider--horizontal {
+  width: 100%;
+}
+.rf-slider--vertical {
+  width: auto;
+  flex-direction: row;
+  align-items: flex-start;
+}
+.rf-slider__label {
+  font-size: 0.85rem;
+  color: var(--text-secondary, #666666);
+  font-weight: 500;
+  line-height: 1.4;
+  padding-bottom: 2px;
+}
+.rf-slider--vertical .rf-slider__label {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  transform: rotate(180deg);
+  padding-bottom: 0;
+  padding-right: 2px;
+}
+.rf-slider__track-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding: 13px 0;
+  cursor: pointer;
+  touch-action: none;
+  box-sizing: border-box;
+}
+.rf-slider--small .rf-slider__track-container {
+  padding: 10px 0;
+}
+.rf-slider--vertical .rf-slider__track-container {
+  flex-direction: column;
+  padding: 0 13px;
+  min-height: 120px;
+}
+.rf-slider--vertical.rf-slider--small .rf-slider__track-container {
+  padding: 0 10px;
+}
+.rf-slider--disabled .rf-slider__track-container {
+  cursor: not-allowed;
+  opacity: 0.45;
+  pointer-events: none;
+}
+.rf-slider__rail {
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--border-color, #e0e0e0);
+  pointer-events: none;
+}
+.rf-slider--small .rf-slider__rail {
+  height: 2px;
+}
+.rf-slider--vertical .rf-slider__rail {
+  width: 4px;
+  height: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.rf-slider--vertical.rf-slider--small .rf-slider__rail {
+  width: 2px;
+}
+.rf-slider__track {
+  position: absolute;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--primary-color, #a41b06);
+  pointer-events: none;
+  transition: none;
+}
+.rf-slider--small .rf-slider__track {
+  height: 2px;
+}
+.rf-slider--secondary .rf-slider__track {
+  background: var(--secondary-color, #8b1605);
+}
+.rf-slider--vertical .rf-slider__track {
+  width: 4px;
+  height: auto;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.rf-slider--vertical.rf-slider--small .rf-slider__track {
+  width: 2px;
+}
+.rf-slider__thumb {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--primary-color, #a41b06);
+  border: 2px solid #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  transform: translate(-50%, -50%);
+  top: 50%;
+  cursor: grab;
+  transition: box-shadow 0.15s ease, transform 0.15s ease;
+  z-index: 2;
+  outline: none;
+  touch-action: none;
+  box-sizing: border-box;
+}
+.rf-slider--small .rf-slider__thumb {
+  width: 14px;
+  height: 14px;
+}
+.rf-slider--secondary .rf-slider__thumb {
+  background: var(--secondary-color, #8b1605);
+}
+.rf-slider__thumb:focus-visible,
+.rf-slider__thumb:hover {
+  box-shadow: 0 0 0 8px rgba(164, 27, 6, 0.16), 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+.rf-slider__thumb:active,
+.rf-slider__thumb--dragging {
+  cursor: grabbing;
+  box-shadow: 0 0 0 12px rgba(164, 27, 6, 0.2), 0 1px 4px rgba(0, 0, 0, 0.3);
+  transform: translate(-50%, -50%) scale(1.1);
+}
+.rf-slider--vertical .rf-slider__thumb {
+  transform: translate(-50%, 50%);
+  top: auto;
+  left: 50%;
+}
+.rf-slider__value-label {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--text-color, #2d2d2d);
+  color: #fff;
+  font-size: 0.72rem;
+  font-weight: 600;
+  padding: 3px 7px;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 3;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.rf-slider__value-label::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: var(--text-color, #2d2d2d);
+}
+.rf-slider__thumb:hover .rf-slider__value-label,
+.rf-slider__thumb:focus-visible .rf-slider__value-label,
+.rf-slider__thumb--dragging .rf-slider__value-label,
+.rf-slider--value-label-on .rf-slider__value-label {
+  opacity: 1;
+}
+.rf-slider--value-label-off .rf-slider__value-label {
+  opacity: 0 !important;
+}
+.rf-slider__mark {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: rgba(164, 27, 6, 0.4);
+  top: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.rf-slider--small .rf-slider__mark {
+  width: 3px;
+  height: 3px;
+}
+.rf-slider__mark--active {
+  background: #fff;
+  box-shadow: 0 0 0 1px var(--primary-color, #a41b06);
+}
+.rf-slider--vertical .rf-slider__mark {
+  left: 50%;
+  top: auto;
+  transform: translate(-50%, 50%);
+}
+.rf-slider__mark-label {
+  position: absolute;
+  top: calc(100% + 4px);
+  transform: translateX(-50%);
+  font-size: 0.7rem;
+  color: var(--text-secondary, #666666);
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+}
+.rf-slider--vertical .rf-slider__mark-label {
+  top: auto;
+  left: calc(100% + 4px);
+  transform: translateY(50%);
+}
+.rf-slider__marks-labels {
+  position: relative;
+  height: 18px;
+}
+.rf-slider--vertical .rf-slider__marks-labels {
+  display: none;
+}
+
+/* lib/styles/switch.css */
+.rf-switch-root {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--font-family, "Roboto", sans-serif);
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+}
+.rf-switch-root--top,
+.rf-switch-root--bottom {
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.rf-switch-root--bottom {
+  flex-direction: column-reverse;
+}
+.rf-switch-root--start {
+  flex-direction: row-reverse;
+}
+.rf-switch-root--disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+  pointer-events: none;
+}
+.rf-switch__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+.rf-switch__track {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  border-radius: 12px;
+  background: #bdbdbd;
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+.rf-switch-root--small .rf-switch__track {
+  width: 34px;
+  height: 18px;
+  border-radius: 9px;
+}
+.rf-switch-root--primary.rf-switch-root--checked .rf-switch__track {
+  background: var(--primary-color, #a41b06);
+}
+.rf-switch-root--secondary.rf-switch-root--checked .rf-switch__track {
+  background: var(--secondary-color, #8b1605);
+}
+.rf-switch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.14);
+  transition: transform 0.2s ease, box-shadow 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.rf-switch-root--small .rf-switch__thumb {
+  width: 14px;
+  height: 14px;
+}
+.rf-switch-root--checked .rf-switch__thumb {
+  transform: translateX(20px);
+}
+.rf-switch-root--small.rf-switch-root--checked .rf-switch__thumb {
+  transform: translateX(16px);
+}
+.rf-switch__thumb::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.06);
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  opacity: 0;
+}
+.rf-switch-root:hover:not(.rf-switch-root--disabled) .rf-switch__thumb::before {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+.rf-switch-root--checked:hover:not(.rf-switch-root--disabled) .rf-switch__thumb::before {
+  background: rgba(164, 27, 6, 0.1);
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+.rf-switch__input:focus-visible ~ .rf-switch__track .rf-switch__thumb::before {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.08);
+}
+.rf-switch__label {
+  font-size: 0.9rem;
+  color: var(--text-color, #2d2d2d);
+  line-height: 1.4;
+}
+.rf-switch-root--small .rf-switch__label {
+  font-size: 0.82rem;
+}
+
+/* lib/styles/radio-group.css */
+.rf-radio-group {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: var(--font-family, "Roboto", sans-serif);
+}
+.rf-radio-group--row {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.rf-radio-group--disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+.rf-radio-group__label {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text-secondary, #666666);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 6px;
+}
+.rf-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  font-family: var(--font-family, "Roboto", sans-serif);
+  font-size: 0.9rem;
+  color: var(--text-color, #2d2d2d);
+  line-height: 1.4;
+}
+.rf-radio--small {
+  font-size: 0.82rem;
+  gap: 6px;
+}
+.rf-radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+  pointer-events: none;
+}
+.rf-radio__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  pointer-events: none;
+}
+.rf-radio__control {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.rf-radio--small .rf-radio__control {
+  width: 16px;
+  height: 16px;
+}
+.rf-radio__outer {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid rgba(0, 0, 0, 0.4);
+  box-sizing: border-box;
+  transition: border-color 0.18s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+}
+.rf-radio--small .rf-radio__outer {
+  width: 16px;
+  height: 16px;
+}
+.rf-radio--checked .rf-radio__outer {
+  border-color: var(--primary-color, #a41b06);
+}
+.rf-radio:hover:not(.rf-radio--disabled) .rf-radio__outer {
+  border-color: var(--primary-color, #a41b06);
+}
+.rf-radio__inner {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--primary-color, #a41b06);
+  transform: scale(0);
+  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.rf-radio--small .rf-radio__inner {
+  width: 8px;
+  height: 8px;
+}
+.rf-radio--checked .rf-radio__inner {
+  transform: scale(1);
+}
+.rf-radio__ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(164, 27, 6, 0.12);
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  opacity: 0;
+  pointer-events: none;
+}
+.rf-radio:hover:not(.rf-radio--disabled) .rf-radio__ripple {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+.rf-radio__input:focus-visible ~ .rf-radio__control .rf-radio__ripple {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+.rf-radio__input:focus-visible ~ .rf-radio__control .rf-radio__outer {
+  outline: 2px solid var(--primary-color, #a41b06);
+  outline-offset: 2px;
+}
+.rf-radio__label {
+  line-height: 1.4;
+}
+
+/* lib/styles/rating.css */
+.rf-rating {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 6px;
+  font-family: var(--font-family, "Roboto", sans-serif);
+}
+.rf-rating__label {
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--text-secondary, #666666);
+  line-height: 1.4;
+}
+.rf-rating__stars {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  position: relative;
+}
+.rf-rating__item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  background: none;
+  padding: 2px;
+  border-radius: 50%;
+  transition: transform 0.1s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+.rf-rating__item:hover {
+  transform: scale(1.15);
+}
+.rf-rating--read-only .rf-rating__item,
+.rf-rating--disabled .rf-rating__item {
+  cursor: default;
+  pointer-events: none;
+}
+.rf-rating--read-only .rf-rating__item:hover {
+  transform: none;
+}
+.rf-rating--disabled {
+  opacity: 0.45;
+}
+.rf-rating__icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+.rf-rating--small .rf-rating__item {
+  padding: 1px;
+}
+.rf-rating--large .rf-rating__item {
+  padding: 3px;
+}
+.rf-rating__icon--empty {
+  color: var(--border-color, #e0e0e0);
+  transition: color 0.15s ease;
+}
+.rf-rating__icon--filled {
+  color: var(--primary-color, #a41b06);
+  transition: color 0.15s ease;
+}
+.rf-rating__item--hovered .rf-rating__icon--empty {
+  color: var(--primary-color, #a41b06);
+  opacity: 0.6;
+}
+.rf-rating__item--hovered .rf-rating__icon--filled {
+  color: var(--primary-color, #a41b06);
+}
+.rf-rating__half-left,
+.rf-rating__half-right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.rf-rating__half-left {
+  left: 0;
+  justify-content: flex-start;
+}
+.rf-rating__half-right {
+  right: 0;
+  justify-content: flex-end;
+}
+.rf-rating__item:focus-visible {
+  outline: 2px solid var(--primary-color, #a41b06);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.rf-rating__item::before {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  border-radius: 50%;
+  background: rgba(164, 27, 6, 0.1);
+  transform: scale(0);
+  transition: transform 0.15s ease;
+}
+.rf-rating__item:hover:not(.rf-rating--read-only .rf-rating__item)::before {
+  transform: scale(1);
+}
+
+/* lib/styles/toggle-button.css */
+.rf-toggle-group {
+  display: inline-flex;
+  flex-direction: row;
+  font-family: var(--font-family, "Roboto", sans-serif);
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--border-color, #e0e0e0);
+}
+.rf-toggle-group--vertical {
+  flex-direction: column;
+}
+.rf-toggle-group--full-width {
+  width: 100%;
+}
+.rf-toggle-group--full-width .rf-toggle-btn {
+  flex: 1;
+}
+.rf-toggle-group--disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+.rf-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: var(--surface-color, #ffffff);
+  border: none;
+  border-right: 1px solid var(--border-color, #e0e0e0);
+  color: var(--text-color, #2d2d2d);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: background-color 0.18s ease, color 0.18s ease;
+  outline: none;
+  white-space: nowrap;
+  user-select: none;
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+  min-width: 40px;
+}
+.rf-toggle-btn:last-child {
+  border-right: none;
+}
+.rf-toggle-group--vertical .rf-toggle-btn {
+  border-right: none;
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+  width: 100%;
+}
+.rf-toggle-group--vertical .rf-toggle-btn:last-child {
+  border-bottom: none;
+}
+.rf-toggle-group--small .rf-toggle-btn {
+  padding: 4px 10px;
+  font-size: 0.8rem;
+  min-width: 32px;
+}
+.rf-toggle-group--large .rf-toggle-btn {
+  padding: 11px 22px;
+  font-size: 0.9375rem;
+  min-width: 52px;
+}
+.rf-toggle-btn:hover:not(.rf-toggle-btn--disabled):not(.rf-toggle-btn--selected) {
+  background: var(--hover-color, #fff5f5);
+  color: var(--primary-color, #a41b06);
+}
+.rf-toggle-btn--selected {
+  background: var(--primary-color, #a41b06);
+  color: #ffffff;
+  z-index: 1;
+}
+.rf-toggle-btn--selected:hover {
+  background: var(--secondary-color, #8b1605);
+}
+.rf-toggle-group--standard .rf-toggle-btn--selected {
+  background: transparent;
+  color: var(--primary-color, #a41b06);
+  border-color: var(--primary-color, #a41b06);
+  box-shadow: inset 0 0 0 1px var(--primary-color, #a41b06);
+}
+.rf-toggle-group--standard .rf-toggle-btn--selected:hover {
+  background: var(--hover-color, #fff5f5);
+}
+.rf-toggle-btn--disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+  pointer-events: none;
+}
+.rf-toggle-btn:focus-visible {
+  outline: 2px solid var(--primary-color, #a41b06);
+  outline-offset: -2px;
+  z-index: 2;
+}
+.rf-toggle-btn::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.2);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.rf-toggle-btn:active:not(.rf-toggle-btn--disabled)::after {
+  opacity: 1;
+}
+.rf-toggle-btn--icon-only {
+  padding: 8px;
+  min-width: 40px;
+  min-height: 40px;
+}
+.rf-toggle-group--small .rf-toggle-btn--icon-only {
+  padding: 5px;
+  min-width: 32px;
+  min-height: 32px;
+}
+.rf-toggle-group--large .rf-toggle-btn--icon-only {
+  padding: 11px;
+  min-width: 50px;
+  min-height: 50px;
+}
+
+/* lib/styles/avatar.css */
+.rf-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  user-select: none;
+  border-radius: 50%;
+  background-color: var(--primary-color);
+  color: #ffffff;
+  font-family: var(--font-family);
+  font-weight: 500;
+  border: 2px solid var(--surface-color);
+  flex-shrink: 0;
+  position: relative;
+}
+.rf-avatar--circular {
+  border-radius: 50%;
+}
+.rf-avatar--rounded {
+  border-radius: 8px;
+}
+.rf-avatar--square {
+  border-radius: 0;
+}
+.rf-avatar--small {
+  width: 32px;
+  height: 32px;
+  font-size: 0.8125rem;
+}
+.rf-avatar--medium {
+  width: 40px;
+  height: 40px;
+  font-size: 1rem;
+}
+.rf-avatar--large {
+  width: 56px;
+  height: 56px;
+  font-size: 1.375rem;
+}
+.rf-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.rf-avatar__initials {
+  line-height: 1;
+  font-weight: 500;
+}
+.rf-avatar-group {
+  display: inline-flex;
+  flex-direction: row-reverse;
+}
+.rf-avatar-group .rf-avatar {
+  margin-left: -8px;
+  transition: transform 0.2s ease;
+}
+.rf-avatar-group .rf-avatar:last-child {
+  margin-left: 0;
+}
+.rf-avatar-group:hover .rf-avatar {
+  transform: translateX(-4px);
+}
+.rf-avatar-group--spacing-small .rf-avatar {
+  margin-left: -12px;
+}
+.rf-avatar-group--spacing-medium .rf-avatar {
+  margin-left: -8px;
+}
+.rf-avatar-group__overflow {
+  background-color: var(--border-color);
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+/* lib/styles/chip.css */
+.rf-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border-radius: 16px;
+  font-family: var(--font-family);
+  font-weight: 400;
+  white-space: nowrap;
+  cursor: default;
+  transition:
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    opacity 0.2s ease;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  outline: none;
+  text-decoration: none;
+  vertical-align: middle;
+}
+.rf-chip--medium {
+  height: 32px;
+  padding: 0 12px;
+  font-size: 0.8125rem;
+}
+.rf-chip--small {
+  height: 24px;
+  padding: 0 8px;
+  font-size: 0.75rem;
+}
+.rf-chip--clickable {
+  cursor: pointer;
+}
+.rf-chip--clickable:hover:not(.rf-chip--disabled) {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
+  filter: brightness(0.95);
+}
+.rf-chip--clickable:focus-visible:not(.rf-chip--disabled) {
+  box-shadow: 0 0 0 3px rgba(164, 27, 6, 0.25);
+}
+.rf-chip--disabled {
+  opacity: 0.38;
+  pointer-events: none;
+}
+.rf-chip__icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 1rem;
+  margin-left: -4px;
+}
+.rf-chip--small .rf-chip__icon {
+  font-size: 0.875rem;
+  margin-left: -2px;
+}
+.rf-chip__avatar {
+  margin-left: -8px;
+  width: 24px;
+  height: 24px;
+  font-size: 0.6875rem !important;
+  border: none !important;
+}
+.rf-chip--small .rf-chip__avatar {
+  margin-left: -6px;
+  width: 18px;
+  height: 18px;
+}
+.rf-chip__delete {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  margin-right: -4px;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  font-size: 1rem;
+  line-height: 1;
+  transition: opacity 0.2s ease;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+}
+.rf-chip__delete:hover {
+  opacity: 1;
+}
+.rf-chip--small .rf-chip__delete {
+  margin-right: -2px;
+  width: 14px;
+  height: 14px;
+  font-size: 0.875rem;
+}
+.rf-chip__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rf-chip--filled.rf-chip--color-default {
+  background-color: #f5f5f5;
+  color: var(--text-color);
+  border-color: transparent;
+}
+.rf-chip--filled.rf-chip--color-primary {
+  background-color: var(--selection-color);
+  color: var(--primary-color);
+  border-color: transparent;
+}
+.rf-chip--filled.rf-chip--color-secondary {
+  background-color: #fce4ec;
+  color: var(--secondary-color);
+  border-color: transparent;
+}
+.rf-chip--filled.rf-chip--color-success {
+  background-color: #f0fdf4;
+  color: #15803d;
+  border-color: transparent;
+}
+.rf-chip--filled.rf-chip--color-error {
+  background-color: #fef2f2;
+  color: #dc2626;
+  border-color: transparent;
+}
+.rf-chip--filled.rf-chip--color-warning {
+  background-color: #fffbeb;
+  color: #d97706;
+  border-color: transparent;
+}
+.rf-chip--filled.rf-chip--color-info {
+  background-color: #eff6ff;
+  color: #2563eb;
+  border-color: transparent;
+}
+.rf-chip--outlined.rf-chip--color-default {
+  background-color: transparent;
+  color: var(--text-color);
+  border-color: var(--border-color);
+}
+.rf-chip--outlined.rf-chip--color-primary {
+  background-color: transparent;
+  color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+.rf-chip--outlined.rf-chip--color-secondary {
+  background-color: transparent;
+  color: var(--secondary-color);
+  border-color: var(--secondary-color);
+}
+.rf-chip--outlined.rf-chip--color-success {
+  background-color: transparent;
+  color: #15803d;
+  border-color: #15803d;
+}
+.rf-chip--outlined.rf-chip--color-error {
+  background-color: transparent;
+  color: #dc2626;
+  border-color: #dc2626;
+}
+.rf-chip--outlined.rf-chip--color-warning {
+  background-color: transparent;
+  color: #d97706;
+  border-color: #d97706;
+}
+.rf-chip--outlined.rf-chip--color-info {
+  background-color: transparent;
+  color: #2563eb;
+  border-color: #2563eb;
+}
+
+/* lib/styles/divider.css */
+.rf-divider {
+  margin: 0;
+  border: none;
+  flex-shrink: 0;
+}
+.rf-divider--horizontal {
+  display: block;
+  height: 1px;
+  background-color: var(--border-color);
+  width: 100%;
+}
+.rf-divider--horizontal.rf-divider--inset {
+  margin-left: 72px;
+  width: calc(100% - 72px);
+}
+.rf-divider--horizontal.rf-divider--middle {
+  margin-left: 16px;
+  margin-right: 16px;
+  width: calc(100% - 32px);
+}
+.rf-divider--horizontal.rf-divider--light {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.rf-divider--vertical {
+  display: inline-block;
+  width: 1px;
+  background-color: var(--border-color);
+  height: 100%;
+  min-height: 1em;
+  align-self: stretch;
+}
+.rf-divider--vertical.rf-divider--inset {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  height: calc(100% - 16px);
+}
+.rf-divider--vertical.rf-divider--middle {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  height: calc(100% - 8px);
+}
+.rf-divider--vertical.rf-divider--flex-item {
+  align-self: stretch;
+  height: auto;
+}
+.rf-divider--vertical.rf-divider--light {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.rf-divider--with-children {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background-color: transparent;
+  height: auto;
+}
+.rf-divider--with-children::before,
+.rf-divider--with-children::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background-color: var(--border-color);
+}
+.rf-divider--with-children.rf-divider--light::before,
+.rf-divider--with-children.rf-divider--light::after {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.rf-divider--with-children.rf-divider--text-left::before {
+  flex: 0 0 16px;
+}
+.rf-divider--with-children.rf-divider--text-right::after {
+  flex: 0 0 16px;
+}
+.rf-divider__text {
+  font-family: var(--font-family);
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  font-weight: 400;
+}
+
+/* lib/styles/list.css */
+.rf-list {
+  margin: 0;
+  padding: 8px 0;
+  list-style: none;
+  position: relative;
+  font-family: var(--font-family);
+}
+.rf-list--disable-padding {
+  padding: 0;
+}
+.rf-list--dense {
+  padding: 4px 0;
+}
+.rf-list-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+}
+.rf-list-item--dense {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.rf-list-item--disable-padding {
+  padding: 0;
+}
+.rf-list-item--align-start {
+  align-items: flex-start;
+}
+.rf-list-item--divider {
+  border-bottom: 1px solid var(--border-color);
+}
+.rf-list-item__content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.rf-list-item__secondary-action {
+  flex-shrink: 0;
+  margin-left: 16px;
+  display: inline-flex;
+  align-items: center;
+}
+.rf-list-item-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 4px 0;
+}
+.rf-list-item-text--inset {
+  padding-left: 56px;
+}
+.rf-list-item-text__primary {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--text-color);
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rf-list-item-text__secondary {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: var(--text-secondary);
+  line-height: 1.43;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rf-list--dense .rf-list-item-text__primary {
+  font-size: 0.875rem;
+}
+.rf-list--dense .rf-list-item-text__secondary {
+  font-size: 0.75rem;
+}
+.rf-list-item-icon {
+  min-width: 56px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+.rf-list--dense .rf-list-item-icon {
+  min-width: 48px;
+}
+.rf-list-item-button {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  width: 100%;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  font-family: var(--font-family);
+  font-size: 1rem;
+  color: var(--text-color);
+  text-decoration: none;
+  box-sizing: border-box;
+  transition: background-color 0.2s ease;
+  border-radius: 0;
+  outline: none;
+  position: relative;
+}
+.rf-list-item-button:hover:not(.rf-list-item-button--disabled) {
+  background-color: var(--hover-color);
+}
+.rf-list-item-button:focus-visible:not(.rf-list-item-button--disabled) {
+  background-color: var(--hover-color);
+  box-shadow: inset 0 0 0 2px var(--primary-color);
+}
+.rf-list-item-button--selected {
+  background-color: var(--selection-color);
+  color: var(--primary-color);
+}
+.rf-list-item-button--selected:hover {
+  background-color: #f8c4d0;
+}
+.rf-list-item-button--selected .rf-list-item-icon {
+  color: var(--primary-color);
+}
+.rf-list-item-button--disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.rf-list-item-button--dense {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.rf-list-item-button--align-start {
+  align-items: flex-start;
+}
+.rf-list-subheader {
+  font-family: var(--font-family);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  line-height: 2.75rem;
+  padding: 0 16px;
+  background-color: var(--surface-color);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: block;
+}
+.rf-list-subheader--inset {
+  padding-left: 72px;
+}
+.rf-list-subheader--disable-sticky {
+  position: static;
+}
+.rf-list-subheader--disable-gutters {
+  padding-left: 0;
+  padding-right: 0;
+}
+.rf-list-subheader--color-primary {
+  color: var(--primary-color);
+}
+.rf-list-subheader--color-inherit {
+  color: inherit;
+}
+
+/* lib/styles/typography.css */
+.rf-typography {
+  font-family: var(--font-family);
+  margin: 0;
+  padding: 0;
+}
+.rf-typography--h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.01562em;
+}
+.rf-typography--h2 {
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.00833em;
+}
+.rf-typography--h3 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: 0;
+}
+.rf-typography--h4 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.35;
+  letter-spacing: 0.00735em;
+}
+.rf-typography--h5 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: 0;
+}
+.rf-typography--h6 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.45;
+  letter-spacing: 0.0075em;
+}
+.rf-typography--subtitle1 {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.75;
+  letter-spacing: 0.00938em;
+}
+.rf-typography--subtitle2 {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.57;
+  letter-spacing: 0.00714em;
+}
+.rf-typography--body1 {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.6;
+  letter-spacing: 0.00938em;
+}
+.rf-typography--body2 {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0.01071em;
+}
+.rf-typography--caption {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.66;
+  letter-spacing: 0.03333em;
+  display: inline-block;
+}
+.rf-typography--overline {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 2.66;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: inline-block;
+}
+.rf-typography--button {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.75;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  display: inline-block;
+}
+.rf-typography--align-left {
+  text-align: left;
+}
+.rf-typography--align-center {
+  text-align: center;
+}
+.rf-typography--align-right {
+  text-align: right;
+}
+.rf-typography--align-justify {
+  text-align: justify;
+}
+.rf-typography--align-inherit {
+  text-align: inherit;
+}
+.rf-typography--color-primary {
+  color: var(--primary-color);
+}
+.rf-typography--color-secondary {
+  color: var(--secondary-color);
+}
+.rf-typography--color-textPrimary {
+  color: var(--text-color);
+}
+.rf-typography--color-textSecondary {
+  color: var(--text-secondary);
+}
+.rf-typography--color-error {
+  color: #dc2626;
+}
+.rf-typography--no-wrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rf-typography--gutter-bottom {
+  margin-bottom: 0.35em;
+}
+.rf-typography--paragraph {
+  margin-bottom: 16px;
+}
+.rf-typography--weight-light {
+  font-weight: 300;
+}
+.rf-typography--weight-regular {
+  font-weight: 400;
+}
+.rf-typography--weight-medium {
+  font-weight: 500;
+}
+.rf-typography--weight-bold {
+  font-weight: 700;
+}
+
+/* lib/styles/skeleton.css */
+.rf-skeleton {
+  background-color: rgba(0, 0, 0, 0.08);
+  display: block;
+  box-sizing: border-box;
+}
+.rf-skeleton--text {
+  border-radius: 4px;
+  height: 1em;
+  margin-bottom: 0.35em;
+  transform: scale(1, 0.7);
+  transform-origin: 0 50%;
+}
+.rf-skeleton--circular {
+  border-radius: 50%;
+}
+.rf-skeleton--rectangular {
+  border-radius: 0;
+}
+.rf-skeleton--rounded {
+  border-radius: 8px;
+}
+@keyframes rf-skeleton-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.rf-skeleton--pulse {
+  animation: rf-skeleton-pulse 1.8s ease-in-out 0.5s infinite;
+}
+@keyframes rf-skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+.rf-skeleton--wave {
+  position: relative;
+  overflow: hidden;
+}
+.rf-skeleton--wave::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.6) 50%,
+      transparent 100%);
+  animation: rf-skeleton-wave 1.8s linear 0.5s infinite;
+  transform: translateX(-100%);
+}
+.rf-skeleton--no-animation {
+  animation: none;
+}
+.rf-skeleton--no-animation::after {
+  display: none;
+}
+
+/* lib/styles/tooltip.css */
+.rf-tooltip-wrapper {
+  display: inline-flex;
+  position: relative;
+}
+.rf-tooltip {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: none;
+  background-color: #2d2d2d;
+  color: #ffffff;
+  font-family: var(--font-family);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1.4;
+  padding: 6px 10px;
+  border-radius: 4px;
+  max-width: 300px;
+  word-wrap: break-word;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  transition: opacity 0.15s ease;
+  opacity: 0;
+}
+.rf-tooltip--visible {
+  opacity: 1;
+}
+.rf-tooltip__arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: #2d2d2d;
+  transform: rotate(45deg);
+}
+.rf-tooltip--placement-top .rf-tooltip__arrow,
+.rf-tooltip--placement-top-start .rf-tooltip__arrow,
+.rf-tooltip--placement-top-end .rf-tooltip__arrow {
+  bottom: -4px;
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+.rf-tooltip--placement-bottom .rf-tooltip__arrow,
+.rf-tooltip--placement-bottom-start .rf-tooltip__arrow,
+.rf-tooltip--placement-bottom-end .rf-tooltip__arrow {
+  top: -4px;
+  box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1);
+}
+.rf-tooltip--placement-left .rf-tooltip__arrow,
+.rf-tooltip--placement-left-start .rf-tooltip__arrow,
+.rf-tooltip--placement-left-end .rf-tooltip__arrow {
+  right: -4px;
+  box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.1);
+}
+.rf-tooltip--placement-right .rf-tooltip__arrow,
+.rf-tooltip--placement-right-start .rf-tooltip__arrow,
+.rf-tooltip--placement-right-end .rf-tooltip__arrow {
+  left: -4px;
+  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* lib/styles/box.css */
+.rf-box {
+  box-sizing: border-box;
+}
+
+/* lib/styles/stack.css */
+.rf-stack {
+  box-sizing: border-box;
+  display: flex;
+}
+.rf-stack-divider {
+  flex-shrink: 0;
+}
+
+/* lib/styles/grid.css */
+.rf-grid-container {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+.rf-grid-item {
+  box-sizing: border-box;
+  min-width: 0;
+}
+.rf-grid-xs-1 {
+  grid-column: span 1;
+}
+.rf-grid-xs-2 {
+  grid-column: span 2;
+}
+.rf-grid-xs-3 {
+  grid-column: span 3;
+}
+.rf-grid-xs-4 {
+  grid-column: span 4;
+}
+.rf-grid-xs-5 {
+  grid-column: span 5;
+}
+.rf-grid-xs-6 {
+  grid-column: span 6;
+}
+.rf-grid-xs-7 {
+  grid-column: span 7;
+}
+.rf-grid-xs-8 {
+  grid-column: span 8;
+}
+.rf-grid-xs-9 {
+  grid-column: span 9;
+}
+.rf-grid-xs-10 {
+  grid-column: span 10;
+}
+.rf-grid-xs-11 {
+  grid-column: span 11;
+}
+.rf-grid-xs-12 {
+  grid-column: span 12;
+}
+.rf-grid-xs-auto {
+  grid-column: auto;
+}
+@media (min-width: 600px) {
+  .rf-grid-sm-1 {
+    grid-column: span 1;
+  }
+  .rf-grid-sm-2 {
+    grid-column: span 2;
+  }
+  .rf-grid-sm-3 {
+    grid-column: span 3;
+  }
+  .rf-grid-sm-4 {
+    grid-column: span 4;
+  }
+  .rf-grid-sm-5 {
+    grid-column: span 5;
+  }
+  .rf-grid-sm-6 {
+    grid-column: span 6;
+  }
+  .rf-grid-sm-7 {
+    grid-column: span 7;
+  }
+  .rf-grid-sm-8 {
+    grid-column: span 8;
+  }
+  .rf-grid-sm-9 {
+    grid-column: span 9;
+  }
+  .rf-grid-sm-10 {
+    grid-column: span 10;
+  }
+  .rf-grid-sm-11 {
+    grid-column: span 11;
+  }
+  .rf-grid-sm-12 {
+    grid-column: span 12;
+  }
+  .rf-grid-sm-auto {
+    grid-column: auto;
+  }
+}
+@media (min-width: 900px) {
+  .rf-grid-md-1 {
+    grid-column: span 1;
+  }
+  .rf-grid-md-2 {
+    grid-column: span 2;
+  }
+  .rf-grid-md-3 {
+    grid-column: span 3;
+  }
+  .rf-grid-md-4 {
+    grid-column: span 4;
+  }
+  .rf-grid-md-5 {
+    grid-column: span 5;
+  }
+  .rf-grid-md-6 {
+    grid-column: span 6;
+  }
+  .rf-grid-md-7 {
+    grid-column: span 7;
+  }
+  .rf-grid-md-8 {
+    grid-column: span 8;
+  }
+  .rf-grid-md-9 {
+    grid-column: span 9;
+  }
+  .rf-grid-md-10 {
+    grid-column: span 10;
+  }
+  .rf-grid-md-11 {
+    grid-column: span 11;
+  }
+  .rf-grid-md-12 {
+    grid-column: span 12;
+  }
+  .rf-grid-md-auto {
+    grid-column: auto;
+  }
+}
+@media (min-width: 1200px) {
+  .rf-grid-lg-1 {
+    grid-column: span 1;
+  }
+  .rf-grid-lg-2 {
+    grid-column: span 2;
+  }
+  .rf-grid-lg-3 {
+    grid-column: span 3;
+  }
+  .rf-grid-lg-4 {
+    grid-column: span 4;
+  }
+  .rf-grid-lg-5 {
+    grid-column: span 5;
+  }
+  .rf-grid-lg-6 {
+    grid-column: span 6;
+  }
+  .rf-grid-lg-7 {
+    grid-column: span 7;
+  }
+  .rf-grid-lg-8 {
+    grid-column: span 8;
+  }
+  .rf-grid-lg-9 {
+    grid-column: span 9;
+  }
+  .rf-grid-lg-10 {
+    grid-column: span 10;
+  }
+  .rf-grid-lg-11 {
+    grid-column: span 11;
+  }
+  .rf-grid-lg-12 {
+    grid-column: span 12;
+  }
+  .rf-grid-lg-auto {
+    grid-column: auto;
+  }
+}
+@media (min-width: 1536px) {
+  .rf-grid-xl-1 {
+    grid-column: span 1;
+  }
+  .rf-grid-xl-2 {
+    grid-column: span 2;
+  }
+  .rf-grid-xl-3 {
+    grid-column: span 3;
+  }
+  .rf-grid-xl-4 {
+    grid-column: span 4;
+  }
+  .rf-grid-xl-5 {
+    grid-column: span 5;
+  }
+  .rf-grid-xl-6 {
+    grid-column: span 6;
+  }
+  .rf-grid-xl-7 {
+    grid-column: span 7;
+  }
+  .rf-grid-xl-8 {
+    grid-column: span 8;
+  }
+  .rf-grid-xl-9 {
+    grid-column: span 9;
+  }
+  .rf-grid-xl-10 {
+    grid-column: span 10;
+  }
+  .rf-grid-xl-11 {
+    grid-column: span 11;
+  }
+  .rf-grid-xl-12 {
+    grid-column: span 12;
+  }
+  .rf-grid-xl-auto {
+    grid-column: auto;
+  }
+}
+
+/* lib/styles/paper.css */
+.rf-paper {
+  box-sizing: border-box;
+  background-color: var(--surface-color);
+  color: var(--text-color);
+  border-radius: 12px;
+  transition: box-shadow 0.2s ease;
+}
+.rf-paper-square {
+  border-radius: 0;
+}
+.rf-paper-outlined {
+  border: 1px solid var(--border-color);
+  box-shadow: none !important;
+}
+.rf-paper-elevation-0 {
+  box-shadow: none;
+}
+.rf-paper-elevation-1 {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+.rf-paper-elevation-2 {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.07);
+}
+.rf-paper-elevation-3 {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
+}
+.rf-paper-elevation-4 {
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.10);
+}
+.rf-paper-elevation-5 {
+  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14), 0 9px 18px rgba(0, 0, 0, 0.10);
+}
+.rf-paper-elevation-6 {
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.10);
+}
+.rf-paper-elevation-7 {
+  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.15), 0 11px 22px rgba(0, 0, 0, 0.10);
+}
+.rf-paper-elevation-8 {
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
+}
+.rf-paper-elevation-9 {
+  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.16);
+}
+.rf-paper-elevation-10 {
+  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.17);
+}
+.rf-paper-elevation-11 {
+  box-shadow: 0 29px 58px rgba(0, 0, 0, 0.17);
+}
+.rf-paper-elevation-12 {
+  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
+}
+.rf-paper-elevation-13 {
+  box-shadow: 0 31px 62px rgba(0, 0, 0, 0.18);
+}
+.rf-paper-elevation-14 {
+  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.19);
+}
+.rf-paper-elevation-15 {
+  box-shadow: 0 33px 66px rgba(0, 0, 0, 0.19);
+}
+.rf-paper-elevation-16 {
+  box-shadow: 0 34px 68px rgba(0, 0, 0, 0.20);
+}
+.rf-paper-elevation-17 {
+  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.20);
+}
+.rf-paper-elevation-18 {
+  box-shadow: 0 36px 72px rgba(0, 0, 0, 0.21);
+}
+.rf-paper-elevation-19 {
+  box-shadow: 0 37px 74px rgba(0, 0, 0, 0.21);
+}
+.rf-paper-elevation-20 {
+  box-shadow: 0 38px 76px rgba(0, 0, 0, 0.22);
+}
+.rf-paper-elevation-21 {
+  box-shadow: 0 39px 78px rgba(0, 0, 0, 0.22);
+}
+.rf-paper-elevation-22 {
+  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.23);
+}
+.rf-paper-elevation-23 {
+  box-shadow: 0 41px 82px rgba(0, 0, 0, 0.23);
+}
+.rf-paper-elevation-24 {
+  box-shadow: 0 42px 84px rgba(0, 0, 0, 0.24);
+}
+
+/* lib/styles/card.css */
+.rf-card {
+  box-sizing: border-box;
+  background-color: var(--surface-color);
+  color: var(--text-color);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  position: relative;
+}
+.rf-card-elevation-0 {
+  box-shadow: none;
+}
+.rf-card-elevation-1 {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+.rf-card-elevation-2 {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.07);
+}
+.rf-card-elevation-3 {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
+}
+.rf-card-elevation-4 {
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.10);
+}
+.rf-card-elevation-8 {
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
+}
+.rf-card-outlined {
+  border: 1px solid var(--border-color);
+  box-shadow: none !important;
+}
+.rf-card:not(.rf-card-outlined):hover {
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.10);
+  transform: translateY(-2px);
+}
+.rf-card-content {
+  padding: 16px;
+  box-sizing: border-box;
+}
+.rf-card-content:last-child {
+  padding-bottom: 24px;
+}
+.rf-card-header {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  box-sizing: border-box;
+  gap: 16px;
+}
+.rf-card-header-avatar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.rf-card-header-content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.rf-card-header-title {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text-color);
+  line-height: 1.4;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rf-card-header-subheader {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  line-height: 1.4;
+  margin: 2px 0 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rf-card-header-action {
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin-top: -4px;
+  margin-right: -8px;
+}
+.rf-card-media {
+  display: block;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 100%;
+  object-fit: cover;
+}
+.rf-card-actions {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  box-sizing: border-box;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.rf-card-actions-spacing > :not(:first-child) {
+  margin-left: 0;
+}
+
+/* lib/styles/accordion.css */
+.rf-accordion {
+  box-sizing: border-box;
+  background-color: var(--surface-color);
+  color: var(--text-color);
+  border-top: 1px solid var(--border-color);
+  transition: margin 0.2s ease;
+}
+.rf-accordion:last-of-type {
+  border-bottom: 1px solid var(--border-color);
+}
+.rf-accordion-expanded:not(.rf-accordion-no-gutters) {
+  margin: 16px 0;
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color) !important;
+}
+.rf-accordion-no-gutters {
+  margin: 0;
+}
+.rf-accordion-square {
+  border-radius: 0;
+}
+.rf-accordion-rounded {
+  border-radius: 0;
+}
+.rf-accordion-rounded:first-of-type {
+  border-radius: 12px 12px 0 0;
+}
+.rf-accordion-rounded:last-of-type {
+  border-radius: 0 0 12px 12px;
+}
+.rf-accordion-rounded:only-of-type {
+  border-radius: 12px;
+}
+.rf-accordion-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.rf-accordion-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  min-height: 48px;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease, min-height 0.2s ease;
+  outline: none;
+  border: none;
+  background: transparent;
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--text-color);
+  font-family: var(--font-family);
+  font-size: 1rem;
+}
+.rf-accordion-summary:hover {
+  background-color: var(--hover-color);
+}
+.rf-accordion-summary-expanded {
+  min-height: 56px;
+}
+.rf-accordion-summary-content {
+  flex: 1 1 auto;
+  text-align: left;
+  margin: 12px 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.rf-accordion-summary-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  transition: transform 0.3s ease;
+  margin-left: 8px;
+}
+.rf-accordion-icon-expanded {
+  transform: rotate(180deg);
+}
+.rf-accordion-details-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease;
+}
+.rf-accordion-details-wrapper-open {
+  grid-template-rows: 1fr;
+}
+.rf-accordion-details-inner {
+  overflow: hidden;
+}
+.rf-accordion-details {
+  padding: 8px 16px 16px;
+  font-size: 0.9375rem;
+  color: var(--text-color);
+  box-sizing: border-box;
+  border-top: 1px solid var(--border-color);
+}
+
+/* lib/styles/tabs.css */
+.rf-tabs {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.rf-tabs--vertical {
+  flex-direction: row;
+}
+.rf-tabs__list {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+.rf-tabs--vertical .rf-tabs__list {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 1px solid var(--border-color);
+  min-width: 160px;
+}
+.rf-tabs--fullWidth .rf-tabs__list {
+  width: 100%;
+}
+.rf-tabs--fullWidth .rf-tab {
+  flex: 1;
+}
+.rf-tabs--centered .rf-tabs__list {
+  justify-content: center;
+}
+.rf-tabs--scrollable .rf-tabs__list {
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.rf-tabs--scrollable .rf-tabs__list::-webkit-scrollbar {
+  display: none;
+}
+.rf-tabs__content {
+  flex: 1;
+  padding: 16px 0;
+}
+.rf-tabs--vertical .rf-tabs__content {
+  padding: 0 16px;
+}
+.rf-tabs__indicator {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background-color: var(--primary-color);
+  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
+.rf-tabs--indicator-secondary .rf-tabs__indicator {
+  background-color: var(--secondary-color);
+}
+.rf-tabs--vertical .rf-tabs__indicator {
+  left: auto;
+  right: 0;
+  bottom: auto;
+  width: 2px;
+  height: auto;
+  transition: top 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.rf-tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 12px 16px;
+  min-height: 48px;
+  min-width: 72px;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-family: var(--font-family);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  letter-spacing: 0.02857em;
+  text-transform: uppercase;
+  transition: color 0.2s, background-color 0.15s;
+  position: relative;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+  flex-shrink: 0;
+}
+.rf-tab:hover:not(.rf-tab--disabled) {
+  background-color: var(--hover-color);
+  color: var(--primary-color);
+}
+.rf-tab--active {
+  color: var(--primary-color);
+}
+.rf-tabs--text-inherit .rf-tab--active {
+  color: inherit;
+}
+.rf-tab--disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.rf-tab--wrapped {
+  white-space: normal;
+  min-height: 72px;
+  flex-direction: column;
+}
+.rf-tab--icon-top,
+.rf-tab--icon-bottom {
+  flex-direction: column;
+  min-height: 72px;
+}
+.rf-tab--icon-start {
+  flex-direction: row;
+}
+.rf-tab--icon-end {
+  flex-direction: row-reverse;
+}
+.rf-tab__icon {
+  display: flex;
+  align-items: center;
+  font-size: 1.25rem;
+}
+
+/* lib/styles/breadcrumbs.css */
+.rf-breadcrumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
+  font-family: var(--font-family);
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.rf-breadcrumbs__item {
+  display: flex;
+  align-items: center;
+}
+.rf-breadcrumbs__separator {
+  display: flex;
+  align-items: center;
+  margin: 0 8px;
+  color: var(--text-secondary);
+  user-select: none;
+  font-size: 0.875rem;
+}
+.rf-breadcrumbs__current {
+  color: var(--text-color);
+  font-weight: 500;
+}
+.rf-breadcrumbs__collapse-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 0 4px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  transition: background-color 0.15s, color 0.15s;
+  min-width: 24px;
+  height: 24px;
+}
+.rf-breadcrumbs__collapse-btn:hover {
+  background-color: var(--hover-color);
+  color: var(--primary-color);
+}
+
+/* lib/styles/stepper.css */
+.rf-stepper {
+  display: flex;
+  font-family: var(--font-family);
+}
+.rf-stepper--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+}
+.rf-stepper--vertical {
+  flex-direction: column;
+}
+.rf-step {
+  position: relative;
+  display: flex;
+}
+.rf-stepper--horizontal .rf-step {
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+}
+.rf-stepper--horizontal.rf-stepper--alternative-label .rf-step {
+  align-items: center;
+}
+.rf-stepper--vertical .rf-step {
+  flex-direction: column;
+}
+.rf-step-connector {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.rf-stepper--horizontal .rf-step-connector {
+  flex-direction: row;
+  padding: 0 8px;
+  margin-top: 12px;
+}
+.rf-stepper--vertical .rf-step-connector {
+  flex-direction: column;
+  margin-left: 11px;
+  padding: 4px 0;
+  min-height: 24px;
+}
+.rf-step-connector__line {
+  display: block;
+  border-color: var(--border-color);
+  transition: border-color 0.3s;
+}
+.rf-stepper--horizontal .rf-step-connector__line {
+  border-top-style: solid;
+  border-top-width: 1px;
+  width: 100%;
+}
+.rf-stepper--vertical .rf-step-connector__line {
+  border-left-style: solid;
+  border-left-width: 1px;
+  min-height: 24px;
+}
+.rf-step-connector--completed .rf-step-connector__line,
+.rf-step-connector--active .rf-step-connector__line {
+  border-color: var(--primary-color);
+}
+.rf-step__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.rf-stepper--horizontal .rf-step__header {
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+.rf-stepper--horizontal.rf-stepper--alternative-label .rf-step__header {
+  flex-direction: column;
+}
+.rf-step-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: 4px 0;
+}
+.rf-stepper--alternative-label .rf-step-label {
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.rf-step-label__icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.rf-step-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background-color: var(--border-color);
+  color: var(--text-secondary);
+  transition: background-color 0.3s, color 0.3s;
+  flex-shrink: 0;
+}
+.rf-step-icon--active {
+  background-color: var(--primary-color);
+  color: #fff;
+}
+.rf-step-icon--completed {
+  background-color: var(--primary-color);
+  color: #fff;
+}
+.rf-step-icon--error {
+  background-color: #d32f2f;
+  color: #fff;
+}
+.rf-step-label__text {
+  display: flex;
+  flex-direction: column;
+}
+.rf-step-label__title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  transition: color 0.2s;
+}
+.rf-step-label__title--active {
+  color: var(--text-color);
+  font-weight: 600;
+}
+.rf-step-label__title--completed {
+  color: var(--text-color);
+}
+.rf-step-label__title--error {
+  color: #d32f2f;
+}
+.rf-step-label__optional {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+.rf-step-button {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-family: var(--font-family);
+  transition: background-color 0.15s;
+  text-align: left;
+}
+.rf-step-button:hover {
+  background-color: var(--hover-color);
+}
+.rf-step-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.rf-step-content {
+  margin-left: 12px;
+  padding: 8px 0 8px 20px;
+  border-left: 1px solid var(--border-color);
+  overflow: hidden;
+  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.rf-step-content--last {
+  border-left: none;
+}
+.rf-stepper--horizontal .rf-stepper__step-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+}
+.rf-stepper--horizontal .rf-stepper__step-wrap {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* lib/styles/menu.css */
+.rf-menu-portal {
+  position: fixed;
+  inset: 0;
+  z-index: 1300;
+  pointer-events: none;
+}
+.rf-menu-backdrop {
+  position: fixed;
+  inset: 0;
+  pointer-events: all;
+}
+.rf-menu-paper {
+  position: fixed;
+  background-color: var(--surface-color);
+  border-radius: 8px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.10),
+    0 10px 15px -3px rgba(0, 0, 0, 0.10),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+  min-width: 120px;
+  max-width: 360px;
+  overflow: hidden;
+  pointer-events: all;
+  transform-origin: top left;
+  animation: rf-menu-appear 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1300;
+}
+@keyframes rf-menu-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.rf-menu-paper--closing {
+  animation: rf-menu-disappear 0.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+@keyframes rf-menu-disappear {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+.rf-menu-list {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  font-family: var(--font-family);
+}
+.rf-menu-list__subheader {
+  padding: 6px 16px 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.rf-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  font-size: 0.875rem;
+  font-family: var(--font-family);
+  color: var(--text-color);
+  cursor: pointer;
+  transition: background-color 0.12s;
+  user-select: none;
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  min-height: 36px;
+  list-style: none;
+}
+.rf-menu-item:hover:not(.rf-menu-item--disabled) {
+  background-color: var(--hover-color);
+}
+.rf-menu-item--selected {
+  background-color: var(--selection-color);
+  color: var(--primary-color);
+  font-weight: 500;
+}
+.rf-menu-item--selected:hover {
+  background-color: var(--selection-color);
+}
+.rf-menu-item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.rf-menu-item--dense {
+  padding: 4px 16px;
+  min-height: 28px;
+  font-size: 0.8125rem;
+}
+.rf-menu-item--divider {
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 4px;
+  padding-bottom: 8px;
+}
+.rf-menu-item__icon {
+  display: flex;
+  align-items: center;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+  font-size: 1.1rem;
+}
+.rf-menu-divider {
+  border: none;
+  border-top: 1px solid var(--border-color);
+  margin: 4px 0;
+}
+
+/* lib/styles/drawer.css */
+.rf-drawer-root {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+}
+.rf-drawer-root--permanent {
+  position: relative;
+  inset: auto;
+  z-index: auto;
+  display: flex;
+}
+.rf-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1200;
+  transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
+  opacity: 1;
+}
+.rf-drawer-backdrop--hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+.rf-drawer-paper {
+  position: fixed;
+  background-color: var(--surface-color);
+  box-shadow:
+    0 8px 10px -5px rgba(0, 0, 0, 0.2),
+    0 16px 24px 2px rgba(0, 0, 0, 0.14),
+    0 6px 30px 5px rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden auto;
+  z-index: 1201;
+  transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
+}
+.rf-drawer-paper--left {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  transform: translateX(-100%);
+}
+.rf-drawer-paper--left.rf-drawer-paper--open {
+  transform: translateX(0);
+}
+.rf-drawer-paper--right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: translateX(100%);
+}
+.rf-drawer-paper--right.rf-drawer-paper--open {
+  transform: translateX(0);
+}
+.rf-drawer-paper--top {
+  top: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(-100%);
+}
+.rf-drawer-paper--top.rf-drawer-paper--open {
+  transform: translateY(0);
+}
+.rf-drawer-paper--bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(100%);
+}
+.rf-drawer-paper--bottom.rf-drawer-paper--open {
+  transform: translateY(0);
+}
+.rf-drawer-paper--persistent {
+  position: relative;
+  box-shadow: none;
+  border-right: 1px solid var(--border-color);
+  z-index: auto;
+}
+.rf-drawer-paper--persistent.rf-drawer-paper--left {
+  transform: none;
+}
+.rf-drawer-paper--persistent.rf-drawer-paper--right {
+  transform: none;
+  border-right: none;
+  border-left: 1px solid var(--border-color);
+}
+.rf-drawer-paper--persistent:not(.rf-drawer-paper--open) {
+  width: 0 !important;
+  overflow: hidden;
+}
+.rf-drawer-paper--permanent {
+  position: relative;
+  transform: none;
+  box-shadow: none;
+  border-right: 1px solid var(--border-color);
+  z-index: auto;
+  transition: none;
+}
+
+/* lib/styles/snackbar.css */
+.rf-snackbar-root {
+  position: fixed;
+  z-index: 1400;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+.rf-snackbar-root--bottom-left {
+  bottom: 24px;
+  left: 24px;
+  align-items: flex-start;
+}
+.rf-snackbar-root--bottom-center {
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.rf-snackbar-root--bottom-right {
+  bottom: 24px;
+  right: 24px;
+  align-items: flex-end;
+}
+.rf-snackbar-root--top-left {
+  top: 24px;
+  left: 24px;
+  align-items: flex-start;
+}
+.rf-snackbar-root--top-center {
+  top: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.rf-snackbar-root--top-right {
+  top: 24px;
+  right: 24px;
+  align-items: flex-end;
+}
+.rf-snackbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 288px;
+  max-width: 560px;
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-family: var(--font-family);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.43;
+  box-shadow:
+    0 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0 6px 10px 0 rgba(0, 0, 0, 0.14),
+    0 1px 18px 0 rgba(0, 0, 0, 0.12);
+  pointer-events: all;
+  cursor: default;
+  transition: opacity 0.2s, transform 0.2s;
+}
+.rf-snackbar--entering,
+.rf-snackbar--entered {
+  opacity: 1;
+  transform: translateY(0);
+}
+.rf-snackbar--exiting,
+.rf-snackbar--exited {
+  opacity: 0;
+  transform: translateY(8px);
+}
+.rf-snackbar-root--top-left .rf-snackbar--exiting,
+.rf-snackbar-root--top-center .rf-snackbar--exiting,
+.rf-snackbar-root--top-right .rf-snackbar--exiting {
+  transform: translateY(-8px);
+}
+.rf-snackbar--slide-entering,
+.rf-snackbar--slide-entered {
+  opacity: 1;
+  transform: translateX(0);
+}
+.rf-snackbar--default {
+  background-color: #323232;
+  color: #fff;
+}
+.rf-snackbar--success.rf-snackbar--standard {
+  background-color: #f0fdf4;
+  color: #15803d;
+  border: 1px solid #bbf7d0;
+}
+.rf-snackbar--error.rf-snackbar--standard {
+  background-color: #fef2f2;
+  color: var(--primary-color);
+  border: 1px solid #fecaca;
+}
+.rf-snackbar--warning.rf-snackbar--standard {
+  background-color: #fffbeb;
+  color: #d97706;
+  border: 1px solid #fde68a;
+}
+.rf-snackbar--info.rf-snackbar--standard {
+  background-color: #eff6ff;
+  color: #2563eb;
+  border: 1px solid #bfdbfe;
+}
+.rf-snackbar--success.rf-snackbar--filled {
+  background-color: #15803d;
+  color: #fff;
+}
+.rf-snackbar--error.rf-snackbar--filled {
+  background-color: var(--primary-color);
+  color: #fff;
+}
+.rf-snackbar--warning.rf-snackbar--filled {
+  background-color: #d97706;
+  color: #fff;
+}
+.rf-snackbar--info.rf-snackbar--filled {
+  background-color: #2563eb;
+  color: #fff;
+}
+.rf-snackbar--success.rf-snackbar--outlined {
+  background-color: var(--surface-color);
+  color: #15803d;
+  border: 1px solid #15803d;
+}
+.rf-snackbar--error.rf-snackbar--outlined {
+  background-color: var(--surface-color);
+  color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+}
+.rf-snackbar--warning.rf-snackbar--outlined {
+  background-color: var(--surface-color);
+  color: #d97706;
+  border: 1px solid #d97706;
+}
+.rf-snackbar--info.rf-snackbar--outlined {
+  background-color: var(--surface-color);
+  color: #2563eb;
+  border: 1px solid #2563eb;
+}
+.rf-snackbar__message {
+  flex: 1;
+}
+.rf-snackbar__action {
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+  flex-shrink: 0;
+}
+.rf-snackbar__close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  color: inherit;
+  opacity: 0.7;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.15s, background-color 0.15s;
+  margin-left: 4px;
+  flex-shrink: 0;
+}
+.rf-snackbar__close-btn:hover {
+  opacity: 1;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.rf-snackbar__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  font-size: 1.1rem;
+}
+
+/* lib/styles/link.css */
+.rf-link {
+  font-family: var(--font-family);
+  cursor: pointer;
+  transition: color 0.15s, opacity 0.15s;
+  text-decoration: none;
+}
+.rf-link--underline-always {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.rf-link--underline-hover {
+  text-decoration: none;
+}
+.rf-link--underline-hover:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.rf-link--underline-none {
+  text-decoration: none;
+}
+.rf-link--color-primary {
+  color: var(--primary-color);
+}
+.rf-link--color-primary:hover {
+  color: var(--secondary-color);
+}
+.rf-link--color-secondary {
+  color: var(--secondary-color);
+}
+.rf-link--color-secondary:hover {
+  color: var(--primary-color);
+}
+.rf-link--color-textPrimary {
+  color: var(--text-color);
+}
+.rf-link--color-textPrimary:hover {
+  color: var(--primary-color);
+}
+.rf-link--color-textSecondary {
+  color: var(--text-secondary);
+}
+.rf-link--color-textSecondary:hover {
+  color: var(--text-color);
+}
+.rf-link--color-inherit {
+  color: inherit;
+}
+.rf-link:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* lib/styles/popper.css */
+.rf-popper {
+  position: fixed;
+  z-index: 1300;
+}
+.rf-popper--hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+.rf-popper--fade-entering,
+.rf-popper--fade-entered {
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+.rf-popper--fade-exiting {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.rf-popper--fade-exited {
+  opacity: 0;
+}
+
+/* lib/styles/popover.css */
+.rf-popover-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1299;
+  background-color: transparent;
+}
+.rf-popover-paper {
+  position: fixed;
+  z-index: 1300;
+  background-color: var(--surface-color);
+  border-radius: 8px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.10),
+    0 10px 15px -3px rgba(0, 0, 0, 0.10),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+  overflow: hidden auto;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
+  animation: rf-popover-appear 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+@keyframes rf-popover-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.rf-popover-paper--elevation-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+.rf-popover-paper--elevation-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+.rf-popover-paper--elevation-3 {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 10px 15px -3px rgba(0, 0, 0, 0.10);
+}
+.rf-popover-paper--elevation-8 {
+  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.15), 0 20px 40px -8px rgba(0, 0, 0, 0.12);
+}
+
+/* lib/styles/transitions.css */
+.rf-fade {
+  transition: opacity var(--rf-transition-duration, 225ms) cubic-bezier(0.4, 0, 0.2, 1);
+}
+.rf-fade--entering,
+.rf-fade--entered {
+  opacity: 1;
+}
+.rf-fade--exiting,
+.rf-fade--exited {
+  opacity: 0;
+}
+.rf-grow {
+  transition: opacity var(--rf-transition-duration, 225ms) cubic-bezier(0.4, 0, 0.2, 1), transform var(--rf-transition-duration, 225ms) cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center center;
+}
+.rf-grow--entering,
+.rf-grow--entered {
+  opacity: 1;
+  transform: scale(1);
+}
+.rf-grow--exiting,
+.rf-grow--exited {
+  opacity: 0;
+  transform: scale(0.75);
+}
+.rf-zoom {
+  transition: opacity var(--rf-transition-duration, 225ms) cubic-bezier(0.4, 0, 0.2, 1), transform var(--rf-transition-duration, 225ms) cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center center;
+}
+.rf-zoom--entering,
+.rf-zoom--entered {
+  opacity: 1;
+  transform: scale(1);
+}
+.rf-zoom--exiting,
+.rf-zoom--exited {
+  opacity: 0;
+  transform: scale(0);
+}
+.rf-slide {
+  transition: transform var(--rf-transition-duration, 225ms) cubic-bezier(0.4, 0, 0.2, 1), opacity var(--rf-transition-duration, 225ms) cubic-bezier(0.4, 0, 0.2, 1);
+}
+.rf-slide--entering,
+.rf-slide--entered {
+  opacity: 1;
+  transform: translate(0, 0) !important;
+}
+.rf-slide--exiting,
+.rf-slide--exited {
+}
+.rf-collapse {
+  overflow: hidden;
+  transition: height var(--rf-transition-duration, 225ms) cubic-bezier(0.4, 0, 0.2, 1), width var(--rf-transition-duration, 225ms) cubic-bezier(0.4, 0, 0.2, 1);
+}
+.rf-collapse--horizontal {
+  height: auto;
+  overflow-x: hidden;
+}
+.rf-collapse__inner {
+  display: flex;
+}
+.rf-collapse--horizontal .rf-collapse__inner {
+  width: max-content;
+}
+
+/* lib/styles/text-field.css */
+.rf-text-field {
+  --tf-primary-color: #f15b24;
+  --tf-error-color: #d32f2f;
+  --tf-text-color: rgba(0, 0, 0, 0.87);
+  --tf-placeholder-color: rgba(0, 0, 0, 0.6);
+  --tf-border-color: rgba(0, 0, 0, 0.23);
+  --tf-hover-border-color: rgba(0, 0, 0, 0.87);
+  --tf-bg-color: transparent;
+  --tf-filled-bg: rgba(0, 0, 0, 0.06);
+  --tf-filled-bg-hover: rgba(0, 0, 0, 0.09);
+  --tf-disabled-color: rgba(0, 0, 0, 0.38);
+  --tf-disabled-bg: rgba(0, 0, 0, 0.12);
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  vertical-align: top;
+  font-family: inherit;
+  width: 200px;
+}
+.rf-text-field--full-width {
+  width: 100%;
+}
+.rf-text-field__wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: text;
+}
+.rf-text-field__input {
+  font: inherit;
+  line-height: 1.4375em;
+  letter-spacing: inherit;
+  color: currentColor;
+  border: 0;
+  box-sizing: border-box;
+  background: none;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  flex: 1;
+  animation-name: mui-auto-fill-cancel;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+  z-index: 2;
+  transition: opacity 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+.rf-text-field__adornment {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  color: var(--tf-text-color);
+  z-index: 2;
+}
+.rf-text-field__adornment--start {
+  margin-left: 14px;
+  margin-right: -6px;
+}
+.rf-text-field__adornment--end {
+  margin-right: 14px;
+  margin-left: -6px;
+}
+.rf-text-field--standard .rf-text-field__adornment--start {
+  margin-left: 0;
+  margin-top: 16px;
+}
+.rf-text-field--standard .rf-text-field__adornment--end {
+  margin-right: 0;
+  margin-top: 16px;
+}
+.rf-text-field--filled .rf-text-field__adornment--start,
+.rf-text-field--filled .rf-text-field__adornment--end {
+  margin-top: 17px;
+}
+.rf-text-field--adorned-start .rf-text-field__input {
+  padding-left: 8px;
+}
+.rf-text-field--adorned-end .rf-text-field__input {
+  padding-right: 8px;
+}
+.rf-text-field--standard.rf-text-field--adorned-start .rf-text-field__input {
+  padding-left: 8px;
+}
+.rf-text-field--standard.rf-text-field--adorned-end .rf-text-field__input {
+  padding-right: 8px;
+}
+.rf-text-field__input:focus {
+  outline: none;
+}
+.rf-text-field__input:disabled {
+  opacity: 1;
+  color: var(--tf-disabled-color);
+  cursor: default;
+}
+.rf-text-field__input::placeholder {
+  color: var(--tf-placeholder-color);
+  opacity: 1;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+.rf-text-field__helper-text {
+  color: var(--tf-placeholder-color);
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.66;
+  letter-spacing: 0.03333em;
+  margin-top: 3px;
+  margin-right: 14px;
+  margin-bottom: 0;
+  margin-left: 14px;
+}
+.rf-text-field__label {
+  color: var(--tf-placeholder-color);
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.4375em;
+  padding: 0;
+  display: block;
+  transform-origin: top left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(133% - 24px);
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translate(14px, 16px) scale(1);
+  transition:
+    color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,
+    transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,
+    max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+}
+.rf-text-field--adorned-start:not(.rf-text-field--floating) .rf-text-field__label:not(.rf-text-field__wrapper:focus-within .rf-text-field__label):not(.rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label) {
+  transform: translate(36px, 16px) scale(1);
+}
+.rf-text-field--floating .rf-text-field__label,
+.rf-text-field__wrapper:focus-within .rf-text-field__label,
+.rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
+  transform: translate(14px, -9px) scale(0.75);
+}
+.rf-text-field__wrapper:focus-within .rf-text-field__label {
+  color: var(--tf-primary-color);
+}
+.rf-text-field__asterisk {
+  color: var(--tf-error-color);
+}
+.rf-text-field--outlined .rf-text-field__notch {
+  text-align: left;
+  position: absolute;
+  top: -5px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--tf-border-color);
+  overflow: hidden;
+  min-width: 0%;
+  transition: border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, border-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+.rf-text-field--outlined .rf-text-field__legend {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+  white-space: nowrap;
+}
+.rf-text-field--outlined .rf-text-field__legend > span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+}
+.rf-text-field--outlined.rf-text-field--floating .rf-text-field__legend,
+.rf-text-field__wrapper:focus-within .rf-text-field__notch .rf-text-field__legend,
+.rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__notch .rf-text-field__legend {
+  max-width: 100%;
+  transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+}
+.rf-text-field--outlined .rf-text-field__wrapper:hover .rf-text-field__notch {
+  border-color: var(--tf-hover-border-color);
+}
+.rf-text-field--outlined .rf-text-field__wrapper:focus-within .rf-text-field__notch {
+  border-color: var(--tf-primary-color);
+  border-width: 2px;
+}
+.rf-text-field--outlined.rf-text-field--disabled .rf-text-field__notch {
+  border-color: var(--tf-disabled-bg);
+}
+.rf-text-field--filled .rf-text-field__wrapper {
+  background-color: var(--tf-filled-bg);
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  transition: background-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+.rf-text-field--filled .rf-text-field__wrapper:hover {
+  background-color: var(--tf-filled-bg-hover);
+}
+.rf-text-field--filled .rf-text-field__input {
+  padding: 25px 12px 8px;
+}
+.rf-text-field--filled .rf-text-field__wrapper::after {
+  left: 0;
+  bottom: 0;
+  content: "";
+  position: absolute;
+  right: 0;
+  transform: scaleX(0);
+  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  border-bottom: 2px solid var(--tf-primary-color);
+  pointer-events: none;
+}
+.rf-text-field--filled .rf-text-field__wrapper::before {
+  left: 0;
+  bottom: 0;
+  content: "\a0";
+  position: absolute;
+  right: 0;
+  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  pointer-events: none;
+}
+.rf-text-field--filled .rf-text-field__wrapper:hover::before {
+  border-bottom: 1px solid var(--tf-text-color);
+}
+.rf-text-field--filled .rf-text-field__wrapper:focus-within::after {
+  transform: scaleX(1);
+}
+.rf-text-field--filled .rf-text-field__label {
+  transform: translate(12px, 16px) scale(1);
+  z-index: 3;
+}
+.rf-text-field--filled.rf-text-field--adorned-start:not(.rf-text-field--floating) .rf-text-field__label:not(.rf-text-field--filled .rf-text-field__wrapper:focus-within .rf-text-field__label):not(.rf-text-field--filled .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label) {
+  transform: translate(36px, 16px) scale(1);
+}
+.rf-text-field--filled.rf-text-field--floating .rf-text-field__label,
+.rf-text-field--filled .rf-text-field__wrapper:focus-within .rf-text-field__label,
+.rf-text-field--filled .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
+  transform: translate(12px, 7px) scale(0.75);
+}
+.rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+.rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper::before {
+  border-bottom-style: dotted;
+}
+.rf-text-field--standard .rf-text-field__input {
+  padding: 4px 0 5px;
+  margin-top: 16px;
+}
+.rf-text-field--standard .rf-text-field__label {
+  transform: translate(0, 24px) scale(1);
+}
+.rf-text-field--standard.rf-text-field--adorned-start:not(.rf-text-field--floating) .rf-text-field__label:not(.rf-text-field--standard .rf-text-field__wrapper:focus-within .rf-text-field__label):not(.rf-text-field--standard .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label) {
+  transform: translate(24px, 24px) scale(1);
+}
+.rf-text-field--standard.rf-text-field--floating .rf-text-field__label,
+.rf-text-field--standard .rf-text-field__wrapper:focus-within .rf-text-field__label,
+.rf-text-field--standard .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
+  transform: translate(0, 1.5px) scale(0.75);
+}
+.rf-text-field--standard .rf-text-field__wrapper::after {
+  left: 0;
+  bottom: 0;
+  content: "";
+  position: absolute;
+  right: 0;
+  transform: scaleX(0);
+  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  border-bottom: 2px solid var(--tf-primary-color);
+  pointer-events: none;
+}
+.rf-text-field--standard .rf-text-field__wrapper::before {
+  left: 0;
+  bottom: 0;
+  content: "\a0";
+  position: absolute;
+  right: 0;
+  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  pointer-events: none;
+}
+.rf-text-field--standard .rf-text-field__wrapper:hover::before {
+  border-bottom: 2px solid var(--tf-text-color);
+}
+.rf-text-field--standard .rf-text-field__wrapper:focus-within::after {
+  transform: scaleX(1);
+}
+.rf-text-field--standard.rf-text-field--disabled .rf-text-field__wrapper::before {
+  border-bottom-style: dotted;
+}
+.rf-text-field--error .rf-text-field__label,
+.rf-text-field--error .rf-text-field__wrapper:focus-within .rf-text-field__label {
+  color: var(--tf-error-color);
+}
+.rf-text-field--error.rf-text-field--outlined .rf-text-field__notch,
+.rf-text-field--error.rf-text-field--outlined .rf-text-field__wrapper:focus-within .rf-text-field__notch {
+  border-color: var(--tf-error-color);
+}
+.rf-text-field--error.rf-text-field--filled .rf-text-field__wrapper::after,
+.rf-text-field--error.rf-text-field--standard .rf-text-field__wrapper::after {
+  border-bottom-color: var(--tf-error-color);
+}
+.rf-text-field--error .rf-text-field__helper-text {
+  color: var(--tf-error-color);
+}
+.rf-text-field--small.rf-text-field--outlined .rf-text-field__input {
+  padding: 8.5px 14px;
+}
+.rf-text-field--small.rf-text-field--outlined .rf-text-field__label {
+  transform: translate(14px, 9px) scale(1);
+}
+.rf-text-field--small.rf-text-field--outlined.rf-text-field--adorned-start:not(.rf-text-field--floating) .rf-text-field__label:not(.rf-text-field--small.rf-text-field--outlined .rf-text-field__wrapper:focus-within .rf-text-field__label):not(.rf-text-field--small.rf-text-field--outlined .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label) {
+  transform: translate(36px, 9px) scale(1);
+}
+.rf-text-field--small.rf-text-field--outlined.rf-text-field--floating .rf-text-field__label,
+.rf-text-field--small.rf-text-field--outlined .rf-text-field__wrapper:focus-within .rf-text-field__label,
+.rf-text-field--small.rf-text-field--outlined .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
+  transform: translate(14px, -9px) scale(0.75);
+}
+.rf-text-field--small.rf-text-field--filled .rf-text-field__input {
+  padding: 21px 12px 4px;
+}
+.rf-text-field--small.rf-text-field--filled .rf-text-field__label {
+  transform: translate(12px, 13px) scale(1);
+}
+.rf-text-field--small.rf-text-field--filled.rf-text-field--adorned-start:not(.rf-text-field--floating) .rf-text-field__label:not(.rf-text-field--small.rf-text-field--filled .rf-text-field__wrapper:focus-within .rf-text-field__label):not(.rf-text-field--small.rf-text-field--filled .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label) {
+  transform: translate(36px, 13px) scale(1);
+}
+.rf-text-field--small.rf-text-field--filled.rf-text-field--floating .rf-text-field__label,
+.rf-text-field--small.rf-text-field--filled .rf-text-field__wrapper:focus-within .rf-text-field__label,
+.rf-text-field--small.rf-text-field--filled .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
+  transform: translate(12px, 7px) scale(0.75);
+}
+.rf-text-field__input[type=number]::-webkit-inner-spin-button,
+.rf-text-field__input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.rf-text-field__input[type=number] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.rf-text-field__number-controls {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  z-index: 3;
+}
+.rf-text-field__wrapper:hover .rf-text-field__number-controls,
+.rf-text-field__wrapper:focus-within .rf-text-field__number-controls {
+  display: flex;
+}
+.rf-text-field--has-number-controls .rf-text-field__wrapper:hover .rf-text-field__adornment--end,
+.rf-text-field--has-number-controls .rf-text-field__wrapper:focus-within .rf-text-field__adornment--end {
+  display: none;
+}
+.rf-text-field__number-btn {
+  background: transparent;
+  border: none;
+  padding: 2px 4px;
+  cursor: pointer;
+  color: var(--tf-text-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+.rf-text-field__number-btn:hover {
+  opacity: 1;
+}
+.rf-text-field__number-btn svg {
+  display: block;
+}
+.rf-text-field--compact .rf-text-field__wrapper {
+  border: 1px solid var(--tf-border-color);
+  border-radius: 8px;
+  transition: border-color 200ms cubic-bezier(0.0, 0, 0.2, 1);
+}
+.rf-text-field--compact .rf-text-field__wrapper:hover {
+  border-color: var(--tf-hover-border-color);
+}
+.rf-text-field--compact .rf-text-field__wrapper:focus-within {
+  border-color: var(--tf-primary-color);
+}
+.rf-text-field--compact .rf-text-field__input {
+  padding: 5.5px 4px 5.5px 12px;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.rf-text-field--compact .rf-text-field__adornment--end {
+  margin-right: 10px;
+  margin-left: 0;
+}
+
 /* node_modules/jodit/es5/jodit.min.css */
 .jodit-ui-button-icon-text__icon {
   display: none;