@onsvisual/svelte-components 0.0.6 → 0.0.8

package/dist/@types/layout/Tabs/Tabs.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TabsProps */
+/** @typedef {typeof __propDef.events}  TabsEvents */
+/** @typedef {typeof __propDef.slots}  TabsSlots */
+export default class Tabs extends SvelteComponentTyped<{
+    compact?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        compact?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/layout/TitleBlock/TitleBlock.svelte.d.ts

@@ -5,8 +5,8 @@ export default class TitleBlock extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
     background?: string;
     themeOverrides?: any;
-    title?: string;
     meta?: any[];
+    title?: string;
     natStatBadge?: boolean;
     censusLogo?: boolean;
 }, {
@@ -26,8 +26,8 @@ declare const __propDef: {
         theme?: "light" | "dark" | "lightblue";
         background?: string;
         themeOverrides?: object;
-        title?: string;
         meta?: any[];
+        title?: string;
         natStatBadge?: boolean;
         censusLogo?: boolean;
     };

package/dist/datavis/Table/Table.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { commas, ascending, descending } from "$lib/js/utils.js";
+  import { commas, ascending, descending } from "../../js/utils.js";
 
   /**
    * An optional title for the table

package/dist/datavis/shared/data.js

@@ -0,0 +1,18 @@
+export default [
+  { year: 2017, value: 320, group: "apples" },
+  { year: 2017, value: 480, group: "bananas" },
+  { year: 2017, value: 640, group: "cherries" },
+  { year: 2017, value: 400, group: "dates" },
+  { year: 2018, value: 640, group: "apples" },
+  { year: 2018, value: 960, group: "bananas" },
+  { year: 2018, value: 640, group: "cherries" },
+  { year: 2018, value: 400, group: "dates" },
+  { year: 2019, value: 1600, group: "apples" },
+  { year: 2019, value: 1440, group: "bananas" },
+  { year: 2019, value: 960, group: "cherries" },
+  { year: 2019, value: 400, group: "dates" },
+  { year: 2020, value: 3840, group: "apples" },
+  { year: 2020, value: 1920, group: "bananas" },
+  { year: 2020, value: 960, group: "cherries" },
+  { year: 2020, value: 400, group: "dates" },
+];

package/dist/decorators/Divider/Divider.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Container from "$lib/wrappers/Container/Container.svelte";
+  import Container from "../../wrappers/Container/Container.svelte";
 
   /**
    * (Optional) Include a horizontal rule

package/dist/index.js

@@ -6,6 +6,8 @@ export { default as Theme } from "./wrappers/Theme/Theme.svelte";
 
 // Layout
 export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
+export { default as AnalyticsBanner } from "./layout/AnalyticsBanner/AnalyticsBanner.svelte";
+export { AnalyticsEvent } from "./layout/AnalyticsBanner/AnalyticsBanner.svelte";
 export { default as Filler } from "./layout/Filler/Filler.svelte";
 export { default as Footer } from "./layout/Footer/Footer.svelte";
 export { default as Grid } from "./layout/Grid/Grid.svelte";

package/dist/inputs/ErrorSummary/ErrorSummary.svelte

@@ -0,0 +1,21 @@
+<script>
+  /**
+   * Defines the title of the error
+   * @type {string}
+   */
+  export let title = "";
+</script>
+
+<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error">
+  <div class="ons-panel__header">
+    <h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">{title}</h2>
+  </div>
+  <div class="ons-panel__body">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .ons-panel {
+    color: rgb(34, 34, 34);
+  }</style>

package/dist/layout/Accordion/AccordionItem.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount, getContext } from "svelte";
-  import { slugify } from "$lib/js/utils.js";
+  import { slugify } from "../../js/utils.js";
 
   /**
    * A title for the element

package/dist/layout/AnalyticsBanner/AnalyticsBanner.svelte

@@ -0,0 +1,256 @@
+<script context="module">
+  export function analyticsEvent(props) {
+    if (window?.dataLayer) window.dataLayer.push(props);
+  }
+</script>
+
+<script>
+  import { onMount, getContext } from "svelte";
+
+  const page = getContext("page"); // Optional: Set Svelte Kit's page store to the context to track navigation in multi-page apps
+
+  /**
+   * Google analytics/tags manager ID
+   * @type {string}
+   */
+  export let analyticsId = "GTM-MBCBVQS";
+  /**
+   * Optional props to describe the content
+   * @type {object}
+   */
+  export let analyticsProps = {};
+  /**
+   * Bind to this value if you need to know if cookies have been accepted
+   * @type {boolean}
+   */
+  export let usageCookies = false;
+  /**
+   * Set the width of the banner
+   * @type {"medium"|"wide"}
+   */
+  export let width = "medium";
+
+  let live; // Don't run analytics unless page is live on ONS site (re-set in the onMount function)
+  let showBanner = false;
+  let showConfirm = false;
+  let message = "";
+  let lang = $page && $page.url.host.startsWith("cy") ? "cy" : "en";
+  let location = null; // For keeping track of navigation multi-page apps
+
+  function hasCookiesPreferencesSet() {
+    return -1 < document.cookie.indexOf("cookies_preferences_set=true");
+  }
+
+  // Check if usage cookies are allowed (for Google Analytics + Hotjar)
+  function getUsageCookieValue() {
+    var cookiesPolicyCookie = document.cookie.match(
+      new RegExp("(^|;) ?cookies_policy=([^;]*)(;|$)")
+    );
+    if (cookiesPolicyCookie) {
+      var decodedCookie = decodeURIComponent(cookiesPolicyCookie[2]);
+      var cookieValue = JSON.parse(decodedCookie);
+      return cookieValue.usage;
+    }
+    return false;
+  }
+
+  // Set site cookie with 'all' or 'essential' cookies
+  function setCookie(option) {
+    let oneYearInSeconds = 60 * 60 * 24 * 365;
+    let cookiesDomain = window.location.hostname;
+    let cookiesPreference = !0;
+    let encodedCookiesPolicy = `%7B%22essential%22%3Atrue%2C%22usage%22%3A${
+      option == "all" ? "true" : "false"
+    }%7D`;
+    let cookiesPath = "/";
+
+    document.cookie = `cookies_preferences_set=${cookiesPreference};max-age=${oneYearInSeconds};domain=${cookiesDomain};path=${cookiesPath};`;
+    document.cookie = `cookies_policy=${encodedCookiesPolicy};max-age=${oneYearInSeconds};domain=${cookiesDomain};path=${cookiesPath};`;
+
+    message = `You have ${option == "all" ? "accepted" : "rejected"} all additional cookies.`;
+    if (option == "all") usageCookies = true;
+    showConfirm = true;
+
+    if (option == "all") initAnalytics();
+  }
+
+  // Initialise analytics and 'window.dataLayer' (which can be used throughout the app)
+  function initAnalytics() {
+    console.log("initialising analytics");
+    window.dataLayer = [
+      {
+        analyticsOptOut: false,
+        "gtm.whitelist": ["google", "hjtc", "lcl"],
+        "gtm.blacklist": ["customScripts", "sp", "adm", "awct", "k", "d", "j"],
+        ...analyticsProps,
+      },
+    ];
+
+    (function (w, d, s, l, i) {
+      w[l] = w[l] || [];
+      w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+      var f = d.head,
+        j = d.createElement(s),
+        dl = l != "dataLayer" ? "&l=" + l : "";
+      j.async = true;
+      j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
+      f.appendChild(j);
+    })(window, document, "script", "dataLayer", analyticsId);
+
+    if ($page) location = `${$page.url.href}`.replace($page.url.hash, "");
+  }
+
+  // This code is only relevant for multi-page Svelte Kit apps. It sends an analytics event when the URL changes
+  function onPageChange(page) {
+    if (page && location) {
+      const newlocation = `${page.url.href}`.replace(page.url.hash, "");
+      if (newlocation !== location) {
+        location = newlocation;
+        analyticsEvent({
+          event: "pageView",
+          pageURL: location,
+          ...analyticsProps,
+        });
+      }
+    }
+  }
+  $: onPageChange($page);
+
+  onMount(() => {
+    live = true;
+    //live = document.location.hostname == "www.ons.gov.uk" || document.location.hostname == "cy.ons.gov.uk";
+    if (!page) lang = document.location.host.startsWith("cy") ? "cy" : "en";
+    showBanner = !hasCookiesPreferencesSet();
+    usageCookies = getUsageCookieValue();
+    if (usageCookies && live) initAnalytics();
+  });
+
+  const texts = {
+    "Cookies on ons.gov.uk": "Cwcis ar ons.gov.uk",
+    "Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.":
+      "Ffeiliau bach a gaiff eu storio ar eich dyfais pan fyddwch yn mynd ar wefan yw cwcis. Rydym ni’n defnyddio rhai cwcis hanfodol i wneud i’r wefan hon weithio.",
+    "We would like to set": "Hoffem osod",
+    "additional cookies": "cwcis ychwanegol",
+    "to remember your settings and understand how you use the site. This helps us to improve our services.":
+      "er mwyn cofio eich gosodiadau a deall sut rydych chi’n defnyddio’r wefan. Mae hyn yn ein helpu ni i wella ein gwasanaethau.",
+    "Accept additional cookies": "Derbyn cwcis ychwanegol",
+    "Reject additional cookies": "Gwrthod cwcis ychwanegol",
+    "View cookies": "Gweld cwcis",
+    "You have accepted all additional cookies.": "Rydych chi wedi derbyn yr holl gwcis ychwanegol.",
+    "You have rejected all additional cookies.":
+      "Rydych chi wedi gwrthod yr holl gwcis ychwanegol.",
+    "You can": "Gallwch chi",
+    "change your cookie preferences": "newid eich dewisiadau o ran cwcis",
+    "at any time.": "ar unrhyw adeg.",
+    Hide: "Cuddio",
+  };
+  const i18n = (text) => (lang == "cy" && texts[text] ? texts[text] : text);
+</script>
+
+{#if showBanner}
+  <div
+    class="ons-cookies-banner"
+    role="region"
+    aria-label="Cookies banner"
+    style:display="{showBanner ? "block" : null}"
+  >
+    {#if !showConfirm}
+      <form
+        action="/cookies/accept-all"
+        method="GET"
+        id="global-cookie-message"
+        aria-label="cookie banner"
+      >
+        <div
+          class="ons-container ons-cookies-banner__primary"
+          class:ons-page__container--wide="{width === 'wide'}"
+        >
+          <div class="ons-grid">
+            <div class="ons-grid__col ons-col-8@m">
+              <h2 class="ons-cookies-banner__title ons-u-mb-xs">{i18n("Cookies on ons.gov.uk")}</h2>
+              <div class="ons-cookies-banner__statement">
+                <p>
+                  {i18n(
+                    "Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work."
+                  )}
+                </p>
+                <p>
+                  {i18n("We would like to set")} <a href="/cookies">{i18n("additional cookies")}</a>
+                  {i18n(
+                    "to remember your settings and understand how you use the site. This helps us to improve our services."
+                  )}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="ons-grid ons-grid--flex ons-u-mt-s">
+            <div class="ons-grid__col">
+              <button
+                type="submit"
+                class="ons-btn ons-btn--small ons-js-accept-cookies ons-cookies-banner__btn"
+                data-button="accept"
+                on:click|preventDefault="{() => setCookie('all')}"
+              >
+                <span class="ons-btn__inner"
+                  ><span class="ons-btn__text">{i18n("Accept additional cookies")}</span>
+                </span>
+              </button>
+            </div>
+            <div class="ons-grid__col">
+              <button
+                type="button"
+                class="ons-btn ons-btn--small ons-js-reject-cookies ons-cookies-banner__btn"
+                data-button="reject"
+                on:click|preventDefault="{() => setCookie('reject')}"
+              >
+                <span class="ons-btn__inner"
+                  ><span class="ons-btn__text">{i18n("Reject additional cookies")}</span>
+                </span>
+              </button>
+            </div>
+            <div class="ons-grid__col">
+              <a class="ons-cookies-banner__link" href="/cookies">{i18n("View cookies")}</a>
+            </div>
+          </div>
+        </div>
+      </form>
+    {:else}
+      <div
+        class="ons-container ons-cookies-banner__confirmation"
+        class:ons-page__container--wide="{width === 'wide'}"
+      >
+        <div
+          class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center"
+        >
+          <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
+            <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s">
+              <span>{i18n(message)}</span>
+              <span class="ons-cookies-banner__preferences-text"
+                >{i18n("You can")} <a href="/cookies">{i18n("change your cookie preferences")}</a>
+                {i18n("at any time")}.</span
+              >
+            </p>
+          </div>
+          <div class="ons-grid__col">
+            <button
+              type="button"
+              class="ons-btn ons-btn--secondary ons-btn--small ons-js-hide-button"
+              on:click="{() => (showBanner = false)}"
+            >
+              <span class="ons-btn__inner"><span class="ons-btn__text">{i18n("Hide")}</span> </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .ons-cookies-banner {
+    /* padding: 0; */
+    background: none !important;
+  }
+  .ons-page__container--wide {
+    max-width: 1240px;
+  }</style>

package/dist/layout/BackLink/Backlink.svelte

@@ -0,0 +1,32 @@
+<script>
+  /**
+   * URL for previous page
+   * @type {string}
+   */
+  export let href = "#0";
+</script>
+
+<nav class="ons-breadcrumb" aria-label="Back">
+  <ol class="ons-breadcrumb__items ons-u-fs-s">
+    <li class="ons-breadcrumb__item" id="breadcrumb-1">
+      <a class="ons-breadcrumb__link" href="{href}" id="back">Back</a>
+      <svg
+        class="ons-svg-icon"
+        viewBox="0 0 8 13"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        fill="currentColor"
+      >
+        <path
+          d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
+          transform="translate(-5.02 -1.59)"></path>
+      </svg>
+    </li>
+  </ol>
+</nav>
+
+<style>
+  .ons-svg-icon {
+    color: currentColor;
+    fill: currentColor;
+  }</style>

package/dist/layout/Breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,39 @@
+<script>
+  /**
+   * An array of links in the format {label, href}
+   * @type {array}
+   */
+  export let links = [];
+</script>
+
+<div class="ons-page__container ons-container">
+  <nav class="ons-breadcrumb print--hide" aria-label="Breadcrumbs">
+    <ol class="ons-breadcrumb__items ons-u-fs-s">
+      {#each links as link}
+        <li class="ons-breadcrumb__item ons-u-p-no">
+          {#if link.href}
+            <a class="ons-breadcrumb__link" href="{link.href}">{link.label}</a>
+          {:else}
+            {link.label}
+          {/if}
+          <svg
+            class="ons-svg-icon"
+            viewBox="0 0 8 13"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false"
+          >
+            <path
+              d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
+              transform="translate(-5.02 -1.59)"></path>
+          </svg>
+        </li>
+      {/each}
+    </ol>
+  </nav>
+</div>
+
+<style>
+  .ons-svg-icon {
+    color: currentColor;
+    fill: currentColor;
+  }</style>

package/dist/layout/Contents/Contents.svelte

@@ -0,0 +1,44 @@
+<script>
+  /**
+   * Sets the title of the contents block
+   * @type {string}
+   */
+  export let title = "Contents";
+  /**
+   * Visually hides the title of the block
+   * @type {boolean}
+   */
+  export let hideTitle = false;
+  /**
+   * An array of links for the contentents block in the form {label, href?}. Excluding href renders an item as plain text.
+   * @type {array}
+   */
+  export let links = [];
+  /**
+   * An anchor link URL to the main content of the page (to skip contents)
+   * @type {string}
+   */
+  export let skipHref = "";
+</script>
+
+<aside class="ons-toc-container" role="complementary">
+  {#if skipHref}
+    <a class="ons-skip-link" href="{skipHref}">Skip to content</a>
+  {/if}
+  <nav class="ons-toc" aria-label="{title}">
+    {#if title}
+      <h2 class="ons-toc__title ons-u-fs-r--b ons-u-mb-s" class:ons-u-vh="{hideTitle}">{title}</h2>
+    {/if}
+    <ol class="ons-list ons-u-mb-m ons-list--dashed">
+      {#each links as link}
+        {#if link.href}
+          <li class="ons-list__item">
+            <a href="{link.href}" class="ons-list__link">{link.label}</a>
+          </li>
+        {:else}
+          <li class="ons-list__item" aria-current="true">{link.label}</li>
+        {/if}
+      {/each}
+    </ol>
+  </nav>
+</aside>

package/dist/layout/ErrorPage/ErrorPage.svelte

@@ -0,0 +1,39 @@
+<script>
+  /**
+   * Pass the "page" store from "$app/stores" in any Svelte Kit project
+   * @type {any}
+   */
+  export let page = null;
+  /**
+   * (Optional) Explicitly pass a page status number, eg. 404 or 500.
+   * @type {number}
+   */
+  export let status = $page ? $page.status : null;
+</script>
+
+<div class="ons-page__container ons-container">
+  <div class="ons-grid">
+    <div class="ons-grid__col ons-col-12@m">
+      <main id="main-content" class="ons-page__main">
+        {#if status === 404}
+          <h1>Page not found</h1>
+          <p>If you entered a web address, check it is correct.</p>
+          <p>If you pasted the web address, check you copied the whole address.</p>
+          <p>
+            If the web address is correct or you selected a link or button, <a href="/feedback"
+              >contact us</a
+            > for more help.
+          </p>
+        {:else}
+          <h1>Sorry, there is a problem with the service</h1>
+          <p>Try again later.</p>
+          <p>
+            If you continue to experience problems with this service, please <a href="/feedback"
+              >contact us</a
+            >.
+          </p>
+        {/if}
+      </main>
+    </div>
+  </div>
+</div>

package/dist/layout/Filler/Filler.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Container from "$lib/wrappers/Container/Container.svelte";
+  import Container from "../../wrappers/Container/Container.svelte";
 
   /**
    * (Optional) Sets the unique ID of the section

package/dist/layout/Footer/Footer.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount, getContext } from "svelte";
-  import Theme from "$lib/wrappers/Theme/Theme.svelte";
+  import Theme from "../../wrappers/Theme/Theme.svelte";
 
   const page = getContext("page");
 

package/dist/layout/Grid/Grid.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Container from "$lib/wrappers/Container/Container.svelte";
+  import Container from "../../wrappers/Container/Container.svelte";
 
   /**
    * (Optional) Sets the unique ID of the section

package/dist/layout/Header/Header.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount, getContext } from "svelte";
-  import Theme from "$lib/wrappers/Theme/Theme.svelte";
+  import Theme from "../../wrappers/Theme/Theme.svelte";
   import ONSLogo from "./ONSLogo.svelte";
 
   const page = getContext("page");
@@ -469,7 +469,7 @@
                 class="search__button col--md-3 col--lg-3"
                 id="nav-search-submit"
               >
-                <span class="visuallyhidden">{i18n("Search")}</span>
+                <span class="hidden">{i18n("Search")}</span>
                 <span class="icon-search--light">
                   <svg
                     class="ons-svg-icon ons-svg-icon--m"

package/dist/layout/Hero/Hero.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { validDate, formatDate } from "$lib/js/utils.js";
-  import Container from "$lib/wrappers/Container/Container.svelte";
+  import { validDate, formatDate } from "../../js/utils.js";
+  import Container from "../../wrappers/Container/Container.svelte";
 
   /**
    * (Optional) Sets the unique ID of the section

package/dist/layout/NavSections/NavSection.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount, onDestroy, getContext } from "svelte";
-  import { slugify } from "$lib/js/utils.js";
+  import { slugify } from "../../js/utils.js";
   import SectionBacklink from "./SectionBacklink.svelte";
 
   /**
@@ -41,8 +41,8 @@
 </script>
 
 <section id="{id}" aria-label="{title}" bind:this="{section}">
-  {#if title && !hideTitle}
-    <h2 class="ons-u-mt-xl ons-u-pb-no ons-u-pt-no">{title}</h2>
+  {#if title}
+    <h2 class="ons-u-mt-xl ons-u-pb-no ons-u-pt-no" class:ons-u-vh="{hideTitle}">{title}</h2>
   {/if}
   <slot />
   {#if tocId}

package/dist/layout/Notice/Notice.svelte

@@ -0,0 +1,54 @@
+<script>
+  /**
+   * (Optional) Notice title
+   * @type {string}
+   */
+  export let title = null;
+  /**
+   * Adds an exclamation mark icon
+   * @type {boolean}
+   */
+  export let important = false;
+  /**
+   * Sets the mode/colour of the notice
+   * @type {"info"|"success"|"pending"|"error"}
+   */
+  export let mode = "info";
+
+  $: style =
+    mode === "success"
+      ? "background: var(--ons-color-success-tint); border-color: var(--ons-color-success);"
+      : mode === "pending"
+      ? "background: var(--ons-color-pending-tint); border-color: var(--ons-color-pending);"
+      : mode === "error"
+      ? "background: var(--ons-color-errors-tint); border-color: var(--ons-color-errors);"
+      : null;
+</script>
+
+<div class="ons-panel ons-panel--info ons-panel--no-title ons-u-mt-m ons-u-mb-l" style="{style}">
+  <div class="ons-u-bg--tr" class:ons-panel--warn="{important}">
+    {#if important}<div class="ons-panel__icon" aria-hidden="true">!</div>{/if}
+    <span class="ons-panel__assistive-text ons-u-vh">Important information:</span>
+    <div class="ons-panel__body">
+      <div class="ons-u-fs-r default-line-height">
+        {#if title}<p><strong>{title}</strong></p>{/if}
+        <p class="ons-u-mb-no">
+          <slot />
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .ons-panel {
+    color: rgb(34, 34, 34);
+  }
+  :global(.ons-panel__body a) {
+    color: #206095 !important;
+  }
+  :global(.ons-panel__body a:hover) {
+    color: rgb(0, 60, 87) !important;
+    -webkit-text-decoration: underline solid rgb(0, 60, 87) 2px !important;
+            text-decoration: underline solid rgb(0, 60, 87) 2px !important;
+  }</style>