@dnanpm/styleguide 3.2.0 → 3.3.1

package/build/es/components/Icons/index.d.ts

@@ -1,109 +1,109 @@
-export { default as hlArrowBackSmall } from './Small/hlArrowBackSmall';
-export { default as hlArrowForwardSmall } from './Small/hlArrowForwardSmall';
-export { default as hlArrowUnderSmall } from './Small/hlArrowUnderSmall';
-export { default as hlCalendarSmall } from './Small/hlCalendarSmall';
-export { default as hlChevronDownSmall } from './Small/hlChevronDownSmall';
-export { default as hlChevronLeftSmall } from './Small/hlChevronLeftSmall';
-export { default as hlChevronRightSmall } from './Small/hlChevronRightSmall';
-export { default as hlChevronUpSmall } from './Small/hlChevronUpSmall';
-export { default as hlClockSmall } from './Small/hlClockSmall';
-export { default as hlDownloadSmall } from './Small/hlDownloadSmall';
-export { default as hlExternalSmall } from './Small/hlExternalSmall';
-export { default as hlUploadSmall } from './Small/hlUploadSmall';
-export { default as facebook } from './Social/facebook';
-export { default as instagram } from './Social/instagram';
-export { default as linkedin } from './Social/linkedin';
-export { default as tiktok } from './Social/tiktok';
-export { default as twitter } from './Social/twitter';
-export { default as youtube } from './Social/youtube';
-export { default as hl404 } from './hl404';
-export { default as hl4gSim } from './hl4gSim';
-export { default as hl5gSim } from './hl5gSim';
-export { default as hlBattery } from './hlBattery';
-export { default as hlBell } from './hlBell';
-export { default as hlCableTVCard } from './hlCableTVCard';
-export { default as hlCalendar } from './hlCalendar';
-export { default as hlCall } from './hlCall';
-export { default as hlCameraBack } from './hlCameraBack';
-export { default as hlCameraFront } from './hlCameraFront';
-export { default as hlCart } from './hlCart';
-export { default as hlCartEmpty } from './hlCartEmpty';
-export { default as hlChat } from './hlChat';
-export { default as hlCheck, hlSuccess } from './hlCheck';
-export { default as hlChevronDown } from './hlChevronDown';
-export { default as hlChevronLeft } from './hlChevronLeft';
-export { default as hlChevronRight } from './hlChevronRight';
-export { default as hlChevronUp } from './hlChevronUp';
-export { default as hlCompensation } from './hlCompensation';
-export { default as hlCookie } from './hlCookie';
-export { default as hlCopy } from './hlCopy';
-export { default as hlCoupon } from './hlCoupon';
-export { default as hlDelivery } from './hlDelivery';
-export { default as hlDigiturva } from './hlDigiturva';
-export { default as hlDisplaySize } from './hlDisplaySize';
-export { default as hlDocument } from './hlDocument';
-export { default as hlDownload } from './hlDownload';
-export { default as hlEnvelope } from './hlEnvelope';
-export { default as hlError } from './hlError';
-export { default as hlEuro } from './hlEuro';
-export { default as hlExclamationMark } from './hlExclamationMark';
-export { default as hlExpand } from './hlExpand';
-export { default as hlExternal } from './hlExternal';
-export { default as hlEyeClosed } from './hlEyeClosed';
-export { default as hlEyeOpen } from './hlEyeOpen';
-export { default as hlFaceId } from './hlFaceId';
-export { default as hlFastDelivery } from './hlFastDelivery';
-export { default as hlFingerprint } from './hlFingerprint';
-export { default as hlGlobe } from './hlGlobe';
-export { default as hlHeadphones } from './hlHeadphones';
-export { default as hlHeadset } from './hlHeadset';
-export { default as hlHeart } from './hlHeart';
-export { default as hlHome } from './hlHome';
-export { default as hlHub } from './hlHub';
-export { default as hlImage } from './hlImage';
-export { default as hlInfo } from './hlInfo';
-export { default as hlInstallment } from './hlInstallment';
-export { default as hlIotSim } from './hlIotSim';
-export { default as hlLaptop } from './hlLaptop';
-export { default as hlLiveVideo } from './hlLiveVideo';
-export { default as hlLock } from './hlLock';
-export { default as hlMagnifyingGlass } from './hlMagnifyingGlass';
-export { default as hlMarker } from './hlMarker';
-export { default as hlMemory } from './hlMemory';
-export { default as hlMenu } from './hlMenu';
-export { default as hlMinimize } from './hlMinimize';
-export { default as hlMinus } from './hlMinus';
-export { default as hlMobileData } from './hlMobileData';
-export { default as hlMobilePayment } from './hlMobilePayment';
-export { default as hlModem } from './hlModem';
-export { default as hlMore } from './hlMore';
-export { default as hlOs } from './hlOs';
-export { default as hlPackage } from './hlPackage';
-export { default as hlPaperclip } from './hlPaperclip';
-export { default as hlPaytime } from './hlPaytime';
-export { default as hlPen } from './hlPen';
-export { default as hlPerson } from './hlPerson';
-export { default as hlPhone } from './hlPhone';
-export { default as hlPlaylist } from './hlPlaylist';
-export { default as hlPlus } from './hlPlus';
-export { default as hlPrepaid } from './hlPrepaid';
-export { default as hlProcessor } from './hlProcessor';
-export { default as hlServices } from './hlServices';
-export { default as hlSettings } from './hlSettings';
-export { default as hlShield } from './hlShield';
-export { default as hlSim } from './hlSim';
-export { default as hlSimSimple } from './hlSimSimple';
-export { default as hlSmile } from './hlSmile';
-export { default as hlSpeechBubble } from './hlSpeechBubble';
-export { default as hlSquaretrade } from './hlSquaretrade';
-export { default as hlStar } from './hlStar';
-export { default as hlStarFilled } from './hlStarFilled';
-export { default as hlTrash } from './hlTrash';
-export { default as hlTv } from './hlTv';
-export { default as hlUnlock } from './hlUnlock';
-export { default as hlUpload } from './hlUpload';
-export { default as hlWarning } from './hlWarning';
-export { default as hlWifi } from './hlWifi';
-export { default as hlWrench } from './hlWrench';
-export { default as hlX } from './hlX';
-export { default as hlLink } from './hlLink';
+export { default as hlArrowBackSmall } from './Small/hlArrowBackSmall';
+export { default as hlArrowForwardSmall } from './Small/hlArrowForwardSmall';
+export { default as hlArrowUnderSmall } from './Small/hlArrowUnderSmall';
+export { default as hlCalendarSmall } from './Small/hlCalendarSmall';
+export { default as hlChevronDownSmall } from './Small/hlChevronDownSmall';
+export { default as hlChevronLeftSmall } from './Small/hlChevronLeftSmall';
+export { default as hlChevronRightSmall } from './Small/hlChevronRightSmall';
+export { default as hlChevronUpSmall } from './Small/hlChevronUpSmall';
+export { default as hlClockSmall } from './Small/hlClockSmall';
+export { default as hlDownloadSmall } from './Small/hlDownloadSmall';
+export { default as hlExternalSmall } from './Small/hlExternalSmall';
+export { default as hlUploadSmall } from './Small/hlUploadSmall';
+export { default as facebook } from './Social/facebook';
+export { default as instagram } from './Social/instagram';
+export { default as linkedin } from './Social/linkedin';
+export { default as tiktok } from './Social/tiktok';
+export { default as twitter } from './Social/twitter';
+export { default as youtube } from './Social/youtube';
+export { default as hl404 } from './hl404';
+export { default as hl4gSim } from './hl4gSim';
+export { default as hl5gSim } from './hl5gSim';
+export { default as hlBattery } from './hlBattery';
+export { default as hlBell } from './hlBell';
+export { default as hlCableTVCard } from './hlCableTVCard';
+export { default as hlCalendar } from './hlCalendar';
+export { default as hlCall } from './hlCall';
+export { default as hlCameraBack } from './hlCameraBack';
+export { default as hlCameraFront } from './hlCameraFront';
+export { default as hlCart } from './hlCart';
+export { default as hlCartEmpty } from './hlCartEmpty';
+export { default as hlChat } from './hlChat';
+export { default as hlCheck, hlSuccess } from './hlCheck';
+export { default as hlChevronDown } from './hlChevronDown';
+export { default as hlChevronLeft } from './hlChevronLeft';
+export { default as hlChevronRight } from './hlChevronRight';
+export { default as hlChevronUp } from './hlChevronUp';
+export { default as hlCompensation } from './hlCompensation';
+export { default as hlCookie } from './hlCookie';
+export { default as hlCopy } from './hlCopy';
+export { default as hlCoupon } from './hlCoupon';
+export { default as hlDelivery } from './hlDelivery';
+export { default as hlDigiturva } from './hlDigiturva';
+export { default as hlDisplaySize } from './hlDisplaySize';
+export { default as hlDocument } from './hlDocument';
+export { default as hlDownload } from './hlDownload';
+export { default as hlEnvelope } from './hlEnvelope';
+export { default as hlError } from './hlError';
+export { default as hlEuro } from './hlEuro';
+export { default as hlExclamationMark } from './hlExclamationMark';
+export { default as hlExpand } from './hlExpand';
+export { default as hlExternal } from './hlExternal';
+export { default as hlEyeClosed } from './hlEyeClosed';
+export { default as hlEyeOpen } from './hlEyeOpen';
+export { default as hlFaceId } from './hlFaceId';
+export { default as hlFastDelivery } from './hlFastDelivery';
+export { default as hlFingerprint } from './hlFingerprint';
+export { default as hlGlobe } from './hlGlobe';
+export { default as hlHeadphones } from './hlHeadphones';
+export { default as hlHeadset } from './hlHeadset';
+export { default as hlHeart } from './hlHeart';
+export { default as hlHome } from './hlHome';
+export { default as hlHub } from './hlHub';
+export { default as hlImage } from './hlImage';
+export { default as hlInfo } from './hlInfo';
+export { default as hlInstallment } from './hlInstallment';
+export { default as hlIotSim } from './hlIotSim';
+export { default as hlLaptop } from './hlLaptop';
+export { default as hlLiveVideo } from './hlLiveVideo';
+export { default as hlLock } from './hlLock';
+export { default as hlMagnifyingGlass } from './hlMagnifyingGlass';
+export { default as hlMarker } from './hlMarker';
+export { default as hlMemory } from './hlMemory';
+export { default as hlMenu } from './hlMenu';
+export { default as hlMinimize } from './hlMinimize';
+export { default as hlMinus } from './hlMinus';
+export { default as hlMobileData } from './hlMobileData';
+export { default as hlMobilePayment } from './hlMobilePayment';
+export { default as hlModem } from './hlModem';
+export { default as hlMore } from './hlMore';
+export { default as hlOs } from './hlOs';
+export { default as hlPackage } from './hlPackage';
+export { default as hlPaperclip } from './hlPaperclip';
+export { default as hlPaytime } from './hlPaytime';
+export { default as hlPen } from './hlPen';
+export { default as hlPerson } from './hlPerson';
+export { default as hlPhone } from './hlPhone';
+export { default as hlPlaylist } from './hlPlaylist';
+export { default as hlPlus } from './hlPlus';
+export { default as hlPrepaid } from './hlPrepaid';
+export { default as hlProcessor } from './hlProcessor';
+export { default as hlServices } from './hlServices';
+export { default as hlSettings } from './hlSettings';
+export { default as hlShield } from './hlShield';
+export { default as hlSim } from './hlSim';
+export { default as hlSimSimple } from './hlSimSimple';
+export { default as hlSmile } from './hlSmile';
+export { default as hlSpeechBubble } from './hlSpeechBubble';
+export { default as hlSquaretrade } from './hlSquaretrade';
+export { default as hlStar } from './hlStar';
+export { default as hlStarFilled } from './hlStarFilled';
+export { default as hlTrash } from './hlTrash';
+export { default as hlTv } from './hlTv';
+export { default as hlUnlock } from './hlUnlock';
+export { default as hlUpload } from './hlUpload';
+export { default as hlWarning } from './hlWarning';
+export { default as hlWifi } from './hlWifi';
+export { default as hlWrench } from './hlWrench';
+export { default as hlX } from './hlX';
+export { default as hlLink } from './hlLink';

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

@@ -0,0 +1,44 @@
+import React, { type ReactNode } from 'react';
+type Position = 'left' | 'right' | 'middle';
+type InfoDialogType = 'default' | 'sale';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to change the position of the component.
+     *
+     * @param {Position} left Renders component on the left
+     * @param {Position} right Renders component on the right
+     * @param {Position} middle Renders component in the middle
+     *
+     * @default 'middle'
+     */
+    position?: Position;
+    /**
+     * Allows to change the border color styling of component, depending on the passed type
+     *
+     * @param {InfoDialogType} default Uses `theme.color.default.pink` color for styling
+     * @param {InfoDialogType} sale Uses `theme.color.accent.orange` color for styling
+     *
+     * @default 'default'
+     */
+    type?: InfoDialogType;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Info Dialog */
+declare const InfoDialog: ({ position, type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default InfoDialog;

package/build/es/components/InfoDialog/InfoDialog.js

@@ -0,0 +1,60 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+
+const positionMap = {
+    left: 'left: 1.875rem',
+    right: 'right: 1.875rem',
+    middle: 'left: 50%; transform: translateX(-50%)',
+};
+const colorMap = {
+    default: theme.color.default.pink,
+    sale: theme.color.accent.orange,
+};
+const InfoDialogContainer = styled.div `
+    position: relative;
+    font-size: ${theme.fontSize.s};
+    line-height: ${theme.lineHeight.s};
+    font-weight: ${theme.fontWeight.medium};
+    background-color: ${theme.color.background.white.default};
+    color: ${theme.color.text.black};
+    border-radius: ${theme.radius.default};
+    border: 2px solid ${({ type }) => colorMap[type]};
+    padding: ${getMultipliedSize(theme.base.baseHeight, 1.5)};
+    margin-top: ${getMultipliedSize(theme.base.baseHeight, 2)};
+    width: 100%;
+
+    &:before,
+    &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: -${getMultipliedSize(theme.base.baseWidth, 0.9)};
+        z-index: 2;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        border: 20px solid transparent;
+        border-top: 0;
+        width: auto;
+        border-bottom-color: ${theme.color.default.white};
+        ${({ position }) => positionMap[position]};
+        border-width: 0px ${getMultipliedSize(theme.base.baseWidth, 1.2)}
+            ${getMultipliedSize(theme.base.baseWidth, 1.2)};
+    }
+
+    &:before {
+        top: -${getMultipliedSize(theme.base.baseWidth, 1.2)};
+        z-index: 1;
+        border-bottom-color: ${({ type }) => colorMap[type]};
+    }
+`;
+/** @visibleName Info Dialog */
+const InfoDialog = (_a) => {
+    var { position = 'middle', type = 'default', 'data-testid': dataTestId } = _a, props = __rest(_a, ["position", "type", 'data-testid']);
+    return (React__default.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, position: position, type: type }, props.children));
+};
+
+export { InfoDialog as default };

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

@@ -1,139 +1,139 @@
-import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
-import React from 'react';
-type InputStatus = 'none' | 'success' | 'error' | 'comment';
-type InputType = 'email' | 'hidden' | 'number' | 'password' | 'range' | 'search' | 'tel' | 'text' | 'url';
-/**
- * @deprecated Use `DateTimePicker` component
- */
-type InputTypeDeprecated = 'date' | 'month' | 'time' | 'week';
-interface Props {
-    /**
-     * Unique ID for the input element
-     */
-    id: string;
-    /**
-     * Name of the input element
-     */
-    name: string;
-    /**
-     * Type of input element
-     *
-     * @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} 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} url Used for entering a URL and supported with browser validation
-     *
-     * @param {InputTypeDeprecated} date DEPRECATED Use `DateTimePicker` component
-     * @param {InputTypeDeprecated} month DEPRECATED Use `DateTimePicker` component
-     * @param {InputTypeDeprecated} time DEPRECATED Use `DateTimePicker` component
-     * @param {InputTypeDeprecated} week DEPRECATED Use `DateTimePicker` component
-     *
-     * @default 'text'
-     */
-    type?: InputType | InputTypeDeprecated;
-    /**
-     * Default value of input element
-     */
-    value?: string | number;
-    /**
-     * Text to be passed down to `LabelText` component. Acts as 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?: (val: string, e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * On input blur callback
-     */
-    onBlur?: (val: string, e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * On input focus callback
-     */
-    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
-    /**
-     * On input key press callback
-     */
-    onKeyPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
-    /**
-     * On input key down callback
-     */
-    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
-    /**
-     * On clearable button click callback
-     */
-    onClearableButtonClick?: (e: MouseEvent<HTMLElement>) => void;
-    /**
-     * Allows user to change type of input between "password" and "text"
-     * When set to true, value of type property is ignored
-     *
-     * @default false
-     */
-    showPasswordToggle?: boolean;
-    /**
-     * 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
-     */
-    disabled?: boolean;
-    /**
-     * Allows to set input as readonly
-     *
-     * @default false
-     */
-    readonly?: boolean;
-    /**
-     * Allows to set input as mandatory
-     *
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Depending on the passed status, the styling changes and additional elements are shown
-     *
-     * @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?: InputStatus;
-    /**
-     * Text of the error message when input is in error state
-     */
-    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: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Input;
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
+import React from 'react';
+type InputStatus = 'none' | 'success' | 'error' | 'comment';
+type InputType = 'email' | 'hidden' | 'number' | 'password' | 'range' | 'search' | 'tel' | 'text' | 'url';
+/**
+ * @deprecated Use `DateTimePicker` component
+ */
+type InputTypeDeprecated = 'date' | 'month' | 'time' | 'week';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
+    name: string;
+    /**
+     * Type of input element
+     *
+     * @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} 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} url Used for entering a URL and supported with browser validation
+     *
+     * @param {InputTypeDeprecated} date DEPRECATED Use `DateTimePicker` component
+     * @param {InputTypeDeprecated} month DEPRECATED Use `DateTimePicker` component
+     * @param {InputTypeDeprecated} time DEPRECATED Use `DateTimePicker` component
+     * @param {InputTypeDeprecated} week DEPRECATED Use `DateTimePicker` component
+     *
+     * @default 'text'
+     */
+    type?: InputType | InputTypeDeprecated;
+    /**
+     * Default value of input element
+     */
+    value?: string | number;
+    /**
+     * Text to be passed down to `LabelText` component. Acts as 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?: (val: string, e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * On input blur callback
+     */
+    onBlur?: (val: string, e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * On input focus callback
+     */
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * On input key press callback
+     */
+    onKeyPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * On input key down callback
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * On clearable button click callback
+     */
+    onClearableButtonClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows user to change type of input between "password" and "text"
+     * When set to true, value of type property is ignored
+     *
+     * @default false
+     */
+    showPasswordToggle?: boolean;
+    /**
+     * 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
+     */
+    disabled?: boolean;
+    /**
+     * Allows to set input as readonly
+     *
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Allows to set input as mandatory
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Depending on the passed status, the styling changes and additional elements are shown
+     *
+     * @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?: InputStatus;
+    /**
+     * Text of the error message when input is in error state
+     */
+    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: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Input;