@npm_leadtech/legal-lib-components 7.106.36 → 7.107.0

package/dist/css/styles.css

@@ -1039,6 +1039,9 @@ html[data-theme=primarygreen] .e-button.--primary-3 {
   color: var(--neutral-neutral-1);
   pointer-events: none;
 }
+.e-button.--processing {
+  pointer-events: none;
+}
 .e-button.--error {
   border-color: var(--error-main);
   color: var(--error-main);

package/dist/src/components/atoms/Button/Button.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink = false, noLinkNoFunc = false, onClick = undefined, functionParameters, color = 'primary', error, disabled = false, fluid, givenClass, children, size = undefined, isExternal = false, centered = false, gtmTag = undefined, hasNoFollow = false, target = '_self' }) => {
+import { Spinner } from '../Spinner';
+const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink = false, noLinkNoFunc = false, onClick = undefined, functionParameters, color = 'primary', error, disabled = false, isProcessing = false, fluid, givenClass, children, size = undefined, isExternal = false, centered = false, gtmTag = undefined, hasNoFollow = false, target = '_self' }) => {
     const sizes = {
         S: 'button--small',
         M: 'button--medium'
@@ -24,11 +25,14 @@ const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink
         '--styleless': color === 'styleless',
         '--transparent': color === 'transparent',
         '--disabled': disabled,
+        '--processing': isProcessing,
         'button--center': centered,
         '--error': error,
         'e-button--fluid': fluid
     });
     const onButtonClick = () => {
+        if (isProcessing)
+            return;
         if (onClick !== undefined)
             onClick(functionParameters);
         if (gtmTag !== undefined) {
@@ -40,16 +44,25 @@ const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink
             });
         }
     };
-    const buttonContent = (_jsxs(_Fragment, { children: [children ?? null, labelMobile !== undefined ? (_jsxs(_Fragment, { children: [_jsx("label", { className: 'e-button-labelMobile', children: labelMobile }), _jsx("label", { className: 'e-button-labelDesktop', children: label })] })) : (_jsx("label", { children: label }))] }));
+    const onAnchorClick = (event) => {
+        if (isProcessing) {
+            event?.preventDefault();
+            return;
+        }
+        onButtonClick();
+    };
+    const ariaProcessing = isProcessing || undefined;
+    const labelContent = labelMobile !== undefined ? (_jsxs(_Fragment, { children: [_jsx("label", { className: 'e-button-labelMobile', children: labelMobile }), _jsx("label", { className: 'e-button-labelDesktop', children: label })] })) : (_jsx("label", { children: label }));
+    const buttonContent = (_jsxs(_Fragment, { children: [isProcessing ? _jsx(Spinner, {}) : null, children && label === '' ? (children) : (_jsxs(_Fragment, { children: [children ?? null, labelContent] }))] }));
     if (isExternal || (!LinkComponent && link)) {
-        return (_jsx("a", { className: `e-button ${classnames}`, href: link ?? '', onClick: onButtonClick, "data-qa": dataQa, rel: hasNoFollow ? 'nofollow' : '', target: target, children: children && label === '' ? children : buttonContent }));
+        return (_jsx("a", { className: `e-button ${classnames}`, href: link ?? '', onClick: onAnchorClick, "data-qa": dataQa, rel: hasNoFollow ? 'nofollow' : '', target: target, tabIndex: isProcessing ? -1 : undefined, "aria-busy": ariaProcessing, "aria-disabled": ariaProcessing, children: buttonContent }));
     }
     if (noLink) {
-        return (_jsx("button", { className: `e-button --noLink ${classnames}`, "data-qa": dataQa, onClick: onButtonClick, children: children && label === '' ? children : buttonContent }));
+        return (_jsx("button", { className: `e-button --noLink ${classnames}`, "data-qa": dataQa, onClick: onButtonClick, disabled: isProcessing, "aria-busy": ariaProcessing, children: buttonContent }));
     }
     if (noLinkNoFunc) {
-        return (_jsx("button", { className: `e-button --noLinkNoFunc ${classnames}`, "data-qa": dataQa, children: children && label === '' ? children : buttonContent }));
+        return (_jsx("button", { className: `e-button --noLinkNoFunc ${classnames}`, "data-qa": dataQa, disabled: isProcessing, "aria-busy": ariaProcessing, children: buttonContent }));
     }
-    return (_jsx(LinkComponent, { className: `e-button ${classnames}`, to: link ?? '', onClick: onButtonClick, "data-qa": dataQa, children: buttonContent }));
+    return (_jsx(LinkComponent, { className: `e-button ${classnames}`, to: link ?? '', onClick: onAnchorClick, "data-qa": dataQa, tabIndex: isProcessing ? -1 : undefined, "aria-busy": ariaProcessing, "aria-disabled": ariaProcessing, children: buttonContent }));
 };
 export default Button;

package/dist/src/components/atoms/Button/Button.scss

@@ -222,6 +222,10 @@ html[data-theme='primarygreen'] {
     pointer-events: none;
   }
 
+  &.--processing {
+    pointer-events: none;
+  }
+
   &.--error {
     border-color: var(--error-main);
     color: var(--error-main);

package/dist/src/components/atoms/Button/Button.tsx

@@ -2,6 +2,7 @@
 import React, { type FC } from 'react'
 import classNames from 'classnames'
 
+import { Spinner } from '../Spinner'
 import { type ButtonProps } from './ButtonProps.types'
 
 const Button: FC<ButtonProps> = ({
@@ -17,6 +18,7 @@ const Button: FC<ButtonProps> = ({
   color = 'primary',
   error,
   disabled = false,
+  isProcessing = false,
   fluid,
   givenClass,
   children,
@@ -52,12 +54,14 @@ const Button: FC<ButtonProps> = ({
     '--styleless': color === 'styleless',
     '--transparent': color === 'transparent',
     '--disabled': disabled,
+    '--processing': isProcessing,
     'button--center': centered,
     '--error': error,
     'e-button--fluid': fluid
   })
 
   const onButtonClick = (): void => {
+    if (isProcessing) return
     if (onClick !== undefined) onClick(functionParameters)
     if (gtmTag !== undefined) {
       if (typeof window !== 'undefined') {
@@ -69,16 +73,36 @@ const Button: FC<ButtonProps> = ({
     }
   }
 
+  const onAnchorClick = (event?: React.MouseEvent<HTMLAnchorElement>): void => {
+    if (isProcessing) {
+      event?.preventDefault()
+      return
+    }
+    onButtonClick()
+  }
+
+  const ariaProcessing = isProcessing || undefined
+
+  const labelContent =
+    labelMobile !== undefined ? (
+      <>
+        <label className='e-button-labelMobile'>{labelMobile}</label>
+        <label className='e-button-labelDesktop'>{label}</label>
+      </>
+    ) : (
+      <label>{label}</label>
+    )
+
   const buttonContent = (
     <>
-      {children ?? null}
-      {labelMobile !== undefined ? (
+      {isProcessing ? <Spinner /> : null}
+      {children && label === '' ? (
+        children
+      ) : (
         <>
-          <label className='e-button-labelMobile'>{labelMobile}</label>
-          <label className='e-button-labelDesktop'>{label}</label>
+          {children ?? null}
+          {labelContent}
         </>
-      ) : (
-        <label>{label}</label>
       )}
     </>
   )
@@ -88,34 +112,56 @@ const Button: FC<ButtonProps> = ({
       <a
         className={`e-button ${classnames}`}
         href={link ?? ''}
-        onClick={onButtonClick}
+        onClick={onAnchorClick}
         data-qa={dataQa}
         rel={hasNoFollow ? 'nofollow' : ''}
         target={target}
+        tabIndex={isProcessing ? -1 : undefined}
+        aria-busy={ariaProcessing}
+        aria-disabled={ariaProcessing}
       >
-        {children && label === '' ? children : buttonContent}
+        {buttonContent}
       </a>
     )
   }
 
   if (noLink) {
     return (
-      <button className={`e-button --noLink ${classnames}`} data-qa={dataQa} onClick={onButtonClick}>
-        {children && label === '' ? children : buttonContent}
+      <button
+        className={`e-button --noLink ${classnames}`}
+        data-qa={dataQa}
+        onClick={onButtonClick}
+        disabled={isProcessing}
+        aria-busy={ariaProcessing}
+      >
+        {buttonContent}
       </button>
     )
   }
 
   if (noLinkNoFunc) {
     return (
-      <button className={`e-button --noLinkNoFunc ${classnames}`} data-qa={dataQa}>
-        {children && label === '' ? children : buttonContent}
+      <button
+        className={`e-button --noLinkNoFunc ${classnames}`}
+        data-qa={dataQa}
+        disabled={isProcessing}
+        aria-busy={ariaProcessing}
+      >
+        {buttonContent}
       </button>
     )
   }
 
   return (
-    <LinkComponent className={`e-button ${classnames}`} to={link ?? ''} onClick={onButtonClick} data-qa={dataQa}>
+    <LinkComponent
+      className={`e-button ${classnames}`}
+      to={link ?? ''}
+      onClick={onAnchorClick}
+      data-qa={dataQa}
+      tabIndex={isProcessing ? -1 : undefined}
+      aria-busy={ariaProcessing}
+      aria-disabled={ariaProcessing}
+    >
       {buttonContent}
     </LinkComponent>
   )

package/dist/src/components/atoms/Button/ButtonProps.types.d.ts

@@ -12,6 +12,7 @@ export interface ButtonProps {
     color?: Colors;
     error?: boolean;
     disabled?: boolean;
+    isProcessing?: boolean;
     fluid?: boolean;
     givenClass?: string;
     children?: React.ReactNode;

package/dist/src/components/atoms/Button/ButtonProps.types.ts

@@ -30,6 +30,7 @@ export interface ButtonProps {
   color?: Colors
   error?: boolean
   disabled?: boolean
+  isProcessing?: boolean
   fluid?: boolean
   givenClass?: string
   children?: React.ReactNode

package/dist/src/components/atoms/Logo/Logo.js

@@ -2,7 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import districtlaws from './svg/districtlaws-logo.svg';
 import districtlawsWhite from './svg/districtlaws-white-logo.svg';
 import lawdistrict from './svg/lawdistrict-logo.svg';
-import lawdistrictIcon from './svg/lawdistrict-icon.svg';
 import lawdistrictWhite from './svg/lawdistrict-white-logo.svg';
 import lawdistrictinfo from './svg/lawdistrictinfo-logo.svg';
 import lawdistrictinfoWhite from './svg/lawdistrictinfo-white-logo.svg';
@@ -19,8 +18,7 @@ import uslawdistrictWhite from './svg/uslawdistrict-white-logo.svg';
 const LOGOS = {
     lawdistrict: {
         default: lawdistrict,
-        white: lawdistrictWhite,
-        icon: lawdistrictIcon
+        white: lawdistrictWhite
     },
     legalfinity: {
         default: legalfinity,
@@ -52,7 +50,5 @@ const LOGOS = {
     }
 };
 export const Logo = ({ className, siteName = 'lawdistrict', type = 'default', width, height, isLoadingLazy = false }) => {
-    const brandLogos = LOGOS[siteName.toLowerCase()] ?? LOGOS['lawdistrict'];
-    const logoSrc = brandLogos?.[type] ?? brandLogos?.default ?? LOGOS['lawdistrict']?.[type] ?? LOGOS['lawdistrict']?.default;
-    return (_jsx("img", { className: className, src: logoSrc, alt: `${siteName} logo`, width: width, height: height, loading: isLoadingLazy ? 'lazy' : 'eager' }));
+    return (_jsx("img", { className: className, src: LOGOS[siteName.toLowerCase()]?.[type] ?? LOGOS['lawdistrict']?.[type], alt: `${siteName} logo`, width: width, height: height, loading: isLoadingLazy ? 'lazy' : 'eager' }));
 };

package/dist/src/components/atoms/Logo/Logo.tsx

@@ -7,7 +7,6 @@ import { type LogoProps } from './LogoProps.types'
 import districtlaws from './svg/districtlaws-logo.svg'
 import districtlawsWhite from './svg/districtlaws-white-logo.svg'
 import lawdistrict from './svg/lawdistrict-logo.svg'
-import lawdistrictIcon from './svg/lawdistrict-icon.svg'
 import lawdistrictWhite from './svg/lawdistrict-white-logo.svg'
 import lawdistrictinfo from './svg/lawdistrictinfo-logo.svg'
 import lawdistrictinfoWhite from './svg/lawdistrictinfo-white-logo.svg'
@@ -25,8 +24,7 @@ import uslawdistrictWhite from './svg/uslawdistrict-white-logo.svg'
 const LOGOS: Record<string, any> = {
   lawdistrict: {
     default: lawdistrict,
-    white: lawdistrictWhite,
-    icon: lawdistrictIcon
+    white: lawdistrictWhite
   },
   legalfinity: {
     default: legalfinity,
@@ -66,14 +64,10 @@ export const Logo: FC<LogoProps> = ({
   height,
   isLoadingLazy = false
 }): React.ReactElement => {
-  const brandLogos = LOGOS[siteName.toLowerCase()] ?? LOGOS['lawdistrict']
-  const logoSrc =
-    brandLogos?.[type] ?? brandLogos?.default ?? LOGOS['lawdistrict']?.[type] ?? LOGOS['lawdistrict']?.default
-
   return (
     <img
       className={className}
-      src={logoSrc}
+      src={LOGOS[siteName.toLowerCase()]?.[type] ?? LOGOS['lawdistrict']?.[type]}
       alt={`${siteName} logo`}
       width={width}
       height={height}

package/dist/src/components/atoms/SearchSelect/SearchSelect.d.ts

@@ -1,6 +1,5 @@
 import { type FC } from 'react';
 import { type SearchSelectProps } from './SearchSelectProps.types';
-import './stateFlags/stateFlags.scss';
 export declare enum MenuPlacement {
     top = "top",
     bottom = "bottom",

package/dist/src/components/atoms/SearchSelect/SearchSelect.js

@@ -5,7 +5,6 @@ import Select from 'react-select';
 import { SearchSelectStyled } from './SearchSelect.styled';
 import classNames from 'classnames';
 import error from '../../../../images/svg/info-error_24px_outlined.svg';
-import './stateFlags/stateFlags.scss';
 export var MenuPlacement;
 (function (MenuPlacement) {
     MenuPlacement["top"] = "top";
@@ -48,13 +47,6 @@ const SearchSelect = (props) => {
         props.onChange(selectObject);
     };
     const TooltipObject = props.tooltip && typeof props.tooltip === 'string' ? (_jsx("p", { className: 'tooltip-form sans-serif --small', children: props.tooltip })) : ('');
-    const hasIcons = sortedItems.some((item) => Boolean(item?.iconClassName));
-    const formatOptionLabel = (option) => {
-        if (!hasIcons)
-            return option.label;
-        const icon = option.iconClassName ? (_jsx("span", { className: option.iconClassName, role: 'img', "aria-label": option.iconAlt ?? option.label })) : (_jsx("span", { className: 'legal-selector__icon-placeholder', "aria-hidden": 'true' }));
-        return (_jsxs("span", { className: 'legal-selector__option', children: [icon, _jsx("span", { className: 'legal-selector__option-label', children: option.label })] }));
-    };
     return (_jsxs(SearchSelectStyled, { children: [props.label && (_jsx("div", { className: 'e-searchselect__inner', children: _jsx("label", { className: 'searchselect__label', children: props.label }) })), _jsxs("div", { className: `${classnames} ${props.width ? 'width' : ''}`, "data-qa": props.dataQA ?? props.name, children: [TooltipObject, _jsxs("span", { className: 'e-searchselect--error sans-serif --small', children: [_jsx("img", { src: error, alt: props.errorMessage, width: '24', height: '24' }), props.errorMessage] }), _jsx(Select, { styles: {
                             control: (baseStyles, state) => {
                                 return {
@@ -65,6 +57,6 @@ const SearchSelect = (props) => {
                                 };
                             },
                             menuPortal: (base) => ({ ...base, zIndex: 9999 })
-                        }, id: props.name, name: props.name, className: 'legal-selector', defaultValue: defaultValue, onChange: handleChange, isDisabled: props.disabled, isSearchable: props.isSearchable !== false, options: sortedItems, escapeClearsValue: true, isClearable: true, menuPortalTarget: menuPortalTarget, placeholder: props.placeholder, defaultMenuIsOpen: props.defaultMenuIsOpen, menuPlacement: menuPlacement, formatOptionLabel: formatOptionLabel })] })] }));
+                        }, id: props.name, name: props.name, className: 'legal-selector', defaultValue: defaultValue, onChange: handleChange, isDisabled: props.disabled, isSearchable: props.isSearchable !== false, options: sortedItems, escapeClearsValue: true, isClearable: true, menuPortalTarget: menuPortalTarget, placeholder: props.placeholder, defaultMenuIsOpen: props.defaultMenuIsOpen, menuPlacement: menuPlacement })] })] }));
 };
 export default SearchSelect;

package/dist/src/components/atoms/SearchSelect/SearchSelect.styled.js

@@ -221,23 +221,4 @@ export const SearchSelectStyled = styled.div `
       width: 60%;
     }
   }
-
-  .legal-selector__option {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-  }
-
-  .legal-selector__option-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .legal-selector__icon-placeholder {
-    width: 21px;
-    height: 16px;
-    flex: 0 0 auto;
-  }
 `;

package/dist/src/components/atoms/SearchSelect/SearchSelect.styled.ts

@@ -222,23 +222,4 @@ export const SearchSelectStyled = styled.div`
       width: 60%;
     }
   }
-
-  .legal-selector__option {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-  }
-
-  .legal-selector__option-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .legal-selector__icon-placeholder {
-    width: 21px;
-    height: 16px;
-    flex: 0 0 auto;
-  }
 `

package/dist/src/components/atoms/SearchSelect/SearchSelect.tsx

@@ -8,8 +8,6 @@ import { SearchSelectStyled } from './SearchSelect.styled'
 import classNames from 'classnames'
 import error from '../../../../images/svg/info-error_24px_outlined.svg'
 
-import './stateFlags/stateFlags.scss'
-
 export enum MenuPlacement {
   top = 'top',
   bottom = 'bottom',
@@ -62,23 +60,6 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
       ''
     )
 
-  const hasIcons = sortedItems.some((item) => Boolean(item?.iconClassName))
-
-  const formatOptionLabel = (option: any): any => {
-    if (!hasIcons) return option.label
-    const icon = option.iconClassName ? (
-      <span className={option.iconClassName} role='img' aria-label={option.iconAlt ?? option.label} />
-    ) : (
-      <span className='legal-selector__icon-placeholder' aria-hidden='true' />
-    )
-    return (
-      <span className='legal-selector__option'>
-        {icon}
-        <span className='legal-selector__option-label'>{option.label}</span>
-      </span>
-    )
-  }
-
   return (
     <SearchSelectStyled>
       {props.label && (
@@ -118,7 +99,6 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
           placeholder={props.placeholder}
           defaultMenuIsOpen={props.defaultMenuIsOpen}
           menuPlacement={menuPlacement}
-          formatOptionLabel={formatOptionLabel}
         />
       </div>
     </SearchSelectStyled>

package/dist/src/components/atoms/Spinner/Spinner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SpinnerStyled } from './Spinner.styled';
 const Spinner = ({ className = '', big = false }) => {
-    return !big ? (_jsx(SpinnerStyled, { className: `e-spinner ${className}`, width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) })) : (_jsx(SpinnerStyled, { className: `e-spinner big ${className}`, viewBox: '0 0 24 24', fill: 'none', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) }));
+    return !big ? (_jsx(SpinnerStyled, { className: `e-spinner ${className}`, width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) })) : (_jsx(SpinnerStyled, { className: `e-spinner big ${className}`, viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) }));
 };
 export default Spinner;

package/dist/src/components/atoms/Spinner/Spinner.tsx

@@ -5,14 +5,21 @@ import { SpinnerStyled } from './Spinner.styled'
 
 const Spinner: FC<SpinnerProps> = ({ className = '', big = false }) => {
   return !big ? (
-    <SpinnerStyled className={`e-spinner ${className}`} width='24' height='24' viewBox='0 0 24 24' fill='none'>
+    <SpinnerStyled
+      className={`e-spinner ${className}`}
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+    >
       <path
         d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z'
         fill='#6D7275'
       />
     </SpinnerStyled>
   ) : (
-    <SpinnerStyled className={`e-spinner big ${className}`} viewBox='0 0 24 24' fill='none'>
+    <SpinnerStyled className={`e-spinner big ${className}`} viewBox='0 0 24 24' fill='none' aria-hidden='true'>
       <path
         d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z'
         fill='#6D7275'

package/dist/src/components/sections/index.d.ts

@@ -32,4 +32,3 @@ export * from './CardStorySection';
 export * from './Header';
 export * from './Footer';
 export * from './AppHeader';
-export * from './FormHeader';

package/dist/src/components/sections/index.js

@@ -32,4 +32,3 @@ export * from './CardStorySection';
 export * from './Header';
 export * from './Footer';
 export * from './AppHeader';
-export * from './FormHeader';

package/dist/src/components/sections/index.ts

@@ -32,4 +32,3 @@ export * from './CardStorySection'
 export * from './Header'
 export * from './Footer'
 export * from './AppHeader'
-export * from './FormHeader'