@invoicebox/ui 0.1.0-alpha.162 → 0.1.0-alpha.164

package/dist/components/form/DateInput/logic.js

@@ -24,8 +24,8 @@ var Logic = /*#__PURE__*/function () {
   }
   return _createClass(Logic, [{
     key: "getPlaceholder",
-    value: function getPlaceholder() {
-      return this.valueToString(this.today);
+    value: function getPlaceholder(withTime) {
+      return this.valueToString(this.today, withTime);
     }
   }, {
     key: "isValid",
@@ -43,27 +43,40 @@ var Logic = /*#__PURE__*/function () {
     // Date => 31.01.2023
   }, {
     key: "valueToString",
-    value: function valueToString(value) {
+    value: function valueToString(value, withTime) {
       if (!value) return '';
       var toTwoDigits = function toTwoDigits(item) {
         return "0".concat(item).slice(-2);
       };
-      var date = [toTwoDigits(value.getDate()), toTwoDigits(value.getMonth() + 1), value.getFullYear()];
-      return date.join('.');
+      var date = [toTwoDigits(value.getDate()), toTwoDigits(value.getMonth() + 1), value.getFullYear()].join('.');
+      var time = [toTwoDigits(value.getHours()), toTwoDigits(value.getMinutes())].join(':');
+      return withTime ? date + ' ' + time : date;
     }
 
     // 31.01.2023 => Date
   }, {
     key: "stringToDate",
-    value: function stringToDate(str) {
-      var _str$split = str.split('.'),
-        _str$split2 = _slicedToArray(_str$split, 3),
-        dd = _str$split2[0],
-        mm = _str$split2[1],
-        yyyy = _str$split2[2];
-      return new Date([mm, dd, yyyy].filter(function (i) {
+    value: function stringToDate(str, withTime) {
+      var _str$split = str.split(' '),
+        _str$split2 = _slicedToArray(_str$split, 2),
+        dateStr = _str$split2[0],
+        timeStr = _str$split2[1];
+      var _dateStr$split = dateStr.split('.'),
+        _dateStr$split2 = _slicedToArray(_dateStr$split, 3),
+        dd = _dateStr$split2[0],
+        mm = _dateStr$split2[1],
+        yyyy = _dateStr$split2[2];
+      var _ref = timeStr ? timeStr.split(':') : ['00', '00'],
+        _ref2 = _slicedToArray(_ref, 2),
+        hours = _ref2[0],
+        minutes = _ref2[1];
+      var formattedDateStr = [mm, dd, yyyy].filter(function (i) {
         return i;
-      }).join('/'));
+      }).join('/');
+      var formattedTimeStr = [hours, minutes, '00'].filter(function (i) {
+        return i;
+      }).join(':');
+      return new Date(withTime ? formattedDateStr + ' ' + formattedTimeStr : formattedDateStr);
     }
   }]);
 }();

package/dist/components/form/DateInput/styles.d.ts

@@ -5,4 +5,4 @@ export declare const InputWrapper: import("styled-components/dist/types").IStyle
 export declare const Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $palette: TDateInputPalette;
 }>> & string;
-export declare const Calendar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CalendarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/form/DateInput/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.InputWrapper = exports.Icon = exports.Calendar = void 0;
+exports.Wrapper = exports.InputWrapper = exports.Icon = exports.CalendarWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _breakpoints = require("../../../breakpoints");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -22,7 +22,7 @@ var Icon = exports.Icon = _styledComponents["default"].div.withConfig({
   var $palette = _ref.$palette;
   return $palette.icon;
 });
-var Calendar = exports.Calendar = _styledComponents["default"].div.withConfig({
-  displayName: "styles__Calendar",
+var CalendarWrapper = exports.CalendarWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__CalendarWrapper",
   componentId: "sc-7tnmvh-3"
 })(["padding:30px;@media ", "{padding:15px;}"], _breakpoints.breakpoints.sm);

package/dist/components/form/InputLabel/styles.d.ts

@@ -1,45 +1,9 @@
 /// <reference types="react" />
 import { TInputLabelPalette } from './palette';
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element?: "div" | undefined;
-} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "p";
-} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "span";
-} & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-} & import("react").HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "button";
-} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "input";
-} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}), {
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TProps & import("styled-components/dist/types").BaseObject, {
     $inFocus: boolean;
     $palette: TInputLabelPalette;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<import("../../common/Typography").TProps & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<import("react").FC<import("../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled: boolean;
     $isLabel: boolean;

package/dist/components/form/PureInput/index.d.ts

@@ -1,5 +1,5 @@
-import React, { InputHTMLAttributes } from 'react';
-export type TProps = InputHTMLAttributes<HTMLInputElement> & {
+import React, { InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+export type TProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onBlur' | 'onChange' | 'onFocus'> & InputHTMLAttributes<HTMLInputElement> & {
     paddingLeft?: number;
     paddingRight?: number;
     paddingTop?: number;
@@ -9,8 +9,9 @@ export type TProps = InputHTMLAttributes<HTMLInputElement> & {
     hasBorder?: boolean;
     isOnlyNumbers?: boolean;
     className?: never;
+    element?: 'input' | 'textarea';
 };
-export declare const PureInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+export declare const PureInput: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onFocus" | "onBlur" | "onChange"> & React.InputHTMLAttributes<HTMLInputElement> & {
     paddingLeft?: number | undefined;
     paddingRight?: number | undefined;
     paddingTop?: number | undefined;
@@ -20,4 +21,5 @@ export declare const PureInput: React.ForwardRefExoticComponent<React.InputHTMLA
     hasBorder?: boolean | undefined;
     isOnlyNumbers?: boolean | undefined;
     className?: undefined;
+    element?: "input" | "textarea" | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/components/form/PureInput/index.js

@@ -8,7 +8,7 @@ exports.PureInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var S = _interopRequireWildcard(require("./styles"));
 var _palette = require("../../../palette");
-var _excluded = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "hasError", "inFocus", "hasBorder", "isOnlyNumbers", "className", "onChange"];
+var _excluded = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "hasError", "inFocus", "hasBorder", "isOnlyNumbers", "className", "onChange", "element"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -33,6 +33,8 @@ var PureInput = exports.PureInput = /*#__PURE__*/_react["default"].forwardRef(fu
     isOnlyNumbers = _ref$isOnlyNumbers === void 0 ? false : _ref$isOnlyNumbers,
     className = _ref.className,
     onChange = _ref.onChange,
+    _ref$element = _ref.element,
+    element = _ref$element === void 0 ? 'input' : _ref$element,
     rest = _objectWithoutProperties(_ref, _excluded);
   var palette = (0, _palette.useComponentPalette)('pureInput');
   var handleChange = (0, _react.useCallback)(function (event) {
@@ -45,7 +47,7 @@ var PureInput = exports.PureInput = /*#__PURE__*/_react["default"].forwardRef(fu
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
     ref: ref,
     variant: "bodyMRegular",
-    element: "input",
+    element: element,
     $paddingLeft: paddingLeft,
     $paddingRight: paddingRight,
     $paddingTop: paddingTop,

package/dist/components/form/PureInput/styles.d.ts

@@ -3,38 +3,14 @@ import { TPureInputPalette } from './palette';
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<{
     variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
 } & {
-    element?: "div" | undefined;
-} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "p";
-} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "span";
-} & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-} & import("react").HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "button";
-} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    element: "input";
+} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
     ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
 }) | (Omit<{
     variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
 } & {
-    element: "input";
-} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    element: "textarea";
+} & Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "onFocus" | "onBlur" | "onChange"> & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
     ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
 }), {
     $paddingLeft: number;
@@ -45,4 +21,10 @@ export declare const Wrapper: import("styled-components/dist/types").IStyledComp
     $inFocus: boolean;
     $hasBorder: boolean;
     $palette: TPureInputPalette;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<import("../../common/Typography").TProps & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<({
+    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
+} & (({
+    element: "input";
+} & import("react").InputHTMLAttributes<HTMLInputElement>) | ({
+    element: "textarea";
+} & Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "onFocus" | "onBlur" | "onChange"> & import("react").InputHTMLAttributes<HTMLInputElement>))) & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/components/form/PureInput/styles.js

@@ -7,7 +7,7 @@ exports.Wrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Typography = require("../../common/Typography");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var Wrapper = exports.Wrapper = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+var Wrapper = exports.Wrapper = (0, _styledComponents["default"])(_Typography.InputWithTypography).withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-1g8ijo6-0"
 })(["color:", ";border-radius:10px;outline:none;width:100%;background-color:", ";transition:all 0.2s ease-in-out 0s;box-sizing:border-box;padding-right:", "px;padding-left:", "px;padding-top:", "px;padding-bottom:", "px;border:1px solid ", ";&::placeholder{color:", ";}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus{transition:background-color 0s 600000s,color 0s 600000s !important;}"], function (_ref) {

package/dist/components/form/Select/styles.d.ts

@@ -3,80 +3,8 @@ import { TSelectPalette } from './palette';
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Options: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Option: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element?: "div" | undefined;
-} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "p";
-} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "span";
-} & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-} & import("react").HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "button";
-} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "input";
-} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}), {
+export declare const Option: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TProps & import("styled-components/dist/types").BaseObject, {
     $palette: TSelectPalette;
     $isGrouped: boolean;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<import("../../common/Typography").TProps & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const Group: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element?: "div" | undefined;
-} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "p";
-} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "span";
-} & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-} & import("react").HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "button";
-} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "input";
-} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}), import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("../../common/Typography").TProps & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<import("react").FC<import("../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;
+export declare const Group: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").FC<import("../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;

package/dist/components/form/TextInput/index.d.ts

@@ -2,11 +2,12 @@ import { FC, ReactNode } from 'react';
 import { TProps as TInputLabelProps } from '../InputLabel';
 import { TProps as TPureInputProps } from '../PureInput';
 import { TSizes } from '../constants';
-export type TProps = Pick<TInputLabelProps, 'label'> & Pick<TPureInputProps, 'placeholder' | 'hasError' | 'onFocus' | 'onBlur' | 'disabled' | 'name' | 'paddingRight' | 'type' | 'isOnlyNumbers' | 'autoFocus'> & {
+export type TProps = Pick<TInputLabelProps, 'label'> & Pick<TPureInputProps, 'placeholder' | 'hasError' | 'onFocus' | 'onBlur' | 'disabled' | 'name' | 'paddingRight' | 'type' | 'isOnlyNumbers' | 'autoFocus' | 'rows'> & {
     value: string;
     onChange: (value: string) => void;
     maxLength?: number;
     size?: TSizes;
     children?: ReactNode;
+    element?: 'input' | 'textarea';
 };
 export declare const TextInput: FC<TProps>;

package/dist/components/form/TextInput/index.js

@@ -32,7 +32,9 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'L' : _ref$size,
     isOnlyNumbers = _ref.isOnlyNumbers,
-    autoFocus = _ref.autoFocus;
+    autoFocus = _ref.autoFocus,
+    _ref$element = _ref.element,
+    element = _ref$element === void 0 ? 'input' : _ref$element;
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onFocus: onFocus,
       onBlur: onBlur
@@ -60,6 +62,7 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
     paddingRight: paddingRight,
     type: type,
     isOnlyNumbers: isOnlyNumbers,
-    autoFocus: autoFocus
+    autoFocus: autoFocus,
+    element: element
   }, _constants.SIZE_PADDING_MAP[size])), children && /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children)));
 };

package/dist/components/payment/PaymentCard/index.js

@@ -44,7 +44,10 @@ var PaymentCard = exports.PaymentCard = function PaymentCard(_ref) {
   }, title), children), isCircleIconLayout ? /*#__PURE__*/_react["default"].createElement(S.IconWrapper, {
     $pallete: palette,
     $isActive: isActive
-  }, icon || /*#__PURE__*/_react["default"].createElement(_DefaultLogo.DefaultLogo, null)) : /*#__PURE__*/_react["default"].createElement(S.OutContainerIconWrapper, null, icon || /*#__PURE__*/_react["default"].createElement(_DefaultLogo.DefaultLogo, null)), comment && /*#__PURE__*/_react["default"].createElement(S.Comment, {
+  }, icon || /*#__PURE__*/_react["default"].createElement(_DefaultLogo.DefaultLogo, null)) : /*#__PURE__*/_react["default"].createElement(S.OutContainerIconWrapper, {
+    $pallete: palette,
+    $isActive: isActive
+  }, icon || /*#__PURE__*/_react["default"].createElement(_DefaultLogo.DefaultLogo, null)), comment && /*#__PURE__*/_react["default"].createElement(S.Comment, {
     $pallete: palette,
     $isActive: isActive,
     variant: "captionSRegular"

package/dist/components/payment/PaymentCard/styles.d.ts

@@ -9,88 +9,19 @@ export declare const Wrapper: import("styled-components/dist/types").IStyledComp
 }>> & string;
 export declare const RadioWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element?: "div" | undefined;
-} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "p";
-} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "span";
-} & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-} & import("react").HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "button";
-} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "input";
-} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}), {
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TProps & import("styled-components/dist/types").BaseObject, {
     $ellipsis: boolean;
     $pallete: TPaymentCardPalette;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<import("../../common/Typography").TProps & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const OutContainerIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+}>> & string & Omit<import("react").FC<import("../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;
+export declare const OutContainerIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isActive: boolean;
+    $pallete: TPaymentCardPalette;
+}>> & string;
 export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isActive: boolean;
     $pallete: TPaymentCardPalette;
 }>> & string;
-export declare const Comment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element?: "div" | undefined;
-} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "p";
-} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "span";
-} & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-} & import("react").HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "button";
-} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}) | (Omit<{
-    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
-} & {
-    element: "input";
-} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}), {
+export declare const Comment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TProps & import("styled-components/dist/types").BaseObject, {
     $pallete: TPaymentCardPalette;
     $isActive: boolean;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<import("../../common/Typography").TProps & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<import("react").FC<import("../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;

package/dist/components/payment/PaymentCard/styles.js

@@ -46,26 +46,30 @@ var Title = exports.Title = (0, _styledComponents["default"])(_Typography.Typogr
 var OutContainerIconWrapper = exports.OutContainerIconWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__OutContainerIconWrapper",
   componentId: "sc-ykxt4t-4"
-})(["flex-shrink:0;"]);
+})(["flex-shrink:0;height:36px;padding:0 5px;background-color:", ";border-radius:14px;display:flex;align-items:center;"], function (_ref6) {
+  var $isActive = _ref6.$isActive,
+    $pallete = _ref6.$pallete;
+  return $isActive ? 'transparent' : $pallete.iconBg;
+});
 var IconWrapper = exports.IconWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__IconWrapper",
   componentId: "sc-ykxt4t-5"
-})(["flex-shrink:0;flex-grow:0;width:36px;height:36px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;"], function (_ref6) {
-  var $isActive = _ref6.$isActive,
-    $pallete = _ref6.$pallete;
+})(["flex-shrink:0;flex-grow:0;width:36px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;"], function (_ref7) {
+  var $isActive = _ref7.$isActive,
+    $pallete = _ref7.$pallete;
   return $isActive ? 'transparent' : $pallete.iconBg;
 });
 var Comment = exports.Comment = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Comment",
   componentId: "sc-ykxt4t-6"
-})(["color:", ";position:absolute;bottom:0;right:0;padding:0 8px;box-sizing:border-box;background:", ";border-radius:6px 0 0 0;", ""], function (_ref7) {
-  var $pallete = _ref7.$pallete;
-  return $pallete.comment;
-}, function (_ref8) {
+})(["color:", ";position:absolute;bottom:0;right:0;padding:0 8px;box-sizing:border-box;background:", ";border-radius:6px 0 0 0;", ""], function (_ref8) {
   var $pallete = _ref8.$pallete;
-  return $pallete.commentBg;
+  return $pallete.comment;
 }, function (_ref9) {
-  var $isActive = _ref9.$isActive,
-    $pallete = _ref9.$pallete;
+  var $pallete = _ref9.$pallete;
+  return $pallete.commentBg;
+}, function (_ref10) {
+  var $isActive = _ref10.$isActive,
+    $pallete = _ref10.$pallete;
   return $isActive ? (0, _styledComponents.css)(["border-top:1px solid ", ";border-left:1px solid ", ";"], $pallete.borderActive, $pallete.borderActive) : (0, _styledComponents.css)(["border-top:1px solid ", ";border-left:1px solid ", ";"], $pallete.borderInactive, $pallete.borderInactive);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.162",
+    "version": "0.1.0-alpha.164",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {