@getmicdrop/svelte-components 5.17.3 → 5.18.0

package/dist/messages.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Centralized validation messages for Zod schemas
+ */
+export declare const VALIDATION_MESSAGES: {
+    readonly REQUIRED: "This field is required";
+    readonly INVALID_EMAIL: "Please enter a valid email address";
+    readonly INVALID_PHONE: "Please enter a valid phone number";
+    readonly INVALID_URL: "Please enter a valid URL";
+    readonly INVALID_UUID: "Invalid identifier format";
+    readonly INVALID_DATE: "Please enter a valid date";
+    readonly DATE_MUST_BE_FUTURE: "Date must be in the future";
+    readonly MUST_BE_INTEGER: "Must be a whole number";
+    readonly MUST_BE_POSITIVE: "Must be a positive number";
+    readonly MUST_BE_NON_NEGATIVE: "Must be zero or greater";
+    readonly PRICE_TOO_HIGH: "Price is too high (max $10,000)";
+    readonly PERCENTAGE_TOO_HIGH: "Percentage must be 100 or less";
+    readonly PASSWORD_TOO_SHORT: (min: number) => string;
+    readonly PASSWORD_TOO_LONG: (max: number) => string;
+    readonly INVALID_FORMAT: "Invalid format";
+    readonly INVALID_TIMEZONE: "Please enter a valid timezone";
+    readonly INVALID_STATE: "Please enter a valid 2-letter state code";
+    readonly INVALID_ZIP: "Please enter a valid zip code";
+    readonly tooLong: (field: string, max: number) => string;
+    readonly tooShort: (field: string, min: number) => string;
+    readonly tooSmall: (field: string, min: number) => string;
+    readonly tooLarge: (field: string, max: number) => string;
+    readonly fileTooLarge: (maxMB: number) => string;
+    readonly invalidFileType: (types: readonly string[]) => string;
+    readonly DISCOUNT_REQUIRED: "A discount amount is required";
+    readonly INVALID_DISCOUNT_TYPE: "Invalid discount type";
+    readonly END_DATE_AFTER_START: "End date must be after start date";
+    readonly MIN_EXCEEDS_MAX: "Minimum cannot exceed maximum";
+    readonly ACCEPT_TERMS_REQUIRED: "You must accept the terms and conditions";
+    readonly passwordTooShort: (min: number) => string;
+    readonly passwordTooLong: (max: number) => string;
+    readonly PASSWORD_NEEDS_UPPERCASE: "Password must contain at least one uppercase letter";
+    readonly PASSWORD_NEEDS_LOWERCASE: "Password must contain at least one lowercase letter";
+    readonly PASSWORD_NEEDS_NUMBER: "Password must contain at least one number";
+    readonly PASSWORD_NEEDS_SPECIAL: "Password must contain at least one special character";
+    readonly PASSWORDS_MUST_MATCH: "Passwords do not match";
+    readonly PASSWORD_SAME_AS_CURRENT: "New password must be different from current password";
+};
+//# sourceMappingURL=messages.d.ts.map

package/dist/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../src/lib/messages.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;uCA4BJ,MAAM;sCACP,MAAM;;;;;8BASd,MAAM,OAAO,MAAM;+BAClB,MAAM,OAAO,MAAM;+BACnB,MAAM,OAAO,MAAM;+BACnB,MAAM,OAAO,MAAM;mCAGf,MAAM;sCACH,SAAS,MAAM,EAAE;;;;;;qCAclB,MAAM;oCACP,MAAM;;;;;;;CAOrB,CAAC"}

package/dist/messages.js

@@ -0,0 +1,57 @@
+/**
+ * Centralized validation messages for Zod schemas
+ */
+export const VALIDATION_MESSAGES = {
+    // Required field
+    REQUIRED: 'This field is required',
+    // Email validation
+    INVALID_EMAIL: 'Please enter a valid email address',
+    // Phone validation
+    INVALID_PHONE: 'Please enter a valid phone number',
+    // URL validation
+    INVALID_URL: 'Please enter a valid URL',
+    // UUID validation
+    INVALID_UUID: 'Invalid identifier format',
+    // Date validation
+    INVALID_DATE: 'Please enter a valid date',
+    DATE_MUST_BE_FUTURE: 'Date must be in the future',
+    // Number validation
+    MUST_BE_INTEGER: 'Must be a whole number',
+    MUST_BE_POSITIVE: 'Must be a positive number',
+    MUST_BE_NON_NEGATIVE: 'Must be zero or greater',
+    PRICE_TOO_HIGH: 'Price is too high (max $10,000)',
+    PERCENTAGE_TOO_HIGH: 'Percentage must be 100 or less',
+    // Password validation
+    PASSWORD_TOO_SHORT: (min) => `Password must be at least ${min} characters`,
+    PASSWORD_TOO_LONG: (max) => `Password must be ${max} characters or less`,
+    // Format validation
+    INVALID_FORMAT: 'Invalid format',
+    INVALID_TIMEZONE: 'Please enter a valid timezone',
+    INVALID_STATE: 'Please enter a valid 2-letter state code',
+    INVALID_ZIP: 'Please enter a valid zip code',
+    // Dynamic length messages
+    tooLong: (field, max) => `${field} must be ${max} characters or less`,
+    tooShort: (field, min) => `${field} must be at least ${min} characters`,
+    tooSmall: (field, min) => `${field} must be at least ${min}`,
+    tooLarge: (field, max) => `${field} must be no more than ${max}`,
+    // File validation
+    fileTooLarge: (maxMB) => `File must be ${maxMB}MB or less`,
+    invalidFileType: (types) => `File must be one of: ${types.join(', ')}`,
+    // Promo code validation
+    DISCOUNT_REQUIRED: 'A discount amount is required',
+    INVALID_DISCOUNT_TYPE: 'Invalid discount type',
+    // Date range validation
+    END_DATE_AFTER_START: 'End date must be after start date',
+    MIN_EXCEEDS_MAX: 'Minimum cannot exceed maximum',
+    // Terms validation
+    ACCEPT_TERMS_REQUIRED: 'You must accept the terms and conditions',
+    // Password validation (function variants)
+    passwordTooShort: (min) => `Password must be at least ${min} characters`,
+    passwordTooLong: (max) => `Password must be ${max} characters or less`,
+    PASSWORD_NEEDS_UPPERCASE: 'Password must contain at least one uppercase letter',
+    PASSWORD_NEEDS_LOWERCASE: 'Password must contain at least one lowercase letter',
+    PASSWORD_NEEDS_NUMBER: 'Password must contain at least one number',
+    PASSWORD_NEEDS_SPECIAL: 'Password must contain at least one special character',
+    PASSWORDS_MUST_MATCH: 'Passwords do not match',
+    PASSWORD_SAME_AS_CURRENT: 'New password must be different from current password',
+};

package/dist/patterns/chat/ChatActivityNotice.svelte

@@ -1,41 +1,41 @@
-<script lang="ts">
-  /**
-   * ChatActivityNotice - Centered notice for silent/background activity
-   *
-   * Displays activity that happened without notification (e.g., admin status changes)
-   * in a subtle centered format with decorative lines.
-   */
-  import type { Snippet } from 'svelte';
-  import { classNames } from '../../utils/utils.js';
-
-  interface Props {
-    /** Actor name who performed the action */
-    actorName?: string;
-    /** Timestamp of the action */
-    timestamp?: string;
-    /** Additional CSS classes */
-    className?: string;
-    /** Content to display (status changes, etc.) */
-    children?: Snippet;
-  }
-
-  let {
-    actorName,
-    timestamp,
-    className = '',
-    children,
-  }: Props = $props();
-</script>
-
-<div class={classNames('flex items-center justify-center gap-3 py-3', className)}>
-  <div class="h-px bg-gray-200 dark:bg-gray-700 w-12"></div>
-  <div class="flex flex-col items-center gap-1">
-    {@render children?.()}
-    {#if actorName || timestamp}
-      <span class="text-[10px] text-gray-400">
-        {#if actorName}{actorName}{/if}{#if actorName && timestamp} · {/if}{#if timestamp}{timestamp}{/if}
-      </span>
-    {/if}
-  </div>
-  <div class="h-px bg-gray-200 dark:bg-gray-700 w-12"></div>
-</div>
+<script lang="ts">
+  /**
+   * ChatActivityNotice - Centered notice for silent/background activity
+   *
+   * Displays activity that happened without notification (e.g., admin status changes)
+   * in a subtle centered format with decorative lines.
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Actor name who performed the action */
+    actorName?: string;
+    /** Timestamp of the action */
+    timestamp?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Content to display (status changes, etc.) */
+    children?: Snippet;
+  }
+
+  let {
+    actorName,
+    timestamp,
+    className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<div class={classNames('flex items-center justify-center gap-3 py-3', className)}>
+  <div class="h-px bg-gray-200 dark:bg-gray-700 w-12"></div>
+  <div class="flex flex-col items-center gap-1">
+    {@render children?.()}
+    {#if actorName || timestamp}
+      <span class="text-[10px] text-gray-400">
+        {#if actorName}{actorName}{/if}{#if actorName && timestamp} · {/if}{#if timestamp}{timestamp}{/if}
+      </span>
+    {/if}
+  </div>
+  <div class="h-px bg-gray-200 dark:bg-gray-700 w-12"></div>
+</div>

package/dist/patterns/chat/ChatBubble.svelte

@@ -1,95 +1,95 @@
-<script lang="ts">
-  /**
-   * ChatBubble - Message bubble for chat interfaces
-   *
-   * Displays inbound (left) or outbound (right) messages with optional
-   * error state, timestamp, and sender name.
-   */
-  import type { Snippet } from 'svelte';
-  import { classNames } from '../../utils/utils.js';
-  import Renew from 'carbon-icons-svelte/lib/Renew.svelte';
-
-  interface Props {
-    /** Message direction - inbound (from other) or outbound (from us) */
-    direction?: 'inbound' | 'outbound';
-    /** Sender name (shown for inbound messages) */
-    senderName?: string;
-    /** Timestamp to display */
-    timestamp?: string;
-    /** Whether delivery failed */
-    failed?: boolean;
-    /** Error message when failed */
-    errorMessage?: string;
-    /** Callback when retry is clicked */
-    onretry?: () => void;
-    /** Additional CSS classes for the bubble */
-    className?: string;
-    /** Avatar snippet (for inbound messages) */
-    avatar?: Snippet;
-    /** Message content */
-    children?: Snippet;
-  }
-
-  let {
-    direction = 'inbound',
-    senderName,
-    timestamp,
-    failed = false,
-    errorMessage,
-    onretry,
-    className = '',
-    avatar,
-    children,
-  }: Props = $props();
-
-  let isOutbound = $derived(direction === 'outbound');
-
-  let bubbleClasses = $derived(
-    classNames(
-      'px-4 py-2.5 rounded-2xl text-sm',
-      isOutbound
-        ? 'bg-blue-600 text-white rounded-br-sm'
-        : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-bl-sm',
-      className
-    )
-  );
-</script>
-
-<div class="flex {isOutbound ? 'justify-end' : 'justify-start'}">
-  <div class="flex items-end gap-2 max-w-[75%] {isOutbound ? 'flex-row-reverse' : ''}">
-    {#if !isOutbound && avatar}
-      {@render avatar()}
-    {/if}
-    <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'}">
-      {#if !isOutbound && senderName}
-        <span class="text-xs text-gray-500 mb-1 px-2">{senderName}</span>
-      {/if}
-      <div class="flex items-center gap-2 {isOutbound ? 'flex-row-reverse' : ''}">
-        <div class={bubbleClasses}>
-          {@render children?.()}
-        </div>
-        {#if failed}
-          <div class="flex items-center justify-center w-5 h-5 bg-red-500 rounded-full shrink-0">
-            <span class="text-white text-xs font-bold leading-none">!</span>
-          </div>
-        {/if}
-      </div>
-      {#if failed && errorMessage}
-        <div class="flex items-center gap-1 mt-0.5 px-2">
-          <span class="text-[9px] text-red-400">{errorMessage}</span>
-          {#if onretry}
-            <button
-              class="text-[9px] text-red-400 hover:text-red-500 flex items-center gap-0.5 opacity-75 hover:opacity-100"
-              onclick={onretry}
-            >
-              <Renew class="w-2 h-2" />
-              retry
-            </button>
-          {/if}
-        </div>
-      {:else if timestamp}
-        <span class="text-[10px] text-gray-400 mt-0.5 px-2">{timestamp}</span>
-      {/if}
-    </div>
-  </div>
-</div>
+<script lang="ts">
+  /**
+   * ChatBubble - Message bubble for chat interfaces
+   *
+   * Displays inbound (left) or outbound (right) messages with optional
+   * error state, timestamp, and sender name.
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+  import Renew from 'carbon-icons-svelte/lib/Renew.svelte';
+
+  interface Props {
+    /** Message direction - inbound (from other) or outbound (from us) */
+    direction?: 'inbound' | 'outbound';
+    /** Sender name (shown for inbound messages) */
+    senderName?: string;
+    /** Timestamp to display */
+    timestamp?: string;
+    /** Whether delivery failed */
+    failed?: boolean;
+    /** Error message when failed */
+    errorMessage?: string;
+    /** Callback when retry is clicked */
+    onretry?: () => void;
+    /** Additional CSS classes for the bubble */
+    className?: string;
+    /** Avatar snippet (for inbound messages) */
+    avatar?: Snippet;
+    /** Message content */
+    children?: Snippet;
+  }
+
+  let {
+    direction = 'inbound',
+    senderName,
+    timestamp,
+    failed = false,
+    errorMessage,
+    onretry,
+    className = '',
+    avatar,
+    children,
+  }: Props = $props();
+
+  let isOutbound = $derived(direction === 'outbound');
+
+  let bubbleClasses = $derived(
+    classNames(
+      'px-4 py-2.5 rounded-2xl text-sm',
+      isOutbound
+        ? 'bg-blue-600 text-white rounded-br-sm'
+        : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-bl-sm',
+      className
+    )
+  );
+</script>
+
+<div class="flex {isOutbound ? 'justify-end' : 'justify-start'}">
+  <div class="flex items-end gap-2 max-w-[75%] {isOutbound ? 'flex-row-reverse' : ''}">
+    {#if !isOutbound && avatar}
+      {@render avatar()}
+    {/if}
+    <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'}">
+      {#if !isOutbound && senderName}
+        <span class="text-xs text-gray-500 mb-1 px-2">{senderName}</span>
+      {/if}
+      <div class="flex items-center gap-2 {isOutbound ? 'flex-row-reverse' : ''}">
+        <div class={bubbleClasses}>
+          {@render children?.()}
+        </div>
+        {#if failed}
+          <div class="flex items-center justify-center w-5 h-5 bg-red-500 rounded-full shrink-0">
+            <span class="text-white text-xs font-bold leading-none">!</span>
+          </div>
+        {/if}
+      </div>
+      {#if failed && errorMessage}
+        <div class="flex items-center gap-1 mt-0.5 px-2">
+          <span class="text-[9px] text-red-400">{errorMessage}</span>
+          {#if onretry}
+            <button
+              class="text-[9px] text-red-400 hover:text-red-500 flex items-center gap-0.5 opacity-75 hover:opacity-100"
+              onclick={onretry}
+            >
+              <Renew class="w-2 h-2" />
+              retry
+            </button>
+          {/if}
+        </div>
+      {:else if timestamp}
+        <span class="text-[10px] text-gray-400 mt-0.5 px-2">{timestamp}</span>
+      {/if}
+    </div>
+  </div>
+</div>

package/dist/patterns/chat/ChatContainer.svelte

@@ -1,46 +1,46 @@
-<script lang="ts">
-  /**
-   * ChatContainer - Layout wrapper for chat interfaces
-   *
-   * Provides a flex column layout with optional header, scrollable message area,
-   * and fixed footer for message input.
-   */
-  import type { Snippet } from 'svelte';
-  import { classNames } from '../../utils/utils.js';
-
-  interface Props {
-    /** Additional CSS classes for the container */
-    className?: string;
-    /** Header content (title, subtitle, etc.) */
-    header?: Snippet;
-    /** Footer content (message input, actions) */
-    footer?: Snippet;
-    /** Main scrollable content */
-    children?: Snippet;
-  }
-
-  let {
-    className = '',
-    header,
-    footer,
-    children,
-  }: Props = $props();
-</script>
-
-<div class={classNames('flex flex-col h-full bg-white dark:bg-gray-900', className)}>
-  {#if header}
-    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 shrink-0">
-      {@render header()}
-    </div>
-  {/if}
-
-  <div class="flex-1 overflow-y-auto px-4 py-4 space-y-3">
-    {@render children?.()}
-  </div>
-
-  {#if footer}
-    <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shrink-0">
-      {@render footer()}
-    </div>
-  {/if}
-</div>
+<script lang="ts">
+  /**
+   * ChatContainer - Layout wrapper for chat interfaces
+   *
+   * Provides a flex column layout with optional header, scrollable message area,
+   * and fixed footer for message input.
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Header content (title, subtitle, etc.) */
+    header?: Snippet;
+    /** Footer content (message input, actions) */
+    footer?: Snippet;
+    /** Main scrollable content */
+    children?: Snippet;
+  }
+
+  let {
+    className = '',
+    header,
+    footer,
+    children,
+  }: Props = $props();
+</script>
+
+<div class={classNames('flex flex-col h-full bg-white dark:bg-gray-900', className)}>
+  {#if header}
+    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 shrink-0">
+      {@render header()}
+    </div>
+  {/if}
+
+  <div class="flex-1 overflow-y-auto px-4 py-4 space-y-3">
+    {@render children?.()}
+  </div>
+
+  {#if footer}
+    <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shrink-0">
+      {@render footer()}
+    </div>
+  {/if}
+</div>

package/dist/patterns/chat/ChatDateDivider.svelte

@@ -1,27 +1,27 @@
-<script lang="ts">
-  /**
-   * ChatDateDivider - Date separator for chat messages
-   *
-   * Displays a centered date label (Today, Yesterday, or formatted date)
-   * to separate messages by day.
-   */
-  import { classNames } from '../../utils/utils.js';
-
-  interface Props {
-    /** Date label to display (e.g., "Today", "Yesterday", "Monday, Jan 15, 2024") */
-    label: string;
-    /** Additional CSS classes */
-    className?: string;
-  }
-
-  let {
-    label,
-    className = '',
-  }: Props = $props();
-</script>
-
-<div class={classNames('text-center py-2', className)}>
-  <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full">
-    {label}
-  </span>
-</div>
+<script lang="ts">
+  /**
+   * ChatDateDivider - Date separator for chat messages
+   *
+   * Displays a centered date label (Today, Yesterday, or formatted date)
+   * to separate messages by day.
+   */
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Date label to display (e.g., "Today", "Yesterday", "Monday, Jan 15, 2024") */
+    label: string;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    label,
+    className = '',
+  }: Props = $props();
+</script>
+
+<div class={classNames('text-center py-2', className)}>
+  <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full">
+    {label}
+  </span>
+</div>

package/dist/patterns/chat/ChatInvitationBubble.svelte

@@ -1,37 +1,37 @@
-<script lang="ts">
-  /**
-   * ChatInvitationBubble - Invitation notification bubble
-   *
-   * Shows "Invited {performerName}" with send icon in a blue bubble.
-   */
-  import { classNames } from '../../utils/utils.js';
-  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
-
-  interface Props {
-    /** Name of the performer who was invited */
-    performerName: string;
-    /** Whether this is outbound (right side) */
-    outbound?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-  }
-
-  let {
-    performerName,
-    outbound = true,
-    className = '',
-  }: Props = $props();
-
-  let bubbleClasses = $derived(
-    classNames(
-      'px-4 py-2.5 rounded-2xl text-sm bg-blue-600 text-white flex items-center gap-1.5',
-      outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
-      className
-    )
-  );
-</script>
-
-<div class={bubbleClasses}>
-  <SendAltFilled class="w-4 h-4" />
-  Invited {performerName}
-</div>
+<script lang="ts">
+  /**
+   * ChatInvitationBubble - Invitation notification bubble
+   *
+   * Shows "Invited {performerName}" with send icon in a blue bubble.
+   */
+  import { classNames } from '../../utils/utils.js';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  interface Props {
+    /** Name of the performer who was invited */
+    performerName: string;
+    /** Whether this is outbound (right side) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    performerName,
+    outbound = true,
+    className = '',
+  }: Props = $props();
+
+  let bubbleClasses = $derived(
+    classNames(
+      'px-4 py-2.5 rounded-2xl text-sm bg-blue-600 text-white flex items-center gap-1.5',
+      outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
+      className
+    )
+  );
+</script>
+
+<div class={bubbleClasses}>
+  <SendAltFilled class="w-4 h-4" />
+  Invited {performerName}
+</div>

package/dist/patterns/chat/ChatInvitationNotice.svelte

@@ -1,27 +1,27 @@
-<script lang="ts">
-  /**
-   * ChatInvitationNotice - Inline invitation notice
-   *
-   * Shows "Invited {performerName}" with icon for activity notices.
-   * Smaller/subtler than ChatInvitationBubble.
-   */
-  import { classNames } from '../../utils/utils.js';
-  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
-
-  interface Props {
-    /** Name of the performer who was invited */
-    performerName: string;
-    /** Additional CSS classes */
-    className?: string;
-  }
-
-  let {
-    performerName,
-    className = '',
-  }: Props = $props();
-</script>
-
-<span class={classNames('text-xs font-medium text-blue-600 flex items-center gap-1', className)}>
-  <SendAltFilled class="w-3 h-3" />
-  Invited {performerName}
-</span>
+<script lang="ts">
+  /**
+   * ChatInvitationNotice - Inline invitation notice
+   *
+   * Shows "Invited {performerName}" with icon for activity notices.
+   * Smaller/subtler than ChatInvitationBubble.
+   */
+  import { classNames } from '../../utils/utils.js';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  interface Props {
+    /** Name of the performer who was invited */
+    performerName: string;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    performerName,
+    className = '',
+  }: Props = $props();
+</script>
+
+<span class={classNames('text-xs font-medium text-blue-600 flex items-center gap-1', className)}>
+  <SendAltFilled class="w-3 h-3" />
+  Invited {performerName}
+</span>