@sproutsocial/seeds-react-narrative-kit 0.2.0 → 0.4.0

package/src/NarrativeSummary/__tests__/NarrativeSummary.test.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import NarrativeSummary from "../NarrativeSummary";
+
+const baseProps = {
+  headline: "Headline goes here",
+  summary: "A short summary.",
+  keyThemes: ["Theme one", "Theme two"],
+};
+
+describe("NarrativeSummary", () => {
+  it("renders the headline, eyebrow, summary, and key themes", () => {
+    render(<NarrativeSummary {...baseProps} eyebrow="June 10th" />);
+
+    expect(screen.getByText("June 10th")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Headline goes here" })
+    ).toBeInTheDocument();
+    expect(screen.getByText("A short summary.")).toBeInTheDocument();
+    expect(screen.getByText("Theme one")).toBeInTheDocument();
+    expect(screen.getByText("Theme two")).toBeInTheDocument();
+  });
+
+  it("renders the headline at the small size", () => {
+    const { container } = render(<NarrativeSummary {...baseProps} />);
+
+    expect(
+      container.querySelector(".seeds-narrative-headline-small")
+    ).toBeInTheDocument();
+  });
+
+  it("uses the default section labels and allows overrides", () => {
+    const { rerender } = render(<NarrativeSummary {...baseProps} />);
+    expect(screen.getByText("Summary")).toBeInTheDocument();
+    expect(screen.getByText("Key themes")).toBeInTheDocument();
+
+    rerender(
+      <NarrativeSummary
+        {...baseProps}
+        summaryLabel="Overview"
+        keyThemesLabel="Highlights"
+      />
+    );
+    expect(screen.getByText("Overview")).toBeInTheDocument();
+    expect(screen.getByText("Highlights")).toBeInTheDocument();
+  });
+
+  it("renders the key themes as list items", () => {
+    render(<NarrativeSummary {...baseProps} />);
+
+    expect(screen.getAllByRole("listitem")).toHaveLength(2);
+  });
+
+  it("renders the action only when provided", () => {
+    const { rerender } = render(<NarrativeSummary {...baseProps} />);
+    expect(
+      screen.queryByRole("button", { name: "Action" })
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <NarrativeSummary {...baseProps} action={<button>Action</button>} />
+    );
+    expect(screen.getByRole("button", { name: "Action" })).toBeInTheDocument();
+  });
+
+  it("omits a section when its content is empty", () => {
+    render(<NarrativeSummary headline="Only summary" summary="Just this." />);
+
+    expect(screen.getByText("Summary")).toBeInTheDocument();
+    expect(screen.queryByText("Key themes")).not.toBeInTheDocument();
+  });
+
+  it("applies the two-column modifier class", () => {
+    const { container } = render(
+      <NarrativeSummary {...baseProps} layout="two-column" />
+    );
+
+    expect(
+      container.querySelector(".seeds-narrative-summary-two-column")
+    ).toBeInTheDocument();
+  });
+
+  it("merges a consumer className with the base class", () => {
+    const { container } = render(
+      <NarrativeSummary {...baseProps} className="custom" />
+    );
+
+    const root = container.querySelector(".seeds-narrative-summary");
+    expect(root).toBeInTheDocument();
+    expect(root).toHaveClass("custom");
+  });
+
+  it("forwards its ref to the underlying div element", () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(<NarrativeSummary {...baseProps} ref={ref} />);
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+});

package/src/NarrativeSummary/index.ts

@@ -0,0 +1,5 @@
+export { default as NarrativeSummary } from "./NarrativeSummary";
+export type {
+  TypeNarrativeSummaryProps,
+  TypeNarrativeSummaryLayout,
+} from "./NarrativeSummaryTypes";

package/src/Playground/Playground.stories.tsx

@@ -8,12 +8,34 @@ import NarrativeHeadlineRoll from "../NarrativeHeadline/NarrativeHeadlineRoll";
 import PullQuote from "../PullQuote/PullQuote";
 import MetricHighlight from "../MetricHighlight/MetricHighlight";
 import EyebrowToken from "../EyebrowToken/EyebrowToken";
+import NarrativeDivider from "../NarrativeDivider/NarrativeDivider";
+import NarrativeSummary from "../NarrativeSummary/NarrativeSummary";
+import NarrativeOrderedList from "../NarrativeOrderedList/NarrativeOrderedList";
+import NarrativeDataCallout from "../NarrativeDataCallout/NarrativeDataCallout";
+import Button from "@sproutsocial/seeds-react-button";
 import Text from "@sproutsocial/seeds-react-text";
+import { SparklineChart } from "@sproutsocial/seeds-react-data-viz/sparkline";
+import { DonutChart } from "@sproutsocial/seeds-react-data-viz/donut";
 import "../narrative-container.css";
 import "../narrative-headline.css";
 import "../pull-quote.css";
 import "../metric-highlight.css";
 import "../eyebrow-token.css";
+import "../narrative-divider.css";
+import "../narrative-summary.css";
+import "../narrative-ordered-list.css";
+import "../narrative-data-callout.css";
+import "@sproutsocial/seeds-react-button/dist/button.css";
+import "@sproutsocial/seeds-react-data-viz/sparkline.css";
+
+const spark = (data: number[], variant: "line" | "bar" = "line") => (
+  <SparklineChart
+    variant={variant}
+    description="Trend"
+    data={data}
+    className="h-full w-full"
+  />
+);
 
 /**
  * Narrative Kit — Playground (showcase story)
@@ -40,56 +62,172 @@ const Attribution = ({ name }: { name: string }) => (
 const Brief = () => (
   <div className="box-border min-h-screen p-600 bg-app-bg-base">
     <div className="max-w-280 mx-auto grid gap-500">
-			<span>
-      <EyebrowToken className="mb-300 inline-flex">May 31, 2026</EyebrowToken>
-      <NarrativeHeadline headingLevel={1}>
-				The social suite built for{" "}
-				<NarrativeHeadlineRoll
-					words={["marketers", "agencies", "enterprise teams", "founders"]}
-				/>
-			</NarrativeHeadline>
-      <Text.BodyCopy mt={400} display="block" width="50ch">
-        Empowering cross-functional stakeholders to drive engagement at scale and accelerate time-to-value through data-driven content strategies aligned with your brand's north-star KPIs.
-      </Text.BodyCopy>
-			</span>
-
-
+      <span>
+        <EyebrowToken className="mb-300 inline-flex">May 31, 2026</EyebrowToken>
+        <NarrativeHeadline headingLevel={1}>
+          The social suite built for{" "}
+          <NarrativeHeadlineRoll
+            words={["marketers", "agencies", "enterprise teams", "founders"]}
+          />
+        </NarrativeHeadline>
+        <Text.BodyCopy mt={400} display="block" width="50ch">
+          Empowering cross-functional stakeholders to drive engagement at scale
+          and accelerate time-to-value through data-driven content strategies
+          aligned with your brand's north-star KPIs.
+        </Text.BodyCopy>
+      </span>
 
       {/* Pull quotes ------------------------------------------------------- */}
       <NarrativeContainer className="w-full">
-        <Grid columns={{ sm: 1, md: 1 }} gap={400}>
-					{/* Metric highlights — a row of 3 -------------------------------- */}
-					<Grid columns={{ sm: 1, md: 2, lg: 3 }} gap={400}>
-						<MetricHighlight
-							label="Impressions"
-							value="1.2M"
-							trend={{ direction: "up", value: "18%", "aria-label": "up 18%" }}
-							data={[8, 12, 9, 15, 13, 19]}
-						/>
-						<MetricHighlight
-							label="Engagement rate"
-							value="6.4%"
-							trend={{ direction: "up", value: "240%", "aria-label": "up 240%" }}
-							data={[3, 5, 4, 7, 6, 9]}
-						/>
-						<MetricHighlight
-							label="Response time"
-							value="2h"
-							trend={{ direction: "down", value: "12%", "aria-label": "down 12%" }}
-							data={[18, 16, 17, 13, 14, 10]}
-						/>
-					</Grid>
+        <Grid columns={{ sm: 1, md: 1 }} gap={500}>
+          {/* Metric highlights — a row of 3 -------------------------------- */}
+          <Grid columns={{ sm: 1, md: 2, lg: 3 }} gap={400}>
+            <MetricHighlight
+              label="Impressions"
+              value="1.2M"
+              trend={{ direction: "up", value: "18%", "aria-label": "up 18%" }}
+              sparkline={spark([8, 12, 9, 15, 13, 19])}
+            />
+            <MetricHighlight
+              label="Engagement rate"
+              value="6.4%"
+              trend={{
+                direction: "up",
+                value: "240%",
+                "aria-label": "up 240%",
+              }}
+              sparkline={spark([3, 5, 4, 7, 6, 9])}
+            />
+            <MetricHighlight
+              label="Response time"
+              value="2h"
+              trend={{
+                direction: "down",
+                value: "12%",
+                "aria-label": "down 12%",
+              }}
+              sparkline={spark([18, 16, 17, 13, 14, 10], "bar")}
+            />
+          </Grid>
+
+          {/* Divider — separates the metric row from the narrative below --- */}
+          <NarrativeDivider />
+
+          {/* Narrative summary (2-column) — between the pull quotes -------- */}
+          <NarrativeSummary
+            layout="two-column"
+            eyebrow="June 10th"
+            headline="Engagement climbed across every owned channel this month"
+            summary="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec odio leo, gravida vitae sodales vitae, tempor eget ligula. Vestibulum nec enim eget mi placerat finibus. Donec tempor tincidunt elit."
+            keyThemes={[
+              "Reply threads outperformed paid pushes for the week.",
+              "Average response time dropped nearly in half.",
+              "Enterprise segment drove the largest share of new engagement.",
+            ]}
+          />
+
           <PullQuote
             quote="The reply thread on the 18th outperformed our entire paid push for the week."
             attribution={<Attribution name="Jordan Lee" />}
           />
+
+          <NarrativeDivider />
+
+          <NarrativeOrderedList
+            items={[
+              {
+                title: "Double down on reply threads",
+                description:
+                  "Shift a slice of paid budget toward the organic reply threads that outperformed this week.",
+                action: (
+                  <Button appearance="ai-secondary">Suggested Action</Button>
+                ),
+              },
+              {
+                title: "Protect response time at peak",
+                description:
+                  "Add coverage during the two peak windows to hold response time under two hours.",
+                action: (
+                  <Button appearance="ai-secondary">Suggested Action</Button>
+                ),
+              },
+              {
+                title: "Lean into the enterprise segment",
+                description:
+                  "Build a follow-up sequence for the enterprise cohort that drove the most new engagement.",
+                action: (
+                  <Button appearance="ai-secondary">Suggested Action</Button>
+                ),
+              },
+            ]}
+          />
+
+          <NarrativeDivider />
+
+          {/* Narrative summary (3-column) — below the pull quotes --------- */}
+          <NarrativeSummary
+            eyebrow="Quarterly review"
+            headline="Three themes defined the quarter for the brand"
+            action={<Button appearance="primary">View report</Button>}
+            summary="Praesent pretium libero vitae arcu blandit pellentesque. Aenean fermentum, nisi eu blandit placerat, ligula ligula euismod ante, id semper nibh diam ac ipsum."
+            keyThemes={[
+              "Owned channels outpaced paid across every region.",
+              "Response time held under two hours through peak weeks.",
+              "Sentiment trended positive after the product launch.",
+            ]}
+          />
+
           <PullQuote
             appearance="vivid"
             quote="This rollout cut our average response time nearly in half."
             attribution={<Attribution name="Priya Nair" />}
           />
+
+          <NarrativeDivider />
+
+          {/* Data callout — a data-viz visual paired with narrative copy ---- */}
+          <NarrativeDataCallout
+            visual={
+              <DonutChart
+                description="Goal completion: 80% complete"
+                data={[
+                  { name: "Complete", value: 80 },
+                  { name: "Remaining", value: 20 },
+                ]}
+              />
+            }
+          >
+            We're 80% of the way to closing out this quarter's goal — a clear
+            signal that the cross-functional alignment we drove upstream is now
+            compounding into measurable downstream velocity. With the remaining
+            20% squarely in view, we're doubling down on the workstreams that
+            move the needle and sunsetting the low-leverage noise to land this
+            initiative ahead of the curve.
+          </NarrativeDataCallout>
         </Grid>
       </NarrativeContainer>
+      <NarrativeContainer>
+        <NarrativeOrderedList
+          orientation="horizontal"
+          items={[
+            {
+              title: "Unlock audience momentum",
+              description:
+                "Reallocate engagement capacity toward the content clusters generating outsized share-of-voice gains across high-intent segments.",
+            },
+            {
+              title: "Operationalize your top performers",
+              description:
+                "Templatize the creative formats moving the needle this quarter and activate them across your highest-converting touchpoints.",
+            },
+            {
+              title: "Accelerate pipeline velocity",
+              description:
+                "Trigger a nurture sequence for the buyer personas showing the strongest conversion propensity signals right now.",
+            },
+          ]}
+        />
+      </NarrativeContainer>
     </div>
   </div>
 );

package/src/PullQuote/PullQuote.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import PullQuote from "./PullQuote";
 import "../pull-quote.css";
+import "../ai-container.css";
 
 const meta = {
   title: "Narrative Kit/PullQuote",
@@ -16,7 +17,9 @@ type Story = StoryObj<typeof meta>;
 
 const Attribution = () => (
   <>
-    <span aria-hidden className="text-400">🧵</span>
+    <span aria-hidden className="text-400">
+      🧵
+    </span>
     <span>Display Name</span>
   </>
 );

package/src/PullQuote/PullQuote.tsx

@@ -8,9 +8,10 @@ import type { TypePullQuoteProps } from "./PullQuoteTypes";
  * optional attribution row (author name, avatar, network).
  *
  * Rendered as semantic `<figure>` / `<blockquote>` / `<figcaption>` markup.
- * Styled via `pull-quote.css` (Seeds CSS custom properties); consumers import
- * the classes through `@sproutsocial/racine/css/components`. Surface overrides
- * are done with standard `className` / `style`.
+ * Styled via `pull-quote.css` and `ai-container.css` (Seeds CSS custom
+ * properties); consumers import the classes through
+ * `@sproutsocial/racine/css/components`. Surface overrides are done with
+ * standard `className` / `style`.
  */
 const PullQuote = React.forwardRef<HTMLElement, TypePullQuoteProps>(
   ({ quote, attribution, appearance = "subtle", className, ...props }, ref) => {
@@ -19,6 +20,8 @@ const PullQuote = React.forwardRef<HTMLElement, TypePullQuoteProps>(
         ref={ref}
         className={cn(
           "seeds-pull-quote",
+          "seeds-ai-container",
+          { "seeds-ai-container-vivid": appearance === "vivid" },
           { "seeds-pull-quote-vivid": appearance === "vivid" },
           className
         )}

package/src/PullQuote/PullQuoteTypes.ts

@@ -1,7 +1,6 @@
 import type * as React from "react";
 
-export interface TypePullQuoteProps
-  extends React.HTMLAttributes<HTMLElement> {
+export interface TypePullQuoteProps extends React.HTMLAttributes<HTMLElement> {
   /** The quotation text, rendered emphasized inside the accented bar. */
   quote: React.ReactNode;
   /**

package/src/ai-container.css

@@ -0,0 +1,39 @@
+/**
+ * Seeds AIContainer component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-ai-container">…</div>            // subtle (default)
+ *   <div class="seeds-ai-container seeds-ai-container-vivid">…</div>
+ */
+
+@layer components {
+
+.seeds-ai-container {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  border-radius: var(--radius-800);
+  box-shadow: var(--shadow-low);
+  font-family: var(--font-family);
+  /* Subtle (default): the 20% AI gradient tint composited over the base
+     surface. --color-gradient-ai-subtle is already translucent, so layering it
+     over the opaque base color produces the soft wash. */
+  background-color: var(--color-container-bg-base);
+  background-image: var(--color-gradient-ai-subtle);
+  color: var(--color-text-headline);
+}
+
+/* Vivid: the full-saturation AI gradient with white content. White has no
+   semantic Seeds token; it is part of the AI gradient treatment (mirrors the
+   raw brand hex used in --color-gradient-ai). */
+.seeds-ai-container-vivid {
+  background-color: transparent;
+  background-image: var(--color-gradient-ai);
+  color: #fff;
+}
+
+}

package/src/index.ts

@@ -19,10 +19,35 @@ export { PullQuote, type TypePullQuoteProps } from "./PullQuote";
 
 export { EyebrowToken, type TypeEyebrowTokenProps } from "./EyebrowToken";
 
+export {
+  NarrativeDivider,
+  type TypeNarrativeDividerProps,
+} from "./NarrativeDivider";
+
 export {
   MetricHighlight,
   type TypeMetricHighlightProps,
   type TypeMetricHighlightTrend,
 } from "./MetricHighlight";
 
+export {
+  NarrativeSummary,
+  type TypeNarrativeSummaryProps,
+  type TypeNarrativeSummaryLayout,
+} from "./NarrativeSummary";
+
+export {
+  NarrativeOrderedList,
+  type TypeNarrativeOrderedListProps,
+  type TypeNarrativeOrderedListItem,
+  type TypeNarrativeOrderedListOrientation,
+} from "./NarrativeOrderedList";
+
+export {
+  NarrativeDataCallout,
+  type TypeNarrativeDataCalloutProps,
+} from "./NarrativeDataCallout";
+
+export { AIContainer, type TypeAIContainerProps } from "./AIContainer";
+
 export type { TypeNarrativeTone } from "./_internal/types";

package/src/metric-highlight.css

@@ -131,47 +131,37 @@
   stroke-width: 1.5;
 }
 
-/* Sparkline — a single normalized polyline stretched to fit. The non-scaling
-   stroke keeps a crisp 2px line at any aspect ratio. */
-.seeds-metric-highlight-spark {
-  display: block;
+/* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
+   stroke/background styling, so the injected chart controls its own look. Heights
+   are explicit (never percentage/stretch) so a Highcharts chart always measures a
+   concrete container instead of falling back to its 400px default. */
+.seeds-metric-highlight-chart {
+  box-sizing: border-box;
   flex: 0 0 auto;
-  /* Matches the design's Data Viz / Categorical 01 line color (#0b968f). */
-  stroke: var(--color-teal-700);
-}
-
-/* Downward trend: the red analog at the same scale step (#db3e3e). */
-.seeds-metric-highlight-spark-negative {
-  stroke: var(--color-red-700);
-}
-
-.seeds-metric-highlight-spark path {
-  stroke: inherit;
-  stroke-width: 2;
-  vector-effect: non-scaling-stroke;
+  align-self: center;
+  /* Center the injected chart as a flex item — an inline/inline-block child
+     (e.g. the data-viz SparklineChart) otherwise sits on the text baseline with
+     descender space below it, reading as vertically off-center in the slot. */
+  display: flex;
+  align-items: center;
 }
 
-/* Horizontal: a compact fixed-width chart beside the metric, matched to the
-   metric block's height. */
-.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-spark {
+.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
   width: 104px;
-  align-self: stretch;
-  min-height: 40px;
+  height: 48px;
 }
 
-.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-spark {
+.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
   width: 88px;
   height: 40px;
-  align-self: center;
 }
 
-/* Vertical: a full-width chart stacked beneath the metric. */
-.seeds-metric-highlight-vertical .seeds-metric-highlight-spark {
+.seeds-metric-highlight-vertical .seeds-metric-highlight-chart {
   width: 100%;
   height: 96px;
 }
 
-.seeds-metric-highlight-vertical.seeds-metric-highlight-small .seeds-metric-highlight-spark {
+.seeds-metric-highlight-vertical.seeds-metric-highlight-small .seeds-metric-highlight-chart {
   height: 56px;
 }
 

package/src/narrative-data-callout.css

@@ -0,0 +1,103 @@
+/**
+ * Seeds NarrativeDataCallout component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * The layout is a flex row driven by a container query on the root, so the
+ * visual/text columns stack based on the width the component is given, not the
+ * viewport.
+ *
+ * Usage:
+ *   <div class="seeds-narrative-data-callout">
+ *     <div class="seeds-narrative-data-callout-row">
+ *       <div class="seeds-narrative-data-callout-visual">…chart…</div>
+ *       <div class="seeds-narrative-data-callout-body">…copy…</div>
+ *     </div>
+ *   </div>
+ */
+
+@layer components {
+
+/* Establishes the query container. The row inside reacts to this element's
+   inline size. A container query only styles DESCENDANTS of the query container,
+   so the flex row lives on the inner element, not this one. */
+.seeds-narrative-data-callout {
+  container-type: inline-size;
+  box-sizing: border-box;
+  font-family: var(--font-family);
+}
+
+/* Stacked single column by default (narrow). The container query below turns it
+   into the horizontal 1/3 + 2/3 row once there is room. */
+.seeds-narrative-data-callout-row {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-450); /* 24px */
+}
+
+/* Visual slot — layout only, no stroke/background so the injected chart controls
+   its own look and its own size. No fixed height: charts like the data-viz
+   DonutChart carry their own intrinsic height (and a legend), so the slot sizes
+   to the chart rather than clipping it. Stacked full-width until the container
+   query expands the row. */
+.seeds-narrative-data-callout-visual {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+}
+
+/* Stretch the injected visual to the slot's full width. A fluid-width chart like
+   the v2 DonutChart otherwise shrinks to content inside this centered flex slot,
+   so Highcharts fills that shrunk width and the ring gets width-capped below its
+   fixed 270px height — leaving an empty vertical band. Filling the width lets the
+   ring become height-capped and fill its box top-to-bottom, like the standalone
+   chart story. */
+.seeds-narrative-data-callout-visual > * {
+  width: 100%;
+}
+
+/* Body copy — fills the remaining space. */
+.seeds-narrative-data-callout-body {
+  box-sizing: border-box;
+  min-width: 0;
+  font-size: var(--font-size-300); /* 16px */
+  line-height: var(--line-height-400); /* ~28px */
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+  overflow-wrap: break-word;
+}
+
+/* Expand to the horizontal 1/3 + 2/3 split once the component is wide enough.
+   The threshold is on the component's own width (container query), so a narrow
+   callout on a wide screen still stacks. 480px keeps the donut + copy readable
+   side by side. */
+@container (min-width: 480px) {
+  .seeds-narrative-data-callout-row {
+    flex-direction: row;
+  }
+
+  .seeds-narrative-data-callout-visual {
+    /* Nominally one-third, but never narrower than the injected chart's fixed
+       height (the v2 DonutChart is 270px tall). Below that width a fluid-width,
+       fixed-height chart like the donut gets width-capped and leaves an empty
+       vertical band above/below the ring; the min-width keeps the visual square
+       enough that the ring fills its box top-to-bottom, matching the standalone
+       chart story. */
+    flex: 0 0 33.333%;
+    min-width: 270px;
+    width: auto;
+  }
+
+  .seeds-narrative-data-callout-body {
+    flex: 1 1 0;
+  }
+}
+
+}