@getvitops/emdash 2.0.0-alpha.2 → 2.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/emdash",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.4",
   "description": "EmDash CMS native plugin for the Vitops design system — Portable Text block types editors can insert from the admin, rendered with the design-system web components and CSS framework.",
   "homepage": "https://docs.vitops.ca",
   "bugs": "https://github.com/getvitops/design-system/issues",
@@ -31,15 +31,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@getvitops/generator": "8.3.0-alpha.2",
-    "@getvitops/utils": "8.3.0-alpha.2"
+    "@getvitops/generator": "8.3.0-alpha.4",
+    "@getvitops/utils": "8.3.0-alpha.4"
   },
   "devDependencies": {
     "@astrojs/cloudflare": "^14.0.0",
     "@astrojs/react": "^7.0.0",
     "@emdash-cms/cloudflare": "^1.4.0",
-    "@getvitops/astro": "8.3.0-alpha.2",
-    "@getvitops/core": "8.3.0-alpha.2",
+    "@getvitops/astro": "8.3.0-alpha.4",
+    "@getvitops/core": "8.3.0-alpha.4",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "astro": "^7.4.4",

package/src/astro/blocks/Accordion.astro

@@ -20,6 +20,8 @@ const items = rows<Record<string, unknown>>(value.items)
     open: Boolean(row.open),
   }))
   .filter((item) => item.summary);
+const { spriteBase = '/vitops' } = Astro.props as { spriteBase?: string };
+const sprite = `${spriteBase}/icons.svg`;
 const group = value.exclusive ? `accordion-${value._key ?? 'group'}` : undefined;
 import { rootAttrs } from './attrs.ts';
 ---
@@ -29,7 +31,14 @@ import { rootAttrs } from './attrs.ts';
     <div {...rootAttrs(value, ['accordion'])}>
       {items.map((item) => (
         <details name={group} open={item.open}>
-          <summary>{item.summary}</summary>
+          <summary>
+            <span>{item.summary}</span>
+            <span class="icon details-icon" aria-hidden="true">
+              <svg>
+                <use href={`${sprite}#icon-chevron-down`} />
+              </svg>
+            </span>
+          </summary>
           {item.body.map((p) => (
             <p>{p}</p>
           ))}

package/src/astro/blocks/Badges.astro

@@ -46,7 +46,7 @@ const items = rows<Record<string, unknown>>(value.items)
           return (
             <li>
               <Tag
-                class:list={[kind, item.tone.style && item.tone.className, item.href && 'link']}
+                class:list={[kind, item.tone.style && item.tone.surface, item.href && 'link']}
                 href={item.href || undefined}
                 style={item.tone.style || undefined}
               >

package/src/astro/blocks/Callout.astro

@@ -39,7 +39,7 @@ import { rootAttrs } from './attrs.ts';
 {
   (heading || body) && (
     <div
-      {...rootAttrs(value, ['callout', tone.className, value.solid && 'tone--solid', value.align === 'center' && 'callout--center'], joinStyle(tone.style))}
+      {...rootAttrs(value, ['callout', value.solid ? tone.className : tone.surface, value.solid && 'tone--solid', value.align === 'center' && 'callout--center'], joinStyle(tone.style))}
     >
       <div class="callout__body">
         {heading && <Heading class="callout__title font-title">{heading}</Heading>}

package/src/astro/blocks/Cards.astro

@@ -19,7 +19,7 @@
 import Cards from '@getvitops/astro/components/Cards.astro';
 import Subgrid from '@getvitops/astro/components/Subgrid.astro';
 import RichText from './RichText.astro';
-import { joinStyle, resolveTone, rowTone } from './tone.ts';
+import { joinStyle, resolveTheme, resolveTone, rowTone } from './tone.ts';
 import { headingTag, lines, resolveBlockValue, rows, safeHref, text } from './value.ts';
 
 interface Value {
@@ -44,6 +44,7 @@ const cards = rows<Record<string, unknown>>(value.cards)
     ctaLabel: text(row.ctaLabel),
     ctaHref: safeHref(row.ctaHref),
     style: rowTone(row),
+    theme: resolveTheme(row.theme),
   }))
   .filter((card) => card.title || card.body || card.image);
 const columns = Math.min(4, Math.max(1, Math.round(Number(value.columns) || 3)));
@@ -59,8 +60,8 @@ import { rootAttrs } from './attrs.ts';
     <Grid {...rootAttrs(value, [], `--subgrid-cols: ${columns}`)}>
       {cards.map((card) => (
         <li
-          class:list={['card', 'subgrid-card', panel && tone.className]}
-          style={panel ? joinStyle(tone.style, card.style) : card.style}
+          class:list={['card', 'subgrid-card', panel && tone.surface, card.theme?.className]}
+          style={joinStyle(panel ? joinStyle(tone.style, card.style) : card.style, card.theme?.style)}
         >
           {card.image && <img src={card.image} alt={card.imageAlt} loading="lazy" />}
           {card.title && <Heading class="card__title font-heading">{card.title}</Heading>}

package/src/astro/blocks/Hero.astro

@@ -8,7 +8,7 @@
  * Flat fields, because a block cannot contain other blocks.
  */
 import RichText from './RichText.astro';
-import { joinStyle, resolveTone, rowTone } from './tone.ts';
+import { joinStyle, resolveTheme, resolveTone, rowTone } from './tone.ts';
 import {
   accentRuns,
   outlineTag,
@@ -61,6 +61,7 @@ const cards = rows<Record<string, unknown>>(value.cards)
     ctaLabel: text(row.ctaLabel),
     ctaHref: safeHref(row.ctaHref),
     style: rowTone(row),
+    theme: resolveTheme(row.theme),
   }))
   .filter((card) => card.title || card.body);
 import { rootAttrs } from './attrs.ts';
@@ -68,7 +69,7 @@ import { rootAttrs } from './attrs.ts';
 
 {
   (heading || body) && (
-    <section {...rootAttrs(value, [tone.style && tone.className], joinStyle(tone.style))}>
+    <section {...rootAttrs(value, [tone.style && tone.surface], joinStyle(tone.style))}>
       <div class={split ? 'split split-1-2' : 'centered'}>
         <div class="rhythm">
           {eyebrow && <p class="font-eyebrow">{eyebrow}</p>}
@@ -100,7 +101,7 @@ import { rootAttrs } from './attrs.ts';
       {cards.length > 0 && (
         <ul class="subgrid centered" role="list" style={`--subgrid-cols: ${Math.min(4, cards.length)}`}>
           {cards.map((card) => (
-            <li class:list={['card', 'subgrid-card', card.style && 'tone']} style={card.style}>
+            <li class:list={['card', 'subgrid-card', card.style && 'tone tone--tint', card.theme?.className]} style={joinStyle(card.style, card.theme?.style)}>
               {card.eyebrow && <p class="font-eyebrow">{card.eyebrow}</p>}
               {card.title && <CardHeading class="font-heading">{card.title}</CardHeading>}
               {card.body && (

package/src/astro/blocks/Logos.astro

@@ -13,6 +13,10 @@ interface Value {
   logos?: unknown;
   grayscale?: boolean;
   size?: string;
+  kicker?: string;
+  note?: string;
+  linkLabel?: string;
+  linkHref?: string;
 }
 
 const HEIGHTS: Record<string, string> = { sm: '1.75rem', md: '2.5rem', lg: '3.5rem' };
@@ -23,11 +27,23 @@ const logos = rows<Record<string, unknown>>(value.logos)
   .map((row) => ({ image: safeHref(row.image), alt: text(row.alt), href: safeHref(row.href) }))
   .filter((logo) => logo.image || logo.alt);
 const height = HEIGHTS[text(value.size)];
+const kicker = text(value.kicker);
+const note = text(value.note);
+const linkLabel = text(value.linkLabel);
+const linkHref = safeHref(value.linkHref);
+const hasLink = Boolean(linkLabel && linkHref);
+// A wrapper exists only when there is a kicker, note or link to hold. The attributes stay on the
+// list in both cases, as they do on `vitops_cards`, so a selector on the list works either way.
+const framed = Boolean(kicker || note || hasLink);
+const Wrap = framed ? 'div' : Fragment;
+const wrapProps = framed ? { class: 'logos-block' } : {};
 import { rootAttrs } from './attrs.ts';
 ---
 
 {
   logos.length > 0 && (
+    <Wrap {...wrapProps}>
+      {kicker && <p class="logos__kicker font-eyebrow">{kicker}</p>}
     <ul
       {...rootAttrs(value, ['logos', value.grayscale && 'logos--grayscale'], height ? `--logos-height: ${height}` : undefined)}
       role="list"
@@ -47,5 +63,14 @@ import { rootAttrs } from './attrs.ts';
         </li>
       ))}
     </ul>
+      {note && <p class="logos__note font-caption">{note}</p>}
+      {hasLink && (
+        <p class="logos__link">
+          <a class="link" href={linkHref}>
+            {linkLabel}
+          </a>
+        </p>
+      )}
+    </Wrap>
   )
 }

package/src/astro/blocks/Nav.astro

@@ -66,7 +66,7 @@ import { rootAttrs } from './attrs.ts';
 {
   items.length > 0 && (
     <div
-      {...rootAttrs(value, ['navblock', toned && tone.className], toned ? joinStyle(tone.style) : undefined)}
+      {...rootAttrs(value, ['navblock', toned && tone.surface], toned ? joinStyle(tone.style) : undefined)}
     >
       {heading && <Heading class="font-heading">{heading}</Heading>}
       {variant === 'sitenav' ? (

package/src/astro/blocks/Pricing.astro

@@ -20,6 +20,8 @@ const plans = rows<Record<string, unknown>>(value.plans)
     name: text(row.name),
     price: text(row.price),
     period: text(row.period),
+    yearly: text(row.yearly),
+    note: text(row.note),
     features: lines(row.features),
     ctaLabel: text(row.ctaLabel),
     ctaHref: safeHref(row.ctaHref),
@@ -41,10 +43,12 @@ import { rootAttrs } from './attrs.ts';
         <li class:list={['pricing-card', plan.featured && 'pricing-card--featured']}>
           <div class="pricing-card__header">
             {plan.name && <Heading class="font-title">{plan.name}</Heading>}
+            {plan.note && <p class="pricing-card__note font-caption">{plan.note}</p>}
           </div>
           <p class="pricing-card__price">
             {plan.price}
             {plan.period && <small class="font-caption"> {plan.period}</small>}
+            {plan.yearly && <small class="pricing-card__yearly font-caption">{plan.yearly}</small>}
           </p>
           <ul class="pricing-card__features" role="list">
             {plan.features.map((feature) => (

package/src/astro/blocks/Reviews.astro

@@ -81,7 +81,7 @@ import { rootAttrs } from './attrs.ts';
 {
   reviews.length > 0 ? (
     <div
-      {...rootAttrs(value, ['reviews', toned && tone.className], toned ? joinStyle(tone.style) : undefined)}
+      {...rootAttrs(value, ['reviews', toned && tone.surface], toned ? joinStyle(tone.style) : undefined)}
     >
       {layout === 'carousel' ? (
         <Carousel label={label}>

package/src/astro/blocks/Section.astro

@@ -8,7 +8,9 @@
  * Composed from the framework's layout primitives: `.region` for vertical rhythm, `.centered`
  * for the tracks (the `width` field picks `breakout`/`spotlight`/`fullbleed`), `.section` for
  * the head and the heading-left `split` layout, `.tone` for the backdrop. The heading is a
- * real heading at the editor's `level`.
+ * real heading at the editor's `level`, with `*accent*` runs. Level 1 plus `cta_label`/`secondary_label`
+ * make it the page opener, so a hero is not nested in a section. `stack: rhythm` puts `.rhythm` on the
+ * inner element so head and body are spaced by the vertical-rhythm scale.
  *
  * The body is rendered by EmDash's `<PortableText>`, which merges this plugin's
  * `blockComponents`, so a `vitops_cards` or `vitops_actionLink` placed in it renders with its
@@ -22,7 +24,7 @@
 const { PortableText } = await import('emdash/ui');
 import { unrenderedTypes } from './unrendered.ts';
 import { joinStyle, resolveTone } from './tone.ts';
-import { outlineTag, resolveBlockValue, text } from './value.ts';
+import { accentRuns, outlineTag, resolveBlockValue, safeHref, text } from './value.ts';
 
 interface Value {
   kicker?: string;
@@ -36,6 +38,12 @@ interface Value {
   color?: string;
   solid?: boolean;
   theme?: string;
+  // A block TYPE's slugs must be lowercase (like `class_name`), so these are snake_case.
+  cta_label?: string;
+  cta_href?: string;
+  secondary_label?: string;
+  secondary_href?: string;
+  stack?: string;
 }
 
 const WIDTHS: Record<string, string> = {
@@ -57,22 +65,49 @@ const tone = resolveTone(value.tone, value.color);
 const solid = Boolean(value.solid);
 const layout = text(value.layout);
 const width = WIDTHS[text(value.width)];
-const hasHead = Boolean(kicker || heading || sub);
+const headingRuns = accentRuns(heading);
+const ctaLabel = text(value.cta_label);
+const ctaHref = safeHref(value.cta_href);
+const secondaryLabel = text(value.secondary_label);
+const secondaryHref = safeHref(value.secondary_href);
+const hasActions = Boolean((ctaLabel && ctaHref) || (secondaryLabel && secondaryHref));
+const stacked = text(value.stack) === 'rhythm';
+const hasHead = Boolean(kicker || heading || sub || hasActions);
 import { rootAttrs } from './attrs.ts';
 ---
 
 {
   (hasHead || body.length > 0) && (
     <section
-      {...rootAttrs(value, ['section', 'region', tone.style && tone.className, tone.style && solid && 'tone--solid', layout === 'split' && 'section--split', layout === 'center' && 'section--center'], joinStyle(tone.style))}
+      {...rootAttrs(value, ['section', 'region', tone.style && (solid ? tone.className : tone.surface), tone.style && solid && 'tone--solid', layout === 'split' && 'section--split', layout === 'center' && 'section--center'], joinStyle(tone.style))}
     >
       <div class="centered">
-        <div class:list={['section__inner', width]}>
+        <div class:list={['section__inner', width, stacked && 'rhythm']}>
           {hasHead && (
             <header class="section__head">
               {kicker && <p class="section__kicker font-eyebrow">{kicker}</p>}
-              {heading && <Heading class="section__title font-title">{heading}</Heading>}
+              {heading && (
+                <Heading class="section__title font-title">
+                  {headingRuns.map((run) =>
+                    run.accent ? <em class="accent">{run.text}</em> : run.text,
+                  )}
+                </Heading>
+              )}
               {sub && <p class="section__sub font-lead">{sub}</p>}
+              {hasActions && (
+                <p class="section__actions cluster">
+                  {ctaLabel && ctaHref && (
+                    <a class="cta" href={ctaHref}>
+                      {ctaLabel}
+                    </a>
+                  )}
+                  {secondaryLabel && secondaryHref && (
+                    <a class="link" href={secondaryHref}>
+                      {secondaryLabel}
+                    </a>
+                  )}
+                </p>
+              )}
             </header>
           )}
           {body.length > 0 && (

package/src/astro/blocks/attrs.test.ts

@@ -58,7 +58,7 @@ describe('blockAttrs', () => {
 describe('theme on every block', () => {
   it('adds the tinted classes and --tone-* properties to the root', () => {
     const a = rootAttrs({ theme: 'surface' }, ['callout']);
-    expect(a.class).toBe('callout tone');
+    expect(a.class).toBe('callout tone tone--tint');
     expect(a.style).toContain('--tone-bg: var(--color-bg-surface-muted');
   });
   it('fills with the role solid and its computed text for `<role>:solid`', () => {
@@ -67,7 +67,9 @@ describe('theme on every block', () => {
     expect(a.style).toContain('--tone-on-solid: var(--color-text-on-brand-primary');
   });
   it("replaces a block's own tone classes rather than doubling them, and is inert for none", () => {
-    expect(rootAttrs({ theme: 'info' }, ['x', 'tone', 'tone--solid']).class).toBe('x tone');
+    expect(rootAttrs({ theme: 'info' }, ['x', 'tone', 'tone--solid']).class).toBe(
+      'x tone tone--tint',
+    );
     expect(rootAttrs({ theme: 'none' }, ['x', 'tone']).class).toBe('x tone');
     expect(rootAttrs({ theme: 'bad role!' }, ['x']).class).toBe('x');
   });

package/src/astro/blocks/attrs.ts

@@ -102,7 +102,7 @@ export function rootAttrs(
   const out: BlockAttrs = {};
   if (user.id) out.id = user.id;
   const cls = [
-    ...own.filter((c) => !theme || (c !== 'tone' && c !== 'tone--solid')),
+    ...own.filter((c) => !theme || (c !== 'tone' && c !== 'tone--solid' && c !== 'tone--tint')),
     theme?.className,
     user.id && 'block-anchor',
     user.class,

package/src/astro/blocks/render.container.test.ts

@@ -59,7 +59,7 @@ describe('vitops_cards', () => {
       tone: 'brand-primary',
       cards: [{ title: 'Pillar', checklist: 'one\ntwo', ctaLabel: 'Go', ctaHref: '/go' }],
     });
-    expect(html).toContain('class="card subgrid-card tone"');
+    expect(html).toContain('class="card subgrid-card tone tone--tint"');
     expect(html).toContain('--tone-bg: var(--color-bg-brand-primary-muted');
     expect(html).toContain('<li>one</li>');
     expect(html).toContain('class="cta" href="/go"');
@@ -210,6 +210,25 @@ describe('vitops_entries', () => {
   });
 });
 
+describe('vitops_logos frame', () => {
+  it('wraps the row with a kicker, note and link only when one is set', async () => {
+    const bare = await render(Logos, { logos: [{ alt: 'Acme' }] });
+    expect(bare).not.toContain('logos-block');
+    const html = await render(Logos, {
+      kicker: 'Trusted by',
+      note: 'and 40 more',
+      linkLabel: 'All partners',
+      linkHref: '/partners',
+      logos: [{ alt: 'Acme' }],
+    });
+    expect(html).toContain('<div class="logos-block">');
+    expect(html).toContain('<p class="logos__kicker font-eyebrow">Trusted by</p>');
+    expect(html).toContain('<p class="logos__note font-caption">and 40 more</p>');
+    expect(html).toContain('<a class="link" href="/partners">All partners</a>');
+    expect(html).toContain('aria-label="Partners"');
+  });
+});
+
 describe('vitops_pricing', () => {
   it('aligns plans through the pricing-card subgrid rows', async () => {
     const html = await render(Pricing, {
@@ -238,6 +257,24 @@ describe('vitops_pricing', () => {
     expect(html).toContain('<h3 class="font-title">Pro</h3>');
     expect(html).toContain('pricing-card__feature');
   });
+
+  it('carries a yearly line and a note per plan', async () => {
+    const html = await render(Pricing, {
+      plans: [
+        {
+          name: 'Pro',
+          price: '$39',
+          period: '/month',
+          yearly: '$34 paid yearly',
+          note: 'Best for teams',
+        },
+      ],
+    });
+    expect(html).toContain(
+      '<small class="pricing-card__yearly font-caption">$34 paid yearly</small>',
+    );
+    expect(html).toContain('<p class="pricing-card__note font-caption">Best for teams</p>');
+  });
 });
 
 describe('vitops_embed', () => {
@@ -385,7 +422,7 @@ describe('vitops_reviews', () => {
     fixtures.cache = { version: 1, locations: { ottawa: { reviews: [review('a', 5)] } } };
     const { default: Reviews } = await import('./Reviews.astro');
     const html = await render(Reviews, { tone: 'brand-primary' });
-    expect(html).toContain('class="reviews tone"');
+    expect(html).toContain('class="reviews tone tone--tint"');
     expect(html).toContain('<article class="review"');
   });
 });
@@ -491,13 +528,38 @@ describe('vitops_section', () => {
         },
       },
     });
-    expect(html).toContain('section region tone section--split');
+    expect(html).toContain('section region tone tone--tint section--split');
     expect(html).toContain('<h3 class="section__title font-title">Two services</h3>');
     expect(html).toContain('Why us');
     expect(html).toContain('Body copy');
     expect(html).toContain('class="logos"');
     expect(html).toContain('alt="Acme"');
   }, 60_000);
+
+  it('is a page opener: accent heading, two actions and a rhythm stack', async () => {
+    const { default: Section } = await import('./Section.astro');
+    const container = await AstroContainer.create();
+    const html = await container.renderToString(Section as unknown as Component, {
+      props: {
+        value: {
+          heading: 'Two services. *One team.*',
+          level: '1',
+          sub: 'Lead',
+          cta_label: 'Book a call',
+          cta_href: '/contact',
+          secondary_label: 'See pricing',
+          secondary_href: '/pricing',
+          stack: 'rhythm',
+        },
+      },
+    });
+    expect(html).toContain(
+      '<h1 class="section__title font-title">Two services. <em class="accent">One team.</em></h1>',
+    );
+    expect(html).toContain('<a class="cta" href="/contact">Book a call</a>');
+    expect(html).toContain('<a class="link" href="/pricing">See pricing</a>');
+    expect(html).toContain('class="section__inner rhythm"');
+  }, 60_000);
 });
 
 describe('vitops_form', () => {
@@ -680,3 +742,21 @@ describe('per-item colour and hero card extras', () => {
     expect(html).not.toContain('stretched-link');
   });
 });
+
+describe('per-card theme', () => {
+  it('tints one card without touching its siblings', async () => {
+    const container = await AstroContainer.create();
+    const html = await container.renderToString(Cards as unknown as Component, {
+      props: {
+        value: {
+          variant: 'panel',
+          cards: [{ title: 'Without us', theme: 'danger' }, { title: 'With us' }],
+        },
+      },
+    });
+    const [first, second] = html.split('<li ').slice(1);
+    expect(first).toContain('tone tone--tint');
+    expect(first).toContain('--tone-bg');
+    expect(second).not.toContain('--tone-bg');
+  }, 60_000);
+});

package/src/astro/blocks/tone.test.ts

@@ -16,8 +16,8 @@ describe('toneChain', () => {
 
 describe('resolveTone', () => {
   it('is empty when nothing is set, so an unconfigured block stays transparent', () => {
-    expect(resolveTone()).toEqual({ className: 'tone', style: '' });
-    expect(resolveTone('', '')).toEqual({ className: 'tone', style: '' });
+    expect(resolveTone()).toEqual({ className: 'tone', surface: 'tone', style: '' });
+    expect(resolveTone('', '')).toEqual({ className: 'tone', surface: 'tone', style: '' });
   });
 
   it('resolves a role to var() chains the framework tokens satisfy', () => {

package/src/astro/blocks/tone.ts

@@ -68,6 +68,8 @@ function chain(tokens: string[]): string {
 export interface ResolvedTone {
   /** Always `tone`; a block adds `tone--solid` itself when it fills rather than tints. */
   className: string;
+  /** `tone tone--tint`: what a block that is a surface (callout, card, band) puts on its root. */
+  surface: string;
   /** Inline `style` value of `--tone-*` properties (no trailing semicolon). Empty when unset. */
   style: string;
 }
@@ -94,6 +96,7 @@ export function resolveTone(tone?: unknown, color?: unknown): ResolvedTone {
     const flip = (light: string, dark: string) => `light-dark(${at(light)}, ${at(dark)})`;
     return {
       className: 'tone',
+      surface: 'tone tone--tint',
       style: [
         `--tone-bg: ${flip('100', '900')}`,
         `--tone-fg: ${flip('900', '100')}`,
@@ -104,13 +107,14 @@ export function resolveTone(tone?: unknown, color?: unknown): ResolvedTone {
     };
   }
 
-  if (!hasTone) return { className: 'tone', style: '' };
+  if (!hasTone) return { className: 'tone', surface: 'tone', style: '' };
 
   const roles = toneChain(tone);
   const of = (prefix: string, suffix = '') =>
     chain(roles.map((r) => `--color-${prefix}-${r}${suffix}`));
   return {
     className: 'tone',
+    surface: 'tone tone--tint',
     style: [
       `--tone-bg: ${of('bg', '-muted')}`,
       `--tone-fg: ${of('text')}`,
@@ -160,5 +164,8 @@ export function resolveTheme(theme: unknown): { className: string; style: string
   if (!role || !ROLE.test(role)) return undefined;
   const tone = resolveTone(role);
   if (!tone.style) return undefined;
-  return { className: fill === 'solid' ? 'tone tone--solid' : 'tone', style: tone.style };
+  return {
+    className: fill === 'solid' ? 'tone tone--solid' : 'tone tone--tint',
+    style: tone.style,
+  };
 }