@svadmin/lite 0.16.11 → 0.22.0

package/dist/components/LiteTour.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  interface TourStep {
+    title: string;
+    description?: string;
+    href?: string;
+  }
+
+  interface Props {
+    steps: TourStep[];
+    title?: string;
+    current?: number;
+    dismissHref?: string;
+    label?: string;
+  }
+
+  let { steps, title = 'Guided tour', current = 0, dismissHref, label = 'Guided tour' }: Props = $props();
+</script>
+
+<section class="lite-tour lite-card" aria-label={label}>
+  <header>
+    <h2>{title}</h2>
+    {#if dismissHref}<a href={dismissHref} aria-label="Dismiss tour">×</a>{/if}
+  </header>
+  <ol>
+    {#each steps as step, index (step.title)}
+      <li data-active={index === current || undefined}>
+        <span>{index + 1}</span>
+        <div>
+          <strong>{step.title}</strong>
+          {#if step.description}<p>{step.description}</p>{/if}
+          {#if step.href}<a href={step.href}>View step</a>{/if}
+        </div>
+      </li>
+    {/each}
+  </ol>
+</section>
+
+<style>
+  .lite-tour { display: block; }
+  .lite-tour header { display: flex; align-items: baseline; justify-content: space-between; }
+  .lite-tour h2 { margin: 0; color: #1D2129; font-size: 14px; }
+  .lite-tour header a { color: #4E5969; font-size: 20px; line-height: 1; text-decoration: none; }
+  .lite-tour ol { display: block; margin: 0; padding: 0; list-style: none; }
+  .lite-tour li { display: flex; padding: 8px; border: 1px solid #F2F3F5; border-radius: 6px; }
+  .lite-tour li[data-active] { border-color: #165DFF; background: #F7F8FA; }
+  .lite-tour li > span { display: inline-grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #E8F3FF; color: #165DFF; font-size: 12px; font-weight: 600; }
+  .lite-tour li strong { color: #1D2129; font-size: 13px; }
+  .lite-tour li p { margin: 2px 0 0; color: #4E5969; font-size: 12px; line-height: 1.5; }
+  .lite-tour li a { color: #165DFF; font-size: 12px; }
+
+  .lite-tour > * + * { margin-top: 12px; }
+  .lite-tour li + li { margin-top: 8px; }
+  .lite-tour li > span { margin-right: 10px; }
+</style>

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

@@ -0,0 +1,15 @@
+interface TourStep {
+    title: string;
+    description?: string;
+    href?: string;
+}
+interface Props {
+    steps: TourStep[];
+    title?: string;
+    current?: number;
+    dismissHref?: string;
+    label?: string;
+}
+declare const LiteTour: import("svelte").Component<Props, {}, "">;
+type LiteTour = ReturnType<typeof LiteTour>;
+export default LiteTour;

package/dist/components/LiteTransfer.svelte

@@ -16,6 +16,8 @@
     disabled?: boolean;
     label?: string;
     description?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -26,6 +28,7 @@
     disabled = false,
     label,
     description,
+    class: className = ''
   }: Props = $props();
 
   const targetKeySet = $derived(new Set(targetKeys.map(String)));
@@ -33,7 +36,7 @@
   const targetItems = $derived(dataSource.filter((item) => targetKeySet.has(String(item.key))));
 </script>
 
-<div class="lite-transfer-container lite-form-group">
+<div class="lite-transfer-container lite-form-group {className}">
   {#if label}
     <span class="lite-label">{label}</span>
   {/if}
@@ -129,7 +132,7 @@
   }
   .lite-transfer-panel {
     flex: 1;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     background: #ffffff;
     min-height: 180px;
@@ -142,8 +145,8 @@
     justify-content: space-between;
     align-items: center;
     padding: 8px 12px;
-    background: #f8fafc;
-    border-bottom: 1px solid #e2e8f0;
+    background: #F7F8FA;
+    border-bottom: 1px solid #E5E6EB;
     font-size: 13px;
   }
   .lite-transfer-body {
@@ -160,7 +163,7 @@
     font-size: 13px;
   }
   .lite-transfer-item:hover {
-    background: #f1f5f9;
+    background: #F2F3F5;
   }
   .lite-transfer-item input {
     margin-right: 8px;
@@ -179,7 +182,7 @@
   .lite-transfer-empty {
     text-align: center;
     padding: 30px 10px;
-    color: #94a3b8;
+    color: #86909C;
     font-size: 12px;
   }
 </style>

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

@@ -12,6 +12,8 @@ interface Props {
     disabled?: boolean;
     label?: string;
     description?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteTransfer: import("svelte").Component<Props, {}, "">;
 type LiteTransfer = ReturnType<typeof LiteTransfer>;

package/dist/components/LiteTree.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface TreeNode {
+    id: string;
+    label: string;
+    href?: string;
+    disabled?: boolean;
+    children?: TreeNode[];
+  }
+
+  interface Props {
+    nodes: TreeNode[];
+    label?: string;
+    selected?: string;
+    children?: Snippet<[TreeNode]>;
+  }
+
+  let { nodes, label = 'Tree', selected, children }: Props = $props();
+</script>
+
+{#snippet branch(items: TreeNode[], depth: number)}
+  <ul class="lite-tree__list" role={depth === 0 ? 'tree' : 'group'} aria-label={depth === 0 ? label : undefined}>
+    {#each items as node (node.id)}
+      <li role="treeitem" aria-selected={selected === node.id} aria-disabled={node.disabled || undefined}>
+        {#if node.href && !node.disabled}
+          <a href={node.href} class:active={selected === node.id}>{node.label}</a>
+        {:else}
+          <span class:active={selected === node.id}>{node.label}</span>
+        {/if}
+        {#if node.children?.length}{@render branch(node.children, depth + 1)}{/if}
+        {#if children}{@render children(node)}{/if}
+      </li>
+    {/each}
+  </ul>
+{/snippet}
+
+<nav class="lite-tree" aria-label={label}>
+  {@render branch(nodes, 0)}
+</nav>
+
+<style>
+  .lite-tree__list { margin: 0; padding-left: 16px; list-style: none; }
+  .lite-tree > .lite-tree__list { padding-left: 0; }
+  .lite-tree__list li { padding: 2px 0; color: #1D2129; font-size: 13px; }
+  .lite-tree__list a, .lite-tree__list span { display: inline-block; padding: 4px 8px; border-radius: 4px; color: #1D2129; text-decoration: none; }
+  .lite-tree__list a:hover, .lite-tree__list .active { background: #E8F3FF; color: #165DFF; }
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+interface TreeNode {
+    id: string;
+    label: string;
+    href?: string;
+    disabled?: boolean;
+    children?: TreeNode[];
+}
+interface Props {
+    nodes: TreeNode[];
+    label?: string;
+    selected?: string;
+    children?: Snippet<[TreeNode]>;
+}
+declare const LiteTree: import("svelte").Component<Props, {}, "">;
+type LiteTree = ReturnType<typeof LiteTree>;
+export default LiteTree;

package/dist/components/LiteTreeTable.svelte

@@ -69,7 +69,7 @@
         </tr>
       {:else}
         <tr>
-          <td colspan={columns.length} style="text-align: center; color: #94a3b8; padding: 24px;">
+          <td colspan={columns.length} style="text-align: center; color: #86909C; padding: 24px;">
             No tree data
           </td>
         </tr>

package/dist/components/LiteTwoFactorStepper.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { HTMLFormAttributes } from 'svelte/elements';
+  import LiteSteps from './LiteSteps.svelte';
+  import LiteOtpInput from './LiteOtpInput.svelte';
+
+  interface Props {
+    current?: number;
+    /** Step labels; mirrors the reference `steps` prop. */
+    steps?: string[];
+    action: string;
+    method?: HTMLFormAttributes['method'];
+    codeName?: string;
+    submitLabel?: string;
+    title?: string;
+    /** Applied to the step list, matching the reference component. */
+    class?: string;
+  }
+
+  let {
+    current = 1,
+    steps = ['Password verified', 'Enter verification code', 'Access granted'],
+    action,
+    method = 'POST',
+    codeName = 'code',
+    submitLabel = 'Verify',
+    title = 'Two-factor authentication',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<section class="lite-card lite-two-factor" aria-label={title}>
+  <h2>{title}</h2>
+  <LiteSteps
+    current={current}
+    label="Progress"
+    class={className}
+    items={steps.map((step) => ({ title: step }))}
+  />
+  <form {method} {action} class="lite-two-factor__form">
+    <LiteOtpInput name={codeName} />
+    <button class="lite-btn lite-btn-primary" type="submit">{submitLabel}</button>
+  </form>
+  <p class="lite-muted">Recovery codes can be used once if the authenticator is unavailable.</p>
+</section>
+
+<style>
+  .lite-two-factor { display: block; }
+  .lite-two-factor h2 { margin: 0; color: #1D2129; font-size: 18px; }
+  .lite-two-factor__form { display: block; justify-items: start; }
+
+  .lite-two-factor > * + * { margin-top: 16px; }
+  .lite-two-factor__form > * + * { margin-top: 12px; }
+</style>

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

@@ -0,0 +1,16 @@
+import type { HTMLFormAttributes } from 'svelte/elements';
+interface Props {
+    current?: number;
+    /** Step labels; mirrors the reference `steps` prop. */
+    steps?: string[];
+    action: string;
+    method?: HTMLFormAttributes['method'];
+    codeName?: string;
+    submitLabel?: string;
+    title?: string;
+    /** Applied to the step list, matching the reference component. */
+    class?: string;
+}
+declare const LiteTwoFactorStepper: import("svelte").Component<Props, {}, "">;
+type LiteTwoFactorStepper = ReturnType<typeof LiteTwoFactorStepper>;
+export default LiteTwoFactorStepper;

package/dist/components/LiteVersionDiffViewer.svelte

@@ -5,6 +5,8 @@
     oldTitle?: string;
     newTitle?: string;
     fieldLabels?: Record<string, string>;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -13,6 +15,7 @@
     oldTitle = 'Previous Version',
     newTitle = 'Current Version',
     fieldLabels = {},
+    class: className = '',
   }: Props = $props();
 
   const allKeys = $derived(
@@ -35,7 +38,7 @@
   }
 </script>
 
-<div class="lite-diff-viewer">
+<div class="lite-diff-viewer {className}">
   <div class="lite-diff-header">
     <strong>Record Comparison</strong>
   </div>
@@ -55,7 +58,7 @@
           <td>
             <strong>{fieldLabels[key] || key}</strong>
             {#if status !== 'unchanged'}
-              <span class="lite-badge lite-badge-{status}">[{status.toUpperCase()}]</span>
+              <span class="lite-badge lite-badge-{status}">[{status}]</span>
             {/if}
           </td>
           <td class="lite-diff-old">
@@ -83,14 +86,14 @@
 <style>
   .lite-diff-viewer {
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     margin-bottom: 16px;
   }
   .lite-diff-header {
     padding: 10px 12px;
-    background: #f8fafc;
-    border-bottom: 1px solid #e2e8f0;
+    background: #F7F8FA;
+    border-bottom: 1px solid #E5E6EB;
     font-size: 13px;
   }
   .lite-diff-table {
@@ -99,31 +102,31 @@
     font-size: 12px;
   }
   .lite-diff-table th {
-    background: #f1f5f9;
+    background: #F2F3F5;
     padding: 8px 12px;
     text-align: left;
   }
   .lite-diff-table td {
     padding: 8px 12px;
-    border-top: 1px solid #e2e8f0;
+    border-top: 1px solid #E5E6EB;
   }
   .lite-diff-added {
-    background: #ecfdf5;
+    background: #E8FFEA;
   }
   .lite-diff-removed {
-    background: #fef2f2;
+    background: #FFECE8;
   }
   .lite-diff-modified {
-    background: #fffbeb;
+    background: #FFF7E8;
   }
   .lite-diff-old del {
-    color: #ef4444;
+    color: #F53F3F;
   }
   .lite-diff-new ins {
-    color: #10b981;
+    color: #00B42A;
     text-decoration: none;
   }
   .lite-diff-new strong {
-    color: #f59e0b;
+    color: #FF7D00;
   }
 </style>

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

@@ -4,6 +4,8 @@ interface Props {
     oldTitle?: string;
     newTitle?: string;
     fieldLabels?: Record<string, string>;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteVersionDiffViewer: import("svelte").Component<Props, {}, "">;
 type LiteVersionDiffViewer = ReturnType<typeof LiteVersionDiffViewer>;

package/dist/components/LiteVideoPlayer.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  interface VideoTrack {
+    src: string;
+    kind: 'subtitles' | 'captions' | 'chapters' | 'metadata' | 'descriptions';
+    label?: string;
+    language?: string;
+    default?: boolean;
+  }
+
+  interface Props {
+    src: string;
+    poster?: string;
+    title?: string;
+    media?: 'video' | 'audio';
+    autoplay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsinline?: boolean;
+    tracks?: VideoTrack[];
+    downloadLabel?: string;
+  }
+
+  let {
+    src,
+    poster,
+    title,
+    media = 'video',
+    autoplay = false,
+    muted = false,
+    loop = false,
+    playsinline = true,
+    tracks = [],
+    downloadLabel = 'Download media',
+  }: Props = $props();
+</script>
+
+<figure class="lite-video-player">
+  {#if title}<figcaption class="lite-video-player__title">{title}</figcaption>{/if}
+  {#if media === 'audio'}
+    <audio controls preload="metadata" {autoplay} {muted} {loop} aria-label={title ?? 'Audio player'}>
+      <source {src} />
+      {#each tracks as track (track.src)}
+        <track src={track.src} kind={track.kind} label={track.label} srclang={track.language} default={track.default} />
+      {/each}
+      <a href={src}>{downloadLabel}</a>
+    </audio>
+  {:else}
+    <video controls preload="metadata" {poster} {autoplay} {muted} {loop} {playsinline} aria-label={title ?? 'Video player'}>
+      <source {src} />
+      {#each tracks as track (track.src)}
+        <track src={track.src} kind={track.kind} label={track.label} srclang={track.language} default={track.default} />
+      {/each}
+      <a href={src}>{downloadLabel}</a>
+    </video>
+  {/if}
+  <a class="lite-video-player__download" href={src} download>{downloadLabel}</a>
+</figure>
+
+<style>
+  .lite-video-player { display: block; margin: 0; padding: 12px; border: 1px solid #E5E6EB; border-radius: 8px; background: #fff; }
+  .lite-video-player__title { color: #1D2129; font-size: 14px; font-weight: 600; }
+  .lite-video-player video { display: block; width: 100%; max-height: 70vh; background: #000; }
+  .lite-video-player audio { display: block; width: 100%; }
+  .lite-video-player__download { justify-self: start; color: #165DFF; font-size: 12px; }
+
+  .lite-video-player > * + * { margin-top: 8px; }
+</style>

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

@@ -0,0 +1,22 @@
+interface VideoTrack {
+    src: string;
+    kind: 'subtitles' | 'captions' | 'chapters' | 'metadata' | 'descriptions';
+    label?: string;
+    language?: string;
+    default?: boolean;
+}
+interface Props {
+    src: string;
+    poster?: string;
+    title?: string;
+    media?: 'video' | 'audio';
+    autoplay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsinline?: boolean;
+    tracks?: VideoTrack[];
+    downloadLabel?: string;
+}
+declare const LiteVideoPlayer: import("svelte").Component<Props, {}, "">;
+type LiteVideoPlayer = ReturnType<typeof LiteVideoPlayer>;
+export default LiteVideoPlayer;

package/dist/components/LiteVirtualTable.svelte

@@ -42,7 +42,7 @@
       {/each}
       {#if items.length === 0}
         <tr>
-          <td colspan={columns.length} style="text-align: center; color: #94a3b8; padding: 24px;">
+          <td colspan={columns.length} style="text-align: center; color: #86909C; padding: 24px;">
             No records to display
           </td>
         </tr>

package/dist/components/advanced/LiteAutoSaveIndicator.svelte

@@ -1,26 +1,55 @@
 <script lang="ts">
   /**
-   * SSR AutoSaveIndicator — Degraded to a static status label.
-   * Without JS, there is no auto-save. This component simply renders
-   * the last known save status passed from the server.
+   * SSR AutoSaveIndicator — renders the last known save state passed from the
+   * server. There is no auto-save loop without JS, but the state machine itself
+   * (idle / loading / success / error) is fully expressible in server HTML.
    */
+  type SaveStatus = 'idle' | 'loading' | 'success' | 'error';
+
   interface Props {
-    status?: 'idle' | 'saved' | 'error';
+    status?: SaveStatus | 'saved';
+    /** Error detail, exposed as the accessible title on the error label. */
+    error?: string;
+    /** Overrides the built-in label for the current status. */
     message?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { status = 'idle', message }: Props = $props();
+  let { status = 'idle', error, message, class: className = '' }: Props = $props();
+
+  // `saved` was the old spelling of `success`; keep it working.
+  const normalized = $derived<SaveStatus>(status === 'saved' ? 'success' : status);
 
-  const statusConfig: Record<NonNullable<Props['status']>, { icon: string; color: string; text: string }> = {
-    idle: { icon: '☁', color: '#64748b', text: 'All changes saved' },
-    saved: { icon: '✓', color: '#10b981', text: 'Saved' },
-    error: { icon: '✕', color: '#ef4444', text: 'Save failed' },
+  const statusConfig: Record<SaveStatus, { icon: string; tone: string; text: string; label: string }> = {
+    idle: { icon: '☁', tone: 'idle', text: 'All changes saved', label: 'All changes saved' },
+    loading: { icon: '◌', tone: 'loading', text: 'Saving…', label: 'Saving' },
+    success: { icon: '✓', tone: 'success', text: 'Saved', label: 'Saved' },
+    error: { icon: '✕', tone: 'error', text: 'Save failed', label: 'Save failed' },
   };
 
-  const cfg = $derived(statusConfig[status] ?? statusConfig['idle']);
+  const cfg = $derived(statusConfig[normalized] ?? statusConfig.idle);
 </script>
 
-<span class="lite-inline-sm" style="display: inline-flex; align-items: center; font-size: 13px; color: {cfg.color};">
-  <span>{cfg.icon}</span>
-  <span>{message ?? cfg.text}</span>
+<span
+  class={`lite-auto-save lite-auto-save--${cfg.tone} ${className}`.trim()}
+  role="status"
+  aria-live="polite"
+  aria-label={cfg.label}
+  title={normalized === 'error' ? error : undefined}
+>
+  <span aria-hidden="true">{cfg.icon}</span>
+  <span class="lite-auto-save__text">{message ?? cfg.text}</span>
+  {#if normalized === 'error' && error}
+    <span class="lite-auto-save__error">{error}</span>
+  {/if}
 </span>
+
+<style>
+  .lite-auto-save { display: inline-flex; align-items: center; font-size: 13px; color: #4E5969; }
+  .lite-auto-save > * + * { margin-left: 6px; }
+  .lite-auto-save--loading { color: #165DFF; }
+  .lite-auto-save--success { color: #00B42A; }
+  .lite-auto-save--error { color: #F53F3F; }
+  .lite-auto-save__error { color: #86909C; font-size: 12px; }
+</style>

package/dist/components/advanced/LiteAutoSaveIndicator.svelte.d.ts

@@ -1,11 +1,17 @@
 /**
- * SSR AutoSaveIndicator — Degraded to a static status label.
- * Without JS, there is no auto-save. This component simply renders
- * the last known save status passed from the server.
+ * SSR AutoSaveIndicator — renders the last known save state passed from the
+ * server. There is no auto-save loop without JS, but the state machine itself
+ * (idle / loading / success / error) is fully expressible in server HTML.
  */
+type SaveStatus = 'idle' | 'loading' | 'success' | 'error';
 interface Props {
-    status?: 'idle' | 'saved' | 'error';
+    status?: SaveStatus | 'saved';
+    /** Error detail, exposed as the accessible title on the error label. */
+    error?: string;
+    /** Overrides the built-in label for the current status. */
     message?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteAutoSaveIndicator: import("svelte").Component<Props, {}, "">;
 type LiteAutoSaveIndicator = ReturnType<typeof LiteAutoSaveIndicator>;

package/dist/components/advanced/LiteDraggableHeader.svelte

@@ -18,9 +18,9 @@
 
 <tr>
   {#each fields as field, _i (_i)}
-    <th style="padding: 10px 12px; text-align: left; font-weight: 600; font-size: 13px; color: #475569; white-space: nowrap;">
+    <th style="padding: 10px 12px; text-align: left; font-weight: 600; font-size: 13px; color: #4E5969; white-space: nowrap;">
       {#if currentSort === field.key}
-        <a href="?sort={field.key}&order={currentOrder === 'asc' ? 'desc' : 'asc'}" style="color: #0f172a; text-decoration: none;">
+        <a href="?sort={field.key}&order={currentOrder === 'asc' ? 'desc' : 'asc'}" style="color: #1D2129; text-decoration: none;">
           {field.label} {currentOrder === 'asc' ? '↑' : '↓'}
         </a>
       {:else}

package/dist/components/advanced/LiteDrawerForm.svelte

@@ -13,6 +13,8 @@
     recordId?: string | number;
     basePath?: string;
     label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -21,6 +23,7 @@
     recordId,
     basePath = '/lite',
     label,
+    class: className = '',
   }: Props = $props();
 
   const href = $derived(
@@ -37,6 +40,6 @@
   );
 </script>
 
-<a href={href} class="lite-btn lite-btn-outline">
+<a href={href} class="lite-btn lite-btn-outline {className}">
   {buttonLabel}
 </a>

package/dist/components/advanced/LiteDrawerForm.svelte.d.ts

@@ -10,6 +10,8 @@ interface Props {
     recordId?: string | number;
     basePath?: string;
     label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteDrawerForm: import("svelte").Component<Props, {}, "">;
 type LiteDrawerForm = ReturnType<typeof LiteDrawerForm>;

package/dist/components/advanced/LiteInlineEdit.svelte

@@ -25,7 +25,7 @@
   {#if editUrl}
     <a
       href={editUrl}
-      style="font-size: 11px; color: #6366f1; text-decoration: none;"
+      style="font-size: 11px; color: #165DFF; text-decoration: none;"
       title="Edit {field.label}"
     >✎</a>
   {/if}

package/dist/components/advanced/LiteModalForm.svelte

@@ -14,6 +14,8 @@
     recordId?: string | number;
     basePath?: string;
     label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -22,6 +24,7 @@
     recordId,
     basePath = '/lite',
     label,
+    class: className = '',
   }: Props = $props();
 
   const href = $derived(
@@ -39,6 +42,6 @@
 </script>
 
 <!-- In lite mode, modals degrade to a full-page navigation -->
-<a href={href} class="lite-btn lite-btn-primary">
+<a href={href} class="lite-btn lite-btn-primary {className}">
   {buttonLabel}
 </a>