@reuters-graphics/graphics-components 3.10.0 → 3.10.1

package/dist/llm-docs/components/Geocoder.md

@@ -0,0 +1,49 @@
+# Geocoder
+
+**Category:** Components/Controls/Geocoder
+
+**Import:** `import { Geocoder } from '@reuters-graphics/graphics-components'`
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|:--------:|-------------|
+| `accessToken` | `string` | — | ✓ | Mapbox public access token. |
+| `searchPlaceholder` | `string` | `'Search for a location'` |  | Placeholder text shown in the search input. |
+| `onselect` | `(location: { lng: number; lat: number; name: string }) => void` | — |  | Callback fired when a location is selected from the results. |
+| `minLength` | `number` | `2` |  | Minimum number of characters before a request is made. Raising this cuts the number of paid geocoding requests per search. Defaults to 2. |
+| `debounceMs` | `number` | `300` |  | Debounce window in milliseconds between the last keystroke and the request. Raising this fires fewer requests while the user is still typing (each request is billed). Defaults to 300. |
+
+## Examples
+
+### Demo
+
+```svelte
+<div style="min-height: 330px; padding-top: 1rem;">
+  <Geocoder {accessToken} onselect={handleSelect} />
+</div>
+```
+
+## Documentation
+
+# Geocoder
+
+The `Geocoder` component provides an autocomplete location search powered by the [Mapbox Geocoding v6 API](https://docs.mapbox.com/api/search/geocoding-v6/). It returns coordinates and a place name via the `onselect` callback.
+
+```svelte
+<script>
+  import { Geocoder } from '@reuters-graphics/graphics-components';
+
+  const MAPBOX_TOKEN = 'your_mapbox_token';
+
+  function handleSelect(location) {
+    console.log(location.name, location.lng, location.lat);
+  }
+</script>
+
+<Geocoder accessToken={MAPBOX_TOKEN} onselect={handleSelect} />
+```
+
+The `accessToken` prop is required. Look up the Reuters Mapbox token in the team's 1Password vault. All [Mapbox forward geocoding options](https://docs.mapbox.com/api/search/geocoding-v6/#forward-geocoding) are available as props, including `country`, `language`, `types`, `bbox`, `proximity`, `limit`, and `worldview`.
+
+To reduce the number of paid geocoding requests, use `minLength` (minimum characters before searching, default `2`) and `debounceMs` (delay after the last keystroke before requesting, default `300`). Raising them fires fewer requests while the user is still typing.

package/dist/llm-docs/components/GraphicBlock.md

@@ -0,0 +1,319 @@
+# GraphicBlock
+
+**Category:** Components/Graphics/GraphicBlock
+
+**Import:** `import { GraphicBlock } from '@reuters-graphics/graphics-components'`
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|:--------:|-------------|
+| `children` | `Snippet` | — | ✓ | Content to place inside `GraphicBlock` |
+| `id` | `string` | `''` |  | Add an id to the block tag to target it with custom CSS. |
+| `class` | `string` | `''` |  | Add classes to the block tag to target it with custom CSS. |
+| `snap` | `boolean` | `false` |  | Snap block to column widths, rather than fluidly resizing them. |
+| `role` | `string` | — |  | ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block |
+| `notes` | `string \| Snippet` | — |  | Notes to the graphic, passed in as a markdown string OR as a custom snippet. |
+| `width` | `ContainerWidth` | `'normal'` |  | Width of the component within the text well. Options: `normal`, `wide`, `wider`, `widest`, `fluid` |
+| `textWidth` | `ContainerWidth` | `'normal'` |  | Set a different width for the text within the text well, for example, "normal" to keep the title, description and notes inline with the rest of the text well. Can't ever be wider than `width`. Options: `normal`, `wide`, `wider`, `widest`, `fluid` |
+| `title` | `string \| Snippet` | — |  | Title of the graphic as a string or a custom snippet. |
+| `description` | `string` | — |  | Description of the graphic, passed in as a markdown string. |
+| `ariaLabel` | `string` | `'chart'` |  | ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block |
+| `ariaDescription` | `string \| Snippet` | — |  | ARIA description, passed in as a markdown string OR as a custom snippet. |
+
+## Examples
+
+### Demo
+
+```svelte
+<GraphicBlock
+  title="Title for my chart"
+  description="Some description for your chart."
+  notes={`Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)`}
+>
+  <div id="my-chart">
+    <img src={PlaceholderImg} alt="placeholder" />
+  </div>
+</GraphicBlock>
+```
+
+### Ai2svelte and ArchieML
+
+```svelte
+<GraphicBlock
+  title="Earthquake in Haiti"
+  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
+  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
+>
+  <AiMap />
+</GraphicBlock>
+```
+
+### Custom text
+
+```svelte
+<GraphicBlock>
+  <div class="demo-graphic">
+    <img src={PlaceholderImg} alt="placeholder" />
+  </div>
+
+  {#snippet title()}
+    <h5>My smaller title</h5>
+  {/snippet}
+
+  {#snippet notes()}
+    <aside>
+      <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
+    </aside>
+  {/snippet}
+</GraphicBlock>
+```
+
+### AREA description
+
+```svelte
+<GraphicBlock
+  title="Earthquake in Haiti"
+  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
+  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
+  ariaDescription="A map showing the shake intensity produced by the earthquake."
+>
+  <AiMap />
+</GraphicBlock>
+```
+
+### Custom AREA description
+
+```svelte
+<GraphicBlock
+  title="Earthquake in Haiti"
+  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
+  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
+>
+  <AiMap />
+  {#snippet ariaDescription()}
+    <p>
+      A shakemap shows the intensity of the 7.2-magnitude earthquake that
+      struck Haiti at 8:29 a.m. EST, Aug. 14, 2021.
+    </p>
+    <table>
+      <tbody>
+        <tr>
+          <th>City</th>
+          <th>Felt shake strength</th>
+        </tr>
+        <tr>
+          <td>Les Cayes</td>
+          <td>Very strong</td>
+        </tr>
+        <tr>
+          <td>Jeremie</td>
+          <td>Strong</td>
+        </tr>
+      </tbody>
+    </table>
+  {/snippet}
+</GraphicBlock>
+```
+
+## Documentation
+
+# GraphicBlock
+
+The `GraphicBlock` component is a special derivative of the [Block](?path=/docs/components-page-layout-block--docs) component that wraps around your graphic. It also adds a title, description, notes and other text elements.
+
+Many other Reuters Graphics components use `GraphicBlock` to wrap graphics with styled text.
+
+```svelte
+<script>
+  import { GraphicBlock } from '@reuters-graphics/graphics-components';
+</script>
+
+<GraphicBlock
+  title="Title for my chart"
+  description="Some description for your chart."
+  notes={`Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)`}
+>
+  <!-- Your chart goes here -->
+  <div id="my-chart" />
+</GraphicBlock>
+```
+
+## Using with ai2svelte and ArchieML docs
+
+The `GraphicBlock` component is built to handle [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics in graphics kit.
+
+You'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[blocks]
+type: ai-graphic
+width: normal
+chart: AiMap # IMPORTANT: This must match the name of the ai2svelte chart you import in App.svelte
+title: Earthquake in Haiti
+description: The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021.
+notes: \Note: A shakemap represents the ground shaking produced by an earthquake.
+
+\Source: USGIS
+:end
+altText: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
+:end
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `GraphicBlock` component.
+
+To pass your ai2svelte graphic into `GraphicBlock` component, import your ai2svelte graphic at the top of `App.svelte` and add it to the `aiCharts` object.
+
+> **Important❗:** Make sure that the value for `chart` in the ArchieML doc matches the name of the ai2svelte file imported in `App.svelte`.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  // IMPORTANT: The name of your ai2svelte chart must match `chart` in your ArchieML doc
+  import AiMap from './ai2svelte/my-map.svelte';
+  // Error handler for missing ai2svelte charts
+  import LogBlock from './components/dev/LogBlock.svelte';
+
+  // If using with the graphics kit
+  import { assets } from '$app/paths';
+
+  // A built-in helper function in Graphis Kit for validating container width
+  import { containerWidth } from '$utils/propValidators';
+
+  // Add your imported ai2svelte charts to this object
+  const aiCharts = {
+    AiMap,
+    // Other ai2svelte graphics...
+  };
+</script>
+
+<!-- Loop through ArchieML blocks -->
+{#each content.blocks as block}
+  {#if block.type === 'ai-graphic'}
+    {#if !aiCharts[block.chart]}
+      <!-- Error message for when the ai2svelte chart is missing -->
+      <LogBlock message={`Unable to find "${block.chart}" in aiCharts`} />
+    {:else}
+      <!-- Get the ai2svelte graphic specified by `chart` in ArchieML -->
+      {@const AiChart = aiCharts[block.chart]}
+      <GraphicBlock
+        id={block.chart}
+        width={containerWidth(block.width)}
+        title={block.title}
+        description={block.description}
+        notes={block.notes}
+        ariaDescription={block.altText}
+      >
+        <!-- In graphics kit, pass the `assetsPath` prop -->
+        <AiChart assetsPath={assets || '/'} />
+      </GraphicBlock>
+    {/if}
+  {/if}
+{/each}
+```
+
+## Custom text
+
+You can override the default styles for title and notes by making your own custom elements and passing them as `title` and `notes` [snippets](https://svelte.dev/docs/svelte/snippet) instead of as strings:
+
+```svelte
+<GraphicBlock>
+  <!-- Custom title snippet -->
+  {#snippet title()}
+    <h5>My smaller title</h5>
+  {/snippet}
+
+  <!-- Your graphic -->
+  <div id="my-chart"></div>
+
+  <!-- Custom notes snippet -->
+  {#snippet notes()}
+    <aside>
+      <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
+    </aside>
+  {/snippet}
+</GraphicBlock>
+```
+
+## ARIA descriptions
+
+If the text in your chart isn't easily read by screen readers — for example, a map with annotations that wouldn't make sense without the visual — add an `ariaDescription` that describes the chart.
+
+The `ariaDescription` string will be processed as markdown, so you can add multiple paragraphs, links, headers, etc. in markdown.
+
+> **Note:** When you set an `ariaDescription`, your graphic will be automatically wrapped in a div with [aria-hidden="true"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden), which tells screen readers to read the hidden ARIA description and skip the text in the graphic.
+
+```svelte
+<GraphicBlock
+  title="Earthquake in Haiti"
+  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
+  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
+  ariaDescription="A map showing the shake intensity produced by the earthquake."
+>
+  <!-- In graphics kit, pass the `assetsPath` prop -->
+  <AiChart assetsPath={assets || '/'} />
+</GraphicBlock>
+```
+
+## Custom ARIA descriptions
+
+Sometimes, instead of a simple sentence, we want to provide a data table or something more complex as an ARIA description. To do this, pass the custom elements as an `ariaDescription` [snippet](https://svelte.dev/docs/svelte/snippet) instead of as a string, as in the [example above](?path=/docs/components-graphics-graphicblock--docs#aria-descriptions).
+
+[Read this](https://accessibility.psu.edu/images/charts/) for more information on using screen reader data tables for charts.
+
+> **Note:** The `customAria` snippet will override the `ariaDescription` and will also hide the text in your graphic from screen readers.
+
+```svelte
+<GraphicBlock
+  title="Earthquake in Haiti"
+  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
+  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
+>
+  <!-- In graphics kit, pass the `assetsPath` prop -->
+  <AiChart assetsPath={assets || '/'} />
+
+  <!-- Custom ARIA description snippet -->
+  {#snippet ariaDescription()}
+    <p>
+      A shakemap shows the intensity of the 7.2-magnitude earthquake that struck
+      Haiti at 8:29 a.m. EST, Aug. 14, 2021.
+    </p>
+    <table>
+      <tbody>
+        <tr>
+          <th>City</th>
+          <th>Felt shake strength</th>
+        </tr>
+        <tr>
+          <td>Les Cayes</td>
+          <td>Very strong</td>
+        </tr>
+        <tr>
+          <td>Jeremie</td>
+          <td>Strong</td>
+        </tr>
+      </tbody>
+    </table>
+  {/snippet}
+</GraphicBlock>
+
+<!-- Optionally, style the visually hidden table nicely for sighted readers who use screen readers -->
+<style lang="scss">
+  table {
+    width: 100%;
+    border-collapse: collapse;
+
+    th,
+    td {
+      border: 1px solid #ddd;
+      padding: 8px;
+    }
+
+    th {
+      background-color: #f2f2f2;
+    }
+  }
+</style>
+```

package/dist/llm-docs/components/Headline.md

@@ -0,0 +1,248 @@
+# Headline
+
+**Category:** Components/Text elements/Headline
+
+**Import:** `import { Headline } from '@reuters-graphics/graphics-components'`
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|:--------:|-------------|
+| `hed` | `string \| Snippet` | `'Reuters Graphics Interactive'` |  | Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. |
+| `class` | `string` | `''` |  | Add extra classes to the block tag to target it with custom CSS. |
+| `hedSize` | `HeadlineSize` | `'normal'` |  | Headline size: small, normal, big, bigger, biggest Options: `small`, `normal`, `big`, `bigger`, `biggest` |
+| `dek` | `string \| Snippet` | — |  | Dek, parsed as a markdown string OR as a custom snippet. |
+| `section` | `string` | — |  | Section title |
+| `authors` | `string[]` | `[]` |  | Array of author names, which will be slugified to create links to Reuters author pages |
+| `publishTime` | `string` | `''` |  | Publish time as a datetime string. |
+| `updateTime` | `string` | `''` |  | Update time as a datetime string. |
+| `width` | `'normal' \| 'wide' \| 'wider' \| 'widest'` | `'normal'` |  | Width of the headline: normal, wide, wider, widest Options: `normal`, `wide`, `wider`, `widest` |
+| `getAuthorPage` | `(author: string) => string` | — |  | Custom function that returns an author page URL. |
+| `crown` | `Snippet` | — |  | Custom crown snippet |
+| `byline` | `Snippet` | — |  | Optional snippet for a custom byline. |
+| `published` | `Snippet` | — |  | Optional snippet for a custom published dateline. |
+| `updated` | `Snippet` | — |  | Optional snippet for a custom updated dateline. |
+
+## Examples
+
+### Demo
+
+```svelte
+<Headline
+  hed="Reuters Graphics interactive"
+  dek="The beginning of a beautiful page"
+  section="World News"
+/>
+```
+
+### With byline and dateline
+
+```svelte
+<Headline
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  section={'Global news'}
+  authors={['Jane Doe']}
+  publishTime={new Date('2020-01-01').toISOString()}
+  getAuthorPage={(author: string) => {
+    return `mailto:${author.replace(' ', '')}@example.com`;
+  }}
+/>
+```
+
+### Custom hed and dek
+
+```svelte
+<Headline width="wide">
+  {#snippet hed()}
+    <h1 class="custom-hed">
+      <span class="small block text-base">The secret to</span>
+      “The Nutcracker's”
+      <span class="small block text-base fpt-1">success</span>
+    </h1>
+  {/snippet}
+  {#snippet dek()}
+    <p class="custom-dek !fmt-3">
+      How “The Nutcracker” ballet became an<span
+        class="font-medium mx-1 px-1.5 py-1">American holday staple</span
+      >and a financial pillar of ballet companies across the country
+    </p>
+  {/snippet}
+</Headline>
+```
+
+### Crown image
+
+```svelte
+<Headline
+  class="!fmt-3"
+  hed="Europa"
+  publishTime={new Date('2020-01-01').toISOString()}
+>
+  <!-- Add a crown -->
+  {#snippet crown()}
+    <img
+      src={crownImgSrc}
+      width="100"
+      class="mx-auto mb-0"
+      alt="Illustration of Europe"
+    />
+  {/snippet}
+</Headline>
+```
+
+### Crown graphic
+
+```svelte
+<Headline
+  width="wider"
+  class="!fmt-1"
+  hed={'Unfriendly skies'}
+  dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
+  section={'Ukraine Crisis'}
+  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+  publishTime={new Date('2022-03-04').toISOString()}
+>
+  <!-- Add a crown graphic -->
+  {#snippet crown()}
+    <Map />
+  {/snippet}
+</Headline>
+```
+
+## Documentation
+
+# Headline
+
+The `Headline` component creates headlines in the legacy Reuters Graphics style, with the text centred on the page.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline
+  hed="Reuters Graphics Interactive"
+  dek="The beginning of a beautiful page"
+  section="World News"
+/>
+```
+
+## With bylines and dateline
+
+Optionally, you can add authors and a publish time to the headline, which the `Headline` component internally renders with the [Byline](./?path=/docs/components-text-elements-byline--docs) component.
+
+> **Note**: Since `Headline` uses `Byline`, you can customise the author page hyperlink and bylines with the `getAuthorPage`, `byline`, `published` and `updated` props.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  section={'Global news'}
+  authors={['Jane Doe']}
+  publishTime={new Date('2020-01-01').toISOString()}
+  getAuthorPage={(author) => `mailto:${author.replace(' ', '')}@example.com`}
+/>
+```
+
+## Custom hed and dek
+
+Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to override those elements with custom elements.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline width="wide">
+  <!-- Custom hed snippet -->
+  {#snippet hed()}
+    <h1 class="custom-hed">
+      <span class="small block text-base">The secret to</span>
+      “The Nutcracker's”
+      <span class="small block text-base fpt-1">success</span>
+    </h1>
+  {/snippet}
+
+  <!-- Custom dek snippet -->
+  {#snippet dek()}
+    <p class="custom-dek !fmt-3">
+      How “The Nutcracker” ballet became an<span
+        class="font-medium mx-1 px-1.5 py-1">American holday staple</span
+      >and a financial pillar of ballet companies across the country
+    </p>
+  {/snippet}
+</Headline>
+
+<!-- Custom styles -->
+<style lang="scss">
+  .custom-hed {
+    line-height: 0.9;
+  }
+  .custom-dek {
+    span {
+      background-color: #fde68a;
+    }
+  }
+</style>
+```
+
+## With crown image
+
+To add a crown image, use the `crown` [snippet](https://svelte.dev/docs/svelte/snippet).
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
+</script>
+
+<Headline
+  class="!fmt-3"
+  hed="Europa"
+  publishTime={new Date('2020-01-01').toISOString()}
+>
+  <!-- Add a crown -->
+  {#snippet crown()}
+    <img
+      src={crownImgSrc}
+      width="100"
+      class="mx-auto mb-0"
+      alt="Illustration of Europe"
+    />
+  {/snippet}
+</Headline>
+```
+
+## With crown graphic
+
+Add a full graphic or any other component in the crown.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // If in Graphis Kit
+
+  import Map from './ai2svelte/graphic.svelte'; // Import the crown graphic component
+</script>
+
+<Headline
+  width="wider"
+  class="!fmt-1"
+  hed={'Unfriendly skies'}
+  dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
+  section={'Ukraine Crisis'}
+  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+  publishTime={new Date('2022-03-04').toISOString()}
+>
+  <!-- Add a crown graphic -->
+  {#snippet crown()}
+    <!-- Pass `assetsPath` if in graphics kit -->
+    <Map assetsPath={assets || '/'} />
+  {/snippet}
+</Headline>
+```

package/dist/llm-docs/components/Headpile.md

@@ -0,0 +1,55 @@
+# Headpile
+
+**Category:** Components/Text elements/Headpile
+
+**Import:** `import { Headpile } from '@reuters-graphics/graphics-components'`
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|:--------:|-------------|
+| `class` | `string` | — | ✓ | Add classes to target with custom CSS. |
+| `id` | `string` | — | ✓ | Add an id to target with custom CSS. |
+| `width` | `Extract<ContainerWidth, 'normal' \| 'wide'>` | `'normal'` |  | Width of the container. |
+| `colour` | `string` | `'#cccccc'` |  | Default background colour to be used as a mount behind the headshot. |
+| `figures` | `{       /**        * Headshot image src. Be sure to prefix the image        *        * ```typescript        * import { assets } from '$app/paths';        *        * const imgSrc = `${assets}/images/my-image.jpg`;        * ```        */       img: string;       /**        * Figure name.        */       name: string;       /**        * Figure role or title.        */       role?: string;       /**        * Text describing the person.        */       text: string;       /**        * Background colour to be used as a mount behind the headshot.        */       colour?: string;     }[]` | — | ✓ | Individual figures -- i.e., people -- for the headpile. |
+
+## Examples
+
+### Demo
+
+```svelte
+<Headpile figures={/* defaultArgs */} />
+```
+
+## Documentation
+
+# Headpile
+
+The `Headpile` component is a headshot-bulleted list of people, identifying them with their names, roles and a short description of their significance to a story.
+
+It's designed to be used with headshots that have had their background removed, which can be done in the [Preview app](https://support.apple.com/en-gb/guide/preview/prvw15636/mac?#apd320b3b1b750a4) on macOS.
+
+```svelte
+<script>
+  import { Headpile } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+</script>
+
+<Headpile
+  figures={[
+    {
+      img: `${assets}/images/person-A.jpg`,
+      name: 'General Abdel Fattah al-Burhan',
+      role: "Sudan's Sovereign Council Chief and military commander",
+      text: 'Burhan was little known in public life until taking part in the coup ...',
+    },
+    {
+      img: `${assets}/images/person-B.jpg`,
+      name: 'General Mohamed Hamdan Dagalo',
+      role: 'Leader of the Sudanese paramilitary Rapid Support Forces (RSF)',
+      text: 'Popularly known as Hemedti, Dagalo rose from lowly beginnings ...',
+    },
+  ]}
+/>
+```