@sia-ui/react-web 0.2.0 → 0.3.0

package/dist/index.css

@@ -1217,41 +1217,652 @@
   color: var(--sia-danger);
 }
 
-/* src/components/AppShell/styles.css */
-.sia-app-shell {
-  min-height: 32rem;
+/* src/components/Drawer/styles.css */
+.sia-drawer-root {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+.sia-drawer-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  animation: fadeIn var(--sia-duration-base) var(--sia-easing-entrance);
+}
+.sia-drawer {
+  position: absolute;
+  background: var(--sia-color-white);
+  display: flex;
+  flex-direction: column;
+  width: var(--sia-drawer-width);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  will-change: transform;
+}
+.sia-drawer-right {
+  right: 0;
+  top: 0;
+  height: 100%;
+  animation: slideInRight var(--sia-duration-slow) var(--sia-easing-entrance);
+}
+.sia-drawer-left {
+  left: 0;
+  top: 0;
+  height: 100%;
+  animation: slideInLeft var(--sia-duration-slow) var(--sia-easing-entrance);
+}
+.sia-drawer-top {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: auto;
+  --sia-drawer-width: 100% !important;
+  animation: slideInTop var(--sia-duration-slow) var(--sia-easing-entrance);
+}
+.sia-drawer-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: auto;
+  --sia-drawer-width: 100% !important;
+  animation: slideInBottom var(--sia-duration-slow) var(--sia-easing-entrance);
+}
+.sia-drawer-sm {
+  --sia-drawer-width: 320px;
+}
+.sia-drawer-md {
+  --sia-drawer-width: 420px;
+}
+.sia-drawer-lg {
+  --sia-drawer-width: 600px;
+}
+.sia-drawer-xl {
+  --sia-drawer-width: 800px;
+}
+.sia-drawer-header,
+.sia-drawer-footer {
+  padding: 16px;
+  border-bottom: 1px solid var(--sia-color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.sia-drawer-footer {
+  border-top: 1px solid var(--sia-color-border);
+  margin-top: auto;
+}
+.sia-drawer-body {
+  padding: 16px;
+  overflow-y: auto;
+}
+.sia-drawer-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+.sia-drawer-close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+}
+.sia-drawer-right.is-closing {
+  animation: slideOutRight var(--sia-duration-base) var(--sia-easing-exit) forwards;
+}
+.sia-drawer-left.is-closing {
+  animation: slideOutLeft var(--sia-duration-base) var(--sia-easing-exit) forwards;
+}
+.sia-drawer-top.is-closing {
+  animation: slideOutTop var(--sia-duration-base) var(--sia-easing-exit) forwards;
+}
+.sia-drawer-bottom.is-closing {
+  animation: slideOutBottom var(--sia-duration-base) var(--sia-easing-exit) forwards;
+}
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes slideInTop {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes slideInBottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes slideOutRight {
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes slideOutLeft {
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes slideOutTop {
+  to {
+    transform: translateY(-100%);
+  }
+}
+@keyframes slideOutBottom {
+  to {
+    transform: translateY(100%);
+  }
+}
+
+/* src/components/Overlay/styles.css */
+.sia-overlay {
+  z-index: 1450;
+}
+
+/* src/components/Sidebar/styles.css */
+.sia-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding: .5rem;
+  gap: .5rem;
+  font-size: .875rem;
+}
+.sia-sidebar__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: grid;
+  gap: .125rem;
+  align-content: start;
+}
+.sia-sidebar__header,
+.sia-sidebar__footer {
+  flex: none;
+  padding: .25rem;
+  overflow: hidden;
+}
+.sia-sidebar__section {
+  display: grid;
+  gap: .125rem;
+}
+.sia-sidebar__section + .sia-sidebar__section {
+  margin-top: .75rem;
+}
+.sia-sidebar__section-title {
+  padding: .5rem .625rem .25rem;
+  color: var(--sia-muted);
+  font-size: .7rem;
+  font-weight: 600;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  transition: opacity var(--sia-duration-fast) var(--sia-easing-standard), height var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-sidebar__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: .625rem;
+  width: 100%;
+  padding: .5rem .625rem;
+  border: 0;
+  border-radius: var(--sia-radius);
+  background: transparent;
+  color: var(--sia-muted);
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--sia-duration-fast) var(--sia-easing-standard), color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-sidebar__item:hover:not(:disabled) {
+  background: var(--sia-surface);
+  color: var(--sia-foreground);
+}
+.sia-sidebar__item:disabled {
+  opacity: .45;
+  cursor: not-allowed;
+}
+.sia-sidebar__item--active {
+  background: color-mix(in srgb, var(--sia-primary) 10%, transparent);
+  color: var(--sia-primary);
+  font-weight: 600;
+}
+.sia-sidebar__item--active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 3px;
+  height: 1.125rem;
+  border-radius: 0 3px 3px 0;
+  background: var(--sia-primary);
+  transform: translateY(-50%) scaleY(0);
+  animation: sia-sidebar-mark var(--sia-duration-base) var(--sia-easing-spring) forwards;
+}
+@keyframes sia-sidebar-mark {
+  to {
+    transform: translateY(-50%) scaleY(1);
+  }
+}
+.sia-sidebar__icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 1.125rem;
+  font-size: 1.05rem;
+}
+.sia-sidebar__label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sia-sidebar__badge {
+  flex: none;
+  min-width: 1.25rem;
+  padding: 0 .35rem;
+  border-radius: 999px;
+  background: var(--sia-surface);
+  color: var(--sia-muted);
+  font-size: .7rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.25rem;
+  text-align: center;
+}
+.sia-sidebar__item--active .sia-sidebar__badge {
+  background: color-mix(in srgb, var(--sia-primary) 16%, transparent);
+  color: var(--sia-primary);
+}
+.sia-sidebar__chevron {
+  display: grid;
+  place-items: center;
+  flex: none;
+  color: var(--sia-muted);
+  font-size: .8rem;
+  transition: transform var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-sidebar__node[data-open] .sia-sidebar__chevron {
+  transform: rotate(180deg);
+}
+.sia-sidebar__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-sidebar__node[data-open] .sia-sidebar__panel {
+  grid-template-rows: 1fr;
+}
+.sia-sidebar__sub {
+  overflow: hidden;
+  min-height: 0;
+  display: grid;
+  gap: .125rem;
+}
+.sia-sidebar__item--child {
+  padding-left: calc(.625rem + var(--sia-sidebar-depth, 1) * .75rem);
+  padding-block: .375rem;
+  font-size: .825rem;
+}
+.sia-sidebar__sub {
+  position: relative;
+}
+.sia-sidebar__sub::before {
+  content: "";
+  position: absolute;
+  top: .375rem;
+  bottom: .375rem;
+  left: 1.25rem;
+  width: 1px;
+  background: var(--sia-border);
+}
+.sia-sidebar--collapsed .sia-sidebar__item {
+  justify-content: center;
+  padding-inline: .5rem;
+}
+.sia-sidebar--collapsed .sia-sidebar__label,
+.sia-sidebar--collapsed .sia-sidebar__badge,
+.sia-sidebar--collapsed .sia-sidebar__chevron {
+  display: none;
+}
+.sia-sidebar--collapsed .sia-sidebar__section-title {
+  height: 0;
+  padding: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+.sia-sidebar--collapsed .sia-sidebar__item {
+  position: relative;
+}
+.sia-sidebar__dot {
+  position: absolute;
+  top: .3rem;
+  right: .3rem;
+  width: .45rem;
+  height: .45rem;
+  border-radius: 50%;
+  background: var(--sia-danger, #e11d48);
+  box-shadow: 0 0 0 2px var(--sia-background);
+}
+.sia-sidebar-flyout {
+  min-width: 13rem;
+  max-width: 18rem;
+  padding: .3rem;
+  border: 1px solid var(--sia-border);
+  border-radius: var(--sia-radius);
+  background: var(--sia-background);
+  box-shadow: var(--sia-shadow-lg, 0 12px 32px rgb(15 23 42 / .16));
+  font-size: .875rem;
+  animation: sia-sidebar-flyout var(--sia-duration-fast) var(--sia-easing-standard);
+}
+@keyframes sia-sidebar-flyout {
+  from {
+    opacity: 0;
+    transform: translateX(-.25rem);
+  }
+}
+.sia-sidebar--right .sia-sidebar-flyout {
+  animation-name: sia-sidebar-flyout-right;
+}
+@keyframes sia-sidebar-flyout-right {
+  from {
+    opacity: 0;
+    transform: translateX(.25rem);
+  }
+}
+.sia-sidebar-flyout__title {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  padding: .4rem .625rem .5rem;
+  color: var(--sia-foreground);
+  font-weight: 650;
+}
+.sia-sidebar-flyout__body {
   display: grid;
-  grid-template-columns: 16rem 1fr;
+  gap: .125rem;
+}
+.sia-sidebar-flyout .sia-sidebar__sub::before {
+  display: none;
+}
+.sia-sidebar-flyout .sia-sidebar__item--child {
+  padding-left: calc(.625rem + var(--sia-sidebar-depth, 1) * .6rem);
+}
+.sia-sidebar--filled {
+  background: var(--sia-surface);
+}
+.sia-sidebar--filled .sia-sidebar__item:hover:not(:disabled) {
+  background: var(--sia-background);
+}
+.sia-sidebar--floating {
+  margin: .5rem;
   border: 1px solid var(--sia-border);
+  border-radius: calc(var(--sia-radius) * 1.5);
+  background: var(--sia-background);
+  box-shadow: var(--sia-shadow-sm, 0 1px 2px rgb(15 23 42 / .06));
+}
+.sia-sidebar--sm {
+  font-size: .8125rem;
+}
+.sia-sidebar--sm .sia-sidebar__item {
+  padding-block: .375rem;
+}
+.sia-sidebar--lg {
+  font-size: .9375rem;
+}
+.sia-sidebar--lg .sia-sidebar__item {
+  padding-block: .625rem;
+}
+.sia-sidebar--lg .sia-sidebar__icon {
+  width: 1.25rem;
+  font-size: 1.15rem;
+}
+.sia-sidebar__item--active {
+  color: var(--sia-accent, var(--sia-primary));
+}
+.sia-sidebar__item--active::before {
+  background: var(--sia-accent, var(--sia-primary));
+}
+.sia-sidebar__item--active {
+  background: color-mix(in srgb, var(--sia-accent, var(--sia-primary)) 10%, transparent);
+}
+.sia-sidebar__item--in-branch {
+  color: var(--sia-foreground);
+  font-weight: 600;
+}
+
+/* src/components/AppShell/styles.css */
+.sia-shell {
+  --sia-shell-sidebar: 16rem;
+  --sia-shell-rail: 4rem;
+  --sia-shell-header: 3.5rem;
+  --sia-shell-tabs: 4rem;
+  display: grid;
+  grid-template-columns: var(--sia-shell-sidebar) minmax(0, 1fr);
+  min-height: 100%;
+  background: var(--sia-background);
+  color: var(--sia-foreground);
+  transition: grid-template-columns var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-shell--rail {
+  grid-template-columns: var(--sia-shell-rail) minmax(0, 1fr);
+}
+.sia-shell--hidden,
+.sia-shell--compact {
+  grid-template-columns: minmax(0, 1fr);
 }
-.sia-app-shell--collapsed {
-  grid-template-columns: 4rem 1fr;
+.sia-shell--right {
+  grid-template-columns: minmax(0, 1fr) var(--sia-shell-sidebar);
 }
-.sia-app-shell > aside {
+.sia-shell--right.sia-shell--rail {
+  grid-template-columns: minmax(0, 1fr) var(--sia-shell-rail);
+}
+.sia-shell--right .sia-shell__aside {
+  order: 2;
+}
+.sia-shell__aside {
+  min-width: 0;
+  height: 100vh;
+  position: sticky;
+  top: 0;
   overflow: hidden;
   border-right: 1px solid var(--sia-border);
   background: var(--sia-surface);
 }
-.sia-app-shell__brand {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 4rem;
-  padding: .75rem;
+.sia-shell--right .sia-shell__aside {
+  border-right: 0;
+  border-left: 1px solid var(--sia-border);
 }
-.sia-app-shell__main {
-  min-width: 0;
+.sia-shell--filled .sia-shell__aside {
+  background: var(--sia-surface-raised, var(--sia-surface));
+}
+.sia-shell--floating .sia-shell__aside {
+  border: 0;
+  background: transparent;
+  padding: .5rem;
+}
+.sia-shell__main {
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  min-height: 100vh;
 }
-.sia-app-shell__main > header,
-.sia-app-shell__main > footer {
-  padding: 1rem;
+.sia-shell__header {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  flex: none;
+  min-height: var(--sia-shell-header);
+  padding: .5rem 1rem;
   border-bottom: 1px solid var(--sia-border);
+  background: color-mix(in srgb, var(--sia-background) 88%, transparent);
+}
+.sia-shell__header--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  backdrop-filter: blur(8px);
+}
+.sia-shell__header-content {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  flex: 1;
+  min-width: 0;
+}
+.sia-shell__toggle {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 0;
+  border-radius: var(--sia-radius);
+  background: transparent;
+  color: var(--sia-muted);
+  cursor: pointer;
+  transition: background-color var(--sia-duration-fast) var(--sia-easing-standard), color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-shell__toggle:hover {
+  background: var(--sia-surface);
+  color: var(--sia-foreground);
+}
+.sia-shell__toggle:focus-visible {
+  outline: 2px solid var(--sia-primary);
+  outline-offset: 2px;
 }
-.sia-app-shell__main > main {
+.sia-shell__content {
   flex: 1;
+  min-width: 0;
+  width: 100%;
+  margin-inline: auto;
+  padding: 1.25rem 1rem 2rem;
+}
+.sia-shell__content--wide {
+  max-width: 87.5rem;
+}
+.sia-shell__content--narrow {
+  max-width: 48rem;
+}
+.sia-shell__content--full {
+  max-width: none;
+}
+.sia-shell__page {
+  margin-bottom: 1.25rem;
+}
+.sia-shell__footer {
+  flex: none;
   padding: 1rem;
+  border-top: 1px solid var(--sia-border);
+  color: var(--sia-muted);
+  font-size: .85rem;
+}
+.sia-shell--compact .sia-shell__content {
+  padding-inline: .875rem;
+}
+.sia-shell--with-tabs .sia-shell__main {
+  padding-bottom: calc(var(--sia-shell-tabs) + env(safe-area-inset-bottom, 0px));
+}
+.sia-shell__drawer .sia-sidebar {
+  height: 100%;
+}
+.sia-bottom-tabs {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 30;
+  display: flex;
+  align-items: stretch;
+  height: var(--sia-shell-tabs);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  border-top: 1px solid var(--sia-border);
+  background: color-mix(in srgb, var(--sia-background) 92%, transparent);
+  backdrop-filter: blur(12px);
+}
+.sia-bottom-tabs__cell {
+  display: contents;
+}
+.sia-bottom-tabs__item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: .15rem;
+  min-width: 0;
+  padding: .25rem .25rem .3rem;
+  border: 0;
+  background: transparent;
+  color: var(--sia-muted);
+  font: inherit;
+  font-size: .68rem;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-bottom-tabs__pastille {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 3rem;
+  height: 1.75rem;
+  border-radius: 999px;
+  background: transparent;
+  font-size: 1.1rem;
+  transform: scale(.9);
+  transition: background-color var(--sia-duration-base) var(--sia-easing-spring), transform var(--sia-duration-base) var(--sia-easing-spring);
+}
+.sia-bottom-tabs__item--active {
+  color: var(--sia-primary);
+}
+.sia-bottom-tabs__item--active .sia-bottom-tabs__pastille {
+  background: color-mix(in srgb, var(--sia-primary) 14%, transparent);
+  transform: scale(1);
+}
+.sia-bottom-tabs__label {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sia-bottom-tabs__point {
+  position: absolute;
+  top: .05rem;
+  right: .65rem;
+  width: .4rem;
+  height: .4rem;
+  border-radius: 50%;
+  background: var(--sia-danger);
+  box-shadow: 0 0 0 2px var(--sia-background);
+}
+.sia-bottom-tabs__item:focus-visible {
+  outline: 2px solid var(--sia-primary);
+  outline-offset: -3px;
+  border-radius: var(--sia-radius);
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-shell,
+  .sia-bottom-tabs__pastille {
+    transition: none;
+  }
 }
 
 /* src/components/AspectRatio/styles.css */
@@ -1645,34 +2256,206 @@
 
 /* src/components/Avatar/styles.css */
 .sia-avatar {
+  --sia-avatar-tint: var(--sia-primary);
+  --sia-avatar-size: 2.5rem;
+  --sia-avatar-radius: 50%;
+  position: relative;
   display: inline-grid;
   place-items: center;
+  flex: none;
+  width: var(--sia-avatar-size);
+  height: var(--sia-avatar-size);
+  border: 0;
+  border-radius: var(--sia-avatar-radius);
+  padding: 0;
   overflow: hidden;
-  border-radius: 50%;
-  color: var(--sia-primary-foreground);
-  background: var(--sia-primary);
-  font-weight: 750;
+  font-family: inherit;
+  font-weight: 600;
+  user-select: none;
   line-height: 1;
 }
-.sia-avatar img {
+.sia-avatar__fallback {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  padding-top: .04em;
+  font-size: calc(var(--sia-avatar-size) * .38);
+  letter-spacing: .01em;
+}
+.sia-avatar__image {
+  position: absolute;
+  inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
+  opacity: 0;
+  animation: sia-avatar-image var(--sia-duration-base) var(--sia-easing-standard) forwards;
+}
+@keyframes sia-avatar-image {
+  from {
+    opacity: 0;
+    transform: scale(1.04);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+.sia-avatar--loading .sia-avatar__fallback {
+  animation: sia-avatar-attente 1.6s ease-in-out infinite;
+}
+@keyframes sia-avatar-attente {
+  50% {
+    opacity: .55;
+  }
+}
+.sia-avatar--soft .sia-avatar__fallback {
+  background:
+    linear-gradient(
+      145deg,
+      color-mix(in srgb, var(--sia-avatar-tint) 20%, var(--sia-background)),
+      color-mix(in srgb, var(--sia-avatar-tint) 11%, var(--sia-background)));
+  color: color-mix(in srgb, var(--sia-avatar-tint) 82%, var(--sia-foreground));
+}
+.sia-avatar--solid .sia-avatar__fallback {
+  background:
+    linear-gradient(
+      145deg,
+      color-mix(in srgb, var(--sia-avatar-tint) 88%, white),
+      var(--sia-avatar-tint));
+  color: var(--sia-primary-foreground, #fff);
+}
+.sia-avatar--outline .sia-avatar__fallback {
+  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sia-avatar-tint) 45%, transparent);
+  background: var(--sia-background);
+  color: color-mix(in srgb, var(--sia-avatar-tint) 85%, var(--sia-foreground));
+}
+.sia-avatar--ring {
+  box-shadow: 0 0 0 2px var(--sia-background), 0 0 0 3px color-mix(in srgb, var(--sia-avatar-tint) 30%, transparent);
+}
+.sia-avatar--tint-primary {
+  --sia-avatar-tint: var(--sia-primary);
+}
+.sia-avatar--tint-secondary {
+  --sia-avatar-tint: var(--sia-secondary);
+}
+.sia-avatar--tint-info {
+  --sia-avatar-tint: var(--sia-info);
+}
+.sia-avatar--tint-success {
+  --sia-avatar-tint: var(--sia-success);
+}
+.sia-avatar--tint-warning {
+  --sia-avatar-tint: var(--sia-warning);
+}
+.sia-avatar--tint-danger {
+  --sia-avatar-tint: var(--sia-danger);
+}
+.sia-avatar--circle {
+  --sia-avatar-radius: 50%;
+}
+.sia-avatar--rounded {
+  --sia-avatar-radius: calc(var(--sia-avatar-size) * .28);
+}
+.sia-avatar--square {
+  --sia-avatar-radius: calc(var(--sia-avatar-size) * .08);
+}
+.sia-avatar--xs {
+  --sia-avatar-size: 1.5rem;
 }
 .sia-avatar--sm {
-  width: 2rem;
-  height: 2rem;
-  font-size: .72rem;
+  --sia-avatar-size: 2rem;
 }
 .sia-avatar--md {
-  width: 2.75rem;
-  height: 2.75rem;
-  font-size: .85rem;
+  --sia-avatar-size: 2.5rem;
 }
 .sia-avatar--lg {
-  width: 4rem;
-  height: 4rem;
-  font-size: 1.1rem;
+  --sia-avatar-size: 3.25rem;
+}
+.sia-avatar--xl {
+  --sia-avatar-size: 4.5rem;
+}
+.sia-avatar__status {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: calc(var(--sia-avatar-size) * .26);
+  height: calc(var(--sia-avatar-size) * .26);
+  min-width: .4rem;
+  min-height: .4rem;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--sia-background);
+}
+.sia-avatar--circle .sia-avatar__status {
+  right: calc(var(--sia-avatar-size) * .03);
+  bottom: calc(var(--sia-avatar-size) * .03);
+}
+.sia-avatar__status--online {
+  background: var(--sia-success);
+}
+.sia-avatar__status--busy {
+  background: var(--sia-danger);
+}
+.sia-avatar__status--away {
+  background: var(--sia-warning);
+}
+.sia-avatar__status--offline {
+  background: var(--sia-background);
+  box-shadow: 0 0 0 2px var(--sia-background), inset 0 0 0 2px var(--sia-muted);
+}
+.sia-avatar--pressable {
+  cursor: pointer;
+  transition: transform var(--sia-duration-fast) var(--sia-easing-standard), box-shadow var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-avatar--pressable:hover {
+  transform: translateY(-1px);
+}
+.sia-avatar--pressable:active {
+  transform: translateY(0) scale(.96);
+}
+.sia-avatar--pressable:focus-visible {
+  outline: 2px solid var(--sia-primary);
+  outline-offset: 2px;
+}
+.sia-avatar-group {
+  --sia-avatar-overlap: .25;
+  display: inline-flex;
+  align-items: center;
+  padding-left: calc(var(--sia-avatar-size, 2.5rem) * var(--sia-avatar-overlap));
+}
+.sia-avatar-group > .sia-avatar {
+  margin-left: calc(var(--sia-avatar-size) * var(--sia-avatar-overlap) * -1);
+  box-shadow: 0 0 0 calc(var(--sia-avatar-size) * .055) var(--sia-background);
+  transition: transform var(--sia-duration-base) var(--sia-easing-spring);
+}
+.sia-avatar-group--spread:hover > .sia-avatar {
+  margin-left: calc(var(--sia-avatar-size) * var(--sia-avatar-overlap) * -.25);
+}
+.sia-avatar-group--spread > .sia-avatar {
+  transition: margin-left var(--sia-duration-base) var(--sia-easing-spring), transform var(--sia-duration-base) var(--sia-easing-spring);
+}
+.sia-avatar-group > .sia-avatar:hover {
+  transform: translateY(-2px);
+  z-index: 10;
+}
+.sia-avatar--overflow .sia-avatar__fallback {
+  background: var(--sia-surface);
+  color: var(--sia-muted);
+  font-size: calc(var(--sia-avatar-size) * .32);
+  font-variant-numeric: tabular-nums;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-avatar__image,
+  .sia-avatar--loading .sia-avatar__fallback {
+    animation: none;
+    opacity: 1;
+  }
+  .sia-avatar--pressable:hover,
+  .sia-avatar-group > .sia-avatar:hover {
+    transform: none;
+  }
 }
 
 /* src/components/Badge/styles.css */
@@ -1777,11 +2560,6 @@
   color: var(--sia-info);
 }
 
-/* src/components/Overlay/styles.css */
-.sia-overlay {
-  z-index: 1450;
-}
-
 /* src/components/DropdownMenu/styles.css */
 .sia-menu-anchor {
   display: inline-flex;
@@ -2646,576 +3424,453 @@
   }
 }
 
-/* src/components/CrudPage/styles.css */
-.sia-crud-page {
-  display: grid;
-  gap: 1.25rem;
-}
-
-/* src/components/CurrencyInput/styles.css */
-.sia-currency-input {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-/* src/components/DataTable/styles.css */
-.sia-data-table {
-  width: 100%;
-  overflow: auto;
+/* src/components/SearchInput/styles.css */
+.sia-search-input {
+  display: flex;
+  align-items: center;
+  min-height: 2.5rem;
+  overflow: hidden;
   border: 1px solid var(--sia-border);
   border-radius: var(--sia-radius);
-}
-.sia-data-table table {
-  width: 100%;
-  border-collapse: collapse;
-}
-.sia-data-table caption {
-  padding: .75rem;
-  text-align: left;
-  font-weight: 700;
-}
-.sia-data-table th,
-.sia-data-table td {
-  padding: .75rem 1rem;
-  border-bottom: 1px solid var(--sia-border);
-}
-.sia-data-table th {
-  color: var(--sia-muted);
-  background: var(--sia-surface);
-  font-size: .78rem;
-  text-transform: uppercase;
-  letter-spacing: .04em;
-}
-.sia-data-table tbody tr:last-child td {
-  border-bottom: 0;
-}
-.sia-data-table__state {
   color: var(--sia-muted);
-  text-align: center;
-}
-.sia-data-table tbody tr {
-  transition: background-color var(--sia-duration-fast) var(--sia-easing-standard);
-}
-.sia-data-table tbody tr:hover {
-  background: color-mix(in srgb, var(--sia-primary) 4%, transparent);
+  background: var(--sia-background);
 }
-.sia-data-table tbody tr[aria-selected=true] {
-  background: color-mix(in srgb, var(--sia-primary) 9%, transparent);
+.sia-search-input:focus-within {
+  outline: 3px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
+  outline-offset: 2px;
 }
-.sia-data-table {
-  position: relative;
+.sia-search-input__icon {
+  padding-left: .75rem;
 }
-.sia-data-table__sort {
-  display: inline-flex;
-  align-items: center;
-  gap: .35rem;
-  padding: 0;
+.sia-search-input input {
+  flex: 1;
+  min-width: 0;
+  min-height: 2.4rem;
+  padding: 0 .65rem;
   border: 0;
+  outline: 0;
+  color: var(--sia-foreground);
   background: transparent;
-  color: inherit;
   font: inherit;
-  text-transform: inherit;
-  letter-spacing: inherit;
-  cursor: pointer;
-  transition: color var(--sia-duration-fast) var(--sia-easing-standard);
-}
-.sia-data-table__sort:hover {
-  color: var(--sia-foreground);
-}
-.sia-data-table__sort[data-active] {
-  color: var(--sia-primary);
-}
-.sia-data-table__arrow {
-  display: grid;
-  place-items: center;
-  font-size: .75rem;
-  opacity: 0;
-  transform: translateY(2px);
-  transition: opacity var(--sia-duration-fast) var(--sia-easing-standard), transform var(--sia-duration-base) var(--sia-easing-spring);
-}
-.sia-data-table__sort:hover .sia-data-table__arrow {
-  opacity: .45;
-  transform: none;
-}
-.sia-data-table__sort[data-active] .sia-data-table__arrow {
-  opacity: 1;
-  transform: none;
 }
-.sia-data-table--sticky thead th {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background: var(--sia-surface);
-  box-shadow: inset 0 -1px var(--sia-border);
-}
-.sia-data-table--clickable tbody tr {
+.sia-search-input__clear {
+  padding: .4rem .75rem;
+  border: 0;
+  color: var(--sia-muted);
+  background: transparent;
+  font-size: 1.1rem;
   cursor: pointer;
 }
-.sia-data-table__ghost-bar {
+.sia-search-input input {
+  line-height: 1.25;
+}
+
+/* src/components/Skeleton/styles.css */
+.sia-skeleton {
   display: block;
-  height: .75rem;
-  border-radius: 999px;
+  max-width: 100%;
+  border-radius: var(--sia-radius);
   background:
     linear-gradient(
       90deg,
-      var(--sia-surface) 25%,
-      var(--sia-border) 37%,
-      var(--sia-surface) 63%);
-  background-size: 400% 100%;
-  animation: sia-skeleton 1.4s ease infinite;
-}
-.sia-data-table__ghost:nth-child(2n) .sia-data-table__ghost-bar {
-  width: 78%;
-}
-.sia-data-table__ghost:nth-child(3n) .sia-data-table__ghost-bar {
-  width: 62%;
+      var(--sia-border),
+      color-mix(in srgb, var(--sia-border) 45%, var(--sia-background)),
+      var(--sia-border));
+  background-size: 200% 100%;
+  animation: sia-skeleton 1.4s ease-in-out infinite;
 }
-.sia-data-table__veil {
-  position: absolute;
-  inset: 0;
-  background: color-mix(in srgb, var(--sia-background) 55%, transparent);
-  animation: sia-fade-in var(--sia-duration-fast) var(--sia-easing-standard);
-  pointer-events: none;
+.sia-skeleton--circle {
+  aspect-ratio: 1;
 }
 
-/* src/components/DateRangeFilter/styles.css */
-.sia-date-range-filter {
-  display: flex;
-  align-items: end;
+/* src/components/ErrorState/styles.css */
+.sia-error-state {
+  display: grid;
+  place-items: center;
   gap: .75rem;
-  flex-wrap: wrap;
-}
-.sia-date-range-filter__presets {
-  display: flex;
-  gap: .4rem;
-  flex-wrap: wrap;
-}
-.sia-date-range-filter button {
-  min-height: 2.25rem;
-  padding: 0 .7rem;
-  border: 1px solid var(--sia-border);
-  border-radius: var(--sia-radius);
-  background: var(--sia-background);
-}
-.sia-date-range-filter__clear {
-  color: var(--sia-danger);
+  min-height: 14rem;
+  padding: 2rem;
+  text-align: center;
+  border: 1px solid color-mix(in srgb, var(--sia-danger) 35%, var(--sia-border));
+  border-radius: calc(var(--sia-radius) * 1.25);
+  background: color-mix(in srgb, var(--sia-danger) 5%, var(--sia-background));
 }
-
-/* src/components/TimePicker/styles.css */
-.sia-time-panel {
-  --sia-accent:var(--sia-primary);
-  --sia-accent-foreground:var(--sia-primary-foreground);
-  min-width: 15rem;
+.sia-error-state--compact {
+  min-height: 8rem;
+  padding: 1.25rem;
 }
-.sia-time-panel__columns {
+.sia-error-state__icon {
   display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(4.5rem, 1fr);
-  height: 16rem;
-}
-.sia-time-panel__column {
-  overflow-y: auto;
-  padding: .35rem;
-  border-right: 1px solid var(--sia-border);
-  scrollbar-width: thin;
-}
-.sia-time-panel__column:last-child {
-  border-right: 0;
+  place-items: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  color: #fff;
+  background: var(--sia-danger);
+  font-weight: 800;
 }
-.sia-time-panel__column button {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-height: 2.15rem;
-  padding: .35rem .55rem;
-  border: 0;
-  border-radius: .45rem;
+.sia-error-state__title {
   color: var(--sia-foreground);
-  background: transparent;
-  font: inherit;
-  font-variant-numeric: tabular-nums;
-  cursor: pointer;
-}
-.sia-time-panel__column button:hover:not(:disabled) {
-  background: var(--sia-surface);
-}
-.sia-time-panel__column button[aria-selected=true] {
-  color: var(--sia-accent);
-  background: color-mix(in srgb, var(--sia-accent) 11%, transparent);
-  font-weight: 750;
-}
-.sia-time-panel__column button svg {
-  width: .85rem;
-  height: .85rem;
-}
-.sia-time-panel__column button:disabled {
-  opacity: .3;
-  cursor: not-allowed;
-}
-.sia-time-panel__footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: .4rem;
-  padding: .55rem;
-  border-top: 1px solid var(--sia-border);
-}
-.sia-time-panel__footer button {
-  min-height: 2rem;
-  padding: 0 .65rem;
-  border: 0;
-  border-radius: .45rem;
-  font: inherit;
-  font-weight: 650;
-  cursor: pointer;
-}
-.sia-time-panel__now {
-  color: var(--sia-accent);
-  background: transparent;
-}
-.sia-time-panel__confirm {
-  color: var(--sia-accent-foreground);
-  background: var(--sia-accent);
-}
-
-/* src/components/Descriptions/styles.css */
-.sia-descriptions {
-  display: grid;
-  gap: 1rem;
-}
-.sia-descriptions h3 {
-  margin: 0;
 }
-.sia-descriptions__grid {
-  display: grid;
-  gap: 1rem;
+.sia-error-state__description {
+  max-width: 32rem;
   margin: 0;
+  color: var(--sia-muted);
+  line-height: 1.5;
 }
-.sia-descriptions__grid--2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-.sia-descriptions__grid--3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+.sia-error-state__actions {
+  display: flex;
+  gap: .75rem;
+  flex-wrap: wrap;
+  justify-content: center;
 }
-.sia-descriptions dt {
-  color: var(--sia-muted);
-  font-size: .78rem;
-  font-weight: 700;
+
+/* src/components/IconButton/styles.css */
+.sia-icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--sia-radius);
+  color: var(--sia-foreground);
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
 }
-.sia-descriptions dd {
-  margin: .25rem 0 0;
+.sia-icon-button--sm {
+  width: 2rem;
+  height: 2rem;
 }
-.sia-descriptions--bordered .sia-descriptions__grid > div {
-  padding: 1rem;
-  border: 1px solid var(--sia-border);
+.sia-icon-button--lg {
+  width: 3rem;
+  height: 3rem;
 }
-
-/* src/components/Divider/styles.css */
-.sia-divider {
-  flex: none;
-  background: var(--sia-border);
+.sia-icon-button--solid {
+  color: var(--sia-primary-foreground);
+  background: var(--sia-primary);
 }
-.sia-divider--horizontal {
-  width: 100%;
-  height: 1px;
+.sia-icon-button--outline {
+  border-color: var(--sia-border);
+  background: var(--sia-background);
 }
-.sia-divider--vertical {
-  align-self: stretch;
-  width: 1px;
-  min-height: 1.5rem;
+.sia-icon-button:hover {
+  background: color-mix(in srgb, var(--sia-primary) 8%, var(--sia-background));
+}
+.sia-icon-button:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
+  outline-offset: 2px;
 }
 
-/* src/components/Drawer/styles.css */
-.sia-drawer-root {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
+/* src/components/DataTable/styles.css */
+.sia-table {
+  --sia-table-row-height: 3rem;
+  --sia-table-pad-y: .75rem;
+  --sia-table-pad-x: .875rem;
+  display: flex;
+  flex-direction: column;
+  gap: .75rem;
+  min-width: 0;
+  font-size: .875rem;
 }
-.sia-drawer-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  animation: fadeIn var(--sia-duration-base) var(--sia-easing-entrance);
+.sia-table--compact {
+  --sia-table-row-height: 2.375rem;
+  --sia-table-pad-y: .45rem;
+  font-size: .825rem;
 }
-.sia-drawer {
-  position: absolute;
-  background: var(--sia-color-white);
+.sia-table--comfortable {
+  --sia-table-row-height: 3.75rem;
+  --sia-table-pad-y: 1.05rem;
+}
+.sia-table__header {
   display: flex;
-  flex-direction: column;
-  width: var(--sia-drawer-width);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-  will-change: transform;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
 }
-.sia-drawer-right {
-  right: 0;
-  top: 0;
-  height: 100%;
-  animation: slideInRight var(--sia-duration-slow) var(--sia-easing-entrance);
+.sia-table__heading {
+  min-width: 0;
+  display: grid;
+  gap: .15rem;
 }
-.sia-drawer-left {
-  left: 0;
-  top: 0;
-  height: 100%;
-  animation: slideInLeft var(--sia-duration-slow) var(--sia-easing-entrance);
+.sia-table__title {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 650;
 }
-.sia-drawer-top {
-  top: 0;
-  left: 0;
-  right: 0;
-  height: auto;
-  --sia-drawer-width: 100% !important;
-  animation: slideInTop var(--sia-duration-slow) var(--sia-easing-entrance);
+.sia-table__description {
+  margin: 0;
+  color: var(--sia-muted);
+  font-size: .85rem;
 }
-.sia-drawer-bottom {
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: auto;
-  --sia-drawer-width: 100% !important;
-  animation: slideInBottom var(--sia-duration-slow) var(--sia-easing-entrance);
+.sia-table__tools {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  flex-wrap: wrap;
+  margin-left: auto;
 }
-.sia-drawer-sm {
-  --sia-drawer-width: 320px;
+.sia-table__actions-bar {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
 }
-.sia-drawer-md {
-  --sia-drawer-width: 420px;
+.sia-table__views {
+  display: inline-flex;
+  padding: .2rem;
+  border: 1px solid var(--sia-border);
+  border-radius: var(--sia-radius);
+  background: var(--sia-surface);
 }
-.sia-drawer-lg {
-  --sia-drawer-width: 600px;
+.sia-table__view {
+  display: grid;
+  place-items: center;
+  width: 1.9rem;
+  height: 1.9rem;
+  border: 0;
+  border-radius: calc(var(--sia-radius) - .15rem);
+  background: transparent;
+  color: var(--sia-muted);
+  cursor: pointer;
+  transition: background-color var(--sia-duration-fast) var(--sia-easing-standard), color var(--sia-duration-fast) var(--sia-easing-standard);
 }
-.sia-drawer-xl {
-  --sia-drawer-width: 800px;
+.sia-table__view--active {
+  background: var(--sia-background);
+  color: var(--sia-foreground);
+  box-shadow: 0 1px 2px rgb(15 23 42 / .08);
 }
-.sia-drawer-header,
-.sia-drawer-footer {
-  padding: 16px;
-  border-bottom: 1px solid var(--sia-color-border);
+.sia-table__selection {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-}
-.sia-drawer-footer {
-  border-top: 1px solid var(--sia-color-border);
-  margin-top: auto;
+  gap: .75rem;
+  padding: .5rem .875rem;
+  border: 1px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
+  border-radius: var(--sia-radius);
+  background: color-mix(in srgb, var(--sia-primary) 8%, var(--sia-background));
+  animation: sia-table-selection var(--sia-duration-base) var(--sia-easing-spring);
 }
-.sia-drawer-body {
-  padding: 16px;
-  overflow-y: auto;
+@keyframes sia-table-selection {
+  from {
+    opacity: 0;
+    transform: translateY(-.35rem);
+  }
 }
-.sia-drawer-title {
-  font-size: 1.1rem;
+.sia-table__selection-count {
+  color: var(--sia-primary);
   font-weight: 600;
+  font-variant-numeric: tabular-nums;
 }
-.sia-drawer-close {
-  margin-left: auto;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 1.2rem;
+.sia-table__scroll {
+  min-width: 0;
+  overflow: auto;
+  border-radius: var(--sia-radius);
 }
-.sia-drawer-right.is-closing {
-  animation: slideOutRight var(--sia-duration-base) var(--sia-easing-exit) forwards;
+.sia-table--bordered .sia-table__scroll {
+  border: 1px solid var(--sia-border);
 }
-.sia-drawer-left.is-closing {
-  animation: slideOutLeft var(--sia-duration-base) var(--sia-easing-exit) forwards;
+.sia-table__table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
 }
-.sia-drawer-top.is-closing {
-  animation: slideOutTop var(--sia-duration-base) var(--sia-easing-exit) forwards;
+.sia-table__table th {
+  padding: var(--sia-table-pad-y) var(--sia-table-pad-x);
+  border-bottom: 1px solid var(--sia-border);
+  background: var(--sia-surface);
+  color: var(--sia-muted);
+  font-size: .75rem;
+  font-weight: 600;
+  letter-spacing: .03em;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
 }
-.sia-drawer-bottom.is-closing {
-  animation: slideOutBottom var(--sia-duration-base) var(--sia-easing-exit) forwards;
+.sia-table__scroll--sticky th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
 }
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
+.sia-table__table td {
+  height: var(--sia-table-row-height);
+  padding: var(--sia-table-pad-y) var(--sia-table-pad-x);
+  border-bottom: 1px solid var(--sia-border);
+  vertical-align: middle;
 }
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
+.sia-table__table tbody tr:last-child td {
+  border-bottom: 0;
 }
-@keyframes slideInTop {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
+.sia-table--striped tbody tr:nth-child(even) td {
+  background: color-mix(in srgb, var(--sia-surface) 55%, transparent);
 }
-@keyframes slideInBottom {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
+.sia-table__table tbody tr {
+  transition: background-color var(--sia-duration-fast) var(--sia-easing-standard);
 }
-@keyframes slideOutRight {
-  to {
-    transform: translateX(100%);
-  }
+.sia-table__table tbody tr:hover td {
+  background: color-mix(in srgb, var(--sia-primary) 4%, var(--sia-surface));
 }
-@keyframes slideOutLeft {
-  to {
-    transform: translateX(-100%);
-  }
+.sia-table__row--clickable {
+  cursor: pointer;
 }
-@keyframes slideOutTop {
-  to {
-    transform: translateY(-100%);
-  }
+.sia-table__row--selected td {
+  background: color-mix(in srgb, var(--sia-primary) 7%, transparent);
+}
+.sia-table__cell--center {
+  text-align: center;
+}
+.sia-table__cell--end {
+  text-align: right;
+}
+.sia-table__cell--truncate {
+  max-width: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-@keyframes slideOutBottom {
-  to {
-    transform: translateY(100%);
-  }
+.sia-table__cell--select {
+  width: 1px;
+  padding-right: 0;
 }
-
-/* src/components/EntityMeta/styles.css */
-.sia-entity-meta {
-  display: grid;
-  gap: 1rem;
-  padding: 1rem 1.25rem;
-  border: 1px solid var(--sia-border);
-  border-radius: calc(var(--sia-radius) * 1.25);
-  background: var(--sia-surface);
+.sia-table__cell--actions {
+  width: 1px;
+  white-space: nowrap;
+  text-align: right;
 }
-.sia-entity-meta__header {
-  display: flex;
+.sia-table__actions {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: .75rem;
-  flex-wrap: wrap;
+  gap: .15rem;
+  justify-content: flex-end;
 }
-.sia-entity-meta__status {
+@media (hover: hover) and (pointer: fine) {
+  .sia-table__table tbody .sia-table__actions {
+    opacity: .35;
+    transition: opacity var(--sia-duration-fast) var(--sia-easing-standard);
+  }
+  .sia-table__table tbody tr:hover .sia-table__actions,
+  .sia-table__table tbody .sia-table__actions:focus-within {
+    opacity: 1;
+  }
+}
+.sia-table__sort {
   display: inline-flex;
   align-items: center;
-  min-height: 1.75rem;
-  padding: 0 .65rem;
-  border-radius: 9999px;
-  color: var(--sia-primary);
-  background: color-mix(in srgb, var(--sia-primary) 10%, transparent);
-  font-size: .75rem;
-  font-weight: 700;
+  gap: .3rem;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
 }
-.sia-entity-meta__identifier {
-  padding: .2rem .5rem;
-  border-radius: 9999px;
+.sia-table__sort:hover {
   color: var(--sia-foreground);
-  background: var(--sia-background);
-  border: 1px solid var(--sia-border);
-  font-size: .78rem;
 }
-.sia-entity-meta__grid {
+.sia-table__sort-icon {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1rem;
+  place-items: center;
+  opacity: .35;
+  font-size: .7rem;
+  transition: opacity var(--sia-duration-fast) var(--sia-easing-standard);
 }
-.sia-entity-meta__item {
-  display: grid;
-  gap: .25rem;
+.sia-table__sort:hover .sia-table__sort-icon {
+  opacity: .7;
 }
-.sia-entity-meta__label {
-  color: var(--sia-muted);
-  font-size: .76rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: .06em;
+[aria-sort] .sia-table__sort {
+  color: var(--sia-primary);
 }
-.sia-entity-meta__value {
-  color: var(--sia-foreground);
-  font-size: .92rem;
+[aria-sort] .sia-table__sort-icon {
+  opacity: 1;
 }
-.sia-entity-meta__value--strong {
-  font-weight: 700;
+.sia-table__table tbody tr,
+.sia-table-card {
+  animation: sia-table-row var(--sia-duration-base) var(--sia-easing-standard) backwards;
+  animation-delay: calc(min(var(--sia-table-row, 0), 10) * 22ms);
 }
-
-/* src/components/ErrorState/styles.css */
-.sia-error-state {
-  display: grid;
-  place-items: center;
-  gap: .75rem;
-  min-height: 14rem;
-  padding: 2rem;
-  text-align: center;
-  border: 1px solid color-mix(in srgb, var(--sia-danger) 35%, var(--sia-border));
-  border-radius: calc(var(--sia-radius) * 1.25);
-  background: color-mix(in srgb, var(--sia-danger) 5%, var(--sia-background));
+@keyframes sia-table-row {
+  from {
+    opacity: 0;
+    transform: translateY(.35rem);
+  }
 }
-.sia-error-state--compact {
-  min-height: 8rem;
-  padding: 1.25rem;
+.sia-table__row--skeleton {
+  animation: none;
 }
-.sia-error-state__icon {
+.sia-table__cards {
   display: grid;
-  place-items: center;
-  width: 3rem;
-  height: 3rem;
-  border-radius: 50%;
-  color: #fff;
-  background: var(--sia-danger);
-  font-weight: 800;
-}
-.sia-error-state__title {
-  color: var(--sia-foreground);
-}
-.sia-error-state__description {
-  max-width: 32rem;
-  margin: 0;
-  color: var(--sia-muted);
-  line-height: 1.5;
+  gap: .75rem;
+  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
 }
-.sia-error-state__actions {
+.sia-table-card {
   display: flex;
-  gap: .75rem;
-  flex-wrap: wrap;
-  justify-content: center;
+  flex-direction: column;
+  gap: .6rem;
+  padding: .875rem 1rem;
+  border: 1px solid var(--sia-border);
+  border-radius: calc(var(--sia-radius) * 1.25);
+  background: var(--sia-background);
+  transition:
+    border-color var(--sia-duration-fast) var(--sia-easing-standard),
+    box-shadow var(--sia-duration-base) var(--sia-easing-standard),
+    transform var(--sia-duration-fast) var(--sia-easing-standard);
 }
-
-/* src/components/EventCalendar/styles.css */
-.sia-event-calendar {
-  width: 100%;
-  max-width: none;
+.sia-table-card--clickable {
+  cursor: pointer;
 }
-.sia-event-calendar__events {
-  display: grid;
-  gap: .2rem;
+.sia-table-card--clickable:hover {
+  border-color: color-mix(in srgb, var(--sia-primary) 35%, var(--sia-border));
+  box-shadow: 0 6px 20px rgb(15 23 42 / .07);
+  transform: translateY(-2px);
 }
-.sia-event-calendar__event {
-  width: 100%;
+.sia-table-card__title {
+  font-weight: 650;
+  font-size: .95rem;
   overflow: hidden;
-  padding: .2rem .3rem;
-  border: 0;
-  border-radius: .25rem;
-  color: var(--sia-primary);
-  background: color-mix(in srgb, currentColor 10%, transparent);
-  font-size: .68rem;
-  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.sia-event-calendar__event--neutral {
+.sia-table-card__body {
+  display: grid;
+  gap: .4rem .875rem;
+  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+}
+.sia-table-card__meta {
+  display: grid;
+  gap: .1rem;
+  min-width: 0;
+}
+.sia-table-card__label {
   color: var(--sia-muted);
+  font-size: .68rem;
+  letter-spacing: .03em;
+  text-transform: uppercase;
 }
-.sia-event-calendar__event--info {
-  color: var(--sia-info);
+.sia-table-card__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.sia-event-calendar__event--success {
-  color: var(--sia-success);
+.sia-table-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: .35rem;
+  border-top: 1px solid var(--sia-border);
 }
-.sia-event-calendar__event--warning {
-  color: var(--sia-warning);
+.sia-table-card--skeleton {
+  gap: .5rem;
 }
-.sia-event-calendar__event--danger {
-  color: var(--sia-danger);
+@media (prefers-reduced-motion: reduce) {
+  .sia-table__table tbody tr,
+  .sia-table-card,
+  .sia-table__selection {
+    animation: none;
+  }
+  .sia-table-card--clickable:hover {
+    transform: none;
+  }
 }
 
 /* src/components/Input/styles.css */
@@ -3286,11 +3941,95 @@
 .sia-textarea--resize-horizontal {
   resize: horizontal;
 }
-.sia-textarea--resize-both {
-  resize: both;
+.sia-textarea--resize-both {
+  resize: both;
+}
+.sia-textarea--invalid {
+  border-color: var(--sia-danger);
+}
+
+/* src/components/CurrencyInput/styles.css */
+.sia-currency-input {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* src/components/TimePicker/styles.css */
+.sia-time-panel {
+  --sia-accent:var(--sia-primary);
+  --sia-accent-foreground:var(--sia-primary-foreground);
+  min-width: 15rem;
+}
+.sia-time-panel__columns {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(4.5rem, 1fr);
+  height: 16rem;
+}
+.sia-time-panel__column {
+  overflow-y: auto;
+  padding: .35rem;
+  border-right: 1px solid var(--sia-border);
+  scrollbar-width: thin;
+}
+.sia-time-panel__column:last-child {
+  border-right: 0;
+}
+.sia-time-panel__column button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 2.15rem;
+  padding: .35rem .55rem;
+  border: 0;
+  border-radius: .45rem;
+  color: var(--sia-foreground);
+  background: transparent;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+.sia-time-panel__column button:hover:not(:disabled) {
+  background: var(--sia-surface);
+}
+.sia-time-panel__column button[aria-selected=true] {
+  color: var(--sia-accent);
+  background: color-mix(in srgb, var(--sia-accent) 11%, transparent);
+  font-weight: 750;
+}
+.sia-time-panel__column button svg {
+  width: .85rem;
+  height: .85rem;
+}
+.sia-time-panel__column button:disabled {
+  opacity: .3;
+  cursor: not-allowed;
+}
+.sia-time-panel__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: .4rem;
+  padding: .55rem;
+  border-top: 1px solid var(--sia-border);
+}
+.sia-time-panel__footer button {
+  min-height: 2rem;
+  padding: 0 .65rem;
+  border: 0;
+  border-radius: .45rem;
+  font: inherit;
+  font-weight: 650;
+  cursor: pointer;
+}
+.sia-time-panel__now {
+  color: var(--sia-accent);
+  background: transparent;
 }
-.sia-textarea--invalid {
-  border-color: var(--sia-danger);
+.sia-time-panel__confirm {
+  color: var(--sia-accent-foreground);
+  background: var(--sia-accent);
 }
 
 /* src/components/Field/styles.css */
@@ -3826,83 +4565,338 @@
 .sia-rating__outline {
   color: var(--sia-border-strong);
 }
-.sia-rating__fill {
-  color: var(--sia-warning);
-  clip-path: inset(0 calc(100% - var(--sia-rating-fill, 0%)) 0 0);
-  transition: clip-path var(--sia-duration-base) var(--sia-easing-standard);
+.sia-rating__fill {
+  color: var(--sia-warning);
+  clip-path: inset(0 calc(100% - var(--sia-rating-fill, 0%)) 0 0);
+  transition: clip-path var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-rating button {
+  transition: transform var(--sia-duration-fast) var(--sia-easing-spring);
+}
+.sia-rating button:hover:not(:disabled) {
+  transform: scale(1.15);
+}
+.sia-rating button:active:not(:disabled) {
+  transform: scale(0.95);
+  transition-duration: var(--sia-duration-instant);
+}
+
+/* src/components/RichTextEditor/styles.css */
+.sia-rich-text-editor [contenteditable]:empty::before {
+  content: attr(data-placeholder);
+  color: var(--sia-muted);
+}
+.sia-rich-text-editor--disabled {
+  opacity: .55;
+}
+
+/* src/components/JsonEditor/styles.css */
+.sia-code-editor small.is-valid {
+  color: var(--sia-success);
+}
+.sia-code-editor small.is-invalid {
+  color: var(--sia-danger);
+}
+
+/* src/components/OtpInput/styles.css */
+.sia-otp-input {
+  display: flex;
+  gap: .5rem;
+}
+.sia-otp-input input {
+  width: 2.75rem;
+  height: 3rem;
+  border: 1px solid var(--sia-border);
+  border-radius: var(--sia-radius);
+  color: var(--sia-foreground);
+  background: var(--sia-background);
+  font: inherit;
+  font-size: 1.25rem;
+  text-align: center;
+}
+
+/* src/components/TagsInput/styles.css */
+.sia-tags-input {
+  display: flex;
+  align-items: center;
+  gap: .35rem;
+  min-height: 2.5rem;
+  padding: .35rem .5rem;
+  border: 1px solid var(--sia-border);
+  border-radius: var(--sia-radius);
+  background: var(--sia-background);
+  flex-wrap: wrap;
+}
+.sia-tags-input > input {
+  flex: 1;
+  min-width: 8rem;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font: inherit;
+}
+
+/* src/components/ReferenceSelect/styles.css */
+.sia-reference-select__option {
+  display: grid;
+}
+.sia-reference-select__option small {
+  color: var(--sia-muted);
+}
+
+/* src/components/Form/styles.css */
+.sia-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+}
+.sia-form-grid {
+  display: grid;
+  gap: 1rem;
+  width: 100%;
+}
+.sia-form-cell {
+  min-width: 0;
+}
+.sia-form[data-columns="1"] .sia-form-cell {
+  grid-column: auto;
+  grid-row: auto;
+}
+.sia-form-group {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.sia-form-group-header {
+  display: block;
+  width: 100%;
+  padding: 0 0 .5rem;
+  border-bottom: 1px solid var(--sia-border);
+}
+.sia-form-group-title {
+  display: block;
+  color: var(--sia-foreground);
+  font-size: 1rem;
+  font-weight: 600;
+}
+.sia-form-group-desc {
+  display: block;
+  margin-top: .25rem;
+  color: var(--sia-muted);
+  font-size: .875rem;
+  line-height: 1.45;
+}
+.sia-form-group-grid {
+  display: grid;
+  gap: 1rem;
+}
+.sia-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: .75rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--sia-border);
+}
+@media (max-width: 640px) {
+  .sia-form-grid,
+  .sia-form-group-grid {
+    grid-template-columns: 1fr !important;
+  }
+  .sia-form-actions {
+    flex-direction: column-reverse;
+  }
+  .sia-form-actions > * {
+    width: 100%;
+  }
+}
+
+/* src/components/Descriptions/styles.css */
+.sia-descriptions {
+  display: grid;
+  gap: 1rem;
+}
+.sia-descriptions h3 {
+  margin: 0;
+}
+.sia-descriptions__grid {
+  display: grid;
+  gap: 1rem;
+  margin: 0;
+}
+.sia-descriptions__grid--2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.sia-descriptions__grid--3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.sia-descriptions dt {
+  color: var(--sia-muted);
+  font-size: .78rem;
+  font-weight: 700;
+}
+.sia-descriptions dd {
+  margin: .25rem 0 0;
+}
+.sia-descriptions--bordered .sia-descriptions__grid > div {
+  padding: 1rem;
+  border: 1px solid var(--sia-border);
+}
+
+/* src/components/CrudPage/styles.css */
+.sia-crud-page {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  min-width: 0;
+}
+.sia-crud-page > .sia-pagination {
+  align-self: center;
+  margin-top: .25rem;
+}
+@media (max-width: 47.9375rem) {
+  .sia-crud-page {
+    gap: 1rem;
+  }
+}
+
+/* src/components/DateRangeFilter/styles.css */
+.sia-date-range-filter {
+  display: flex;
+  align-items: end;
+  gap: .75rem;
+  flex-wrap: wrap;
+}
+.sia-date-range-filter__presets {
+  display: flex;
+  gap: .4rem;
+  flex-wrap: wrap;
+}
+.sia-date-range-filter button {
+  min-height: 2.25rem;
+  padding: 0 .7rem;
+  border: 1px solid var(--sia-border);
+  border-radius: var(--sia-radius);
+  background: var(--sia-background);
+}
+.sia-date-range-filter__clear {
+  color: var(--sia-danger);
+}
+
+/* src/components/Divider/styles.css */
+.sia-divider {
+  flex: none;
+  background: var(--sia-border);
+}
+.sia-divider--horizontal {
+  width: 100%;
+  height: 1px;
+}
+.sia-divider--vertical {
+  align-self: stretch;
+  width: 1px;
+  min-height: 1.5rem;
+}
+
+/* src/components/EntityMeta/styles.css */
+.sia-entity-meta {
+  display: grid;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  border: 1px solid var(--sia-border);
+  border-radius: calc(var(--sia-radius) * 1.25);
+  background: var(--sia-surface);
+}
+.sia-entity-meta__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: .75rem;
+  flex-wrap: wrap;
+}
+.sia-entity-meta__status {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.75rem;
+  padding: 0 .65rem;
+  border-radius: 9999px;
+  color: var(--sia-primary);
+  background: color-mix(in srgb, var(--sia-primary) 10%, transparent);
+  font-size: .75rem;
+  font-weight: 700;
 }
-.sia-rating button {
-  transition: transform var(--sia-duration-fast) var(--sia-easing-spring);
+.sia-entity-meta__identifier {
+  padding: .2rem .5rem;
+  border-radius: 9999px;
+  color: var(--sia-foreground);
+  background: var(--sia-background);
+  border: 1px solid var(--sia-border);
+  font-size: .78rem;
 }
-.sia-rating button:hover:not(:disabled) {
-  transform: scale(1.15);
+.sia-entity-meta__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
 }
-.sia-rating button:active:not(:disabled) {
-  transform: scale(0.95);
-  transition-duration: var(--sia-duration-instant);
+.sia-entity-meta__item {
+  display: grid;
+  gap: .25rem;
 }
-
-/* src/components/RichTextEditor/styles.css */
-.sia-rich-text-editor [contenteditable]:empty::before {
-  content: attr(data-placeholder);
+.sia-entity-meta__label {
   color: var(--sia-muted);
+  font-size: .76rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .06em;
 }
-.sia-rich-text-editor--disabled {
-  opacity: .55;
+.sia-entity-meta__value {
+  color: var(--sia-foreground);
+  font-size: .92rem;
+}
+.sia-entity-meta__value--strong {
+  font-weight: 700;
 }
 
-/* src/components/JsonEditor/styles.css */
-.sia-code-editor small.is-valid {
-  color: var(--sia-success);
+/* src/components/EventCalendar/styles.css */
+.sia-event-calendar {
+  width: 100%;
+  max-width: none;
 }
-.sia-code-editor small.is-invalid {
-  color: var(--sia-danger);
+.sia-event-calendar__events {
+  display: grid;
+  gap: .2rem;
 }
-
-/* src/components/OtpInput/styles.css */
-.sia-otp-input {
-  display: flex;
-  gap: .5rem;
+.sia-event-calendar__event {
+  width: 100%;
+  overflow: hidden;
+  padding: .2rem .3rem;
+  border: 0;
+  border-radius: .25rem;
+  color: var(--sia-primary);
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  font-size: .68rem;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.sia-otp-input input {
-  width: 2.75rem;
-  height: 3rem;
-  border: 1px solid var(--sia-border);
-  border-radius: var(--sia-radius);
-  color: var(--sia-foreground);
-  background: var(--sia-background);
-  font: inherit;
-  font-size: 1.25rem;
-  text-align: center;
+.sia-event-calendar__event--neutral {
+  color: var(--sia-muted);
 }
-
-/* src/components/TagsInput/styles.css */
-.sia-tags-input {
-  display: flex;
-  align-items: center;
-  gap: .35rem;
-  min-height: 2.5rem;
-  padding: .35rem .5rem;
-  border: 1px solid var(--sia-border);
-  border-radius: var(--sia-radius);
-  background: var(--sia-background);
-  flex-wrap: wrap;
+.sia-event-calendar__event--info {
+  color: var(--sia-info);
 }
-.sia-tags-input > input {
-  flex: 1;
-  min-width: 8rem;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  font: inherit;
+.sia-event-calendar__event--success {
+  color: var(--sia-success);
 }
-
-/* src/components/ReferenceSelect/styles.css */
-.sia-reference-select__option {
-  display: grid;
+.sia-event-calendar__event--warning {
+  color: var(--sia-warning);
 }
-.sia-reference-select__option small {
-  color: var(--sia-muted);
+.sia-event-calendar__event--danger {
+  color: var(--sia-danger);
 }
 
 /* src/components/FiltersBar/styles.css */
@@ -3947,77 +4941,6 @@
   cursor: pointer;
 }
 
-/* src/components/Form/styles.css */
-.sia-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  width: 100%;
-}
-.sia-form-grid {
-  display: grid;
-  gap: 1rem;
-  width: 100%;
-}
-.sia-form-cell {
-  min-width: 0;
-}
-.sia-form[data-columns="1"] .sia-form-cell {
-  grid-column: auto;
-  grid-row: auto;
-}
-.sia-form-group {
-  grid-column: 1 / -1;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-.sia-form-group-header {
-  display: block;
-  width: 100%;
-  padding: 0 0 .5rem;
-  border-bottom: 1px solid var(--sia-border);
-}
-.sia-form-group-title {
-  display: block;
-  color: var(--sia-foreground);
-  font-size: 1rem;
-  font-weight: 600;
-}
-.sia-form-group-desc {
-  display: block;
-  margin-top: .25rem;
-  color: var(--sia-muted);
-  font-size: .875rem;
-  line-height: 1.45;
-}
-.sia-form-group-grid {
-  display: grid;
-  gap: 1rem;
-}
-.sia-form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: .75rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--sia-border);
-}
-@media (max-width: 640px) {
-  .sia-form-grid,
-  .sia-form-group-grid {
-    grid-template-columns: 1fr !important;
-  }
-  .sia-form-actions {
-    flex-direction: column-reverse;
-  }
-  .sia-form-actions > * {
-    width: 100%;
-  }
-}
-
 /* src/components/HoverCard/styles.css */
 .sia-hover-card-anchor {
   display: inline-flex;
@@ -4028,65 +4951,27 @@
   background: transparent;
   box-shadow: none;
 }
-.sia-hover-card__body {
-  max-width: calc(100vw - 2rem);
-  padding: .875rem 1rem;
-  border: 1px solid var(--sia-border);
-  border-radius: calc(var(--sia-radius) + 2px);
-  background: var(--sia-surface-raised);
-  box-shadow: var(--sia-elevation-overlay);
-  color: var(--sia-foreground);
-  font-size: .875rem;
-  line-height: 1.5;
-  animation: sia-hover-card-in var(--sia-duration-base) var(--sia-easing-entrance);
-}
-@keyframes sia-hover-card-in {
-  from {
-    opacity: 0;
-    transform: translateY(6px) scale(.98);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-/* src/components/IconButton/styles.css */
-.sia-icon-button {
-  display: inline-grid;
-  place-items: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: var(--sia-radius);
-  color: var(--sia-foreground);
-  background: transparent;
-  font: inherit;
-  cursor: pointer;
-}
-.sia-icon-button--sm {
-  width: 2rem;
-  height: 2rem;
-}
-.sia-icon-button--lg {
-  width: 3rem;
-  height: 3rem;
-}
-.sia-icon-button--solid {
-  color: var(--sia-primary-foreground);
-  background: var(--sia-primary);
-}
-.sia-icon-button--outline {
-  border-color: var(--sia-border);
-  background: var(--sia-background);
-}
-.sia-icon-button:hover {
-  background: color-mix(in srgb, var(--sia-primary) 8%, var(--sia-background));
+.sia-hover-card__body {
+  max-width: calc(100vw - 2rem);
+  padding: .875rem 1rem;
+  border: 1px solid var(--sia-border);
+  border-radius: calc(var(--sia-radius) + 2px);
+  background: var(--sia-surface-raised);
+  box-shadow: var(--sia-elevation-overlay);
+  color: var(--sia-foreground);
+  font-size: .875rem;
+  line-height: 1.5;
+  animation: sia-hover-card-in var(--sia-duration-base) var(--sia-easing-entrance);
 }
-.sia-icon-button:focus-visible {
-  outline: 3px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
-  outline-offset: 2px;
+@keyframes sia-hover-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
 }
 
 /* src/components/InputNumber/styles.css */
@@ -4664,241 +5549,6 @@
   opacity: 1;
 }
 
-/* src/components/SearchInput/styles.css */
-.sia-search-input {
-  display: flex;
-  align-items: center;
-  min-height: 2.5rem;
-  overflow: hidden;
-  border: 1px solid var(--sia-border);
-  border-radius: var(--sia-radius);
-  color: var(--sia-muted);
-  background: var(--sia-background);
-}
-.sia-search-input:focus-within {
-  outline: 3px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
-  outline-offset: 2px;
-}
-.sia-search-input__icon {
-  padding-left: .75rem;
-}
-.sia-search-input input {
-  flex: 1;
-  min-width: 0;
-  min-height: 2.4rem;
-  padding: 0 .65rem;
-  border: 0;
-  outline: 0;
-  color: var(--sia-foreground);
-  background: transparent;
-  font: inherit;
-}
-.sia-search-input__clear {
-  padding: .4rem .75rem;
-  border: 0;
-  color: var(--sia-muted);
-  background: transparent;
-  font-size: 1.1rem;
-  cursor: pointer;
-}
-.sia-search-input input {
-  line-height: 1.25;
-}
-
-/* src/components/Sidebar/styles.css */
-.sia-sidebar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-  padding: .5rem;
-  gap: .5rem;
-  font-size: .875rem;
-}
-.sia-sidebar__body {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  display: grid;
-  gap: .125rem;
-  align-content: start;
-}
-.sia-sidebar__header,
-.sia-sidebar__footer {
-  flex: none;
-  padding: .25rem;
-}
-.sia-sidebar__section {
-  display: grid;
-  gap: .125rem;
-}
-.sia-sidebar__section + .sia-sidebar__section {
-  margin-top: .75rem;
-}
-.sia-sidebar__section-title {
-  padding: .5rem .625rem .25rem;
-  color: var(--sia-muted);
-  font-size: .7rem;
-  font-weight: 600;
-  letter-spacing: .05em;
-  text-transform: uppercase;
-  transition: opacity var(--sia-duration-fast) var(--sia-easing-standard), height var(--sia-duration-base) var(--sia-easing-standard);
-}
-.sia-sidebar__item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: .625rem;
-  width: 100%;
-  padding: .5rem .625rem;
-  border: 0;
-  border-radius: var(--sia-radius);
-  background: transparent;
-  color: var(--sia-muted);
-  font: inherit;
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background-color var(--sia-duration-fast) var(--sia-easing-standard), color var(--sia-duration-fast) var(--sia-easing-standard);
-}
-.sia-sidebar__item:hover:not(:disabled) {
-  background: var(--sia-surface);
-  color: var(--sia-foreground);
-}
-.sia-sidebar__item:disabled {
-  opacity: .45;
-  cursor: not-allowed;
-}
-.sia-sidebar__item--active {
-  background: color-mix(in srgb, var(--sia-primary) 10%, transparent);
-  color: var(--sia-primary);
-  font-weight: 600;
-}
-.sia-sidebar__item--active::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 50%;
-  width: 3px;
-  height: 1.125rem;
-  border-radius: 0 3px 3px 0;
-  background: var(--sia-primary);
-  transform: translateY(-50%) scaleY(0);
-  animation: sia-sidebar-mark var(--sia-duration-base) var(--sia-easing-spring) forwards;
-}
-@keyframes sia-sidebar-mark {
-  to {
-    transform: translateY(-50%) scaleY(1);
-  }
-}
-.sia-sidebar__icon {
-  display: grid;
-  place-items: center;
-  flex: none;
-  width: 1.125rem;
-  font-size: 1.05rem;
-}
-.sia-sidebar__label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.sia-sidebar__badge {
-  flex: none;
-  min-width: 1.25rem;
-  padding: 0 .35rem;
-  border-radius: 999px;
-  background: var(--sia-surface);
-  color: var(--sia-muted);
-  font-size: .7rem;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.25rem;
-  text-align: center;
-}
-.sia-sidebar__item--active .sia-sidebar__badge {
-  background: color-mix(in srgb, var(--sia-primary) 16%, transparent);
-  color: var(--sia-primary);
-}
-.sia-sidebar__chevron {
-  display: grid;
-  place-items: center;
-  flex: none;
-  color: var(--sia-muted);
-  font-size: .8rem;
-  transition: transform var(--sia-duration-base) var(--sia-easing-standard);
-}
-.sia-sidebar__node[data-open] .sia-sidebar__chevron {
-  transform: rotate(180deg);
-}
-.sia-sidebar__panel {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows var(--sia-duration-base) var(--sia-easing-standard);
-}
-.sia-sidebar__node[data-open] .sia-sidebar__panel {
-  grid-template-rows: 1fr;
-}
-.sia-sidebar__sub {
-  overflow: hidden;
-  min-height: 0;
-  display: grid;
-  gap: .125rem;
-}
-.sia-sidebar__item--child {
-  margin-left: 1.5rem;
-  padding-block: .375rem;
-  font-size: .825rem;
-}
-.sia-sidebar__sub {
-  position: relative;
-}
-.sia-sidebar__sub::before {
-  content: "";
-  position: absolute;
-  top: .375rem;
-  bottom: .375rem;
-  left: 1.25rem;
-  width: 1px;
-  background: var(--sia-border);
-}
-.sia-sidebar--collapsed .sia-sidebar__item {
-  justify-content: center;
-  padding-inline: .5rem;
-}
-.sia-sidebar--collapsed .sia-sidebar__label,
-.sia-sidebar--collapsed .sia-sidebar__badge,
-.sia-sidebar--collapsed .sia-sidebar__chevron {
-  display: none;
-}
-.sia-sidebar--collapsed .sia-sidebar__section-title {
-  height: 0;
-  padding: 0;
-  opacity: 0;
-  overflow: hidden;
-}
-.sia-sidebar--collapsed .sia-sidebar__panel {
-  grid-template-rows: 0fr;
-}
-
-/* src/components/Skeleton/styles.css */
-.sia-skeleton {
-  display: block;
-  max-width: 100%;
-  border-radius: var(--sia-radius);
-  background:
-    linear-gradient(
-      90deg,
-      var(--sia-border),
-      color-mix(in srgb, var(--sia-border) 45%, var(--sia-background)),
-      var(--sia-border));
-  background-size: 200% 100%;
-  animation: sia-skeleton 1.4s ease-in-out infinite;
-}
-.sia-skeleton--circle {
-  aspect-ratio: 1;
-}
-
 /* src/components/Statistic/styles.css */
 .sia-statistic {
   display: grid;