@rufous/ui 0.3.1 → 0.3.7

package/dist/main.css

@@ -85,6 +85,9 @@
 .rf-table-toolbar {
   z-index: var(--rf-dialog-portal-z, 2100) !important;
 }
+.MuiSnackbar-root {
+  z-index: 9999 !important;
+}
 .dialog-container {
   background: var(--surface-color);
   color: var(--text-color);
@@ -94,6 +97,7 @@
   flex-direction: column;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
   width: 685px !important;
+  max-width: 95vw;
   transition: background-color 0.3s, color 0.3s;
 }
 .dialog-container.size-sm {
@@ -146,6 +150,7 @@
   transition: all 0.2s;
   border-radius: 8px;
   flex-shrink: 0;
+  outline: none;
 }
 .btn-close:hover {
   border-color: var(--primary-color);
@@ -333,6 +338,10 @@
   gap: 16px;
   flex-wrap: wrap;
 }
+.dg-header--custom .dg-header-actions {
+  width: 100%;
+  flex: 1;
+}
 .dg-header-info h2 {
   font-size: 1.1rem;
   font-weight: 700;
@@ -379,7 +388,7 @@
 .dg-search-wrap {
   position: relative;
 }
-.dg-search-wrap svg {
+.dg-search-wrap > svg {
   position: absolute;
   left: 10px;
   top: 50%;
@@ -398,9 +407,59 @@
   width: 220px;
   transition: border-color 0.2s;
 }
+.dg-search--with-info {
+  padding-right: 32px;
+}
 .dg-search:focus {
   border-color: var(--primary-color);
 }
+.dg-search-info {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.dg-search-info__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  cursor: help;
+  outline: none;
+  line-height: 0;
+}
+.dg-search-info__trigger:hover,
+.dg-search-info__trigger:focus-visible {
+  color: var(--text-color);
+}
+.dg-toolbar-select {
+  padding: 8px 28px 8px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--background-color);
+  color: var(--text-color);
+  font-size: 0.875rem;
+  font-family: inherit;
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  appearance: none;
+  -webkit-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='%23888' 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 8px center;
+}
+.dg-toolbar-select:focus {
+  border-color: var(--primary-color);
+}
+.dg-toolbar-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 .dg-icon-btn {
   padding: 8px;
   border: 1px solid var(--border-color);
@@ -445,6 +504,12 @@
   flex: 1;
   position: relative;
 }
+.dg-table-wrap.rm-top-border {
+  border-top: none;
+}
+.dg-table-wrap.rm-bottom-border {
+  border-bottom: none;
+}
 .dg-table-wrap--empty {
   display: flex;
   flex-direction: column;
@@ -458,7 +523,7 @@
 .dg-table thead {
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: 20;
 }
 .dg-table thead tr {
   background: var(--hover-color);
@@ -506,6 +571,21 @@
 .dg-th-label.no-sort {
   cursor: default;
 }
+.dg-sort-icon {
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+.dg-sort-icon--active {
+  opacity: 1;
+  color: var(--primary-color);
+}
+.dg-thead-cell:hover .dg-sort-icon {
+  opacity: 1;
+}
 .dg-th-actions {
   display: flex;
   align-items: center;
@@ -514,7 +594,8 @@
   transition: opacity 0.15s;
   flex-shrink: 0;
 }
-.dg-thead-cell:hover .dg-th-actions {
+.dg-thead-cell:hover .dg-th-actions,
+.dg-th-actions--filtered {
   opacity: 1;
 }
 .dg-th-menu-btn {
@@ -532,6 +613,20 @@
   background: var(--border-color);
   color: var(--text-color);
 }
+.dg-th-filter-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 3px;
+  border-radius: 4px;
+  color: var(--primary-color);
+  display: flex;
+  align-items: center;
+  transition: background 0.15s;
+}
+.dg-th-filter-btn:hover {
+  background: rgba(164, 27, 6, 0.08);
+}
 .dg-resizer {
   width: 4px;
   height: 16px;
@@ -556,6 +651,25 @@
 .dg-tbody-row:hover {
   background: var(--hover-color);
 }
+.dg-select-cell {
+  text-align: center;
+  vertical-align: middle;
+  padding: 0;
+}
+.dg-checkbox {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--primary-color);
+  vertical-align: middle;
+}
+.dg-tbody-row--selected {
+  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
+}
+.dg-tbody-row--selected:hover {
+  background: color-mix(in srgb, var(--primary-color) 14%, transparent);
+}
 .dg-td {
   padding: 12px 20px;
   font-size: 0.875rem;
@@ -565,6 +679,9 @@
   white-space: nowrap;
   background: inherit;
 }
+.dg-td--no-padding {
+  padding: 0;
+}
 .dg-td--editable {
   cursor: pointer;
 }
@@ -667,6 +784,9 @@
   gap: 12px;
   background: var(--hover-color);
 }
+.dg-pagination--custom {
+  justify-content: flex-start;
+}
 .dg-page-info {
   display: flex;
   align-items: center;
@@ -683,15 +803,80 @@
   font-size: 0.82rem;
   color: var(--text-secondary);
 }
-.dg-per-page select {
-  padding: 4px 8px;
+.dg-fsel {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+.dg-fsel--sm {
+  flex: none;
+  width: 148px;
+}
+.dg-fsel--pagesize {
+  width: 72px;
+}
+.dg-fsel-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 10px 8px 12px;
   border: 1px solid var(--border-color);
-  border-radius: 6px;
-  background: var(--surface-color);
+  border-radius: 8px;
+  background: var(--background-color);
   color: var(--text-color);
+  font-size: 0.85rem;
+  cursor: pointer;
+  gap: 6px;
+  text-align: left;
+  transition: border-color 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.dg-fsel--pagesize .dg-fsel-trigger {
+  background: var(--surface-color);
   font-size: 0.82rem;
+  padding: 6px 8px 6px 10px;
+}
+.dg-fsel-trigger:hover,
+.dg-fsel-trigger:focus {
+  border-color: var(--primary-color);
   outline: none;
-  cursor: pointer;
+}
+.dg-fsel-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dg-fsel-chevron {
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+.dg-fsel-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 400;
+  min-width: 100%;
+  background: var(--surface-color);
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+  padding: 6px;
+  max-height: 240px;
+  overflow-y: auto;
+}
+.dg-fsel-menu--top {
+  top: auto;
+  bottom: calc(100% + 4px);
+}
+.dg-fsel-menu--portal {
+  z-index: 10001;
+}
+.dg-menu-item--selected {
+  background: var(--hover-color);
+  color: var(--primary-color);
 }
 .dg-page-nav {
   display: flex;
@@ -766,7 +951,7 @@
 }
 .dg-menu {
   position: fixed;
-  z-index: 200;
+  z-index: 10000;
   width: 200px;
   background: var(--surface-color);
   border: 1px solid var(--border-color);
@@ -806,7 +991,7 @@
 .dg-modal-overlay {
   position: fixed;
   inset: 0;
-  z-index: 150;
+  z-index: 10000;
   background: rgba(0, 0, 0, 0.35);
   display: flex;
   align-items: center;
@@ -891,10 +1076,9 @@
   align-items: center;
   gap: 8px;
 }
-.dg-filter-select,
 .dg-filter-input {
   flex: 1;
-  padding: 8px 30px 8px 12px;
+  padding: 8px 12px;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   background: var(--background-color);
@@ -902,36 +1086,31 @@
   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);
 }
-.dg-filter-select-sm {
-  width: 140px;
-  flex: none;
-}
 .dg-filter-modal {
-  overflow: visible;
+  overflow: hidden;
 }
 .dg-filter-modal .dg-modal-header {
   border-radius: 14px 14px 0 0;
 }
 .dg-filter-modal .dg-modal-body {
-  overflow: visible;
+  overflow-y: auto;
 }
 .dg-filter-modal .dg-modal-footer {
   border-radius: 0 0 14px 14px;
 }
 .dg-filter-datefield {
   flex: 1;
+  min-width: 0;
+}
+.dg-filter-custom {
+  flex: 1;
+  min-width: 0;
 }
 .dg-filter-datefield .rf-date-field {
+  display: flex;
   width: 100%;
   --tf-border-color: var(--border-color);
   --tf-hover-border-color: var(--text-secondary);
@@ -961,6 +1140,30 @@
     transform: rotate(360deg);
   }
 }
+.dg-skeleton-row:hover {
+  background: transparent;
+}
+.dg-skeleton-bar {
+  height: 12px;
+  width: 70%;
+  border-radius: 6px;
+  background:
+    linear-gradient(
+      90deg,
+      var(--border-color) 25%,
+      var(--hover-color) 37%,
+      var(--border-color) 63%);
+  background-size: 400% 100%;
+  animation: dg-skeleton-shimmer 1.4s ease infinite;
+}
+@keyframes dg-skeleton-shimmer {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
 .dg-empty-state {
   flex: 1;
   display: flex;
@@ -989,71 +1192,207 @@
   color: var(--text-secondary);
   opacity: 0.65;
 }
-
-/* lib/style.css */
-:root {
-  --font-family:
-    "Roboto",
-    "Helvetica",
-    "Arial",
-    sans-serif;
-  --primary-color: #a41b06;
-  --secondary-color: #8b1605;
-  --background-color: #ffffff;
-  --surface-color: #ffffff;
-  --text-color: #2d2d2d;
-  --text-secondary: #666666;
-  --border-color: #e0e0e0;
-  --hover-color: #fff5f5;
-  --selection-color: #a41b0614;
-  --icon-color: #a41b06;
+.dg-grouping-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--background-color);
+  flex-wrap: wrap;
+  flex-shrink: 0;
 }
-.dialog-overlay.overlay-fullscreen {
-  padding: 0;
-  align-items: flex-start;
+.dg-grouping-bar-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  margin-right: 2px;
+  flex-shrink: 0;
 }
-body {
-  margin: 0;
-  padding: 0;
-  font-family: var(--font-family);
-  background-color: var(--background-color);
+.dg-group-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px 3px 7px;
+  background: var(--surface-color);
+  border: 1px solid var(--border-color);
+  border-radius: 100px;
+  font-size: 0.78rem;
+  font-weight: 500;
   color: var(--text-color);
-  transition: background-color 0.3s, color 0.3s;
-}
-button,
-input,
-select,
-textarea {
-  font-family: var(--font-family);
 }
-.form__group.field {
-  position: relative;
-  padding: 15px 0 0;
-  margin-top: 10px;
-  width: 100%;
+.dg-group-chip-remove {
+  background: none;
+  border: none;
+  padding: 1px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  border-radius: 50%;
+  line-height: 0;
+  margin-left: 2px;
+  transition: background 0.12s, color 0.12s;
 }
-.form__field {
-  font-family: inherit;
-  width: 100%;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  outline: 0;
-  font-size: 16px;
+.dg-group-chip-remove:hover {
+  background: rgba(0, 0, 0, 0.08);
   color: var(--text-color);
-  padding: 12px 14px;
-  background: transparent;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  box-sizing: border-box;
 }
-.form__field::placeholder {
-  color: transparent;
+.dg-group-row {
+  background: var(--background-color);
 }
-.form__label {
-  position: absolute;
-  top: 27px;
-  left: 14px;
-  display: block;
-  transition: 0.2s;
+.dg-group-row:hover {
+  background: var(--hover-color);
+}
+.dg-group-cell {
+  padding: 0 !important;
+  border-bottom: 1px solid var(--border-color);
+}
+.dg-group-cell-inner {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding-right: 16px;
+  cursor: pointer;
+  user-select: none;
+}
+.dg-group-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  color: var(--text-color);
+  transition: background 0.12s, color 0.12s;
+  margin-left: 10px;
+}
+button.dg-group-toggle {
+  padding: 0;
+}
+.dg-group-toggle:hover {
+  background: rgba(0, 0, 0, 0.07);
+  color: var(--text-color);
+}
+.dg-group-field-label {
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+.dg-group-key {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--text-color);
+}
+.dg-group-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 18px;
+  padding: 0 6px;
+  background: var(--hover-color);
+  border: 1px solid var(--border-color);
+  border-radius: 100px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+.dg-group-leaf-cell {
+  padding: 0 12px;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dg-tree-cell {
+  padding: 0;
+  border-bottom: 1px solid var(--border-color);
+  vertical-align: middle;
+}
+.dg-tree-cell-inner {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 36px;
+  padding-right: 2px;
+}
+
+/* lib/style.css */
+:root {
+  --font-family:
+    "Roboto",
+    "Helvetica",
+    "Arial",
+    sans-serif;
+  --primary-color: #a41b06;
+  --secondary-color: #8b1605;
+  --background-color: #ffffff;
+  --surface-color: #ffffff;
+  --text-color: #2d2d2d;
+  --text-secondary: #666666;
+  --border-color: #e0e0e0;
+  --hover-color: #fff5f5;
+  --selection-color: #a41b0614;
+  --icon-color: #a41b06;
+}
+.dialog-overlay.overlay-fullscreen {
+  padding: 0;
+  align-items: flex-start;
+}
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-family);
+  background-color: var(--background-color);
+  color: var(--text-color);
+  transition: background-color 0.3s, color 0.3s;
+}
+button,
+input,
+select,
+textarea {
+  font-family: var(--font-family);
+}
+.form__group.field {
+  position: relative;
+  padding: 15px 0 0;
+  margin-top: 10px;
+  width: 100%;
+}
+.form__field {
+  font-family: inherit;
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  outline: 0;
+  font-size: 16px;
+  color: var(--text-color);
+  padding: 12px 14px;
+  background: transparent;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  box-sizing: border-box;
+}
+.form__field::placeholder {
+  color: transparent;
+}
+.form__label {
+  position: absolute;
+  top: 27px;
+  left: 14px;
+  display: block;
+  transition: 0.2s;
   font-size: 16px;
   color: var(--text-secondary);
   pointer-events: none;
@@ -1099,74 +1438,319 @@ pre {
   color: var(--text-color);
 }
 
-/* lib/styles/address-lookup.css */
-.address-lookup-container {
-  width: 100%;
-}
-.address-lookup-grid {
-  display: grid;
-  grid-gap: 16px;
-}
-.address-lookup-grid-stack {
-  grid-template-columns: 1fr;
+/* lib/styles/tree-select.css */
+.rf-tree-select {
 }
-.address-lookup-grid-compact {
-  grid-template-columns: repeat(12, 1fr);
+.rf-tree-select__trigger {
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  outline: none;
 }
-.address-lookup-grid-compact .col-l1 {
-  grid-column: span 6;
+.rf-ts__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;
 }
-.address-lookup-grid-compact .col-l2 {
-  grid-column: span 6;
+.rf-ts__display--placeholder {
+  color: var(--tf-placeholder-color);
 }
-.address-lookup-grid-compact .col-city {
-  grid-column: span 3;
+.rf-text-field--small .rf-ts__display {
+  padding: 8.5px 14px;
+  font-size: 0.875rem;
 }
-.address-lookup-grid-compact .col-state {
-  grid-column: span 3;
+.rf-text-field--filled .rf-ts__display {
+  padding: 25px 12px 8px;
 }
-.address-lookup-grid-compact .col-pin {
-  grid-column: span 3;
+.rf-text-field--small.rf-text-field--filled .rf-ts__display {
+  padding: 21px 12px 4px;
 }
-.address-lookup-grid-compact .col-country {
-  grid-column: span 3;
+.rf-text-field--standard .rf-ts__display {
+  padding: 4px 0 5px;
+  margin-top: 16px;
 }
-.address-lookup-grid-grid {
-  grid-template-columns: repeat(12, 1fr);
+.rf-tree-select .rf-autocomplete__endgroup {
+  z-index: 3;
 }
-.address-lookup-grid-grid .col-l1 {
-  grid-column: span 12;
+.rf-ts__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;
 }
-.address-lookup-grid-grid .col-l2 {
-  grid-column: span 12;
+.rf-text-field--small .rf-ts__chips {
+  min-height: 40px;
+  padding: 3px 14px;
 }
-.address-lookup-grid-grid .col-city {
-  grid-column: span 6;
+.rf-text-field--filled .rf-ts__chips {
+  padding-top: 20px;
+  padding-left: 12px;
+  padding-right: 12px;
 }
-.address-lookup-grid-grid .col-state {
-  grid-column: span 6;
+.rf-ts__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  background-color: var(--hover-color);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  padding: 2px 4px 2px 10px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-color);
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.4;
+  flex-shrink: 0;
 }
-.address-lookup-grid-grid .col-pin {
-  grid-column: span 6;
+.rf-ts__chip-delete {
+  background: none;
+  border: none;
+  padding: 1px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  border-radius: 50%;
+  transition: background-color 0.12s, color 0.12s;
+  outline: none;
+  flex-shrink: 0;
 }
-.address-lookup-grid-grid .col-country {
-  grid-column: span 6;
+.rf-ts__chip-delete:hover {
+  background-color: var(--hover-color);
+  color: var(--text-color);
 }
-.address-lookup-grid-item {
-  position: relative;
+.rf-ts__placeholder {
+  font-size: 1rem;
+  color: var(--tf-placeholder-color);
+  line-height: 1.4375em;
 }
-.autocomplete-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: var(--surface-color, #fff);
-  border: 1px solid var(--border-color, #ccc);
+.rf-tree-select__popup {
+  z-index: 2100;
+  background: var(--surface-color, #ffffff);
   border-radius: 10px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  max-height: 250px;
-  overflow-y: auto;
+  box-shadow:
+    0 4px 6px rgba(0, 0, 0, 0.06),
+    0 10px 28px rgba(0, 0, 0, 0.13),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  max-height: 320px;
+  overflow: hidden;
+  animation: rf-ts-appear 0.12s cubic-bezier(0.2, 0, 0, 1.15);
+  transform-origin: top center;
+}
+@keyframes rf-ts-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+.rf-tree-select__filter {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  flex-shrink: 0;
+}
+.rf-tree-select__filter-icon {
+  color: rgba(0, 0, 0, 0.38);
+  flex-shrink: 0;
+}
+.rf-tree-select__filter-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--tf-text-color, rgba(0, 0, 0, 0.87));
+  background: transparent;
+}
+.rf-tree-select__tree {
+  overflow-y: auto;
+  flex: 1;
+  padding: 6px 0;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+}
+.rf-tree-select__tree::-webkit-scrollbar {
+  width: 5px;
+}
+.rf-tree-select__tree::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+}
+.rf-tree-select__empty {
+  padding: 20px 16px;
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.45);
+  text-align: center;
+}
+.rf-tsn__row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-right: 12px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  cursor: pointer;
+  border-radius: 6px;
+  margin: 1px 6px;
+  transition: background 0.12s;
+  min-height: 36px;
+  box-sizing: border-box;
+}
+.rf-tsn__row:hover {
+  background: rgba(241, 91, 36, 0.06);
+}
+.rf-tsn__row--active {
+  background: rgba(164, 27, 6, 0.08);
+}
+.rf-tsn__row--active:hover {
+  background: rgba(164, 27, 6, 0.12);
+}
+.rf-tsn__row--active .rf-tsn__label {
+  color: rgba(0, 0, 0, 0.87);
+  font-weight: 500;
+}
+.rf-tsn__expand {
+  background: none;
+  border: none;
+  padding: 2px;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  transition: background 0.12s, color 0.12s;
+  flex-shrink: 0;
+  line-height: 0;
+}
+.rf-tsn__expand:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: rgba(0, 0, 0, 0.87);
+}
+.rf-tsn__expand-ph {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  display: inline-block;
+}
+.rf-tsn__check {
+  color: var(--primary-color, #a41b06);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+.rf-tsn__row--active .rf-tsn__check {
+  opacity: 1;
+}
+.rf-tsn__label {
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.75);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.4;
+  transition: color 0.12s;
+}
+
+/* lib/styles/address-lookup.css */
+.address-lookup-container {
+  width: 100%;
+}
+.address-lookup-grid {
+  display: grid;
+  grid-gap: 16px;
+}
+.address-lookup-grid-stack {
+  grid-template-columns: 1fr;
+}
+.address-lookup-grid-compact {
+  grid-template-columns: repeat(12, 1fr);
+}
+.address-lookup-grid-compact .col-l1 {
+  grid-column: span 6;
+}
+.address-lookup-grid-compact .col-l2 {
+  grid-column: span 6;
+}
+.address-lookup-grid-compact .col-city {
+  grid-column: span 3;
+}
+.address-lookup-grid-compact .col-state {
+  grid-column: span 3;
+}
+.address-lookup-grid-compact .col-pin {
+  grid-column: span 3;
+}
+.address-lookup-grid-compact .col-country {
+  grid-column: span 3;
+}
+.address-lookup-grid-grid {
+  grid-template-columns: repeat(12, 1fr);
+}
+.address-lookup-grid-grid .col-l1 {
+  grid-column: span 12;
+}
+.address-lookup-grid-grid .col-l2 {
+  grid-column: span 12;
+}
+.address-lookup-grid-grid .col-city {
+  grid-column: span 6;
+}
+.address-lookup-grid-grid .col-state {
+  grid-column: span 6;
+}
+.address-lookup-grid-grid .col-pin {
+  grid-column: span 6;
+}
+.address-lookup-grid-grid .col-country {
+  grid-column: span 6;
+}
+.address-lookup-grid-item {
+  position: relative;
+}
+.autocomplete-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--surface-color, #fff);
+  border: 1px solid var(--border-color, #ccc);
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  max-height: 250px;
+  overflow-y: auto;
   margin-top: 4px;
 }
 .autocomplete-option {
@@ -1344,6 +1928,13 @@ pre {
   background-color: rgba(164, 27, 6, 0.1);
   color: #a41b06;
 }
+.rf-date-picker__label--static {
+  cursor: default !important;
+  pointer-events: none;
+}
+.rf-date-picker__label--static:hover {
+  background-color: transparent !important;
+}
 .rf-date-picker__nav {
   display: flex;
   align-items: center;
@@ -2270,7 +2861,7 @@ pre {
   padding: 6px 56px 6px 10px;
 }
 .rf-autocomplete.rf-text-field--small .rf-text-field__wrapper {
-  min-height: 40px;
+  min-height: 39px;
   padding: 3px 56px 3px 10px;
 }
 .rf-autocomplete.rf-text-field--filled .rf-text-field__wrapper {
@@ -2292,6 +2883,12 @@ pre {
   padding-left: 0;
   margin-top: 0;
 }
+.rf-autocomplete.rf-text-field--small.rf-text-field--outlined .rf-text-field__input {
+  padding: 5.5px 0 5.5px 4px;
+}
+.rf-autocomplete.rf-text-field--small.rf-text-field--filled .rf-text-field__input {
+  padding: 4px 0 4px 2px;
+}
 .rf-autocomplete.rf-text-field--disabled .rf-text-field__wrapper {
   cursor: not-allowed;
 }
@@ -2540,6 +3137,7 @@ pre {
 .rf-select__display {
   display: flex;
   align-items: center;
+  gap: 8px;
   flex: 1;
   min-width: 0;
   padding: 16.5px 14px;
@@ -2709,6 +3307,27 @@ pre {
   cursor: default;
   pointer-events: none;
 }
+.rf-select__option-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  max-width: 18px;
+  max-height: 18px;
+  overflow: hidden;
+  color: inherit;
+}
+.rf-select__option-icon > * {
+  max-width: 18px;
+  max-height: 18px;
+}
+.rf-select__option-icon-img {
+  width: 18px;
+  height: 18px;
+  object-fit: cover;
+  border-radius: 3px;
+  display: block;
+}
 .rf-select__option-label {
   flex: 1;
   overflow: hidden;
@@ -4970,9 +5589,10 @@ pre {
 }
 .rf-stepper--vertical .rf-step-connector {
   flex-direction: column;
-  margin-left: 11px;
-  padding: 4px 0;
-  min-height: 24px;
+  align-items: flex-start;
+  margin-left: 12px;
+  padding: 0;
+  min-height: 16px;
 }
 .rf-step-connector__line {
   display: block;
@@ -4987,7 +5607,9 @@ pre {
 .rf-stepper--vertical .rf-step-connector__line {
   border-left-style: solid;
   border-left-width: 1px;
-  min-height: 24px;
+  min-height: 16px;
+  width: 1px;
+  align-self: flex-start;
 }
 .rf-step-connector--completed .rf-step-connector__line,
 .rf-step-connector--active .rf-step-connector__line {
@@ -5097,7 +5719,7 @@ pre {
 }
 .rf-step-content {
   margin-left: 12px;
-  padding: 8px 0 8px 20px;
+  padding: 8px 0 0 20px;
   border-left: 1px solid var(--border-color);
   overflow: hidden;
   transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -5343,7 +5965,7 @@ pre {
 /* lib/styles/snackbar.css */
 .rf-snackbar-root {
   position: fixed;
-  z-index: 1400;
+  z-index: 9999;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -5723,225 +6345,852 @@ pre {
 .rf-image-field--square {
   border-radius: 0;
 }
-.rf-image-field--small {
-  width: 64px;
-  height: 64px;
+.rf-image-field--small {
+  width: 64px;
+  height: 64px;
+}
+.rf-image-field--medium {
+  width: 96px;
+  height: 96px;
+}
+.rf-image-field--large {
+  width: 128px;
+  height: 128px;
+}
+.rf-image-field__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: filter 0.25s ease;
+}
+.rf-image-field__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--text-secondary);
+  transition: filter 0.25s ease;
+}
+.rf-image-field__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 4px;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  pointer-events: none;
+}
+.rf-image-field:hover .rf-image-field__overlay {
+  opacity: 1;
+}
+.rf-image-field:hover .rf-image-field__img {
+  filter: blur(2px);
+}
+.rf-image-field__overlay-text {
+  color: #ffffff;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  font-family: var(--font-family);
+  text-align: center;
+  line-height: 1.2;
+}
+.rf-image-field__input {
+  display: none;
+}
+.rf-image-field:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+.rf-image-field--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+  filter: grayscale(60%);
+}
+
+/* lib/styles/phone-field.css */
+.rf-phone-field {
+  position: relative;
+}
+.rf-phone-field--margin-normal {
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+.rf-phone-field--margin-dense {
+  margin-top: 8px;
+  margin-bottom: 4px;
+}
+.rf-phone-field__country-selector {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 2px 0 8px;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  outline: none;
+  border-radius: 4px;
+  transition: background-color 0.15s;
+}
+.rf-text-field--filled .rf-phone-field__country-selector {
+  padding: 17px 2px 0 8px;
+}
+.rf-text-field--standard .rf-phone-field__country-selector {
+  padding: 15px 2px 0 8px;
+}
+.rf-phone-field__country-selector:hover {
+  cursor: pointer;
+}
+.rf-phone-field__country-selector--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: default;
+}
+.rf-phone-field__flag {
+  font-size: 18px;
+  line-height: 1;
+}
+.rf-phone-field__dial-code {
+  color: var(--tf-text-color, #333);
+  white-space: nowrap;
+}
+.rf-phone-field__chevron {
+  display: flex;
+  align-items: center;
+  color: var(--tf-placeholder-color, #888);
+  transition: transform 0.2s;
+}
+.rf-phone-field .rf-text-field__wrapper {
+  display: flex;
+  align-items: center;
+}
+.rf-phone-field .rf-text-field__label {
+  transform: translate(14px, -9px) scale(0.75) !important;
+}
+.rf-phone-field.rf-text-field--filled .rf-text-field__label {
+  transform: translate(12px, 4px) scale(0.75) !important;
+}
+.rf-phone-field.rf-text-field--standard .rf-text-field__label {
+  transform: translate(0, -18px) scale(0.75) !important;
+}
+.rf-phone-field.rf-text-field--small.rf-text-field--outlined .rf-text-field__label {
+  transform: translate(14px, -7px) scale(0.75) !important;
+}
+.rf-phone-field.rf-text-field--small.rf-text-field--filled .rf-text-field__label {
+  transform: translate(12px, 2px) scale(0.75) !important;
+}
+.rf-phone-field .rf-text-field__legend {
+  max-width: 100% !important;
+}
+.rf-phone-field__divider {
+  width: 1px;
+  height: 60%;
+  background-color: var(--tf-border-color, #c4c4c4);
+  flex-shrink: 0;
+}
+.rf-phone-field__input {
+  flex: 1;
+  min-width: 0;
+}
+.rf-phone-field__popup.rf-select__popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: auto;
+  width: max-content;
+  min-width: 280px;
+  max-width: 360px;
+  z-index: 1400;
+  overflow: hidden;
+}
+.rf-phone-field__search-indicator {
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--tf-placeholder-color, #888);
+  border-bottom: 1px solid var(--tf-border-color, #e0e0e0);
+  background: var(--rf-surface-variant, #f5f5f5);
+}
+.rf-phone-field__popup .rf-select__listbox {
+  max-height: inherit;
+}
+.rf-phone-field__option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  font-size: 14px;
+}
+.rf-phone-field__option:hover,
+.rf-phone-field__option--focused {
+  background-color: var(--hover-color);
+}
+.rf-phone-field__option--selected {
+  background-color: var(--selection-color);
+  font-weight: 500;
+}
+.rf-phone-field__option--selected.rf-phone-field__option--focused {
+  background-color: var(--rf-selected-hover, rgba(25, 118, 210, 0.12));
+}
+.rf-phone-field__option-flag {
+  font-size: 18px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.rf-phone-field__option-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--tf-text-color, #333);
+}
+.rf-phone-field__option-code {
+  color: var(--tf-placeholder-color, #888);
+  font-size: 13px;
+  flex-shrink: 0;
+}
+.rf-phone-field__no-results {
+  padding: 12px;
+  text-align: center;
+  color: var(--tf-placeholder-color, #888);
+  font-size: 14px;
+}
+
+/* lib/styles/smart-select.css */
+
+/* lib/styles/table.css */
+.rf-table-container {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.rf-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-family: var(--font-family, inherit);
+  font-size: 0.875rem;
+  color: var(--text-color, #1a1a1a);
+}
+.rf-table--sticky-header .rf-table-head .rf-table-cell {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--surface-color, #fff);
+}
+.rf-table-head .rf-table-cell {
+  font-weight: 600;
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #666);
+  background: var(--surface-color, #fff);
+  border-bottom: 2px solid var(--border-color, #e5e7eb);
+  white-space: nowrap;
+  user-select: none;
+}
+.rf-table-body .rf-table-cell {
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
+}
+.rf-table-body .rf-table-row:last-child .rf-table-cell {
+  border-bottom: none;
+}
+.rf-table-footer .rf-table-cell {
+  font-weight: 600;
+  border-top: 2px solid var(--border-color, #e5e7eb);
+  border-bottom: none;
+  color: var(--text-secondary, #666);
+}
+.rf-table-row {
+  transition: background 0.1s;
+}
+.rf-table-row--hover:hover {
+  background: var(--hover-color, rgba(0, 0, 0, 0.04));
+}
+.rf-table-row--selected {
+  background: rgba(164, 27, 6, 0.04);
+}
+.rf-table-row--selected:hover {
+  background: rgba(164, 27, 6, 0.07);
+}
+.rf-table-cell {
+  padding: 14px 16px;
+  text-align: left;
+  vertical-align: middle;
+  line-height: 1.5;
+}
+.rf-table--small .rf-table-cell {
+  padding: 6px 16px;
+}
+.rf-table-cell--padding-checkbox {
+  width: 48px;
+  padding: 0 0 0 8px;
+}
+.rf-table-cell--padding-none {
+  padding: 0;
+}
+.rf-table-cell--align-right {
+  text-align: right;
+}
+.rf-table-cell--align-center {
+  text-align: center;
+}
+.rf-table-cell--align-justify {
+  text-align: justify;
+}
+.rf-table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--border-color, #e5e7eb);
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #666);
+  flex-wrap: wrap;
+}
+.rf-table-pagination__label {
+  white-space: nowrap;
+}
+.rf-table-pagination__select {
+  padding: 4px 8px;
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  background: var(--surface-color, #fff);
+  color: var(--text-color, #1a1a1a);
+  cursor: pointer;
+  outline: none;
+}
+.rf-table-pagination__select:focus {
+  border-color: var(--primary-color, #a41b06);
+}
+.rf-table-pagination__range {
+  white-space: nowrap;
+  min-width: 80px;
+  text-align: right;
+}
+.rf-table-pagination__actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.rf-table-pagination__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--text-color, #1a1a1a);
+  cursor: pointer;
+  transition: background 0.12s;
+  padding: 0;
+}
+.rf-table-pagination__btn:hover:not(:disabled) {
+  background: var(--hover-color, rgba(0, 0, 0, 0.06));
+}
+.rf-table-pagination__btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.rf-table-sort-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  font-weight: 600;
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #666);
+  transition: color 0.12s;
+  white-space: nowrap;
+  user-select: none;
+}
+.rf-table-sort-label:hover {
+  color: var(--text-color, #1a1a1a);
+}
+.rf-table-sort-label--active {
+  color: var(--text-color, #1a1a1a);
+}
+.rf-table-sort-label__icon {
+  display: inline-flex;
+  align-items: center;
+  transition: transform 0.15s, opacity 0.15s;
+  opacity: 0.4;
+}
+.rf-table-sort-label:hover .rf-table-sort-label__icon {
+  opacity: 0.7;
+}
+.rf-table-sort-label--active .rf-table-sort-label__icon {
+  opacity: 1;
+}
+.rf-table-sort-label--desc .rf-table-sort-label__icon {
+  transform: rotate(180deg);
+}
+.rf-table-sort-label--hide-icon .rf-table-sort-label__icon {
+  opacity: 0;
+}
+.rf-table-sort-label--active.rf-table-sort-label--hide-icon .rf-table-sort-label__icon {
+  opacity: 1;
+}
+
+/* lib/styles/linear-progress.css */
+.rf-linear-progress {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 999px;
+}
+.rf-linear-progress__bar,
+.rf-linear-progress__buffer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  border-radius: inherit;
+  transition: width 0.2s linear;
+}
+.rf-linear-progress--determinate .rf-linear-progress__bar,
+.rf-linear-progress--buffer .rf-linear-progress__bar {
+  width: 0%;
+}
+.rf-linear-progress--indeterminate .rf-linear-progress__bar {
+  width: auto;
+  animation: rf-linear-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+.rf-linear-progress--indeterminate .rf-linear-progress__bar--secondary {
+  animation: rf-linear-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
+}
+.rf-linear-progress--query .rf-linear-progress__bar {
+  width: auto;
+  animation: rf-linear-query1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite reverse;
+}
+@keyframes rf-linear-indeterminate1 {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+@keyframes rf-linear-indeterminate2 {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+@keyframes rf-linear-query1 {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+/* lib/styles/pagination.css */
+.rf-pagination {
+  display: inline-block;
+}
+.rf-pagination__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.rf-pagination__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 6px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-color, #1a1a1a);
+  font-family: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s,
+    color 0.15s;
+}
+.rf-pagination__btn:hover:not(:disabled) {
+  background: var(--hover-color, rgba(0, 0, 0, 0.05));
+}
+.rf-pagination__btn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.rf-pagination__btn--active {
+  background: var(--selection-color, rgba(168, 28, 8, 0.12));
+  color: var(--primary-color, #a81c08);
+  font-weight: 600;
+}
+.rf-pagination--primary .rf-pagination__btn--active {
+  background: var(--primary-color, #a81c08);
+  color: #fff;
+  border-color: var(--primary-color, #a81c08);
+}
+.rf-pagination__btn--control {
+  font-size: 1rem;
+  line-height: 1;
+}
+.rf-pagination__ellipsis {
+  display: inline-flex;
+  min-width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary, #666);
+  font-size: 0.875rem;
+}
+.rf-pagination--circular .rf-pagination__btn {
+  border-radius: 50%;
+}
+.rf-pagination--rounded .rf-pagination__btn {
+  border-radius: 6px;
+}
+.rf-pagination--small .rf-pagination__btn,
+.rf-pagination--small .rf-pagination__ellipsis {
+  min-width: 26px;
+  height: 26px;
+  font-size: 0.8125rem;
+}
+.rf-pagination--large .rf-pagination__btn,
+.rf-pagination--large .rf-pagination__ellipsis {
+  min-width: 40px;
+  height: 40px;
+  font-size: 0.9375rem;
+}
+
+/* lib/styles/button-group.css */
+.rf-button-group {
+  display: inline-flex;
+  border-radius: 6px;
+}
+.rf-button-group--full {
+  display: flex;
+  width: 100%;
+}
+.rf-button-group--horizontal {
+  flex-direction: row;
+}
+.rf-button-group--vertical {
+  flex-direction: column;
+}
+.rf-button-group > * {
+  border-radius: 0;
+}
+.rf-button-group--full > * {
+  flex: 1;
+}
+.rf-button-group--horizontal > *:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.rf-button-group--horizontal > *:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: -1px;
+}
+.rf-button-group--vertical > *:not(:last-child) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.rf-button-group--vertical > *:not(:first-child) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin-top: -1px;
+}
+.rf-button-group--horizontal > *:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.rf-button-group--horizontal > *:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+.rf-button-group--vertical > *:first-child {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+.rf-button-group--vertical > *:last-child {
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+/* lib/styles/alert.css */
+.rf-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 10px 16px;
+  border-radius: 6px;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.rf-alert__icon {
+  display: inline-flex;
+  align-items: center;
+  padding-top: 1px;
+  flex-shrink: 0;
+}
+.rf-alert__message {
+  flex: 1;
+  min-width: 0;
+}
+.rf-alert__title {
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+.rf-alert__action {
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+  padding-left: 8px;
+}
+.rf-alert__close {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  line-height: 1;
+  padding: 4px 6px;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  border-radius: 4px;
+}
+.rf-alert__close:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.06);
 }
-.rf-image-field--medium {
-  width: 96px;
-  height: 96px;
+.rf-alert--standard.rf-alert--success {
+  background: #e8f5e9;
+  color: #1e4620;
 }
-.rf-image-field--large {
-  width: 128px;
-  height: 128px;
+.rf-alert--standard.rf-alert--info {
+  background: #e7f3fb;
+  color: #0a4a6e;
 }
-.rf-image-field__img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-  transition: filter 0.25s ease;
+.rf-alert--standard.rf-alert--warning {
+  background: #fff4e5;
+  color: #663c00;
 }
-.rf-image-field__placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: var(--text-secondary);
-  transition: filter 0.25s ease;
+.rf-alert--standard.rf-alert--error {
+  background: #fdecea;
+  color: #611a15;
 }
-.rf-image-field__overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 4px;
-  background-color: rgba(0, 0, 0, 0.5);
-  opacity: 0;
-  transition: opacity 0.25s ease;
-  pointer-events: none;
+.rf-alert--standard .rf-alert__icon {
+  color: currentColor;
+  opacity: 0.85;
 }
-.rf-image-field:hover .rf-image-field__overlay {
-  opacity: 1;
+.rf-alert--filled.rf-alert--success {
+  background: #2e7d32;
+  color: #fff;
 }
-.rf-image-field:hover .rf-image-field__img {
-  filter: blur(2px);
+.rf-alert--filled.rf-alert--info {
+  background: #0288d1;
+  color: #fff;
 }
-.rf-image-field__overlay-text {
-  color: #ffffff;
-  font-size: 0.6875rem;
-  font-weight: 500;
-  font-family: var(--font-family);
-  text-align: center;
-  line-height: 1.2;
+.rf-alert--filled.rf-alert--warning {
+  background: #ed6c02;
+  color: #fff;
 }
-.rf-image-field__input {
-  display: none;
+.rf-alert--filled.rf-alert--error {
+  background: #d32f2f;
+  color: #fff;
 }
-.rf-image-field:focus-visible {
-  outline: 2px solid var(--primary-color);
-  outline-offset: 2px;
+.rf-alert--outlined {
+  background: transparent;
+  border: 1px solid currentColor;
 }
-.rf-image-field--disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-  pointer-events: none;
-  filter: grayscale(60%);
+.rf-alert--outlined.rf-alert--success {
+  color: #1e4620;
+  border-color: #2e7d32;
 }
-
-/* lib/styles/phone-field.css */
-.rf-phone-field {
-  position: relative;
+.rf-alert--outlined.rf-alert--info {
+  color: #0a4a6e;
+  border-color: #0288d1;
 }
-.rf-phone-field--margin-normal {
-  margin-top: 16px;
-  margin-bottom: 8px;
+.rf-alert--outlined.rf-alert--warning {
+  color: #663c00;
+  border-color: #ed6c02;
 }
-.rf-phone-field--margin-dense {
-  margin-top: 8px;
-  margin-bottom: 4px;
+.rf-alert--outlined.rf-alert--error {
+  color: #611a15;
+  border-color: #d32f2f;
 }
-.rf-phone-field__country-selector {
+
+/* lib/styles/timeline.css */
+.rf-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 6px 16px;
   display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 0 2px 0 8px;
-  cursor: pointer;
-  user-select: none;
-  flex-shrink: 0;
-  border: none;
-  background: none;
-  outline: none;
-  border-radius: 4px;
-  transition: background-color 0.15s;
-}
-.rf-text-field--filled .rf-phone-field__country-selector {
-  padding: 17px 2px 0 8px;
-}
-.rf-text-field--standard .rf-phone-field__country-selector {
-  padding: 15px 2px 0 8px;
+  flex-direction: column;
 }
-.rf-phone-field__country-selector:hover {
-  cursor: pointer;
+.rf-timeline-item {
+  display: flex;
+  position: relative;
+  list-style: none;
+  min-height: 70px;
 }
-.rf-phone-field__country-selector--disabled {
-  pointer-events: none;
-  opacity: 0.5;
-  cursor: default;
+.rf-timeline-item--right {
+  flex-direction: row;
 }
-.rf-phone-field__flag {
-  font-size: 18px;
-  line-height: 1;
+.rf-timeline-item--left {
+  flex-direction: row-reverse;
 }
-.rf-phone-field__dial-code {
-  color: var(--tf-text-color, #333);
-  white-space: nowrap;
+.rf-timeline-item--no-opposite::before {
+  content: "";
+  flex: 1;
+  padding: 6px 16px;
 }
-.rf-phone-field__chevron {
+.rf-timeline-separator {
   display: flex;
+  flex-direction: column;
+  flex: 0;
   align-items: center;
-  color: var(--tf-placeholder-color, #888);
-  transition: transform 0.2s;
 }
-.rf-phone-field .rf-text-field__wrapper {
+.rf-timeline-dot {
   display: flex;
   align-items: center;
+  justify-content: center;
+  align-self: baseline;
+  width: 12px;
+  height: 12px;
+  margin: 11.5px 0;
+  border-radius: 50%;
+  box-shadow:
+    0 1px 1px -1px rgba(0, 0, 0, 0.2),
+    0 1px 1px 0 rgba(0, 0, 0, 0.14),
+    0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-sizing: border-box;
+  flex-shrink: 0;
 }
-.rf-phone-field .rf-text-field__label {
-  transform: translate(14px, -9px) scale(0.75) !important;
+.rf-timeline-dot--has-content {
+  width: 28px;
+  height: 28px;
+  padding: 4px;
+  color: #fff;
 }
-.rf-phone-field.rf-text-field--filled .rf-text-field__label {
-  transform: translate(12px, 4px) scale(0.75) !important;
+.rf-timeline-dot--outlined {
+  background-color: transparent;
+  border-style: solid;
+  border-width: 2px;
+  box-shadow: none;
 }
-.rf-phone-field.rf-text-field--standard .rf-text-field__label {
-  transform: translate(0, -18px) scale(0.75) !important;
+.rf-timeline-dot--filled.rf-timeline-dot--grey {
+  background-color: #bdbdbd;
 }
-.rf-phone-field.rf-text-field--small.rf-text-field--outlined .rf-text-field__label {
-  transform: translate(14px, -7px) scale(0.75) !important;
+.rf-timeline-dot--filled.rf-timeline-dot--inherit {
+  background-color: currentColor;
 }
-.rf-phone-field.rf-text-field--small.rf-text-field--filled .rf-text-field__label {
-  transform: translate(12px, 2px) scale(0.75) !important;
+.rf-timeline-dot--filled.rf-timeline-dot--primary {
+  background-color: var(--primary-color, #a81c08);
 }
-.rf-phone-field .rf-text-field__legend {
-  max-width: 100% !important;
+.rf-timeline-dot--filled.rf-timeline-dot--secondary {
+  background-color: var(--secondary-color, #9c27b0);
 }
-.rf-phone-field__divider {
-  width: 1px;
-  height: 60%;
-  background-color: var(--tf-border-color, #c4c4c4);
-  flex-shrink: 0;
+.rf-timeline-dot--filled.rf-timeline-dot--success {
+  background-color: #2e7d32;
 }
-.rf-phone-field__input {
-  flex: 1;
-  min-width: 0;
+.rf-timeline-dot--filled.rf-timeline-dot--error {
+  background-color: #d32f2f;
 }
-.rf-phone-field__popup.rf-select__popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: auto;
-  width: max-content;
-  min-width: 280px;
-  max-width: 360px;
-  z-index: 1400;
-  overflow: hidden;
+.rf-timeline-dot--filled.rf-timeline-dot--info {
+  background-color: #0288d1;
 }
-.rf-phone-field__search-indicator {
-  padding: 6px 12px;
-  font-size: 12px;
-  color: var(--tf-placeholder-color, #888);
-  border-bottom: 1px solid var(--tf-border-color, #e0e0e0);
-  background: var(--rf-surface-variant, #f5f5f5);
+.rf-timeline-dot--filled.rf-timeline-dot--warning {
+  background-color: #ed6c02;
 }
-.rf-phone-field__popup .rf-select__listbox {
-  max-height: inherit;
+.rf-timeline-dot--outlined.rf-timeline-dot--grey {
+  border-color: #bdbdbd;
+  color: #bdbdbd;
 }
-.rf-phone-field__option {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: background-color 0.1s;
-  font-size: 14px;
+.rf-timeline-dot--outlined.rf-timeline-dot--inherit {
+  border-color: currentColor;
 }
-.rf-phone-field__option:hover,
-.rf-phone-field__option--focused {
-  background-color: var(--hover-color);
+.rf-timeline-dot--outlined.rf-timeline-dot--primary {
+  border-color: var(--primary-color, #a81c08);
+  color: var(--primary-color, #a81c08);
 }
-.rf-phone-field__option--selected {
-  background-color: var(--selection-color);
-  font-weight: 500;
+.rf-timeline-dot--outlined.rf-timeline-dot--secondary {
+  border-color: var(--secondary-color, #9c27b0);
+  color: var(--secondary-color, #9c27b0);
 }
-.rf-phone-field__option--selected.rf-phone-field__option--focused {
-  background-color: var(--rf-selected-hover, rgba(25, 118, 210, 0.12));
+.rf-timeline-dot--outlined.rf-timeline-dot--success {
+  border-color: #2e7d32;
+  color: #2e7d32;
 }
-.rf-phone-field__option-flag {
-  font-size: 18px;
-  line-height: 1;
-  flex-shrink: 0;
+.rf-timeline-dot--outlined.rf-timeline-dot--error {
+  border-color: #d32f2f;
+  color: #d32f2f;
 }
-.rf-phone-field__option-name {
+.rf-timeline-dot--outlined.rf-timeline-dot--info {
+  border-color: #0288d1;
+  color: #0288d1;
+}
+.rf-timeline-dot--outlined.rf-timeline-dot--warning {
+  border-color: #ed6c02;
+  color: #ed6c02;
+}
+.rf-timeline-connector {
+  width: 2px;
+  flex-grow: 1;
+  background-color: #bdbdbd;
+}
+.rf-timeline-content,
+.rf-timeline-opposite-content {
   flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--tf-text-color, #333);
+  padding: 6px 16px;
+  text-align: left;
 }
-.rf-phone-field__option-code {
-  color: var(--tf-placeholder-color, #888);
-  font-size: 13px;
-  flex-shrink: 0;
+.rf-timeline-item--right .rf-timeline-opposite-content {
+  text-align: right;
 }
-.rf-phone-field__no-results {
-  padding: 12px;
-  text-align: center;
-  color: var(--tf-placeholder-color, #888);
-  font-size: 14px;
+.rf-timeline-item--left .rf-timeline-content {
+  text-align: right;
 }
 
 /* lib/styles/button.css */
@@ -5990,6 +7239,7 @@ pre {
   justify-content: center;
   letter-spacing: 0.5px;
   transition: all 0.2s;
+  outline: none;
 }
 .cancel-btn:hover,
 .btn-cancel:hover {
@@ -6012,6 +7262,7 @@ pre {
   justify-content: center;
   letter-spacing: 0.5px;
   transition: all 0.2s ease;
+  outline: none;
 }
 .submit-btn:hover:not(:disabled),
 .btn-submit:hover:not(:disabled),
@@ -6208,6 +7459,7 @@ pre {
 .rf-btn--loading {
   cursor: default;
   pointer-events: none;
+  min-width: var(--rf-btn-min-w);
 }
 .rf-btn__start-icon,
 .rf-btn__end-icon {
@@ -6361,21 +7613,24 @@ pre {
   white-space: nowrap;
   color: var(--tf-text-color);
   z-index: 2;
+  flex-shrink: 0;
+  min-width: 36px;
+  box-sizing: border-box;
 }
 .rf-text-field__adornment--start {
-  margin-left: 0px;
-  margin-right: -6px;
+  padding-left: 10px;
+  padding-right: 4px;
 }
 .rf-text-field__adornment--end {
-  margin-right: 0px;
-  margin-left: -6px;
+  padding-right: 10px;
+  padding-left: 4px;
 }
 .rf-text-field--standard .rf-text-field__adornment--start {
-  margin-left: 0;
+  padding-left: 0;
   margin-top: 16px;
 }
 .rf-text-field--standard .rf-text-field__adornment--end {
-  margin-right: 0;
+  padding-right: 0;
   margin-top: 16px;
 }
 .rf-text-field--filled .rf-text-field__adornment--start,
@@ -6428,6 +7683,12 @@ pre {
 .rf-text-field__input:focus::placeholder {
   opacity: 1;
 }
+.rf-text-field:not(.rf-text-field--has-label) .rf-text-field__input::placeholder {
+  opacity: 1;
+}
+.rf-text-field__legend--empty {
+  display: none;
+}
 .rf-text-field__helper-text {
   color: var(--tf-placeholder-color);
   font-size: 0.75rem;
@@ -6660,6 +7921,9 @@ pre {
 .rf-text-field--error .rf-text-field__helper-text {
   color: var(--tf-error-color);
 }
+.rf-text-field--small .rf-text-field__input {
+  font-size: 0.875rem;
+}
 .rf-text-field--small.rf-text-field--outlined .rf-text-field__input {
   padding: 8.5px 14px;
 }
@@ -6906,6 +8170,25 @@ pre {
   border-right: none;
   margin-right: 0;
 }
+.rf-rte-wrapper .toolbar-group:empty {
+  display: none;
+}
+.rf-rte-wrapper .rte-toolbar-toggle {
+  margin-left: auto;
+  color: #a81c08;
+}
+.rf-rte-wrapper .toolbar-row.with-close .rte-toolbar-toggle {
+  margin-right: 9px;
+}
+.rf-rte-wrapper .toolbar-row.with-close .rte-toolbar-toggle.is-expanded {
+  margin-right: -24px;
+}
+.rf-rte-wrapper .rte-toolbar-toggle svg {
+  transition: transform 0.2s ease;
+}
+.rf-rte-wrapper .rte-toolbar-toggle.is-expanded svg {
+  transform: rotate(180deg);
+}
 .rf-rte-wrapper .toolbar-btn {
   display: inline-flex;
   align-items: center;