@arroyavecommerce/theme-kinetic 0.2.0

package/src/chrome/mini-cart.tsx

@@ -0,0 +1,320 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import type { CartData, CartLineData, RenderContext } from "../context"
+
+/**
+ * Mini-cart drawer — panel lateral DERECHO + scrim, estética "Kinetic Street"
+ * (superficie/radio/sombra suaves, tokens `--cms-*` CON fallback). Lo abre el
+ * botón de la bolsa del header (Opción A: el carrito vive en el template,
+ * alimentado por `ctx.carrito`).
+ *
+ * A11y: `role="dialog"` + `aria-modal`, cierre con Esc y con click en el scrim,
+ * foco inicial en el botón de cerrar y foco atrapado (Tab cicla dentro del
+ * panel). El body queda con scroll bloqueado mientras está abierto. La
+ * animación de entrada (slide desde la derecha) respeta
+ * `prefers-reduced-motion`.
+ *
+ * Es VIEW-ONLY + CTAs: sin edición de cantidades inline (eso vive en `/cart`).
+ * Si `carrito` es `null` o no tiene items → estado vacío con enlace al catálogo.
+ */
+
+const claseBorde = "[border-bottom:var(--cms-grosor-borde,1px)_solid_var(--cms-borde,#dbd6c9)]"
+
+const SELECTOR_FOCO =
+  'a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])'
+
+/** Ruta del catálogo para el estado vacío ("Seguir comprando"). */
+const URL_CATALOGO = "/catalogo"
+
+// ── Formato de precio (misma convención que catalog/product-card.tsx) ─────────
+
+function formatearMonto(monto: number, moneda: string): string {
+  try {
+    return new Intl.NumberFormat("es-CO", {
+      style: "currency",
+      currency: moneda.toUpperCase(),
+      maximumFractionDigits: 0,
+    }).format(monto)
+  } catch {
+    return `$ ${monto}`
+  }
+}
+
+// ── Estilos de entrada (respeta prefers-reduced-motion) ──────────────────────
+
+function EstiloMiniCart() {
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html:
+          "@keyframes cms-minicart-in{from{transform:translateX(100%)}to{transform:translateX(0)}}" +
+          "@keyframes cms-minicart-scrim-in{from{opacity:0}to{opacity:1}}" +
+          ".cms-minicart-panel{animation:cms-minicart-in .28s cubic-bezier(.22,1,.36,1)}" +
+          ".cms-minicart-scrim{animation:cms-minicart-scrim-in .28s ease-out}" +
+          "@media (prefers-reduced-motion: reduce){.cms-minicart-panel,.cms-minicart-scrim{animation:none}}",
+      }}
+    />
+  )
+}
+
+// ── Icono de cierre ──────────────────────────────────────────────────────────
+
+function IconoCerrar() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="20"
+      height="20"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M6 6l12 12M18 6L6 18" />
+    </svg>
+  )
+}
+
+// ── Thumbnail de línea (via ctx.componentes.Imagen, con fallback de superficie) ─
+
+function Miniatura({
+  src,
+  alt,
+  ctx,
+}: {
+  src: string | null
+  alt: string
+  ctx: RenderContext
+}) {
+  const className = "h-full w-full object-cover"
+  if (!src) {
+    return (
+      <div
+        role="img"
+        aria-label={alt}
+        className={className}
+        style={{ background: "var(--cms-superficie,#f4f4f4)" }}
+      />
+    )
+  }
+  const { Imagen } = ctx.componentes
+  return <Imagen src={src} alt={alt} className={className} />
+}
+
+// ── Línea del carrito ────────────────────────────────────────────────────────
+
+function LineaCarrito({
+  linea,
+  moneda,
+  ctx,
+}: {
+  linea: CartLineData
+  moneda: string
+  ctx: RenderContext
+}) {
+  const { Enlace } = ctx.componentes
+  return (
+    <li className={`flex gap-3 py-4 ${claseBorde}`}>
+      <Enlace
+        href={linea.href}
+        className="block h-[88px] w-[68px] flex-none overflow-hidden [border-radius:var(--cms-radio,12px)]"
+      >
+        <Miniatura src={linea.thumbnail} alt={linea.title} ctx={ctx} />
+      </Enlace>
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <Enlace href={linea.href} className="[color:var(--cms-texto,#0c0c10)]">
+          <span className="block truncate text-[13.5px] font-semibold" style={{ fontFamily: "var(--cms-fuente-texto)" }}>
+            {linea.title}
+          </span>
+        </Enlace>
+        {linea.variantTitle ? (
+          <span className="text-[12px]" style={{ color: "var(--cms-texto-suave,#6b675e)" }}>
+            {linea.variantTitle}
+          </span>
+        ) : null}
+        <div className="mt-auto flex items-baseline justify-between gap-2 pt-1">
+          <span className="text-[12px]" style={{ color: "var(--cms-texto-suave,#6b675e)" }}>
+            {linea.cantidad} ×
+          </span>
+          <span
+            className="text-[13px] font-semibold"
+            style={{ fontFamily: "var(--cms-fuente-mono)", color: "var(--cms-texto,#0c0c10)" }}
+          >
+            {formatearMonto(linea.precioTotal, moneda)}
+          </span>
+        </div>
+      </div>
+    </li>
+  )
+}
+
+// ── Estado vacío ─────────────────────────────────────────────────────────────
+
+function BolsaVacia({ ctx }: { ctx: RenderContext }) {
+  const { Enlace } = ctx.componentes
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-4 px-6 text-center">
+      <p className="text-[15px] font-semibold" style={{ color: "var(--cms-texto,#0c0c10)" }}>
+        Tu bolsa está vacía
+      </p>
+      <Enlace
+        href={URL_CATALOGO}
+        className="text-[13px] font-semibold underline underline-offset-4 [color:var(--cms-texto,#0c0c10)]"
+      >
+        Seguir comprando
+      </Enlace>
+    </div>
+  )
+}
+
+// ── Pie con subtotal + CTAs ──────────────────────────────────────────────────
+
+function PieCarrito({ carrito, ctx }: { carrito: CartData; ctx: RenderContext }) {
+  const { Enlace } = ctx.componentes
+  return (
+    <div
+      className="mt-auto px-4 py-4"
+      style={{ borderTop: "var(--cms-grosor-borde,1px) solid var(--cms-borde,#dbd6c9)" }}
+    >
+      <div className="mb-3 flex items-baseline justify-between">
+        <span className="text-[13px] font-semibold uppercase tracking-[0.06em]" style={{ color: "var(--cms-texto,#0c0c10)" }}>
+          Subtotal
+        </span>
+        <span
+          className="text-[15px] font-bold"
+          style={{ fontFamily: "var(--cms-fuente-mono)", color: "var(--cms-texto,#0c0c10)" }}
+        >
+          {formatearMonto(carrito.subtotal, carrito.moneda)}
+        </span>
+      </div>
+      <div className="flex flex-col gap-2.5">
+        <Enlace
+          href={carrito.urlCheckout}
+          className="block w-full py-3.5 text-center text-xs font-semibold uppercase tracking-[0.06em] [background:var(--cms-primario,#3b2bff)] [color:var(--cms-primario-texto,#fff)] [border-radius:var(--cms-radio-md,14px)] [font-family:var(--cms-fuente-texto)]"
+        >
+          Ir a pagar
+        </Enlace>
+        <Enlace
+          href={carrito.urlCarrito}
+          className="block w-full py-3 text-center text-xs font-semibold uppercase tracking-[0.06em] [border:var(--cms-grosor-borde,1px)_solid_var(--cms-borde,#dbd6c9)] [color:var(--cms-texto,#0c0c10)] [border-radius:var(--cms-radio-md,14px)] [font-family:var(--cms-fuente-texto)]"
+        >
+          Ver bolsa
+        </Enlace>
+      </div>
+    </div>
+  )
+}
+
+// ── Drawer ─────────────────────────────────────────────────────────────────────
+
+export function MiniCart({
+  abierto,
+  onCerrar,
+  carrito,
+  ctx,
+}: {
+  abierto: boolean
+  onCerrar: () => void
+  carrito: CartData | null
+  ctx: RenderContext
+}) {
+  const panelRef = useRef<HTMLDivElement>(null)
+  const cerrarRef = useRef<HTMLButtonElement>(null)
+
+  // Esc para cerrar + foco atrapado (Tab cicla) + scroll del body bloqueado.
+  useEffect(() => {
+    if (!abierto) return
+    cerrarRef.current?.focus()
+
+    const previo = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onCerrar()
+        return
+      }
+      if (e.key !== "Tab") return
+      const panel = panelRef.current
+      if (!panel) return
+      const focusables = Array.from(panel.querySelectorAll<HTMLElement>(SELECTOR_FOCO)).filter(
+        (el) => el.offsetParent !== null || el === document.activeElement,
+      )
+      if (focusables.length === 0) return
+      const primero = focusables[0]
+      const ultimo = focusables[focusables.length - 1]
+      if (e.shiftKey && document.activeElement === primero) {
+        e.preventDefault()
+        ultimo.focus()
+      } else if (!e.shiftKey && document.activeElement === ultimo) {
+        e.preventDefault()
+        primero.focus()
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown)
+    return () => {
+      document.removeEventListener("keydown", onKeyDown)
+      document.body.style.overflow = previo
+    }
+  }, [abierto, onCerrar])
+
+  if (!abierto) return null
+
+  const items = carrito?.items ?? []
+  const vacia = items.length === 0
+  const count = carrito?.count ?? 0
+
+  return (
+    <>
+      <EstiloMiniCart />
+      <div className="cms-minicart-scrim fixed inset-0 z-40 bg-black/50" onClick={onCerrar} aria-hidden />
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Tu bolsa"
+        className="cms-minicart-panel fixed right-0 top-0 z-50 flex h-full w-[90%] max-w-[400px] flex-col"
+        style={{
+          background: "var(--cms-superficie,#fff)",
+          color: "var(--cms-texto,#0c0c10)",
+          boxShadow: "var(--cms-sombra-lg,0 30px 70px -28px rgba(12,12,16,.4))",
+        }}
+      >
+        <div className={`flex items-center justify-between px-4 py-4 ${claseBorde}`}>
+          <h2
+            className="text-[15px] font-bold uppercase tracking-[0.04em]"
+            style={{ fontFamily: "var(--cms-fuente-titulo)", color: "var(--cms-texto,#0c0c10)" }}
+          >
+            Tu bolsa ({count})
+          </h2>
+          <button
+            ref={cerrarRef}
+            type="button"
+            onClick={onCerrar}
+            aria-label="Cerrar bolsa"
+            className="inline-flex items-center justify-center leading-none transition-opacity hover:opacity-70"
+          >
+            <IconoCerrar />
+          </button>
+        </div>
+
+        {vacia ? (
+          <BolsaVacia ctx={ctx} />
+        ) : (
+          <>
+            <ul className="flex flex-1 flex-col overflow-y-auto px-4">
+              {items.map((linea) => (
+                <LineaCarrito key={linea.id} linea={linea} moneda={carrito!.moneda} ctx={ctx} />
+              ))}
+            </ul>
+            <PieCarrito carrito={carrito!} ctx={ctx} />
+          </>
+        )}
+      </div>
+    </>
+  )
+}

package/src/content/home.ts

@@ -0,0 +1,19 @@
+import type { CmsPageData } from "@arroyavecommerce/cms-core"
+import { homeBlocks } from "../blocks"
+
+export const DEFAULT_HOME_PAGE: CmsPageData = {
+  version: 1,
+  blocks: [
+    { id: "b1", type: "hero", props: homeBlocks.hero.defaults },
+    { id: "b2", type: "categoryTiles", props: homeBlocks.categoryTiles.defaults },
+    { id: "b3", type: "productGrid", props: homeBlocks.productGrid.defaults },
+    { id: "b4", type: "editorialBanner", props: homeBlocks.editorialBanner.defaults },
+    { id: "b5", type: "lookbook", props: homeBlocks.lookbook.defaults },
+    { id: "b6", type: "features", props: homeBlocks.features.defaults },
+    { id: "b7", type: "marquee", props: homeBlocks.marquee.defaults },
+    { id: "b8", type: "featuredCollection", props: homeBlocks.featuredCollection.defaults },
+    { id: "b9", type: "testimonials", props: homeBlocks.testimonials.defaults },
+    { id: "b10", type: "faq", props: homeBlocks.faq.defaults },
+    { id: "b11", type: "newsletter", props: homeBlocks.newsletter.defaults },
+  ],
+}

package/src/content/seed.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest"
+import { cmsPageDataSchema } from "@arroyavecommerce/cms-core"
+import { seedBundle, DEFAULT_CHROME_CONFIG } from "./seed"
+import { themeKinetic } from "../index"
+
+describe("seedBundle", () => {
+  const b = seedBundle()
+
+  it("theme son los tokens por defecto del template", () => {
+    expect(b.theme).toBe(themeKinetic.theme.defaults)
+    expect(typeof b.theme["fuente-titulo"]).toBe("string")
+  })
+
+  it("home pasa el schema de página del CMS", () => {
+    expect(cmsPageDataSchema.safeParse(b.home).success).toBe(true)
+  })
+
+  it("chrome referencia variantes que existen en el registry", () => {
+    expect(Object.keys(themeKinetic.chrome!.headers)).toContain(b.chrome.header.variante)
+    expect(Object.keys(themeKinetic.chrome!.footers)).toContain(b.chrome.footer.variante)
+  })
+
+  it("chrome trae un menú genérico (sin categorías específicas de tienda)", () => {
+    expect(b.chrome.menu.items.length).toBeGreaterThan(0)
+    expect(b.chrome.menu.items[0]).toEqual({ etiqueta: "Novedades", href: "/catalogo?sortBy=created_at" })
+    // El menú NO debe apuntar a categorías que una tienda nueva no tiene.
+    expect(b.chrome.menu.items.every((i) => !i.href.startsWith("/categories/"))).toBe(true)
+  })
+
+  it("DEFAULT_CHROME_CONFIG es data pura versionada", () => {
+    expect(DEFAULT_CHROME_CONFIG.version).toBe(1)
+  })
+})

package/src/content/seed.ts

@@ -0,0 +1,28 @@
+import { THEME_DEFAULTS } from "../theme"
+import { DEFAULT_HOME_PAGE } from "./home"
+
+/**
+ * Chrome-config por defecto que se siembra en una tienda nueva. Es DATA pura
+ * (no el registry de componentes). El menú es GENÉRICO a propósito: una tienda
+ * recién creada no tiene categorías camisetas/buzos; el dueño agrega enlaces de
+ * categoría desde el CMS.
+ */
+export const DEFAULT_CHROME_CONFIG = {
+  version: 1 as const,
+  header: { variante: "inline", props: {} as Record<string, unknown> },
+  footer: { variante: "moda", props: {} as Record<string, unknown> },
+  menu: { items: [{ etiqueta: "Novedades", href: "/catalogo?sortBy=created_at" }] },
+}
+
+/**
+ * Bundle de semilla del template: tema + chrome + home, todo serializable. Lo
+ * sirve el storefront en `/api/cms/seed-defaults`; el orquestador lo GETea y lo
+ * publica en el backend de la tienda (fase `cms-seed`). NO importa React/Puck.
+ */
+export function seedBundle() {
+  return {
+    theme: THEME_DEFAULTS,
+    chrome: DEFAULT_CHROME_CONFIG,
+    home: DEFAULT_HOME_PAGE,
+  }
+}

package/src/context.ts

@@ -0,0 +1,104 @@
+import type { HttpTypes } from "@medusajs/types"
+import type { AriaAttributes, ComponentType, ReactNode } from "react"
+import type { CmsFiltersConfig } from "@arroyavecommerce/cms-core"
+
+/**
+ * Una línea (item) del carrito, ya normalizada para pintar en el mini-cart.
+ * Es DATA serializable (no funciones): el host la cablea desde el carrito de
+ * Medusa en el `RenderContext`.
+ */
+export type CartLineData = {
+  id: string
+  title: string // título del producto
+  variantTitle: string | null // ej. "Crema / M"
+  thumbnail: string | null
+  cantidad: number
+  precioTotal: number // total de la línea, monto CRUDO (mismo formato que calculated_price.calculated_amount)
+  href: string // /products/:handle
+}
+
+/**
+ * El carrito completo, normalizado para el mini-cart drawer. `null` en el
+ * `RenderContext` cuando no hay carrito o está vacío. Los montos son CRUDOS
+ * (misma convención que `calculated_price.calculated_amount`); el formateo con
+ * `Intl.NumberFormat` ocurre en la vista.
+ */
+export type CartData = {
+  items: CartLineData[]
+  count: number // suma de cantidades
+  subtotal: number // monto crudo
+  moneda: string // currency_code (ej. "cop")
+  urlCarrito: string // p.ej. "/cart"
+  urlCheckout: string // p.ej. "/checkout"
+}
+
+export type RenderContext = {
+  countryCode: string
+  region: HttpTypes.StoreRegion
+  products: HttpTypes.StoreProduct[]
+  categories: HttpTypes.StoreProductCategory[]
+  collections: HttpTypes.StoreCollection[]
+  cartQuantities: Record<string, number>
+  /**
+   * Carrito normalizado para el mini-cart drawer del header. `null` si está
+   * vacío o no hay carrito. Es un campo de DATOS serializable (como `products`
+   * o `cartQuantities`), NO una función. `cartQuantities` se mantiene para
+   * back-compat (badge de conteo).
+   */
+  carrito: CartData | null
+  acciones: {
+    agregarAlCarrito: (variantId: string, cantidad?: number) => Promise<{ ok: boolean }>
+  }
+  componentes: {
+    Imagen: ComponentType<{ src: string; alt: string; className?: string; prioridad?: boolean; sizes?: string }>
+    // La cáscara (next/link) reenvía aria-current nativamente al <a>.
+    Enlace: ComponentType<{
+      href: string
+      className?: string
+      children: ReactNode
+      "aria-current"?: AriaAttributes["aria-current"]
+    }>
+  }
+  sesion: { autenticado: boolean; nombre?: string } | null
+  catalogo?: {
+    listado?: {
+      titulo: string
+      breadcrumb: { texto: string; href: string }[]
+      productos: HttpTypes.StoreProduct[]
+      total: number
+      filtros: CmsFiltersConfig
+      seleccion: Record<string, string[]>
+      opcionesFaceta: Record<string, { valor: string; etiqueta: string; conteo?: number }[]>
+      paginacion: { pagina: number; totalPaginas: number; hrefPara: (p: number) => string }
+      urlFiltro: (facetId: string, valor: string) => string
+      urlOrden: (valor: string) => string
+      orden: string
+    }
+    detalle?: {
+      producto: {
+        eyebrow?: string
+        titulo: string
+        descripcion: string
+        precio: string
+        compareAt?: string
+        descuentoPct?: number
+        imagenes: { url: string; alt: string }[]
+        rating?: { promedio: number; total: number }
+        envioInfo?: string[]
+        acordeon?: { titulo: string; cuerpo: string }[]
+      }
+      variantes: {
+        color?: { valor: string; etiqueta: string; swatchUrl?: string; hex?: string }[]
+        talla?: { valor: string; etiqueta: string; agotada: boolean; pocasUnidades?: number }[]
+      }
+      resolverVariante: (sel: { color?: string; talla?: string }) => string | null
+      reseñas?: {
+        promedio: number
+        total: number
+        histograma: { estrellas: number; porcentaje: number }[]
+        muestra: { autor: string; estrellas: number; verificada: boolean; talla?: string; texto: string }[]
+      }
+      relacionados?: HttpTypes.StoreProduct[]
+    }
+  }
+}

package/src/icons/icons.test.tsx

@@ -0,0 +1,118 @@
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import {
+  PAYMENT_ICONS,
+  SOCIAL_ICONS,
+  type PaymentKey,
+  type SocialKey,
+} from "./index"
+
+const PAYMENT_KEYS: PaymentKey[] = [
+  "visa",
+  "mastercard",
+  "amex",
+  "diners",
+  "pse",
+  "nequi",
+  "daviplata",
+  "bancolombia",
+  "efecty",
+  "addi",
+  "mercadopago",
+  "paypal",
+  "efectivo",
+  "applepay",
+  "googlepay",
+  "maestro",
+  "discover",
+  "bitcoin",
+]
+
+const SOCIAL_KEYS: SocialKey[] = [
+  "instagram",
+  "tiktok",
+  "whatsapp",
+  "x",
+  "facebook",
+  "youtube",
+  "threads",
+  "pinterest",
+  "linkedin",
+]
+
+describe("registries de iconos", () => {
+  it("PAYMENT_ICONS tiene exactamente las 18 claves esperadas", () => {
+    expect(Object.keys(PAYMENT_ICONS).sort()).toEqual([...PAYMENT_KEYS].sort())
+  })
+
+  it("SOCIAL_ICONS tiene exactamente las 9 claves esperadas", () => {
+    expect(Object.keys(SOCIAL_ICONS).sort()).toEqual([...SOCIAL_KEYS].sort())
+  })
+
+  it("cada entrada expone un label no vacío y un Icon", () => {
+    for (const { label, Icon } of [
+      ...Object.values(PAYMENT_ICONS),
+      ...Object.values(SOCIAL_ICONS),
+    ]) {
+      expect(typeof label).toBe("string")
+      expect(label.length).toBeGreaterThan(0)
+      expect(typeof Icon).toBe("function")
+    }
+  })
+})
+
+describe("render de cada icono", () => {
+  const todos = [
+    ...Object.entries(PAYMENT_ICONS).map(([k, v]) => [`payment:${k}`, v.Icon] as const),
+    ...Object.entries(SOCIAL_ICONS).map(([k, v]) => [`social:${k}`, v.Icon] as const),
+  ]
+
+  it.each(todos)("%s renderiza un <svg>", (_nombre, Icon) => {
+    const html = renderToStaticMarkup(<Icon />)
+    expect(html).toContain("<svg")
+    expect(html).toContain("</svg>")
+  })
+
+  it("aplica title como aria-label y <title> cuando se pasa", () => {
+    const { Icon } = PAYMENT_ICONS.visa
+    const html = renderToStaticMarkup(<Icon title="Pago con Visa" />)
+    expect(html).toContain('aria-label="Pago con Visa"')
+    expect(html).toContain("<title>Pago con Visa</title>")
+  })
+
+  it("sin title el icono es decorativo (aria-hidden)", () => {
+    const { Icon } = PAYMENT_ICONS.visa
+    const html = renderToStaticMarkup(<Icon />)
+    expect(html).toContain('aria-hidden="true"')
+  })
+
+  it("respeta className y size", () => {
+    const { Icon } = SOCIAL_ICONS.whatsapp
+    const html = renderToStaticMarkup(<Icon className="mi-clase" size={28} />)
+    expect(html).toContain("mi-clase")
+    expect(html).toContain("28")
+  })
+})
+
+describe("tintado por data-brand", () => {
+  it("al menos un icono de pago expone un elemento con data-brand", () => {
+    const conMarca = Object.values(PAYMENT_ICONS).filter((entry) =>
+      renderToStaticMarkup(<entry.Icon />).includes("data-brand"),
+    )
+    expect(conMarca.length).toBeGreaterThan(0)
+  })
+
+  it("todos los iconos de pago exponen al menos un data-brand", () => {
+    for (const [key, entry] of Object.entries(PAYMENT_ICONS)) {
+      const html = renderToStaticMarkup(<entry.Icon />)
+      expect(html, `${key} debería tener data-brand`).toContain("data-brand")
+    }
+  })
+
+  it("todos los iconos sociales exponen al menos un data-brand", () => {
+    for (const [key, entry] of Object.entries(SOCIAL_ICONS)) {
+      const html = renderToStaticMarkup(<entry.Icon />)
+      expect(html, `${key} debería tener data-brand`).toContain("data-brand")
+    }
+  })
+})