@revikornmann/muka-ui 0.27.0 → 0.27.1

package/dist/styles/wireframe-dark.css

@@ -2461,6 +2461,116 @@ body {
 }
 
 
+/* View */
+/* View Component Styles */
+
+/* ─── Base layout ─────────────────────────────────────── */
+
+.muka-view {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  background-color: var(--view-color-background);
+  position: relative;
+  isolation: isolate;
+  box-sizing: border-box;
+
+  /* Width reserved for the footer nav once it becomes a left sidebar at the
+     large tier (matches BottomBar's desktopAs="sidebar" rail width). */
+  --view-sidebar-width: 240px;
+}
+
+/* ─── Surface level variants ─────────────────────────── */
+
+.muka-view--surface-3 {
+  background-color: var(--color-surface-level3);
+}
+
+/* ─── Large screens: make room for the left sidebar ──────────
+   A footer nav with desktopAs="sidebar" becomes a fixed 240px left rail at
+   ≥1024px. Offset the shell so the TopBar/body clear it — tied to the sidebar's
+   actual presence (the `.muka-bottombar--desktop-sidebar` element) rather than
+   the View's `size`, so a forced `size="lg"` below 1024px never reserves space
+   for a sidebar that hasn't rendered yet. */
+@media (min-width: 1024px) {
+  .muka-view:has(.muka-bottombar--desktop-sidebar) {
+    padding-left: var(--view-sidebar-width);
+  }
+}
+
+/* ─── TopBar elevation ────────────────────────────────── */
+
+.muka-view .muka-topbar {
+  flex-shrink: 0;
+  z-index: 3;
+  box-shadow: var(--shadow-level2);
+}
+
+/* ─── Scrollable body ─────────────────────────────────── */
+
+.muka-view__body {
+  flex: 1 1 0%;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: clip;
+  z-index: 1;
+
+  /* Column flow so the footer (now a scroll-area child) can pin to the bottom and
+     content scrolls *behind* it — letting a floating BottomBar's frosted backdrop
+     reveal the content underneath. */
+  display: flex;
+  flex-direction: column;
+}
+
+/* Inner wrapper constrains content width at the large tier (enterprise desktop)
+   using the alias-layer section/container tokens, while the body scrolls full
+   width. Full-bleed below large. */
+.muka-view__body-inner {
+  width: 100%;
+  /* Grow on short content so the sticky footer is pushed to the bottom rather
+     than floating mid-screen. */
+  flex: 1 0 auto;
+}
+
+@media (min-width: 1024px) {
+  .muka-view:not([data-size]) .muka-view__body-inner {
+    max-width: var(--container-max-width-xl);
+    margin-inline: auto;
+    padding-inline: var(--section-padding-horizontal-default);
+  }
+}
+
+.muka-view[data-size='lg'] .muka-view__body-inner {
+  max-width: var(--container-max-width-xl);
+  margin-inline: auto;
+  padding-inline: var(--section-padding-horizontal-default);
+}
+
+/* ─── Footer (e.g. BottomBar) ─────────────────────────── */
+
+.muka-view__footer {
+  position: sticky;
+  bottom: 0;
+  flex-shrink: 0;
+  z-index: 2;
+}
+
+/* Inside an AppShell, the persistent left rail replaces the per-view bottom
+   navigation at the large tier, so hide a footer that holds a navigation bar.
+   Scoped to `.muka-app-shell` so bare Views (and the standalone
+   desktopAs="sidebar" footer pattern above) are unaffected. Action-bar footers
+   (`.muka-bottombar--actions`) don't match and remain at the bottom. */
+@media (min-width: 1024px) {
+  .muka-app-shell .muka-view__footer:has(.muka-bottombar--navigation) {
+    display: none;
+  }
+}
+
+.muka-app-shell[data-size='lg'] .muka-view__footer:has(.muka-bottombar--navigation) {
+  display: none;
+}
+
+
 /* Typography */
 .muka-typography-catalog {
   display: flex;
@@ -2811,122 +2921,175 @@ body {
 }
 
 
-/* View */
-/* View Component Styles */
-
-/* ─── Base layout ─────────────────────────────────────── */
+/* Toggle */
+/* Toggle Component Styles - Using Muka Design Tokens */
 
-.muka-view {
+/* Wrapper container */
+.muka-toggle {
   display: flex;
-  flex-direction: column;
-  height: 100dvh;
-  background-color: var(--view-color-background);
+  align-items: center;
+  gap: var(--spacing-2);
   position: relative;
-  isolation: isolate;
-  box-sizing: border-box;
-
-  /* Width reserved for the footer nav once it becomes a left sidebar at the
-     large tier (matches BottomBar's desktopAs="sidebar" rail width). */
-  --view-sidebar-width: 240px;
+  padding: var(--spacing-4) 0;
 }
 
-/* ─── Surface level variants ─────────────────────────── */
-
-.muka-view--surface-3 {
-  background-color: var(--color-surface-level3);
+.muka-toggle--with-caption {
+  padding: var(--spacing-5) 0;
 }
 
-/* ─── Large screens: make room for the left sidebar ──────────
-   A footer nav with desktopAs="sidebar" becomes a fixed 240px left rail at
-   ≥1024px. Offset the shell so the TopBar/body clear it — tied to the sidebar's
-   actual presence (the `.muka-bottombar--desktop-sidebar` element) rather than
-   the View's `size`, so a forced `size="lg"` below 1024px never reserves space
-   for a sidebar that hasn't rendered yet. */
-@media (min-width: 1024px) {
-  .muka-view:has(.muka-bottombar--desktop-sidebar) {
-    padding-left: var(--view-sidebar-width);
-  }
+.muka-toggle--disabled {
+  opacity: 0.6;
 }
 
-/* ─── TopBar elevation ────────────────────────────────── */
-
-.muka-view .muka-topbar {
+/* Icon */
+.muka-toggle__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
-  z-index: 3;
-  box-shadow: var(--shadow-level2);
+  width: var(--icon-size-default);
+  height: var(--icon-size-default);
+  color: var(--color-text-default-default);
 }
 
-/* ─── Scrollable body ─────────────────────────────────── */
-
-.muka-view__body {
-  flex: 1 1 0%;
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: clip;
-  z-index: 1;
+.muka-toggle__icon svg {
+  width: 100%;
+  height: 100%;
+}
 
-  /* Column flow so the footer (now a scroll-area child) can pin to the bottom and
-     content scrolls *behind* it — letting a floating BottomBar's frosted backdrop
-     reveal the content underneath. */
+/* Content area (label + caption) */
+.muka-toggle__content {
   display: flex;
   flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: var(--spacing-1);
 }
 
-/* Inner wrapper constrains content width at the large tier (enterprise desktop)
-   using the alias-layer section/container tokens, while the body scrolls full
-   width. Full-bleed below large. */
-.muka-view__body-inner {
-  width: 100%;
-  /* Grow on short content so the sticky footer is pushed to the bottom rather
-     than floating mid-screen. */
-  flex: 1 0 auto;
+/* Label */
+.muka-toggle__label {
+  font-family: var(--text-label-lg-regular-fontFamily);
+  font-weight: var(--text-label-lg-regular-fontWeight);
+  font-size: var(--text-label-lg-regular-fontSize);
+  line-height: var(--text-label-lg-regular-lineHeight);
+  color: var(--color-text-default-default);
+  cursor: pointer;
 }
 
-@media (min-width: 1024px) {
-  .muka-view:not([data-size]) .muka-view__body-inner {
-    max-width: var(--container-max-width-xl);
-    margin-inline: auto;
-    padding-inline: var(--section-padding-horizontal-default);
-  }
+.muka-toggle--with-caption .muka-toggle__label {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
 }
 
-.muka-view[data-size='lg'] .muka-view__body-inner {
-  max-width: var(--container-max-width-xl);
-  margin-inline: auto;
-  padding-inline: var(--section-padding-horizontal-default);
+.muka-toggle--disabled .muka-toggle__label {
+  color: var(--color-text-subtle-default);
+  cursor: not-allowed;
 }
 
-/* ─── Footer (e.g. BottomBar) ─────────────────────────── */
-
-.muka-view__footer {
-  position: sticky;
-  bottom: 0;
-  flex-shrink: 0;
-  z-index: 2;
+/* Caption */
+.muka-toggle__caption {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-subtle-default);
 }
 
-/* Inside an AppShell, the persistent left rail replaces the per-view bottom
-   navigation at the large tier, so hide a footer that holds a navigation bar.
-   Scoped to `.muka-app-shell` so bare Views (and the standalone
-   desktopAs="sidebar" footer pattern above) are unaffected. Action-bar footers
-   (`.muka-bottombar--actions`) don't match and remain at the bottom. */
-@media (min-width: 1024px) {
-  .muka-app-shell .muka-view__footer:has(.muka-bottombar--navigation) {
-    display: none;
-  }
+/* Switch container */
+.muka-toggle__switch {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  cursor: pointer;
 }
 
-.muka-app-shell[data-size='lg'] .muka-view__footer:has(.muka-bottombar--navigation) {
-  display: none;
+.muka-toggle--disabled .muka-toggle__switch {
+  cursor: not-allowed;
 }
 
-
-/* Toast */
-/* Toast Component Styles - Using Muka Design Tokens */
-
-.muka-toast {
-  display: flex;
-  align-items: flex-start;
+/* Hidden native input */
+.muka-toggle__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Track (background pill) */
+.muka-toggle__track {
+  display: flex;
+  align-items: center;
+  width: var(--toggle-track-width);
+  height: var(--toggle-track-height);
+  border-radius: var(--toggle-track-radius);
+  background-color: var(--toggle-track-color-off);
+  transition: background-color 0.2s ease;
+  box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.16);
+  position: relative;
+}
+
+/* Knob (sliding circle) */
+.muka-toggle__knob {
+  position: absolute;
+  width: var(--toggle-knob-size);
+  height: var(--toggle-knob-size);
+  border-radius: var(--border-radius-full);
+  background-color: var(--toggle-knob-color-default);
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+  left: var(--toggle-knob-offset);
+  transition: left 0.2s ease, transform 0.2s ease;
+}
+
+/* Focus state */
+.muka-toggle__input:focus-visible + .muka-toggle__track {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Checked (on) state */
+.muka-toggle__input:checked + .muka-toggle__track {
+  background-color: var(--toggle-track-color-on);
+}
+
+.muka-toggle__input:checked + .muka-toggle__track .muka-toggle__knob {
+  left: calc(var(--toggle-track-width) - var(--toggle-knob-size) - var(--toggle-knob-offset));
+}
+
+/* Disabled state */
+.muka-toggle--disabled .muka-toggle__track {
+  background-color: var(--toggle-track-color-disabled);
+  box-shadow: none;
+}
+
+.muka-toggle--disabled .muka-toggle__knob {
+  background-color: var(--toggle-knob-color-disabled);
+  box-shadow: none;
+}
+
+/* Divider */
+.muka-toggle__divider {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--color-border-muted);
+}
+
+
+/* Toast */
+/* Toast Component Styles - Using Muka Design Tokens */
+
+.muka-toast {
+  display: flex;
+  align-items: flex-start;
   gap: var(--toast-gap);
   padding: var(--toast-padding-y) var(--toast-padding-x);
   border-radius: var(--toast-radius);
@@ -3646,166 +3809,249 @@ body {
 }
 
 
-/* Toggle */
-/* Toggle Component Styles - Using Muka Design Tokens */
+/* Textarea */
+/* Textarea Component Styles - Using Muka Design Tokens */
 
-/* Wrapper container */
-.muka-toggle {
-  display: flex;
-  align-items: center;
+.muka-textarea {
+  display: inline-flex;
+  flex-direction: column;
   gap: var(--spacing-2);
-  position: relative;
-  padding: var(--spacing-4) 0;
-}
-
-.muka-toggle--with-caption {
-  padding: var(--spacing-5) 0;
-}
-
-.muka-toggle--disabled {
-  opacity: 0.6;
 }
 
-/* Icon */
-.muka-toggle__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--icon-size-default);
-  height: var(--icon-size-default);
+/* Label */
+.muka-textarea__label {
   color: var(--color-text-default-default);
+  cursor: pointer;
 }
 
-.muka-toggle__icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* Content area (label + caption) */
-.muka-toggle__content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-  gap: var(--spacing-1);
+.muka-textarea__label--sm {
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
 }
 
-/* Label */
-.muka-toggle__label {
-  font-family: var(--text-label-lg-regular-fontFamily);
-  font-weight: var(--text-label-lg-regular-fontWeight);
-  font-size: var(--text-label-lg-regular-fontSize);
-  line-height: var(--text-label-lg-regular-lineHeight);
-  color: var(--color-text-default-default);
-  cursor: pointer;
+.muka-textarea__label--md {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
 }
 
-.muka-toggle--with-caption .muka-toggle__label {
+.muka-textarea__label--lg {
   font-family: var(--text-label-lg-semibold-fontFamily);
   font-weight: var(--text-label-lg-semibold-fontWeight);
   font-size: var(--text-label-lg-semibold-fontSize);
   line-height: var(--text-label-lg-semibold-lineHeight);
 }
 
-.muka-toggle--disabled .muka-toggle__label {
-  color: var(--color-text-subtle-default);
-  cursor: not-allowed;
-}
-
-/* Caption */
-.muka-toggle__caption {
-  font-family: var(--text-body-base-regular-fontFamily);
-  font-weight: var(--text-body-base-regular-fontWeight);
-  font-size: var(--text-body-base-regular-fontSize);
-  line-height: var(--text-body-base-regular-lineHeight);
-  color: var(--color-text-subtle-default);
-}
-
-/* Switch container */
-.muka-toggle__switch {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-  cursor: pointer;
+.muka-textarea__required {
+  color: var(--color-state-error-default);
 }
 
-.muka-toggle--disabled .muka-toggle__switch {
-  cursor: not-allowed;
+/* Field container */
+.muka-textarea__field {
+  display: flex;
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-md);
+  padding: var(--input-field-padding-y) var(--input-field-padding-x);
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  box-sizing: border-box;
 }
 
-/* Hidden native input */
-.muka-toggle__input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+.muka-textarea__field--sm {
+  min-height: var(--input-textarea-height-sm);
+  border-radius: var(--input-field-radius-sm);
 }
 
-/* Track (background pill) */
-.muka-toggle__track {
-  display: flex;
-  align-items: center;
-  width: var(--toggle-track-width);
-  height: var(--toggle-track-height);
-  border-radius: var(--toggle-track-radius);
-  background-color: var(--toggle-track-color-off);
-  transition: background-color 0.2s ease;
-  box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.16);
-  position: relative;
+.muka-textarea__field--md {
+  min-height: var(--input-textarea-height-default);
+  border-radius: var(--input-field-radius-md);
 }
 
-/* Knob (sliding circle) */
-.muka-toggle__knob {
-  position: absolute;
-  width: var(--toggle-knob-size);
-  height: var(--toggle-knob-size);
-  border-radius: var(--border-radius-full);
-  background-color: var(--toggle-knob-color-default);
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
-  left: var(--toggle-knob-offset);
-  transition: left 0.2s ease, transform 0.2s ease;
+.muka-textarea__field--lg {
+  min-height: var(--input-textarea-height-lg);
+  border-radius: var(--input-field-radius-lg);
 }
 
 /* Focus state */
-.muka-toggle__input:focus-visible + .muka-toggle__track {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-}
-
-/* Checked (on) state */
-.muka-toggle__input:checked + .muka-toggle__track {
-  background-color: var(--toggle-track-color-on);
+.muka-textarea__field--focused:not(.muka-textarea__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
 }
 
-.muka-toggle__input:checked + .muka-toggle__track .muka-toggle__knob {
-  left: calc(var(--toggle-track-width) - var(--toggle-knob-size) - var(--toggle-knob-offset));
+/* Error state */
+.muka-textarea__field--error:not(.muka-textarea__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-error-border);
+  background-color: var(--input-field-color-error-background);
+  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
 }
 
 /* Disabled state */
-.muka-toggle--disabled .muka-toggle__track {
-  background-color: var(--toggle-track-color-disabled);
-  box-shadow: none;
-}
-
-.muka-toggle--disabled .muka-toggle__knob {
-  background-color: var(--toggle-knob-color-disabled);
-  box-shadow: none;
+.muka-textarea__field--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+  cursor: not-allowed;
 }
 
-/* Divider */
-.muka-toggle__divider {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-color: var(--color-border-muted);
+/* Native textarea */
+.muka-textarea__native {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--input-field-color-default-foreground);
+  font-family: var(--text-input-md-fontFamily);
+  font-weight: var(--text-input-md-fontWeight);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+  padding: 0;
+  width: 100%;
+  min-width: 0;
+}
+
+.muka-textarea__field--sm .muka-textarea__native {
+  font-family: var(--text-input-sm-fontFamily);
+  font-weight: var(--text-input-sm-fontWeight);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-textarea__field--lg .muka-textarea__native {
+  font-family: var(--text-input-lg-fontFamily);
+  font-weight: var(--text-input-lg-fontWeight);
+  font-size: var(--text-input-lg-fontSize);
+  line-height: var(--text-input-lg-lineHeight);
+}
+
+.muka-textarea__native::placeholder {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-textarea__field--disabled .muka-textarea__native {
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+/* Footer (helper/error + count) */
+.muka-textarea__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+.muka-textarea__helper {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+  margin: 0;
+}
+
+.muka-textarea__error {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-state-error-default);
+  margin: 0;
+}
+
+.muka-textarea__count {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+  margin-left: auto;
+}
+
+
+/* TextLink */
+/* TextLink Component Styles - Using Muka Design Tokens */
+
+.muka-text-link {
+  display: inline;
+  cursor: pointer;
+  text-decoration: underline;
+  /* Nudge the rule clear of descenders; the Figma underline sits off baseline. */
+  text-underline-offset: 0.2em;
+  text-decoration-thickness: from-font;
+  /* Rounds the focus ring's corners; the link itself has no visible box. */
+  border-radius: var(--border-radius-sm);
+  transition: color var(--motion-duration-micro, 0.15s) var(--motion-easing-enter, ease);
+}
+
+/* ─── Sizes ───────────────────────────────────────────────
+   Mirrors the body text scale so a link matches the copy it sits in. */
+.muka-text-link--sm {
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  font-size: var(--text-body-sm-regular-fontSize);
+  line-height: var(--text-body-sm-regular-lineHeight);
+}
+
+.muka-text-link--base {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+}
+
+.muka-text-link--lg {
+  font-family: var(--text-body-lg-regular-fontFamily);
+  font-weight: var(--text-body-lg-regular-fontWeight);
+  font-size: var(--text-body-lg-regular-fontSize);
+  line-height: var(--text-body-lg-regular-lineHeight);
+}
+
+/* ─── Variant: default (accent) ───────────────────────────
+   Visited repeats the default colour on purpose: the design treats visited and
+   default the same, and pinning it stops the browser's purple from showing. */
+.muka-text-link--default,
+.muka-text-link--default:visited {
+  color: var(--color-text-action-default);
+}
+
+.muka-text-link--default:hover,
+.muka-text-link--default:focus-visible {
+  color: var(--color-text-action-hover);
+}
+
+.muka-text-link--default:active {
+  color: var(--color-text-action-pressed);
+}
+
+/* ─── Variant: subtle (neutral) ───────────────────────────
+   Hover, focus and pressed all darken to the default text colour. */
+.muka-text-link--subtle,
+.muka-text-link--subtle:visited {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-text-link--subtle:hover,
+.muka-text-link--subtle:focus-visible,
+.muka-text-link--subtle:active {
+  color: var(--color-text-default-default);
+}
+
+/* ─── Focus ───────────────────────────────────────────────
+   Same ring as every other focusable Muka component. */
+.muka-text-link:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .muka-text-link {
+    transition: none;
+  }
 }
 
 
@@ -3999,252 +4245,6 @@ body {
 }
 
 
-/* Textarea */
-/* Textarea Component Styles - Using Muka Design Tokens */
-
-.muka-textarea {
-  display: inline-flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-}
-
-/* Label */
-.muka-textarea__label {
-  color: var(--color-text-default-default);
-  cursor: pointer;
-}
-
-.muka-textarea__label--sm {
-  font-family: var(--text-label-sm-semibold-fontFamily);
-  font-weight: var(--text-label-sm-semibold-fontWeight);
-  font-size: var(--text-label-sm-semibold-fontSize);
-  line-height: var(--text-label-sm-semibold-lineHeight);
-}
-
-.muka-textarea__label--md {
-  font-family: var(--text-label-md-semibold-fontFamily);
-  font-weight: var(--text-label-md-semibold-fontWeight);
-  font-size: var(--text-label-md-semibold-fontSize);
-  line-height: var(--text-label-md-semibold-lineHeight);
-}
-
-.muka-textarea__label--lg {
-  font-family: var(--text-label-lg-semibold-fontFamily);
-  font-weight: var(--text-label-lg-semibold-fontWeight);
-  font-size: var(--text-label-lg-semibold-fontSize);
-  line-height: var(--text-label-lg-semibold-lineHeight);
-}
-
-.muka-textarea__required {
-  color: var(--color-state-error-default);
-}
-
-/* Field container */
-.muka-textarea__field {
-  display: flex;
-  background-color: var(--input-field-color-default-background);
-  border: var(--border-width-regular) solid var(--input-field-color-default-border);
-  border-radius: var(--input-field-radius-md);
-  padding: var(--input-field-padding-y) var(--input-field-padding-x);
-  transition: border-color 0.2s ease, background-color 0.2s ease;
-  box-sizing: border-box;
-}
-
-.muka-textarea__field--sm {
-  min-height: var(--input-textarea-height-sm);
-  border-radius: var(--input-field-radius-sm);
-}
-
-.muka-textarea__field--md {
-  min-height: var(--input-textarea-height-default);
-  border-radius: var(--input-field-radius-md);
-}
-
-.muka-textarea__field--lg {
-  min-height: var(--input-textarea-height-lg);
-  border-radius: var(--input-field-radius-lg);
-}
-
-/* Focus state */
-.muka-textarea__field--focused:not(.muka-textarea__field--disabled) {
-  border-width: var(--border-width-bold);
-  border-color: var(--input-field-color-focus-border);
-  background-color: var(--input-field-color-focus-background);
-  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
-}
-
-/* Error state */
-.muka-textarea__field--error:not(.muka-textarea__field--disabled) {
-  border-width: var(--border-width-bold);
-  border-color: var(--input-field-color-error-border);
-  background-color: var(--input-field-color-error-background);
-  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
-}
-
-/* Disabled state */
-.muka-textarea__field--disabled {
-  background-color: var(--input-field-color-disabled-background);
-  border-color: var(--input-field-color-disabled-border);
-  cursor: not-allowed;
-}
-
-/* Native textarea */
-.muka-textarea__native {
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--input-field-color-default-foreground);
-  font-family: var(--text-input-md-fontFamily);
-  font-weight: var(--text-input-md-fontWeight);
-  font-size: var(--text-input-md-fontSize);
-  line-height: var(--text-input-md-lineHeight);
-  padding: 0;
-  width: 100%;
-  min-width: 0;
-}
-
-.muka-textarea__field--sm .muka-textarea__native {
-  font-family: var(--text-input-sm-fontFamily);
-  font-weight: var(--text-input-sm-fontWeight);
-  font-size: var(--text-input-sm-fontSize);
-  line-height: var(--text-input-sm-lineHeight);
-}
-
-.muka-textarea__field--lg .muka-textarea__native {
-  font-family: var(--text-input-lg-fontFamily);
-  font-weight: var(--text-input-lg-fontWeight);
-  font-size: var(--text-input-lg-fontSize);
-  line-height: var(--text-input-lg-lineHeight);
-}
-
-.muka-textarea__native::placeholder {
-  color: var(--color-text-subtle-default);
-}
-
-.muka-textarea__field--disabled .muka-textarea__native {
-  color: var(--input-field-color-disabled-foreground);
-  cursor: not-allowed;
-}
-
-/* Footer (helper/error + count) */
-.muka-textarea__footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--spacing-2);
-}
-
-.muka-textarea__helper {
-  font-family: var(--text-label-sm-regular-fontFamily);
-  font-weight: var(--text-label-sm-regular-fontWeight);
-  font-size: var(--text-label-sm-regular-fontSize);
-  line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-text-subtle-default);
-  margin: 0;
-}
-
-.muka-textarea__error {
-  font-family: var(--text-label-sm-regular-fontFamily);
-  font-weight: var(--text-label-sm-regular-fontWeight);
-  font-size: var(--text-label-sm-regular-fontSize);
-  line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-default);
-  margin: 0;
-}
-
-.muka-textarea__count {
-  font-family: var(--text-label-sm-regular-fontFamily);
-  font-weight: var(--text-label-sm-regular-fontWeight);
-  font-size: var(--text-label-sm-regular-fontSize);
-  line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-text-subtle-default);
-  margin-left: auto;
-}
-
-
-/* TextLink */
-/* TextLink Component Styles - Using Muka Design Tokens */
-
-.muka-text-link {
-  display: inline;
-  cursor: pointer;
-  text-decoration: underline;
-  /* Nudge the rule clear of descenders; the Figma underline sits off baseline. */
-  text-underline-offset: 0.2em;
-  text-decoration-thickness: from-font;
-  /* Rounds the focus ring's corners; the link itself has no visible box. */
-  border-radius: var(--border-radius-sm);
-  transition: color var(--motion-duration-micro, 0.15s) var(--motion-easing-enter, ease);
-}
-
-/* ─── Sizes ───────────────────────────────────────────────
-   Mirrors the body text scale so a link matches the copy it sits in. */
-.muka-text-link--sm {
-  font-family: var(--text-body-sm-regular-fontFamily);
-  font-weight: var(--text-body-sm-regular-fontWeight);
-  font-size: var(--text-body-sm-regular-fontSize);
-  line-height: var(--text-body-sm-regular-lineHeight);
-}
-
-.muka-text-link--base {
-  font-family: var(--text-body-base-regular-fontFamily);
-  font-weight: var(--text-body-base-regular-fontWeight);
-  font-size: var(--text-body-base-regular-fontSize);
-  line-height: var(--text-body-base-regular-lineHeight);
-}
-
-.muka-text-link--lg {
-  font-family: var(--text-body-lg-regular-fontFamily);
-  font-weight: var(--text-body-lg-regular-fontWeight);
-  font-size: var(--text-body-lg-regular-fontSize);
-  line-height: var(--text-body-lg-regular-lineHeight);
-}
-
-/* ─── Variant: default (accent) ───────────────────────────
-   Visited repeats the default colour on purpose: the design treats visited and
-   default the same, and pinning it stops the browser's purple from showing. */
-.muka-text-link--default,
-.muka-text-link--default:visited {
-  color: var(--color-text-action-default);
-}
-
-.muka-text-link--default:hover,
-.muka-text-link--default:focus-visible {
-  color: var(--color-text-action-hover);
-}
-
-.muka-text-link--default:active {
-  color: var(--color-text-action-pressed);
-}
-
-/* ─── Variant: subtle (neutral) ───────────────────────────
-   Hover, focus and pressed all darken to the default text colour. */
-.muka-text-link--subtle,
-.muka-text-link--subtle:visited {
-  color: var(--color-text-subtle-default);
-}
-
-.muka-text-link--subtle:hover,
-.muka-text-link--subtle:focus-visible,
-.muka-text-link--subtle:active {
-  color: var(--color-text-default-default);
-}
-
-/* ─── Focus ───────────────────────────────────────────────
-   Same ring as every other focusable Muka component. */
-.muka-text-link:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .muka-text-link {
-    transition: none;
-  }
-}
-
-
 /* Table */
 /* Table Component Styles - Using Muka Design Tokens */
 
@@ -4535,65 +4535,173 @@ body {
   text-align: left;
 }
 
-.muka-table__cell--center,
-.muka-table__header-cell--center {
-  text-align: center;
+.muka-table__cell--center,
+.muka-table__header-cell--center {
+  text-align: center;
+}
+
+.muka-table__cell--right,
+.muka-table__header-cell--right {
+  text-align: right;
+}
+
+/* ========================================
+   HEADER CELLS
+   ======================================== */
+
+.muka-table__header-cell {
+  font-family: var(--text-body-base-bold-fontFamily);
+  font-weight: var(--text-body-base-bold-fontWeight);
+  font-size: var(--text-body-base-bold-fontSize);
+  line-height: var(--text-body-base-bold-lineHeight);
+  color: var(--color-text-default-default);
+  white-space: nowrap;
+}
+
+.muka-table__header-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+/* Sortable */
+.muka-table__header-cell--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.muka-table__header-cell--sortable:hover {
+  color: var(--color-text-default-default);
+}
+
+.muka-table__header-cell--sortable:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: -2px;
+}
+
+/* Sort icon */
+.muka-table__sort-icon {
+  width: 1em;
+  height: 1em;
+  opacity: 0.4;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.muka-table__header-cell--sortable:hover .muka-table__sort-icon {
+  opacity: 0.7;
+}
+
+.muka-table__sort-icon--asc,
+.muka-table__sort-icon--desc {
+  opacity: 1;
+}
+
+
+/* SwipeActions */
+/* SwipeActions Component Styles */
+
+.muka-swipe-actions {
+  position: relative;
+  overflow: hidden;
+  touch-action: pan-y;
+  -webkit-user-select: none;
+  user-select: none;
+  background-color: var(--color-surface-level3);
+}
+
+.muka-swipe-actions--disabled {
+  touch-action: auto;
+}
+
+/* ─── Row that holds the actual content ────────────────── */
+
+.muka-swipe-actions__row {
+  position: relative;
+  z-index: 1;
+  background-color: inherit;
+  will-change: transform;
+}
+
+/* ─── Action panels — sit beneath the row ──────────────── */
+
+.muka-swipe-actions__panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: stretch;
+  z-index: 0;
+}
+
+.muka-swipe-actions__panel--left {
+  left: 0;
+}
+
+.muka-swipe-actions__panel--right {
+  right: 0;
 }
 
-.muka-table__cell--right,
-.muka-table__header-cell--right {
-  text-align: right;
+/* ─── Single action button ─────────────────────────────── */
+
+.muka-swipe-actions__button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  border: none;
+  cursor: pointer;
+  padding: var(--spacing-2);
+  background-color: var(--color-surface-level2);
+  color: var(--color-text-default-default);
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+  -webkit-tap-highlight-color: transparent;
+  transition: filter 0.12s ease;
 }
 
-/* ========================================
-   HEADER CELLS
-   ======================================== */
+.muka-swipe-actions__button:hover {
+  filter: brightness(0.95);
+}
 
-.muka-table__header-cell {
-  font-family: var(--text-body-base-bold-fontFamily);
-  font-weight: var(--text-body-base-bold-fontWeight);
-  font-size: var(--text-body-base-bold-fontSize);
-  line-height: var(--text-body-base-bold-lineHeight);
-  color: var(--color-text-default-default);
-  white-space: nowrap;
+.muka-swipe-actions__button:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: -2px;
 }
 
-.muka-table__header-content {
+.muka-swipe-actions__button-icon {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-1);
+  justify-content: center;
 }
 
-/* Sortable */
-.muka-table__header-cell--sortable {
-  cursor: pointer;
-  user-select: none;
-}
+/* ─── Color variants ───────────────────────────────────── */
 
-.muka-table__header-cell--sortable:hover {
+.muka-swipe-actions__button--neutral {
+  background-color: var(--color-surface-level2);
   color: var(--color-text-default-default);
 }
 
-.muka-table__header-cell--sortable:focus-visible {
-  outline: 2px solid var(--color-action-default);
-  outline-offset: -2px;
+.muka-swipe-actions__button--primary {
+  background-color: var(--color-action-default);
+  color: var(--color-text-default-inverse);
 }
 
-/* Sort icon */
-.muka-table__sort-icon {
-  width: 1em;
-  height: 1em;
-  opacity: 0.4;
-  transition: opacity 0.2s, transform 0.2s;
+.muka-swipe-actions__button--success {
+  background-color: var(--color-state-success-default);
+  color: var(--color-text-default-inverse);
 }
 
-.muka-table__header-cell--sortable:hover .muka-table__sort-icon {
-  opacity: 0.7;
+.muka-swipe-actions__button--warning {
+  background-color: var(--color-state-warning-default);
+  color: var(--color-text-default-default);
 }
 
-.muka-table__sort-icon--asc,
-.muka-table__sort-icon--desc {
-  opacity: 1;
+.muka-swipe-actions__button--destructive {
+  background-color: var(--color-state-error-default);
+  color: var(--color-text-default-inverse);
 }
 
 
@@ -4760,114 +4868,6 @@ body {
 }
 
 
-/* SwipeActions */
-/* SwipeActions Component Styles */
-
-.muka-swipe-actions {
-  position: relative;
-  overflow: hidden;
-  touch-action: pan-y;
-  -webkit-user-select: none;
-  user-select: none;
-  background-color: var(--color-surface-level3);
-}
-
-.muka-swipe-actions--disabled {
-  touch-action: auto;
-}
-
-/* ─── Row that holds the actual content ────────────────── */
-
-.muka-swipe-actions__row {
-  position: relative;
-  z-index: 1;
-  background-color: inherit;
-  will-change: transform;
-}
-
-/* ─── Action panels — sit beneath the row ──────────────── */
-
-.muka-swipe-actions__panel {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  display: flex;
-  align-items: stretch;
-  z-index: 0;
-}
-
-.muka-swipe-actions__panel--left {
-  left: 0;
-}
-
-.muka-swipe-actions__panel--right {
-  right: 0;
-}
-
-/* ─── Single action button ─────────────────────────────── */
-
-.muka-swipe-actions__button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-1);
-  border: none;
-  cursor: pointer;
-  padding: var(--spacing-2);
-  background-color: var(--color-surface-level2);
-  color: var(--color-text-default-default);
-  font-family: var(--text-label-sm-semibold-fontFamily);
-  font-weight: var(--text-label-sm-semibold-fontWeight);
-  font-size: var(--text-label-sm-semibold-fontSize);
-  line-height: var(--text-label-sm-semibold-lineHeight);
-  -webkit-tap-highlight-color: transparent;
-  transition: filter 0.12s ease;
-}
-
-.muka-swipe-actions__button:hover {
-  filter: brightness(0.95);
-}
-
-.muka-swipe-actions__button:focus-visible {
-  outline: 2px solid var(--color-action-default);
-  outline-offset: -2px;
-}
-
-.muka-swipe-actions__button-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ─── Color variants ───────────────────────────────────── */
-
-.muka-swipe-actions__button--neutral {
-  background-color: var(--color-surface-level2);
-  color: var(--color-text-default-default);
-}
-
-.muka-swipe-actions__button--primary {
-  background-color: var(--color-action-default);
-  color: var(--color-text-default-inverse);
-}
-
-.muka-swipe-actions__button--success {
-  background-color: var(--color-state-success-default);
-  color: var(--color-text-default-inverse);
-}
-
-.muka-swipe-actions__button--warning {
-  background-color: var(--color-state-warning-default);
-  color: var(--color-text-default-default);
-}
-
-.muka-swipe-actions__button--destructive {
-  background-color: var(--color-state-error-default);
-  color: var(--color-text-default-inverse);
-}
-
-
 /* SocialSignInButton */
 /*
  * SocialSignInButton lockup colors are provider-mandated (Apple HIG /
@@ -10788,6 +10788,38 @@ li.muka-listitem {
 }
 
 
+/* DatePicker */
+/* DatePicker — compact native date field. */
+/* Field/label/helper styling is inherited from ../Input/Input.css. */
+
+/* Adopt the field typography on the native date input. */
+.muka-datepicker__field .muka-input__native {
+  font-family: var(--text-input-md-fontFamily);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+}
+
+.muka-datepicker__field--sm .muka-input__native {
+  font-family: var(--text-input-sm-fontFamily);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+/* Tint the browser calendar indicator to match the field foreground. */
+.muka-datepicker__field .muka-input__native::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.muka-datepicker__field .muka-input__native::-webkit-calendar-picker-indicator:hover {
+  opacity: 1;
+}
+
+.muka-datepicker__field .muka-input__native:disabled {
+  cursor: not-allowed;
+}
+
+
 /* Dialog */
 /* Dialog Component Styles */
 
@@ -11049,42 +11081,10 @@ li.muka-listitem {
   box-shadow: var(--shadow-level2);
 }
 
-.muka-dialog .muka-bottombar {
-  position: relative;
-  z-index: 1;
-  box-shadow: var(--shadow-level2);
-}
-
-
-/* DatePicker */
-/* DatePicker — compact native date field. */
-/* Field/label/helper styling is inherited from ../Input/Input.css. */
-
-/* Adopt the field typography on the native date input. */
-.muka-datepicker__field .muka-input__native {
-  font-family: var(--text-input-md-fontFamily);
-  font-size: var(--text-input-md-fontSize);
-  line-height: var(--text-input-md-lineHeight);
-}
-
-.muka-datepicker__field--sm .muka-input__native {
-  font-family: var(--text-input-sm-fontFamily);
-  font-size: var(--text-input-sm-fontSize);
-  line-height: var(--text-input-sm-lineHeight);
-}
-
-/* Tint the browser calendar indicator to match the field foreground. */
-.muka-datepicker__field .muka-input__native::-webkit-calendar-picker-indicator {
-  cursor: pointer;
-  opacity: 0.6;
-}
-
-.muka-datepicker__field .muka-input__native::-webkit-calendar-picker-indicator:hover {
-  opacity: 1;
-}
-
-.muka-datepicker__field .muka-input__native:disabled {
-  cursor: not-allowed;
+.muka-dialog .muka-bottombar {
+  position: relative;
+  z-index: 1;
+  box-shadow: var(--shadow-level2);
 }
 
 
@@ -12405,6 +12405,128 @@ li.muka-listitem {
 }
 
 
+/* ChatPhotoGrid */
+/* ChatPhotoGrid Component Styles */
+
+/*
+ * The grid clips to its own radius and the tiles stay square, so only the four
+ * outer corners round — matching the Figma "Wrapper" frame (5225:1394).
+ */
+.muka-chat-photo-grid {
+  display: grid;
+  gap: var(--chatphotogrid-gap);
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: var(--chatphotogrid-radius);
+}
+
+/* ─── Tiles ────────────────────────────────────────────── */
+
+.muka-chat-photo-grid__tile {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background-color: var(--chatphotogrid-color-placeholder);
+  aspect-ratio: 1 / 1;
+}
+
+button.muka-chat-photo-grid__tile {
+  cursor: pointer;
+  appearance: none;
+}
+
+button.muka-chat-photo-grid__tile:focus-visible {
+  outline: var(--border-width-bold) solid var(--color-border-focus);
+  /* Inset, so the grid's overflow clip cannot cut the ring off on corner tiles */
+  outline-offset: calc(-1 * var(--border-width-bold));
+}
+
+.muka-chat-photo-grid__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ─── Overflow tile ────────────────────────────────────── */
+
+.muka-chat-photo-grid__overflow {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--chatphotogrid-color-overflow-background);
+  color: var(--chatphotogrid-color-overflow-foreground);
+  font-family: var(--text-body-2xl-regular-fontFamily);
+  font-weight: var(--text-body-2xl-regular-fontWeight);
+  font-size: var(--text-body-2xl-regular-fontSize);
+  line-height: var(--text-body-2xl-regular-lineHeight);
+}
+
+/* ─── Layouts ──────────────────────────────────────────── */
+
+.muka-chat-photo-grid--1 {
+  grid-template-columns: 1fr;
+}
+
+.muka-chat-photo-grid--landscape .muka-chat-photo-grid__tile {
+  aspect-ratio: 4 / 3;
+}
+
+.muka-chat-photo-grid--portrait .muka-chat-photo-grid__tile {
+  aspect-ratio: 3 / 4;
+}
+
+.muka-chat-photo-grid--2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.muka-chat-photo-grid--3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.muka-chat-photo-grid--4 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+/* 5 photos: a 2-up row above a 3-up row, on a shared 6-column track */
+.muka-chat-photo-grid--5 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(-n + 2) {
+  grid-column: span 3;
+}
+
+.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(n + 3) {
+  grid-column: span 2;
+}
+
+.muka-chat-photo-grid--6,
+.muka-chat-photo-grid--overflow {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-chat-photo-grid {
+    break-inside: avoid;
+  }
+
+  .muka-chat-photo-grid__image {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+}
+
+
 /* Checkbox */
 /* Checkbox Component Styles - Using Muka Design Tokens */
 
@@ -12539,158 +12661,36 @@ li.muka-listitem {
   box-shadow: none;
 }
 
-.muka-checkbox__input:disabled:checked + .muka-checkbox__indicator .muka-checkbox__icon--check,
-.muka-checkbox__input:disabled:indeterminate + .muka-checkbox__indicator .muka-checkbox__icon--indeterminate {
-  color: var(--checkbox-color-disabled-icon);
-}
-
-/* Label text */
-.muka-checkbox__label {
-  font-family: var(--text-label-lg-regular-fontFamily);
-  font-weight: var(--text-label-lg-regular-fontWeight);
-  font-size: var(--text-label-lg-regular-fontSize);
-  line-height: var(--text-label-lg-regular-lineHeight);
-  color: var(--color-text-default-default);
-}
-
-.muka-checkbox--sm .muka-checkbox__label {
-  font-family: var(--text-label-md-regular-fontFamily);
-  font-weight: var(--text-label-md-regular-fontWeight);
-  font-size: var(--text-label-md-regular-fontSize);
-  line-height: var(--text-label-md-regular-lineHeight);
-}
-
-.muka-checkbox--lg .muka-checkbox__label {
-  font-family: var(--text-label-xl-regular-fontFamily);
-  font-weight: var(--text-label-xl-regular-fontWeight);
-  font-size: var(--text-label-xl-regular-fontSize);
-  line-height: var(--text-label-xl-regular-lineHeight);
-}
-
-.muka-checkbox--disabled .muka-checkbox__label {
-  color: var(--color-text-subtle-default);
-}
-
-
-/* ChatPhotoGrid */
-/* ChatPhotoGrid Component Styles */
-
-/*
- * The grid clips to its own radius and the tiles stay square, so only the four
- * outer corners round — matching the Figma "Wrapper" frame (5225:1394).
- */
-.muka-chat-photo-grid {
-  display: grid;
-  gap: var(--chatphotogrid-gap);
-  width: 100%;
-  min-width: 0;
-  overflow: hidden;
-  border-radius: var(--chatphotogrid-radius);
-}
-
-/* ─── Tiles ────────────────────────────────────────────── */
-
-.muka-chat-photo-grid__tile {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: none;
-  background-color: var(--chatphotogrid-color-placeholder);
-  aspect-ratio: 1 / 1;
-}
-
-button.muka-chat-photo-grid__tile {
-  cursor: pointer;
-  appearance: none;
-}
-
-button.muka-chat-photo-grid__tile:focus-visible {
-  outline: var(--border-width-bold) solid var(--color-border-focus);
-  /* Inset, so the grid's overflow clip cannot cut the ring off on corner tiles */
-  outline-offset: calc(-1 * var(--border-width-bold));
-}
-
-.muka-chat-photo-grid__image {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* ─── Overflow tile ────────────────────────────────────── */
-
-.muka-chat-photo-grid__overflow {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--chatphotogrid-color-overflow-background);
-  color: var(--chatphotogrid-color-overflow-foreground);
-  font-family: var(--text-body-2xl-regular-fontFamily);
-  font-weight: var(--text-body-2xl-regular-fontWeight);
-  font-size: var(--text-body-2xl-regular-fontSize);
-  line-height: var(--text-body-2xl-regular-lineHeight);
-}
-
-/* ─── Layouts ──────────────────────────────────────────── */
-
-.muka-chat-photo-grid--1 {
-  grid-template-columns: 1fr;
-}
-
-.muka-chat-photo-grid--landscape .muka-chat-photo-grid__tile {
-  aspect-ratio: 4 / 3;
-}
-
-.muka-chat-photo-grid--portrait .muka-chat-photo-grid__tile {
-  aspect-ratio: 3 / 4;
-}
-
-.muka-chat-photo-grid--2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.muka-chat-photo-grid--3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.muka-chat-photo-grid--4 {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-/* 5 photos: a 2-up row above a 3-up row, on a shared 6-column track */
-.muka-chat-photo-grid--5 {
-  grid-template-columns: repeat(6, 1fr);
-}
-
-.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(-n + 2) {
-  grid-column: span 3;
+.muka-checkbox__input:disabled:checked + .muka-checkbox__indicator .muka-checkbox__icon--check,
+.muka-checkbox__input:disabled:indeterminate + .muka-checkbox__indicator .muka-checkbox__icon--indeterminate {
+  color: var(--checkbox-color-disabled-icon);
 }
 
-.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(n + 3) {
-  grid-column: span 2;
+/* Label text */
+.muka-checkbox__label {
+  font-family: var(--text-label-lg-regular-fontFamily);
+  font-weight: var(--text-label-lg-regular-fontWeight);
+  font-size: var(--text-label-lg-regular-fontSize);
+  line-height: var(--text-label-lg-regular-lineHeight);
+  color: var(--color-text-default-default);
 }
 
-.muka-chat-photo-grid--6,
-.muka-chat-photo-grid--overflow {
-  grid-template-columns: repeat(3, 1fr);
+.muka-checkbox--sm .muka-checkbox__label {
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  font-size: var(--text-label-md-regular-fontSize);
+  line-height: var(--text-label-md-regular-lineHeight);
 }
 
-/* ─── Print ────────────────────────────────────────────── */
-
-@media print {
-  .muka-chat-photo-grid {
-    break-inside: avoid;
-  }
+.muka-checkbox--lg .muka-checkbox__label {
+  font-family: var(--text-label-xl-regular-fontFamily);
+  font-weight: var(--text-label-xl-regular-fontWeight);
+  font-size: var(--text-label-xl-regular-fontSize);
+  line-height: var(--text-label-xl-regular-lineHeight);
+}
 
-  .muka-chat-photo-grid__image {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-  }
+.muka-checkbox--disabled .muka-checkbox__label {
+  color: var(--color-text-subtle-default);
 }
 
 
@@ -13979,6 +13979,114 @@ button.muka-chat-photo-grid__tile:focus-visible {
 }
 
 
+/* BadgeNumber */
+/* BadgeNumber Component Styles - Using Muka Design Tokens */
+
+.muka-badge-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-full);
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+/*
+ * Sizes — fixed height, matching min-width (so a single digit renders as a
+ * circle), horizontal padding, and bold label typography. Vertical centering
+ * is handled by the fixed height + align-items: center.
+ */
+.muka-badge-number--2xs {
+  height: var(--badge-number-size-2xs);
+  min-width: var(--badge-number-size-2xs);
+  padding: 0 var(--badge-number-padding-2xs);
+  font-family: var(--text-label-xs-bold-fontFamily);
+  font-weight: var(--text-label-xs-bold-fontWeight);
+  font-size: var(--text-label-xs-bold-fontSize);
+  line-height: var(--text-label-xs-bold-lineHeight);
+}
+
+.muka-badge-number--xs {
+  height: var(--badge-number-size-xs);
+  min-width: var(--badge-number-size-xs);
+  padding: 0 var(--badge-number-padding-xs);
+  font-family: var(--text-label-sm-bold-fontFamily);
+  font-weight: var(--text-label-sm-bold-fontWeight);
+  font-size: var(--text-label-sm-bold-fontSize);
+  line-height: var(--text-label-sm-bold-lineHeight);
+}
+
+.muka-badge-number--sm {
+  height: var(--badge-number-size-sm);
+  min-width: var(--badge-number-size-sm);
+  padding: 0 var(--badge-number-padding-sm);
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+  font-size: var(--text-label-md-bold-fontSize);
+  line-height: var(--text-label-md-bold-lineHeight);
+}
+
+.muka-badge-number--md {
+  height: var(--badge-number-size-md);
+  min-width: var(--badge-number-size-md);
+  padding: 0 var(--badge-number-padding-md);
+  font-family: var(--text-label-lg-bold-fontFamily);
+  font-weight: var(--text-label-lg-bold-fontWeight);
+  font-size: var(--text-label-lg-bold-fontSize);
+  line-height: var(--text-label-lg-bold-lineHeight);
+}
+
+.muka-badge-number--lg {
+  height: var(--badge-number-size-lg);
+  min-width: var(--badge-number-size-lg);
+  padding: 0 var(--badge-number-padding-lg);
+  font-family: var(--text-label-2xl-bold-fontFamily);
+  font-weight: var(--text-label-2xl-bold-fontWeight);
+  font-size: var(--text-label-2xl-bold-fontSize);
+  line-height: var(--text-label-2xl-bold-lineHeight);
+}
+
+.muka-badge-number__label {
+  /*
+   * The badge sets a tight line-height for compact sizing, which would clip
+   * glyph descenders; give the label a roomier line-height. Vertical centering
+   * is unaffected because the badge height is fixed and content is centered.
+   */
+  line-height: normal;
+}
+
+/* Neutral variant */
+.muka-badge-number--neutral {
+  background-color: var(--color-surface-level1);
+  color: var(--color-text-default-default);
+}
+
+/* Info variant */
+.muka-badge-number--info {
+  background-color: var(--color-state-info-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Success variant */
+.muka-badge-number--success {
+  background-color: var(--color-state-success-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Warning variant */
+.muka-badge-number--warning {
+  background-color: var(--color-state-warning-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Error variant */
+.muka-badge-number--error {
+  background-color: var(--color-state-error-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+
 /* BottomBar */
 /* BottomBar Component Styles */
 
@@ -14295,114 +14403,6 @@ button.muka-chat-photo-grid__tile:focus-visible {
 }
 
 
-/* BadgeNumber */
-/* BadgeNumber Component Styles - Using Muka Design Tokens */
-
-.muka-badge-number {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius-full);
-  white-space: nowrap;
-  user-select: none;
-  box-sizing: border-box;
-}
-
-/*
- * Sizes — fixed height, matching min-width (so a single digit renders as a
- * circle), horizontal padding, and bold label typography. Vertical centering
- * is handled by the fixed height + align-items: center.
- */
-.muka-badge-number--2xs {
-  height: var(--badge-number-size-2xs);
-  min-width: var(--badge-number-size-2xs);
-  padding: 0 var(--badge-number-padding-2xs);
-  font-family: var(--text-label-xs-bold-fontFamily);
-  font-weight: var(--text-label-xs-bold-fontWeight);
-  font-size: var(--text-label-xs-bold-fontSize);
-  line-height: var(--text-label-xs-bold-lineHeight);
-}
-
-.muka-badge-number--xs {
-  height: var(--badge-number-size-xs);
-  min-width: var(--badge-number-size-xs);
-  padding: 0 var(--badge-number-padding-xs);
-  font-family: var(--text-label-sm-bold-fontFamily);
-  font-weight: var(--text-label-sm-bold-fontWeight);
-  font-size: var(--text-label-sm-bold-fontSize);
-  line-height: var(--text-label-sm-bold-lineHeight);
-}
-
-.muka-badge-number--sm {
-  height: var(--badge-number-size-sm);
-  min-width: var(--badge-number-size-sm);
-  padding: 0 var(--badge-number-padding-sm);
-  font-family: var(--text-label-md-bold-fontFamily);
-  font-weight: var(--text-label-md-bold-fontWeight);
-  font-size: var(--text-label-md-bold-fontSize);
-  line-height: var(--text-label-md-bold-lineHeight);
-}
-
-.muka-badge-number--md {
-  height: var(--badge-number-size-md);
-  min-width: var(--badge-number-size-md);
-  padding: 0 var(--badge-number-padding-md);
-  font-family: var(--text-label-lg-bold-fontFamily);
-  font-weight: var(--text-label-lg-bold-fontWeight);
-  font-size: var(--text-label-lg-bold-fontSize);
-  line-height: var(--text-label-lg-bold-lineHeight);
-}
-
-.muka-badge-number--lg {
-  height: var(--badge-number-size-lg);
-  min-width: var(--badge-number-size-lg);
-  padding: 0 var(--badge-number-padding-lg);
-  font-family: var(--text-label-2xl-bold-fontFamily);
-  font-weight: var(--text-label-2xl-bold-fontWeight);
-  font-size: var(--text-label-2xl-bold-fontSize);
-  line-height: var(--text-label-2xl-bold-lineHeight);
-}
-
-.muka-badge-number__label {
-  /*
-   * The badge sets a tight line-height for compact sizing, which would clip
-   * glyph descenders; give the label a roomier line-height. Vertical centering
-   * is unaffected because the badge height is fixed and content is centered.
-   */
-  line-height: normal;
-}
-
-/* Neutral variant */
-.muka-badge-number--neutral {
-  background-color: var(--color-surface-level1);
-  color: var(--color-text-default-default);
-}
-
-/* Info variant */
-.muka-badge-number--info {
-  background-color: var(--color-state-info-contrast);
-  color: var(--color-text-default-inverse);
-}
-
-/* Success variant */
-.muka-badge-number--success {
-  background-color: var(--color-state-success-contrast);
-  color: var(--color-text-default-inverse);
-}
-
-/* Warning variant */
-.muka-badge-number--warning {
-  background-color: var(--color-state-warning-contrast);
-  color: var(--color-text-default-inverse);
-}
-
-/* Error variant */
-.muka-badge-number--error {
-  background-color: var(--color-state-error-contrast);
-  color: var(--color-text-default-inverse);
-}
-
-
 /* Badge */
 /* Badge Component Styles - Using Muka Design Tokens */