@sproutsocial/racine 31.3.1 → 31.5.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Change Log
 
+## 31.5.0
+
+### Minor Changes
+
+- 1aca1d1: `MetricHighlight` now takes a `sparkline` render slot instead of owning the
+  chart itself. Pass any node (e.g. a `<SparklineChart />` from
+  `@sproutsocial/seeds-react-data-viz/sparkline`) to render it beside/below the
+  metric; omit it to render the metric on its own. This replaces the previous
+  `data` and `chart` props.
+- 0b37765: Add the `NarrativeDivider` primitive to `seeds-react-narrative-kit` — a full-width,
+  1px horizontal rule for separating sections within a narrative brief, using the
+  `container.border` token (dark-mode aware). Exported through `@sproutsocial/racine`.
+- 0b37765: Add the `NarrativeSummary` primitive to `seeds-react-narrative-kit` — a composed
+  block pairing a lead column (eyebrow + headline + optional action) with a Summary
+  section and a Key themes list, laid out as a container-query-driven grid with
+  `three-column` and `two-column` (1/3 | 2/3) arrangements. Also adds a `size` prop
+  (`"default" | "small"`) to `NarrativeHeadline`. Exported through
+  `@sproutsocial/racine`.
+
+### Patch Changes
+
+- Updated dependencies [1aca1d1]
+- Updated dependencies [0b37765]
+- Updated dependencies [0b37765]
+  - @sproutsocial/seeds-react-narrative-kit@0.3.0
+
+## 31.4.0
+
+### Minor Changes
+
+- 7ce52ce: Add narrative primitives to `seeds-react-narrative-kit`: `MetricHighlight` for
+  emphasizing key figures, `NarrativeHeadline` (with highlight and roll variants) for
+  section headers, and `PullQuote` for callout quotations. All are exported through
+  `@sproutsocial/racine`.
+
+### Patch Changes
+
+- Updated dependencies [7ce52ce]
+  - @sproutsocial/seeds-react-narrative-kit@0.2.0
+  - @sproutsocial/seeds-react-accordion@0.4.47
+
 ## 31.3.1
 
 ### Patch Changes

package/dist/components.css

@@ -1078,6 +1078,215 @@
   }
 }
 
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds EyebrowToken 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:
+ *   <span class="seeds-eyebrow-token">May 31, 2026</span>
+ */
+
+@layer components {
+
+/* A solid gray pill matching the design: background and border are both the
+   #dee1e1 container-border-base token, which also tracks dark mode. The two
+   pixel literals below have no exact theme token — the --space scale skips 6px
+   (4px→8px) and the --font-size scale skips 12px (11px→13px) — so the design's
+   values are kept verbatim. All colors use tokens. */
+.seeds-eyebrow-token {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-100); /* 2px */
+  padding: var(--space-100) var(--space-300); /* 2px / 8px */
+  border: 1px solid var(--color-container-border-base); /* #dee1e1 */
+  border-radius: var(--radius-500); /* 6px */
+  background-color: var(--color-container-border-base); /* #dee1e1 */
+  font-family: var(--font-family);
+  font-size: 12px; /* text-sm */
+  line-height: 20px;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+  white-space: nowrap;
+}
+
+}
+
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds MetricHighlight 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-metric-highlight">…</div>                       // horizontal, default
+ *   <div class="seeds-metric-highlight seeds-metric-highlight-vertical">…</div>
+ *   <div class="seeds-metric-highlight seeds-metric-highlight-small">…</div>
+ *   <div class="seeds-metric-highlight seeds-metric-highlight-bare">…</div>   // no surface
+ */
+
+@layer components {
+
+.seeds-metric-highlight {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-350); /* 12px */
+  border-radius: var(--radius-800); /* 12px */
+  font-family: var(--font-family);
+  /* Container (default): a padded gray app surface (matches the design's
+     #f3f4f4 box). `-bare` strips it. */
+  padding: var(--space-400) var(--space-450); /* 16px / 24px */
+  background-color: var(--color-app-bg-base);
+}
+
+.seeds-metric-highlight-bare {
+  padding: 0;
+  background-color: transparent;
+}
+
+.seeds-metric-highlight-vertical {
+  flex-direction: column;
+}
+
+/* The metric block: label + value/trend. Grows to fill the row in horizontal. */
+.seeds-metric-highlight-metric {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-200); /* 4px */
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+.seeds-metric-highlight-vertical .seeds-metric-highlight-metric {
+  width: 100%;
+  flex: 0 0 auto;
+}
+
+/* Small: label and value collapse onto a single centered row. */
+.seeds-metric-highlight-small .seeds-metric-highlight-metric {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-300); /* 8px */
+}
+
+.seeds-metric-highlight-label {
+  margin: 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;
+}
+
+/* In small, the label takes the slack so the value/trend align to the end. */
+.seeds-metric-highlight-small .seeds-metric-highlight-label {
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+.seeds-metric-highlight-value-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-300); /* 8px */
+}
+
+.seeds-metric-highlight-small .seeds-metric-highlight-value-row {
+  justify-content: flex-end;
+}
+
+.seeds-metric-highlight-value {
+  margin: 0;
+  /* No mono token exists yet; fall back to a system monospace stack. Mirrors the
+     font/font-mono treatment in the design. */
+  font-family: var(--font-family-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace);
+  font-size: var(--font-size-700); /* 32px */
+  line-height: var(--line-height-700); /* 40px */
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-headline);
+  white-space: nowrap;
+}
+
+.seeds-metric-highlight-small .seeds-metric-highlight-value {
+  font-size: var(--font-size-600); /* 24px */
+  line-height: var(--line-height-600); /* 32px */
+}
+
+/* Trend badge — a rounded pill. Up is the positive (green) treatment; down
+   swaps to the negative (red) treatment. Color flows to the arrow + value via
+   currentColor. */
+.seeds-metric-highlight-trend {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-200); /* 4px */
+  padding: var(--space-100) var(--space-300); /* 2px / 8px */
+  border-radius: 999px;
+  font-size: var(--font-size-200); /* 13px */
+  line-height: var(--line-height-200);
+  font-weight: var(--font-weight-bold);
+  white-space: nowrap;
+  background-color: var(--color-container-bg-decorative-green);
+  color: var(--color-text-decorative-green);
+}
+
+.seeds-metric-highlight-trend-down {
+  background-color: var(--color-container-bg-decorative-red);
+  color: var(--color-text-decorative-red);
+}
+
+.seeds-metric-highlight-trend-arrow {
+  flex: 0 0 auto;
+  width: 1em;
+  height: 1em;
+  stroke: currentColor;
+  stroke-width: 1.5;
+}
+
+/* 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;
+  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;
+}
+
+.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
+  width: 104px;
+  height: 48px;
+}
+
+.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
+  width: 88px;
+  height: 40px;
+}
+
+.seeds-metric-highlight-vertical .seeds-metric-highlight-chart {
+  width: 100%;
+  height: 96px;
+}
+
+.seeds-metric-highlight-vertical.seeds-metric-highlight-small .seeds-metric-highlight-chart {
+  height: 56px;
+}
+
+}
+
 /* --- seeds-react-narrative-kit --- */
 /**
  * Seeds NarrativeContainer component classes.
@@ -1098,7 +1307,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: stretch;
   padding: var(--space-500);
   border-radius: var(--radius-800);
   box-shadow: var(--shadow-low);
@@ -1136,6 +1345,388 @@
 
 }
 
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds NarrativeDivider 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:
+ *   <hr class="seeds-narrative-divider" />
+ */
+
+@layer components {
+
+/* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
+   and a beveled border, so reset those and draw the line with a single
+   border-top using the container-border-base token (#dee1e1), which also
+   tracks dark mode. */
+.seeds-narrative-divider {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0;
+  margin: 0;
+  border: 0;
+  border-top: 1px solid var(--color-container-border-base); /* #dee1e1 */
+}
+
+}
+
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds NarrativeHeadline 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:
+ *   <h2 class="seeds-narrative-headline">
+ *     Headline with a
+ *     <span class="seeds-narrative-headline-highlight">highlighted</span>
+ *     word
+ *   </h2>
+ */
+
+@layer components {
+
+/* Headline text. Rendered as an h1–h6, so reset the UA heading margins. */
+.seeds-narrative-headline {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size-700);
+  line-height: var(--line-height-700);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: -0.02em;
+  color: var(--color-text-headline);
+}
+
+/* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
+   spacing, and color are inherited from the base class. */
+.seeds-narrative-headline-small {
+  font-size: var(--font-size-600); /* 24px */
+  line-height: var(--line-height-600); /* 32px */
+}
+
+/* Static gradient accent for a span of headline text ("highlighted word").
+   Paints the AI brand gradient onto the glyphs via background-clip. */
+.seeds-narrative-headline-highlight {
+  background: var(--color-gradient-ai);
+  -webkit-background-clip: text;
+          background-clip: text;
+  color: transparent;
+}
+
+/* -------------------------------------------------------------------------
+   "Roll" variant — vertical word roll. The active word slides into view
+   while the previous one rolls out.
+   ------------------------------------------------------------------------- */
+.seeds-narrative-headline-roll {
+  display: inline-block;
+  position: relative;
+  /* clip-path rather than overflow:hidden: overflow:hidden on an inline-block
+     snaps its baseline to the bottom margin edge, dropping the rolling word
+     below the surrounding text. clip-path keeps the natural baseline. */
+  clip-path: inset(0);
+}
+
+/* Invisible word that holds the box width to the active word. */
+.seeds-narrative-headline-roll-sizer {
+  display: inline-block;
+  visibility: hidden;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.seeds-narrative-headline-roll-word {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  white-space: nowrap;
+  transform: translateY(100%);
+  opacity: 0;
+  transition:
+    transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
+    opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
+}
+
+.seeds-narrative-headline-roll-word-active {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.seeds-narrative-headline-roll-word-past {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+
+/* Reverse the roll direction. */
+.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word {
+  transform: translateY(-100%);
+}
+.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-active {
+  transform: translateY(0);
+}
+.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
+  transform: translateY(100%);
+}
+
+/* Gradient-painted rolling words with a slow shimmer. */
+.seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
+  background: var(--color-gradient-ai);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+          background-clip: text;
+  color: transparent;
+  animation: seeds-narrative-headline-grad-shift 8s ease infinite;
+}
+
+@keyframes seeds-narrative-headline-grad-shift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* The JS cycle is already disabled under reduced-motion (the first word holds);
+   also flatten the transition and shimmer so any in-flight motion settles. */
+@media (prefers-reduced-motion: reduce) {
+  .seeds-narrative-headline-roll-word {
+    transition: none;
+  }
+  .seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
+    animation: none;
+  }
+}
+
+}
+
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds NarrativeSummary 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. Also relies on
+ * narrative-headline.css (headline) and eyebrow-token.css (eyebrow).
+ *
+ * The layout is a CSS grid driven by a container query on the root, so the
+ * columns collapse based on the width the component is given, not the viewport.
+ *
+ * Usage:
+ *   <div class="seeds-narrative-summary">
+ *     <div class="seeds-narrative-summary-grid">…</div>
+ *   </div>
+ */
+
+@layer components {
+
+/* Establishes the query container. The grid inside reacts to this element's
+   inline size. */
+.seeds-narrative-summary {
+  container-type: inline-size;
+  box-sizing: border-box;
+  font-family: var(--font-family);
+}
+
+/* Stacked single column by default (narrow). The container query below expands
+   it once there is room. */
+.seeds-narrative-summary-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-450); /* 24px */
+}
+
+/* The lead column: eyebrow, headline, optional action. align-items:flex-start
+   keeps the eyebrow pill and the action sized to their content — without it the
+   column's default stretch would blow the eyebrow out to full width. The
+   headline still fills and wraps because its text is wider than the track. */
+.seeds-narrative-summary-lead {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-300); /* 8px */
+  min-width: 0;
+}
+
+/* The headline area grows so the action anchors toward the bottom of the lead
+   column when the neighboring columns are taller. align-self:stretch fills the
+   track width (the lead column pins other items to flex-start) so the headline
+   wraps at the column edge regardless of its length. */
+.seeds-narrative-summary-headline {
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+
+/* In three-column mode the content wrapper is transparent to the grid, so its
+   two sections become grid items in their own columns. In two-column mode the
+   container query below turns it into a real, stacking grid item. */
+.seeds-narrative-summary-content {
+  display: contents;
+}
+
+.seeds-narrative-summary-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-300); /* 8px */
+  min-width: 0;
+}
+
+/* Section label. 14px / 24px has no exact type token (the scale skips from
+   13px to 16px), so the design value is kept verbatim — same rationale as
+   eyebrow-token.css. All other values use tokens. */
+.seeds-narrative-summary-label {
+  margin: 0;
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-headline);
+}
+
+.seeds-narrative-summary-text {
+  margin: 0;
+  font-size: 14px; /* off-scale, see label above */
+  line-height: 24px;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+}
+
+.seeds-narrative-summary-list {
+  margin: 0;
+  padding-inline-start: 21px;
+  list-style: disc;
+  font-size: 14px; /* off-scale, see label above */
+  line-height: 24px;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+}
+
+.seeds-narrative-summary-list li {
+  margin: 0;
+}
+
+/* Expand to the multi-column layout once the component is wide enough. The
+   threshold is on the component's own width (container query), so a narrow card
+   on a wide screen still stacks. 640px = Tailwind/Seeds sm breakpoint. */
+@container (min-width: 640px) {
+  .seeds-narrative-summary-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  /* 1/3 lead + 2/3 content. */
+  .seeds-narrative-summary-two-column {
+    grid-template-columns: 1fr 2fr;
+  }
+
+  /* The content wrapper becomes a real grid item that stacks its two sections. */
+  .seeds-narrative-summary-two-column .seeds-narrative-summary-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-450); /* 24px */
+    min-width: 0;
+  }
+}
+
+}
+
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds PullQuote 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:
+ *   <figure class="seeds-pull-quote">…</figure>            // subtle (default)
+ *   <figure class="seeds-pull-quote seeds-pull-quote-vivid">…</figure>
+ */
+
+@layer components {
+
+.seeds-pull-quote {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0; /* reset the browser default <figure> margin */
+  /* 40px block / 48px inline — 48px is off the space scale, so derive it from
+     two tokens (40 + 8) rather than hardcoding an off-scale value. */
+  padding: var(--space-600) calc(var(--space-600) + var(--space-300));
+  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-pull-quote-vivid {
+  background-color: transparent;
+  background-image: var(--color-gradient-ai);
+  color: #fff;
+}
+
+/* The accented bar holding the quote and attribution. */
+.seeds-pull-quote-bar {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-450); /* 24px */
+  width: 100%;
+  padding-left: var(--space-450); /* 24px */
+  /* 4px is off the border-width scale (max token is 3px); the bar is a
+     decorative accent, mirroring NarrativeContainer's hardcoded 4px ring. The
+     subtle accent uses the AI gradient mid stop (#9747ff — no exact token). */
+  border-left: 4px solid #9747ff;
+}
+
+.seeds-pull-quote-vivid .seeds-pull-quote-bar {
+  border-left-color: #fff;
+}
+
+.seeds-pull-quote-text {
+  margin: 0; /* reset the browser default <blockquote> margin */
+  font-size: var(--font-size-600);
+  line-height: var(--line-height-600);
+  font-style: italic;
+  font-weight: var(--font-weight-normal);
+  color: inherit;
+  overflow-wrap: break-word;
+}
+
+/* Attribution row — a flex container for author name, avatar, network, etc.
+   Direct text inherits a bold, small treatment to match the display-name style;
+   richer content (e.g. an Avatar) composes freely. */
+.seeds-pull-quote-attribution {
+  display: flex;
+  align-items: center;
+  gap: var(--space-300); /* 8px */
+  font-size: var(--font-size-200);
+  line-height: var(--line-height-200);
+  font-weight: var(--font-weight-bold);
+  color: inherit;
+}
+
+}
+
 /* --- seeds-react-text --- */
 /**
  * Seeds Text component classes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "31.3.1",
+  "version": "31.5.0",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -73,7 +73,7 @@
   },
   "dependencies": {
     "@size-limit/file": "^11.1.6",
-    "@sproutsocial/seeds-react-accordion": "^0.4.46",
+    "@sproutsocial/seeds-react-accordion": "^0.4.47",
     "@sproutsocial/seeds-react-avatar": "^1.1.16",
     "@sproutsocial/seeds-react-badge": "^2.0.34",
     "@sproutsocial/seeds-react-banner": "^1.1.22",
@@ -111,7 +111,7 @@
     "@sproutsocial/seeds-react-message": "^1.0.48",
     "@sproutsocial/seeds-react-mixins": "^4.3.7",
     "@sproutsocial/seeds-react-modal": "^2.5.22",
-    "@sproutsocial/seeds-react-narrative-kit": "^0.1.0",
+    "@sproutsocial/seeds-react-narrative-kit": "^0.3.0",
     "@sproutsocial/seeds-react-numeral": "^1.0.47",
     "@sproutsocial/seeds-react-pagination": "^0.1.20",
     "@sproutsocial/seeds-react-panel": "^1.0.0",
@@ -163,7 +163,7 @@
     "@sproutsocial/seeds-motion": "^1.8.2",
     "@sproutsocial/seeds-networkcolor": "^2.22.0",
     "@sproutsocial/seeds-partner-logos": "^2.4.1",
-    "@sproutsocial/seeds-react-menu": "^1.15.10",
+    "@sproutsocial/seeds-react-menu": "^1.16.0",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-space": "^0.8.1",
     "@sproutsocial/seeds-testing": "*",