@getmicdrop/svelte-components 5.18.2 → 5.20.0

package/dist/services/show.service.js

@@ -0,0 +1,115 @@
+import { API_BASE_URL, USE_V2_API, buildApiUrl, buildPerformerInviteUrl, getPerformerInviteMethod } from "../utils/apiConfig";
+import { getPerformerToken } from "../utils/utils";
+/**
+ * Accept an event performer invitation
+ */
+export async function acceptInvite(inviteId, message = "") {
+    try {
+        const response = await fetch(buildPerformerInviteUrl(inviteId, "accept"), {
+            method: getPerformerInviteMethod("accept"),
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ message }),
+        });
+        if (response.ok) {
+            const result = await response.json();
+            return { ok: true, result };
+        }
+        return { ok: false };
+    }
+    catch (error) {
+        console.error("Error accepting invite:", error);
+        return { ok: false };
+    }
+}
+/**
+ * Decline an event performer invitation
+ */
+export async function declineInvite(inviteId, message = "") {
+    try {
+        const response = await fetch(buildPerformerInviteUrl(inviteId, "decline"), {
+            method: getPerformerInviteMethod("decline"),
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ message }),
+        });
+        if (response.ok) {
+            const result = await response.json();
+            return { ok: true, result };
+        }
+        return { ok: false };
+    }
+    catch (error) {
+        console.error("Error declining invite:", error);
+        return { ok: false };
+    }
+}
+/**
+ * Cancel an event performer invitation
+ */
+export async function cancelInvite(inviteId, message = "") {
+    try {
+        const response = await fetch(buildPerformerInviteUrl(inviteId, "cancel"), {
+            method: getPerformerInviteMethod("cancel"),
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ message }),
+        });
+        if (response.ok) {
+            const result = await response.json();
+            return { ok: true, result };
+        }
+        return { ok: false };
+    }
+    catch (error) {
+        console.error("Error cancelling invite:", error);
+        return { ok: false };
+    }
+}
+/**
+ * Send a message to a venue
+ */
+export async function sendVenueMessage(inviteId, message) {
+    try {
+        const token = getPerformerToken();
+        const url = USE_V2_API
+            ? buildApiUrl(`/api/v2/performer/invites/${inviteId}/message`)
+            : buildApiUrl(`/api/performer/sendVenueMessage/${inviteId}`);
+        const response = await fetch(url, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${token}`,
+            },
+            credentials: "include",
+            body: JSON.stringify({ message }),
+        });
+        if (response.ok) {
+            const text = await response.text();
+            let result = { message: "Email sent successfully" };
+            if (text) {
+                try {
+                    result = JSON.parse(text);
+                }
+                catch (_e) {
+                    // Empty response is fine
+                }
+            }
+            return { ok: true, result };
+        }
+        return { ok: false };
+    }
+    catch (error) {
+        console.error("Error sending venue message:", error);
+        return { ok: false };
+    }
+}
+/**
+ * Get the ticketing event URL
+ */
+export function getEventUrl(venueId) {
+    return `${API_BASE_URL}/ticketing/events/${venueId}`;
+}

package/dist/services/show.service.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=show.service.spec.d.ts.map

package/dist/services/show.service.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"show.service.spec.d.ts","sourceRoot":"","sources":["../../src/lib/services/show.service.spec.ts"],"names":[],"mappings":""}

package/dist/services/show.service.spec.js

@@ -0,0 +1,242 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+// Mock the utility modules before imports
+vi.mock('$lib/utils/apiConfig', () => ({
+    API_BASE_URL: 'https://get-micdrop.com',
+    USE_V2_API: false,
+    buildApiUrl: (path) => {
+        const cleanPath = path.startsWith('/') ? path : `/${path}`;
+        return `https://get-micdrop.com${cleanPath}`;
+    },
+    buildPerformerInviteUrl: (inviteId, action) => {
+        const v2Action = action === 'accept' ? 'confirm' : action;
+        return `https://get-micdrop.com/api/v2/event-performers/${inviteId}/${v2Action}`;
+    },
+    getPerformerInviteMethod: (action) => action === 'cancel' ? 'PUT' : 'POST',
+}));
+vi.mock('$lib/utils/utils', () => ({
+    getPerformerToken: () => 'test-token',
+}));
+import { acceptInvite, declineInvite, cancelInvite, sendVenueMessage, getEventUrl, } from './show.service';
+describe('ShowService', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        global.fetch = vi.fn();
+    });
+    describe('acceptInvite', () => {
+        it('makes PUT request to accept invite endpoint', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({ success: true }),
+            });
+            await acceptInvite('123');
+            expect(global.fetch).toHaveBeenCalledWith('https://get-micdrop.com/api/v2/event-performers/123/confirm', expect.objectContaining({
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+            }));
+        });
+        it('returns ok: true on successful response', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({ id: 123 }),
+            });
+            const result = await acceptInvite('123');
+            expect(result.ok).toBe(true);
+            expect(result.result).toEqual({ id: 123 });
+        });
+        it('returns ok: false on failed response', async () => {
+            global.fetch.mockResolvedValue({
+                ok: false,
+            });
+            const result = await acceptInvite('123');
+            expect(result.ok).toBe(false);
+        });
+        it('returns ok: false on network error', async () => {
+            const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+            global.fetch.mockRejectedValue(new Error('Network error'));
+            const result = await acceptInvite('123');
+            expect(result.ok).toBe(false);
+            consoleSpy.mockRestore();
+        });
+        it('includes message in request body', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({}),
+            });
+            await acceptInvite('123', 'Thanks for the invite!');
+            expect(global.fetch).toHaveBeenCalledWith(expect.any(String), expect.objectContaining({
+                body: JSON.stringify({ message: 'Thanks for the invite!' }),
+            }));
+        });
+        it('sends empty message by default', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({}),
+            });
+            await acceptInvite('123');
+            expect(global.fetch).toHaveBeenCalledWith(expect.any(String), expect.objectContaining({
+                body: JSON.stringify({ message: '' }),
+            }));
+        });
+    });
+    describe('declineInvite', () => {
+        it('makes PUT request to decline invite endpoint', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({}),
+            });
+            await declineInvite('456');
+            expect(global.fetch).toHaveBeenCalledWith('https://get-micdrop.com/api/v2/event-performers/456/decline', expect.objectContaining({
+                method: 'POST',
+            }));
+        });
+        it('returns ok: true on success', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({ declined: true }),
+            });
+            const result = await declineInvite('456');
+            expect(result.ok).toBe(true);
+            expect(result.result).toEqual({ declined: true });
+        });
+        it('returns ok: false on failure', async () => {
+            global.fetch.mockResolvedValue({
+                ok: false,
+            });
+            const result = await declineInvite('456');
+            expect(result.ok).toBe(false);
+        });
+        it('returns ok: false on error', async () => {
+            const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+            global.fetch.mockRejectedValue(new Error('Error'));
+            const result = await declineInvite('456');
+            expect(result.ok).toBe(false);
+            consoleSpy.mockRestore();
+        });
+        it('includes decline message in body', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({}),
+            });
+            await declineInvite('456', 'Schedule conflict');
+            expect(global.fetch).toHaveBeenCalledWith(expect.any(String), expect.objectContaining({
+                body: JSON.stringify({ message: 'Schedule conflict' }),
+            }));
+        });
+    });
+    describe('cancelInvite', () => {
+        it('makes PUT request to cancel invite endpoint', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({}),
+            });
+            await cancelInvite('789');
+            expect(global.fetch).toHaveBeenCalledWith('https://get-micdrop.com/api/v2/event-performers/789/cancel', expect.objectContaining({
+                method: 'PUT',
+            }));
+        });
+        it('returns ok: true on success', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({ cancelled: true }),
+            });
+            const result = await cancelInvite('789');
+            expect(result.ok).toBe(true);
+        });
+        it('returns ok: false on failure', async () => {
+            global.fetch.mockResolvedValue({
+                ok: false,
+            });
+            const result = await cancelInvite('789');
+            expect(result.ok).toBe(false);
+        });
+        it('returns ok: false on error', async () => {
+            const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+            global.fetch.mockRejectedValue(new Error('Error'));
+            const result = await cancelInvite('789');
+            expect(result.ok).toBe(false);
+            consoleSpy.mockRestore();
+        });
+    });
+    describe('sendVenueMessage', () => {
+        it('makes POST request with auth token', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                text: () => Promise.resolve(''),
+            });
+            await sendVenueMessage('123', 'Hello!');
+            expect(global.fetch).toHaveBeenCalledWith('https://get-micdrop.com/api/performer/sendVenueMessage/123', expect.objectContaining({
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: 'Bearer test-token',
+                },
+                credentials: 'include',
+            }));
+        });
+        it('sends message in request body', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                text: () => Promise.resolve(''),
+            });
+            await sendVenueMessage('123', 'Hello venue!');
+            expect(global.fetch).toHaveBeenCalledWith(expect.any(String), expect.objectContaining({
+                body: JSON.stringify({ message: 'Hello venue!' }),
+            }));
+        });
+        it('returns ok: true with default message on empty response', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                text: () => Promise.resolve(''),
+            });
+            const result = await sendVenueMessage('123', 'Hello');
+            expect(result.ok).toBe(true);
+            expect(result.result).toEqual({ message: 'Email sent successfully' });
+        });
+        it('parses JSON response when present', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                text: () => Promise.resolve(JSON.stringify({ sent: true, id: 456 })),
+            });
+            const result = await sendVenueMessage('123', 'Hello');
+            expect(result.ok).toBe(true);
+            expect(result.result).toEqual({ sent: true, id: 456 });
+        });
+        it('handles invalid JSON in response gracefully', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                text: () => Promise.resolve('not json'),
+            });
+            const result = await sendVenueMessage('123', 'Hello');
+            expect(result.ok).toBe(true);
+            expect(result.result).toEqual({ message: 'Email sent successfully' });
+        });
+        it('returns ok: false on failure', async () => {
+            global.fetch.mockResolvedValue({
+                ok: false,
+            });
+            const result = await sendVenueMessage('123', 'Hello');
+            expect(result.ok).toBe(false);
+        });
+        it('returns ok: false on error', async () => {
+            const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+            global.fetch.mockRejectedValue(new Error('Network error'));
+            const result = await sendVenueMessage('123', 'Hello');
+            expect(result.ok).toBe(false);
+            consoleSpy.mockRestore();
+        });
+    });
+    describe('getEventUrl', () => {
+        it('returns ticketing URL for venue', () => {
+            const url = getEventUrl('123');
+            expect(url).toBe('https://get-micdrop.com/ticketing/events/123');
+        });
+        it('handles numeric venue ID', () => {
+            const url = getEventUrl(456);
+            expect(url).toBe('https://get-micdrop.com/ticketing/events/456');
+        });
+        it('handles string venue ID', () => {
+            const url = getEventUrl('venue-abc');
+            expect(url).toBe('https://get-micdrop.com/ticketing/events/venue-abc');
+        });
+    });
+});

package/dist/tailwind/preset.cjs

@@ -1,3 +1,5 @@
+const forms = require('@tailwindcss/forms');
+
 const colors = {
   'bg-primary': 'hsl(var(--bg-primary) / <alpha-value>)',
   'bg-secondary': 'hsl(var(--bg-secondary) / <alpha-value>)',
@@ -79,4 +81,7 @@ module.exports = {
       },
     },
   },
+  // @tailwindcss/forms is included here so consuming apps get it via the preset.
+  // Consuming apps should NOT also @plugin "@tailwindcss/forms" to avoid double-loading.
+  plugins: [forms],
 };

package/dist/tailwind/preset.d.cts

@@ -62,6 +62,7 @@ declare const zIndex: {
     70: string;
     100: string;
 };
+import forms = require("@tailwindcss/forms");
 export namespace theme {
     namespace extend {
         export { colors };
@@ -74,5 +75,6 @@ export namespace theme {
         }
     }
 }
+export let plugins: (typeof forms)[];
 export {};
 //# sourceMappingURL=preset.d.cts.map

package/dist/tailwind/preset.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.cts","sourceRoot":"","sources":["../../../../src/lib/tailwind/preset.cjs"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BE;AAEF;;;;;;;;;;EAUE;AAEF;;;;;;;;;;EAUE;AAEF;;;;;;;;;;;;EAYE"}
+{"version":3,"file":"preset.d.cts","sourceRoot":"","sources":["../../../../src/lib/tailwind/preset.cjs"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BE;AAEF;;;;;;;;;;EAUE;AAEF;;;;;;;;;;EAUE;AAEF;;;;;;;;;;;;EAYE"}

package/dist/tokens/__tests__/spacing.test.js

@@ -62,8 +62,8 @@ describe('spacing tokens', () => {
                 expect(gapScale.semantic.layout).toBe('gap-8');
                 expect(gapScale.semantic.page).toBe('gap-12');
             });
-            it('has 11 semantic gap values', () => {
-                expect(Object.keys(gapScale.semantic)).toHaveLength(11);
+            it('has 12 semantic gap values', () => {
+                expect(Object.keys(gapScale.semantic)).toHaveLength(12);
             });
         });
         describe('numeric', () => {

package/dist/tokens/base-resets.css

@@ -0,0 +1,124 @@
+/* ==========================================================================
+   BASE RESETS
+   Shared form resets, accessibility utilities, and platform fixes.
+   Imported via base.css -- every Micdrop app gets these automatically.
+
+   IMPORTANT: Do NOT add `appearance: none` to inputs here.
+   @tailwindcss/forms handles form element appearance. Setting it globally
+   breaks native checkboxes and radios (see MIC-859).
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   iOS ZOOM PREVENTION
+   iOS Safari auto-zooms when focusing inputs with font-size < 16px.
+   Set minimum 16px on text inputs only. Exclude checkbox/radio which
+   don't trigger zoom and need their native appearance preserved.
+   -------------------------------------------------------------------------- */
+input:not([type="checkbox"]):not([type="radio"]),
+textarea,
+select {
+  font-size: 16px;
+}
+
+/* --------------------------------------------------------------------------
+   FORM FONT INHERITANCE
+   Form elements don't inherit font by default in most browsers.
+   -------------------------------------------------------------------------- */
+input,
+button {
+  font-size: inherit;
+  font-family: inherit;
+}
+
+/* --------------------------------------------------------------------------
+   FOCUS MANAGEMENT
+   Hide focus ring on mouse/touch interaction, show on keyboard navigation.
+   This provides clean UI for mouse users while maintaining accessibility
+   for keyboard users.
+   -------------------------------------------------------------------------- */
+button:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* --------------------------------------------------------------------------
+   SCREEN READER ONLY
+   Visually hides content while keeping it accessible to screen readers.
+   Standard pattern matching Tailwind's built-in sr-only utility.
+   This is a fallback for non-Tailwind contexts -- Tailwind's version
+   will override it due to CSS specificity/source order.
+   -------------------------------------------------------------------------- */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* --------------------------------------------------------------------------
+   SCREEN READER ONLY - FOCUSABLE
+   Makes sr-only content visible when focused. Enables skip-navigation
+   links and other focus-activated accessibility patterns.
+   -------------------------------------------------------------------------- */
+.sr-only-focusable:focus,
+.sr-only-focusable:active {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* --------------------------------------------------------------------------
+   REDUCED MOTION
+   Respects user's motion preference. Disables all animations and
+   transitions when prefers-reduced-motion is set.
+   -------------------------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   CHROME AUTOFILL DARK MODE FIX
+   Chrome's autofill sets a hardcoded light background on inputs.
+   In dark mode, this creates a jarring white flash. Override with
+   the app's dark background color.
+   -------------------------------------------------------------------------- */
+.dark input:-webkit-autofill,
+.dark input:-webkit-autofill:hover,
+.dark input:-webkit-autofill:focus,
+.dark textarea:-webkit-autofill,
+.dark textarea:-webkit-autofill:hover,
+.dark textarea:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px hsl(var(--bg-primary)) inset !important;
+  -webkit-text-fill-color: hsl(var(--text-primary)) !important;
+  background-color: hsl(var(--bg-primary)) !important;
+}
+
+/* --------------------------------------------------------------------------
+   DESKTOP FONT SCALING
+   110% base font on desktop makes all rem-based sizing 10% larger:
+   - Buttons: 44px -> 48px (exceeds WCAG AAA 44px target)
+   - Text: More readable without zooming
+   - Touch targets: More accessible
+   Mobile stays at 100% (already optimized for touch).
+   -------------------------------------------------------------------------- */
+@media (min-width: 768px) {
+  html {
+    font-size: 110%;
+  }
+}

package/dist/tokens/spacing.d.ts

@@ -71,6 +71,7 @@ export declare const gapScale: {
         readonly group: "gap-3";
         readonly tight: "gap-4";
         readonly content: "gap-4";
+        readonly card: "gap-5";
         readonly standard: "gap-6";
         readonly section: "gap-6";
         readonly spacious: "gap-8";
@@ -114,6 +115,7 @@ export declare const gapMap: {
     readonly group: "gap-3";
     readonly tight: "gap-4";
     readonly content: "gap-4";
+    readonly card: "gap-5";
     readonly standard: "gap-6";
     readonly section: "gap-6";
     readonly spacious: "gap-8";

package/dist/tokens/spacing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/spacing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCV,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;CAiBjB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAC;AAC9C,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,cAAc,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CX,CAAC;AAEX,yCAAyC;AACzC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKT,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;AAC5D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,QAAQ,CAAC,OAAO,CAAC;AAC1D,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,QAAQ,CAAC,IAAI,CAAC;AACpD,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/spacing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCV,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;CAiBjB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAC;AAC9C,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,cAAc,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CX,CAAC;AAEX,yCAAyC;AACzC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKT,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;AAC5D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,QAAQ,CAAC,OAAO,CAAC;AAC1D,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,QAAQ,CAAC,IAAI,CAAC;AACpD,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/tokens/spacing.js

@@ -70,6 +70,7 @@ export const gapScale = {
         group: 'gap-3', // 12px - Between related elements
         tight: 'gap-4', // 16px - Tight grid/content spacing
         content: 'gap-4', // 16px - Default content spacing
+        card: 'gap-5', // 20px - Card internal spacing
         standard: 'gap-6', // 24px - Standard grid spacing
         section: 'gap-6', // 24px - Between sections
         spacious: 'gap-8', // 32px - Spacious grid items

package/dist/tokens/tokens.css

@@ -40,6 +40,7 @@
   --Text-Primary: var(--text-primary);
   --Text-Secondary: var(--text-secondary);
   --Text-Tartiary: var(--text-tertiary);
+  --Text-Tertiary: var(--text-tertiary);
   --Text-Head: var(--text-head);
   --Brand-Primary: var(--brand-primary);
   --Accent-Warning: var(--accent-warning);
@@ -49,7 +50,6 @@
   --Stroke-Secondary: var(--stroke-secondary);
 }
 
-[data-theme="dark"],
 .dark {
   --bg-primary: 220 20% 18%;
   --bg-secondary: 221 50% 10%;

package/dist/tokens/utilities.css

@@ -26,9 +26,9 @@
    * Common flex patterns for consistent layouts
    * ========================================================================== */
 
-  /* Horizontal flex with centered items */
+  /* Flex row with vertically centered items (base for flex-center-* variants) */
   .flex-center {
-    @apply flex items-center justify-center;
+    @apply flex items-center;
   }
 
   /* Inline flex centered */
@@ -350,4 +350,81 @@
   .desktop-flex {
     @apply hidden md:flex;
   }
+
+  /* ==========================================================================
+   * ANIMATION UTILITIES
+   * Shared animations used across multiple Micdrop apps
+   * ========================================================================== */
+
+  /* Shake animation - used in verify-phone and login flows */
+  .shake {
+    animation: shake 0.625s linear;
+  }
+
+  /* Skeleton loading - shimmer effect for loading placeholders */
+  .skeleton-loading {
+    animation: skeleton-shimmer 2.5s ease-in-out infinite;
+    background: linear-gradient(
+      90deg,
+      #e5e7eb 0%,
+      #e5e7eb 40%,
+      #f3f4f6 50%,
+      #e5e7eb 60%,
+      #e5e7eb 100%
+    );
+    background-size: 200% 100%;
+  }
+
+  .dark .skeleton-loading {
+    background: linear-gradient(
+      90deg,
+      #374151 0%,
+      #374151 40%,
+      #4b5563 50%,
+      #374151 60%,
+      #374151 100%
+    );
+    background-size: 200% 100%;
+  }
+}
+
+/* Animation keyframes - placed outside @layer for browser compatibility */
+@keyframes shake {
+  8%,
+  41% {
+    transform: translateX(-10px);
+  }
+  25%,
+  58% {
+    transform: translateX(10px);
+  }
+  75% {
+    transform: translateX(-5px);
+  }
+  92% {
+    transform: translateX(5px);
+  }
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
 }