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

package/dist/components/form/Toggle/palette.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateTogglePalette = void 0;
+var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var generateTogglePalette = exports.generateTogglePalette = function generateTogglePalette(abstractPalette) {
+  return {
+    circle: abstractPalette.base,
+    defaultBg: (0, _hexToRgba["default"])(abstractPalette.primary, 0.3),
+    activeBg: abstractPalette.secondary,
+    label: abstractPalette.primary
+  };
+};

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { typography } from '../../common/Typography/typography';
+import { TTogglePalette } from './palette';
+export type TToggleSize = 'small' | 'medium';
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    $color: string;
+}>> & string;
+export declare const INPUT_VARIANT_MAP: Record<TToggleSize, {
+    width: number;
+    height: number;
+    circleSize: number;
+    labelVariant: keyof typeof typography;
+    leftChecked: number;
+    left: number;
+}>;
+export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    $palette: TTogglePalette;
+    $variant: TToggleSize;
+    checked?: boolean | undefined;
+}>> & string;

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

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledInput = exports.Label = exports.INPUT_VARIANT_MAP = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Label = exports.Label = _styledComponents["default"].label.withConfig({
+  displayName: "styles__Label",
+  componentId: "sc-1pe8ina-0"
+})(["display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-sizing:border-box;color:", ";"], function (_ref) {
+  var $color = _ref.$color;
+  return $color;
+});
+var INPUT_VARIANT_MAP = exports.INPUT_VARIANT_MAP = {
+  small: {
+    width: 27,
+    height: 16,
+    circleSize: 14,
+    labelVariant: 'captionRegular',
+    leftChecked: 12,
+    left: 1
+  },
+  medium: {
+    width: 33,
+    height: 20,
+    circleSize: 16,
+    labelVariant: 'headline5',
+    leftChecked: 15.5,
+    left: 1.5
+  }
+};
+var StyledInput = exports.StyledInput = _styledComponents["default"].input.withConfig({
+  displayName: "styles__StyledInput",
+  componentId: "sc-1pe8ina-1"
+})(["position:relative;width:", "px;height:", "px;cursor:pointer;-webkit-appearance:none;box-shadow:none;border:none;background:", ";border-radius:30px;&:after{content:'';display:block;position:absolute;left:", "px;top:50%;transform:translateY(-50%);width:", "px;height:", "px;border-radius:50%;background-color:", ";transition:all 0.2s ease-in-out 0s;}&:checked::after{left:", "px;}&:checked{background:", ";}&:disabled{cursor:not-allowed;}"], function (_ref2) {
+  var $variant = _ref2.$variant;
+  return INPUT_VARIANT_MAP[$variant].width;
+}, function (_ref3) {
+  var $variant = _ref3.$variant;
+  return INPUT_VARIANT_MAP[$variant].height;
+}, function (_ref4) {
+  var $palette = _ref4.$palette;
+  return $palette.defaultBg;
+}, function (_ref5) {
+  var $variant = _ref5.$variant;
+  return INPUT_VARIANT_MAP[$variant].left;
+}, function (_ref6) {
+  var $variant = _ref6.$variant;
+  return INPUT_VARIANT_MAP[$variant].circleSize;
+}, function (_ref7) {
+  var $variant = _ref7.$variant;
+  return INPUT_VARIANT_MAP[$variant].circleSize;
+}, function (_ref8) {
+  var $palette = _ref8.$palette;
+  return $palette.circle;
+}, function (_ref9) {
+  var $variant = _ref9.$variant;
+  return INPUT_VARIANT_MAP[$variant].leftChecked;
+}, function (_ref10) {
+  var $palette = _ref10.$palette;
+  return $palette.activeBg;
+});

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

@@ -0,0 +1,5 @@
+export type TSizes = 'M' | 'L' | 'XS';
+export declare const SIZE_PADDING_MAP: Record<TSizes, {
+    paddingTop: number;
+    paddingBottom: number;
+}>;

package/dist/components/form/constants.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZE_PADDING_MAP = void 0;
+var SIZE_PADDING_MAP = exports.SIZE_PADDING_MAP = {
+  L: {
+    paddingTop: 16,
+    paddingBottom: 16
+  },
+  M: {
+    paddingTop: 13,
+    paddingBottom: 13
+  },
+  XS: {
+    paddingTop: 10,
+    paddingBottom: 10
+  }
+};

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

@@ -0,0 +1 @@
+export declare const DefaultLogo: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultLogo = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var DefaultLogo = exports.DefaultLogo = function DefaultLogo() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 26,
+    height: 26,
+    fill: "none"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    fill: "#353F47",
+    fillOpacity: 0.3,
+    d: "M15.968 18.652c-1.178.89-2.728 1.323-4.181 1.214-1.457-.096-2.812-.733-3.68-1.67-.255-.274-.21-.679.099-.904a.808.808 0 0 1 .925.003c1.576 1.143 3.878.734 4.804-.46.458-.591 1.37-.741 2.036-.335.667.405.836 1.213.378 1.804a1.37 1.37 0 0 1-.25.248l-.131.1Z"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    fill: "#353F47",
+    fillOpacity: 0.5,
+    d: "M4.333 11.324a2.06 2.06 0 0 1 2.058 2.058 2.06 2.06 0 0 1-2.058 2.059 2.06 2.06 0 0 1-2.059-2.059 2.06 2.06 0 0 1 2.059-2.058Zm0-2.275a4.333 4.333 0 1 0 0 8.666 4.333 4.333 0 0 0 0-8.666Z"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    fill: "#353F47",
+    fillOpacity: 0.3,
+    d: "M20.584 9.244a3.059 3.059 0 0 1 3.055 3.055 3.058 3.058 0 0 1-3.055 3.055 3.058 3.058 0 0 1-3.055-3.055 3.059 3.059 0 0 1 3.055-3.055Zm0-2.362a5.416 5.416 0 1 0 0 10.833 5.416 5.416 0 0 0 0-10.833Z"
+  }));
+};

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

@@ -0,0 +1 @@
+export declare const QiwiLogo: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QiwiLogo = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var QiwiLogo = exports.QiwiLogo = function QiwiLogo() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "26",
+    height: "26",
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: "13",
+    cy: "13",
+    r: "13",
+    fill: "#FF8C00"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M17.6489 15.7718C17.6843 16.039 17.6046 16.1548 17.516 16.1548C17.4274 16.1548 17.3033 16.0479 17.1704 15.8342C17.0375 15.6204 16.9844 15.3799 17.0552 15.2552C17.0995 15.1751 17.1881 15.1394 17.3122 15.184C17.5337 15.2552 17.6223 15.6115 17.6489 15.7718ZM16.3996 16.3507C16.6743 16.5823 16.754 16.8584 16.6122 17.0455C16.5325 17.1523 16.3996 17.2058 16.249 17.2058C16.0983 17.2058 15.9389 17.1523 15.8325 17.0544C15.5845 16.8406 15.5136 16.4843 15.6731 16.2884C15.7351 16.2082 15.8414 16.1637 15.9566 16.1637C16.1072 16.1726 16.2578 16.2439 16.3996 16.3507ZM15.9389 18.5774C17.1084 18.5774 18.3754 18.9782 19.7753 20.234C19.9171 20.3587 20.1031 20.2073 19.9791 20.047C18.5969 18.2924 17.321 17.9628 16.054 17.6778C14.4947 17.3305 13.6972 16.4487 13.1391 15.4868C13.0239 15.2909 12.9796 15.3265 12.9707 15.5759C12.9619 15.8787 12.9796 16.2795 13.0505 16.6714C12.9884 16.6714 12.9264 16.6714 12.8644 16.6714C10.6405 16.6714 8.83304 14.8544 8.83304 12.6189C8.83304 10.3833 10.6405 8.56634 12.8644 8.56634C15.0883 8.56634 16.8958 10.3833 16.8958 12.6189C16.8958 12.7792 16.8869 12.9395 16.8692 13.0909C16.5768 13.0375 15.992 13.0286 15.5845 13.0642C15.4338 13.0731 15.4516 13.1533 15.5667 13.1711C16.8958 13.4116 17.8172 14.2399 18.021 15.754C18.0299 15.7896 18.0742 15.7985 18.0919 15.7718C18.6412 14.8544 18.9513 13.7767 18.9513 12.6278C18.9513 9.24324 16.2224 6.5 12.8555 6.5C9.48869 6.5 6.75977 9.24324 6.75977 12.6278C6.75977 16.0123 9.48869 18.7555 12.8555 18.7555C13.7504 18.7555 14.6364 18.5774 15.9389 18.5774Z",
+    fill: "white"
+  }));
+};

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+type TProps = {
+    bgColor: string;
+    borderColor: string;
+};
+export declare const SelectedRadioIcon: FC<TProps>;
+export {};

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectedRadioIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var SelectedRadioIcon = exports.SelectedRadioIcon = function SelectedRadioIcon(_ref) {
+  var bgColor = _ref.bgColor,
+    borderColor = _ref.borderColor;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    fill: "none"
+  }, /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: 10,
+    cy: 10,
+    r: 9.167,
+    fill: borderColor
+  }), /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: 10,
+    cy: 10,
+    r: 4.167,
+    fill: bgColor
+  }));
+};

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+type TProps = {
+    borderColor: string;
+};
+export declare const UnselectedRadioIcon: FC<TProps>;
+export {};

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnselectedRadioIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var UnselectedRadioIcon = exports.UnselectedRadioIcon = function UnselectedRadioIcon(_ref) {
+  var borderColor = _ref.borderColor;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    fill: "none"
+  }, /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: 10,
+    cy: 10,
+    r: 8.25,
+    stroke: borderColor,
+    strokeOpacity: 0.3,
+    strokeWidth: 1.5
+  }));
+};

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

@@ -0,0 +1 @@
+export declare const WbPayIcon: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WbPayIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var WbPayIcon = exports.WbPayIcon = function WbPayIcon() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "56",
+    height: "26",
+    viewBox: "0 0 56 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("rect", {
+    width: "56",
+    height: "26",
+    rx: "10",
+    fill: "url(#paint0_linear_10675_23361)"
+  }), /*#__PURE__*/_react["default"].createElement("g", {
+    clipPath: "url(#clip0_10675_23361)"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M29.4834 10.2451H31.1105V10.9286C31.6721 10.3681 32.4353 10.0264 33.3569 10.0264C35.4448 10.0264 36.9136 11.571 36.9136 13.4848C36.9136 15.3985 35.4448 16.9432 33.3569 16.9432C31.2689 16.9432 31.6577 16.6014 31.1105 16.0683V19.308H29.4834V10.2314V10.2451ZM35.272 13.4848C35.272 12.3639 34.336 11.53 33.1985 11.53C32.0609 11.53 31.1105 12.3912 31.1105 13.4848C31.1105 14.5783 32.0753 15.4532 33.1985 15.4532C34.3216 15.4532 35.272 14.6057 35.272 13.4848Z",
+    fill: "#F6F6F9"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M41.0323 10.0127C41.9538 10.0127 42.7314 10.3681 43.2786 10.9149V10.2314H44.9058V16.7108H43.2786V16.0683C42.717 16.6014 41.9538 16.9432 41.0323 16.9432C38.9443 16.9432 37.4756 15.4122 37.4756 13.4848C37.4756 11.5574 38.9443 10.0264 41.0323 10.0264V10.0127ZM43.293 13.4848C43.293 12.3775 42.3282 11.53 41.2051 11.53C40.0819 11.53 39.1315 12.3639 39.1315 13.4848C39.1315 14.6057 40.0675 15.4532 41.2051 15.4532C42.3426 15.4532 43.293 14.5783 43.293 13.4848Z",
+    fill: "#F6F6F9"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M48.548 16.3281L45.3369 10.2314H47.1945L49.3544 14.551L51.0679 10.2314H52.9111L48.8936 19.5541H47.0937L48.5336 16.3281H48.548Z",
+    fill: "#F6F6F9"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M23.6373 6.19916C23.0325 5.07825 22.0821 4.17606 20.9013 3.60194C19.5622 2.95947 17.8054 2.95947 14.3064 2.95947H13.1112C9.59771 2.95947 7.85536 2.95947 6.51621 3.60194C5.33545 4.17606 4.38508 5.07825 3.78029 6.19916C3.10352 7.47042 3.10352 9.13811 3.10352 12.4598V13.526C3.10352 16.8614 3.10352 18.5154 3.78029 19.7867C4.38508 20.9076 5.33545 21.8098 6.51621 22.3839C7.85536 23.0264 9.61211 23.0264 13.1112 23.0264H14.3064C17.8198 23.0264 19.5622 23.0264 20.9013 22.3839C22.0821 21.8098 23.0325 20.9076 23.6373 19.7867C24.314 18.5154 24.314 16.8477 24.314 13.526V12.4598C24.314 9.12444 24.314 7.47042 23.6373 6.19916ZM12.4344 16.67H11.3113L9.7417 12.8426L8.18655 16.67H7.06339L4.47147 10.2453H6.22822L7.71137 13.9088L9.19452 10.2453H10.3177L11.7864 13.9088L13.2696 10.2453H15.0119L12.42 16.67H12.4344ZM19.087 16.8887C17.0855 16.8887 15.4583 15.3578 15.4583 13.444V7.18336H17.0711V10.5871C17.6471 10.218 18.3382 9.99929 19.087 9.99929C21.1029 9.99929 22.7157 11.5029 22.7157 13.444C22.7157 15.3851 21.0597 16.9024 19.0726 16.9024L19.087 16.8887Z",
+    fill: "#F6F6F9"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M19.1019 11.5439C17.9499 11.5439 17.0859 12.3641 17.0859 13.444C17.0859 14.5239 18.0075 15.3577 19.1019 15.3577C20.1962 15.3577 21.1322 14.4966 21.1322 13.444C21.1322 12.3915 20.2682 11.5439 19.1163 11.5439H19.1019Z",
+    fill: "#F6F6F9"
+  })), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("linearGradient", {
+    id: "paint0_linear_10675_23361",
+    x1: "-0.117975",
+    y1: "1.56069",
+    x2: "57.8089",
+    y2: "17.4528",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/_react["default"].createElement("stop", {
+    stopColor: "#ED3CCA"
+  }), /*#__PURE__*/_react["default"].createElement("stop", {
+    offset: "0.145833",
+    stopColor: "#DF34D2"
+  }), /*#__PURE__*/_react["default"].createElement("stop", {
+    offset: "0.291667",
+    stopColor: "#D02BD9"
+  }), /*#__PURE__*/_react["default"].createElement("stop", {
+    offset: "0.432292",
+    stopColor: "#BF22E1"
+  }), /*#__PURE__*/_react["default"].createElement("stop", {
+    offset: "0.572917",
+    stopColor: "#AE1AE8"
+  }), /*#__PURE__*/_react["default"].createElement("stop", {
+    offset: "0.713542",
+    stopColor: "#9A10F0"
+  }), /*#__PURE__*/_react["default"].createElement("stop", {
+    offset: "0.854167",
+    stopColor: "#8306F7"
+  }), /*#__PURE__*/_react["default"].createElement("stop", {
+    offset: "1",
+    stopColor: "#7C1AF8"
+  })), /*#__PURE__*/_react["default"].createElement("clipPath", {
+    id: "clip0_10675_23361"
+  }, /*#__PURE__*/_react["default"].createElement("rect", {
+    width: "49.6",
+    height: "19.8824",
+    fill: "white",
+    transform: "translate(3.2002 3.05859)"
+  }))));
+};

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

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+type TProps = {
+    title: string;
+    children?: ReactNode;
+    isActive?: boolean;
+    isDisabled?: boolean;
+    onClick?: () => void;
+    icon?: ReactNode;
+    comment?: string;
+    isCircleIconLayout?: boolean;
+};
+export declare const PaymentCard: FC<TProps>;
+export {};

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

@@ -0,0 +1,55 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentCard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _DefaultLogo = require("./components/DefaultLogo");
+var _SelectedRadioIcon = require("./components/SelectedRadioIcon");
+var _UnselectedRadioIcon = require("./components/UnselectedRadioIcon");
+var _palette = require("../../../palette");
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var PaymentCard = exports.PaymentCard = function PaymentCard(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+    onClick = _ref.onClick,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    children = _ref.children,
+    comment = _ref.comment,
+    _ref$isCircleIconLayo = _ref.isCircleIconLayout,
+    isCircleIconLayout = _ref$isCircleIconLayo === void 0 ? true : _ref$isCircleIconLayo;
+  var palette = (0, _palette.useComponentPalette)('paymentCard');
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    $pallete: palette,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    onClick: isDisabled ? undefined : onClick
+  }, /*#__PURE__*/_react["default"].createElement(S.RadioWrapper, null, isActive ? /*#__PURE__*/_react["default"].createElement(_SelectedRadioIcon.SelectedRadioIcon, {
+    bgColor: palette.radioBgActive,
+    borderColor: palette.radioBorderActive
+  }) : /*#__PURE__*/_react["default"].createElement(_UnselectedRadioIcon.UnselectedRadioIcon, {
+    borderColor: palette.radioBorderInactive
+  })), /*#__PURE__*/_react["default"].createElement(S.Content, null, /*#__PURE__*/_react["default"].createElement(S.Title, {
+    $pallete: palette,
+    variant: "bodyMRegular",
+    $ellipsis: !children
+  }, 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, {
+    $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"
+  }, comment));
+};

package/dist/components/payment/PaymentCard/index.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+import { PaymentCard } from '.';
+declare const meta: Meta<typeof PaymentCard>;
+export default meta;
+export declare const Default: StoryObj<typeof PaymentCard>;
+export declare const DefaultCircleLogo: StoryObj<typeof PaymentCard>;
+export declare const NotCircleLogo: StoryObj<typeof PaymentCard>;
+export declare const WithChildren: StoryObj<typeof PaymentCard>;
+export declare const OverflowText: StoryObj<typeof PaymentCard>;
+export declare const OverflowTextWithChildren: StoryObj<typeof PaymentCard>;

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

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithChildren = exports.OverflowTextWithChildren = exports.OverflowText = exports.NotCircleLogo = exports.DefaultCircleLogo = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+var _QiwiLogo = require("./components/QiwiLogo");
+var _WbPayIcon = require("./components/WbPayIcon");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var meta = {
+  title: 'payment/PaymentCard',
+  component: _.PaymentCard,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    title: 'Альфа-банк',
+    isActive: false,
+    isDisabled: false,
+    comment: 'Комиссия 10 руб'
+  }
+};
+var DefaultCircleLogo = exports.DefaultCircleLogo = {
+  args: {
+    title: 'Альфа-банк',
+    isActive: false,
+    isDisabled: false,
+    comment: 'Комиссия 10 руб',
+    icon: /*#__PURE__*/_react["default"].createElement(_QiwiLogo.QiwiLogo, null)
+  }
+};
+var NotCircleLogo = exports.NotCircleLogo = {
+  args: {
+    title: 'Альфа-банк',
+    isActive: false,
+    isDisabled: false,
+    comment: 'Комиссия 10 руб',
+    icon: /*#__PURE__*/_react["default"].createElement(_WbPayIcon.WbPayIcon, null),
+    isCircleIconLayout: false
+  }
+};
+var WithChildren = exports.WithChildren = {
+  args: {
+    title: 'Альфа-банк',
+    isActive: false,
+    isDisabled: false,
+    children: /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: 22,
+        width: 121,
+        background: 'green'
+      }
+    }),
+    comment: 'Комиссия 10 руб'
+  }
+};
+var OverflowText = exports.OverflowText = {
+  args: {
+    title: 'Длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование ',
+    isActive: false,
+    isDisabled: false,
+    comment: 'Комиссия 10 руб'
+  }
+};
+var OverflowTextWithChildren = exports.OverflowTextWithChildren = {
+  args: {
+    title: 'Длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование ',
+    isActive: false,
+    isDisabled: false,
+    comment: 'Комиссия 10 руб',
+    children: /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: 22,
+        width: 121,
+        background: 'green'
+      }
+    })
+  }
+};

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

@@ -0,0 +1,14 @@
+import { TAbstractPalette } from '../../../palette';
+export type TPaymentCardPalette = {
+    bgActive: string;
+    borderActive: string;
+    borderInactive: string;
+    title: string;
+    iconBg: string;
+    comment: string;
+    radioBgActive: string;
+    radioBorderActive: string;
+    radioBorderInactive: string;
+    commentBg: string;
+};
+export declare const generatePaymentCardPalette: (abstractPalette: TAbstractPalette) => TPaymentCardPalette;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generatePaymentCardPalette = void 0;
+var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var generatePaymentCardPalette = exports.generatePaymentCardPalette = function generatePaymentCardPalette(abstractPalette) {
+  return {
+    bgActive: (0, _hexToRgba["default"])(abstractPalette.secondary, 0.1),
+    borderActive: abstractPalette.secondary,
+    borderInactive: abstractPalette.neutralFoggy,
+    title: abstractPalette.primary,
+    iconBg: abstractPalette.neutralLight,
+    comment: abstractPalette.neutralBrutal,
+    radioBgActive: abstractPalette.base,
+    radioBorderActive: abstractPalette.secondary,
+    radioBorderInactive: abstractPalette.primary,
+    commentBg: abstractPalette.base
+  };
+};

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { TPaymentCardPalette } from './palette';
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, {
+    $isActive: boolean;
+    $isDisabled: boolean;
+    $pallete: TPaymentCardPalette;
+}>> & 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, {
+    $ellipsis: boolean;
+    $pallete: TPaymentCardPalette;
+}>> & 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<import("../../common/Typography").TProps & 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>>;