@dnanpm/styleguide 2.3.0 → 3.0.0

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

@@ -2,6 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var hlArrowBackSmall = require('./Small/hlArrowBackSmall.js');
+var hlArrowForwardSmall = require('./Small/hlArrowForwardSmall.js');
+var hlArrowUnderSmall = require('./Small/hlArrowUnderSmall.js');
+var hlCalendarSmall = require('./Small/hlCalendarSmall.js');
+var hlChevronDownSmall = require('./Small/hlChevronDownSmall.js');
+var hlChevronLeftSmall = require('./Small/hlChevronLeftSmall.js');
+var hlChevronRightSmall = require('./Small/hlChevronRightSmall.js');
+var hlChevronUpSmall = require('./Small/hlChevronUpSmall.js');
+var hlClockSmall = require('./Small/hlClockSmall.js');
+var hlDownloadSmall = require('./Small/hlDownloadSmall.js');
+var hlExternalSmall = require('./Small/hlExternalSmall.js');
+var hlUploadSmall = require('./Small/hlUploadSmall.js');
+var facebook = require('./Social/facebook.js');
+var instagram = require('./Social/instagram.js');
+var linkedin = require('./Social/linkedin.js');
+var tiktok = require('./Social/tiktok.js');
+var twitter = require('./Social/twitter.js');
+var youtube = require('./Social/youtube.js');
 var hl404 = require('./hl404.js');
 var hl4gSim = require('./hl4gSim.js');
 var hl5gSim = require('./hl5gSim.js');
@@ -85,132 +103,112 @@ var hlUnlock = require('./hlUnlock.js');
 var hlUpload = require('./hlUpload.js');
 var hlWarning = require('./hlWarning.js');
 var hlWifi = require('./hlWifi.js');
+var hlWrench = require('./hlWrench.js');
 var hlX = require('./hlX.js');
-var hlArrowBackSmall = require('./Small/hlArrowBackSmall.js');
-var hlArrowForwardSmall = require('./Small/hlArrowForwardSmall.js');
-var hlArrowUnderSmall = require('./Small/hlArrowUnderSmall.js');
-var hlCalendarSmall = require('./Small/hlCalendarSmall.js');
-var hlChevronDownSmall = require('./Small/hlChevronDownSmall.js');
-var hlChevronLeftSmall = require('./Small/hlChevronLeftSmall.js');
-var hlChevronRightSmall = require('./Small/hlChevronRightSmall.js');
-var hlChevronUpSmall = require('./Small/hlChevronUpSmall.js');
-var hlClockSmall = require('./Small/hlClockSmall.js');
-var hlDownloadSmall = require('./Small/hlDownloadSmall.js');
-var hlExternalSmall = require('./Small/hlExternalSmall.js');
-var hlUploadSmall = require('./Small/hlUploadSmall.js');
-var facebook = require('./Social/facebook.js');
-var instagram = require('./Social/instagram.js');
-var linkedin = require('./Social/linkedin.js');
-var tiktok = require('./Social/tiktok.js');
-var twitter = require('./Social/twitter.js');
-var youtube = require('./Social/youtube.js');
 
 
 
-exports.hl404 = hl404['default'];
-exports.hl4gSim = hl4gSim['default'];
-exports.hl5gSim = hl5gSim['default'];
-exports.hlBattery = hlBattery['default'];
-exports.hlBell = hlBell['default'];
-exports.hlCalendar = hlCalendar['default'];
-exports.hlCall = hlCall['default'];
-exports.hlCameraBack = hlCameraBack['default'];
-exports.hlCameraFront = hlCameraFront['default'];
-exports.hlCart = hlCart['default'];
-exports.hlCartEmpty = hlCartEmpty['default'];
-exports.hlChat = hlChat['default'];
-exports.hlCheck = hlCheck['default'];
-exports.hlChevronDown = hlChevronDown['default'];
-exports.hlChevronLeft = hlChevronLeft['default'];
-exports.hlChevronRight = hlChevronRight['default'];
-exports.hlChevronUp = hlChevronUp['default'];
-exports.hlCompensation = hlCompensation['default'];
-exports.hlCookie = hlCookie['default'];
-exports.hlCopy = hlCopy['default'];
-exports.hlCoupon = hlCoupon['default'];
-exports.hlDelivery = hlDelivery['default'];
-exports.hlDigiturva = hlDigiturva['default'];
-exports.hlDisplaySize = hlDisplaySize['default'];
-exports.hlDocument = hlDocument['default'];
-exports.hlDownload = hlDownload['default'];
-exports.hlEnvelope = hlEnvelope['default'];
-exports.hlError = hlError['default'];
-exports.hlEuro = hlEuro['default'];
-exports.hlExclamationMark = hlExclamationMark['default'];
-exports.hlExpand = hlExpand['default'];
-exports.hlExternal = hlExternal['default'];
-exports.hlEyeClosed = hlEyeClosed['default'];
-exports.hlEyeOpen = hlEyeOpen['default'];
-exports.hlFaceId = hlFaceId['default'];
-exports.hlFastDelivery = hlFastDelivery['default'];
-exports.hlFingerprint = hlFingerprint['default'];
-exports.hlGlobe = hlGlobe['default'];
-exports.hlHeadphones = hlHeadphones['default'];
-exports.hlHeadset = hlHeadset['default'];
-exports.hlHeart = hlHeart['default'];
-exports.hlHome = hlHome['default'];
-exports.hlImage = hlImage['default'];
-exports.hlInfo = hlInfo['default'];
-exports.hlInstallment = hlInstallment['default'];
-exports.hlIotSim = hlIotSim['default'];
-exports.hlLock = hlLock['default'];
-exports.hlMagnifyingGlass = hlMagnifyingGlass['default'];
-exports.hlMarker = hlMarker['default'];
-exports.hlMemory = hlMemory['default'];
-exports.hlMenu = hlMenu['default'];
-exports.hlMinimize = hlMinimize['default'];
-exports.hlMinus = hlMinus['default'];
-exports.hlMobileData = hlMobileData['default'];
-exports.hlMobilePayment = hlMobilePayment['default'];
-exports.hlModem = hlModem['default'];
-exports.hlMore = hlMore['default'];
-exports.hlOs = hlOs['default'];
-exports.hlPackage = hlPackage['default'];
-exports.hlPaperclip = hlPaperclip['default'];
-exports.hlPaytime = hlPaytime['default'];
-exports.hlPen = hlPen['default'];
-exports.hlPerson = hlPerson['default'];
-exports.hlPhone = hlPhone['default'];
-exports.hlPlus = hlPlus['default'];
-exports.hlPrepaid = hlPrepaid['default'];
-exports.hlProcessor = hlProcessor['default'];
-exports.hlServices = hlServices['default'];
-exports.hlSettings = hlSettings['default'];
-exports.hlShield = hlShield['default'];
-exports.hlSim = hlSim['default'];
-exports.hlSimSimple = hlSimSimple['default'];
-exports.hlSmile = hlSmile['default'];
-exports.hlSpeechBubble = hlSpeechBubble['default'];
-exports.hlSquaretrade = hlSquaretrade['default'];
-exports.hlStar = hlStar['default'];
-exports.hlStarFilled = hlStarFilled['default'];
-exports.hlTrash = hlTrash['default'];
-exports.hlTv = hlTv['default'];
-exports.hlUnlock = hlUnlock['default'];
-exports.hlUpload = hlUpload['default'];
-exports.hlWarning = hlWarning['default'];
-exports.hlWifi = hlWifi['default'];
-exports.hlX = hlX['default'];
-exports.hlArrowBack = hlArrowBackSmall.hlArrowBack;
-exports.hlArrowBackSmall = hlArrowBackSmall['default'];
-exports.hlArrowSmallLeft = hlArrowBackSmall.hlArrowSmallLeft;
-exports.hlArrowForward = hlArrowForwardSmall.hlArrowForward;
-exports.hlArrowForwardSmall = hlArrowForwardSmall['default'];
-exports.hlArrowSmallRight = hlArrowForwardSmall.hlArrowSmallRight;
-exports.hlArrowSmallUnder = hlArrowUnderSmall.hlArrowSmallUnder;
-exports.hlArrowUnderSmall = hlArrowUnderSmall['default'];
-exports.hlCalendarSmall = hlCalendarSmall['default'];
-exports.hlChevronDownSmall = hlChevronDownSmall['default'];
-exports.hlChevronLeftSmall = hlChevronLeftSmall['default'];
-exports.hlChevronRightSmall = hlChevronRightSmall['default'];
-exports.hlChevronUpSmall = hlChevronUpSmall['default'];
-exports.hlClockSmall = hlClockSmall['default'];
-exports.hlDownloadSmall = hlDownloadSmall['default'];
-exports.hlExternalSmall = hlExternalSmall['default'];
-exports.hlUploadSmall = hlUploadSmall['default'];
-exports.facebook = facebook['default'];
-exports.instagram = instagram['default'];
-exports.linkedin = linkedin['default'];
-exports.tiktok = tiktok['default'];
-exports.twitter = twitter['default'];
-exports.youtube = youtube['default'];
+exports.hlArrowBackSmall = hlArrowBackSmall["default"];
+exports.hlArrowForwardSmall = hlArrowForwardSmall["default"];
+exports.hlArrowUnderSmall = hlArrowUnderSmall["default"];
+exports.hlCalendarSmall = hlCalendarSmall["default"];
+exports.hlChevronDownSmall = hlChevronDownSmall["default"];
+exports.hlChevronLeftSmall = hlChevronLeftSmall["default"];
+exports.hlChevronRightSmall = hlChevronRightSmall["default"];
+exports.hlChevronUpSmall = hlChevronUpSmall["default"];
+exports.hlClockSmall = hlClockSmall["default"];
+exports.hlDownloadSmall = hlDownloadSmall["default"];
+exports.hlExternalSmall = hlExternalSmall["default"];
+exports.hlUploadSmall = hlUploadSmall["default"];
+exports.facebook = facebook["default"];
+exports.instagram = instagram["default"];
+exports.linkedin = linkedin["default"];
+exports.tiktok = tiktok["default"];
+exports.twitter = twitter["default"];
+exports.youtube = youtube["default"];
+exports.hl404 = hl404["default"];
+exports.hl4gSim = hl4gSim["default"];
+exports.hl5gSim = hl5gSim["default"];
+exports.hlBattery = hlBattery["default"];
+exports.hlBell = hlBell["default"];
+exports.hlCalendar = hlCalendar["default"];
+exports.hlCall = hlCall["default"];
+exports.hlCameraBack = hlCameraBack["default"];
+exports.hlCameraFront = hlCameraFront["default"];
+exports.hlCart = hlCart["default"];
+exports.hlCartEmpty = hlCartEmpty["default"];
+exports.hlChat = hlChat["default"];
+exports.hlCheck = hlCheck["default"];
+exports.hlSuccess = hlCheck.hlSuccess;
+exports.hlChevronDown = hlChevronDown["default"];
+exports.hlChevronLeft = hlChevronLeft["default"];
+exports.hlChevronRight = hlChevronRight["default"];
+exports.hlChevronUp = hlChevronUp["default"];
+exports.hlCompensation = hlCompensation["default"];
+exports.hlCookie = hlCookie["default"];
+exports.hlCopy = hlCopy["default"];
+exports.hlCoupon = hlCoupon["default"];
+exports.hlDelivery = hlDelivery["default"];
+exports.hlDigiturva = hlDigiturva["default"];
+exports.hlDisplaySize = hlDisplaySize["default"];
+exports.hlDocument = hlDocument["default"];
+exports.hlDownload = hlDownload["default"];
+exports.hlEnvelope = hlEnvelope["default"];
+exports.hlError = hlError["default"];
+exports.hlEuro = hlEuro["default"];
+exports.hlExclamationMark = hlExclamationMark["default"];
+exports.hlExpand = hlExpand["default"];
+exports.hlExternal = hlExternal["default"];
+exports.hlEyeClosed = hlEyeClosed["default"];
+exports.hlEyeOpen = hlEyeOpen["default"];
+exports.hlFaceId = hlFaceId["default"];
+exports.hlFastDelivery = hlFastDelivery["default"];
+exports.hlFingerprint = hlFingerprint["default"];
+exports.hlGlobe = hlGlobe["default"];
+exports.hlHeadphones = hlHeadphones["default"];
+exports.hlHeadset = hlHeadset["default"];
+exports.hlHeart = hlHeart["default"];
+exports.hlHome = hlHome["default"];
+exports.hlImage = hlImage["default"];
+exports.hlInfo = hlInfo["default"];
+exports.hlInstallment = hlInstallment["default"];
+exports.hlIotSim = hlIotSim["default"];
+exports.hlLock = hlLock["default"];
+exports.hlMagnifyingGlass = hlMagnifyingGlass["default"];
+exports.hlMarker = hlMarker["default"];
+exports.hlMemory = hlMemory["default"];
+exports.hlMenu = hlMenu["default"];
+exports.hlMinimize = hlMinimize["default"];
+exports.hlMinus = hlMinus["default"];
+exports.hlMobileData = hlMobileData["default"];
+exports.hlMobilePayment = hlMobilePayment["default"];
+exports.hlModem = hlModem["default"];
+exports.hlMore = hlMore["default"];
+exports.hlOs = hlOs["default"];
+exports.hlPackage = hlPackage["default"];
+exports.hlPaperclip = hlPaperclip["default"];
+exports.hlPaytime = hlPaytime["default"];
+exports.hlPen = hlPen["default"];
+exports.hlPerson = hlPerson["default"];
+exports.hlPhone = hlPhone["default"];
+exports.hlPlus = hlPlus["default"];
+exports.hlPrepaid = hlPrepaid["default"];
+exports.hlProcessor = hlProcessor["default"];
+exports.hlServices = hlServices["default"];
+exports.hlSettings = hlSettings["default"];
+exports.hlShield = hlShield["default"];
+exports.hlSim = hlSim["default"];
+exports.hlSimSimple = hlSimSimple["default"];
+exports.hlSmile = hlSmile["default"];
+exports.hlSpeechBubble = hlSpeechBubble["default"];
+exports.hlSquaretrade = hlSquaretrade["default"];
+exports.hlStar = hlStar["default"];
+exports.hlStarFilled = hlStarFilled["default"];
+exports.hlTrash = hlTrash["default"];
+exports.hlTv = hlTv["default"];
+exports.hlUnlock = hlUnlock["default"];
+exports.hlUpload = hlUpload["default"];
+exports.hlWarning = hlWarning["default"];
+exports.hlWifi = hlWifi["default"];
+exports.hlWrench = hlWrench["default"];
+exports.hlX = hlX["default"];

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type ComponentStatus = 'none' | 'success' | 'error' | 'comment';
+declare type InputStatus = 'none' | 'success' | 'error' | 'comment';
 declare type InputType = 'date' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 interface Props {
     /**
@@ -34,7 +34,7 @@ interface Props {
      */
     value?: string | number;
     /**
-     * Text of the input element label
+     * Text to be passed down to `LabelText` component. Acts as the input element label
      */
     label?: string;
     /**
@@ -92,15 +92,14 @@ interface Props {
      */
     required?: boolean;
     /**
-     * Depending on the passed status, the styling and additional elements are shown
+     * Depending on the passed status, the styling changes and additional elements are shown
      *
-     * @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
-     * @default 'none'
+     * @param {InputStatus} none Default styling
+     * @param {InputStatus} success Displays `success` icon with `theme.color.notification.success` color in the input element
+     * @param {InputStatus} error Displays `error` icon with `theme.color.notification.error` color in the input element and error message underneath the input
+     * @param {InputStatus} comment Displays comment message underneath the input
      */
-    status?: ComponentStatus;
+    status?: InputStatus;
     /**
      * Text of the error message when input is in error state
      */
@@ -118,6 +117,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Input: React.FunctionComponent<Props>;
+declare const Input: ({ type, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 /** @component */
 export default Input;

package/build/cjs/components/Input/Input.js

@@ -5,55 +5,66 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+var hlCheck = require('../Icons/hlCheck.js');
+var hlError = require('../Icons/hlError.js');
 var hlEyeClosed = require('../Icons/hlEyeClosed.js');
 var hlEyeOpen = require('../Icons/hlEyeOpen.js');
+var hlLock = require('../Icons/hlLock.js');
 var LabelText = require('../LabelText/LabelText.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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)};
-
-    ${p => p.status === 'error' &&
-    `
-            ${LabelText['default']} {
-                color: ${p.theme.color[p.status]};
-            }
-        `}
+const iconsMap = {
+    success: hlCheck.hlSuccess,
+    error: hlError["default"],
+};
+const FieldContainer = styled["default"].div `
+    color: ${theme["default"].color.text.black};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
 `;
-const FieldWrapper = styled['default'].div `
+const FieldWrapper = styled["default"].div `
     position: relative;
-    border-bottom: 3px solid
-        ${props => props.status === 'success' || props.status === 'error'
-    ? props.theme.color[props.status]
-    : 'transparent'};
+`;
+const IconWrapper = styled["default"].div `
+    position: absolute;
+    z-index: 1;
+    top: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 1.25)};
+    right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+
+    & span.dnasg-icon {
+        margin-left: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 2)};
 
-    & 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)};
+        &:first-of-type {
+            margin-left: 0;
+        }
     }
 `;
-const Mandatory = styled['default'].span `
-    color: ${props => props.theme.color.hotPink};
-`;
-const StyledInput = styled['default'].input `
+const StyledInput = styled["default"].input `
     position: relative;
     display: inline-block;
+    appearance: none;
     vertical-align: middle;
-    padding: 0 ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
-    font-size: ${props => props.theme.fontSize.default};
+    font-family: ${theme["default"].fontFamily.default};
+    font-size: ${theme["default"].fontSize.default};
+    padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
     width: 100%;
-    height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 4)};
-    border: 1px solid ${props => props.theme.color.gray15};
+    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
+    border-radius: ${theme["default"].radius.s};
+    border: 1px solid ${theme["default"].color.line.L01};
+
+    ${({ status }) => status === 'error' &&
+    `
+        border-bottom: 4px solid ${theme["default"].color.notification.error};
+    `}
+
+    &[type='range'] {
+        appearance: auto;
+    }
 
     &::-ms-clear,
     &::-ms-reveal {
@@ -62,43 +73,45 @@ const StyledInput = styled['default'].input `
 
     &: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};
+        background-color: ${theme["default"].color.background.sand.E01};
     }
 
     &:invalid {
         box-shadow: none;
     }
 
-    &:placeholder {
-        color: ${props => props.theme.color.gray25};
+    &:focus {
+        border: 2px solid ${theme["default"].color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
+        outline: none;
+    }
+
+    &::placeholder {
+        color: ${theme["default"].color.text.black}${theme["default"].color.transparency.T40};
     }
 `;
-const ErrorMessage = styled['default'].div `
-    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 Message = styled["default"].div `
+    font-size: ${theme["default"].fontSize.s};
+    font-weight: ${theme["default"].fontWeight.book};
+    line-height: ${theme["default"].lineHeight.s};
+    color: ${theme["default"].color.text.gray};
+    margin-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
 `;
-const CommentMessage = styled['default'](ErrorMessage) `
-    color: ${props => props.theme.color.gray40};
+const ErrorMessage = styled["default"](Message) `
+    font-weight: ${theme["default"].fontWeight.medium};
+    color: ${theme["default"].color.notification.error};
 `;
 const Input = (_a) => {
-    var { type = 'text', status = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", "status", 'data-testid']);
-    const inputRef = React__default['default'].useRef(null);
-    const [showPassword, setShowPassword] = React__default['default'].useState(false);
-    React__default['default'].useEffect(() => {
+    var { type = 'text', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
+    const inputRef = React.useRef(null);
+    const [showPassword, setShowPassword] = React.useState(false);
+    React.useEffect(() => {
         if (props.showPasswordToggle && inputRef && inputRef.current) {
             inputRef.current.type = showPassword ? 'text' : 'password';
         }
     }, [showPassword, props.showPasswordToggle]);
     const togglePasswordVisibility = () => {
-        if (props.showPasswordToggle) {
+        if (props.showPasswordToggle && !props.disabled) {
             setShowPassword(!showPassword);
         }
     };
@@ -118,16 +131,16 @@ const Input = (_a) => {
             inputRef.current.focus();
         }
     };
-    return (React__default['default'].createElement(FieldContainer, { className: props.className, disabled: props.disabled, status: status },
-        props.label && (React__default['default'].createElement(LabelText['default'], { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
-            props.label,
-            " ",
-            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, icon: showPassword ? hlEyeOpen['default'] : hlEyeClosed['default'] }))),
-        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))));
+    return (React__default["default"].createElement(FieldContainer, { className: props.className },
+        props.label && (React__default["default"].createElement(LabelText["default"], { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
+        React__default["default"].createElement(FieldWrapper, null,
+            React__default["default"].createElement(StyledInput, { status: props.status, 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.status || props.showPasswordToggle || props.disabled) && (React__default["default"].createElement(IconWrapper, null,
+                props.showPasswordToggle && (React__default["default"].createElement(Icon["default"], { onClick: togglePasswordVisibility, icon: showPassword ? hlEyeOpen["default"] : hlEyeClosed["default"] })),
+                (props.status === 'success' || props.status === 'error') && (React__default["default"].createElement(Icon["default"], { icon: iconsMap[props.status], color: theme["default"].color.notification[props.status] })),
+                props.disabled && React__default["default"].createElement(Icon["default"], { icon: hlLock["default"] })))),
+        props.status === 'error' && props.errorMessage && (React__default["default"].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
+        props.status === 'comment' && props.commentMessage && (React__default["default"].createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 };
 
-exports.default = Input;
+exports["default"] = Input;

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

@@ -1,29 +1,23 @@
 import React from 'react';
-export interface LabelProps {
-    /** this dictates what the label will say  */
-    children?: React.ReactNode;
-    /** Allows to pass a custom className */
-    className?: string;
-    /** this dictates what is the color of label */
+declare type LabelType = 'campaign' | 'new' | 'presale' | 'other';
+interface Props {
     /**
-     * @default 'slateGray'
+     * Allows to change the background color of component
      */
-    color: 'slateGray' | 'hotPink' | 'melonYellow' | 'waterBlue' | 'black' | 'white' | 'error';
-    /** this adds more padding left and right */
+    type: LabelType;
     /**
-     * @default false
+     * Content of Label component
      */
-    morePadding?: boolean;
-    /** this makes font a bit smaller */
+    children?: React.ReactNode;
     /**
-     * @default false
+     * Allows to pass a custom className
      */
-    smallerFont?: boolean;
+    className?: string;
     /**
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
 }
-declare const Label: ({ "data-testid": dataTestId, ...props }: LabelProps) => JSX.Element;
+declare const Label: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 /** @component */
 export default Label;

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

@@ -5,27 +5,35 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const LabelStyle = styled['default'].span `
+const colorsMap = {
+    campaign: theme["default"].color.background.pink.E01,
+    new: theme["default"].color.background.lemon.default,
+    presale: theme["default"].color.background.orange.default,
+    other: theme["default"].color.background.sky.default,
+};
+const StyledLabel = styled["default"].span `
     display: inline-block;
-    padding: ${props => (props.morePadding ? '0.1875rem 1.25rem' : '0.1875rem 0.625rem')};
-    min-width: 4.375rem;
+    color: ${theme["default"].color.text.black};
+    background-color: ${({ type }) => colorsMap[type]};
+    font-size: ${theme["default"].fontSize.s};
+    font-weight: ${theme["default"].fontWeight.bold};
+    line-height: ${theme["default"].lineHeight.s};
+    padding: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 5)}
+        ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
     text-align: center;
-    font-weight: ${props => props.theme.fontWeight.bold};
-    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]};
+    border-radius: ${theme["default"].radius.pill};
 `;
 const Label = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    const { children, className, color, smallerFont = false, morePadding = false } = props;
-    return (React__default['default'].createElement(LabelStyle, { className: className, color: color, "data-testid": dataTestId, morePadding: morePadding, smallerFont: smallerFont }, children));
+    return (React__default["default"].createElement(StyledLabel, { type: props.type, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
-exports.default = Label;
+exports["default"] = Label;