nsw-design-system 3.26.2 → 3.27.0

package/dist/js/global/scripts/helpers/utilities.d.ts

@@ -21,6 +21,6 @@ export function getFocusableElementBySelector(id: any, selectorArr: any): {
 export function trapTabKey(event: any, focusObject: any): boolean;
 export function whichTransitionEvent(): any;
 export function validateUrl(raw: any, fallback?: string): string;
-export function popupWindow(url: any, width: any, height: any): void;
+export function popupWindow(url: any, width: any, height: any): Window | null;
 export function setAriaDisabled(element: any, isDisabled: any, className?: string): void;
 export function isAriaDisabled(element: any): any;

package/dist/js/main.js

@@ -1,4 +1,4 @@
-/*! NSW Design System v3.26.2 | MIT License */
+/*! NSW Design System v3.27.0 | MIT License */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define('NSW', ['exports'], factory) :
@@ -195,6 +195,28 @@
         return fallback;
       }
     };
+    const popupWindow = (url, width, height) => {
+      if (!hasWindow$2 || typeof window.open !== 'function') return null;
+      const dialogWidth = Number(width) || 626;
+      const dialogHeight = Number(height) || 436;
+      let top = 0;
+      let left = 0;
+      try {
+        const topWindow = window.top;
+        top = topWindow.outerHeight / 2 + topWindow.screenY - dialogHeight / 2;
+        left = topWindow.outerWidth / 2 + topWindow.screenX - dialogWidth / 2;
+      } catch (e) {
+        top = (window.outerHeight || dialogHeight) / 2 + (window.screenY || 0) - dialogHeight / 2;
+        left = (window.outerWidth || dialogWidth) / 2 + (window.screenX || 0) - dialogWidth / 2;
+      }
+      const popup = window.open(url, 'nsw-share-dialog', `toolbar=no,location=no,directories=no,status=no,
+    menubar=no,scrollbars=no,resizable=no,copyhistory=no,
+    width=${dialogWidth},height=${dialogHeight},top=${top},left=${left},noopener,noreferrer`);
+
+      // Explicitly clear opener for browsers that do not fully enforce noopener from features.
+      if (popup) popup.opener = null;
+      return popup;
+    };
     const setAriaDisabled = (element, isDisabled, className = 'disabled') => {
       if (!element) return;
       element.setAttribute('aria-disabled', isDisabled ? 'true' : 'false');
@@ -7079,7 +7101,7 @@
             if (social === 'mail') {
               window.location.href = url;
             } else {
-              window.open(url, `${social}-share-dialog`, 'width=626,height=436');
+              popupWindow(url, 626, 436);
             }
           });
         }
@@ -7123,7 +7145,7 @@
         }
         params.forEach(param => {
           let paramValue = button.getAttribute(`data-${param}`);
-          if (param === 'hashtags') paramValue = encodeURI(paramValue.replace(/#| /g, ''));
+          if (param === 'hashtags' && paramValue) paramValue = encodeURI(paramValue.replace(/#| /g, ''));
           if (paramValue) {
             if (social === 'facebook') {
               newUrl = `${newUrl}u=${encodeURIComponent(paramValue)}&`;
@@ -7594,4 +7616,4 @@
 
 }));
 
-;(function(g){try{g.NSW=g.NSW||{};g.NSW.VERSION="3.26.2";}catch(e){} }(typeof globalThis!=='undefined'?globalThis:(typeof window!=='undefined'?window:self)));
+;(function(g){try{g.NSW=g.NSW||{};g.NSW.VERSION="3.27.0";}catch(e){} }(typeof globalThis!=='undefined'?globalThis:(typeof window!=='undefined'?window:self)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsw-design-system",
-  "version": "3.26.2",
+  "version": "3.27.0",
   "description": "Design system for Digital NSW",
   "main": "dist/js/main.js",
   "types": "dist/js/main.d.ts",
@@ -16,6 +16,7 @@
   "files": [
     "dist/{css,js}/**/*.{css,d.ts,js,map}",
     "src/{components,patterns,styles,core}/**/*.{scss,js}",
+    "src/docs/content/methods/easy-read/_easy-read.scss",
     "src/global/{scripts,scss}/**/*.{scss,js}",
     "src/main.{scss,js}"
   ],

package/src/components/content-block/_content-block.scss

@@ -57,4 +57,17 @@
   &__icon {
     margin-bottom: nsw.rem(12px);
   }
+
+  &__pictogram {
+    width: nsw.rem(48px);
+    height: nsw.rem(48px);
+
+    > svg {
+      box-sizing: border-box;
+      display: block;
+      width: 100%;
+      height: 100%;
+      padding: nsw.rem(3px);
+    }
+  }
 }

package/src/components/form/_form.scss

@@ -16,6 +16,7 @@
     &:first-child {
       margin-top: 0;
     }
+
   }
 
   &__helper {
@@ -26,7 +27,9 @@
     @include nsw.font-size('xs');
 
     &--error,
-    &--valid {
+    &--valid,
+    &--warning,
+    &--info {
       margin-top: nsw.rem(8px);
       padding: nsw.rem(8px);
       font-weight: var(--nsw-font-bold);
@@ -58,6 +61,36 @@
         color: var(--nsw-status-success);
       }
     }
+
+    &--warning {
+      align-items: flex-start;
+      font-weight: var(--nsw-font-normal);
+      background-color: var(--nsw-status-warning-bg);
+
+      .nsw-material-icons {
+        flex-shrink: 0;
+        color: var(--nsw-status-warning);
+      }
+
+      strong {
+        font-weight: var(--nsw-font-bold);
+      }
+    }
+
+    &--info {
+      align-items: flex-start;
+      font-weight: var(--nsw-font-normal);
+      background-color: var(--nsw-status-info-bg);
+
+      .nsw-material-icons {
+        flex-shrink: 0;
+        color: var(--nsw-status-info);
+      }
+
+      strong {
+        font-weight: var(--nsw-font-bold);
+      }
+    }
   }
 
   &__label {

package/src/components/link-list/_link-list.scss

@@ -48,7 +48,7 @@
     }
 
     span {
-      text-decoration: underline;
+      // text-decoration: underline;
 
       span.nsw-material-icons {
         bottom: nsw.rem(-5px);

package/src/components/utility-list/_utility-list.scss

@@ -95,6 +95,32 @@
     }
   }
 
+  &__item--link {
+    padding: 0;
+  }
+
+  &__link {
+    width: 100%;
+    padding: nsw.rem(16px);
+    display: flex;
+    gap: nsw.$grid-gutters;
+    align-items: center;
+    color: inherit;
+    text-decoration: none;
+
+    &:visited {
+      color: inherit;
+    }
+
+    &:hover {
+      outline-width: 0;
+    }
+
+    &:focus {
+      @include nsw.nsw-focus;
+    }
+  }
+
   .nsw-toggletip {
     border-bottom: unset;
 

package/src/components/utility-list/utility-list.js

@@ -1,6 +1,6 @@
 import Toggletip from '../tooltip/toggletip'
 import logger from '../../global/scripts/helpers/logger'
-import { copyToClipboard as writeToClipboard } from '../../global/scripts/helpers/utilities'
+import { copyToClipboard as writeToClipboard, popupWindow } from '../../global/scripts/helpers/utilities'
 
 class UtilityList extends Toggletip {
   constructor(element, toggletip = element.querySelector('.js-share')) {
@@ -36,7 +36,7 @@ class UtilityList extends Toggletip {
         if (social === 'mail') {
           window.location.href = url
         } else {
-          window.open(url, `${social}-share-dialog`, 'width=626,height=436')
+          popupWindow(url, 626, 436)
         }
       })
     }
@@ -89,7 +89,7 @@ class UtilityList extends Toggletip {
 
     params.forEach((param) => {
       let paramValue = button.getAttribute(`data-${param}`)
-      if (param === 'hashtags') paramValue = encodeURI(paramValue.replace(/#| /g, ''))
+      if (param === 'hashtags' && paramValue) paramValue = encodeURI(paramValue.replace(/#| /g, ''))
       if (paramValue) {
         if (social === 'facebook') {
           newUrl = `${newUrl}u=${encodeURIComponent(paramValue)}&`

package/src/core/typography/_typography.scss

@@ -240,7 +240,6 @@ h6,
   line-height: var(--nsw-line-height);
 }
 
-
 a {
   @include nsw.link;
 

package/src/docs/content/methods/easy-read/_easy-read.scss

@@ -0,0 +1,345 @@
+@use '../../../../global/scss/tools' as nsw;
+
+.nsw-easy-read-content {
+  font-size: nsw.rem(20px);
+  line-height: nsw.rem(32px);
+
+  p,
+  ul,
+  ol,
+  dl,
+  .nsw-intro,
+  .nsw-easy-read-block__copy {
+    font-size: nsw.rem(20px);
+    line-height: nsw.rem(32px);
+  }
+
+  h1,
+  .nsw-h1 {
+    font-size: nsw.rem(44px);
+    line-height: nsw.rem(56px);
+
+    @include nsw.breakpoint('lg') {
+      font-size: nsw.rem(60px);
+      line-height: nsw.rem(76px);
+    }
+  }
+
+  h2,
+  .nsw-h2 {
+    font-size: nsw.rem(36px);
+    line-height: nsw.rem(44px);
+
+    @include nsw.breakpoint('lg') {
+      font-size: nsw.rem(40px);
+      line-height: nsw.rem(52px);
+    }
+  }
+
+  h3,
+  .nsw-h3 {
+    font-size: nsw.rem(28px);
+    line-height: nsw.rem(36px);
+
+    @include nsw.breakpoint('lg') {
+      font-size: nsw.rem(32px);
+      line-height: nsw.rem(40px);
+    }
+  }
+
+  h4,
+  .nsw-h4,
+  .nsw-card__title {
+    font-size: nsw.rem(24px);
+    font-weight: var(--nsw-font-bold);
+    line-height: nsw.rem(32px);
+  }
+
+  // Keep the card API generic and apply the Easy Read proportions and type
+  // treatment only when a horizontal card is used in Easy Read content.
+
+  .nsw-card--horizontal {
+    --nsw-easy-read-card-image-width: 33.333%;
+
+    .nsw-card__copy,
+    .nsw-card__tag,
+    .nsw-card__date {
+      font-size: nsw.rem(20px);
+      line-height: nsw.rem(32px);
+    }
+
+    @include nsw.breakpoint('md') {
+      .nsw-card__image {
+        flex-basis: var(--nsw-easy-read-card-image-width);
+        min-height: nsw.rem(240px);
+        max-height: nsw.rem(420px);
+        overflow: hidden;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .nsw-card__content {
+        flex-basis: calc(100% - var(--nsw-easy-read-card-image-width));
+        justify-content: center;
+        padding: nsw.rem(24px) nsw.rem(24px) nsw.rem(72px);
+
+        > .nsw-material-icons {
+          right: auto;
+          bottom: nsw.rem(24px);
+          left: calc(var(--nsw-easy-read-card-image-width) + #{nsw.rem(24px)});
+          transform: none;
+        }
+      }
+    }
+
+    @include nsw.breakpoint('lg') {
+      .nsw-card__content {
+        padding: nsw.rem(32px) nsw.rem(32px) nsw.rem(88px);
+
+        > .nsw-material-icons {
+          bottom: nsw.rem(32px);
+          left: calc(var(--nsw-easy-read-card-image-width) + #{nsw.rem(32px)});
+        }
+      }
+    }
+  }
+
+  p + p {
+    margin-top: nsw.rem(24px);
+  }
+
+  &__heading-text {
+    display: block;
+    margin-top: nsw.rem(16px);
+  }
+
+  &__heading-icon {
+    display: block;
+    box-sizing: border-box;
+    width: nsw.rem(48px);
+    height: nsw.rem(48px);
+    padding: nsw.rem(3px);
+    background-image: url(#{nsw.$nsw-easy-read-icon});
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    background-origin: content-box;
+    background-clip: content-box;
+  }
+
+  &__divider {
+    margin: nsw.rem(16px) 0;
+    border: 0;
+    border-top: 1px solid var(--nsw-grey-04);
+
+    @include nsw.breakpoint('md') {
+      margin: nsw.rem(20px) 0;
+    }
+  }
+
+  &__block-stack {
+    margin: nsw.rem(32px) 0;
+
+    @include nsw.breakpoint('md') {
+      margin: nsw.rem(40px) 0;
+    }
+  }
+
+  &__block-item {
+    margin: 0;
+  }
+}
+
+.nsw-easy-read-core-ideas {
+  .nsw-content-block__image {
+    max-height: nsw.rem(48px);
+  }
+
+  .nsw-content-block__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: nsw.rem(48px);
+    height: nsw.rem(48px);
+    max-width: nsw.rem(48px);
+    max-height: nsw.rem(48px);
+    padding: nsw.rem(3px);
+    box-sizing: border-box;
+
+    svg {
+      display: block;
+      width: nsw.rem(42px);
+      height: nsw.rem(42px);
+      max-width: nsw.rem(42px);
+      max-height: nsw.rem(42px);
+    }
+  }
+}
+
+.nsw-easy-read-block {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  width: 100%;
+  border-radius: var(--nsw-border-radius);
+  overflow: hidden;
+
+  @include nsw.breakpoint('md') {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+  }
+
+  &__image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+
+    &--landscape {
+      aspect-ratio: 3 / 2;
+      overflow: hidden;
+
+      img {
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  &__content {
+    min-width: 0;
+    padding: nsw.rem(24px) nsw.rem(20px);
+
+    @include nsw.breakpoint('md') {
+      padding: nsw.rem(32px);
+    }
+  }
+
+  &__title {
+    margin: 0;
+    font-weight: var(--nsw-font-bold);
+    text-wrap: pretty;
+  }
+
+  &__copy {
+    text-wrap: pretty;
+  }
+
+  &.nsw-section--brand-dark,
+  &.nsw-section--invert {
+    a {
+      @include nsw.link-light;
+    }
+  }
+
+  &.nsw-section--brand-light,
+  &.nsw-section--off-white,
+  &.nsw-section--white {
+    a {
+      @include nsw.link-dark;
+    }
+  }
+}
+
+.nsw-easy-read-about {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  .nsw-callout__content {
+    flex: 1 1 auto;
+  }
+
+  &__pictogram {
+    background-image: url(#{nsw.$nsw-easy-read-icon});
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    background-origin: content-box;
+    background-clip: content-box;
+  }
+
+  .nsw-callout__pictogram {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    width: nsw.rem(48px);
+    height: nsw.rem(48px);
+    padding: nsw.rem(3px);
+    margin-right: nsw.rem(16px);
+  }
+}
+
+.nsw-easy-read-downloads {
+  h2 {
+    margin-top: 0;
+  }
+
+
+  > .nsw-utility-list {
+    margin: nsw.rem(24px) 0;
+
+    @include nsw.breakpoint('lg') {
+      margin: nsw.rem(32px) 0;
+    }
+
+    + p {
+      margin-top: 0;
+    }
+  }
+
+}
+
+.nsw-easy-read-content .nsw-easy-read-metadata {
+  div + div {
+    margin-top: nsw.rem(4px);
+  }
+
+  dt,
+  dd {
+    display: inline;
+  }
+
+  dt {
+    font-weight: var(--nsw-font-bold);
+  }
+
+  dd {
+    margin-left: nsw.rem(4px);
+  }
+}
+
+
+.nsw-easy-read-category-group {
+  + .nsw-easy-read-category-group {
+    margin-top: nsw.rem(32px);
+
+    @include nsw.breakpoint('md') {
+      margin-top: nsw.rem(48px);
+    }
+  }
+
+  &__image {
+    display: block;
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    border-radius: var(--nsw-border-radius);
+    object-fit: cover;
+  }
+
+  &__content h2 {
+    margin-top: nsw.rem(24px);
+
+    @include nsw.breakpoint('md') {
+      margin-top: 0;
+    }
+  }
+}

package/src/global/scripts/helpers/utilities.js

@@ -172,16 +172,33 @@ export const validateUrl = (raw, fallback = 'https://www.google.com/webhp') => {
 }
 
 export const popupWindow = (url, width, height) => {
-  const y = window.top.outerHeight / 2 + window.top.screenY - (height / 2)
-  const x = window.top.outerWidth / 2 + window.top.screenX - (width / 2)
+  if (!hasWindow || typeof window.open !== 'function') return null
 
-  window.open(
+  const dialogWidth = Number(width) || 626
+  const dialogHeight = Number(height) || 436
+  let top = 0
+  let left = 0
+
+  try {
+    const topWindow = window.top
+    top = topWindow.outerHeight / 2 + topWindow.screenY - (dialogHeight / 2)
+    left = topWindow.outerWidth / 2 + topWindow.screenX - (dialogWidth / 2)
+  } catch (e) {
+    top = (window.outerHeight || dialogHeight) / 2 + (window.screenY || 0) - (dialogHeight / 2)
+    left = (window.outerWidth || dialogWidth) / 2 + (window.screenX || 0) - (dialogWidth / 2)
+  }
+
+  const popup = window.open(
     url,
-    '',
-    `toolbar=no,location=no,directories=no, status=no,
-    menubar=no, scrollbars=no, resizable=no, copyhistory=no,
-    width=${width}, height=${height}, top=${y}, left=${x}`,
+    'nsw-share-dialog',
+    `toolbar=no,location=no,directories=no,status=no,
+    menubar=no,scrollbars=no,resizable=no,copyhistory=no,
+    width=${dialogWidth},height=${dialogHeight},top=${top},left=${left},noopener,noreferrer`,
   )
+
+  // Explicitly clear opener for browsers that do not fully enforce noopener from features.
+  if (popup) popup.opener = null
+  return popup
 }
 
 export const setAriaDisabled = (element, isDisabled, className = 'disabled') => {

package/src/global/scss/settings/_settings.scss

@@ -391,3 +391,6 @@ $nsw-vertical-align: (
   valign-middle: middle,
   valign-bottom: bottom,
 );
+
+// Easy Read
+$nsw-easy-read-icon: "data:image/svg+xml,%3Csvg width='90' height='83' viewBox='0 0 90 83' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M84.8978 7.6886H88.0476V62.6834H1.95312V7.6886H11.3185' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M72.2975 23.437H51.2988' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M72.2955 15.1467H51.2969' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M72.2975 31.8375H51.2988' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M72.2975 40.2363H51.2988' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M45 62.5997V5.98801C45 3.67818 46.8899 1.78833 49.1997 1.78833H81.7476V54.2843H49.1997C46.8689 54.2843 45 56.1742 45 58.484V62.5997Z' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M44.9996 62.5997V5.98801C44.9996 3.67818 43.1097 1.78833 40.7999 1.78833H22.783V16.5712L8.25195 16.6762V54.3053H40.7999C43.1307 54.3053 44.9996 56.1952 44.9996 58.505V62.6207V62.5997Z' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M22.783 1.74609L8.25195 16.655' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M0.839844 70.2229H8.48335V71.7558H2.58273V75.3465H7.83239V76.8374H2.58273V80.5121H8.63034V82.066H0.839844V70.2229Z' fill='%23002664'/%3E%3Cpath d='M14.4048 70.2229H16.3367L20.5994 82.066H18.8355L17.7226 78.9582H13.0189L11.906 82.066H10.1211L14.4048 70.2229ZM17.2606 77.3834L15.3498 71.9448L13.4389 77.3834H17.2396H17.2606Z' fill='%23002664'/%3E%3Cpath d='M24.4217 81.8563C23.7287 81.6043 23.1618 81.2263 22.6998 80.7014C22.2378 80.1974 21.9649 79.5674 21.8809 78.8535H23.7077C23.8547 79.4625 24.1697 79.9454 24.6947 80.2814C25.2196 80.6174 25.8496 80.7854 26.5846 80.7854C27.1095 80.7854 27.5715 80.7224 27.9915 80.5754C28.4114 80.4284 28.7474 80.2184 28.9784 79.9454C29.2304 79.6724 29.3354 79.3365 29.3354 78.9795C29.3354 78.4965 29.1674 78.0976 28.8104 77.7826C28.4534 77.4676 27.9495 77.2576 27.2985 77.1106L25.0517 76.6067C24.1487 76.4177 23.4558 76.0607 22.9518 75.5568C22.4478 75.0318 22.2168 74.3598 22.2168 73.5409C22.2168 72.848 22.4058 72.26 22.7838 71.735C23.1618 71.2101 23.6657 70.7901 24.3167 70.5171C24.9677 70.2232 25.7026 70.0762 26.5426 70.0762C27.4665 70.0762 28.2854 70.2232 28.9364 70.5381C29.6084 70.8531 30.1123 71.2731 30.4483 71.798C30.7843 72.323 30.9733 72.911 30.9733 73.5409H29.1884C29.1254 72.827 28.8524 72.323 28.3694 71.987C27.9075 71.672 27.2985 71.5041 26.5426 71.5041C26.1016 71.5041 25.6816 71.5881 25.3036 71.735C24.9257 71.882 24.6317 72.092 24.4007 72.386C24.1697 72.659 24.0647 72.995 24.0647 73.3939C24.0647 73.6669 24.1277 73.9189 24.2327 74.1079C24.3377 74.2969 24.5477 74.4858 24.8207 74.6328C25.0937 74.7798 25.4716 74.9058 25.9756 75.0318L28.1805 75.5358C29.3144 75.7667 30.0703 76.2077 30.5113 76.8377C30.9313 77.4676 31.1413 78.1816 31.1413 78.9795C31.1413 79.5884 30.9523 80.1554 30.5953 80.6384C30.2173 81.1423 29.6924 81.5203 29.0204 81.8143C28.3274 82.1083 27.5295 82.2552 26.6056 82.2552C25.8286 82.2552 25.0937 82.1293 24.4217 81.8773V81.8563Z' fill='%23002664'/%3E%3Cpath d='M37.6081 77.0475V82.0661H35.8652V77.0265L31.8125 70.202H33.7234L36.7472 75.4726L39.729 70.202H41.6399L37.6081 77.0265V77.0475Z' fill='%23002664'/%3E%3Cpath d='M53.7972 82.0659L51.6974 77.1103H48.7155V82.0659H46.9727V70.2228H51.6764C52.9573 70.2228 53.9442 70.5168 54.5952 71.1047C55.2461 71.6927 55.5821 72.5116 55.5821 73.5405C55.5821 75.1154 54.8261 76.2073 53.3352 76.8163L55.6241 82.0659H53.7762H53.7972ZM51.1934 75.6824C52.0123 75.6824 52.6633 75.5144 53.1043 75.1364C53.5452 74.7584 53.7762 74.2755 53.7762 73.6035C53.7762 72.9316 53.5662 72.4696 53.1673 72.1126C52.7683 71.7767 52.2013 71.5877 51.4874 71.5877H48.7155V75.6614H51.1934V75.6824Z' fill='%23002664'/%3E%3Cpath d='M58.1445 70.2227H65.788V71.7555H59.8874V75.3463H65.1371V76.8372H59.8874V80.5119H65.935V82.0657H58.1445V70.2227Z' fill='%23002664'/%3E%3Cpath d='M71.7095 70.2228H73.6414L77.9041 82.0659H76.1402L75.0273 78.9581H70.3236L69.2107 82.0659H67.4258L71.7095 70.2228ZM74.5653 77.3832L72.6544 71.9446L70.7436 77.3832H74.5443H74.5653Z' fill='%23002664'/%3E%3Cpath d='M82.9867 70.2438C85.1076 70.2858 86.6615 70.7897 87.6694 71.7767C88.6773 72.7636 89.1603 74.1915 89.1603 76.0813C89.1603 77.9712 88.6353 79.5251 87.6064 80.533C86.5565 81.5409 84.9816 82.0659 82.8817 82.0659H80.0469V70.2228C81.3488 70.2228 82.3567 70.2228 83.0077 70.2228L82.9867 70.2438ZM82.8817 80.596C84.2886 80.596 85.3805 80.239 86.1575 79.5251C86.9344 78.8111 87.3124 77.6772 87.3124 76.0813C87.3124 74.4855 86.9344 73.3935 86.1995 72.7216C85.4645 72.0496 84.3726 71.6927 82.9237 71.6927H81.8108V80.596H82.8817Z' fill='%23002664'/%3E%3Cpath d='M37.0104 23.4374H16.0117V40.2361H37.0104V23.4374Z' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3C/svg%3E%0A";

package/src/main.scss

@@ -3,6 +3,7 @@
 @use 'global/scss/helpers/all' as helpers;
 @use 'core/all' as core;
 @use 'components/all' as components;
+@use 'docs/content/methods/easy-read/easy-read';
 @use 'components/accordion/accordion';
 @use 'components/back-to-top/back-to-top';
 @use 'components/date-input/date-input';