@npm_leadtech/legal-lib-components 7.107.0 → 7.107.2

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

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

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

@@ -7,6 +7,7 @@ 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'
@@ -24,7 +25,8 @@ import uslawdistrictWhite from './svg/uslawdistrict-white-logo.svg'
 const LOGOS: Record<string, any> = {
   lawdistrict: {
     default: lawdistrict,
-    white: lawdistrictWhite
+    white: lawdistrictWhite,
+    icon: lawdistrictIcon
   },
   legalfinity: {
     default: legalfinity,
@@ -64,10 +66,14 @@ 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={LOGOS[siteName.toLowerCase()]?.[type] ?? LOGOS['lawdistrict']?.[type]}
+      src={logoSrc}
       alt={`${siteName} logo`}
       width={width}
       height={height}

package/dist/src/components/atoms/Logo/svg/lawdistrict-icon.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>Favicon-LawDistrict</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="0.141306664 0.0946988736 48.5945545 0.0946988736 48.5945545 60.3311288 0.141306664 60.3311288"></polygon>
+    </defs>
+    <g id="Favicon-LawDistrict" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-Copy-39" fill="#078080" x="0" y="0" width="128" height="128"></rect>
+        <g id="Group-8-Copy-5" transform="translate(29.000000, 22.000000)">
+            <path d="M21.9284372,72.0982728 C21.9284372,72.5546845 21.4493349,72.8792568 20.9798087,72.7402365 L18.0303257,71.8667637 C17.7291093,71.7774345 17.5245259,71.5177767 17.5245259,71.2245128 L17.5245259,61.8561511 C17.5245259,61.3994521 18.0039185,61.0751671 18.4731544,61.2139002 L21.4229276,62.0876602 C21.724144,62.1769894 21.9284372,62.4366472 21.9284372,62.7299111 L21.9284372,72.0982728 Z M13.1777819,69.4229931 C13.1777819,69.878256 12.6980991,70.2019665 12.2288632,70.0635207 L9.27938011,69.1917713 C8.97816372,69.1027294 8.77387052,68.843646 8.77387052,68.5509565 L8.77387052,51.0427249 C8.77387052,50.5871748 9.25297289,50.2634643 9.72220883,50.4019101 L12.6719821,51.2739467 C12.9731985,51.3629887 13.1777819,51.6217848 13.1777819,51.9144743 L13.1777819,69.4229931 Z M42.6180568,55.1286013 L2.27334221,42.6831224 C1.15466283,42.3381566 0,43.1099492 0,44.2025801 L0,70.5521024 C0,71.2417467 0.475910291,71.8538382 1.18223081,72.0715602 L41.5266552,84.5167519 C42.6453346,84.8620048 43.7999974,84.0902122 43.7999974,82.9972941 L43.7999974,56.648059 C43.7999974,55.958702 43.3237969,55.3463232 42.6180568,55.1286013 L42.6180568,55.1286013 Z" id="Fill-1" fill="#FFFFFF"></path>
+            <path d="M55.9064286,73.1155775 L50.5668712,71.4575512 C49.8548522,71.2364421 49.374415,70.6154115 49.3741222,69.91533 L49.3627041,53.0454081 C49.3621186,52.3453266 48.8819742,51.724296 48.1699551,51.503187 L28.4778854,45.3885586 C27.7658663,45.1674495 27.2851364,44.5458355 27.2851364,43.8454623 L27.2851364,40.7023881 C27.2851364,40.0020149 26.8049919,39.3804009 26.0926801,39.1592919 L10.8220379,34.4174066 C10.1117755,34.1971726 9.63192382,33.5784756 9.62928888,32.8801443 L9.59999943,22.6335767 C9.59562022,21.5213222 10.7626054,20.7334388 11.8935797,21.0843547 L57.0072475,35.0929852 C57.7192666,35.3140943 58.1999965,35.9357083 58.1999965,36.6360815 L58.1999965,71.5724813 C58.1999965,72.6821104 57.034768,73.46591 55.9064286,73.1155775" id="Fill-3" fill="#FFFFFF"></path>
+            <g id="Group-7" transform="translate(21.599999, 0.600000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="Clip-6"></g>
+                <path d="M39.7802451,57.0626606 L39.7802451,32.1892362 C39.7802451,31.4933445 39.3008547,30.8759324 38.5911004,30.6567106 L18.9311377,24.5894496 C18.2208001,24.3705173 17.7417013,23.7528157 17.7417013,23.0572135 L17.7417013,19.9380083 C17.7417013,19.2426957 17.2631858,18.6252836 16.5540146,18.4060618 L1.3459089,13.6990187 C0.63819573,13.4797969 0.159680153,12.8644119 0.158222153,12.1702578 L0.141306664,1.71392666 C0.139268154,0.611156871 1.2995445,-0.169296013 2.42512045,0.178215475 L47.4055848,14.0743311 C48.1162139,14.2938425 48.5947296,14.9121234 48.5947296,15.6083047 L48.5533223,58.7168153 C48.5521559,59.8195851 47.3895468,60.5965628 46.2651372,60.2461554 L40.9647243,58.5934487 C40.2573027,58.3727789 39.7802451,57.7565252 39.7802451,57.0626606" id="Fill-5" fill="#FFFFFF" mask="url(#mask-2)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -1,5 +1,6 @@
 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,6 +5,7 @@ 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";
@@ -47,6 +48,13 @@ 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 {
@@ -57,6 +65,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 })] })] }));
+                        }, 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 })] })] }));
 };
 export default SearchSelect;

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

@@ -221,4 +221,23 @@ 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,4 +222,23 @@ 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,6 +8,8 @@ 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',
@@ -60,6 +62,23 @@ 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 && (
@@ -99,6 +118,7 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
           placeholder={props.placeholder}
           defaultMenuIsOpen={props.defaultMenuIsOpen}
           menuPlacement={menuPlacement}
+          formatOptionLabel={formatOptionLabel}
         />
       </div>
     </SearchSelectStyled>

package/dist/src/components/atoms/SearchSelect/stateFlags/stateFlags.scss

@@ -0,0 +1,177 @@
+// Generado desde flags-us-sprite-42x32.json (53 celdas 42x32, bandera 32x32 centrada). No editar a mano.
+$state-flag-width: 21px;
+$state-flag-height: 16px;
+$state-flag-step-x: 23px;
+$state-flag-step-y: 18px;
+$state-flag-sprite-width: 182px;
+$state-flag-sprite-height: 124px;
+
+.state-flag {
+  display: inline-block;
+  width: $state-flag-width;
+  height: $state-flag-height;
+  flex: 0 0 auto;
+  background-image: url('./us-states-sprite.png');
+  background-repeat: no-repeat;
+  background-size: $state-flag-sprite-width $state-flag-sprite-height;
+}
+
+.state-flag-alabama {
+  background-position: -0px -0px;
+}
+.state-flag-alaska {
+  background-position: -23px -0px;
+}
+.state-flag-arizona {
+  background-position: -46px -0px;
+}
+.state-flag-arkansas {
+  background-position: -69px -0px;
+}
+.state-flag-california {
+  background-position: -92px -0px;
+}
+.state-flag-colorado {
+  background-position: -115px -0px;
+}
+.state-flag-connecticut {
+  background-position: -138px -0px;
+}
+.state-flag-delaware {
+  background-position: -161px -0px;
+}
+.state-flag-district-of-columbia {
+  background-position: -0px -18px;
+}
+.state-flag-florida {
+  background-position: -23px -18px;
+}
+.state-flag-georgia {
+  background-position: -46px -18px;
+}
+.state-flag-guam {
+  background-position: -69px -18px;
+}
+.state-flag-hawaii {
+  background-position: -92px -18px;
+}
+.state-flag-idaho {
+  background-position: -115px -18px;
+}
+.state-flag-illinois {
+  background-position: -138px -18px;
+}
+.state-flag-indiana {
+  background-position: -161px -18px;
+}
+.state-flag-iowa {
+  background-position: -0px -36px;
+}
+.state-flag-kansas {
+  background-position: -23px -36px;
+}
+.state-flag-kentucky {
+  background-position: -46px -36px;
+}
+.state-flag-louisiana {
+  background-position: -69px -36px;
+}
+.state-flag-maine {
+  background-position: -92px -36px;
+}
+.state-flag-maryland {
+  background-position: -115px -36px;
+}
+.state-flag-massachusetts {
+  background-position: -138px -36px;
+}
+.state-flag-michigan {
+  background-position: -161px -36px;
+}
+.state-flag-minnesota {
+  background-position: -0px -54px;
+}
+.state-flag-mississippi {
+  background-position: -23px -54px;
+}
+.state-flag-missouri {
+  background-position: -46px -54px;
+}
+.state-flag-montana {
+  background-position: -69px -54px;
+}
+.state-flag-nebraska {
+  background-position: -92px -54px;
+}
+.state-flag-nevada {
+  background-position: -115px -54px;
+}
+.state-flag-new-hampshire {
+  background-position: -138px -54px;
+}
+.state-flag-new-jersey {
+  background-position: -161px -54px;
+}
+.state-flag-new-mexico {
+  background-position: -0px -72px;
+}
+.state-flag-new-york {
+  background-position: -23px -72px;
+}
+.state-flag-north-carolina {
+  background-position: -46px -72px;
+}
+.state-flag-north-dakota {
+  background-position: -69px -72px;
+}
+.state-flag-ohio {
+  background-position: -92px -72px;
+}
+.state-flag-oklahoma {
+  background-position: -115px -72px;
+}
+.state-flag-oregon {
+  background-position: -138px -72px;
+}
+.state-flag-pennsylvania {
+  background-position: -161px -72px;
+}
+.state-flag-puerto-rico {
+  background-position: -0px -90px;
+}
+.state-flag-rhode-island {
+  background-position: -23px -90px;
+}
+.state-flag-south-carolina {
+  background-position: -46px -90px;
+}
+.state-flag-south-dakota {
+  background-position: -69px -90px;
+}
+.state-flag-tennessee {
+  background-position: -92px -90px;
+}
+.state-flag-texas {
+  background-position: -115px -90px;
+}
+.state-flag-utah {
+  background-position: -138px -90px;
+}
+.state-flag-vermont {
+  background-position: -161px -90px;
+}
+.state-flag-virginia {
+  background-position: -0px -108px;
+}
+.state-flag-washington {
+  background-position: -23px -108px;
+}
+.state-flag-west-virginia {
+  background-position: -46px -108px;
+}
+.state-flag-wisconsin {
+  background-position: -69px -108px;
+}
+.state-flag-wyoming {
+  background-position: -92px -108px;
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type FormHeaderProps } from './FormHeaderProps';
+export declare const FormHeader: React.FC<FormHeaderProps>;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FormHeaderInner, FormHeaderStyled } from './FormHeader.styled';
+import { Logo } from '../../atoms';
+import phoneIcon from './svg/phone.svg';
+import trustpilotLogo from './svg/trustpilot-logo.svg';
+import trustpilotStars from './svg/trustpilot-stars.svg';
+const DEFAULT_TRUSTPILOT_TEMPLATE_ID = '5419b637fa0340045cd0c936';
+const getPhoneHref = (phoneNumber) => `tel:${phoneNumber.replace(/[^\d+]/g, '')}`;
+export const FormHeader = ({ siteName = 'LawDistrict', homeUrl = '/', documentName, phoneNumber, phoneHref, showPhone = true, showTrustpilot = true, trustpilot, handleClickLogo, className }) => {
+    const handleLogoClick = (event) => {
+        handleClickLogo?.(event, homeUrl);
+    };
+    const hasPhone = showPhone && Boolean(phoneNumber);
+    return (_jsx(FormHeaderStyled, { className: className, children: _jsxs(FormHeaderInner, { children: [_jsxs("a", { className: 'form-header__brand', href: homeUrl, onClick: handleLogoClick, "data-qa": 'form-header-logo', children: [_jsx(Logo, { siteName: siteName, type: 'icon', width: '40', height: '40' }), _jsx("p", { className: 'form-header__document-name', children: documentName })] }), _jsxs("div", { className: 'form-header__utilities', children: [hasPhone && (_jsxs("a", { className: 'form-header__phone', href: phoneHref ?? getPhoneHref(phoneNumber), "data-qa": 'form-header-phone', children: [_jsx("img", { src: phoneIcon, alt: '', width: '16', height: '16' }), _jsx("span", { children: phoneNumber })] })), hasPhone && _jsx("span", { className: 'form-header__divider', "aria-hidden": 'true' }), showTrustpilot && (_jsx("div", { className: 'form-header__trustpilot', "data-qa": 'form-header-trustpilot', children: trustpilot ? (_jsx("div", { className: 'trustpilot-widget', "data-locale": trustpilot.locale ?? 'en-US', "data-template-id": trustpilot.templateId ?? DEFAULT_TRUSTPILOT_TEMPLATE_ID, "data-businessunit-id": trustpilot.businessUnitId, "data-style-height": trustpilot.height ?? '20px', "data-style-width": '100%', "data-token": trustpilot.token, children: _jsx("a", { href: trustpilot.profileUrl, target: '_blank', rel: 'noopener noreferrer', children: "Trustpilot" }) })) : (_jsxs(_Fragment, { children: [_jsx("img", { className: 'form-header__trustpilot-logo', src: trustpilotLogo, alt: 'Trustpilot', width: '80', height: '20' }), _jsx("img", { src: trustpilotStars, alt: '', width: '106', height: '20' })] })) }))] })] }) }));
+};

package/dist/src/components/sections/FormHeader/FormHeader.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const FormHeaderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
+export declare const FormHeaderInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/dist/src/components/sections/FormHeader/FormHeader.styled.js

@@ -0,0 +1,98 @@
+import styled from 'styled-components';
+export const FormHeaderStyled = styled.header `
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  background-color: var(--others-white);
+`;
+export const FormHeaderInner = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  height: 72px;
+  padding: 16px 24px;
+
+  .form-header__brand {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 1 1 auto;
+    min-width: 0;
+    text-decoration: none;
+  }
+
+  .form-header__document-name {
+    margin: 0;
+    overflow: hidden;
+    font-family: var(--font-main);
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+    color: var(--neutral-neutral-2);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .form-header__utilities {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 0 0 auto;
+  }
+
+  .form-header__phone {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-family: var(--font-main);
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+    color: var(--neutral-neutral-2);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .form-header__divider {
+    width: 1px;
+    height: 34px;
+    flex: 0 0 auto;
+    border-radius: 2px;
+    background-color: var(--neutral-neutral-4);
+  }
+
+  .form-header__trustpilot {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 0 0 auto;
+    overflow: hidden;
+  }
+
+  .form-header__trustpilot img {
+    display: block;
+  }
+
+  .form-header__trustpilot .trustpilot-widget {
+    height: 20px;
+  }
+
+  .form-header__trustpilot-logo {
+    flex: 0 0 auto;
+  }
+
+  @media (max-width: 767px) {
+    height: 56px;
+    padding: 8px 16px;
+
+    .form-header__phone,
+    .form-header__divider,
+    .form-header__trustpilot {
+      display: none;
+    }
+  }
+`;

package/dist/src/components/sections/FormHeader/FormHeader.styled.ts

@@ -0,0 +1,100 @@
+import styled from 'styled-components'
+
+export const FormHeaderStyled = styled.header`
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  background-color: var(--others-white);
+`
+
+export const FormHeaderInner = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  height: 72px;
+  padding: 16px 24px;
+
+  .form-header__brand {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 1 1 auto;
+    min-width: 0;
+    text-decoration: none;
+  }
+
+  .form-header__document-name {
+    margin: 0;
+    overflow: hidden;
+    font-family: var(--font-main);
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+    color: var(--neutral-neutral-2);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .form-header__utilities {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 0 0 auto;
+  }
+
+  .form-header__phone {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-family: var(--font-main);
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+    color: var(--neutral-neutral-2);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .form-header__divider {
+    width: 1px;
+    height: 34px;
+    flex: 0 0 auto;
+    border-radius: 2px;
+    background-color: var(--neutral-neutral-4);
+  }
+
+  .form-header__trustpilot {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 0 0 auto;
+    overflow: hidden;
+  }
+
+  .form-header__trustpilot img {
+    display: block;
+  }
+
+  .form-header__trustpilot .trustpilot-widget {
+    height: 20px;
+  }
+
+  .form-header__trustpilot-logo {
+    flex: 0 0 auto;
+  }
+
+  @media (max-width: 767px) {
+    height: 56px;
+    padding: 8px 16px;
+
+    .form-header__phone,
+    .form-header__divider,
+    .form-header__trustpilot {
+      display: none;
+    }
+  }
+`