@stacksjs/components 0.2.3

package/src/ui/notification/Notification.stx

@@ -0,0 +1,71 @@
+<script>
+export const show = $props.show !== false
+export const title = $props.title || ''
+export const message = $props.message || ''
+export const type = $props.type || 'info'
+export const position = $props.position || 'top-right'
+export const duration = $props.duration || 5000
+export const onClose = $props.onClose
+export const className = $props.className || ''
+
+const typeColors = {
+  info: 'bg-blue-50 text-blue-900 dark:bg-blue-900 dark:text-blue-100',
+  success: 'bg-green-50 text-green-900 dark:bg-green-900 dark:text-green-100',
+  warning: 'bg-yellow-50 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-100',
+  error: 'bg-red-50 text-red-900 dark:bg-red-900 dark:text-red-100',
+}
+
+const positions = {
+  'top-left': 'top-0 left-0',
+  'top-right': 'top-0 right-0',
+  'top-center': 'top-0 left-1/2 -translate-x-1/2',
+  'bottom-left': 'bottom-0 left-0',
+  'bottom-right': 'bottom-0 right-0',
+  'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+}
+
+const baseClasses = 'fixed z-50 m-4 max-w-md w-full pointer-events-auto rounded-lg p-4 shadow-lg ring-1 ring-black ring-opacity-5 transition-all'
+const notificationClasses = `${baseClasses} ${typeColors[type]} ${positions[position]} ${className}`.trim()
+
+export function handleClose() {
+  onClose?.()
+}
+</script>
+
+@if(show)
+  <div class="{{ notificationClasses }}" role="alert">
+    <div class="flex items-start">
+      <div class="flex-1">
+        @if(title)
+          <p class="text-sm font-medium">{{ title }}</p>
+        @endif
+        @if(message)
+          <p class="mt-1 text-sm {{ title ? 'opacity-90' : '' }}">{{ message }}</p>
+        @endif
+        @if(!title && !message)
+          <slot />
+        @endif
+      </div>
+
+      <button
+        type="button"
+        @click="handleClose"
+        class="ml-4 inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
+      >
+        <span class="sr-only">Close</span>
+        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <script>
+  // Auto-hide after duration (client-side only)
+  if (typeof window !== 'undefined' && duration > 0) {
+    setTimeout(() => {
+      handleClose()
+    }, duration)
+  }
+  </script>
+@endif

package/src/ui/notification/README.md

@@ -0,0 +1,118 @@
+# Notification Component
+
+Toast notifications for user feedback and alerts.
+
+## Installation
+
+```bash
+bun add @stacksjs/components
+```
+
+## Usage
+
+```stx
+<script>
+export let showNotification = true
+
+export function closeNotification() {
+  showNotification = false
+}
+</script>
+
+@component('Notification', {
+  show: showNotification,
+  title: 'Success!',
+  message: 'Your changes have been saved.',
+  type: 'success',
+  onClose: closeNotification
+})
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `show` | `boolean` | `true` | Whether notification is visible |
+| `title` | `string` | `''` | Notification title |
+| `message` | `string` | `''` | Notification message |
+| `type` | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | Notification type |
+| `position` | `'top-left' \| 'top-right' \| 'top-center' \| 'bottom-left' \| 'bottom-right' \| 'bottom-center'` | `'top-right'` | Position on screen |
+| `duration` | `number` | `5000` | Auto-hide duration (0 = no auto-hide) |
+| `onClose` | `() => void` | - | Close handler |
+| `className` | `string` | `''` | Additional CSS classes |
+
+## Examples
+
+### Types
+
+```stx
+@component('Notification', { type: 'info', title: 'Information', message: 'This is an info message' })
+
+@component('Notification', { type: 'success', title: 'Success', message: 'Operation completed' })
+
+@component('Notification', { type: 'warning', title: 'Warning', message: 'Please be careful' })
+
+@component('Notification', { type: 'error', title: 'Error', message: 'Something went wrong' })
+```
+
+### Positions
+
+```stx
+@component('Notification', { position: 'top-left', title: 'Top Left' })
+@component('Notification', { position: 'top-center', title: 'Top Center' })
+@component('Notification', { position: 'bottom-right', title: 'Bottom Right' })
+```
+
+### No Auto-Hide
+
+```stx
+@component('Notification', {
+  duration: 0,
+  title: 'Important',
+  message: 'This will not auto-hide'
+})
+```
+
+### Custom Content
+
+```stx
+@component('Notification', { type: 'info' })
+  <div class="flex items-start gap-3">
+    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+    <div>
+      <p class="font-medium">Custom notification</p>
+      <p class="mt-1 text-sm">With custom content and layout</p>
+    </div>
+  </div>
+@endcomponent
+```
+
+### With Actions
+
+```stx
+@component('Notification', { type: 'info', title: 'New message' })
+  <p>You have a new message from John</p>
+  <div class="mt-3 flex gap-2">
+    @component('Button', { size: 'sm', variant: 'primary' })
+      View
+    @endcomponent
+    @component('Button', { size: 'sm', variant: 'ghost' })
+      Dismiss
+    @endcomponent
+  </div>
+@endcomponent
+```
+
+## Features
+
+- 4 types (info, success, warning, error)
+- 6 position options
+- Auto-hide with configurable duration
+- Dark mode support
+- Accessible (WAI-ARIA)
+- Close button
+- Custom content support
+- Smooth transitions
+- Customizable styling

package/src/ui/notification/index.ts

@@ -0,0 +1,12 @@
+export { default as Notification } from './Notification.stx'
+
+export interface NotificationProps {
+  show?: boolean
+  title?: string
+  message?: string
+  type?: 'info' | 'success' | 'warning' | 'error'
+  position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center'
+  duration?: number
+  onClose?: () => void
+  className?: string
+}

package/src/ui/pagination/Pagination.stx

@@ -0,0 +1,183 @@
+<script>
+export const currentPage = $props.currentPage || 1
+export const totalPages = $props.totalPages || 1
+export const siblingCount = $props.siblingCount || 1
+export const showFirstLast = $props.showFirstLast ?? true
+export const showPrevNext = $props.showPrevNext ?? true
+export const className = $props.className || ''
+export const onChange = $props.onChange
+
+// Generate page numbers to display
+function generatePageNumbers() {
+  const pages = []
+  const totalNumbers = siblingCount * 2 + 3 // siblings on each side + current + first + last
+  const totalBlocks = totalNumbers + 2 // + 2 for ellipsis
+
+  if (totalPages <= totalBlocks) {
+    // Show all pages
+    for (let i = 1; i <= totalPages; i++) {
+      pages.push(i)
+    }
+  } else {
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1)
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages)
+
+    const showLeftEllipsis = leftSiblingIndex > 2
+    const showRightEllipsis = rightSiblingIndex < totalPages - 1
+
+    if (!showLeftEllipsis && showRightEllipsis) {
+      // Show left pages + ellipsis + last
+      const leftCount = 3 + 2 * siblingCount
+      for (let i = 1; i <= leftCount; i++) {
+        pages.push(i)
+      }
+      pages.push('ellipsis-right')
+      pages.push(totalPages)
+    } else if (showLeftEllipsis && !showRightEllipsis) {
+      // Show first + ellipsis + right pages
+      pages.push(1)
+      pages.push('ellipsis-left')
+      const rightCount = 3 + 2 * siblingCount
+      for (let i = totalPages - rightCount + 1; i <= totalPages; i++) {
+        pages.push(i)
+      }
+    } else {
+      // Show first + ellipsis + middle + ellipsis + last
+      pages.push(1)
+      pages.push('ellipsis-left')
+      for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+        pages.push(i)
+      }
+      pages.push('ellipsis-right')
+      pages.push(totalPages)
+    }
+  }
+
+  return pages
+}
+
+const pageNumbers = generatePageNumbers()
+
+function goToPage(page) {
+  if (page >= 1 && page <= totalPages && page !== currentPage) {
+    if (onChange) {
+      onChange(page)
+    }
+  }
+}
+
+function goToPrevious() {
+  goToPage(currentPage - 1)
+}
+
+function goToNext() {
+  goToPage(currentPage + 1)
+}
+
+function goToFirst() {
+  goToPage(1)
+}
+
+function goToLast() {
+  goToPage(totalPages)
+}
+
+export const paginationClasses = `flex items-center gap-1 ${className}`.trim()
+export const buttonClasses = `px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 transition-colors duration-150`.trim()
+export const activeButtonClasses = `px-3 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 border border-blue-600 dark:border-blue-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
+export const ellipsisClasses = `px-3 py-2 text-sm font-medium text-gray-400 dark:text-gray-600`.trim()
+export const iconClasses = `w-5 h-5`.trim()
+</script>
+
+<nav class="{{ paginationClasses }}" role="navigation" aria-label="Pagination">
+  <!-- First page button -->
+  @if(showFirstLast)
+    <button
+      type="button"
+      onclick="goToFirst()"
+      class="{{ buttonClasses }}"
+      aria-label="Go to first page"
+      disabled="{{ currentPage === 1 }}"
+    >
+      <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+      </svg>
+    </button>
+  @endif
+
+  <!-- Previous button -->
+  @if(showPrevNext)
+    <button
+      type="button"
+      onclick="goToPrevious()"
+      class="{{ buttonClasses }}"
+      aria-label="Go to previous page"
+      disabled="{{ currentPage === 1 }}"
+    >
+      <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </button>
+  @endif
+
+  <!-- Page numbers -->
+  @foreach(page in pageNumbers)
+    @if(typeof page === 'string')
+      <!-- Ellipsis -->
+      <span class="{{ ellipsisClasses }}" aria-hidden="true">...</span>
+    @else
+      @if(page === currentPage)
+        <!-- Current page -->
+        <button
+          type="button"
+          class="{{ activeButtonClasses }}"
+          aria-label="Page {{ page }}"
+          aria-current="page"
+          disabled
+        >
+          {{ page }}
+        </button>
+      @else
+        <!-- Other pages -->
+        <button
+          type="button"
+          onclick="goToPage({{ page }})"
+          class="{{ buttonClasses }}"
+          aria-label="Go to page {{ page }}"
+        >
+          {{ page }}
+        </button>
+      @endif
+    @endif
+  @endforeach
+
+  <!-- Next button -->
+  @if(showPrevNext)
+    <button
+      type="button"
+      onclick="goToNext()"
+      class="{{ buttonClasses }}"
+      aria-label="Go to next page"
+      disabled="{{ currentPage === totalPages }}"
+    >
+      <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+  @endif
+
+  <!-- Last page button -->
+  @if(showFirstLast)
+    <button
+      type="button"
+      onclick="goToLast()"
+      class="{{ buttonClasses }}"
+      aria-label="Go to last page"
+      disabled="{{ currentPage === totalPages }}"
+    >
+      <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+      </svg>
+    </button>
+  @endif
+</nav>

package/src/ui/pagination/index.ts

@@ -0,0 +1,11 @@
+export { default as Pagination } from './Pagination.stx'
+
+export interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  siblingCount?: number
+  showFirstLast?: boolean
+  showPrevNext?: boolean
+  onChange?: (page: number) => void
+  className?: string
+}

package/src/ui/payment/Checkout.stx

@@ -0,0 +1,39 @@
+<script>
+export const products = $props.products || []
+export const redirectUrl = $props.redirectUrl || ''
+export const mode = $props.mode || 'subscription'
+export const stripePublicKey = $props.stripePublicKey || ''
+export const apiUrl = $props.apiUrl || ''
+export const onSubmit = $props.onSubmit
+export const onRemoveProduct = $props.onRemoveProduct
+export const shipping = $props.shipping || 0
+export const taxes = $props.taxes || 0
+export const className = $props.className || ''
+
+// For future expansion - one-time payment support
+export const isSubscription = mode === 'subscription'
+export const isOneTime = mode === 'one-time'
+</script>
+
+@if(isSubscription)
+  @component('SubscriptionCheckout', {
+    products,
+    stripePublicKey,
+    apiUrl,
+    onSubmit,
+    onRemoveProduct,
+    shipping,
+    taxes,
+    className
+  })
+  @endcomponent
+@endif
+
+@if(isOneTime)
+  <!-- One-time payment component can be implemented here in the future -->
+  <div class="p-8 text-center">
+    <p class="text-gray-600 dark:text-gray-400">
+      One-time payment mode is not yet implemented.
+    </p>
+  </div>
+@endif

package/src/ui/payment/DefaultPaymentMethod.stx

@@ -0,0 +1,62 @@
+<script>
+export const paymentMethod = $props.paymentMethod
+export const isLoading = $props.isLoading || false
+export const className = $props.className || ''
+
+const brandIcons = {
+  visa: '💳',
+  mastercard: '💳',
+  amex: '💳',
+  discover: '💳',
+  default: '💳',
+}
+
+export const containerClasses = `mt-16 w-2/3 bg-white dark:bg-blue-gray-800 px-8 py-6 shadow ring-1 ring-black dark:ring-gray-700 ring-opacity-5 sm:rounded-lg ${className}`.trim()
+</script>
+
+<div class="{{ containerClasses }}">
+  <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
+    Payment Info
+  </h2>
+
+  @if(isLoading)
+    <!-- Loading skeleton -->
+    <div class="mt-8 animate-pulse">
+      <div class="h-20 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
+    </div>
+  @else
+    @if(paymentMethod)
+      <div class="col-span-1 mt-8 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-gray-200 dark:divide-gray-700">
+        <div class="w-full p-3">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-4">
+              <!-- Card Brand Icon -->
+              <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-md">
+                <span class="text-2xl">{{ brandIcons[paymentMethod.brand.toLowerCase()] || brandIcons.default }}</span>
+              </div>
+
+              <!-- Card Details -->
+              <div>
+                <h2 class="text-sm text-gray-600 dark:text-gray-300">
+                  {{ paymentMethod.brand }} •••• {{ paymentMethod.last_four }}
+                  <span class="ml-4 inline-flex items-center rounded-md bg-indigo-50 dark:bg-indigo-900/30 px-2 py-1 text-xs text-indigo-700 dark:text-indigo-300 font-medium ring-1 ring-indigo-700/10 dark:ring-indigo-300/20 ring-inset">Default</span>
+                  <br>
+                  <span class="text-xs text-gray-500 dark:text-gray-400 italic">Expires {{ paymentMethod.exp_month }} / {{ paymentMethod.exp_year }}</span>
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    @else
+      <!-- Empty state -->
+      <div class="col-span-1 mt-8 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-gray-200 dark:divide-gray-700">
+        <div class="w-full px-4 py-5">
+          <h2 class="text-center text-sm text-gray-600 dark:text-gray-300">
+            You haven't added any payment methods yet.
+          </h2>
+        </div>
+      </div>
+    @endif
+  @endif
+</div>

package/src/ui/payment/PaymentMethods.stx

@@ -0,0 +1,113 @@
+<script>
+export const paymentMethods = $props.paymentMethods || []
+export const onDeletePaymentMethod = $props.onDeletePaymentMethod
+export const onMakeDefault = $props.onMakeDefault
+export const isLoading = $props.isLoading || false
+export const className = $props.className || ''
+
+// Card brand icon mapping
+const brandIcons = {
+  visa: '💳',
+  mastercard: '💳',
+  amex: '💳',
+  discover: '💳',
+  default: '💳',
+}
+
+export const containerClasses = `mt-4 ${className}`.trim()
+</script>
+
+<div class="{{ containerClasses }}">
+  @if(isLoading)
+    <!-- Loading state -->
+    <div class="animate-pulse">
+      <div class="h-24 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
+    </div>
+  @else
+    @if(paymentMethods.length > 0)
+      <ul role="list" class="grid grid-cols-1 gap-6 lg:grid-cols-1 sm:grid-cols-1">
+        @foreach(method in paymentMethods)
+          <li class="col-span-1 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-gray-200 dark:divide-gray-700">
+            <div class="w-full p-3">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-4">
+                  <!-- Card Brand Icon -->
+                  <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-md">
+                    <span class="text-2xl">{{ brandIcons[method.brand.toLowerCase()] || brandIcons.default }}</span>
+                  </div>
+
+                  <!-- Card Details -->
+                  <div>
+                    <h2 class="text-sm text-gray-600 dark:text-gray-300">
+                      {{ method.brand }} •••• {{ method.last_four }}
+                    </h2>
+                    <span class="text-xs text-gray-500 dark:text-gray-400 italic">
+                      Expires {{ method.exp_month }} / {{ method.exp_year }}
+                    </span>
+                  </div>
+                </div>
+
+                <div class="flex justify-end space-x-4">
+                  <!-- Make Default Button -->
+                  @if(onMakeDefault)
+                    <button
+                      type="button"
+                      class="border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-gray-700 dark:text-gray-300 font-semibold shadow-sm hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                      onclick="handleMakeDefault('{{ method.id }}')"
+                      title="Make default"
+                    >
+                      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+                      </svg>
+                    </button>
+                  @endif
+
+                  <!-- Delete Button -->
+                  @if(onDeletePaymentMethod)
+                    <button
+                      type="button"
+                      class="border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-red-600 dark:text-red-400 font-semibold shadow-sm hover:bg-red-50 dark:hover:bg-red-900/20 focus-visible:outline-2 focus-visible:outline-red-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                      onclick="handleDelete('{{ method.id }}')"
+                      title="Delete payment method"
+                    >
+                      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                    </button>
+                  @endif
+                </div>
+              </div>
+            </div>
+          </li>
+        @endforeach
+      </ul>
+    @else
+      <!-- Empty state -->
+      <div class="text-center py-12 bg-white dark:bg-blue-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+        </svg>
+        <h3 class="mt-2 text-sm text-gray-900 dark:text-gray-100 font-medium">No payment methods</h3>
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          You haven't added any payment methods yet.
+        </p>
+      </div>
+    @endif
+  @endif
+</div>
+
+<script>
+function handleMakeDefault(methodId) {
+  if (onMakeDefault) {
+    onMakeDefault(methodId)
+  }
+}
+
+function handleDelete(methodId) {
+  if (onDeletePaymentMethod) {
+    if (confirm('Are you sure you want to delete this payment method?')) {
+      onDeletePaymentMethod(methodId)
+    }
+  }
+}
+</script>