@dnanpm/styleguide 1.8.1 → 2.0.1

package/build/cjs/components/DnaLogo/DnaLogo.d.ts

@@ -58,12 +58,7 @@ declare const _default: import("styled-components").StyledComponent<({ type, siz
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -94,22 +89,27 @@ declare const _default: import("styled-components").StyledComponent<({ type, siz
         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;
@@ -125,26 +125,23 @@ declare const _default: import("styled-components").StyledComponent<({ type, siz
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string; /**
-         * There are different types and color options for the DNA Logo, depending on the color of
-         * the background and place where it is used.
-         *
-         * @default 'default'
-         * @param {Type} default Default
-         * @param {Type} white For use on hot pink background
-         * @param {Type} logotype-pink For use in smaller spaces
-         * @param {Type} logotype-white For use in smaller spaces and on pink background
-         * @param {Type} logotype-black For specific uses only (see Brand Styleguide)
-         */
-        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>;
 }, Props, never>;

package/build/cjs/components/Footer/Components/FooterComponents.js

@@ -77,7 +77,8 @@ const CategoryHeader = styled['default'].h4 `
     border-top: 1px solid #cfcfcf;
     transition: border-bottom 0s linear ${props => (props.active ? '0s' : '0.3s')};
     border-bottom: 1px solid ${props => (props.active ? '#cfcfcf' : '#e7e7e7')};
-    font-size: ${props => props.theme.fontSize.defaultFontSize};
+    font-size: ${props => props.theme.fontSize.default};
+    line-height: ${props => props.theme.lineHeight.default};
     color: ${props => props.theme.color.slateGray};
     align-content: center;
     &:hover,
@@ -139,7 +140,7 @@ const SmallText = styled['default'].p `
     margin-top: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 0.2)};
     line-height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2)};
     color: ${props => props.theme.color.slateGray};
-    font-size: ${props => props.theme.fontSize.xsFontSize};
+    font-size: ${props => props.theme.fontSize.xs};
 `;
 const LanguageLinksContainer = styled['default'].div `
     text-align: center;

package/build/cjs/components/Helper/Helper.js

@@ -27,7 +27,8 @@ const HelperIcon = styled['default'].span `
     height: 1rem;
     min-width: 1rem;
     padding: 0 4px;
-    font-size: ${p => p.theme.fontSize.extraSmallFontSize};
+    font-size: ${p => p.theme.fontSize.s};
+    line-height: ${p => p.theme.lineHeight.xs};
 `;
 const Helper = props => (React.createElement(Container, Object.assign({}, props),
     React.createElement(HelperIcon, null, "?")));

package/build/cjs/components/Icon/Icon.d.ts

@@ -44,12 +44,7 @@ declare const _default: import("styled-components").StyledComponent<React.Functi
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -88,22 +83,29 @@ declare const _default: import("styled-components").StyledComponent<React.Functi
         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; /**
+         * Icon color, specified as a hex, or a color name (hotPink, waterBlue)
+         */
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -121,16 +123,23 @@ declare const _default: import("styled-components").StyledComponent<React.Functi
      * Indicates that this component is on right side of other contents and adds an appropriate left margin.
      */
     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<React.ReactText, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, IconProps, never>;

package/build/cjs/components/Icon/Icons.d.ts

@@ -55,10 +55,6 @@ export declare const devices: ({ size, color, ...props }: IconProps) => JSX.Elem
 export declare const diamond: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const digibox: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const digiboxRec: ({ size, color, ...props }: IconProps) => JSX.Element;
-/**
- * @deprecated
- */
-export declare const dna: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const dnaTurvapaketti: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const dnaTv: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const document1: ({ size, color, ...props }: IconProps) => JSX.Element;
@@ -191,6 +187,7 @@ export declare const thriller: ({ size, color, ...props }: IconProps) => JSX.Ele
 export declare const thumbDown: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const thumbUp: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const tickets: ({ size, color, ...props }: IconProps) => JSX.Element;
+export declare const tiktok: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const top10: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const top50: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const trademark: ({ size, color, ...props }: IconProps) => JSX.Element;

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

@@ -134,12 +134,6 @@ const digibox = ({ size, color, ...props }) => (React__default['default'].create
     React__default['default'].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__default['default'].createElement("svg", Object.assign({ viewBox: "0 0 116 40", fill: color, width: size, height: size }, props),
     React__default['default'].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__default['default'].createElement("svg", Object.assign({ viewBox: "-185 277 240 240", fill: color, width: size, height: size }, props),
-    React__default['default'].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__default['default'].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__default['default'].createElement("svg", Object.assign({ viewBox: "0 0 78 102", fill: color, width: size, height: size }, props),
     React__default['default'].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__default['default'].createElement("svg", Object.assign({ viewBox: "0 0 105 72", fill: color, width: size, height: size }, props),
@@ -432,6 +426,8 @@ const thumbUp = ({ size, color, ...props }) => (React__default['default'].create
     React__default['default'].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__default['default'].createElement("svg", Object.assign({ viewBox: "0 0 99 100", fill: color, width: size, height: size }, props),
     React__default['default'].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__default['default'].createElement("svg", Object.assign({ viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: color, width: size, height: size }, props),
+    React__default['default'].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__default['default'].createElement("svg", Object.assign({ viewBox: "0 0 72 73", fill: color, width: size, height: size }, props),
     React__default['default'].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__default['default'].createElement("svg", Object.assign({ viewBox: "0 0 72 73", fill: color, width: size, height: size }, props),
@@ -841,7 +837,6 @@ exports.devices = devices;
 exports.diamond = diamond;
 exports.digibox = digibox;
 exports.digiboxRec = digiboxRec;
-exports.dna = dna;
 exports.dnaTurvapaketti = dnaTurvapaketti;
 exports.dnaTv = dnaTv;
 exports.document1 = document1;
@@ -1064,6 +1059,7 @@ exports.thriller = thriller;
 exports.thumbDown = thumbDown;
 exports.thumbUp = thumbUp;
 exports.tickets = tickets;
+exports.tiktok = tiktok;
 exports.top10 = top10;
 exports.top50 = top50;
 exports.trademark = trademark;

package/build/cjs/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/cjs/components/Input/Input.js

@@ -12,101 +12,101 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Tag = styled['default'].input `
+const FieldContainer = styled['default'].div `
+    color: ${props => (props.disabled ? props.theme.color.gray40 : props.theme.color.text)};
+    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
+
+    ${LabelText.LabelText} {
+        color: ${props => {
+    if (props.status === 'error') {
+        return props.theme.color[props.status];
+    }
+}};
+    }
+`;
+const FieldWrapper = styled['default'].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 => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
+        height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 4)};
+    }
+`;
+const Mandatory = styled['default'].span `
+    color: ${props => props.theme.color.hotPink};
+`;
+const StyledInput = styled['default'].input `
     position: relative;
     display: inline-block;
     vertical-align: middle;
     padding: 0 ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
-    font-size: ${props => props.theme.fontSize.defaultFontSize};
+    font-size: ${props => props.theme.fontSize.default};
     width: 100%;
     height: ${props => styledUtils.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['default'].span `
-    color: ${props => props.theme.color.hotPink};
-`;
-const FieldWrapper = styled['default'].div `
-    position: relative;
-    svg {
-        color: ${props => props.theme.color.gray55};
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        right: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
-        height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 4)};
-    }
-`;
-const FieldContainer = styled['default'].div `
-    color: ${props => props && props.disabled ? props.theme.color.gray40 : props.theme.color.text};
-        margin-bottom: ${props => styledUtils.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.LabelText} {
-        color: ${props => {
-    if (props.status === 'error') {
-        return props.theme.color[props.status];
-    }
-}}
-`;
 const ErrorMessage = styled['default'].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 => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
 const CommentMessage = styled['default'](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__default['default'].useRef(null);
     const [showPassword, setShowPassword] = React__default['default'].useState(false);
     React__default['default'].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) => {
@@ -115,17 +115,16 @@ const Input = ({ id, label, name, required, disabled = false, type, onBlur, onFo
             inputRef.current.focus();
         }
     };
-    const renderField = () => (React__default['default'].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__default['default'].createElement(FieldContainer, { disabled: disabled, status: status },
-        label && (React__default['default'].createElement(LabelText.LabelText, { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-label` },
-            label,
+    return (React__default['default'].createElement(FieldContainer, { className: props.className, disabled: props.disabled, status: status },
+        props.label && (React__default['default'].createElement(LabelText.LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
+            props.label,
             " ",
-            required && React__default['default'].createElement(Mandatory, null, "*"))),
-        React__default['default'].createElement(FieldWrapper, null,
-            renderField(),
-            showPasswordToggle && (React__default['default'].createElement(Icon['default'], { onClick: togglePasswordVisibility, name: showPassword ? 'hlEyeOpen' : 'hlEyeClosed', size: "1.6em" }))),
-        status === 'error' && errorMessage && (React__default['default'].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, errorMessage)),
-        status === 'comment' && commentMessage && (React__default['default'].createElement(CommentMessage, { "data-testid": dataTestId && `${dataTestId}-comment` }, commentMessage))));
+            props.required && React__default['default'].createElement(Mandatory, null, "*"))),
+        React__default['default'].createElement(FieldWrapper, { status: status },
+            React__default['default'].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__default['default'].createElement(Icon['default'], { onClick: togglePasswordVisibility, name: showPassword ? 'hlEyeOpen' : 'hlEyeClosed', size: "1.6em" }))),
+        status === 'error' && props.errorMessage && (React__default['default'].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
+        status === 'comment' && props.commentMessage && (React__default['default'].createElement(CommentMessage, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 };
 
 exports.default = Input;

package/build/cjs/components/Label/Label.js

@@ -15,9 +15,8 @@ const LabelStyle = styled['default'].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]};