@happyvertical/smrt-users 0.30.0

package/dist/svelte/components/InviteUserModal.svelte

@@ -0,0 +1,351 @@
+<script lang="ts">
+import { RoleSelector } from '@happyvertical/smrt-ui';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { Role, Tenant } from '@happyvertical/smrt-users';
+import { M } from '../i18n.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  open: boolean;
+  tenant: Tenant;
+  roles: Role[];
+  onsubmit: (data: {
+    email: string;
+    roleId: string;
+    sendEmail: boolean;
+  }) => void;
+  onclose: () => void;
+  loading?: boolean;
+}
+
+const {
+  open,
+  tenant,
+  roles,
+  onsubmit,
+  onclose,
+  loading = false,
+}: Props = $props();
+
+let email = $state('');
+let roleId = $state('');
+let sendEmail = $state(true);
+let error = $state('');
+
+// Set default role to 'member' if available
+$effect(() => {
+  if (roles.length > 0 && !roleId) {
+    const memberRole = roles.find((r) => r.slug === 'member');
+    roleId = memberRole?.id ?? roles[0].id ?? '';
+  }
+});
+
+function handleSubmit(e: Event) {
+  e.preventDefault();
+  error = '';
+
+  if (!email) {
+    error = 'Email is required';
+    return;
+  }
+
+  if (!roleId) {
+    error = 'Please select a role';
+    return;
+  }
+
+  onsubmit({ email, roleId, sendEmail });
+}
+
+function handleClose() {
+  email = '';
+  roleId = '';
+  sendEmail = true;
+  error = '';
+  onclose();
+}
+
+function handleBackdrop(e: MouseEvent) {
+  if (e.target === e.currentTarget) {
+    handleClose();
+  }
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && open) {
+    handleClose();
+  }
+}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <div class="modal-backdrop">
+    <button
+      type="button"
+      class="modal-overlay"
+      aria-label={t(M['users.invite_user_modal.close_invite_dialog'])}
+      onclick={handleClose}
+    ></button>
+    <div class="modal" role="dialog" aria-modal="true" tabindex="-1">
+      <div class="header">
+        <h2>{t(M['users.invite_user_modal.title'], { tenantName: tenant.name })}</h2>
+        <button type="button" class="close-btn" onclick={handleClose} aria-label={t(M['users.invite_user_modal.close'])}>
+          <svg viewBox="0 0 20 20" fill="currentColor">
+            <path
+              d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <form onsubmit={handleSubmit}>
+        <div class="body">
+          {#if error}
+            <div class="error">{error}</div>
+          {/if}
+
+          <div class="field">
+            <label for="invite-email">{t(M['users.invite_user_modal.email_address'])}</label>
+            <input
+              id="invite-email"
+              type="email"
+              bind:value={email}
+              placeholder={t(M['users.invite_user_modal.email_placeholder'])}
+              disabled={loading}
+              required
+            />
+          </div>
+
+          <div class="field">
+            <label for="invite-role">Role</label>
+            <RoleSelector
+              {roles}
+              value={roleId}
+              onchange={(id: string) => (roleId = id)}
+              disabled={loading}
+              showDescription
+            />
+          </div>
+
+          <div class="checkbox-field">
+            <input id="send-email" type="checkbox" bind:checked={sendEmail} disabled={loading} />
+            <label for="send-email">{t(M['users.invite_user_modal.send_invitation_email'])}</label>
+          </div>
+
+          {#if !sendEmail}
+            <div class="hint">
+              {t(M['users.invite_user_modal.pending_hint'])}
+            </div>
+          {/if}
+        </div>
+
+        <div class="footer">
+          <button type="button" class="btn-secondary" onclick={handleClose} disabled={loading}>
+            Cancel
+          </button>
+          <button type="submit" class="btn-primary" disabled={loading}>
+            {#if loading}
+              {t(M['users.invite_user_modal.sending'])}
+            {:else}
+              {t(M['users.invite_user_modal.send_invite'])}
+            {/if}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    z-index: var(--smrt-z-index-dialog, 1300);
+  }
+
+  .modal-overlay {
+    position: absolute;
+    inset: 0;
+    border: none;
+    background: var(--smrt-color-scrim, rgba(0, 0, 0, 0.5));
+    cursor: pointer;
+  }
+
+  .modal {
+    position: relative;
+    background: var(--smrt-color-surface, white);
+    border-radius: var(--smrt-radius-large, 0.5rem);
+    box-shadow: var(--smrt-elevation-3, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
+    width: 100%;
+    max-width: 28rem;
+    max-height: 90vh;
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--smrt-spacing-md, 1rem) var(--smrt-spacing-lg, 1.5rem);
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+  }
+
+  h2 {
+    margin: 0;
+    font: var(--smrt-typography-title-large-font, 600 1.125rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+  }
+
+  .close-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    background: none;
+    border: none;
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    cursor: pointer;
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    transition: background-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .close-btn:hover {
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+  }
+
+  .close-btn svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .body {
+    padding: var(--smrt-spacing-lg, 1.5rem);
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-md, 1rem);
+  }
+
+  .error {
+    padding: var(--smrt-spacing-sm, 0.75rem);
+    background: var(--smrt-color-error-container, #ffdad6);
+    border: 1px solid var(--smrt-color-error, #ba1a1a);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    color: var(--smrt-color-on-error-container, #410002);
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  label {
+    font: var(--smrt-typography-body-medium-font, 500 0.875rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  input[type='email'] {
+    padding: var(--smrt-spacing-sm, 0.5rem) var(--smrt-spacing-md, 0.75rem);
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+    transition: border-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  input[type='email']:focus {
+    outline: none;
+    border-color: var(--smrt-color-primary, #005ac1);
+    box-shadow: 0 0 0 3px var(--smrt-color-primary-container, rgba(0, 90, 193, 0.1));
+  }
+
+  input[type='email']:disabled {
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    cursor: not-allowed;
+  }
+
+  .checkbox-field {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-sm, 0.5rem);
+  }
+
+  .checkbox-field input {
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--smrt-color-primary, #005ac1);
+  }
+
+  .checkbox-field label {
+    font-weight: var(--smrt-typography-weight-normal, 400);
+  }
+
+  .hint {
+    font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    padding: var(--smrt-spacing-sm, 0.5rem);
+    background: var(--smrt-color-surface-container-low, #f9fafb);
+    border-radius: var(--smrt-radius-small, 0.25rem);
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--smrt-spacing-sm, 0.75rem);
+    padding: var(--smrt-spacing-md, 1rem) var(--smrt-spacing-lg, 1.5rem);
+    background: var(--smrt-color-surface-container-low, #f9fafb);
+    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+  }
+
+  button {
+    padding: var(--smrt-spacing-sm, 0.5rem) var(--smrt-spacing-md, 1rem);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
+    cursor: pointer;
+    transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .btn-primary {
+    background: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-on-primary, #ffffff);
+    border: none;
+  }
+
+  .btn-primary:hover:not(:disabled) {
+    background: var(--smrt-color-primary-container, #005ac1);
+    opacity: 0.9;
+  }
+
+  .btn-secondary {
+    background: var(--smrt-color-surface, white);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+  }
+
+  .btn-secondary:hover:not(:disabled) {
+    background: var(--smrt-color-surface-container-low, #f9fafb);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    button,
+    input[type='email'],
+    .close-btn {
+      transition: none;
+    }
+  }
+</style>

package/dist/svelte/components/InviteUserModal.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Role, Tenant } from '@happyvertical/smrt-users';
+export interface Props {
+    open: boolean;
+    tenant: Tenant;
+    roles: Role[];
+    onsubmit: (data: {
+        email: string;
+        roleId: string;
+        sendEmail: boolean;
+    }) => void;
+    onclose: () => void;
+    loading?: boolean;
+}
+declare const InviteUserModal: import("svelte").Component<Props, {}, "">;
+type InviteUserModal = ReturnType<typeof InviteUserModal>;
+export default InviteUserModal;
+//# sourceMappingURL=InviteUserModal.svelte.d.ts.map

package/dist/svelte/components/InviteUserModal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InviteUserModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InviteUserModal.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,OAAO,CAAC;KACpB,KAAK,IAAI,CAAC;IACX,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAsID,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/UserAvatar.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+import type { Profile } from '@happyvertical/smrt-profiles';
+
+export interface Props {
+  profile: Profile;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  showName?: boolean;
+}
+
+const { profile, size = 'md', showName = false }: Props = $props();
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+}
+
+// Deterministic per-name avatar color (identicon-style): a fixed decorative
+// palette hashed by name for at-a-glance user differentiation. These are
+// intentionally NOT --smrt-color-* tokens — a variety palette, not themeable
+// semantic roles (cf. the channel-brand avatars in smrt-messages). Applied via
+// an inline style binding, so the color-literal ratchet does not scan them.
+function getColor(name: string): string {
+  const colors = [
+    '#ef4444',
+    '#f97316',
+    '#f59e0b',
+    '#84cc16',
+    '#22c55e',
+    '#14b8a6',
+    '#06b6d4',
+    '#0ea5e9',
+    '#3b82f6',
+    '#6366f1',
+    '#8b5cf6',
+    '#a855f7',
+    '#d946ef',
+    '#ec4899',
+    '#f43f5e',
+  ];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length];
+}
+</script>
+
+<div class="user-avatar" class:sm={size === 'sm'} class:lg={size === 'lg'} class:xl={size === 'xl'}>
+  <span class="avatar" style:background-color={getColor(profile.name ?? '')}>
+    {getInitials(profile.name ?? 'U')}
+  </span>
+  {#if showName}
+    <span class="name">{profile.name}</span>
+  {/if}
+</div>
+
+<style>
+  .user-avatar {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-sm, 0.5rem);
+  }
+
+  .avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-color-on-primary, white);
+    font: var(--smrt-typography-label-large-font, 600 0.875rem / 1.25 sans-serif);
+  }
+
+  .sm .avatar {
+    width: 2rem;
+    height: 2rem;
+    font: var(--smrt-typography-label-medium-font, 0.75rem / 1 sans-serif);
+  }
+
+  .lg .avatar {
+    width: 3rem;
+    height: 3rem;
+    font: var(--smrt-typography-title-medium-font, 1rem / 1.5 sans-serif);
+  }
+
+  .xl .avatar {
+    width: 4rem;
+    height: 4rem;
+    font: var(--smrt-typography-title-large-font, 1.25rem / 1.25 sans-serif);
+  }
+
+  .name {
+    font: var(--smrt-typography-body-medium-font, 500 0.875rem / 1.25 sans-serif);
+  }
+
+  .lg .name,
+  .xl .name {
+    font: var(--smrt-typography-body-large-font, 1rem / 1.5 sans-serif);
+  }
+</style>

package/dist/svelte/components/UserAvatar.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Profile } from '@happyvertical/smrt-profiles';
+export interface Props {
+    profile: Profile;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    showName?: boolean;
+}
+declare const UserAvatar: import("svelte").Component<Props, {}, "">;
+type UserAvatar = ReturnType<typeof UserAvatar>;
+export default UserAvatar;
+//# sourceMappingURL=UserAvatar.svelte.d.ts.map

package/dist/svelte/components/UserAvatar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/UserAvatar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAG5D,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4DD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/UserCard.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+/**
+ * UserCard - Compact user information display
+ * refactored for Material 3
+ */
+import type { Profile } from '@happyvertical/smrt-profiles';
+import { ripple } from '@happyvertical/smrt-ui';
+import type { User } from '@happyvertical/smrt-users';
+import UserAvatar from './UserAvatar.svelte';
+
+export interface Props {
+  user: User;
+  profile: Profile;
+  role?: string;
+  status?: string;
+  onclick?: () => void;
+  selected?: boolean;
+}
+
+const {
+  user,
+  profile,
+  role,
+  status,
+  onclick,
+  selected = false,
+}: Props = $props();
+
+const statusClass = $derived.by(() => {
+  switch (status) {
+    case 'active':
+      return 'status-active';
+    case 'pending':
+      return 'status-pending';
+    case 'suspended':
+      return 'status-error';
+    case 'deactivated':
+      return 'status-disabled';
+    default:
+      return '';
+  }
+});
+</script>
+
+<button
+  type="button"
+  class="user-card"
+  class:selected
+  class:clickable={!!onclick}
+  onclick={onclick}
+  disabled={!onclick}
+  use:ripple
+>
+  <UserAvatar {profile} size="md" />
+
+  <div class="info">
+    <div class="name">{profile.name}</div>
+    <div class="email">{user.email}</div>
+  </div>
+
+  <div class="meta">
+    {#if role}
+      <span class="role">{role}</span>
+    {/if}
+    {#if status}
+      <span class="status {statusClass}">{status}</span>
+    {/if}
+  </div>
+</button>
+
+<style>
+  .user-card {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-4, 16px);
+    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-4, 16px);
+    background-color: var(--smrt-color-surface-container-low);
+    border-radius: var(--smrt-radius-lg, 12px);
+    width: 100%;
+    text-align: left;
+    cursor: default;
+    border: none;
+    transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
+    position: relative;
+    overflow: hidden;
+    color: var(--smrt-color-on-surface);
+    box-shadow: var(--smrt-elevation-1);
+  }
+
+  .user-card.clickable {
+    cursor: pointer;
+  }
+
+  .user-card.clickable:hover {
+    background-color: var(--smrt-color-surface-container-high);
+    box-shadow: var(--smrt-elevation-2);
+  }
+
+  .user-card.selected {
+    background-color: var(--smrt-color-secondary-container);
+    color: var(--smrt-color-on-secondary-container);
+  }
+
+  .info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .name {
+    font: var(--smrt-typography-title-small-font);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .email {
+    font: var(--smrt-typography-body-small-font);
+    color: var(--smrt-color-on-surface-variant);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .selected .email {
+    color: var(--smrt-color-on-secondary-container);
+    opacity: 0.8;
+  }
+
+  .meta {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    flex-shrink: 0;
+  }
+
+  .role {
+    font: var(--smrt-typography-label-small-font);
+    padding: 0 var(--smrt-spacing-2, 8px);
+    height: 20px;
+    display: inline-flex;
+    align-items: center;
+    background-color: var(--smrt-color-surface-container-highest);
+    color: var(--smrt-color-on-surface-variant);
+    border-radius: var(--smrt-radius-lg, 12px);
+    text-transform: capitalize;
+  }
+
+  .status {
+    font: var(--smrt-typography-label-small-font);
+    padding: 0 var(--smrt-spacing-2, 8px);
+    height: 20px;
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--smrt-radius-lg, 12px);
+    text-transform: capitalize;
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .status-active {
+    background-color: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+  }
+
+  .status-pending {
+    background-color: var(--smrt-color-secondary-container);
+    color: var(--smrt-color-on-secondary-container);
+  }
+
+  .status-error {
+    background-color: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
+  }
+
+  .status-disabled {
+    background-color: var(--smrt-color-surface-variant);
+    color: var(--smrt-color-on-surface-variant);
+  }
+</style>

package/dist/svelte/components/UserCard.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * UserCard - Compact user information display
+ * refactored for Material 3
+ */
+import type { Profile } from '@happyvertical/smrt-profiles';
+import type { User } from '@happyvertical/smrt-users';
+export interface Props {
+    user: User;
+    profile: Profile;
+    role?: string;
+    status?: string;
+    onclick?: () => void;
+    selected?: boolean;
+}
+declare const UserCard: import("svelte").Component<Props, {}, "">;
+type UserCard = ReturnType<typeof UserCard>;
+export default UserCard;
+//# sourceMappingURL=UserCard.svelte.d.ts.map

package/dist/svelte/components/UserCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/UserCard.svelte.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAItD,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuDD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}