@dnanpm/styleguide 1.9.0 → 2.0.0

package/build/es/components/Icon/Icons.js

@@ -126,12 +126,6 @@ const digibox = ({ size, color, ...props }) => (React.createElement("svg", Objec
     React.createElement("path", { d: "M.714 39.5h114.901V0H.715v39.5zM7.257 6.6h101.914V33H7.257V6.6zm88.53 8.8c-2.379 0-4.362 2-4.362 4.4 0 2.5 1.884 4.5 4.363 4.5 2.478 0 4.46-1.9 4.46-4.4v-.1c-.098-2.4-2.081-4.4-4.46-4.4z", fillRule: "evenodd" })));
 const digiboxRec = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "0 0 116 40", fill: color, width: size, height: size }, props),
     React.createElement("path", { d: "M.286 39.5h114.9V0H.287v39.5zm6.444-33h102.112v26.4H6.73V6.5zm88.629 8.7c-2.38 0-4.362 2-4.362 4.4 0 2.4 1.884 4.4 4.263 4.4h.198c2.38 0 4.362-2 4.362-4.4-.099-2.4-2.082-4.3-4.461-4.4zm-69.297 1.4c0-2.4-1.884-4.3-4.263-4.3h-5.651v13.9h3.073V21h1.09l2.479 5.2h3.47l-2.875-5.6c1.685-.6 2.776-2.2 2.677-4zm-5.056 1.8H19.22V15h1.785c1.288 0 1.982.6 1.982 1.7 0 1-.793 1.7-1.784 1.7h-.198zm9.814 2.1h5.155v-2.6H30.82v-2.6h5.552v-3h-8.724v13.9h8.823v-3h-5.75c.1 0 .1-2.7.1-2.7zm14.078 2.9c-2.28 0-4.164-1.8-4.263-4.1-.1-2.3 1.784-4.2 4.065-4.3 1.685-.2 3.172.9 3.568 2.5l2.875-.8c-.495-2-2.28-4.7-6.443-4.7-3.966 0-7.138 3.3-7.04 7.3.1 4 3.272 7.2 7.238 7.1 3.073.2 5.75-1.8 6.543-4.8l-2.974-.8a3.447 3.447 0 0 1-3.57 2.6z", fillRule: "evenodd" })));
-/**
- * @deprecated
- */
-const dna = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "-185 277 240 240", fill: color, width: size, height: size }, props),
-    React.createElement("path", { d: "M-185.2 277v240H55V277h-240.2zm81.6 136.6c0 14.3-11.4 25.7-25.4 25.7h-25.4v-85h25.4c14 0 25.4 11.4 25.4 25.7v33.6zm63.6 25.7h-15.2v-59.6c0-5.8-4.4-10.2-10.2-10.2h-10.5v69.8h-14.9v-85h25.4c14 0 25.4 11.4 25.4 25.4v59.6zm64.6 0H9.4V409h-20.7v30.4h-15.2v-60.1c0-14 11.4-25.4 25.4-25.4h.3c14 0 25.4 11.4 25.4 25.4v60z" }),
-    React.createElement("path", { d: "M-.8 369h-.3c-5.8 0-10.2 4.7-10.2 10.2v15.5H9.4v-15.5c0-5.6-4.7-10.2-10.2-10.2zm-128 .6h-10.8v54.6h10.8c5.6 0 10.2-4.7 10.2-10.2v-34.2c.1-5.9-4.6-10.2-10.2-10.2z" })));
 const dnaTurvapaketti = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "0 0 78 102", fill: color, width: size, height: size }, props),
     React.createElement("path", { d: "M65.9 11.4V0H0v90.2h11.5v11.4h66V11.4H65.9zM11.5 84.5H5.6V5.8h54.5v5.6H11.5v73.1zM45.2 78l-.7.2-.7-.2C26 71 26.5 60.5 26.5 59.4V38.6H29c2.4.1 4.8-.3 7.1-1.1 2.8-1 5.2-2.8 6.8-5.2l.5-.6h2l.5.6c1.8 2.4 4.2 4.2 7 5.2 2.3.8 4.7 1.1 7.1 1.1h2.5v20.8c0 1.1.5 11.6-17.3 18.6z", fillRule: "evenodd" })));
 const dnaTv = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "0 0 105 72", fill: color, width: size, height: size }, props),
@@ -424,6 +418,8 @@ const thumbUp = ({ size, color, ...props }) => (React.createElement("svg", Objec
     React.createElement("path", { d: "M30.642 36.214v48.335H0V36.214h30.642zM5.572 78.978H25.07V41.785H5.57v37.193zm82.5-49.435c7.692 0 13.928 6.236 13.928 13.928 0 1.42-.217 2.833-.645 4.189L90.123 83.279a11.143 11.143 0 0 1-10.626 7.792H63.744l-30.316-9.406V37.877l17.715-16.439a8.357 8.357 0 0 0 2.673-6.126v-4.17C53.816 4.99 58.804 0 64.958 0h.342c6.154 0 11.143 4.989 11.143 11.143v18.4h11.629zM38.999 77.56l25.59 7.94h14.908a5.571 5.571 0 0 0 5.313-3.896l11.232-35.62a8.357 8.357 0 0 0-7.97-10.87h-17.2V11.143A5.571 5.571 0 0 0 65.3 5.57h-.342a5.571 5.571 0 0 0-5.571 5.572v4.17c0 3.874-1.614 7.573-4.454 10.209L38.999 40.307V77.56zm-23.678-5.133a4.178 4.178 0 1 1 0-8.357 4.178 4.178 0 0 1 0 8.357z" })));
 const tickets = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "0 0 99 100", fill: color, width: size, height: size }, props),
     React.createElement("path", { d: "M76.329 5.9L49.005 7.3 46.233 0 0 18.2l29.898 77.4 10.197-4.1 43.56 7.9 14.652-81.7-21.483-4-.495-7.8zm-68.013 16l18.81-7.4 3.564 65L8.316 21.9zm28.71 56.7L33.66 14.7l11.187-.6 3.762-.2-1.188 7-10.395 57.7zM90.882 23L82.17 71.5l-2.277-.4-1.881-.4-1.188 6.5 3.465.6.693.1-.594 3.4-1.287 7.6-.594 3-12.375-2.3L51.678 87l-9.306-1.7.099-1 .198-.8 2.178-12.1 3.069.6 1.089-6.5-2.97-.6 5.841-32.4 2.178-12.2.693-3.8 15.939 2.9 6.534 1.2L90.882 23zM50.688 72.5l5.94 1.1 1.188-6.5-5.94-1.1-1.188 6.5zm9.9-4.8L59.4 74l4.95 1 1.089.1.099-.6.693-4.6.198-1.2-.693-.2-5.148-.8zm7.623 7.9l5.544 1.1h.396l.594-3.1.594-3.2-1.881-.4h-.198l-3.96-.7-1.089 6.3z", fillRule: "evenodd" })));
+const tiktok = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: color, width: size, height: size }, props),
+    React.createElement("path", { d: "M22.4442 5.93598C16.3531 5.35403 16.4695 0 16.4695 0H12.5419V16.9081C12.4429 18.7164 10.9478 20.1319 9.13677 20.1319C7.25334 20.1319 5.72652 18.6051 5.72652 16.7216C5.72652 14.8382 7.25334 13.3114 9.13677 13.3114C9.53425 13.3114 9.92868 13.3809 10.3022 13.5167L10.3408 9.05258C9.92504 8.98209 9.50412 8.94665 9.08246 8.94665C4.92559 8.94665 1.55579 12.3165 1.55579 16.4733C1.55579 20.6302 4.92559 24 9.08246 24C13.0974 24 16.4055 20.8487 16.6003 16.8385V8.03104C16.6003 8.03104 18.7585 9.89331 22.4442 9.97091V5.93598Z" })));
 const top10 = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "0 0 72 73", fill: color, width: size, height: size }, props),
     React.createElement("path", { d: "M.6 72.1h71.112V0H.6v72.1zM7.11 6.6h58.093v59H7.11v-59zm21.402 13.7H15.69v3.2h4.735v12.1h3.353V23.5h4.734v-3.2zM36.205 36c4.34 0 7.89-3.6 7.89-8s-3.55-8-7.89-8-7.89 3.6-7.89 8c-.099 4.3 3.255 7.9 7.496 8h.394zm0-12.7c2.565-.1 4.735 1.8 4.833 4.4.099 2.6-1.775 4.8-4.34 4.9-2.564.1-4.734-1.8-4.832-4.4V28c-.198-2.4 1.578-4.5 3.945-4.7h.394zm15.09-3h-5.818v15.4h3.452v-5.5h2.367c3.057 0 5.227-2 5.227-4.9 0-2.9-2.17-5-5.227-5zm-.394 6.8H48.93v-3.8h1.97c1.085-.1 1.973.6 2.072 1.7.098 1.1-.592 2-1.677 2.1H50.9zM24.863 42.2v2.3h3.353v9.2h3.452V39.6H28.71c-.296 1.4-1.677 2.6-3.847 2.6zm13.71-3c-1.874-.1-3.748.9-4.735 2.5a8.61 8.61 0 0 0-1.183 4.9c-.099 1.8.296 3.5 1.183 5a5.86 5.86 0 0 0 4.735 2.4c1.874.1 3.649-.8 4.734-2.4.986-1.5 1.38-3.3 1.282-5 .099-1.7-.394-3.5-1.282-4.9a5.233 5.233 0 0 0-4.734-2.5zm2.17 10.6c-.395.8-1.283 1.3-2.17 1.3-.888 0-1.677-.5-1.973-1.3-.395-1-.493-2.1-.493-3.1s.098-2 .493-3c.296-.8 1.085-1.4 1.973-1.3.887 0 1.775.5 2.17 1.3.394 1 .493 2 .493 3s-.198 2.1-.494 3.1z", fillRule: "evenodd" })));
 const top50 = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "0 0 72 73", fill: color, width: size, height: size }, props),
@@ -779,4 +775,4 @@ const hlWifi = ({ size, color, ...props }) => (React.createElement("svg", Object
 const hlX = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: color, width: size, height: size }, props),
     React.createElement("path", { d: "M12.85 12l7.38-7.38a.6.6 0 0 0-.85-.85L12 11.15 4.62 3.78a.6.6 0 0 0-.85.85L11.15 12l-7.37 7.38a.6.6 0 1 0 .85.85L12 12.85l7.38 7.38a.6.6 0 0 0 .85-.85z" })));
 
-export { action, airplane, anime, antenna, apartmentBuilding1, apartmentBuilding2, apartmentBuilding3, arrows, backward, balloon, basket, book, briefcase, broadbandHome, broadbandHousing, broadbandMobile, browser, bus, cableTv, calculator, calendar1, calendar2, camera, channelPackageL, channelPackageM, channelPackageMix, channelPackageMix4, channelPackageMix8, channelPackageMixPlus, channelPackageNorra, channelPackageRossija, channelPackageS, channelPackageTurk, check, chevronDown, chevronLeft, chevronRight, chevronUp, clapperboard, clipboard, cloud1, cloud2, cogwheel, comedy, cultFilms, culture, curvedArrowLeft, curvedArrowRight, cycle, desktopComputer, devices, diamond, digibox, digiboxRec, dna, dnaTurvapaketti, dnaTv, document1, document2, document3, documentaries, documents1, documents2, door, download, drama, dvbC, dvbT2, dwr, envelope1, envelope2, epg, error, ethernet, eu, euro, exclamationMark, eyeClosed, eyeOpen, facebook, favorites, finland, finnish, folder1, folder2, folder3, forward, fourG, gameConsole, gift, gift2, globe, google, graduation, graph, hardDrive, hd, hdmiCable, headset1, headset2, hl404, hl4gSim, hl5gSim, hlArrowBack, hlArrowForward, hlArrowSmallLeft, hlArrowSmallRight, hlArrowSmallUnder, hlBattery, hlBell, hlCalendar, hlCalendarSmall, hlCall, hlCameraBack, hlCameraFront, hlCart, hlCartEmpty, hlChat, hlCheck, hlChevronDown, hlChevronLeft, hlChevronRight, hlChevronUp, hlClockSmall, hlCompensation, hlCookie, hlCopy, hlCoupon, hlDisplaySize, hlDocument, hlDownload, hlDownloadSmall, hlEnvelope, hlError, hlEuro, hlExpand, hlExternal, hlEyeClosed, hlEyeOpen, hlFaceId, hlFingerprint, hlGlobe, hlHeadphones, hlHeadset, hlHeart, hlHome, hlImage, hlInfo, hlInstallment, hlIotSim, hlLock, hlMagnifyingGlass, hlMarker, hlMemory, hlMenu, hlMinimize, hlMinus, hlMobileData, hlMobilePayment, hlModem, hlMore, hlOs, hlPackage, hlPaperclip, hlPaytime, hlPen, hlPerson, hlPhone, hlPlus, hlPrepaid, hlProcessor, hlServices, hlSettings, hlShield, hlSim, hlSimSimple, hlSmile, hlSpeechBubble, hlSquaretrade, hlStar, hlStarFilled, hlTrash, hlTv, hlUnlock, hlUpload, hlUploadSmall, hlWarning, hlWifi, hlX, hobbies, hotdog, house, hub, idCard, info, instagram, iot1, iot2, iot3, ip, key, kids, laptop, leaf, linkedin, magnifyingGlass, man1, man2, man3, man4, man5, marker, maximize, megaphone, minimize, minus, modem, molecule, money1, money2, mouse, mp3, music, newspaper, next, paperclip, pause, pdf, pen, person, person2, persons1, persons2, persons3, pg18, phone1, phone2, phonePrepaid, phonePrepaid4g, phoneWifiPrepaid, play, plus, power, previous, projector, radioMast, rec, rec2, remoteControl, romantic, router, rss, scale, shield, simCard1, simCard2, simCard4g, simCard4gWifi, simCardInfinity, simCardInfinity4g, simCardWifi, soda, speaker, speechBubble1, speechBubble2, speechBubble3, sports, star, stop, swedish, tablet, target, terrestialTv, thriller, thumbDown, thumbUp, tickets, top10, top50, trademark, trafficCone, trafficLights, train, tv1, tv2, tvCard, tvWithRecording, tvWithRemote1, tvWithRemote2, tvWithRemote3, tvWithRemote4, twitter, upgrade, upload, usb, usbCable, usbModem, van, videocamera, wall, warning, whatsapp, wifi1, wifi2, wifiAccessPoint, woman1, woman2, woman3, world, wrench1, wrench2, x, youtube };
+export { action, airplane, anime, antenna, apartmentBuilding1, apartmentBuilding2, apartmentBuilding3, arrows, backward, balloon, basket, book, briefcase, broadbandHome, broadbandHousing, broadbandMobile, browser, bus, cableTv, calculator, calendar1, calendar2, camera, channelPackageL, channelPackageM, channelPackageMix, channelPackageMix4, channelPackageMix8, channelPackageMixPlus, channelPackageNorra, channelPackageRossija, channelPackageS, channelPackageTurk, check, chevronDown, chevronLeft, chevronRight, chevronUp, clapperboard, clipboard, cloud1, cloud2, cogwheel, comedy, cultFilms, culture, curvedArrowLeft, curvedArrowRight, cycle, desktopComputer, devices, diamond, digibox, digiboxRec, dnaTurvapaketti, dnaTv, document1, document2, document3, documentaries, documents1, documents2, door, download, drama, dvbC, dvbT2, dwr, envelope1, envelope2, epg, error, ethernet, eu, euro, exclamationMark, eyeClosed, eyeOpen, facebook, favorites, finland, finnish, folder1, folder2, folder3, forward, fourG, gameConsole, gift, gift2, globe, google, graduation, graph, hardDrive, hd, hdmiCable, headset1, headset2, hl404, hl4gSim, hl5gSim, hlArrowBack, hlArrowForward, hlArrowSmallLeft, hlArrowSmallRight, hlArrowSmallUnder, hlBattery, hlBell, hlCalendar, hlCalendarSmall, hlCall, hlCameraBack, hlCameraFront, hlCart, hlCartEmpty, hlChat, hlCheck, hlChevronDown, hlChevronLeft, hlChevronRight, hlChevronUp, hlClockSmall, hlCompensation, hlCookie, hlCopy, hlCoupon, hlDisplaySize, hlDocument, hlDownload, hlDownloadSmall, hlEnvelope, hlError, hlEuro, hlExpand, hlExternal, hlEyeClosed, hlEyeOpen, hlFaceId, hlFingerprint, hlGlobe, hlHeadphones, hlHeadset, hlHeart, hlHome, hlImage, hlInfo, hlInstallment, hlIotSim, hlLock, hlMagnifyingGlass, hlMarker, hlMemory, hlMenu, hlMinimize, hlMinus, hlMobileData, hlMobilePayment, hlModem, hlMore, hlOs, hlPackage, hlPaperclip, hlPaytime, hlPen, hlPerson, hlPhone, hlPlus, hlPrepaid, hlProcessor, hlServices, hlSettings, hlShield, hlSim, hlSimSimple, hlSmile, hlSpeechBubble, hlSquaretrade, hlStar, hlStarFilled, hlTrash, hlTv, hlUnlock, hlUpload, hlUploadSmall, hlWarning, hlWifi, hlX, hobbies, hotdog, house, hub, idCard, info, instagram, iot1, iot2, iot3, ip, key, kids, laptop, leaf, linkedin, magnifyingGlass, man1, man2, man3, man4, man5, marker, maximize, megaphone, minimize, minus, modem, molecule, money1, money2, mouse, mp3, music, newspaper, next, paperclip, pause, pdf, pen, person, person2, persons1, persons2, persons3, pg18, phone1, phone2, phonePrepaid, phonePrepaid4g, phoneWifiPrepaid, play, plus, power, previous, projector, radioMast, rec, rec2, remoteControl, romantic, router, rss, scale, shield, simCard1, simCard2, simCard4g, simCard4gWifi, simCardInfinity, simCardInfinity4g, simCardWifi, soda, speaker, speechBubble1, speechBubble2, speechBubble3, sports, star, stop, swedish, tablet, target, terrestialTv, thriller, thumbDown, thumbUp, tickets, tiktok, top10, top50, trademark, trafficCone, trafficLights, train, tv1, tv2, tvCard, tvWithRecording, tvWithRemote1, tvWithRemote2, tvWithRemote3, tvWithRemote4, twitter, upgrade, upload, usb, usbCable, usbModem, van, videocamera, wall, warning, whatsapp, wifi1, wifi2, wifiAccessPoint, woman1, woman2, woman3, world, wrench1, wrench2, x, youtube };

package/build/es/components/Input/Input.d.ts

@@ -1,34 +1,123 @@
 import React from 'react';
-export interface InputFieldProps {
-    label?: string;
+declare type ComponentStatus = 'none' | 'success' | 'error' | 'comment';
+declare type InputType = 'date' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
     name: string;
+    /**
+     * Type of input element
+     *
+     * @default 'text'
+     * @param {InputType} date Used for entering a date (year, month and day)
+     * @param {InputType} email Used for entering an email address and supported with browser validation
+     * @param {InputType} hidden Input element is not displayed but its value is submitted with form regardless
+     * @param {InputType} month Used for entering a month and year, with no time zone
+     * @param {InputType} number Used for entering a number, it displays arrows and might have browser validation
+     * @param {InputType} password Used for entering value which is obscured for view
+     * @param {InputType} range Used for entering a not number by displaying a range widget
+     * @param {InputType} search Used for entering search strings
+     * @param {InputType} tel Used for entering a telephone number
+     * @param {InputType} text Single-line text field
+     * @param {InputType} time Used for entering a time value with no time zone
+     * @param {InputType} url Used for entering a URL and supported with browser validation
+     * @param {InputType} week Used for entering a week (week-year number and a week number with no time zone)
+     */
+    type?: InputType;
+    /**
+     * Default value of input element
+     */
     value?: string | number;
+    /**
+     * Text of the input element label
+     */
+    label?: string;
+    /**
+     * Text of placeholder for the input value
+     */
+    placeholder?: string;
+    /**
+     * Integer attribute indicating the sequence of keyboard navigation
+     */
+    tabIndex?: number;
+    /**
+     * On input change callback
+     */
+    onChange?: (...args: any[]) => any;
+    /**
+     * On input blur callback
+     */
     onBlur?: (...args: any[]) => any;
+    /**
+     * On input focus callback
+     */
     onFocus?: (...args: any[]) => any;
-    onChange?: (...args: any[]) => any;
+    /**
+     * On input key press callback
+     */
     onKeyPress?: (...args: any[]) => any;
+    /**
+     * On input key down callback
+     */
     onKeyDown?: (...args: any[]) => any;
     /**
-     * @default 'text'
+     * Allows user to change type of input between "password" and "text"
+     * When set to true, value of type property is ignored
+     *
+     * @default false
      */
-    type?: 'date' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+    showPasswordToggle?: boolean;
     /**
-     * @default 'text'
+     * Allows to define space separated string to describe type of autocomplete functionality the input should provide
+     * Use "off" to disable built-in browser autocomplete functionality
+     *
+     * For possible values refer to e.g.: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     */
+    autocomplete?: string;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
      */
-    placeholder?: string;
-    id?: string;
-    required?: boolean;
     disabled?: boolean;
-    showPasswordToggle?: boolean;
-    tabIndex?: number;
     /**
+     * Allows to set input as mandatory
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Depending on the passed status, the styling and additional elements are shown
+     *
      * @default 'none'
+     * @param {ComponentStatus} none No specific styling
+     * @param {ComponentStatus} success Displays #e80c0c color code as bottom line color of input
+     * @param {ComponentStatus} error Displays #ff7800 color code as bottom line color of input and error message underneath the input
+     * @param {ComponentStatus} comment Displays comment message underneath the input
+     */
+    status?: ComponentStatus;
+    /**
+     * Text of the error message when input is in error state
      */
-    status?: string;
     errorMessage?: string;
+    /**
+     * Text of the comment message when input is in comment state
+     */
     commentMessage?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
     'data-testid'?: string;
 }
-declare const Input: React.FunctionComponent<InputFieldProps>;
+declare const Input: React.FunctionComponent<Props>;
 /** @component */
 export default Input;

package/build/es/components/Input/Input.js

@@ -4,101 +4,101 @@ import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
 import { LabelText } from '../LabelText/LabelText.js';
 
-const Tag = styled.input `
+const FieldContainer = styled.div `
+    color: ${props => (props.disabled ? props.theme.color.gray40 : props.theme.color.text)};
+    margin-bottom: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
+
+    ${LabelText} {
+        color: ${props => {
+    if (props.status === 'error') {
+        return props.theme.color[props.status];
+    }
+}};
+    }
+`;
+const FieldWrapper = styled.div `
+    position: relative;
+    border-bottom: 3px solid
+        ${props => props.status === 'success' || props.status === 'error'
+    ? props.theme.color[props.status]
+    : 'transparent'};
+
+    & svg {
+        color: ${props => props.theme.color.gray55};
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        right: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
+        height: ${props => getMultipliedSize(props.theme.base.baseHeight, 4)};
+    }
+`;
+const Mandatory = styled.span `
+    color: ${props => props.theme.color.hotPink};
+`;
+const StyledInput = styled.input `
     position: relative;
     display: inline-block;
     vertical-align: middle;
     padding: 0 ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
-    font-size: ${props => props.theme.fontSize.defaultFontSize};
+    font-size: ${props => props.theme.fontSize.default};
     width: 100%;
     height: ${props => getMultipliedSize(props.theme.base.baseHeight, 4)};
     border: 1px solid ${props => props.theme.color.gray15};
+
     &::-ms-clear,
     &::-ms-reveal {
         display: none;
     }
+
     &:disabled,
     &[disabled] {
         background-color: ${props => props.theme.color.gray5};
         color: ${props => props.theme.color.gray40};
     }
+
     &:focus {
         outline: 0;
         box-shadow: 0 0 5px ${props => props.theme.color.gray25};
     }
+
     &:invalid {
         box-shadow: none;
     }
+
     &:placeholder {
         color: ${props => props.theme.color.gray25};
     }
 `;
-const Mandatory = styled.span `
-    color: ${props => props.theme.color.hotPink};
-`;
-const FieldWrapper = styled.div `
-    position: relative;
-    svg {
-        color: ${props => props.theme.color.gray55};
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        right: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
-        height: ${props => getMultipliedSize(props.theme.base.baseHeight, 4)};
-    }
-`;
-const FieldContainer = styled.div `
-    color: ${props => props && props.disabled ? props.theme.color.gray40 : props.theme.color.text};
-        margin-bottom: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
-
-   ${FieldWrapper} {
-        border-bottom: 3px solid;
-        border-color: ${props => {
-    if (props.status === 'success' || props.status === 'error') {
-        return props.theme.color[props.status];
-    }
-    return 'transparent';
-}};
-    }
-
-    ${LabelText} {
-        color: ${props => {
-    if (props.status === 'error') {
-        return props.theme.color[props.status];
-    }
-}}
-`;
 const ErrorMessage = styled.div `
-    line-height: 1.125rem;
-    font-size: ${props => props.theme.fontSize.smallFontSize};
+    font-size: ${props => props.theme.fontSize.s};
+    line-height: ${props => props.theme.lineHeight.s};
     color: ${props => props.theme.color.error};
     margin-top: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
 const CommentMessage = styled(ErrorMessage) `
     color: ${props => props.theme.color.gray40};
 `;
-const Input = ({ id, label, name, required, disabled = false, type, onBlur, onFocus, onChange, onKeyPress, onKeyDown, status = 'none', value, placeholder, errorMessage, commentMessage, showPasswordToggle = false, 'data-testid': dataTestId, ...props }) => {
-    const inputId = id || name;
+const Input = ({ type = 'text', status = 'none', 'data-testid': dataTestId, ...props }) => {
     const inputRef = React.useRef(null);
     const [showPassword, setShowPassword] = React.useState(false);
     React.useEffect(() => {
-        if (showPasswordToggle && inputRef && inputRef.current) {
+        if (props.showPasswordToggle && inputRef && inputRef.current) {
             inputRef.current.type = showPassword ? 'text' : 'password';
         }
-    }, [showPassword, showPasswordToggle]);
+    }, [showPassword, props.showPasswordToggle]);
     const togglePasswordVisibility = () => {
-        if (showPasswordToggle) {
+        if (props.showPasswordToggle) {
             setShowPassword(!showPassword);
         }
     };
     const handleOnBlur = (e) => {
-        if (onBlur) {
-            onBlur(e.target.value, e);
+        if (props.onBlur) {
+            props.onBlur(e.target.value, e);
         }
     };
     const handleChange = (e) => {
-        if (onChange) {
-            onChange(e.target.value, e);
+        if (props.onChange) {
+            props.onChange(e.target.value, e);
         }
     };
     const onClick = (e) => {
@@ -107,17 +107,16 @@ const Input = ({ id, label, name, required, disabled = false, type, onBlur, onFo
             inputRef.current.focus();
         }
     };
-    const renderField = () => (React.createElement(Tag, Object.assign({ name: name, type: type, id: inputId, value: value, placeholder: placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: onFocus, onClick: onClick, onKeyDown: onKeyDown, onKeyPress: onKeyPress, required: required, disabled: disabled, "aria-disabled": disabled, "aria-label": inputId, ref: inputRef, "data-testid": dataTestId }, props)));
-    return (React.createElement(FieldContainer, { disabled: disabled, status: status },
-        label && (React.createElement(LabelText, { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-label` },
-            label,
+    return (React.createElement(FieldContainer, { className: props.className, disabled: props.disabled, status: status },
+        props.label && (React.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
+            props.label,
             " ",
-            required && React.createElement(Mandatory, null, "*"))),
-        React.createElement(FieldWrapper, null,
-            renderField(),
-            showPasswordToggle && (React.createElement(Icon, { onClick: togglePasswordVisibility, name: showPassword ? 'hlEyeOpen' : 'hlEyeClosed', size: "1.6em" }))),
-        status === 'error' && errorMessage && (React.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, errorMessage)),
-        status === 'comment' && commentMessage && (React.createElement(CommentMessage, { "data-testid": dataTestId && `${dataTestId}-comment` }, commentMessage))));
+            props.required && React.createElement(Mandatory, null, "*"))),
+        React.createElement(FieldWrapper, { status: status },
+            React.createElement(StyledInput, { id: props.id, name: props.name, type: type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": props.id, ref: inputRef, tabIndex: props.tabIndex, "data-testid": dataTestId }),
+            props.showPasswordToggle && (React.createElement(Icon, { onClick: togglePasswordVisibility, name: showPassword ? 'hlEyeOpen' : 'hlEyeClosed', size: "1.6em" }))),
+        status === 'error' && props.errorMessage && (React.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
+        status === 'comment' && props.commentMessage && (React.createElement(CommentMessage, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 };
 
 export default Input;

package/build/es/components/Label/Label.js

@@ -7,9 +7,8 @@ const LabelStyle = styled.span `
     min-width: 4.375rem;
     text-align: center;
     font-weight: ${props => props.theme.fontWeight.bold};
-    font-size: ${props => props.smallerFont
-    ? props.theme.fontSize.xsFontSize
-    : props.theme.fontSize.extraSmallFontSize};
+    font-size: ${props => (props.smallerFont ? props.theme.fontSize.xs : '0.8125rem')};
+    line-height: ${props => props.theme.lineHeight.xxs};
     text-transform: uppercase;
     color: ${props => props && props.color === 'white' ? props.theme.color.black : props.theme.color.white};
     background: ${props => props.theme.color[props.color]};

package/build/es/components/LabelText/LabelText.d.ts

@@ -12,12 +12,7 @@ export declare const LabelText: import("styled-components").StyledComponent<"lab
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -48,22 +43,27 @@ export declare const LabelText: import("styled-components").StyledComponent<"lab
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string; /** @visibleName Label Text */
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -79,16 +79,24 @@ export declare const LabelText: import("styled-components").StyledComponent<"lab
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        default: string;
+        xl: string;
+        s: string;
+        /** @visibleName Label Text */
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, {}, never>;

package/build/es/components/LabelText/LabelText.js

@@ -3,7 +3,7 @@ import { getDividedSize } from '../../utils/styledUtils.js';
 
 /** @visibleName Label Text */
 const LabelText = styled.label(({ theme, htmlFor }) => ({
-    fontSize: theme.fontSize.defaultFontSize,
+    fontSize: theme.fontSize.default,
     display: 'block',
     marginBottom: getDividedSize(theme.base.baseWidth, 2),
     cursor: htmlFor ? 'pointer' : 'default',

package/build/es/components/MainNavigation/ChildComponents/BusinessMenu.js

@@ -27,7 +27,7 @@ const BusinessMenuList = styled.ul `
     margin: ${({ isMobileMenu }) => (isMobileMenu ? '1rem 0' : '0 0.325rem')};
     padding: 0;
     background-color: ${p => p.theme.color.white};
-    font-size: ${p => p.theme.fontSize.smallFontSize};
+    font-size: ${p => p.theme.fontSize.s};
     height: 100%;
 `;
 const BusinessMenu = () => {

package/build/es/components/MainNavigation/ChildComponents/DesktopMenu.js

@@ -87,9 +87,9 @@ const DesktopMenuList = styled(MenuList) `
     }
     a,
     button {
-        font-size: ${theme.fontSize.smallFontSize};
+        font-size: ${theme.fontSize.s};
         ${() => media.xl `
-            font-size: ${theme.fontSize.defaultFontSize};
+            font-size: ${theme.fontSize.default};
         `};
     }
     margin-top: -2px;
@@ -109,6 +109,7 @@ const DesktopMenuItem = styled(MenuItem) `
     }
     > a,
     > button {
+        width: auto;
         display: flex;
         line-height: 1rem;
         padding: 0.75rem 0;
@@ -127,6 +128,10 @@ const DesktopMenuItem = styled(MenuItem) `
             border-bottom: 1px solid
                 ${p => (p && p.isActive ? p.theme.color.hotPink : 'transparent')};
         }
+        &:hover,
+        &:focus {
+            border-bottom: 3px solid ${p => p.theme.color.white};
+        }
     }
     &:hover,
     &:focus {
@@ -224,7 +229,7 @@ const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
         React.createElement(SubMenuLevel1, { menuItem: menuItem })));
 };
 const DesktopMenu = () => {
-    const { items: data, resetMenuEvents, menuLevel } = useContext(NavContext);
+    const { items: data, lang: language, resetMenuEvents, menuLevel, currentUrl } = useContext(NavContext);
     const mainNavigation = data.mainNavigation && data.mainNavigation.pages ? data.mainNavigation.pages : [];
     const ref = useRef(null);
     useOutsideClick(ref, () => {
@@ -240,7 +245,8 @@ const DesktopMenu = () => {
         if (menuHasChildren) {
             return (React.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
         }
-        return (React.createElement(MenuItem, { key: navElement.id, role: "none", "data-testid": `desktop-nav-item-level-1-link-${index + 1}` },
+        return (React.createElement(DesktopMenuItem, { key: navElement.id, role: "none", "data-testid": `desktop-nav-item-level-1-link-${index + 1}`, isActive: menuLevel.level1 === navElement.id ||
+                isSelected(currentUrl, navElement.urls[language]) },
             React.createElement(LinkModifier, { menuItem: navElement, tabIndex: false })));
     })));
 };

package/build/es/components/MainNavigation/ChildComponents/HeaderNavigationElements.d.ts

@@ -12,12 +12,7 @@ export declare const IconContainer: import("styled-components").StyledComponent<
     };
     breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -48,22 +43,27 @@ export declare const IconContainer: import("styled-components").StyledComponent<
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -79,16 +79,23 @@ export declare const IconContainer: import("styled-components").StyledComponent<
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, {

package/build/es/components/MainNavigation/ChildComponents/LanguageSelector.js

@@ -8,7 +8,7 @@ import { MenuLink } from '../globalNavStyles.js';
 
 const TooltipWrapper = styled.div `
     font-weight: ${p => p.theme.fontWeight.bold};
-    font-size: ${p => p.theme.fontSize.h4FontSize};
+    font-size: ${p => p.theme.fontSize.l};
     margin: 0 ${p => getMultipliedSize(p.theme.base.baseHeight, 1)};
     display: flex;
     flex-direction: column;
@@ -39,7 +39,7 @@ const TooltipWrapper = styled.div `
     }
     ${MenuLink} {
         font-weight: ${p => p.theme.fontWeight.bold};
-        font-size: ${p => p.theme.fontSize.defaultFontSize};
+        font-size: ${p => p.theme.fontSize.default};
         margin: 0rem 1.5rem;
         padding: 0.5rem 0;
         width: 1.5rem;