@invoicebox/ui 0.1.0-alpha.171 → 0.1.0-alpha.173

package/dist/components/common/EntityAutocompleteOptionsDrawer/styles.d.ts

@@ -4,6 +4,6 @@ export declare const InputWrapper: import("styled-components/dist/types").IStyle
 export declare const OptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const SkeletonListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Prompt: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Typography").TProps & import("styled-components/dist/types").BaseObject, {
+export declare const Prompt: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
     $color: string;
-}>> & string & Omit<import("react").FC<import("../Typography").TProps>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<import("react").FC<import("../Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;

package/dist/components/common/SecondaryButton/styles.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { TSecondaryButtonPalette } from './palette';
-export declare const Inner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Typography").TProps & import("styled-components/dist/types").BaseObject, {
+export declare const Inner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
     $isLoading?: boolean | undefined;
-}>> & string & Omit<import("react").FC<import("../Typography").TProps>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<import("react").FC<import("../Typography").TTypographyProps>, 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").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $palette: TSecondaryButtonPalette;
     $fullWidth: boolean;

package/dist/components/common/Typography/index.d.ts

@@ -24,7 +24,8 @@ type TTextAreaProps = {
 type TGeneralProps = {
     variant: keyof typeof typography;
 };
-export type TProps = TGeneralProps & (TDivProps | TParagraphProps | TSpanProps | THeadingProps | TButtonProps | TInputProps | TTextAreaProps);
-export declare const Typography: FC<TProps>;
-export declare const InputWithTypography: React.ForwardRefExoticComponent<(TGeneralProps & (TInputProps | TTextAreaProps)) & React.RefAttributes<HTMLInputElement>>;
+export type TTypographyProps = TGeneralProps & (TDivProps | TParagraphProps | TSpanProps | THeadingProps | TButtonProps | TInputProps | TTextAreaProps);
+export declare const Typography: FC<TTypographyProps>;
+export type TInputWithTypographyProps = TGeneralProps & (TInputProps | TTextAreaProps);
+export declare const InputWithTypography: React.ForwardRefExoticComponent<TInputWithTypographyProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/common/Typography/index.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryObj } from '@storybook/react';
 import { Typography } from '.';
 declare const meta: {
     title: string;
-    component: React.FC<import(".").TProps>;
+    component: React.FC<import(".").TTypographyProps>;
     tags: string[];
 };
 export default meta;

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

@@ -106,7 +106,7 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     paddingLeft: inputPaddingLeft,
     maxLength: inputMaxLength,
     isOnlyNumbers: isInputOnlyNumbers
-  }, _constants.SIZE_PADDING_MAP[size])))), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
+  }, _constants.SIZE_PARAMS_MAP[size])))), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
     isOpen: isOpen && (!!options.length || !!isLoading),
     isAutoPosition: true,
     width: "100%",

package/dist/components/form/Autocomplete/components/OrganizationAutocompleteItem/styles.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 export declare const OrganizationWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const OrganizationName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../../../common/Typography").TProps & import("styled-components/dist/types").BaseObject, import("../../../../common/Typography").TProps>, import("styled-components/dist/types").BaseObject>, {
+export declare const OrganizationName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, import("../../../../common/Typography").TTypographyProps>, import("styled-components/dist/types").BaseObject>, {
     $color: string;
-}>> & string & Omit<import("react").FC<import("../../../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;
-export declare const OrganizationDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../../../common/Typography").TProps & import("styled-components/dist/types").BaseObject, import("../../../../common/Typography").TProps>, import("styled-components/dist/types").BaseObject>, {
+}>> & string & Omit<import("react").FC<import("../../../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
+export declare const OrganizationDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, import("../../../../common/Typography").TTypographyProps>, import("styled-components/dist/types").BaseObject>, {
     $color: string;
-}>> & string & Omit<import("react").FC<import("../../../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;
-export declare const OrganizationLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../../../common/Typography").TProps & import("styled-components/dist/types").BaseObject, import("../../../../common/Typography").TProps>, import("styled-components/dist/types").BaseObject>, {
+}>> & string & Omit<import("react").FC<import("../../../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
+export declare const OrganizationLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, import("../../../../common/Typography").TTypographyProps>, import("styled-components/dist/types").BaseObject>, {
     $color: string;
-}>> & string & Omit<import("react").FC<import("../../../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<import("react").FC<import("../../../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
 export declare const OrganizationVatNumber: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const OrganizationProperties: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Feature: 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/CurrencyInput/CoreCurrencyInput/index.js

@@ -30,9 +30,10 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
   var palette = (0, _palette.useComponentPalette)('pureInput');
-  var _SIZE_PADDING_MAP$siz = _constants.SIZE_PADDING_MAP[size],
-    paddingBottom = _SIZE_PADDING_MAP$siz.paddingBottom,
-    paddingTop = _SIZE_PADDING_MAP$siz.paddingTop;
+  var _SIZE_PARAMS_MAP$size = _constants.SIZE_PARAMS_MAP[size],
+    paddingBottom = _SIZE_PARAMS_MAP$size.paddingBottom,
+    paddingTop = _SIZE_PARAMS_MAP$size.paddingTop,
+    variant = _SIZE_PARAMS_MAP$size.variant;
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     inFocus: inFocus,
     label: label,
@@ -42,6 +43,7 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
     $hasBorder: true,
     $paddingLeft: 18,
     $paddingRight: 18,
+    $variant: variant,
     $paddingTop: paddingTop,
     $paddingBottom: paddingBottom,
     $hasError: hasError,

package/dist/components/form/CurrencyInput/CoreCurrencyInput/styles.d.ts

@@ -8,4 +8,5 @@ export declare const StyledCurrencyInputFromLibrary: import("styled-components/d
     $inFocus: boolean;
     $hasBorder: boolean;
     $palette: import("../../PureInput/palette").TPureInputPalette;
+    $variant?: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints" | undefined;
 }>> & string & ({} | Omit<import("react").ComponentClass<any, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<any>, keyof import("react").Component<any, {}, any>>);

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

@@ -117,7 +117,7 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
     value: stringValue,
     onChange: handleStringValueChange,
     paddingRight: 44
-  }, _constants.SIZE_PADDING_MAP[size])), /*#__PURE__*/_react["default"].createElement(S.Icon, {
+  }, _constants.SIZE_PARAMS_MAP[size])), /*#__PURE__*/_react["default"].createElement(S.Icon, {
     onClick: handleTrigger,
     $palette: palette
   }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, null)))), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {

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

@@ -1,9 +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<import("../../common/Typography").TProps & import("styled-components/dist/types").BaseObject, {
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
     $inFocus: boolean;
     $palette: TInputLabelPalette;
-}>> & string & Omit<import("react").FC<import("../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, 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/InputLabel/styles.js

@@ -12,7 +12,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var Label = exports.Label = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Label",
   componentId: "sc-1prrc3p-0"
-})(["border-radius:10px;position:absolute;top:0;left:8px;background-color:", ";padding:0 10px;z-index:2;transition:color 0.2s ease-in-out 0s;color:", "};"], function (_ref) {
+})(["border-radius:10px;position:absolute;top:0;left:10px;background-color:", ";padding:0 10px;z-index:2;transition:color 0.2s ease-in-out 0s;color:", ";"], function (_ref) {
   var $palette = _ref.$palette;
   return $palette.bg;
 }, function (_ref2) {

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

@@ -179,5 +179,5 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
     paddingLeft: isHaveSelectCountries ? 75 : 18,
     autoComplete: 'off',
     inputMode: "numeric"
-  }, _constants.SIZE_PADDING_MAP[size], pureInputProps)))));
+  }, _constants.SIZE_PARAMS_MAP[size], pureInputProps)))));
 };

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

@@ -82,7 +82,7 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
     value: normalizeFrom(value),
     onChange: handleChange,
     paddingRight: upAndDown ? 44 : undefined
-  }, _constants.SIZE_PADDING_MAP[size])), upAndDown && /*#__PURE__*/_react["default"].createElement(S.Arrows, null, /*#__PURE__*/_react["default"].createElement(S.Arrow, {
+  }, _constants.SIZE_PARAMS_MAP[size])), upAndDown && /*#__PURE__*/_react["default"].createElement(S.Arrows, null, /*#__PURE__*/_react["default"].createElement(S.Arrow, {
     onClick: handleUp,
     $disabled: isIncrementDisabled
   }, /*#__PURE__*/_react["default"].createElement(_Arrow.Arrow, {

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

@@ -1,5 +1,6 @@
 import React, { InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
-export type TProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onBlur' | 'onChange' | 'onFocus'> & InputHTMLAttributes<HTMLInputElement> & {
+import { TInputWithTypographyProps } from '../../common/Typography';
+export type TProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onBlur' | 'onChange' | 'onFocus'> & InputHTMLAttributes<HTMLInputElement> & Partial<Pick<TInputWithTypographyProps, 'variant'>> & {
     paddingLeft?: number;
     paddingRight?: number;
     paddingTop?: number;
@@ -11,7 +12,7 @@ export type TProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onBlur'
     className?: never;
     element?: 'input' | 'textarea';
 };
-export declare const PureInput: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onFocus" | "onBlur" | "onChange"> & React.InputHTMLAttributes<HTMLInputElement> & {
+export declare const PureInput: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onFocus" | "onBlur" | "onChange"> & React.InputHTMLAttributes<HTMLInputElement> & Partial<Pick<TInputWithTypographyProps, "variant">> & {
     paddingLeft?: number | undefined;
     paddingRight?: number | undefined;
     paddingTop?: number | undefined;

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", "element"];
+var _excluded = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "hasError", "inFocus", "hasBorder", "isOnlyNumbers", "className", "onChange", "element", "variant"];
 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); }
@@ -35,6 +35,8 @@ var PureInput = exports.PureInput = /*#__PURE__*/_react["default"].forwardRef(fu
     onChange = _ref.onChange,
     _ref$element = _ref.element,
     element = _ref$element === void 0 ? 'input' : _ref$element,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'bodyMRegular' : _ref$variant,
     rest = _objectWithoutProperties(_ref, _excluded);
   var palette = (0, _palette.useComponentPalette)('pureInput');
   var handleChange = (0, _react.useCallback)(function (event) {
@@ -46,7 +48,7 @@ var PureInput = exports.PureInput = /*#__PURE__*/_react["default"].forwardRef(fu
   }, [isOnlyNumbers, onChange]);
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
     ref: ref,
-    variant: "bodyMRegular",
+    variant: variant,
     element: element,
     $paddingLeft: paddingLeft,
     $paddingRight: paddingRight,

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

@@ -9,6 +9,7 @@ export declare const getPureInputStyled: (component: ElementType) => import("sty
     $inFocus: boolean;
     $hasBorder: boolean;
     $palette: TPureInputPalette;
+    $variant?: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints" | undefined;
 }>> & string & ({} | Omit<import("react").ComponentClass<any, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<any>, keyof import("react").Component<any, {}, any>>);
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<any, {
     $paddingLeft: number;
@@ -19,4 +20,5 @@ export declare const Wrapper: import("styled-components/dist/types").IStyledComp
     $inFocus: boolean;
     $hasBorder: boolean;
     $palette: TPureInputPalette;
+    $variant?: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints" | undefined;
 }>> & string & ({} | Omit<import("react").ComponentClass<any, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<any>, keyof import("react").Component<any, {}, any>>);

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

@@ -6,37 +6,41 @@ Object.defineProperty(exports, "__esModule", {
 exports.getPureInputStyled = exports.Wrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Typography = require("../../common/Typography");
+var _typography = require("../../common/Typography/typography");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var getPureInputStyled = exports.getPureInputStyled = function getPureInputStyled(component) {
   return (0, _styledComponents["default"])(component).withConfig({
     displayName: "styles",
     componentId: "sc-1g8ijo6-0"
-  })(["font-size:14px;font-weight:400;line-height:20px;resize:none;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) {
-    var $palette = _ref.$palette;
-    return $palette.text;
+  })(["", " resize:none;color:", ";border-radius:10px;border: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;outline: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) {
+    var $variant = _ref.$variant;
+    return $variant && _typography.typography[$variant];
   }, function (_ref2) {
     var $palette = _ref2.$palette;
-    return $palette.bg;
+    return $palette.text;
   }, function (_ref3) {
-    var $paddingRight = _ref3.$paddingRight;
-    return $paddingRight;
+    var $palette = _ref3.$palette;
+    return $palette.bg;
   }, function (_ref4) {
-    var $paddingLeft = _ref4.$paddingLeft;
-    return $paddingLeft;
+    var $paddingRight = _ref4.$paddingRight;
+    return $paddingRight;
   }, function (_ref5) {
-    var $paddingTop = _ref5.$paddingTop;
-    return $paddingTop;
+    var $paddingLeft = _ref5.$paddingLeft;
+    return $paddingLeft;
   }, function (_ref6) {
-    var $paddingBottom = _ref6.$paddingBottom;
-    return $paddingBottom;
+    var $paddingTop = _ref6.$paddingTop;
+    return $paddingTop;
   }, function (_ref7) {
-    var $hasError = _ref7.$hasError,
-      $inFocus = _ref7.$inFocus,
-      $hasBorder = _ref7.$hasBorder,
-      $palette = _ref7.$palette;
-    return !$hasBorder ? 'transparent' : $hasError ? $palette.error : $inFocus ? $palette.borderFocus : $palette.border;
+    var $paddingBottom = _ref7.$paddingBottom;
+    return $paddingBottom;
   }, function (_ref8) {
-    var $palette = _ref8.$palette;
+    var $hasError = _ref8.$hasError,
+      $inFocus = _ref8.$inFocus,
+      $hasBorder = _ref8.$hasBorder,
+      $palette = _ref8.$palette;
+    return !$hasBorder ? 'transparent' : $hasError ? $palette.error : $inFocus ? $palette.borderFocus : $palette.border;
+  }, function (_ref9) {
+    var $palette = _ref9.$palette;
     return $palette.placeholder;
   });
 };

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

@@ -58,7 +58,7 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
     name: name,
     maxLength: maxLength,
     isOnlyNumbers: isOnlyNumbers
-  }, _constants.SIZE_PADDING_MAP[size])), /*#__PURE__*/_react["default"].createElement(S.IconWrapper, {
+  }, _constants.SIZE_PARAMS_MAP[size])), /*#__PURE__*/_react["default"].createElement(S.IconWrapper, {
     $inFocus: inFocus,
     $palette: palette
   }, value ? /*#__PURE__*/_react["default"].createElement(_ResetButton.ResetButton, {

package/dist/components/form/Select/components/Input/index.js

@@ -43,7 +43,7 @@ var Input = exports.Input = function Input(_ref) {
     value: value,
     readOnly: true,
     paddingRight: 52
-  }, _constants.SIZE_PADDING_MAP[size])), /*#__PURE__*/_react["default"].createElement(S.IconWrapper, {
+  }, _constants.SIZE_PARAMS_MAP[size])), /*#__PURE__*/_react["default"].createElement(S.IconWrapper, {
     $pointerEvents: isShowResetIcon ? 'default' : 'none'
   }, isShowResetIcon ? /*#__PURE__*/_react["default"].createElement(_ResetButton.ResetButton, {
     onClick: onReset

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

@@ -3,8 +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<import("../../common/Typography").TProps & import("styled-components/dist/types").BaseObject, {
+export declare const Option: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
     $palette: TSelectPalette;
     $isGrouped: boolean;
-}>> & 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>>;
+}>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, 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").TTypographyProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;

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

@@ -66,5 +66,5 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
     autoFocus: autoFocus,
     element: element,
     rows: rows
-  }, _constants.SIZE_PADDING_MAP[size])), children && /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children)));
+  }, _constants.SIZE_PARAMS_MAP[size])), children && /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children)));
 };

package/dist/components/form/constants.d.ts

@@ -1,5 +1,7 @@
-export type TSizes = 'M' | 'L' | 'XS';
-export declare const SIZE_PADDING_MAP: Record<TSizes, {
+import { typography } from '../common/Typography/typography';
+export type TSizes = 'L' | 'M' | 'XS';
+export declare const SIZE_PARAMS_MAP: Record<TSizes, {
     paddingTop: number;
     paddingBottom: number;
+    variant: keyof typeof typography;
 }>;

package/dist/components/form/constants.js

@@ -3,18 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZE_PADDING_MAP = void 0;
-var SIZE_PADDING_MAP = exports.SIZE_PADDING_MAP = {
+exports.SIZE_PARAMS_MAP = void 0;
+var SIZE_PARAMS_MAP = exports.SIZE_PARAMS_MAP = {
   L: {
     paddingTop: 16,
-    paddingBottom: 16
+    paddingBottom: 16,
+    variant: 'bodyMRegular'
   },
   M: {
     paddingTop: 13,
-    paddingBottom: 13
+    paddingBottom: 13,
+    variant: 'bodyMRegular'
   },
   XS: {
     paddingTop: 10,
-    paddingBottom: 10
+    paddingBottom: 10,
+    variant: 'labelsHintsRegular'
   }
 };

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

@@ -9,10 +9,10 @@ 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<import("../../common/Typography").TProps & import("styled-components/dist/types").BaseObject, {
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
     $ellipsis: boolean;
     $pallete: TPaymentCardPalette;
-}>> & string & Omit<import("react").FC<import("../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, 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;
@@ -21,7 +21,7 @@ export declare const IconWrapper: import("styled-components/dist/types").IStyled
     $isActive: boolean;
     $pallete: TPaymentCardPalette;
 }>> & string;
-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, {
+export declare const Comment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
     $pallete: TPaymentCardPalette;
     $isActive: boolean;
-}>> & string & Omit<import("react").FC<import("../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;

package/package.json

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