@scottish-government/designsystem-react 0.12.1 → 1.0.0

package/src/images/icons/search.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgSearch = (props: SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="#000000"
-        role="img"
-        {...props}
-    >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
-    </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#000000"
+    role="img"
+    {...props}
+  >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+  </svg>
 );
 export default SvgSearch;

package/src/shared-types.ts

@@ -0,0 +1,40 @@
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type IconName = 'ArrowUpward' | 'CalendarToday' | 'Cancel' | 'CheckCircle' | 'ChevronLeft' | 'ChevronRight' | 'Close' | 'Description' | 'DoubleChevronLeft' | 'DoubleChevronRight' | 'Error' | 'ExpandLess' | 'ExpandMore' | 'List' | 'Menu' | 'PriorityHigh' | 'Search';
+export type DocumentIconName = 'Audio' | 'Csv' | 'Excel' | 'File' | 'Generic' | 'Geodata' | 'Ical' | 'Ico' | 'Image' | 'Odf' | 'Odg' | 'Odp' | 'Ods' | 'Odt' | 'Pdf' | 'Ppt' | 'Rtf' | 'Text' | 'Video' | 'Word' | 'Xml' | 'Zip';
+export type InputWidth = 'fixed-20' | 'fixed-10' | 'fixed-5' | 'fixed-4' | 'fixed-3' | 'fixed-2' | 'fluid-three-quarters' | 'fluid-two-thirds' | 'fluid-half' | 'fluid-one-third' | 'fluid-one-quarter';
+export type TagColour = 'grey' | 'green' | 'teal' | 'blue' | 'purple' | 'pink' | 'red' | 'orange' | 'yellow';
+export type TextInputType = 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+
+export type LinkComponentProps = {
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'aria-current'?: React.AriaAttributes['aria-current'];
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    children?: React.ReactNode;
+    className?: string;
+    href?: string;
+    onClick?: React.EventHandler<React.MouseEvent>;
+}
+
+export type LinkComponent = (linkComponent: LinkComponentProps) => React.ReactNode;
+
+export interface CheckboxRadioBase<T> extends React.InputHTMLAttributes<T> {
+    hintText?: string | React.ReactNode;
+    label: string;
+    onBlur?: React.FocusEventHandler<T>;
+    onChange?: React.ChangeEventHandler<T>;
+    isSmall?: boolean;
+}
+
+export interface FormFieldBase<T> extends React.AllHTMLAttributes <T> {
+    errorMessage?: string | React.ReactNode;
+    hasError?: boolean;
+    hintText?: string | React.ReactNode;
+    label: string;
+    onBlur?: React.FocusEventHandler<T>;
+    onChange?: React.ChangeEventHandler<T>;
+}
+
+export interface TextInputBase<T> extends FormFieldBase<T> {
+    countThreshold?: number;
+    maxlength?: number;
+}

package/static/images/illustration.svg

@@ -0,0 +1,502 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Final" viewBox="0 0 352 264">
+    
+  <defs>
+        
+    <style>.cls-1{fill:#00437e;}.cls-2,.cls-3{fill:#002d54;}.cls-4{fill:#0065bd;}.cls-5{fill:#0065bc;}.cls-6{fill:#ebebeb;}.cls-7{fill:#fff;}.cls-8{fill:#fdd522;}.cls-9{fill:#b3b3b3;}.cls-10{fill:#428542;}.cls-11{fill:#5eb135;}.cls-3,.cls-12{opacity:.2;}.cls-12{fill:none;}</style>
+      
+  </defs>
+    
+  <rect class="cls-3" height="152" width="208" x="88" y="56"/>
+    
+  <g id="Text">
+        
+    <path class="cls-7" d="m289.5,64.37h-16.2l-3.64,10.11h-5.26l14.77-38.67h4.46l14.8,38.67h-5.23l-3.68-10.11h-.01Zm-14.65-4.18h13.15l-6.59-18.09-6.56,18.09h0Z"/>
+        
+    <path class="cls-7" d="m320.59,74.48c-.29-.56-.52-1.57-.69-3.03-2.28,2.37-5.01,3.55-8.18,3.55-2.83,0-5.16-.79-6.96-2.4-1.82-1.6-2.72-3.63-2.72-6.1,0-2.99,1.14-5.32,3.41-6.96,2.27-1.66,5.48-2.49,9.59-2.49h4.78v-2.25c0-1.72-.52-3.08-1.55-4.1-1.03-1.01-2.54-1.53-4.54-1.53-1.75,0-3.22.45-4.41,1.33s-1.78,1.95-1.78,3.21h-4.94c0-1.43.51-2.82,1.53-4.16,1.03-1.34,2.4-2.4,4.15-3.18,1.75-.78,3.66-1.17,5.75-1.17,3.31,0,5.91.82,7.79,2.49s2.85,3.93,2.92,6.83v13.22c0,2.64.33,4.74,1.01,6.3v.42h-5.16v.03Zm-8.15-3.74c1.55,0,3.01-.4,4.38-1.2,1.39-.79,2.38-1.84,3.01-3.11v-5.9h-3.84c-6.03,0-9.03,1.76-9.03,5.29,0,1.55.52,2.75,1.55,3.61s2.34,1.3,3.96,1.3h-.01Z"/>
+      
+  </g>
+    
+  <g id="Page_nav">
+        
+    <path class="cls-7" d="m140,257c-20.4,0-37-16.6-37-37s16.6-37,37-37,37,16.6,37,37-16.6,37-37,37Zm0-72c-19.3,0-35,15.7-35,35s15.7,35,35,35,35-15.7,35-35-15.7-35-35-35Z"/>
+        
+    <path class="cls-7" d="m135.37,243.04l-7.78-7.78,15.26-15.26-15.26-15.26,7.78-7.78,23.04,23.04-23.04,23.04Zm-4.95-7.78l4.95,4.95,20.21-20.21-20.21-20.21-4.95,4.95,15.26,15.26-15.26,15.26Z"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="196" cy="220" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="204" cy="220" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="212" cy="220" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="220" cy="220" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="228" cy="220" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="236" cy="220" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="244" cy="220" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="252" cy="220" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="260" cy="220" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="268" cy="220" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="276" cy="220" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="196" cy="228" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="204" cy="228" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="212" cy="228" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="220" cy="228" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="228" cy="228" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="236" cy="228" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="244" cy="228" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="252" cy="228" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="260" cy="228" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="268" cy="228" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="276" cy="228" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="196" cy="236" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="204" cy="236" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="212" cy="236" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="220" cy="236" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="228" cy="236" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="236" cy="236" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="244" cy="236" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="252" cy="236" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="260" cy="236" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="268" cy="236" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="276" cy="236" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="196" cy="244" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="204" cy="244" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="212" cy="244" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="220" cy="244" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="228" cy="244" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="236" cy="244" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="244" cy="244" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="252" cy="244" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="260" cy="244" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="268" cy="244" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="276" cy="244" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="196" cy="252" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="204" cy="252" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="212" cy="252" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="220" cy="252" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="228" cy="252" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="236" cy="252" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="244" cy="252" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="252" cy="252" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="260" cy="252" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="268" cy="252" r="2"/>
+      
+  </g>
+    
+  <g class="cls-12">
+        
+    <circle class="cls-2" cx="276" cy="252" r="2"/>
+      
+  </g>
+    
+  <circle class="cls-8" cx="256" cy="136" r="16"/>
+    
+  <path class="cls-7" d="m256,149.22c-7.29,0-13.22-5.93-13.22-13.22s5.93-13.22,13.22-13.22,13.22,5.93,13.22,13.22-5.93,13.22-13.22,13.22Z"/>
+    
+  <path class="cls-2" d="m256,123.78c6.74,0,12.22,5.48,12.22,12.22s-5.48,12.22-12.22,12.22-12.22-5.48-12.22-12.22,5.48-12.22,12.22-12.22m0-2c-7.85,0-14.22,6.37-14.22,14.22s6.37,14.22,14.22,14.22,14.22-6.37,14.22-14.22-6.37-14.22-14.22-14.22h0Z"/>
+    
+  <circle class="cls-2" cx="256" cy="136" r="7.11"/>
+    
+  <circle class="cls-7" cx="256" cy="176" r="13.22"/>
+    
+  <path class="cls-2" d="m256,163.78c6.74,0,12.22,5.48,12.22,12.22s-5.48,12.22-12.22,12.22-12.22-5.48-12.22-12.22,5.48-12.22,12.22-12.22m0-2c-7.85,0-14.22,6.37-14.22,14.22s6.37,14.22,14.22,14.22,14.22-6.37,14.22-14.22-6.37-14.22-14.22-14.22h0Z"/>
+    
+  <g id="Desktop">
+        
+    <rect class="cls-6" height="160" rx="5.33" ry="5.33" width="224" x="8" y="8"/>
+        
+    <rect class="cls-7" height="70.67" width="224" x="8" y="22.67"/>
+        
+    <rect class="cls-5" height="10.67" width="32" x="18.67" y="136"/>
+        
+    <rect class="cls-9" height="5.33" width="64" x="18.67" y="104"/>
+        
+    <rect class="cls-9" height="5.33" width="64" x="18.67" y="114.67"/>
+        
+    <rect class="cls-9" height="5.33" width="32" x="18.67" y="125.33"/>
+        
+    <rect class="cls-9" height="10.67" width="106.67" x="114.67" y="34.67"/>
+        
+    <rect class="cls-9" height="5.33" width="106.67" x="114.67" y="50.67"/>
+        
+    <rect class="cls-9" height="5.33" width="53.33" x="114.67" y="61.33"/>
+        
+    <rect class="cls-5" height="48" width="85.33" x="18.67" y="34.67"/>
+        
+    <polygon class="cls-7" points="102.16 86.64 17.21 37.75 20.51 30.69 105.45 79.59 102.16 86.64"/>
+        
+    <path class="cls-1" d="m13.33,8h213.33c2.95,0,5.33,2.39,5.33,5.33v9.33H8v-9.33c0-2.95,2.39-5.33,5.33-5.33Z"/>
+        
+    <polygon class="cls-7" points="20.51 86.64 17.21 79.59 102.16 30.69 105.45 37.75 20.51 86.64"/>
+        
+    <circle class="cls-4" cx="21.33" cy="16" r="2.67"/>
+        
+    <path class="cls-7" d="m226.67,169H13.33c-3.49,0-6.33-2.84-6.33-6.33V13.33c0-3.49,2.84-6.33,6.33-6.33h213.33c3.49,0,6.33,2.84,6.33,6.33v149.33c0,3.49-2.84,6.33-6.33,6.33ZM13.33,9c-2.39,0-4.33,1.94-4.33,4.33v149.33c0,2.39,1.94,4.33,4.33,4.33h213.33c2.39,0,4.33-1.94,4.33-4.33V13.33c0-2.39-1.94-4.33-4.33-4.33H13.33Z"/>
+        
+    <circle class="cls-8" cx="31.87" cy="15.73" r="2.67"/>
+        
+    <circle class="cls-11" cx="42.53" cy="15.73" r="2.67"/>
+        
+    <rect class="cls-7" height="42.67" rx="5.33" ry="5.33" width="128" x="93.33" y="104"/>
+        
+    <rect class="cls-9" height="2.67" width="24" x="189.33" y="114.67"/>
+        
+    <g id="Pie">
+            
+      <path class="cls-11" d="m135.99,124.76c-.05-1.45-.29-2.87-.71-4.19-.43-1.37-1.01-2.67-1.8-3.84-.75-1.23-1.68-2.32-2.75-3.28l-6.29,6.29c.51.43.95.88,1.33,1.4.37.52.68,1.08.91,1.71.23.59.37,1.23.41,1.88.04.2.04.39.04.59,0,.44-.04.89-.12,1.32h0s8.59,2.32,8.59,2.32c.27-1.17.43-2.4.43-3.65,0-.19,0-.37-.01-.56h-.03Z"/>
+            
+      <path class="cls-4" d="m120.61,132.41v8.91h-.63c-8.83,0-15.99-7.16-15.99-16.01,0-5.89,3.19-11.03,7.93-13.8l4.48,7.68c-2.09,1.24-3.52,3.53-3.52,6.13,0,3.93,3.2,7.11,7.11,7.11.21,0,.41-.01.61-.03h0Z"/>
+            
+      <path class="cls-8" d="m126.99,126.67c-.11.64-.32,1.23-.59,1.77-.28.57-.63,1.08-1.01,1.55-.41.47-.87.87-1.39,1.23-.48.33-1.03.6-1.6.8-.55.21-1.13.33-1.75.39h-.04v8.91c1.41-.05,2.77-.29,4.05-.69,1.32-.39,2.6-.97,3.75-1.69,1.19-.73,2.28-1.61,3.23-2.63s1.79-2.16,2.44-3.4c.67-1.23,1.16-2.53,1.48-3.92l-8.59-2.31h.01Z"/>
+            
+      <path class="cls-10" d="m130.72,113.45l-6.29,6.29h0c-.52-.4-1.07-.75-1.69-.99-.59-.25-1.23-.41-1.91-.48-.27-.04-.53-.05-.81-.05-.39,0-.76.03-1.12.08-.88.15-1.72.44-2.47.89l-4.48-7.68c2.08-1.21,4.45-1.97,6.99-2.15.36-.03.72-.04,1.07-.04,1.09,0,2.16.11,3.17.31,1.43.29,2.79.76,4.04,1.41,1.28.64,2.47,1.45,3.52,2.4h-.01Z"/>
+            
+      <path class="cls-7" d="m112.89,125.33c0-3.53,2.61-6.49,5.99-7.03.36-.05.73-.09,1.12-.09.28,0,.55.01.81.05.68.07,1.32.23,1.91.48.63.25,1.17.59,1.69.97.52.43.96.89,1.35,1.43.37.52.68,1.08.91,1.71.23.59.37,1.23.41,1.88.04.2.04.39.04.59,0,.44-.04.89-.12,1.32-.11.64-.32,1.24-.59,1.8-.28.57-.63,1.08-1.01,1.55-.41.47-.87.87-1.39,1.23-.48.33-1.03.6-1.6.8-.55.21-1.13.33-1.75.39-.21.01-.43.04-.65.04-3.91,0-7.11-3.19-7.11-7.11h-.01Z"/>
+          
+    </g>
+        
+    <rect class="cls-10" height="10.67" width="5.33" x="144" y="120"/>
+        
+    <rect class="cls-11" height="16" width="5.33" x="154.67" y="117.33"/>
+        
+    <rect class="cls-8" height="21.33" width="5.33" x="165.33" y="114.67"/>
+        
+    <rect class="cls-4" height="10.67" width="5.33" x="176" y="120"/>
+        
+    <rect class="cls-9" height="2.67" width="24" x="189.33" y="120.89"/>
+        
+    <rect class="cls-9" height="2.67" width="24" x="189.33" y="127.11"/>
+        
+    <rect class="cls-9" height="2.67" width="16" x="189.33" y="133.33"/>
+      
+  </g>
+    
+  <g id="Mobile">
+        
+    <path class="cls-4" d="m343.38,140.92h-62.77v-15.69c0-2.89,2.34-5.23,5.23-5.23h52.31c2.89,0,5.23,2.34,5.23,5.23v15.69Z"/>
+        
+    <path class="cls-6" d="m280.62,140.92h62.77v109.85c0,2.89-2.34,5.23-5.23,5.23h-52.31c-2.89,0-5.23-2.34-5.23-5.23v-109.85h0Z"/>
+        
+    <rect class="cls-11" height="52.31" width="62.77" x="280.62" y="146.15"/>
+        
+    <path class="cls-6" d="m343.38,172.31c0,10.92-5.58,20.54-14.06,26.15h-34.65c-8.47-5.61-14.06-15.23-14.06-26.15s5.58-20.54,14.06-26.15h34.65c8.47,5.61,14.06,15.23,14.06,26.15Z"/>
+        
+    <circle class="cls-1" cx="312" cy="172.31" r="26.15"/>
+        
+    <circle class="cls-6" cx="312" cy="172.31" r="20.92"/>
+        
+    <circle class="cls-6" cx="312" cy="172.31" r="15.69"/>
+        
+    <circle class="cls-4" cx="312" cy="172.31" r="10.46"/>
+        
+    <g id="Outline">
+            
+      <path class="cls-7" d="m338.15,257h-52.31c-3.44,0-6.23-2.79-6.23-6.23v-125.54c0-3.44,2.79-6.23,6.23-6.23h52.31c3.44,0,6.23,2.8,6.23,6.23v125.54c0,3.44-2.79,6.23-6.23,6.23Zm-52.31-136c-2.33,0-4.23,1.9-4.23,4.23v125.54c0,2.33,1.9,4.23,4.23,4.23h52.31c2.33,0,4.23-1.9,4.23-4.23v-125.54c0-2.33-1.9-4.23-4.23-4.23h-52.31Z"/>
+          
+    </g>
+        
+    <rect class="cls-7" height="37.92" width="62.77" x="280.62" y="203.69"/>
+        
+    <rect class="cls-9" height="5.23" width="52.31" x="285.85" y="208.92"/>
+        
+    <rect class="cls-9" height="5.23" width="52.31" x="285.85" y="219.38"/>
+        
+    <rect class="cls-9" height="5.23" width="26.15" x="285.85" y="229.85"/>
+        
+    <rect class="cls-7" height="1.74" width="10.46" x="327.69" y="125.66"/>
+        
+    <rect class="cls-7" height="1.74" width="10.46" x="327.69" y="129.59"/>
+        
+    <rect class="cls-7" height="1.74" width="10.46" x="327.69" y="133.51"/>
+      
+  </g>
+    
+  <circle class="cls-7" cx="12" cy="188" r="4"/>
+    
+  <circle class="cls-8" cx="12" cy="204" r="4"/>
+    
+  <circle class="cls-11" cx="12" cy="220" r="4"/>
+    
+  <circle class="cls-10" cx="12" cy="236" r="4"/>
+    
+  <circle class="cls-1" cx="12" cy="252" r="4"/>
+    
+  <rect class="cls-7" height="4" width="50.69" x="21.31" y="186"/>
+    
+  <rect class="cls-8" height="4" width="50.69" x="21.31" y="202"/>
+    
+  <rect class="cls-11" height="4" width="50.69" x="21.31" y="218"/>
+    
+  <rect class="cls-10" height="4" width="50.69" x="21.31" y="234"/>
+    
+  <rect class="cls-1" height="4" width="50.69" x="21.31" y="250"/>
+    
+  <path class="cls-7" d="m342,10v92h-92V10h92m2-2h-96v96h96V8h0Z"/>
+  
+</svg>

package/tsconfig.json

@@ -12,9 +12,6 @@
     ],
     "module": "NodeNext",
     "moduleResolution": "nodenext",
-    "noFallthroughCasesInSwitch": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
     "outDir": "./dist",
     "paths": {
       "@/*": [

package/vite.config.ts

@@ -1,4 +1,5 @@
-/// <reference types="vitest/config" />
+import "vitest/config";
+
 import { defineConfig } from 'vitest/config';
 import react from "@vitejs/plugin-react-swc";
 import { playwright } from '@vitest/browser-playwright';
@@ -17,6 +18,10 @@ export default defineConfig({
       exclude: ["src/images", "**/*.stories.+(tsx|ts)"],
       include: ["src/**"],
       reporter: ["text", "lcov"],
+      thresholds: {
+        branches: 80,
+        lines: -10,
+      }
     },
     projects: [
       {

package/@types/common/AbstractNotificationBanner.d.ts

@@ -1,17 +0,0 @@
-declare namespace SGDS.Common {
-    namespace AbstractNotificationBanner {
-        interface Buttons extends React.AllHTMLAttributes<HTMLDivElement> {
-            children: React.ReactNode
-        }
-    }
-
-    interface AbstractNotificationBanner extends React.AllHTMLAttributes<HTMLDivElement> {
-        hasIcon?: boolean,
-        hasColourIcon?: boolean,
-        hasInverseIcon?: boolean,
-        icon?: IconName,
-        isDismissable?: boolean,
-        title: string,
-        ref?: any
-    }
-}

package/@types/common/ActionLink.d.ts

@@ -1,8 +0,0 @@
-declare namespace SGDS.Common {
-    interface ActionLink extends React.AllHTMLAttributes<HTMLElement> {
-        describedby?: string,
-        href?: string,
-        linkComponent?: SGDS.LinkComponent,
-        onclick?: React.EventHandler<any>
-    }
-}

package/@types/common/ConditionalWrapper.d.ts

@@ -1,6 +0,0 @@
-declare namespace SGDS.Common {
-    interface ConditionalWrapper extends React.AllHTMLAttributes<HTMLElement> {
-        condition: boolean,
-        wrapper: any
-    }
-}

package/@types/common/FileIcon.d.ts

@@ -1,7 +0,0 @@
-declare namespace SGDS.Common {
-    interface FileIcon extends React.AllHTMLAttributes<SVGSVGElement> {
-        ariaLabel?: React.AriaAttributes['aria-label'],
-        className?: string,
-        icon: DocumentIconName
-    }
-}

package/@types/common/HintText.d.ts

@@ -1,6 +0,0 @@
-declare namespace SGDS.Common {
-    interface HintText extends React.AllHTMLAttributes<HTMLElement> {
-        id?: string,
-        text?: string
-    }
-}

package/@types/common/Icon.d.ts

@@ -1,9 +0,0 @@
-declare namespace SGDS.Common {
-    interface Icon extends React.AllHTMLAttributes<SVGSVGElement> {
-        ariaLabel?: React.AriaAttributes['aria-label'],
-        className?: string,
-        isFilled?: boolean,
-        icon: IconName,
-        iconSize?: string
-    }
-}

package/@types/common/ScreenReaderText.d.ts

@@ -1,4 +0,0 @@
-declare namespace SGDS.Common {
-    interface ScreenReaderText extends React.AllHTMLAttributes<HTMLElement> {
-    }
-}

package/@types/common/WrapperTag.d.ts

@@ -1,5 +0,0 @@
-declare namespace SGDS.Common {
-    interface WrapperTag extends React.AllHTMLAttributes<HTMLElement> {
-        tagName?: string
-    }
-}