@getmicdrop/svelte-components 5.17.4 → 5.19.0

package/dist/recipes/ImageUploader/ImageUploader.svelte.d.ts

@@ -63,6 +63,7 @@ declare const ImageUploader: import("svelte").Component<{
         fileTypes: string;
         uploadedAlt: string;
         closeModal: string;
+        emptyLabel: string;
     }>;
 }, {}, "images">;
 type ImageUploader = ReturnType<typeof ImageUploader>;

package/dist/recipes/ImageUploader/ImageUploader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/ImageUploader/ImageUploader.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,gCAAgC,CAAC;AACxC,OAAO,sEAAsE,CAAC;AAkuB9E,QAAA,MAAM,aAAa;IAtqBf,6CAA6C;aACpC,MAAM,GAAG,MAAM,EAAE;IAC1B,qDAAqD;gBACzC,MAAM;IAClB,2BAA2B;iBACd,OAAO;IACpB,wBAAwB;;IAExB,mDAAmD;oBACnC,OAAO;IACvB,wDAAwD;;IAExD,gEAAgE;;IAEhE,oDAAoD;oBACpC,OAAO;IACvB,uCAAuC;kBACzB,MAAM;IACpB,0BAA0B;oBACV,MAAM,EAAE;IACxB,6BAA6B;iBAChB,MAAM;IACnB,wEAAwE;sBACtD,MAAM;IACxB,uCAAuC;iBAC1B,MAAM;IACnB;;sEAEkE;eACvD,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI;IAC/D,qCAAqC;eAC1B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAClC,8DAA8D;gBAClD,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI;IACtC,oFAAoF;uBACjE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;IAC/D,4EAA4E;gBAChE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;IAC7C,2DAA2D;eAChD,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI;IACrC,wBAAwB;YAChB,MAAM;IACd,qBAAqB;eACV,OAAO;IAClB,+BAA+B;YACvB,MAAM;IACd,oCAAoC;aAC3B,OAAO;;;;;;;;;;MAAsB;gBAunBiB,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ImageUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/ImageUploader/ImageUploader.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,gCAAgC,CAAC;AACxC,OAAO,sEAAsE,CAAC;AAouB9E,QAAA,MAAM,aAAa;IAvqBf,6CAA6C;aACpC,MAAM,GAAG,MAAM,EAAE;IAC1B,qDAAqD;gBACzC,MAAM;IAClB,2BAA2B;iBACd,OAAO;IACpB,wBAAwB;;IAExB,mDAAmD;oBACnC,OAAO;IACvB,wDAAwD;;IAExD,gEAAgE;;IAEhE,oDAAoD;oBACpC,OAAO;IACvB,uCAAuC;kBACzB,MAAM;IACpB,0BAA0B;oBACV,MAAM,EAAE;IACxB,6BAA6B;iBAChB,MAAM;IACnB,wEAAwE;sBACtD,MAAM;IACxB,uCAAuC;iBAC1B,MAAM;IACnB;;sEAEkE;eACvD,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI;IAC/D,qCAAqC;eAC1B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAClC,8DAA8D;gBAClD,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI;IACtC,oFAAoF;uBACjE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;IAC/D,4EAA4E;gBAChE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;IAC7C,2DAA2D;eAChD,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI;IACrC,wBAAwB;YAChB,MAAM;IACd,qBAAqB;eACV,OAAO;IAClB,+BAA+B;YACvB,MAAM;IACd,oCAAoC;aAC3B,OAAO;;;;;;;;;;;MAAsB;gBAwnBiB,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/recipes/SuperLogin/SuperLogin.svelte

@@ -12,16 +12,27 @@
   import Checkbox from "../../primitives/Checkbox/Checkbox.svelte";
   import { typography } from '../../tokens/typography';
 
+  /** Escape HTML special characters to prevent XSS in {@html} blocks. */
+  function escapeHtml(str) {
+    if (!str) return '';
+    return String(str)
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
   /**
    * Default labels for all user-visible strings in SuperLogin.
    * Consumers can override any string via the `labels` prop.
    */
   const defaultLabels = {
     // Login view
-    welcomeTitle: (name) => name ? `Welcome, ${name}!` : 'Welcome!',
-    signInDescription: (portal) => `Sign in to access your ${portal}.`,
-    welcomeBackTitle: (name) => `Welcome back, ${name}`,
-    notYouButton: (name) => `Not ${name}?`,
+    welcomeTitle: (name) => name ? `Welcome, ${escapeHtml(name)}!` : 'Welcome!',
+    signInDescription: (portal) => `Sign in to access your ${escapeHtml(portal)}.`,
+    welcomeBackTitle: (name) => `Welcome back, ${escapeHtml(name)}`,
+    notYouButton: (name) => `Not ${escapeHtml(name)}?`,
     logInTitle: 'Log in',
     emailLabel: 'Email',
     passwordLabel: 'Password',
@@ -33,12 +44,12 @@
 
     // Account selection view
     selectAccountTitle: 'Select account',
-    multipleAccountsDescription: (email) => `You have multiple accounts associated with ${email}. Select one to continue.`,
+    multipleAccountsDescription: (email) => `You have multiple accounts associated with <span class="${typography.sm}">${escapeHtml(email)}</span>. Select one to continue.`,
     loginDifferentEmail: 'Log in with a different email',
     performerFallback: 'Performer',
 
     // Setup view
-    setupTitle: (name) => name ? `Welcome, ${name}` : 'Set up your account',
+    setupTitle: (name) => name ? `Welcome, ${escapeHtml(name)}` : 'Set up your account',
     setupDescription: 'Create a password to finish setting up your account.',
     createPasswordLabel: 'Create password',
     completeSetupButton: 'Complete setup',
@@ -58,10 +69,10 @@
 
     // Success view
     checkEmailTitle: 'Check your email',
-    resentMessage: (type, email) => `We've resent ${type === 'reset' ? 'password reset instructions' : 'a login link'} to ${email} if it is an email on file.`,
+    resentMessage: (type, email) => `We've resent ${type === 'reset' ? 'password reset instructions' : 'a login link'} to <span class="${typography.sm}">${escapeHtml(email)}</span> if it is an email on file.`,
     resentFollowUp: 'Please check again. If you still haven\'t received an email,',
     tryDifferentEmail: 'try a different email',
-    successMessage: (type, email) => `Thanks! If ${email} matches an email we have on file, then we've sent you an email containing further instructions for ${type === 'reset' ? 'resetting your password' : 'signing in'}.`,
+    successMessage: (type, email) => `Thanks! If <span class="${typography.sm}">${escapeHtml(email)}</span> matches an email we have on file, then we've sent you an email containing further instructions for ${type === 'reset' ? 'resetting your password' : 'signing in'}.`,
     noEmailReceived: 'If you haven\'t received an email in 5 minutes, check your spam,',
     resend: 'resend',
     returnToSignIn: 'Return to sign in',
@@ -859,11 +870,8 @@
                 {labels.selectAccountTitle}
               </h2>
               <p class={typography.smMuted}>
-                {#if true}
-                  {@const message = typeof labels.multipleAccountsDescription === 'function' ? labels.multipleAccountsDescription(email) : labels.multipleAccountsDescription}
-                  {@const parts = message.split(email)}
-                  {parts[0]}<span class={typography.sm}>{email}</span>{parts[1] || ''}
-                {/if}
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -- labels use escapeHtml() for XSS safety -->
+                {@html typeof labels.multipleAccountsDescription === 'function' ? labels.multipleAccountsDescription(email) : labels.multipleAccountsDescription}
               </p>
             </div>
 
@@ -1158,11 +1166,8 @@
               </h2>
               {#if isResendSuccess}
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
-                  {#if true}
-                    {@const message = typeof labels.resentMessage === 'function' ? labels.resentMessage(successType, successEmail) : labels.resentMessage}
-                    {@const parts = message.split(successEmail)}
-                    {parts[0]}<span class={typography.sm}>{successEmail}</span>{parts[1] || ''}
-                  {/if}
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -- labels use escapeHtml() for XSS safety -->
+                  {@html typeof labels.resentMessage === 'function' ? labels.resentMessage(successType, successEmail) : labels.resentMessage}
                 </p>
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
                   {labels.resentFollowUp} <Button
@@ -1172,11 +1177,8 @@
                 </p>
               {:else}
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
-                  {#if true}
-                    {@const message = typeof labels.successMessage === 'function' ? labels.successMessage(successType, successEmail) : labels.successMessage}
-                    {@const parts = message.split(successEmail)}
-                    {parts[0]}<span class={typography.sm}>{successEmail}</span>{parts[1] || ''}
-                  {/if}
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -- labels use escapeHtml() for XSS safety -->
+                  {@html typeof labels.successMessage === 'function' ? labels.successMessage(successType, successEmail) : labels.successMessage}
                 </p>
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
                   {labels.noEmailReceived} <Button variant="link" onclick={handleResend}>{labels.resend}</Button>, or

package/dist/recipes/SuperLogin/SuperLogin.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SuperLogin.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/SuperLogin/SuperLogin.svelte.js"],"names":[],"mappings":";;;;;AAgjCA;iBAz7BkC,MAAM;cAAY,MAAM;cAAY,MAAM;kBAAgB,MAAM;kBAAgB,OAAO;gBAAc,MAAM;gBAAc,MAAM;iBAAe,MAAM;0BAAwB,MAAM;wBAAsB,MAAM;aAAW,MAAM;;;;;yBAAoI,OAAO;mBAAiB,MAAM;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAy7BxY;wBAz7BtC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,eAAe,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,kBAAkB,CAAC,WAAW;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}
+{"version":3,"file":"SuperLogin.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/SuperLogin/SuperLogin.svelte.js"],"names":[],"mappings":";;;;;AAkjCA;iBAh7BkC,MAAM;cAAY,MAAM;cAAY,MAAM;kBAAgB,MAAM;kBAAgB,OAAO;gBAAc,MAAM;gBAAc,MAAM;iBAAe,MAAM;0BAAwB,MAAM;wBAAsB,MAAM;aAAW,MAAM;;;;;yBAAoI,OAAO;mBAAiB,MAAM;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAg7BxY;wBAh7BtC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,eAAe,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,kBAAkB,CAAC,WAAW;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}

package/dist/recipes/Toaster/Toaster.stories.svelte

@@ -1,62 +1,62 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import { Toaster } from "svelte-sonner";
-  import { showToast } from "../../stores/toaster";
-
-  const { Story } = defineMeta({
-    title: "Components/Toaster",
-  });
-
-  function showSuccessToast() {
-    showToast("Action completed successfully!", "success");
-  }
-
-  function showErrorToast() {
-    showToast("An error occurred. Please try again.", "error");
-  }
-</script>
-
-<Story name="Trigger Success Toast">
-  <div class="p-8">
-    <Toaster
-      position="bottom-right"
-      toastOptions={{
-        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
-        classes: {
-          error: "text-red-600 dark:text-red-400",
-          success: "text-green-600 dark:text-green-400",
-        },
-      }}
-    />
-    <button
-      onclick={showSuccessToast}
-      class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
-    >
-      Show Success Toast
-    </button>
-    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see a success toast notification</p>
-  </div>
-</Story>
-
-<Story name="Trigger Error Toast">
-  <div class="p-8">
-    <Toaster
-      position="bottom-right"
-      toastOptions={{
-        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
-        classes: {
-          error: "text-red-600 dark:text-red-400",
-          success: "text-green-600 dark:text-green-400",
-        },
-      }}
-    />
-    <button
-      onclick={showErrorToast}
-      class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
-    >
-      Show Error Toast
-    </button>
-    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see an error toast notification</p>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import { Toaster } from "svelte-sonner";
+  import { showToast } from "../../stores/toaster";
+
+  const { Story } = defineMeta({
+    title: "Components/Toaster",
+  });
+
+  function showSuccessToast() {
+    showToast("Action completed successfully!", "success");
+  }
+
+  function showErrorToast() {
+    showToast("An error occurred. Please try again.", "error");
+  }
+</script>
+
+<Story name="Trigger Success Toast">
+  <div class="p-8">
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
+        classes: {
+          error: "text-red-600 dark:text-red-400",
+          success: "text-green-600 dark:text-green-400",
+        },
+      }}
+    />
+    <button
+      onclick={showSuccessToast}
+      class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
+    >
+      Show Success Toast
+    </button>
+    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see a success toast notification</p>
+  </div>
+</Story>
+
+<Story name="Trigger Error Toast">
+  <div class="p-8">
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
+        classes: {
+          error: "text-red-600 dark:text-red-400",
+          success: "text-green-600 dark:text-green-400",
+        },
+      }}
+    />
+    <button
+      onclick={showErrorToast}
+      class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
+    >
+      Show Error Toast
+    </button>
+    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see an error toast notification</p>
+  </div>
+</Story>

package/dist/recipes/feedback/EmptyState/EmptyState.svelte

@@ -1,66 +1,75 @@
-<script lang="ts">
-  import type { Component, Snippet } from 'svelte';
-  import { typography } from '../../../tokens/typography';
-
-  interface Props {
-    /** Title text (alias for message) */
-    title?: string;
-    /** Main message to display */
-    message?: string;
-    /** Description text (alias for subtext) */
-    description?: string;
-    /** Secondary descriptive text */
-    subtext?: string;
-    /** Icon component (when iconType='component') */
-    icon?: Component<any> | null;
-    /** Image path (when iconType='image') */
-    imageSrc?: string;
-    /** Type of icon provided */
-    iconType?: 'component' | 'image';
-    /** Size classes for the icon */
-    iconSize?: string;
-    /** Additional CSS classes */
-    class?: string;
-    /** Optional action content (buttons, links, etc.) */
-    children?: Snippet;
-  }
-
-  let {
-    title = '',
-    message = '',
-    description = '',
-    subtext = '',
-    icon = null,
-    imageSrc = '',
-    iconType = 'component',
-    iconSize = 'w-20 h-20',
-    class: className = '',
-    children
-  }: Props = $props();
-  
-  // Support both naming conventions
-  let displayTitle = $derived(title || message || 'No results found');
-  let displaySubtext = $derived(description || subtext);
-</script>
-
-<div class="flex flex-col items-center justify-center px-6 py-10 text-center {className}">
-  {#if icon || imageSrc}
-    {#if iconType === 'component' && icon}
-      {@const IconComponent = icon}
-      <IconComponent class="mb-3 text-gray-400 dark:text-gray-500 {iconSize}" />
-    {:else if iconType === 'image' && imageSrc}
-      <img src={imageSrc} alt="" class="mb-3 {iconSize}" />
-    {/if}
-  {/if}
-
-  <h3 class={typography.h3}>{displayTitle}</h3>
-  {#if displaySubtext}
-    <p class={`${typography.smMuted} mt-1`}>{displaySubtext}</p>
-  {/if}
-  
-  {#if children}
-    <div class="mt-4">
-      {@render children()}
-    </div>
-  {/if}
-</div>
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+  import { typography } from '../../../tokens/typography';
+
+  const defaultLabels = {
+    noResultsFound: 'No results found',
+  };
+
+  interface Props {
+    /** Title text (alias for message) */
+    title?: string;
+    /** Main message to display */
+    message?: string;
+    /** Description text (alias for subtext) */
+    description?: string;
+    /** Secondary descriptive text */
+    subtext?: string;
+    /** Icon component (when iconType='component') */
+    icon?: Component<any> | null;
+    /** Image path (when iconType='image') */
+    imageSrc?: string;
+    /** Type of icon provided */
+    iconType?: 'component' | 'image';
+    /** Size classes for the icon */
+    iconSize?: string;
+    /** Additional CSS classes */
+    class?: string;
+    /** Optional action content (buttons, links, etc.) */
+    children?: Snippet;
+    /** Override user-visible strings */
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  let {
+    title = '',
+    message = '',
+    description = '',
+    subtext = '',
+    icon = null,
+    imageSrc = '',
+    iconType = 'component',
+    iconSize = 'w-20 h-20',
+    class: className = '',
+    children,
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  // Support both naming conventions
+  let displayTitle = $derived(title || message || labels.noResultsFound);
+  let displaySubtext = $derived(description || subtext);
+</script>
+
+<div class="flex flex-col items-center justify-center px-6 py-10 text-center {className}">
+  {#if icon || imageSrc}
+    {#if iconType === 'component' && icon}
+      {@const IconComponent = icon}
+      <IconComponent class="mb-3 text-gray-400 dark:text-gray-500 {iconSize}" />
+    {:else if iconType === 'image' && imageSrc}
+      <img src={imageSrc} alt="" class="mb-3 {iconSize}" />
+    {/if}
+  {/if}
+
+  <h3 class={typography.h3}>{displayTitle}</h3>
+  {#if displaySubtext}
+    <p class={`${typography.smMuted} mt-1`}>{displaySubtext}</p>
+  {/if}
+  
+  {#if children}
+    <div class="mt-4">
+      {@render children()}
+    </div>
+  {/if}
+</div>

package/dist/recipes/feedback/EmptyState/EmptyState.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Component, Snippet } from 'svelte';
-interface Props {
+declare const EmptyState: Component<{
     /** Title text (alias for message) */
     title?: string;
     /** Main message to display */
@@ -13,15 +13,18 @@ interface Props {
     /** Image path (when iconType='image') */
     imageSrc?: string;
     /** Type of icon provided */
-    iconType?: 'component' | 'image';
+    iconType?: "component" | "image";
     /** Size classes for the icon */
     iconSize?: string;
     /** Additional CSS classes */
     class?: string;
     /** Optional action content (buttons, links, etc.) */
     children?: Snippet;
-}
-declare const EmptyState: Component<Props, {}, "">;
+    /** Override user-visible strings */
+    labels?: Partial<{
+        noResultsFound: string;
+    }>;
+}, {}, "">;
 type EmptyState = ReturnType<typeof EmptyState>;
 export default EmptyState;
 //# sourceMappingURL=EmptyState.svelte.d.ts.map

package/dist/recipes/feedback/EmptyState/EmptyState.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/feedback/EmptyState/EmptyState.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAI/C,UAAU,KAAK;IACb,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACjC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgDH,QAAA,MAAM,UAAU,0BAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"EmptyState.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/feedback/EmptyState/EmptyState.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAiFjD,QAAA,MAAM,UAAU;IArEZ,qCAAqC;YAC7B,MAAM;IACd,8BAA8B;cACpB,MAAM;IAChB,2CAA2C;kBAC7B,MAAM;IACpB,iCAAiC;cACvB,MAAM;IAChB,iDAAiD;WAC1C,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI;IAC5B,yCAAyC;eAC9B,MAAM;IACjB,4BAA4B;eACjB,WAAW,GAAG,OAAO;IAChC,gCAAgC;eACrB,MAAM;IACjB,6BAA6B;YACrB,MAAM;IACd,qDAAqD;eAC1C,OAAO;IAClB,oCAAoC;aAC3B,OAAO;;MAAsB;UAgDc,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/recipes/feedback/ErrorDisplay.spec.js

@@ -1,69 +1,69 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import ErrorDisplay from "./ErrorDisplay.svelte";
-
-describe("ErrorDisplay Component Tests", () => {
-  test("Shows error message when error and show are true", () => {
-    render(ErrorDisplay, { props: { error: "Invalid input", show: true } });
-    expect(screen.getByText("Invalid input")).toBeInTheDocument();
-  });
-
-  test("Does not show when error is empty", () => {
-    render(ErrorDisplay, { props: { error: "", show: true } });
-    expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
-  });
-
-  test("Does not show when show is false", () => {
-    render(ErrorDisplay, { props: { error: "Error message", show: false } });
-    expect(screen.queryByText("Error message")).not.toBeInTheDocument();
-  });
-
-  test("Has error text color", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const icon = container.querySelector("svg");
-    expect(icon).toHaveClass("text-red-600");
-  });
-
-  test("Has shake class when shake is true", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, shake: true },
-    });
-    const wrapper = container.querySelector("div.flex");
-    expect(wrapper).toHaveClass("animate-shake");
-  });
-
-  test("Does not have shake class when shake is false", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, shake: false },
-    });
-    const wrapper = container.querySelector("div.flex");
-    expect(wrapper).not.toHaveClass("animate-shake");
-  });
-
-  test("Contains icon element", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Has flex layout", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const wrapper = container.querySelector("div.flex");
-    expect(wrapper).toHaveClass("flex");
-    expect(wrapper).toHaveClass("items-center");
-  });
-
-  test("Applies custom className", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, className: "mt-2" },
-    });
-    const wrapper = container.querySelector("div.flex");
-    expect(wrapper).toHaveClass("mt-2");
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import ErrorDisplay from "./ErrorDisplay.svelte";
+
+describe("ErrorDisplay Component Tests", () => {
+  test("Shows error message when error and show are true", () => {
+    render(ErrorDisplay, { props: { error: "Invalid input", show: true } });
+    expect(screen.getByText("Invalid input")).toBeInTheDocument();
+  });
+
+  test("Does not show when error is empty", () => {
+    render(ErrorDisplay, { props: { error: "", show: true } });
+    expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
+  });
+
+  test("Does not show when show is false", () => {
+    render(ErrorDisplay, { props: { error: "Error message", show: false } });
+    expect(screen.queryByText("Error message")).not.toBeInTheDocument();
+  });
+
+  test("Has error text color", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const icon = container.querySelector("svg");
+    expect(icon).toHaveClass("text-red-600");
+  });
+
+  test("Has shake class when shake is true", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: true },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).toHaveClass("animate-shake");
+  });
+
+  test("Does not have shake class when shake is false", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: false },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).not.toHaveClass("animate-shake");
+  });
+
+  test("Contains icon element", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Has flex layout", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).toHaveClass("flex");
+    expect(wrapper).toHaveClass("items-center");
+  });
+
+  test("Applies custom className", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, className: "mt-2" },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).toHaveClass("mt-2");
+  });
+});