@mychoice/mychoice-sdk-components 1.0.0

package/dist/esm/index.js

@@ -0,0 +1,1456 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useState, useRef, useEffect, useReducer, useCallback, memo } from 'react';
+import { isEqual, range, cloneDeep } from 'lodash';
+import { format, parse, isValid, getDaysInMonth, addYears, subYears, addMonths, subMonths, addDays, subDays, compareAsc, startOfMonth, endOfMonth, startOfYear, endOfYear, isWithinInterval, isBefore, isAfter, eachDayOfInterval, eachMonthOfInterval, eachYearOfInterval, compareDesc, differenceInYears, differenceInMonths, differenceInHours } from 'date-fns';
+import ReactPhoneInput from 'react-phone-input-2';
+import { NavLink } from 'react-router-dom';
+export { NavLink as HeaderNavLink } from 'react-router-dom';
+import ReactTooltip from 'rc-tooltip';
+
+const IconLoaderPrimary = (props) => {
+    const { width, height, className } = props;
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: { width, height }, viewBox: "0 0 44 44", className: `icon-svg ${className}`, children: jsxs("g", { fill: "none", fillRule: "evenodd", strokeWidth: "2", children: [jsxs("circle", { cx: "22", cy: "22", r: "1", children: [jsx("animate", { attributeName: "r", begin: "0s", dur: "1.8s", values: "1; 20", calcMode: "spline", keyTimes: "0; 1", keySplines: "0.165, 0.84, 0.44, 1", repeatCount: "indefinite" }), jsx("animate", { attributeName: "stroke-opacity", begin: "0s", dur: "1.8s", values: "1; 0", calcMode: "spline", keyTimes: "0; 1", keySplines: "0.3, 0.61, 0.355, 1", repeatCount: "indefinite" })] }), jsxs("circle", { cx: "22", cy: "22", r: "1", children: [jsx("animate", { attributeName: "r", begin: "-0.9s", dur: "1.8s", values: "1; 20", calcMode: "spline", keyTimes: "0; 1", keySplines: "0.165, 0.84, 0.44, 1", repeatCount: "indefinite" }), jsx("animate", { attributeName: "stroke-opacity", begin: "-0.9s", dur: "1.8s", values: "1; 0", calcMode: "spline", keyTimes: "0; 1", keySplines: "0.3, 0.61, 0.355, 1", repeatCount: "indefinite" })] })] }) }));
+};
+IconLoaderPrimary.defaultProps = {
+    width: '2.75rem',
+    height: '2.75rem',
+    className: 'icon-loader-primary',
+};
+
+const IconLoaderSecondary = () => (jsxs("div", { className: "loading-secondary", children: [jsx("span", {}), jsx("span", {}), jsx("span", {})] }));
+
+const IconDropdownArrow = (props) => {
+    const { className, color, colorType } = props;
+    return (jsx("svg", { className: className, version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 20.8 11.8", children: jsx("polygon", { fill: colorType || color || '#FFFFFF', points: "19.4,0 10.4,9 1.4,0 0,1.4 9,10.4 10.4,11.8 11.8,10.4 20.8,1.4 " }) }));
+};
+IconDropdownArrow.defaultProps = {
+    className: '',
+};
+
+const numberWithCommas$1 = (value) => value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+const yearMessage = 'We’re sorry. We cannot currently provide Quotes online '
+    + 'for vehicles that are 20 years or older. Please call our broker partner at '
+    + '1-0000000000 to get a quote over the phone.';
+const dailyKilometresRange = [
+    1, 2, 5, 7, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 150, 200,
+];
+const dailyKilometresRangeForBusiness = [
+    1, 2, 5, 7, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 150, 200, 250, 300, 350, 400,
+];
+const yearlyKilometresRange = [
+    500, 1000, 2000, 3000, 5000, 8000, 10000, 15000, 20000, 30000, 50000, 60000, 80000, 100000,
+];
+const carCondition = [{ value: 'N', name: 'New' }, { value: 'U', name: 'Used' }];
+const carStatus = [{ value: true, name: 'Leased' }, { value: false, name: 'Owned' }];
+const carWinterTiresCheck = [{ value: true, name: 'Yes' }, { value: false, name: 'No' }];
+const carKeepPlace = [
+    { name: 'Private Garage', value: 'garage' },
+    { name: 'Private Driveway', value: 'driveway' },
+    { name: 'Underground Parking', value: 'underground' },
+    { name: 'Parking Lot', value: 'lot' },
+    { name: 'Carport', value: 'carport' },
+    { name: 'Indoor Storage', value: 'storage' },
+    { name: 'Street', value: 'street' },
+    { name: 'Other', value: 'other' },
+];
+const comprehensiveCoverage = [
+    { value: true, name: 'Yes' },
+    { value: false, name: 'No' },
+];
+const collisionCoverage = [
+    { value: true, name: 'Yes' },
+    { value: false, name: 'No' },
+];
+const carUsagePurpose = [{ value: 'personal', name: 'Personal' }, { value: 'business', name: 'Business' }];
+const firstDriveDistanceList = dailyKilometresRange.map((item) => {
+    if (item === 1) {
+        return { value: `${item}`, name: `${item}KM or Less` };
+    }
+    return { value: `${item}`, name: `${numberWithCommas$1(item)}KM` };
+});
+const dailyDriveBusinessDistanceList = dailyKilometresRangeForBusiness.map((item) => {
+    if (item === 1) {
+        return { value: `${item}`, name: `${item}KM or Less` };
+    }
+    return { value: `${item}`, name: `${item}KM` };
+});
+const yearlyDriveDistanceList = yearlyKilometresRange.map((item) => ({ value: `${item}`, name: `${numberWithCommas$1(item)}KM` }));
+var VehicleConditionTypes;
+(function (VehicleConditionTypes) {
+    VehicleConditionTypes["New"] = "N";
+    VehicleConditionTypes["Used"] = "U";
+})(VehicleConditionTypes || (VehicleConditionTypes = {}));
+var VehiclePrimaryUseTypes;
+(function (VehiclePrimaryUseTypes) {
+    VehiclePrimaryUseTypes["Personal"] = "personal";
+    VehiclePrimaryUseTypes["Business"] = "business";
+})(VehiclePrimaryUseTypes || (VehiclePrimaryUseTypes = {}));
+var CoverageTypes;
+(function (CoverageTypes) {
+    CoverageTypes["Comprehensive"] = "comprehensive";
+    CoverageTypes["Collision"] = "collision";
+    CoverageTypes["Liability"] = "liability";
+})(CoverageTypes || (CoverageTypes = {}));
+
+var DriverLicenceTypes;
+(function (DriverLicenceTypes) {
+    DriverLicenceTypes["G1"] = "g1";
+    DriverLicenceTypes["G2"] = "g2";
+    DriverLicenceTypes["G"] = "g";
+})(DriverLicenceTypes || (DriverLicenceTypes = {}));
+
+var GenderTypes;
+(function (GenderTypes) {
+    GenderTypes["Male"] = "M";
+    GenderTypes["Female"] = "F";
+    GenderTypes["Other"] = "Other";
+})(GenderTypes || (GenderTypes = {}));
+var OccupationTypes;
+(function (OccupationTypes) {
+    OccupationTypes[OccupationTypes["Employed"] = 800] = "Employed";
+    OccupationTypes[OccupationTypes["Unemployed"] = 998] = "Unemployed";
+})(OccupationTypes || (OccupationTypes = {}));
+var DriverPriorityTypes;
+(function (DriverPriorityTypes) {
+    DriverPriorityTypes["Prn"] = "Prn";
+    DriverPriorityTypes["Occ"] = "Occ";
+})(DriverPriorityTypes || (DriverPriorityTypes = {}));
+
+const maritalStatusOptions = [{ name: 'Single', value: 'S' }, { name: 'Married/Common Law', value: 'M' }];
+const occupationOptions = [{ name: 'Employed', value: 998 }, { name: 'Unemployed', value: 800 }];
+const genderOptions = [
+    { value: GenderTypes.Male, name: 'Male' },
+    { value: GenderTypes.Female, name: 'Female' },
+    { value: GenderTypes.Other, name: 'Other' },
+];
+const applicantRelationshipOptions = [
+    { name: 'Spouse', value: 'Spouse' },
+    { name: 'Co-habitant', value: 'Co-habitant' },
+    { name: 'Child', value: 'Child' },
+    { name: 'Parent', value: 'Parent' },
+    { name: 'Sibling', value: 'Sibling' },
+    { name: 'Relative', value: 'Relative' },
+    { name: 'Employee', value: 'Employee' },
+    { name: 'Insured', value: 'Insured' },
+    { name: 'Lessee', value: 'Lessee' },
+    { name: 'Third Party', value: 'Third Party' },
+    { name: 'Other', value: 'Other' },
+];
+const insuranceCancellationReasonOptions = [
+    { name: 'Cancelled for non-payment', value: 'NonPay' },
+    { name: 'Cancelled for other reason', value: 'OtherLapse' },
+    { name: 'Driving without insurance', value: 'DWOI' },
+    { name: 'No car/no insurance needed', value: 'NotReqrd' },
+    { name: 'Cancelled for material misrepresentation', value: 'MatMisrep' },
+];
+const licenceSuspensionsReasonOptions = [
+    { name: 'Alcohol related licence suspension', value: 'Alcohol' },
+    { name: 'Criminal related (Non-Alcohol) Licence Suspension', value: 'Crim' },
+    { name: 'Too many convictions', value: 'Points' },
+    { name: 'Suspension due to non payment of fines', value: 'Fine' },
+    { name: 'Other - Administrative', value: 'OtherSusp' },
+    { name: 'Other - Non-administrative', value: 'OtherNonAdmin' },
+];
+const coverageOptions = [
+    { name: 'No Coverage', value: 0 },
+    { name: '$500 Deductible', value: 500 },
+    { name: '$1,000 Deductible', value: 1000 },
+    { name: '$1,500 Deductible', value: 1500 },
+];
+const liabilityOptions = [
+    { name: '$1,000,000', value: 1000000 },
+    { name: '$2,000,000', value: 2000000 },
+];
+const trafficTicketsGroupOptions = [
+    {
+        label: 'Common',
+        options: [
+            { value: 'SP', name: 'Speeding' },
+            { value: 'SS', name: 'Stop sign' },
+            { value: 'TSL', name: 'Traffic light' },
+            { value: 'CPV', name: 'Prohibited use of hand-held device' },
+            { value: 'IT', name: 'Improper turn' },
+        ],
+    },
+    {
+        label: 'Minor',
+        options: [
+            { value: 'DB', name: 'Defective brakes' },
+            { value: 'LIC', name: 'Drivers licence violations' },
+            { value: 'FCIC', name: 'Failure to carry or have insurance card' },
+            { value: 'FPEI', name: 'Failure to produce evidence of insurance' },
+            { value: 'FTS', name: 'Failing to signal' },
+            { value: 'SB', name: 'Failure to use seatbelts' },
+            { value: 'FTY', name: 'Failing to yield' },
+            { value: 'PX', name: 'Failing to yield to pedestrian' },
+            { value: 'FTC', name: 'Following too closely' },
+            { value: 'HL', name: 'Headlight offenses' },
+            { value: 'ILC', name: 'Improper lane change' },
+            { value: 'IP', name: 'Improper passing' },
+            { value: 'IT', name: 'Improper turn' },
+            { value: 'DH', name: 'Improper use of divided highway' },
+            { value: 'MINOR', name: 'Other minor conviction (not specified)' },
+            { value: 'OT', name: 'Obstructing traffic' },
+            { value: 'CPV', name: 'Prohibited use of hand-held device' },
+            { value: 'SP', name: 'Speeding' },
+            { value: 'SS', name: 'Stop sign' },
+            { value: 'TSL', name: 'Traffic light' },
+            { value: 'UM', name: 'Unsafe move' },
+            { value: 'UV', name: 'Unsafe vehicle' },
+            { value: 'OW', name: 'Wrong way on one way' },
+            { value: 'DRD', name: 'Distracted driving' },
+        ],
+    },
+    {
+        label: 'Major',
+        options: [
+            { value: 'FDH', name: 'Failure to report damage to highway property' },
+            { value: 'FRA', name: 'Failure to report accident' },
+            { value: 'PSB', name: 'Improper passing of a school bus' },
+            { value: 'PSG', name: 'Improper passing/speeding in a school or playground zone' },
+            { value: 'OMVNI', name: 'Operator motor vehicle - no insurance' },
+            { value: 'MAJOR', name: 'Other major conviction (not specified)' },
+            { value: 'STN', name: 'Stunting' },
+        ],
+    },
+    {
+        label: 'Serious',
+        options: [
+            { value: 'ALC', name: 'Class G1/G2 driver with alcohol in blood' },
+            { value: 'RB', name: 'Class G1/G2 refuse breath sample' },
+            { value: 'CN', name: 'Criminal negligence' },
+            { value: 'DD', name: 'Dangerous driving' },
+            { value: 'DUS', name: 'Driving while licence under suspension' },
+            { value: 'FTR', name: 'Failure to stop/remain at the scene of an accident' },
+            { value: 'IMP', name: 'Impaired driving' },
+            { value: 'MM', name: 'Manslaughter committed in the operation or use of a motor vehicle' },
+            { value: 'SECTD', name: 'Other serious conviction (not specified)' },
+            { value: 'CD', name: 'Careless driving, undue care or attention' },
+            { value: 'RAC', name: 'Racing' },
+        ],
+    },
+];
+var DriverListTypes;
+(function (DriverListTypes) {
+    DriverListTypes["InsuranceCancellation"] = "insuranceCancellationList";
+    DriverListTypes["LicenceSuspension"] = "licenceSuspensionList";
+    DriverListTypes["Accident"] = "accidentList";
+    DriverListTypes["Ticket"] = "ticketList";
+})(DriverListTypes || (DriverListTypes = {}));
+
+const defaultBrokerPhone = '1-855-843-1570';
+
+var HomeOwnerTypes;
+(function (HomeOwnerTypes) {
+    HomeOwnerTypes["Home"] = "home";
+    HomeOwnerTypes["Condo"] = "condo";
+    HomeOwnerTypes["Tenant"] = "tenant";
+})(HomeOwnerTypes || (HomeOwnerTypes = {}));
+const homeOwnerTypeOptions = [
+    { value: '', name: '-' },
+    { value: HomeOwnerTypes.Home, name: 'Homeowner' },
+    { value: HomeOwnerTypes.Condo, name: 'Condo Owner' },
+    { value: HomeOwnerTypes.Tenant, name: 'Tenant' },
+];
+//
+const comprehensiveCoverages = [
+    { value: true, name: 'Yes' },
+    { value: false, name: 'No' },
+];
+// export const collisionCoverage = [
+//   { value: true, name: 'Yes' },
+//   { value: false, name: 'No' },
+// ];
+//
+// export enum CoverageTypes {
+//   Comprehensive = 'comprehensive',
+//   Collision = 'collision',
+//   Liability = 'liability',
+// }
+
+const residentsOptions = [
+    { value: '', name: '-' },
+    { value: '1', name: 'You and your family' },
+    { value: '2', name: 'Your family and another family' },
+    { value: '3', name: 'Your family and two other families' },
+    { value: '0', name: 'It is rented out/Used for commercial purposes' },
+];
+const insuredYearsOptions = [
+    { value: '', name: '-' },
+    { value: '0', name: 'Less than 1 year' },
+    { value: '1', name: '1 year' },
+    { value: '2', name: '2 years' },
+    { value: '3', name: '3 years' },
+    { value: '4', name: '4 years' },
+    { value: '5', name: '5 years' },
+    { value: '6', name: '6 years' },
+    { value: '7', name: '7 years' },
+    { value: '8', name: '8 years' },
+    { value: '9', name: '9 years' },
+    { value: '10', name: '10 years' },
+    { value: '11', name: 'More than 10 years' },
+];
+const claimTypeOptions = [
+    { value: '', name: '-' },
+    { value: 'personal', name: 'Personal Property Claim' },
+    { value: 'sewer', name: 'Sewer Backup Claim' },
+    { value: 'liability', name: 'Liability Claim' },
+    { value: 'fire', name: 'Fire Claim' },
+    { value: 'windhail', name: 'Wind/Hail Claim' },
+    { value: 'waterdamage', name: 'Water Damage Claim' },
+    { value: 'other', name: 'Other Type of Claim' },
+];
+var ApplicantListTypes;
+(function (ApplicantListTypes) {
+    ApplicantListTypes["InsuranceCancellation"] = "insuranceCancellationList";
+    ApplicantListTypes["InsuranceClaim"] = "InsuranceClaimList";
+})(ApplicantListTypes || (ApplicantListTypes = {}));
+
+var DwellingInfoTypes;
+(function (DwellingInfoTypes) {
+    DwellingInfoTypes["BurglarAlarm"] = "burglarAlarm";
+    DwellingInfoTypes["FireAlarm"] = "fireAlarm";
+    DwellingInfoTypes["Sprinkler"] = "sprinkler";
+    DwellingInfoTypes["Deadbolt"] = "deadbolt";
+})(DwellingInfoTypes || (DwellingInfoTypes = {}));
+const constructionTypeOptions = [
+    { value: '', name: '-' },
+    { value: 'wood', name: 'Wood' },
+    { value: 'mansory', name: 'Mansory' },
+    { value: 'brick', name: 'Brick' },
+    { value: 'fireresist', name: 'Fire Resist' },
+    { value: 'other', name: 'Other' },
+];
+const exteriorFinishOptions = [
+    { value: '', name: '-' },
+    { value: 'brick', name: 'Brick' },
+    { value: 'brickveneer', name: 'Brick Veneer' },
+    { value: 'masonryveneer', name: 'Masonry Veneer' },
+    { value: 'concrete', name: 'Concrete' },
+    { value: 'logs', name: 'Logs' },
+    { value: 'stone', name: 'Stone' },
+    { value: 'stoneveneer', name: 'Stone Veneer' },
+    { value: 'vinyl', name: 'Vinyl' },
+    { value: 'wood', name: 'Wood' },
+];
+const garageTypeOptions = [
+    { value: '', name: '-' },
+    { value: 'attached', name: 'Attached' },
+    { value: 'builtin', name: 'Builtin' },
+    { value: 'basement', name: 'Basement' },
+    { value: 'carport', name: 'Carport' },
+    { value: 'none', name: 'None' },
+];
+const buildingStructureOptions = [
+    { value: '', name: '-' },
+    { value: 'detached', name: 'Detached' },
+    { value: 'semidetached', name: 'Semidetached' },
+    { value: 'highrise', name: 'High Rise' },
+    { value: 'lowrise', name: 'Low Rise' },
+    { value: 'basement', name: 'Basement' },
+    { value: 'endrow', name: 'End Row' },
+    { value: 'inrow', name: 'In Row' },
+    { value: 'duplex', name: 'Duplex' },
+    { value: 'triplex', name: 'Triplex' },
+];
+const fireHallDistanceOptions = [
+    { value: '', name: '-' },
+    { value: '5', name: 'Within 5km' },
+    { value: '8', name: 'Within 8km' },
+    { value: '13', name: 'Within 13km' },
+    { value: '16', name: 'Over 13km' },
+];
+const fireHydrantDistanceOptions = [
+    { value: '', name: '-' },
+    { value: '150', name: 'Within 150m' },
+    { value: '300', name: 'Within 300m' },
+    { value: '301', name: 'Over 300m' },
+];
+const heatingTypeOptions = [
+    { value: '', name: '-' },
+    { value: 'naturalgas', name: 'Natural Gas' },
+    { value: 'electric', name: 'Electric' },
+    { value: 'wood', name: 'Wood' },
+    { value: 'water', name: 'Water' },
+    { value: 'geothermal', name: 'Geothermal' },
+    { value: 'radiant', name: 'Radiant' },
+    { value: 'oil', name: 'Oil' },
+    { value: 'fireplace', name: 'Fireplace' },
+    { value: 'woodstove', name: 'Wood Stove' },
+    { value: 'woodfurnace', name: 'Wood Furnace' },
+    { value: 'pelletstove', name: 'Pallet Stove' },
+    { value: 'none', name: 'None' },
+    { value: 'unknown', name: 'Unknown' },
+];
+
+const yesNoOptions = [{ name: 'Yes', value: true }, { name: 'No', value: false }];
+const yesNoOptionsTemporary = [{ name: 'Yes', value: true }, { name: 'No', value: false }];
+
+var DateTypes;
+(function (DateTypes) {
+    DateTypes["Day"] = "Day";
+    DateTypes["Month"] = "Month";
+    DateTypes["Year"] = "Year";
+})(DateTypes || (DateTypes = {}));
+
+var ButtonVariantTypes;
+(function (ButtonVariantTypes) {
+    ButtonVariantTypes["Circle"] = "circle";
+    ButtonVariantTypes["Rectangle"] = "rectangle";
+})(ButtonVariantTypes || (ButtonVariantTypes = {}));
+var ButtonTypes;
+(function (ButtonTypes) {
+    ButtonTypes["Submit"] = "submit";
+    ButtonTypes["Button"] = "button";
+    ButtonTypes["Reset"] = "reset";
+})(ButtonTypes || (ButtonTypes = {}));
+
+var ColorVariablesTypes;
+(function (ColorVariablesTypes) {
+    ColorVariablesTypes["Default"] = "var(--color-primary)";
+    ColorVariablesTypes["Primary"] = "var(--color-primary)";
+    ColorVariablesTypes["Secondary"] = "var(--color-primary)";
+})(ColorVariablesTypes || (ColorVariablesTypes = {}));
+var ColorTypes;
+(function (ColorTypes) {
+    ColorTypes["Default"] = "default";
+    ColorTypes["Primary"] = "primary";
+    ColorTypes["Secondary"] = "secondary";
+})(ColorTypes || (ColorTypes = {}));
+var CategoryTypes;
+(function (CategoryTypes) {
+    CategoryTypes["Outlined"] = "outlined";
+    CategoryTypes["Filled"] = "filled";
+    CategoryTypes["Default"] = "default";
+})(CategoryTypes || (CategoryTypes = {}));
+
+var InputTypes;
+(function (InputTypes) {
+    InputTypes["Text"] = "text";
+    InputTypes["Number"] = "number";
+    InputTypes["Password"] = "password";
+    InputTypes["Email"] = "email";
+})(InputTypes || (InputTypes = {}));
+var ValidationStatusTypes;
+(function (ValidationStatusTypes) {
+    ValidationStatusTypes["Initial"] = "initial";
+    ValidationStatusTypes["Loading"] = "isLoading";
+    ValidationStatusTypes["Declined"] = "declined";
+    ValidationStatusTypes["Approved"] = "approved";
+})(ValidationStatusTypes || (ValidationStatusTypes = {}));
+
+var SizeTypes;
+(function (SizeTypes) {
+    SizeTypes["Small"] = "small";
+    SizeTypes["Medium"] = "medium";
+    SizeTypes["Large"] = "large";
+})(SizeTypes || (SizeTypes = {}));
+var AlignTypes;
+(function (AlignTypes) {
+    AlignTypes["TL"] = "tl";
+    AlignTypes["TC"] = "tc";
+    AlignTypes["TR"] = "tr";
+    AlignTypes["CL"] = "cl";
+    AlignTypes["CC"] = "cc";
+    AlignTypes["CR"] = "cr";
+    AlignTypes["BL"] = "bl";
+    AlignTypes["BC"] = "bc";
+    AlignTypes["BR"] = "br";
+})(AlignTypes || (AlignTypes = {}));
+var DirectionTypes;
+(function (DirectionTypes) {
+    DirectionTypes["Left"] = "left";
+    DirectionTypes["Up"] = "up";
+    DirectionTypes["Right"] = "right";
+    DirectionTypes["Down"] = "down";
+})(DirectionTypes || (DirectionTypes = {}));
+
+var CompanyRoleTypes;
+(function (CompanyRoleTypes) {
+    CompanyRoleTypes["Broker"] = "broker";
+    CompanyRoleTypes["Offering"] = "offering";
+})(CompanyRoleTypes || (CompanyRoleTypes = {}));
+
+var DeviceTypes;
+(function (DeviceTypes) {
+    DeviceTypes["Desktop"] = "desktop";
+    DeviceTypes["Mobile"] = "mobile";
+})(DeviceTypes || (DeviceTypes = {}));
+const DeviceTypeWidthList = [
+    {
+        type: DeviceTypes.Mobile,
+        minWidth: 0,
+    },
+    {
+        type: DeviceTypes.Desktop,
+        minWidth: 601,
+    },
+];
+var ScreenBPTypes;
+(function (ScreenBPTypes) {
+    ScreenBPTypes["XS"] = "xs";
+    ScreenBPTypes["SM"] = "sm";
+    ScreenBPTypes["MD"] = "md";
+    ScreenBPTypes["LG"] = "lg";
+    ScreenBPTypes["XL"] = "xl";
+    ScreenBPTypes["XXL"] = "xxl";
+})(ScreenBPTypes || (ScreenBPTypes = {}));
+const ScreenBPList = [
+    {
+        BP: ScreenBPTypes.XS,
+        minWidth: 0,
+    },
+    {
+        BP: ScreenBPTypes.SM,
+        minWidth: 321,
+    },
+    {
+        BP: ScreenBPTypes.MD,
+        minWidth: 601,
+    },
+    {
+        BP: ScreenBPTypes.LG,
+        minWidth: 861,
+    },
+    {
+        BP: ScreenBPTypes.XL,
+        minWidth: 1201,
+    },
+    {
+        BP: ScreenBPTypes.XXL,
+        minWidth: 1920,
+    },
+];
+
+var AppTypes;
+(function (AppTypes) {
+    AppTypes["MyChoice"] = "MyChoice";
+    AppTypes["Partner"] = "Partner";
+    AppTypes["TheBig"] = "TheBig";
+})(AppTypes || (AppTypes = {}));
+var InsuranceTypes;
+(function (InsuranceTypes) {
+    InsuranceTypes["Car"] = "car";
+    InsuranceTypes["Life"] = "life";
+    InsuranceTypes["Home"] = "home";
+})(InsuranceTypes || (InsuranceTypes = {}));
+const defaultLocalIndex = 'insurance';
+const MAX_LOCAL_STORAGE_HOURS = 168;
+
+const API_ROOT = process.env.REACT_APP_API_BASE_URL ? process.env.REACT_APP_API_BASE_URL.toString() : '';
+const API_AUTH = {
+    POST_SIGN_IN: `${API_ROOT}login/`,
+    GET_SIGN_OUT: `${API_ROOT}logout/`,
+    POST_SIGN_UP: `${API_ROOT}registration/`,
+    POST_FORGOT: `${API_ROOT}password/reset/`,
+    POST_RESET: `${API_ROOT}password/reset/confirm/`,
+    POST_EMAIL_VERIFICATION: `${API_ROOT}registration/verify-email/`,
+    POST_TOKEN: `${API_ROOT}token/refresh/`,
+    POST_EMAIL_VALIDATION: `${API_ROOT}email/validate/`,
+};
+const PROFILE_API = {
+    USER: `${API_ROOT}user/me/`,
+    POST_PASSWORD_CHANGE: `${API_ROOT}password/change/`,
+};
+const API_APP = {
+    GET_PARTNER: `${API_ROOT}partners/`,
+};
+const API_FORM_CAR = {
+    GET_POSTAL: `${API_ROOT}postal/auto/`,
+    GET_VEHICLE: `${API_ROOT}vehicle/year`,
+    POST_QUOTE_DATA: `${API_ROOT}autoquote/`,
+    GET_QUOTE_DATA: `${API_ROOT}autoquote/`,
+    POST_QUOTE_ONLIA_URL: `${API_ROOT}autoquote/onlia-leads/`,
+};
+const API_FORM_HOME = {
+    GET_POSTAL: `${API_ROOT}postal/home/`,
+    POST_QUOTE_DATA: `${API_ROOT}homequote/`,
+};
+var HttpRequestHeaderTypes;
+(function (HttpRequestHeaderTypes) {
+    HttpRequestHeaderTypes["Json"] = "JSON";
+    HttpRequestHeaderTypes["MultiPart"] = "MultiPart";
+})(HttpRequestHeaderTypes || (HttpRequestHeaderTypes = {}));
+var RequestStatusTypes;
+(function (RequestStatusTypes) {
+    RequestStatusTypes["Waiting"] = "Waiting";
+    RequestStatusTypes["Loading"] = "Loading";
+    RequestStatusTypes["Success"] = "Success";
+    RequestStatusTypes["Error"] = "Error";
+})(RequestStatusTypes || (RequestStatusTypes = {}));
+var RequestTypes;
+(function (RequestTypes) {
+    RequestTypes["Get"] = "GET";
+    RequestTypes["Post"] = "POST";
+    RequestTypes["Put"] = "PUT";
+    RequestTypes["Delete"] = "DELETE";
+    RequestTypes["Patch"] = "PATCH";
+})(RequestTypes || (RequestTypes = {}));
+
+var ModalTypes;
+(function (ModalTypes) {
+    ModalTypes["MessageModal"] = "MessageModal";
+    ModalTypes["ConfirmModal"] = "ConfirmModal";
+    ModalTypes["PostalModal"] = "PostalModal";
+    ModalTypes["FinaleModal"] = "FinaleModal";
+})(ModalTypes || (ModalTypes = {}));
+
+const IconArrow = (props) => {
+    const { width, height, className } = props;
+    return (jsx("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", style: { width, height }, viewBox: "0 0 22 16", children: jsx("path", { d: "M14.8,0.5c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l0,0l5.6,\n    5.6H0.8C0.4,7.2,0,7.5,0,8c0,0,0,0,0,0 c0,0.4,0.4,0.8,0.8,0.8h18.6l-5.6,\n    5.6c-0.3,0.3-0.3,0.8,0,1.1c0.3,0.3,0.8,0.3,1.1,0c0,0,0,0,0,\n    0l7-7c0.3-0.3,0.3-0.8,0-1.1 L14.8,0.5z" }) }));
+};
+IconArrow.defaultProps = {
+    className: `icon-arrow-${CategoryTypes.Outlined} icon-direction-${DirectionTypes.Down}`,
+    width: '1.375rem',
+    height: '1rem',
+};
+
+const IconTabArrow = (props) => {
+    const { width, height, className } = props;
+    return (jsx("svg", { className: className, version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 10 18", style: { height, width }, children: jsx("path", { fill: "#FFFFFF", d: "M8.1,7.4l-7-7c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7,7.7l-6.6,6.6c-0.2,0.2-0.2,0.5,0,0.7\n           c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1l7-7C8.3,7.9,8.3,7.5,8.1,7.4z" }) }));
+};
+IconTabArrow.defaultProps = {
+    className: '',
+    width: '0.625rem',
+    height: '1.125rem',
+};
+
+const NavigationBase = (props) => {
+    const { height, width, className, viewBox, children, } = props;
+    return (jsx("svg", { className: className, version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", style: { height, width }, viewBox: viewBox, children: jsx("g", { fill: "var(--color-primary)", children: children }) }));
+};
+NavigationBase.defaultProps = {
+    className: '',
+    height: '1.75rem',
+    width: 'auto',
+};
+
+const NavigationDiscount = ({ height, width, className }) => (jsxs(NavigationBase, { height: height, width: width, className: className, viewBox: "0 0 26.1 26.1", children: [jsx("path", { d: "M9.8,11.6c1,0,1.8-0.8,1.8-1.8c0-1-0.8-1.8-1.8-1.8c-1,0-1.8,0.8-1.8,1.8c0,0,0,0,0,0\n          C7.9,10.8,8.8,11.6,9.8,11.6z M9.8,9c0.4,0,0.8,0.3,0.8,0.8s-0.3,0.8-0.8,0.8S9,10.2,9,9.8l0,0C9,9.3,9.3,9,9.8,9z" }), jsx("path", { d: "M15.8,13.9c0-1-0.8-1.8-1.8-1.8c-1,0-1.8,0.8-1.8,1.8c0,1,0.8,1.8,1.8,1.8c0,0,0,0,0,0\n          C15,15.8,15.8,15,15.8,13.9z M13.2,13.9c0-0.4,0.3-0.8,0.8-0.8s0.8,0.3,0.8,0.8s-0.3,0.8-0.8,0.8l0,0\n          C13.5,14.7,13.2,14.4,13.2,13.9z" }), jsx("path", { d: "M15.3,8.4c-0.2-0.2-0.5-0.2-0.8,0c0,0,0,0,0,0l-5.9,5.9c-0.2,0.2-0.2,0.5,0,0.8c0,0,0,0,0,0\n          c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0,0.3-0.1,0.4-0.2l5.9-5.9C15.5,9,15.5,8.6,15.3,8.4z" }), jsx("path", { d: "M19.8,17.5c0.5,0,0.9,0.4,0.9,0.9c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5c0,0,0,0,0,\n          0c0-0.9-0.6-1.7-1.4-1.9v-0.3c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5c0,0,0,0,0,0v0.3c-1,\n          0.3-1.7,1.4-1.4,2.4c0.2,0.8,1,1.4,1.9,1.4c0.5,0,0.9,0.4,0.9,0.9c0,0.5-0.4,0.9-0.9,\n          0.9c-0.5,0-0.9-0.4-0.9-0.9l0,0c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5c0,0,0,0,0,0\n          c0,0.9,0.6,1.7,1.4,1.9v0.4c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5c0,0,0,0,0,\n          0v-0.4c1-0.3,1.7-1.4,1.4-2.4c-0.2-0.8-1-1.4-1.9-1.4c-0.5,0.1-0.9-0.3-1-0.8c-0.1-0.5,\n          0.3-0.9,0.8-1C19.7,17.5,19.8,17.5,19.8,17.5L19.8,17.5z" }), jsx("path", { d: "M22.6,14.2l0.8-1.2c0.5-0.7,0.5-1.6,0-2.4l-0.9-1.3c-0.1-0.2-0.2-0.4-0.2-0.6l0.1-1.6c0-0.9-0.4-1.6-1.2-2\n          l-1.4-0.7c-0.2-0.1-0.4-0.3-0.5-0.5l-0.7-1.4c-0.4-0.8-1.2-1.2-2-1.2L15,1.4c-0.2,0-0.5,\n          0-0.6-0.2L13,0.4c-0.7-0.5-1.6-0.5-2.4,0L9.4,1.2C9.2,1.3,8.9,1.4,8.7,1.4L7.1,1.3c-0.9,\n          0-1.6,0.4-2,1.2L4.4,3.9C4.3,4.1,4.1,4.3,3.9,4.4L2.5,5.1c-0.8,0.4-1.2,1.2-1.2,2\n          l0.1,1.6c0,0.2,0,0.5-0.2,0.6l-0.9,1.3c-0.5,0.7-0.5,1.6,0,2.4l0.9,1.3c0.1,0.2,\n          0.2,0.4,0.2,0.6l-0.1,1.6c0,0.9,0.4,1.6,1.2,2l1.4,0.7c0.2,0.1,0.4,0.3,0.5,0.5l0.7,\n          1.4c0.4,0.8,1.2,1.2,2,1.2l1.6-0.1c0.2,0,0.5,0,0.6,0.2l1.3,0.9c0.7,0.5,1.6,0.5,2.4,0\n          l1.2-0.8c1.5,3.1,5.3,4.4,8.4,2.9s4.4-5.3,2.9-8.4C24.9,15.8,23.8,14.8,22.6,\n          14.2L22.6,14.2z M13.8,21.6l-1.3,0.9c-0.4,0.2-0.8,0.2-1.2,0l-1.3-0.9c-0.4-0.3-0.8-0.4-1.3-0.3l-1.6,\n          0.1c-0.4,0-0.8-0.2-1-0.6l-0.7-1.4c-0.2-0.4-0.5-0.7-0.9-0.9L3,17.7c-0.4-0.2-0.6-0.6-0.6-1L2.5,\n          15c0-0.5-0.1-0.9-0.3-1.3l-0.9-1.3c-0.2-0.4-0.2-0.8,0-1.2l0.9-1.3c0.3-0.4,0.4-0.8,0.3-1.3\n          L2.4,7c0-0.4,0.2-0.8,0.6-1l1.4-0.7c0.4-0.2,0.7-0.5,0.9-0.9L6,3c0.2-0.4,0.6-0.6,1-0.6l1.6,\n          0.1c0.5,0,0.9-0.1,1.3-0.3l1.3-0.9c0.4-0.2,0.8-0.2,1.2,0l1.3,0.9c0.4,0.3,0.8,0.4,1.3,\n          0.3l1.6-0.1c0.4,0,0.8,0.2,1,0.6l0.7,1.4c0.2,0.4,0.5,0.7,0.9,0.9L20.7,6\n          c0.4,0.2,0.6,0.6,0.6,1l-0.1,1.6c0,0.5,0.1,0.9,0.3,1.3l0.9,1.3c0.2,0.4,0.2,0.8,\n          0,1.2l-0.9,1.3c0,0,0,0,0,0c-3.3-1-6.8,1-7.7,4.3C13.5,19.2,13.5,20.4,13.8,21.6C13.8,\n          21.6,13.8,21.6,13.8,21.6L13.8,21.6z M19.8,25c-2.9,0-5.2-2.3-5.2-5.2s2.3-5.2,5.2-5.2\n          S25,17,25,19.8S22.7,25,19.8,25C19.8,25,19.8,25,19.8,25L19.8,25z" })] }));
+NavigationDiscount.defaultProps = {
+    className: '',
+    height: '1.75rem',
+    width: 'auto',
+};
+
+const NavigationPerson = ({ height, width, className }) => (jsxs(NavigationBase, { height: height, width: width, className: className, viewBox: "0 0 36 24.1", children: [jsx("path", { d: "M33.1,0H2.8C1.3,0,0,1.3,0,2.8v18.4l0,0c0,1.6,1.3,2.8,2.8,2.8h30.3c1.6,0,2.8-1.3,2.8-2.8l0,0V2.8\n      C36,1.3,34.7,0,33.1,0z M2.8,1.4h30.3c0.8,0,1.4,0.6,1.4,1.4v16.4H13.9c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,\n      0.3,0.7,0.7,0.7h20.7v0.6c0,0.8-0.6,1.4-1.4,1.4H2.8c-0.8,0-1.4-0.6-1.4-1.4v-0.6h6.3c0.4,0,0.7-0.3,\n      0.7-0.7c0-0.4-0.3-0.7-0.7-0.7l0,0H1.4V2.8C1.4,2.1,2,1.4,2.8,1.4L2.8,1.4z" }), jsx("path", { d: "M19.7,5.8h3.8c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7h-3.8c-0.4,0-0.7,0.3-0.7,0.7S19.3,\n      5.8,19.7,5.8C19.7,5.8,19.7,5.8,19.7,5.8z" }), jsx("path", { d: "M26.5,5.8h3.9c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7h-3.9c-0.4,0-0.7,0.3-0.7,\n      0.7S26.1,5.8,26.5,5.8C26.5,5.8,26.5,5.8,26.5,5.8z" }), jsx("path", { d: "M19.7,8.8h10.7c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7H19.7c-0.4,0-0.7,\n      0.3-0.7,0.7S19.3,8.8,19.7,8.8C19.7,8.8,19.7,8.8,19.7,8.8z" }), jsx("path", { d: "M19.7,11.9h3.2c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7h-3.2c-0.4,0-0.7,\n      0.3-0.7,0.7S19.3,11.9,19.7,11.9C19.7,11.9,19.7,11.9,19.7,11.9z" }), jsx("path", { d: "M29.7,10.5h-2.7c-0.9,0-1.7,0.8-1.7,1.7c0,0,0,0,0,0v2.6c0,0.9,0.8,1.7,1.7,\n      1.7l0,0h2.7c0.9,0,1.7-0.8,1.7-1.7c0,0,0,0,0,0v-2.6C31.4,11.3,30.6,10.5,29.7,\n      10.5L29.7,10.5z M30,14.8c0,0.2-0.1,0.3-0.3,0.3h-2.7c-0.2,0-0.3-0.1-0.3-0.3v-2.6\n      c0-0.2,0.1-0.3,0.3-0.3h2.7c0.2,0,0.3,0.1,0.3,0.3V14.8z" }), jsx("path", { d: "M19.7,15h3.2c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7h-3.2c-0.4,0-0.7,\n      0.3-0.7,0.7S19.3,15,19.7,15C19.7,15,19.7,15,19.7,15z" }), jsx("path", { d: "M5.6,16.5h9.9c0.4,0,0.7-0.3,0.7-0.7V4.9c0-0.4-0.3-0.7-0.7-0.7H5.6c-0.4,0-0.7,0.3-0.7,0.7v10.9\n      C4.9,16.1,5.2,16.5,5.6,16.5z M14.8,15.1H6.3v-2l0,0c0.3-1.1,1.3-1.8,2.5-1.8h3.6c1.1,0,2.1,0.7,2.5,\n      1.8l0,0L14.8,15.1z M9,8.3c0-0.8,0.7-1.5,1.5-1.5S12,7.5,12,8.3s-0.7,1.5-1.5,1.5C9.7,9.8,9,9.1,9,\n      8.3C9,8.3,9,8.3,9,8.3L9,8.3z M14.8,10.6c-0.5-0.4-1.1-0.7-1.8-0.8c0.9-1.4,\n      0.5-3.1-0.9-4c-0.1-0.1-0.3-0.2-0.4-0.2h3.1L14.8,10.6L14.8,10.6z M9.4,5.6\n      C7.9,6.2,7.2,7.9,7.8,9.4C7.9,9.6,8,9.7,8.1,9.8c-0.7,0.1-1.3,0.4-1.8,0.8v-5L9.4,5.6z" }), jsx("path", { d: "M11.2,19.4c-0.3-0.2-0.8-0.1-1,0.2c-0.2,0.3-0.1,0.8,0.2,1s0.8,0.1,1-0.2c0,0,0.1-0.1,0.1-0.1\n      C11.6,19.9,11.5,19.5,11.2,19.4z" })] }));
+NavigationPerson.defaultProps = {
+    className: '',
+    height: '1.75rem',
+    width: 'auto',
+};
+
+const NavigationQuotes = ({ height, width, className }) => (jsxs(NavigationBase, { height: height, width: width, className: className, viewBox: "0 0 21.2 27.6", children: [jsx("path", { d: "M0,3.2v24c0,0.3,0.2,0.5,0.5,0.5H18c0.3,0,0.5-0.2,\n          0.5-0.5V7.8c0,0,0,0,0,0c0,0,0-0.1,0-0.1c0,0,0,0,0,0\n          c0-0.1-0.1-0.1-0.1-0.1l-4.6-4.6c0,0-0.1-0.1-0.1-0.1l0,\n          0c0,0-0.1,0-0.1,0c0,0,0,0,0,0H0.5C0.2,2.8,0,3,0,3.2z M16.9,7.4h-3v-3\n          L16.9,7.4z M0.9,3.7h12v4.1c0,0.3,0.2,0.5,0.5,0.5h4.1v18.4H0.9V3.7z" }), jsx("path", { d: "M19.4,24v0.9h1.4c0.3,0,0.5-0.2,0.5-0.5v-24C21.2,0.2,21,0,20.7,\n          0c0,0,0,0,0,0H3.2C3,0,2.8,0.2,2.8,0.5v1.4h0.9V0.9h16.6v23H19.4z" }), jsx("path", { d: "M3.7,9.2h11.1v0.9H3.7V9.2z" }), jsx("path", { d: "M3.7,6.5h3.7v0.9H3.7V6.5z" }), jsx("path", { d: "M3.7,12h7.4v0.9H3.7V12z" }), jsx("path", { d: "M12,12h2.8v0.9H12V12z" }), jsx("path", { d: "M3.7,14.7h11.1v0.9H3.7V14.7z" }), jsx("path", { d: "M3.7,20.3h11.1v0.9H3.7V20.3z" }), jsx("path", { d: "M7.8,17.5h6.9v0.9H7.8V17.5z" }), jsx("path", { d: "M3.7,17.5h3.2v0.9H3.7V17.5z" }), jsx("path", { d: "M3.7,23h1.8V24H3.7V23z" }), jsx("path", { d: "M6.4,23h8.3V24H6.4V23z" })] }));
+NavigationQuotes.defaultProps = {
+    className: '',
+    height: '1.75rem',
+    width: 'auto',
+};
+
+const NavigationCar = ({ height, width, className }) => (jsxs(NavigationBase, { height: height, width: width, className: className, viewBox: "0 0 34.9 27", children: [jsx("path", { d: "M33.5,10l-0.8-0.8L30.1,2c-0.5-1.2-1.6-2-2.9-2h-19C6.8,0,\n          5.7,0.8,5.2,2L2.6,9.1l-1.1,1c-1,0.8-1.5,2-1.5,3.3v10.5C0,25.6,\n          1.4,27,3.1,27h2c1.7,0,3.1-1.4,3.1-3.1v-1.5h18.5v1.5c0,1.7,1.4,\n          3.1,3.1,3.1h2c1.7,0,3.1-1.4,3.1-3.1V13.1C34.9,11.9,34.4,10.8,33.5,\n          10z M6.6,2.5c0.2-0.6,0.8-1,1.5-1h19.1c0.7,0,1.3,0.4,1.5,1L31,\n          8.8h-1.7c-0.4-2.8-3-4.7-5.8-4.3c-2.2,0.3-4,2.1-4.3,4.3H4.3L6.6,\n          2.5z M27.8,8.8L27.8,8.8h-7.1C21.1,6.8,23,5.6,25,6C26.4,6.3,27.5,\n          7.4,27.8,8.8z M6.7,23.9c0,0.9-0.7,1.6-1.6,1.6h-2c-0.9,\n          0-1.6-0.7-1.6-1.6v-2c0.5,0.3,1.1,0.4,1.6,0.4h3.6V23.9z M33.4,\n          23.9c0,0.9-0.7,1.6-1.6,1.6h-2c-0.9,0-1.6-0.7-1.6-1.6v-1.5h3.6c0.6,\n          0,1.1-0.1,1.6-0.4L33.4,23.9z M31.7,20.9L31.7,20.9l-28.6,0c-0.9,\n          0-1.6-0.7-1.6-1.6c0,0,0,0,0,0v-5.9c0-0.8,0.4-1.6,1-2.1l0,\n          0l1-1h28.2l0.7,0.8c0,0,0,0,0,0c0.6,0.5,0.9,1.3,0.9,\n          2v6.1h0C33.4,20.1,32.6,20.9,31.7,20.9z" }), jsx("path", { d: "M9.8,13.3H4.2c-0.4,0-0.7,0.3-0.7,0.7v3.9c0,0.4,0.3,\n          0.7,0.7,0.7h5.6c0.4,0,0.7-0.3,0.7-0.7V14C10.6,13.6,\n          10.2,13.3,9.8,13.3z M9.1,17.1H5v-2.4h4.1V17.1z" }), jsx("path", { d: "M30.6,13.3H25c-0.4,0-0.7,0.3-0.7,0.7v3.9c0,0.4,0.3,\n          0.7,0.7,0.7h5.6c0.4,0,0.7-0.3,0.7-0.7V14C31.4,13.6,\n          31,13.3,30.6,13.3z M29.9,17.1h-4.1v-2.4h4.1V17.1z" }), jsx("path", { d: "M21,16.4C21,16.4,21,16.4,21,16.4h-7.2c-0.4,0-0.7,\n          0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7H21c0.4,0,0.7-0.3,\n          0.7-0.7C21.8,16.7,21.4,16.4,21,16.4z" }), jsx("path", { d: "M13.8,15.6H21c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7h-7.2c-0.4,\n          0-0.7,0.3-0.7,0.7S13.4,15.6,13.8,15.6z" })] }));
+NavigationCar.defaultProps = {
+    className: '',
+    height: '1.75rem',
+    width: 'auto',
+};
+
+const NavigationAddress = ({ height, width, className }) => (jsx(NavigationBase, { height: height, width: width, className: className, viewBox: "0 0 21.694 32.447", children: jsx("path", { d: "M15.3,10.847A4.457,4.457,0,1,0,10.848,15.3,4.462,4.462,0,0,0,15.3,10.847m-7.554,0a3.1,3.1,0,1,1,3.1,3.1,3.1,3.1,0,0,1-3.1-3.1m7.063,12.871L19.494,17.4A10.658,10.658,0,0,0,20.525,6.04,10.662,10.662,0,0,0,10.96,0h-.211A10.671,10.671,\n      0,0,0,1.17,6.039,10.661,10.661,0,0,0,2.191,17.384l4.691,6.334C2.665,24.366,0,25.969,0,27.932c0,2.933,5.589,4.515,10.847,4.515s10.848-1.582,10.848-4.515c0-1.964-2.665-3.566-6.881-4.214M3.274,16.565a9.31,9.31,0,0,1-.888-9.921,9.326,9.326,0,0,1,8.376-5.285h.185a9.321,9.321,0,0,1,8.36,5.285,9.315,9.315,0,0,1-.9,9.933L10.848,26.792,3.283,16.576Zm7.573,14.524c-5.431,0-9.488-1.667-9.488-3.157,0-1.1,2.4-2.477,6.443-2.97l2.5,3.374a.68.68,0,0,0,1.091,0l2.5-3.374c4.039.493,6.443,1.874,6.443,2.97,0,1.49-4.057,3.157-9.489,3.157", transform: "translate(0 0)" }) }));
+NavigationAddress.defaultProps = {
+    className: '',
+    height: '1.75rem',
+    width: 'auto',
+};
+
+const NavigationProperty = ({ height, width, className }) => (jsx(NavigationBase, { height: height, width: width, className: className, viewBox: "0 0 33.801 30.063", children: jsx("path", { d: "M33.566,13.977l-6.214-5.3V1.5a.669.669,0,0,0-.669-.67H23.176a.669.669,0,0,0-.669.67V4.54L17.375.161a.669.669,0,0,0-.867,0L.236,13.976A.669.669,0,1,0,\n      1.1,15L16.94,1.547,32.7,14.994a.669.669,0,0,0,.868-1.018M23.845,2.171h2.169V7.533l-2.169-1.85ZM17.367,4.347a.667.667,0,0,0-.867,0L3.463,15.415a.669.669,0\n      ,0,0,.867,1.02l1.037-.881v13.84a.669.669,0,0,0,.67.669H27.755a.668.668,0,0,0,.669-.669V15.541l1.046.893a.669.669,0,0,0,.868-1.018Zm2.564,24.377H13.945V20.746h5.986Zm7.155-14.258V28.724H21.269V20.078a.668.668,0,0,0-.669-.669H13.276a.668.668,0,0,0-.669.669v8.647h-5.9V14.486a.59.59,0,0,0-.011-.059L16.932,5.734,27.1,14.409c0,.02-.011.037-.011.057", transform: "translate(0 0)" }) }));
+NavigationProperty.defaultProps = {
+    className: '',
+    height: '1.75rem',
+    width: 'auto',
+};
+
+const IconDelete = (props) => {
+    const { width, height, className, onClick, color, colorType, } = props;
+    return (jsx("svg", { className: className, onClick: onClick, version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 14 14", style: { height, width }, children: jsxs("g", { fill: colorType || color || '#FFFFFF', children: [jsx("rect", { x: "6.5", y: "2.1", transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -2.8995 7)", width: "1", height: "9.9" }), jsx("rect", { x: "2.1", y: "6.5", transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -2.8995 7)", width: "9.9", height: "1" }), jsx("path", { d: "M7,14c-3.9,0-7-3.1-7-7c0-3.9,3.1-7,\n        7-7c3.9,0,7,3.1,7,7C14,10.9,10.9,14,7,14z M7,1C3.7,1,1,3.7,1,7s2.7,6,6,6\n        s6-2.7,6-6S10.3,1,7,1z" })] }) }));
+};
+IconDelete.defaultProps = {
+    className: '',
+    width: '0.875rem',
+    height: '0.875rem',
+};
+
+const IconTooltip = (props) => {
+    const [isHover, setIsHover] = useState(false);
+    const { width, height, className, } = props;
+    const handleEvent = (type) => () => {
+        // const element = document.getElementById(tooltipId as string);
+        if (type === 'mouseOver') {
+            if (!isHover) {
+                setIsHover(true);
+                // element?.classList.add('show');
+            }
+        }
+        if (type === 'mouseLeave') {
+            setIsHover(false);
+            // element?.classList.remove('show');
+        }
+    };
+    return (jsxs("svg", { className: className, onMouseOver: handleEvent('mouseOver'), onMouseLeave: handleEvent('mouseLeave'), version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 18 18", style: { width, height }, children: [!isHover
+                && (jsx("path", { fill: "var(--color-secondary)", d: "M9,18c-5,0-9-4-9-9c0-5,4-9,9-9c5,0,9,4,9,\n            9C18,14,14,18,9,18z M9,1C4.6,1,1,4.6,1,9s3.6,8,8,8s8-3.6,8-8 S13.4,1,9,1z" })), isHover
+                && jsx("circle", { fill: "var(--color-secondary)", cx: "9", cy: "9", r: "9" }), jsxs("g", { fill: isHover ? '#FFF' : 'var(--color-secondary)', children: [jsx("path", { d: "M9.8,13.8c0,0.4-0.3,0.8-0.8,0.8s-0.8-0.3-0.8-0.8S8.6,13,9,13S9.8,13.3,9.8,13.8z" }), jsx("path", { d: "M9,11.6c-0.3,0-0.6-0.3-0.6-0.6v-0.8c0-0.7,0.5-1.4,1.1-1.6c0.8-0.3,1.4-1.1,\n        1.5-2 c0-1.1-1-2-2.1-2c-1.1,0-2,0.9-2,2c0,0.3-0.3,0.6-0.6,0.5C6.1,7.2,5.8,7,5.8,\n        6.7c0-1.8,1.4-3.2,3.1-3.2c1.8,0,3.2,1.4,3.2,3.1 c0,0,0,0.1,0,0.1c-0.1,1.4-1,\n        2.6-2.2,3C9.7,9.8,9.6,10,9.6,10.2V11C9.6,11.3,9.3,11.6,9,11.6C9,11.6,9,11.6,9,11.6z" })] }), jsx("circle", { fill: "transparent", cx: "9", cy: "9", r: "9" })] }));
+};
+IconTooltip.defaultProps = {
+    className: '',
+    width: '1.25rem',
+    height: '1.25rem',
+};
+
+const IconSuccess = ({ width, height, className, }) => (jsx("svg", { className: `icon-svg ${className || 'icon-primary'}`, version: "1.1", id: "svg-icon-approve", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 50 50", style: { width, height }, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", fill: "#02b917", d: "M47.3,12c0.9-0.8,1-2.1,0.2-3c-0.8-0.9-2.1-1-3-0.2c-0.1,0.1-0.1,0.1-0.2,0.2L17.6,35.9L5.6,23.9\n                c-0.8-0.8-2.2-0.8-3,0s-0.8,2.2,0,3l13.4,13.4c0.8,0.8,2.1,0.8,3,0c0,0,0,0,0,0L47.3,12z" }) }));
+IconSuccess.defaultProps = {
+    className: '',
+    width: '1.25rem',
+    height: '1.25rem',
+};
+
+const IconChecked = () => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "9.003", height: "6.611", viewBox: "0 0 9.003 6.611", children: jsx("g", { transform: "translate(0 -67.998)", children: jsx("g", { transform: "translate(0 67.997)", children: jsx("path", { fill: "#f9733e", d: "M8.87,68.129a.45.45,0,0,0-.637,0L2.841,73.522.768,71.449a.45.45,0,0,0-.637\n            .637l2.391,2.391a.45.45,0,0,0,.637,0L8.87,68.766A.45.45,0,0,0,8.87,68.129Z", transform: "translate(0 -67.997)" }) }) }) }));
+
+const IconDecline = ({ width, height, className }) => (jsx("svg", { className: `icon-svg ${className || 'icon-primary'}`, xmlns: "http://www.w3.org/2000/svg", id: "svg-icon-decline", version: "1.1", x: "0px", y: "0px", viewBox: "0 0 50 50", style: { width, height }, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", fill: "#F50011", d: "M47.2,7c1-1.3,0.8-3.2-0.5-4.2C45.6,2,44.1,2,43,2.8L25,20.8L7,2.8c-1.3-1-3.2-0.7-4.2,0.6\n          C2.1,4.5,2.1,6,2.8,7l17.9,18L2.8,43c-1.1,1.2-1.1,3.1,0.1,4.2c1.2,1.1,3,1.1,4.1,0l17.9-18l18,\n          18c1.2,1.1,3.1,1.1,4.2-0.1c1.1-1.2,1.1-3,0-4.1l-18-18L47.2,7z" }) }));
+IconDecline.defaultProps = {
+    className: '',
+    width: '1.25rem',
+    height: '1.25rem',
+};
+
+const ButtonBase = (props) => {
+    const { color, category, className, variant, size, label, type, onClick, children, } = props;
+    const buttonVariant = variant === ButtonVariantTypes.Rectangle ? variant : `button-${variant}-${size}`;
+    return (jsx("button", { className: [
+            size,
+            `button-${category}-${color}`,
+            buttonVariant,
+            className,
+        ].join(' '), type: type, onClick: onClick, children: children || label }));
+};
+ButtonBase.defaultProps = {
+    variant: ButtonVariantTypes.Rectangle,
+    category: CategoryTypes.Default,
+    className: '',
+    type: ButtonTypes.Button,
+};
+
+const ButtonForm = (props) => {
+    const { selected, onClick, label, className, } = props;
+    const color = selected ? ColorTypes.Primary : ColorTypes.Default;
+    const category = selected ? CategoryTypes.Filled : CategoryTypes.Outlined;
+    return (jsx(ButtonBase, { className: className, type: ButtonTypes.Button, onClick: onClick, label: label, category: category, color: color, variant: ButtonVariantTypes.Rectangle, size: SizeTypes.Large }));
+};
+ButtonForm.defaultProps = {
+    selected: true,
+    label: '',
+};
+
+const ButtonTab = (props) => {
+    const { className, selfDelete, iconClick, buttonClick, label, } = props;
+    return (jsxs("button", { className: `${className} navigation-tab`, type: ButtonTypes.Button, onClick: buttonClick, children: [jsx("h4", { children: label }), selfDelete && jsx(IconDelete, { onClick: iconClick })] }));
+};
+ButtonTab.defaultProps = {
+    className: '',
+    selfDelete: true,
+};
+
+const ButtonTabMobile = (props) => {
+    const { className, selfDelete, iconClick, buttonClick, label, } = props;
+    return (jsxs("div", { className: "navigation-tab-mobile", children: [jsx("button", { className: `${className} tab-item`, type: ButtonTypes.Button, onClick: buttonClick, children: jsx("h4", { children: label }) }), selfDelete && jsx("button", { className: "tab-item-delete", onClick: iconClick, children: "Delete" })] }));
+};
+ButtonTabMobile.defaultProps = {
+    className: '',
+    selfDelete: true,
+};
+
+const ButtonMenu = ({ className, onClick }) => (jsxs("button", { className: `${className} hamburger`, onClick: onClick, children: [jsx("span", {}), jsx("span", {}), jsx("span", {})] }));
+ButtonMenu.defaultProps = {
+    className: '',
+};
+
+const ButtonArrow = (props) => {
+    const { color, size, category, direction, onClick, } = props;
+    const iconColor = `${category === CategoryTypes.Outlined ? color : ColorTypes.Primary}`;
+    const iconWidth = size === SizeTypes.Small ? '1rem' : '1.375rem';
+    return (jsx(ButtonBase, { size: size, category: category, color: color, variant: ButtonVariantTypes.Circle, className: "button-arrow", onClick: onClick, children: jsx(IconArrow, { className: `icon-arrow-${iconColor} icon-direction-${direction}`, width: iconWidth }) }));
+};
+ButtonArrow.defaultProps = {
+    direction: DirectionTypes.Down,
+    category: CategoryTypes.Outlined,
+    color: ColorTypes.Default,
+};
+
+const ButtonTabArrow = (props) => {
+    const { className, onClick, direction, } = props;
+    return (jsx("button", { className: `button-tab-arrow ${className} ${direction}`, onClick: onClick, children: jsx(IconTabArrow, { className: `icon-direction-${direction}` }) }));
+};
+ButtonTabArrow.defaultProps = {
+    className: '',
+    direction: DirectionTypes.Left,
+};
+
+var InputValueActionTypes;
+(function (InputValueActionTypes) {
+    InputValueActionTypes["Set"] = "SetValue";
+    InputValueActionTypes["Clear"] = "ClearValue";
+})(InputValueActionTypes || (InputValueActionTypes = {}));
+
+const inputValueReducer = (state, action) => {
+    switch (action.type) {
+        case InputValueActionTypes.Set:
+            return action.payload;
+        case InputValueActionTypes.Clear:
+            return undefined;
+        default: return state;
+    }
+};
+
+const optionsIsEqual = (options1, options2) => isEqual(options1, options2);
+const isValueInOptions = (value, options) => !!options.find((item) => item.value === value);
+const getValueIndexInOptions = (value, options) => (options.findIndex((item) => item.value === value));
+const getValuesFromNumbers = (start, end) => (range(Number(start), Number(end)).map((item) => ({
+    name: item.toString(),
+    value: item.toString(),
+})));
+const deepClone = cloneDeep;
+
+const getDate = (date) => {
+    if (date) {
+        const dateArr = date.split('-');
+        switch (dateArr.length) {
+            case 1:
+                return new Date(+dateArr[0]);
+            case 2:
+                return new Date(+dateArr[0], +dateArr[1] - 1);
+            case 3:
+                return new Date(+dateArr[0], +dateArr[1] - 1, +dateArr[2]);
+            default:
+                return new Date();
+        }
+    }
+    return new Date();
+};
+const getFormattedDate = (date, pattern) => {
+    if (date) {
+        return format(getDate(date), pattern);
+    }
+    return format(new Date(), pattern);
+};
+const isDateValid = (date) => {
+    const parsed = parse(date, 'yyyy-MM-dd', new Date());
+    return isValid(parsed);
+};
+const getDaysOfMonth = (date) => getDaysInMonth(getDate(date));
+const addYearsToDate = (date, yearCount) => {
+    if (date) {
+        return format(addYears(getDate(date), +yearCount), 'yyyy-MM-dd');
+    }
+    return format(addYears(new Date(), +yearCount), 'yyyy-MM-dd');
+};
+const subYearsFromDate = (date, yearCount) => {
+    if (date) {
+        return format(subYears(getDate(date), +yearCount), 'yyyy-MM-dd');
+    }
+    return format(subYears(new Date(), +yearCount), 'yyyy-MM-dd');
+};
+const addMonthsToDate = (date, monthCount) => {
+    if (date) {
+        return format(addMonths(getDate(date), +monthCount), 'yyyy-MM-dd');
+    }
+    return format(addMonths(new Date(), +monthCount), 'yyyy-MM-dd');
+};
+const subMonthsFromDate = (date, monthCount) => {
+    if (date) {
+        return format(subMonths(getDate(date), +monthCount), 'yyyy-MM-dd');
+    }
+    return format(subMonths(new Date(), +monthCount), 'yyyy-MM-dd');
+};
+const addDaysToDate = (date, dayCount) => {
+    if (date) {
+        return format(addDays(getDate(date), +dayCount), 'yyyy-MM-dd');
+    }
+    return format(addDays(new Date(), +dayCount), 'yyyy-MM-dd');
+};
+const subDaysFromDate = (date, dayCount) => {
+    if (date) {
+        return format(subDays(getDate(date), +dayCount), 'yyyy-MM-dd');
+    }
+    return format(subDays(new Date(), +dayCount), 'yyyy-MM-dd');
+};
+const compareDates = (dateLeft, dateRight) => compareAsc(getDate(dateLeft), getDate(dateRight));
+const getStartOfMonth = (date) => {
+    if (date) {
+        return startOfMonth(getDate(date));
+    }
+    return startOfMonth(new Date());
+};
+const getEndOfMonth = (date) => {
+    if (date) {
+        return endOfMonth(getDate(date));
+    }
+    return endOfMonth(new Date());
+};
+const getStartOfYear = (date) => {
+    if (date) {
+        return startOfYear(getDate(date));
+    }
+    return startOfYear(new Date());
+};
+const getEndOfYear = (date) => {
+    if (date) {
+        return endOfYear(getDate(date));
+    }
+    return endOfYear(new Date());
+};
+const getMinDate = (date, yearCount) => {
+    if (date && yearCount) {
+        const newDate = addYearsToDate(date, +yearCount);
+        const currentDate = getFormattedDate('', 'yyyy-MM-dd');
+        return compareDates(currentDate, newDate) >= 0 ? newDate : currentDate;
+    }
+    return '1922-01-01';
+};
+const getMinDateByYears = (date, yearCount) => {
+    if (date) {
+        const newDate = format(subYears(new Date(), +yearCount), 'yyyy-MM-dd');
+        return compareDates(date, newDate) >= 0 ? date : newDate;
+    }
+    return '1922-01-01';
+};
+const getDayStartEndDates = (currentDate, minDate, maxDate) => {
+    let start = getStartOfMonth('1922-01-01');
+    let end = getEndOfMonth('1922-01-01');
+    const { month, year, day = '01' } = currentDate;
+    if (month && year) {
+        const yearMonth = `${year}-${month}`;
+        const formattedDate = `${yearMonth}-${day}`;
+        start = getStartOfMonth(yearMonth);
+        if (yearMonth === getFormattedDate('', 'yyyy-MM')) {
+            end = (maxDate && compareDates('', maxDate) <= 0) ? getDate(maxDate) : new Date();
+        }
+        else if (maxDate && (yearMonth === getFormattedDate(maxDate, 'yyyy-MM'))) {
+            end = compareDates('', maxDate) <= 0 ? getDate(maxDate) : new Date();
+        }
+        else {
+            end = getEndOfMonth(yearMonth);
+        }
+        if (minDate && (compareDates(formattedDate, minDate) <= 0)) {
+            start = getDate(minDate);
+            end = getEndOfMonth(minDate);
+        }
+        if (maxDate && (compareDates(formattedDate, maxDate) >= 0)) {
+            end = getDate(maxDate);
+            start = getStartOfMonth(maxDate);
+        }
+    }
+    return { start, end };
+};
+const getMonthStartEndDates = (currentDate, minDate, maxDate) => {
+    let start = getStartOfYear('1922-01-01');
+    let end = getEndOfYear('1922-01-01');
+    const { year, month, day = '01' } = currentDate;
+    let formattedDate = '';
+    if (maxDate && year) {
+        if (year === format(getDate(maxDate), 'yyyy')) {
+            formattedDate = maxDate;
+        }
+    }
+    if (year && month && day) {
+        formattedDate = `${year}-${month}-${day}`;
+        start = getStartOfYear(formattedDate);
+        if (year === format(new Date(), 'yyyy')) {
+            end = maxDate && compareDates('', maxDate) <= 0 ? getDate(maxDate) : new Date();
+        }
+        else {
+            end = getEndOfYear(formattedDate);
+        }
+        if (minDate && maxDate && (getFormattedDate(minDate, 'yyyy') === getFormattedDate(maxDate, 'yyyy'))) {
+            start = getDate(minDate);
+            end = getDate(maxDate);
+        }
+        else {
+            if (minDate
+                && (isWithinInterval(getDate(formattedDate), { start: getDate(minDate), end: getEndOfYear(minDate) })
+                    || isBefore(getDate(formattedDate), getDate(minDate)))) {
+                start = getDate(minDate);
+                end = getEndOfYear(minDate);
+            }
+            if (maxDate
+                && (isWithinInterval(getDate(formattedDate), { start: getStartOfYear(maxDate), end: getDate(maxDate) })
+                    || isAfter(getDate(formattedDate), getDate(maxDate)))) {
+                end = getDate(maxDate);
+                start = getStartOfYear(maxDate);
+            }
+        }
+    }
+    else if (minDate && maxDate) {
+        if (getFormattedDate(minDate, 'yyyy') === getFormattedDate(maxDate, 'yyyy')) {
+            start = getDate(minDate);
+            end = getDate(maxDate);
+        }
+        else {
+            start = getStartOfYear(maxDate);
+            end = getEndOfYear(maxDate);
+        }
+    }
+    return { start, end };
+};
+const getYearStartEndDates = (currentDate, minDate, maxDate) => {
+    const { day, month, year } = currentDate;
+    const formattedDate = year && month && day ? `${year}-${month}-${day}` : '1922-01-01';
+    let start = getDate('1922-01-01');
+    let end = maxDate && compareDates('', maxDate) <= 0 ? getDate(maxDate) : new Date();
+    if (minDate) {
+        start = getDate(minDate);
+    }
+    if (maxDate && !(compareAsc(getDate(formattedDate), getDate(maxDate)) === 1)) {
+        end = getDate(maxDate);
+    }
+    return { start, end };
+};
+const getDateOptions = (type, minDate, maxDate, defaultValue) => {
+    const options = [];
+    if (type === DateTypes.Day) {
+        const { start: startDay, end: endDay, } = getDayStartEndDates(defaultValue, minDate, maxDate);
+        eachDayOfInterval({ start: startDay, end: endDay }).forEach((item) => {
+            options.push({
+                name: format(item, 'dd'),
+                value: format(item, 'dd'),
+            });
+        });
+    }
+    if (type === DateTypes.Month) {
+        const { start: startMonth, end: endMonth, } = getMonthStartEndDates(defaultValue, minDate, maxDate);
+        eachMonthOfInterval({ start: startMonth, end: endMonth }).forEach((item) => {
+            options.push({
+                name: format(item, 'MMMM'),
+                value: format(item, 'MM'),
+            });
+        });
+    }
+    if (type === DateTypes.Year) {
+        const { start: startYear, end: endYear, } = getYearStartEndDates(defaultValue, minDate, maxDate);
+        eachYearOfInterval({ start: startYear, end: endYear }).sort(compareDesc).forEach((item) => {
+            options.push({
+                name: format(item, 'yyyy'),
+                value: format(item, 'yyyy'),
+            });
+        });
+    }
+    return options;
+};
+const getYearIntervalOptions = (yearsCount) => getDateOptions(DateTypes.Year, subYearsFromDate(getFormattedDate('', 'yyyy-MM-dd'), yearsCount), getFormattedDate('', 'yyyy-MM-dd'), {});
+const getDifferenceInYears = (dateLeft, dateRight) => differenceInYears(getDate(dateLeft), getDate(dateRight));
+const getDifferenceInMonths = (dateLeft, dateRight) => differenceInMonths(getDate(dateLeft), getDate(dateRight));
+const getDifferenceInHours = (dateLeft, dateRight) => differenceInHours(getDate(dateLeft), getDate(dateRight));
+
+const getNumericOptions = (start, end, suffix) => {
+    const options = [{ value: '', name: '-' }];
+    let i = start;
+    while (i <= end) {
+        options.push({ value: i.toString(), name: `${i}${suffix || ''}` });
+        i += 1;
+    }
+    return options;
+};
+const formatPostalCode = (str = '') => (str && str.replace(/[^a-zA-Z0-9]/g, '').replace(/ /g, '').replace(/-/g, '').replace(/.{3}(?=.)/g, '$& ')
+    .toUpperCase());
+const postalCodeFormat = (postalCode = '') => postalCode && postalCode.replace(/\s/g, '').substr(0, 6);
+const numberWithCommas = (value) => value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+const useEffectOnce = (effect) => {
+    const destroyFunc = useRef();
+    const effectCalled = useRef(false);
+    const renderAfterCalled = useRef(false);
+    const [val, setVal] = useState(0);
+    if (effectCalled.current) {
+        renderAfterCalled.current = true;
+    }
+    useEffect(() => {
+        // only execute the effect first time around
+        if (!effectCalled.current) {
+            destroyFunc.current = effect();
+            effectCalled.current = true;
+        }
+        // this forces one render after the effect is run
+        setVal(() => val + 1);
+        return () => {
+            // if the comp didn't render since the useEffect was called,
+            // we know it's the dummy React cycle
+            if (!renderAfterCalled.current) {
+                return;
+            }
+            if (destroyFunc.current) {
+                destroyFunc.current();
+            }
+        };
+    }, []);
+};
+
+const SelectForm = React.memo((props) => {
+    const { className, size, options, groupOptions, defaultValue, disabled, name, onChange, placeholder, autoSelectIfValueIsOutOfOptions, error, } = props;
+    const currentOptions = [...options];
+    if (groupOptions?.length) {
+        groupOptions.map((item) => currentOptions.push(...item.options));
+    }
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [localValue, setLocalValue,] = useReducer(inputValueReducer, defaultValue);
+    const [localOptions, setLocalOptions,] = useReducer(inputValueReducer, currentOptions);
+    const setLocalSelect = useCallback((selectValue, selectIndex) => {
+        setLocalValue({
+            type: InputValueActionTypes.Set,
+            payload: selectValue,
+        });
+        setSelectedIndex(selectIndex);
+    }, []);
+    const setLocalSelectWithOnChange = useCallback((selectValue, selectIndex, onChangeValue) => {
+        const externalValue = onChangeValue || selectValue;
+        setLocalSelect(selectValue, selectIndex);
+        if (onChange) {
+            onChange({
+                name,
+                value: externalValue,
+            });
+        }
+    }, []);
+    const reRenderSelect = useCallback(() => {
+        const selectOptionsLength = ((currentOptions.length - 1) > 1 ? (currentOptions.length - 1) : 1);
+        const selectedOptionIndex = selectedIndex < 0.5 * (localOptions.length - 1) ? 1 : selectOptionsLength;
+        if (!optionsIsEqual(currentOptions, localOptions)) {
+            setLocalOptions({
+                type: InputValueActionTypes.Set,
+                payload: currentOptions,
+            });
+        }
+        if (isValueInOptions(defaultValue, currentOptions)) {
+            setLocalSelect(defaultValue, getValueIndexInOptions(defaultValue, currentOptions));
+        }
+        else if (autoSelectIfValueIsOutOfOptions) {
+            setLocalSelectWithOnChange((currentOptions[selectedOptionIndex]?.value || ''), selectedOptionIndex);
+        }
+        else {
+            setLocalSelectWithOnChange('', 0, '');
+        }
+    }, [defaultValue, options, groupOptions, selectedIndex]);
+    const handleChange = useCallback((event) => {
+        setLocalSelectWithOnChange(event.currentTarget.value, (event.currentTarget.selectedIndex - 1));
+    }, []);
+    useEffect(() => {
+        if (defaultValue !== localValue || !optionsIsEqual(currentOptions, localOptions)) {
+            reRenderSelect();
+        }
+    }, [defaultValue, options, groupOptions]);
+    useEffectOnce(() => {
+        if (defaultValue && !isValueInOptions(defaultValue, currentOptions)) {
+            reRenderSelect();
+        }
+    });
+    return (jsxs("select", { className: ` ${className} ${size} ${disabled ? 'disabled' : ''} ${error ? 'error' : ''}`, name: name, disabled: disabled || false, onChange: handleChange, value: localValue !== '' ? localValue : '', children: [placeholder && (jsx("option", { className: "disabled", value: "", disabled: true, children: placeholder })), options.map((option, index) => (jsx("option", { value: option.value, disabled: !!option.disabled, children: option.name }, `${name}-${option.value}-${index}`))), groupOptions?.map((item, index) => (jsx("optgroup", { label: item.label, children: item.options.map((option, itemIndex) => (jsx("option", { value: option.value, disabled: !!option.disabled, children: option.name }, `${name}-${option.value}-${itemIndex}`))) }, `${name}-${item.label}-${index}`)))] }));
+}, (prevProps, nextProps) => {
+    const testValue = prevProps.defaultValue === nextProps.defaultValue;
+    const disabled = prevProps.disabled === nextProps.disabled;
+    const error = prevProps.error === nextProps.error;
+    const testOptions = optionsIsEqual(prevProps.options, nextProps.options);
+    return !(!testValue || !testOptions || !disabled || !error);
+});
+SelectForm.defaultProps = {
+    size: SizeTypes.Large,
+    className: '',
+    autoSelectIfValueIsOutOfOptions: true,
+    defaultValue: '',
+    disabled: false,
+    error: false,
+    options: [],
+    groupOptions: [],
+};
+
+const TitleForm = (props) => {
+    const { title, subTitle, className, isActive, } = props;
+    if (title) {
+        return (jsxs("div", { children: [jsxs("h4", { className: className, children: [isActive
+                            && jsx(IconChecked, {}), title] }), subTitle && jsx("p", { className: `${className} label-subtitle`, children: subTitle })] }));
+    }
+    return null;
+};
+TitleForm.defaultProps = {
+    className: '',
+    title: '',
+};
+
+const InputForm = memo((props) => {
+    const { size, className, name, type, defaultValue, onChange, placeholder, disabled, minValue, maxValue, } = props;
+    const [isRender, setIsRender] = useState(false);
+    const [value, setValue,] = useReducer(inputValueReducer, defaultValue);
+    useEffect(() => {
+        if (defaultValue !== value) {
+            setIsRender(false);
+        }
+    }, [defaultValue]);
+    useEffect(() => {
+        setIsRender(true);
+    }, [isRender]);
+    const handleChange = useCallback((event) => {
+        setValue({
+            type: InputValueActionTypes.Set,
+            payload: event.currentTarget.value,
+        });
+        if (onChange) {
+            onChange({
+                name,
+                value: event.currentTarget.value,
+            });
+        }
+    }, []);
+    if (isRender) {
+        return (jsx("input", { className: `${size} ${disabled ? 'disabled' : ''} ${className}`, type: type, name: name, defaultValue: defaultValue, onChange: handleChange, placeholder: placeholder, disabled: disabled, min: minValue, max: maxValue }));
+    }
+    return jsx("div", { className: `${size} ${disabled ? 'disabled' : ''} ${className}` });
+}, (prevProps, nextProps) => {
+    const testDefaultValue = prevProps.defaultValue === nextProps.defaultValue;
+    const minMaxValue = nextProps.defaultValue !== nextProps.minValue
+        || nextProps.defaultValue !== nextProps.maxValue;
+    const testMinValue = prevProps.minValue === nextProps.minValue;
+    const testMaxValue = prevProps.maxValue === nextProps.maxValue;
+    return !(!testDefaultValue || !testMinValue || !testMaxValue || !minMaxValue);
+});
+InputForm.defaultProps = {
+    size: SizeTypes.Large,
+    className: '',
+    type: InputTypes.Text,
+    defaultValue: '',
+    placeholder: '',
+    disabled: false,
+    error: false,
+};
+
+const InputFormPhone = React.memo((props) => {
+    const { size, className, disabled, defaultValue, name, onChange, placeholder, } = props;
+    const [value, setValue,] = useReducer(inputValueReducer, defaultValue);
+    const handleChange = useCallback((phoneNumber) => {
+        setValue({
+            type: InputValueActionTypes.Set,
+            payload: phoneNumber,
+        });
+        if (onChange) {
+            onChange({
+                name,
+                value: phoneNumber,
+            });
+        }
+    }, []);
+    return (jsx(ReactPhoneInput, { buttonClass: "dropdown-button", inputProps: {
+            className: `input-form-phone ${size} ${disabled ? 'disabled' : ''} ${className}`,
+            name,
+            placeholder: placeholder || '(855) 325-8444',
+        }, country: "ca", value: value, onlyCountries: ['ca'], disableDropdown: true, disableCountryCode: true, onChange: handleChange, autoFormat: true }));
+}, (prevProps, nextProps) => prevProps.defaultValue === nextProps.defaultValue);
+InputFormPhone.defaultProps = {
+    size: SizeTypes.Large,
+    type: InputTypes.Text,
+    className: '',
+    defaultValue: '',
+    placeholder: '',
+    disabled: false,
+    error: false,
+};
+
+const returnValue = (str) => (str ? str.replace(/ /g, '').replace(/-/g, '').replace(/.{5}(?=.)/g, '$&-') : '');
+const InputFormLicence = React.memo((props) => {
+    const { className, maxLength, name, onChange, placeholder, defaultValue, disabled, size, } = props;
+    const [inputValue, setInputValue,] = useReducer(inputValueReducer, returnValue(defaultValue));
+    // useEffect(() => {
+    //   props.onChange({ target: { value: inputValue, name: props.name } }, props.rootName);
+    // }, [inputValue]);
+    // const handleChange = (event) => {
+    //   setInputValue(returnValue(event.target.value, props.maxLength));
+    // }
+    const handleChange = (event) => {
+        setInputValue({
+            type: InputValueActionTypes.Set,
+            payload: returnValue(event.target.value),
+        });
+        if (onChange) {
+            onChange({
+                name,
+                value: returnValue(event.target.value),
+            });
+        }
+    };
+    return (jsx("input", { placeholder: placeholder, name: name, className: `${size} ${disabled ? 'disabled' : ''} ${className}`, value: inputValue, maxLength: maxLength, onChange: handleChange, onBlur: handleChange }));
+});
+InputFormLicence.defaultProps = {
+    size: SizeTypes.Large,
+    type: InputTypes.Text,
+    className: '',
+    defaultValue: '',
+    placeholder: '',
+    disabled: false,
+    error: false,
+};
+
+const InputFormEmail = memo((props) => {
+    const [inputValue, setInputValue] = useState();
+    const [isValidate, setIsValidate] = useState(false);
+    const { className, disabled, defaultValue, name, onChange, placeholder, validationStatus, error, } = props;
+    useEffect(() => {
+        const data = setTimeout(() => {
+            if (onChange && isValidate) {
+                onChange({
+                    name,
+                    value: inputValue,
+                });
+            }
+        }, 1000);
+        return () => clearTimeout(data);
+    }, [inputValue, isValidate]);
+    const loadingIcon = (validationStatus === ValidationStatusTypes.Loading)
+        && jsx(IconLoaderPrimary, { width: "1.25rem", height: "1.25rem", className: "icon-validate loader" });
+    const declinedIcon = (validationStatus === ValidationStatusTypes.Declined)
+        && jsx(IconDecline, { width: "1rem", height: "1rem", className: "icon-validate" });
+    const approvedIcon = (validationStatus === ValidationStatusTypes.Approved)
+        && jsx(IconSuccess, { className: "icon-validate" });
+    return (jsxs("div", { className: "input-form-email", children: [jsx("input", { className: `input-form ${className} ${error ? 'error' : ''} ${SizeTypes.Large}`, type: InputTypes.Email, placeholder: placeholder, defaultValue: defaultValue, name: name, onChange: (event) => {
+                    if (!isValidate) {
+                        setIsValidate(true);
+                    }
+                    setInputValue(event.target.value);
+                }, disabled: disabled }), loadingIcon || declinedIcon || approvedIcon] }));
+}, (prevProps, nextProps) => {
+    const testValue = prevProps.defaultValue === nextProps.defaultValue;
+    const testStatus = prevProps.validationStatus === nextProps.validationStatus;
+    return !(!testValue || !testStatus);
+});
+InputFormEmail.defaultProps = {
+    className: '',
+    defaultValue: '',
+    placeholder: '',
+    disabled: false,
+    error: false,
+    validationStatus: ValidationStatusTypes.Initial,
+};
+
+const CheckboxForm = memo((props) => {
+    const { label, className, name, defaultValue, onChange, disabled, } = props;
+    const handleChange = useCallback((event) => {
+        if (onChange) {
+            onChange({
+                name,
+                value: event.target.checked,
+            });
+        }
+    }, []);
+    return (jsxs("label", { className: "checkbox-form", children: [jsx("input", { className: ` ${disabled ? 'disabled' : ''} ${className}`, type: "checkbox", name: name, checked: defaultValue, onChange: handleChange, disabled: disabled }), jsx("span", { className: "checkmark" }), jsx("p", { children: label })] }));
+}, (prevProps, nextProps) => prevProps.defaultValue === nextProps.defaultValue);
+CheckboxForm.defaultProps = {
+    className: '',
+    defaultValue: false,
+    disabled: false,
+};
+
+const Step = ({ item, index, className, itemsCount, isMobile, }) => (jsxs("li", { className: `navigation-step ${className}`, value: index, children: [item?.icon, jsxs("div", { className: "step-label", children: [jsx("span", { className: "step-name", children: isMobile ? `${item?.name} / ${itemsCount}` : item?.name }), jsx("span", { className: "step-title", children: item?.title })] }), !isMobile && jsx("span", { className: `navigation-dot ${className}` })] }));
+Step.defaultProps = {
+    className: '',
+    isMobile: false,
+};
+
+const SdkTooltip = ({ description }) => (jsx(ReactTooltip, { placement: "left", overlay: jsx("span", { className: "tooltip-text", children: description }), overlayClassName: "tooltip-container", defaultVisible: false, children: jsx("div", { children: jsx(IconTooltip, { className: "tooltip-icon" }) }) }));
+
+const TooltipForm = ({ id, description }) => (jsx(SdkTooltip, { id: id, description: description }));
+
+const HeaderNavGroup = ({ className, navItems, isExternal = false, }) => (jsx(Fragment, { children: navItems.map((navItem, index) => {
+        const isLogin = navItem.name?.toUpperCase() === 'LOGIN';
+        const isLogout = navItem.name?.toUpperCase() === 'LOGOUT';
+        const isSignup = navItem.name?.toUpperCase() === 'SIGNUP';
+        if (!isExternal) {
+            return (jsx(NavLink, { className: `${className} ${isLogin ? 'login' : 'nav-link'} ${isSignup ? 'signup' : ''} ${isLogout ? 'logout' : ''}`, to: isExternal ? { pathname: navItem.link } : navItem.link, rel: "noreferrer", children: navItem.name }, `header-nav-${index}`));
+        }
+        return (jsx("a", { className: `${className} ${isLogin ? 'login' : 'nav-link'} ${isSignup ? 'signup' : ''} ${isLogout ? 'logout' : ''}`, href: navItem.link, rel: "noreferrer", children: navItem.name }, `header-nav-${index}`));
+    }) }));
+HeaderNavGroup.defaultProps = {
+    className: '',
+};
+
+const HeaderDropDown = ({ name, navItems }) => {
+    const [menuIsOpen, setMenuIsOpen] = useState(false);
+    const handleDropdownClick = (event) => {
+        switch (event.type) {
+            case 'click':
+                setMenuIsOpen(!menuIsOpen);
+                break;
+            case 'blur':
+                setMenuIsOpen(false);
+                break;
+        }
+    };
+    return (jsxs(Fragment, { children: [jsxs("button", { className: "dropdown", onBlur: handleDropdownClick, onClick: handleDropdownClick, children: [jsx("h6", { children: name }), jsx(IconDropdownArrow, { className: menuIsOpen ? 'rotated' : '' })] }), menuIsOpen && (jsx("div", { className: "user-menu", children: navItems.map((navItem) => {
+                    const isLogout = navItem.name?.toUpperCase() === 'LOGOUT';
+                    return (jsx("a", { className: `${isLogout ? 'logout' : ''}`, href: navItem.link, target: "_blank", rel: "noreferrer", children: navItem.name }));
+                }) }))] }));
+};
+
+const OfferPrice = ({ companyLogo, price, className }) => (jsxs("div", { className: "offer-price", children: [jsx("img", { src: companyLogo, alt: "company logo" }), jsxs("div", { className: `price-container ${className}`, children: [jsxs("h1", { children: ["$", price?.monthly, jsx("span", { children: "/ month" })] }), jsxs("h2", { children: ["$", price?.yearly, jsx("span", { children: "/ year" })] })] })] }));
+OfferPrice.defaultProps = {
+    companyLogo: '',
+    price: { monthly: 0, yearly: 0 },
+};
+
+const OfferHeader = ({ companyName, isBestOffer, className }) => (jsxs("div", { className: "offer-header", children: [jsx("h3", { className: className, children: companyName }), isBestOffer && jsx("span", { className: "best-offer", children: "Best Offer" })] }));
+OfferHeader.defaultProps = {
+    companyName: '',
+    isBestOffer: false,
+    className: '',
+};
+
+const OfferDetailTitle = ({ name, companyType, className, }) => {
+    let title;
+    switch (companyType) {
+        case CompanyRoleTypes.Offering:
+            title = `Who is ${name}?`;
+            break;
+        case CompanyRoleTypes.Broker:
+            title = `Brokered by ${name}`;
+            break;
+        default:
+            title = name;
+    }
+    return (jsx("h3", { className: `${className} detail-title`, children: title }));
+};
+OfferDetailTitle.defaultProps = {
+    name: '',
+    companyType: '',
+};
+
+const OfferDetail = ({ logo, name, companyType, description, className, children, }) => (jsxs("div", { className: "offer-detail", children: [logo && jsx("img", { src: logo, alt: "company logo" }), jsx(OfferDetailTitle, { className: className, name: name, companyType: companyType }), description && jsx("p", { children: description }), children] }));
+OfferDetail.defaultProps = {
+    logo: '',
+    name: '',
+    companyType: '',
+    description: '',
+};
+
+const OperationHoursInfo = ({ weekdayHours, saturdayHours, sundayHours, }) => (jsxs("div", { className: "operation-hours", children: [jsxs("h5", { children: ['M - F : ', jsx("span", { children: weekdayHours })] }), jsxs("h5", { children: ['Sa : ', jsx("span", { children: saturdayHours })] }), jsxs("h5", { children: ['Su : ', jsx("span", { children: sundayHours })] })] }));
+OperationHoursInfo.defaultProps = {
+    weekdayHours: 'CLOSED',
+    saturdayHours: 'CLOSED',
+    sundayHours: 'CLOSED',
+};
+
+const QuoteEdit = ({ editClick, title, items, className, }) => (jsxs("div", { className: "quote-edit-container", children: [jsx("h5", { className: className, children: title }), jsx("div", { className: "edit-content", children: items?.map((item, index) => (jsxs("div", { className: "edit-content-item", children: [item.length > 1
+                        ? (jsx("div", { children: item.map((value, valueIndex) => (jsx("div", { className: "edit-value", children: value }, `edit-nested-item-${valueIndex}`))) })) : jsx("span", { className: "edit-value", children: item[0] }), jsx("span", { className: "edit-button", role: "none", onClick: editClick && editClick(index || 0), children: "Edit" })] }, `edit-item-${index}`))) })] }));
+QuoteEdit.defaultProps = {
+    title: '',
+    items: [],
+    className: '',
+};
+
+const InfoMessage = memo(({ text, className, isRemovable, onIconClick, }) => (jsxs("div", { className: `info-message ${className}`, children: [jsx("span", { children: text }), isRemovable
+            && (jsx(IconDelete, { className: "icon-label-delete icon-close", onClick: onIconClick, color: "#FCF4F4", height: "1.125rem", width: "1.125rem" }))] })));
+InfoMessage.defaultProps = {
+    className: '',
+    isRemovable: false,
+};
+
+export { API_APP, API_AUTH, API_FORM_CAR, API_FORM_HOME, API_ROOT, AlignTypes, AppTypes, ApplicantListTypes, ButtonArrow, ButtonBase, ButtonForm, ButtonMenu, ButtonTab, ButtonTabArrow, ButtonTabMobile, ButtonTypes, ButtonVariantTypes, CategoryTypes, CheckboxForm, ColorTypes, ColorVariablesTypes, CompanyRoleTypes, CoverageTypes, DateTypes, DeviceTypeWidthList, DeviceTypes, DirectionTypes, DriverLicenceTypes, DriverListTypes, DriverPriorityTypes, DwellingInfoTypes, GenderTypes, HeaderDropDown, HeaderNavGroup, HomeOwnerTypes, HttpRequestHeaderTypes, IconArrow, IconChecked, IconDecline, IconDelete, IconDropdownArrow, IconLoaderPrimary, IconLoaderSecondary, IconSuccess, IconTabArrow, IconTooltip, InfoMessage, InputForm, InputFormEmail, InputFormLicence, InputFormPhone, InputTypes, InsuranceTypes, MAX_LOCAL_STORAGE_HOURS, ModalTypes, NavigationAddress, NavigationBase, NavigationCar, NavigationDiscount, NavigationPerson, NavigationProperty, NavigationQuotes, OccupationTypes, OfferDetail, OfferDetailTitle, OfferHeader, OfferPrice, OperationHoursInfo, PROFILE_API, QuoteEdit, RequestStatusTypes, RequestTypes, ScreenBPList, ScreenBPTypes, SdkTooltip, SelectForm, SizeTypes, Step, TitleForm, TooltipForm, ValidationStatusTypes, VehicleConditionTypes, VehiclePrimaryUseTypes, addDaysToDate, addMonthsToDate, addYearsToDate, applicantRelationshipOptions, buildingStructureOptions, carCondition, carKeepPlace, carStatus, carUsagePurpose, carWinterTiresCheck, claimTypeOptions, collisionCoverage, compareDates, comprehensiveCoverage, comprehensiveCoverages, constructionTypeOptions, coverageOptions, dailyDriveBusinessDistanceList, deepClone, defaultBrokerPhone, defaultLocalIndex, exteriorFinishOptions, fireHallDistanceOptions, fireHydrantDistanceOptions, firstDriveDistanceList, formatPostalCode, garageTypeOptions, genderOptions, getDateOptions, getDayStartEndDates, getDaysOfMonth, getDifferenceInHours, getDifferenceInMonths, getDifferenceInYears, getEndOfMonth, getEndOfYear, getFormattedDate, getMinDate, getMinDateByYears, getMonthStartEndDates, getNumericOptions, getStartOfMonth, getStartOfYear, getValueIndexInOptions, getValuesFromNumbers, getYearIntervalOptions, getYearStartEndDates, heatingTypeOptions, homeOwnerTypeOptions, insuranceCancellationReasonOptions, insuredYearsOptions, isDateValid, isValueInOptions, liabilityOptions, licenceSuspensionsReasonOptions, maritalStatusOptions, numberWithCommas, occupationOptions, optionsIsEqual, postalCodeFormat, residentsOptions, subDaysFromDate, subMonthsFromDate, subYearsFromDate, trafficTicketsGroupOptions, useEffectOnce, yearMessage, yearlyDriveDistanceList, yesNoOptions, yesNoOptionsTemporary };
+//# sourceMappingURL=index.js.map