@scottish-government/designsystem-react 0.12.0 → 0.13.0

package/src/components/Tag/types.ts

@@ -0,0 +1,5 @@
+import { TagColour } from '../../shared-types';
+
+export interface TagProps extends React.AllHTMLAttributes<HTMLElement> {
+    colour?: TagColour;
+}

package/src/components/TaskList/TaskList.Group.stories.tsx

@@ -16,11 +16,6 @@ const meta = {
         )
     ],
     argTypes: {
-        headingId: {
-            description: 'ID of the task list\'s heading element',
-            type: 'string'
-        },
-        linkComponent: argTypes.linkComponent(),
         title: {
             description: 'The title of the task list',
             type: {

package/src/components/TaskList/TaskList.stories.tsx

@@ -11,7 +11,6 @@ const meta = {
             description: 'ID of the task list\'s heading element',
             type: 'string'
         },
-        linkComponent: argTypes.linkComponent(),
         title: {
             description: 'The title of the task list',
             type: {

package/src/components/TaskList/TaskList.tsx

@@ -2,7 +2,8 @@ import { Children } from 'react';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
 import HintText from '../../common/HintText';
 import ScreenReaderText from '../../common/ScreenReaderText';
-import Tag from '../Tag/Tag';
+import Tag from '../Tag';
+import { TaskListGroupProps, TaskListItemProps, TaskListProps } from './types';
 
 const TaskItem = ({
     children,
@@ -15,7 +16,7 @@ const TaskItem = ({
     tagColour = 'grey',
     title,
     ...props
-}: SGDS.Component.TaskList.Item) => {
+}: TaskListItemProps) => {
     if (isComplete) {
         tagColour = 'green';
         statusText = statusText || 'Completed'
@@ -24,11 +25,13 @@ const TaskItem = ({
     const LINK_CLASS = 'ds_task-list__task-link';
 
     function getLinkElement(children: React.ReactNode) {
+        let linkElement;
         if (linkComponent) {
-            return linkComponent({ className: LINK_CLASS, href, children });
-        } else if (href) {
-            return <a href={href} className={LINK_CLASS}>{children}</a>;
+            linkElement = linkComponent({ className: LINK_CLASS, href, children });
+        } else {
+            linkElement = <a href={href} className={LINK_CLASS}>{children}</a>;
         }
+        return linkElement as React.JSX.Element;
     }
 
     return (
@@ -77,7 +80,7 @@ const TaskGroup = ({
     intro,
     title,
     ...props
-}: SGDS.Component.TaskList.Group) => {
+}: TaskListGroupProps) => {
     return (
         <li
             className={[
@@ -101,12 +104,12 @@ const TaskList = ({
     headingId = 'task-list',
     title,
     ...props
-}: SGDS.Component.TaskList) => {
+}: TaskListProps) => {
     let taskCount = 0;
-    let incompleteTaskIds: string[] = [];
+    const incompleteTaskIds: string[] = [];
     let completedTasksCount = 0;
 
-    function processChild(item: any) {
+    function processChild(item: React.JSX.Element) {
         if (item.type.displayName === 'TaskList.Item') {
             taskCount = taskCount + 1;
 
@@ -131,7 +134,7 @@ const TaskList = ({
     }
 
     Children.forEach(children, child => {
-        processChild(child);
+        processChild(child as React.JSX.Element);
     });
 
     return (

package/src/components/TaskList/index.ts

@@ -0,0 +1 @@
+export { default } from './TaskList';

package/src/components/TaskList/types.ts

@@ -0,0 +1,20 @@
+import { LinkComponent, TagColour } from '../../shared-types';
+
+export interface TaskListGroupProps extends React.AllHTMLAttributes<HTMLElement> {
+    intro?: string;
+    title: string;
+}
+
+export interface TaskListItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    href?: string;
+    id?: string;
+    isComplete?: boolean;
+    linkComponent?: LinkComponent;
+    statusText?: string;
+    tagColour?: TagColour;
+    title: string;
+}
+
+export interface TaskListProps extends React.AllHTMLAttributes<HTMLElement> {
+    headingId?: string;
+}

package/src/components/TextInput/TextInput.tsx

@@ -1,15 +1,15 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSCharacterCount from '@scottish-government/design-system/src/forms/character-count/character-count';
-import Button from '../Button/Button';
+import Button from '../Button';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
+import { TextInputProps } from './types';
 
 const TextInput = ({
     buttonIcon,
     buttonText,
-    children,
     className,
     countThreshold,
     width,
@@ -29,7 +29,7 @@ const TextInput = ({
     type = 'text',
     value,
     ...props
-}: SGDS.Component.TextInput) => {
+}: TextInputProps) => {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = useRef(null);
@@ -45,13 +45,13 @@ const TextInput = ({
         }
     }, [ref]);
 
-    function handleBlur(event: React.FocusEvent) {
+    function handleBlur(event: React.FocusEvent<HTMLInputElement>) {
         if (typeof onBlur === 'function') {
             onBlur(event);
         }
     }
 
-    function handleChange(event: React.ChangeEvent) {
+    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
         if (typeof onChange === 'function') {
             onChange(event);
         }
@@ -63,7 +63,7 @@ const TextInput = ({
             wrapper={(children: React.JSX.Element) => <div ref={ref} data-threshold={countThreshold} data-module="ds-character-count">{children}</div>}
         >
             <label className="ds_label" htmlFor={id}>{label}</label>
-            {hintText && <HintText id={hintTextId} text={hintText} />}
+            {hintText && <HintText id={hintTextId}>{hintText}</HintText>}
             {errorMessage && <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>}
             <ConditionalWrapper
                 condition={hasButton || typeof isCurrency !== 'undefined' && isCurrency}

package/src/components/TextInput/index.ts

@@ -0,0 +1 @@
+export { default } from './TextInput';

package/src/components/TextInput/types.ts

@@ -0,0 +1,12 @@
+import { IconName, InputWidth, TextInputBase } from '../../shared-types';
+
+export interface TextInputProps extends TextInputBase<HTMLInputElement> {
+    buttonIcon?: IconName;
+    buttonText?: string;
+    className?: string;
+    currencySymbol?: string;
+    hasButton?: boolean;
+    isCurrency?: boolean;
+    type?: string;
+    width?: InputWidth;
+}

package/src/components/Textarea/Textarea.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSCharacterCount from '@scottish-government/design-system/src/forms/character-count/character-count';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
+import { TextInputBase } from '../../shared-types';
 
 const Textarea = ({
     className,
@@ -21,7 +22,7 @@ const Textarea = ({
     rows = 4,
     value,
     ...props
-}: SGDS.Component.Textarea) => {
+}: TextInputBase<HTMLTextAreaElement>) => {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = useRef(null);
@@ -36,13 +37,13 @@ const Textarea = ({
         }
     }, [ref]);
 
-    function handleBlur(event: React.FocusEvent) {
+    function handleBlur(event: React.FocusEvent<HTMLTextAreaElement>) {
         if (typeof onBlur === 'function') {
             onBlur(event);
         }
     }
 
-    function handleChange(event: React.ChangeEvent) {
+    function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
         if (typeof onChange === 'function') {
             onChange(event);
         }
@@ -54,7 +55,7 @@ const Textarea = ({
             wrapper={(children: React.JSX.Element) => <div ref={ref} data-threshold={countThreshold} data-module="ds-character-count">{children}</div>}
         >
             <label className="ds_label" htmlFor={id}>{label}</label>
-            {hintText && <HintText id={hintTextId} text={hintText} />}
+            {hintText && <HintText id={hintTextId}>{hintText}</HintText>}
             {errorMessage && <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>}
 
             <textarea

package/src/components/Textarea/index.ts

@@ -0,0 +1 @@
+export { default } from './Textarea';

package/src/components/WarningText/WarningText.tsx

@@ -2,7 +2,7 @@ const WarningText = ({
     children,
     className,
     ...props
-}: SGDS.Component.WarningText) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <div
             className={[

package/src/components/WarningText/index.ts

@@ -0,0 +1 @@
+export { default } from './WarningText';

package/src/components/index.ts

@@ -0,0 +1,46 @@
+export { default as Accordion } from "./Accordion";
+export { default as AspectBox } from "./AspectBox";
+export { default as BackToTop } from "./BackToTop";
+export { default as Breadcrumbs } from "./Breadcrumbs";
+export { default as Button, ButtonGroup } from "./Button";
+export { default as CategoryItem } from "./CategoryItem";
+export { default as CategoryList } from "./CategoryList";
+export { default as Checkbox, CheckboxGroup } from "./Checkbox";
+export { default as ConfirmationMessage } from "./ConfirmationMessage";
+export { default as ContentsNav } from "./ContentsNav";
+export { default as CookieBanner } from "./CookieBanner";
+export { default as DatePicker } from "./DatePicker";
+export { default as Details } from "./Details";
+export { default as ErrorMessage } from "./ErrorMessage";
+export { default as ErrorSummary } from "./ErrorSummary";
+export { default as FileDownload } from "./FileDownload";
+export { default as HideThisPage } from "./HideThisPage";
+export { default as InsetText } from "./InsetText";
+export { default as NotificationBanner } from "./NotificationBanner";
+export { default as NotificationPanel } from "./NotificationPanel";
+export { default as PageHeader } from "./PageHeader";
+export { default as PageMetadata } from "./PageMetadata/";
+export { default as Pagination } from "./Pagination";
+export { default as PhaseBanner } from "./PhaseBanner";
+export { default as Question } from "./Question";
+export { default as RadioButton, RadioGroup } from "./RadioButton";
+export { default as SearchFacets } from "./SearchFacets";
+export { default as SearchFilters } from "./SearchFilters";
+export { default as SearchResult } from "./SearchResult";
+export { default as SearchSort } from "./SearchSort";
+export { default as Select } from "./Select";
+export { default as SequentialNavigation } from "./SequentialNavigation";
+export { default as SideNavigation } from "./SideNavigation";
+export { default as SiteFooter } from "./SiteFooter";
+export { default as SiteHeader } from "./SiteHeader";
+export { default as SiteSearch } from "./SiteSearch";
+export { default as SkipLinks } from "./SkipLinks";
+export { default as SummaryCard } from "./SummaryCard";
+export { default as SummaryList } from "./SummaryList";
+export { default as Table } from "./Table";
+export { default as Tabs } from "./Tabs";
+export { default as Tag } from "./Tag";
+export { default as TaskList } from "./TaskList";
+export { default as Textarea } from "./Textarea";
+export { default as TextInput } from "./TextInput";
+export { default as WarningText } from "./WarningText";

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useTracking } from "./useTracking";

package/src/hooks/useTracking/index.ts

@@ -0,0 +1 @@
+export { default } from './useTracking';

package/src/hooks/{useTracking.test.tsx → useTracking/useTracking.test.tsx}

@@ -6,7 +6,9 @@ import { fireEvent, render, screen } from '@testing-library/react';
 
 import useTracking from './useTracking';
 
-const Link = ({ children }) => <a href="#">{children}</a>;
+const Link = ({ children }: {
+    children: React.ReactNode;
+}) => <a href="#">{children}</a>;
 
 const Links = () => {
     useTracking();
@@ -45,9 +47,7 @@ test('text tracking on component render', async () => {
 
     const button = screen.getByRole('button');
     const firstLink = screen.getByText('First link');
-
-    // todo: this will fail until the tracking script in DS core is updated to use textContent instead of innerText
-    // expect(firstLink).toHaveAttribute('data-section', SECTION_ONE_TEXT);
+    expect(firstLink).toHaveAttribute('data-section', SECTION_ONE_TEXT);
 
     fireEvent(
         button,
@@ -58,7 +58,5 @@ test('text tracking on component render', async () => {
     ));
 
     const secondLink = await screen.findByText('Second link')
-
-    // todo: this will fail until the tracking script in DS core is updated to use textContent instead of innerText
-    // expect(secondLink).toHaveAttribute('data-section', SECTION_TWO_TEXT);
+    expect(secondLink).toHaveAttribute('data-section', SECTION_TWO_TEXT);
 });

package/src/hooks/{useTracking.ts → useTracking/useTracking.ts}

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-//@ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSTracking from '@scottish-government/design-system/src/base/tools/tracking/tracking';
 
 export default function () {

package/src/images/icons/arrow_upward.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgArrowUpward = (props: SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="#000000"
-        role="img"
-        {...props}
-    >
-        <path d="M0 0h24v24H0V0z" fill="none" />
-        <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
-    </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#000000"
+    role="img"
+    {...props}
+  >
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+  </svg>
 );
 export default SvgArrowUpward;

package/src/images/icons/calendar_today.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgCalendarToday = (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="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z" />
-    </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="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z" />
+  </svg>
 );
 export default SvgCalendarToday;

package/src/images/icons/cancel.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgCancel = (props: SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        role="img"
-        {...props}
-    >
-        <path d="m8.4 17 3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6L17 8.4 15.6 7 12 10.6 8.4 7 7 8.4l3.6 3.6L7 15.6 8.4 17Zm3.6 5c-1.4 0-2.7-.3-3.9-.8S5.8 20 4.9 19.1s-1.6-2-2.1-3.2S2 13.4 2 12s.3-2.7.8-3.9S4 5.8 4.9 4.9s2-1.6 3.2-2.1S10.6 2 12 2s2.7.3 3.9.8 2.3 1.2 3.2 2.1 1.6 2 2.1 3.2.8 2.5.8 3.9-.3 2.7-.8 3.9-1.2 2.3-2.1 3.2-2 1.6-3.2 2.1-2.5.8-3.9.8Z" />
-    </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    role="img"
+    {...props}
+  >
+    <path d="m8.4 17 3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6L17 8.4 15.6 7 12 10.6 8.4 7 7 8.4l3.6 3.6L7 15.6 8.4 17Zm3.6 5c-1.4 0-2.7-.3-3.9-.8S5.8 20 4.9 19.1s-1.6-2-2.1-3.2S2 13.4 2 12s.3-2.7.8-3.9S4 5.8 4.9 4.9s2-1.6 3.2-2.1S10.6 2 12 2s2.7.3 3.9.8 2.3 1.2 3.2 2.1 1.6 2 2.1 3.2.8 2.5.8 3.9-.3 2.7-.8 3.9-1.2 2.3-2.1 3.2-2 1.6-3.2 2.1-2.5.8-3.9.8Z" />
+  </svg>
 );
 export default SvgCancel;

package/src/images/icons/check_circle.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgCheckCircle = (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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-    </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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+  </svg>
 );
 export default SvgCheckCircle;

package/src/images/icons/chevron_left.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgChevronLeft = (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.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
-    </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.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+  </svg>
 );
 export default SvgChevronLeft;

package/src/images/icons/chevron_right.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgChevronRight = (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="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
-    </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="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+  </svg>
 );
 export default SvgChevronRight;

package/src/images/icons/close.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgClose = (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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-    </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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+  </svg>
 );
 export default SvgClose;

package/src/images/icons/description.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgDescription = (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="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
-    </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="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
+  </svg>
 );
 export default SvgDescription;

package/src/images/icons/double_chevron_left.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgDoubleChevronLeft = (props: SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        role="img"
-        {...props}
-    >
-        <path d="M19 16.6 17.6 18l-6-6 6-6L19 7.4 14.4 12l4.6 4.6Zm-6.6 0L11 18l-6-6 6-6 1.4 1.4L7.8 12l4.6 4.6Z" />
-    </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    role="img"
+    {...props}
+  >
+    <path d="M19 16.6 17.6 18l-6-6 6-6L19 7.4 14.4 12l4.6 4.6Zm-6.6 0L11 18l-6-6 6-6 1.4 1.4L7.8 12l4.6 4.6Z" />
+  </svg>
 );
 export default SvgDoubleChevronLeft;

package/src/images/icons/double_chevron_right.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgDoubleChevronRight = (props: SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        role="img"
-        {...props}
-    >
-        <path d="M9.6 12 5 7.4 6.4 6l6 6-6 6L5 16.6 9.6 12Zm6.6 0-4.6-4.6L13 6l6 6-6 6-1.4-1.4 4.6-4.6Z" />
-    </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    role="img"
+    {...props}
+  >
+    <path d="M9.6 12 5 7.4 6.4 6l6 6-6 6L5 16.6 9.6 12Zm6.6 0-4.6-4.6L13 6l6 6-6 6-1.4-1.4 4.6-4.6Z" />
+  </svg>
 );
 export default SvgDoubleChevronRight;

package/src/images/icons/error.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgError = (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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
-    </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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
+  </svg>
 );
 export default SvgError;