@salutejs/plasma-new-hope 0.384.0-dev.0 → 0.385.0-dev.0

package/dist/css/es/index.js

@@ -1,3 +1,5 @@
+import * as index from './plasmaCore/index.js';
+export { index as plasmaCore };
 export { css } from './engines/index.js';
 export { cx } from './utils/index.js';
 export { ButtonBase } from './components/ButtonBase/index.js';

package/dist/css/es/plasmaCore/components/Badge/Badge.js

@@ -0,0 +1,60 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { caption } from '../../utils/tokens/typography.js';
+
+var _excluded = ["size", "text", "contentLeft"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+/**
+ * Размеры в ремах.
+ */
+var badgeSizes = {
+  l: {
+    textMarginX: '0.25rem',
+    textMarginLeftAfterContent: '0.25rem'
+  },
+  s: {
+    textMarginX: '0.125rem',
+    textMarginLeftAfterContent: '0.125rem'
+  }
+};
+var badgeRootSizes = {
+  l: {
+    height: '1.5rem',
+    padding: '0.25rem',
+    minWidth: '1.5rem',
+    borderRadius: '0.75rem',
+    fontSize: '0.75rem'
+  },
+  s: {
+    height: '1rem',
+    padding: '0.125rem',
+    minWidth: '1rem',
+    borderRadius: '0.5rem',
+    fontSize: '0.625rem'
+  }
+};
+var StyledText = /*#__PURE__*/styled.span(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral([""])));
+var StyledContent = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n"])));
+var StyledBadge = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    justify-content: center;\n\n    width: max-content;\n\n    ", ";\n"])), caption, function (_ref) {
+  var size = _ref.size,
+    circled = _ref.circled;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        ", ";\n        ", "\n\n        ", " {\n            margin-left: ", ";\n            margin-right: ", ";\n        }\n\n        ", " ~ ", " {\n            margin-left: ", ";\n        }\n    "])), badgeRootSizes[size], circled && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                width: ", ";\n                padding-left: 0;\n                padding-right: 0;\n            "])), badgeRootSizes[size].minWidth), StyledText, badgeSizes[size].textMarginX, badgeSizes[size].textMarginX, StyledContent, StyledText, badgeSizes[size].textMarginLeftAfterContent);
+});
+/**
+ * Небольшая бирка для ячеек и карточек.
+ * Компонент может отображаться в нескольких размерах и цветах, может содержать текст и/или иконку.
+ */
+var Badge = function Badge(_ref2) {
+  var _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'l' : _ref2$size,
+    text = _ref2.text,
+    contentLeft = _ref2.contentLeft,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement(StyledBadge, _extends({
+    size: size
+  }, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContent, null, contentLeft), text && /*#__PURE__*/React.createElement(StyledText, null, text));
+};
+
+export { Badge, badgeRootSizes, badgeSizes };

package/dist/css/es/plasmaCore/components/Button/Button.js

@@ -0,0 +1,65 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import styled from 'styled-components';
+import { applyDisabled } from '../../utils/mixins/applyDisabled.js';
+import { applyBlur } from '../../utils/mixins/blur.js';
+import { applyEllipsis } from '../../utils/mixins/applyEllipsis.js';
+import { Spinner } from '../Spinner/Spinner.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+/**
+ * Корневой элемент для стилизации кнопки.
+ * Должен быть передан в функцию `createButton`.
+ */
+var ButtonRoot = /*#__PURE__*/styled.button(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    justify-content: center;\n\n    appearance: none;\n    border: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    a& {\n        text-decoration: none;\n    }\n\n    &:focus {\n        outline: none;\n    }\n\n    ", "\n\n    ", "\n"])), function (_ref) {
+  var isLoading = _ref.$isLoading;
+  return !isLoading && applyDisabled;
+}, applyBlur);
+
+/**
+ * Элемент лоадера для кнопки.
+ */
+var ButtonLoader = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: absolute;\n"])));
+
+/**
+ * Спиннер по умолчанию с фиксированной шириной.
+ */
+var StyledSpinner = /*#__PURE__*/styled(Spinner)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n    width: 1.375rem;\n"])));
+
+/**
+ * Обёртка для содержимого кнопки.
+ */
+var ButtonContentWrapper = /*#__PURE__*/styled.span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    align-items: inherit;\n    justify-content: inherit;\n    width: 100%;\n\n    ", "\n"])), function (_ref2) {
+  var isLoading = _ref2.$isLoading;
+  return isLoading && 'opacity: 0;';
+});
+
+/**
+ * A text wrapping element, that used when `text` prop is passed.
+ * @private
+ */
+var ButtonText = /*#__PURE__*/styled.span(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n    box-sizing: border-box;\n\n    ", "\n\n    ", "\n    ", "\n"])), applyEllipsis, function (_ref3) {
+  var isContentLeft = _ref3.$isContentLeft;
+  return isContentLeft && 'margin-left: 0.375rem;';
+}, function (_ref4) {
+  var isContentRight = _ref4.$isContentRight;
+  return isContentRight && 'margin-right: 0.375rem;';
+});
+
+/**
+ * Базовая кнопка.
+ * @deprecated
+ */
+var Button = /*#__PURE__*/React.forwardRef(
+// eslint-disable-next-line prefer-arrow-callback
+function Button(props, ref) {
+  return /*#__PURE__*/React.createElement(ButtonRoot, _extends({
+    ref: ref
+  }, props));
+});
+Button.defaultProps = {
+  pin: 'square-square',
+  outlined: false
+};
+
+export { Button, ButtonContentWrapper, ButtonLoader, ButtonRoot, ButtonText, StyledSpinner };

package/dist/css/es/plasmaCore/components/Button/Button.mixins.js

@@ -0,0 +1,41 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { css } from 'styled-components';
+import { convertRoundnessMatrix } from '../../utils/utils/roundness.js';
+import { addFocus } from '../../utils/mixins/addFocus.js';
+
+var _templateObject;
+/**
+ * Создание специализированного миксина со своими размерами и типографикой.
+ * @param {Record<string, object>} sizes
+ * @param {Record<string, object>} typos
+ */
+var getButtonSizesMixin = function getButtonSizesMixin(sizes, typos) {
+  return function (_ref) {
+    var size = _ref.size,
+      pin = _ref.pin,
+      outlined = _ref.outlined,
+      focused = _ref.focused,
+      isContentLeft = _ref.$isContentLeft,
+      isContentRight = _ref.$isContentRight,
+      shiftLeft = _ref.shiftLeft,
+      shiftRight = _ref.shiftRight,
+      square = _ref.square,
+      stretch = _ref.stretch,
+      theme = _ref.theme;
+    var paddingX = sizes[size].paddingX;
+    if (square) {
+      paddingX = sizes[size].paddingY;
+    } else if (stretch) {
+      paddingX = sizes[size].paddingStretchX;
+    } else if (isContentLeft || isContentRight) {
+      paddingX = sizes[size].paddingContentX;
+    }
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        height: ", ";\n        padding: ", " ", ";\n        border-radius: ", ";\n\n        ", "\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n    "])), sizes[size].height, sizes[size].paddingY, paddingX, convertRoundnessMatrix(pin, sizes[size].radius, sizes[size].radiusCircle), stretch && 'width: 100%;', square && " width: ".concat(sizes[size].height, ";"), shiftLeft && "margin-left: calc(-1 * ".concat(paddingX, ");"), shiftRight && "margin-right: calc(-1 * ".concat(paddingX, ");"), typos[size], addFocus(_objectSpread2(_objectSpread2({}, theme), {}, {
+      focused: focused,
+      outlined: outlined,
+      outlineRadius: convertRoundnessMatrix(pin, "calc(".concat(sizes[size].radius, " + var(--plasma-outline-size))"), "calc(".concat(sizes[size].radiusCircle, " + var(--plasma-outline-size))"))
+    })));
+  };
+};
+
+export { getButtonSizesMixin };

package/dist/css/es/plasmaCore/components/Button/Button.props.js

@@ -0,0 +1,60 @@
+import { views } from '../../utils/mixins/applyView.js';
+import { button1, button2 } from '../../utils/tokens/typography.js';
+
+/**
+ * Цветовые виды.
+ */
+var buttonViews = {
+  primary: views.primary,
+  secondary: views.secondary,
+  success: views.success,
+  warning: views.warning,
+  critical: views.critical,
+  checked: views.checked,
+  overlay: views.overlay,
+  clear: views.clear
+};
+
+/**
+ * Размеры в rem в соответствии с дизайном.
+ */
+var buttonSizes = {
+  l: {
+    height: 'var(--plasma-button-l-height)',
+    paddingY: 'var(--plasma-button-l-padding-y)',
+    paddingX: 'var(--plasma-button-l-padding-x)',
+    paddingContentX: 'var(--plasma-button-l-padding-content-x)',
+    paddingStretchX: 'var(--plasma-button-l-padding-stretch-x)',
+    radius: 'var(--plasma-button-l-radius)',
+    radiusCircle: 'var(--plasma-button-l-radius-circle)'
+  },
+  m: {
+    height: 'var(--plasma-button-m-height)',
+    paddingY: 'var(--plasma-button-m-padding-y)',
+    paddingX: 'var(--plasma-button-m-padding-x)',
+    paddingContentX: 'var(--plasma-button-m-padding-content-x)',
+    paddingStretchX: 'var(--plasma-button-m-padding-stretch-x)',
+    radius: 'var(--plasma-button-m-radius)',
+    radiusCircle: 'var(--plasma-button-m-radius-circle)'
+  },
+  s: {
+    height: 'var(--plasma-button-s-height)',
+    paddingY: 'var(--plasma-button-s-padding-y)',
+    paddingX: 'var(--plasma-button-s-padding-x)',
+    paddingContentX: 'var(--plasma-button-s-padding-content-x)',
+    paddingStretchX: 'var(--plasma-button-s-padding-stretch-x)',
+    radius: 'var(--plasma-button-s-radius)',
+    radiusCircle: 'var(--plasma-button-s-radius-circle)'
+  }
+};
+
+/**
+ * Размеры типографики кнопки.
+ */
+var buttonTypography = {
+  l: button1,
+  m: button1,
+  s: button2
+};
+
+export { buttonSizes, buttonTypography, buttonViews };

package/dist/css/es/plasmaCore/components/Button/createButton.js

@@ -0,0 +1,51 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { forwardRef } from 'react';
+import { ButtonLoader, ButtonContentWrapper, ButtonText, ButtonRoot, StyledSpinner } from './Button.js';
+
+var _excluded = ["children", "text", "contentLeft", "contentRight", "square", "deviceScale", "loader", "disabled", "isLoading", "type"];
+/**
+ * Функция для создания компонента Button,
+ * что дает возможность кастомизировать вид, пропсы и т.п.,
+ * при этом сохраняя в базе общий интерфейс.
+ */
+function createButton() {
+  var Root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ButtonRoot;
+  // eslint-disable-next-line prefer-arrow-callback
+  return /*#__PURE__*/forwardRef(function Button(_ref, ref) {
+    var children = _ref.children,
+      text = _ref.text,
+      contentLeft = _ref.contentLeft,
+      contentRight = _ref.contentRight,
+      square = _ref.square,
+      deviceScale = _ref.deviceScale,
+      _ref$loader = _ref.loader,
+      loader = _ref$loader === void 0 ? /*#__PURE__*/React.createElement(StyledSpinner, {
+        color: "currentColor",
+        size: 56,
+        deviceScale: deviceScale
+      }) : _ref$loader,
+      disabled = _ref.disabled,
+      isLoading = _ref.isLoading,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    var isContentLeft = Boolean(contentLeft);
+    var isContentRight = Boolean(contentRight);
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      ref: ref,
+      type: type,
+      $isContentLeft: isContentLeft,
+      $isContentRight: isContentRight,
+      $isLoading: isLoading,
+      disabled: isLoading || disabled,
+      square: square !== undefined ? square : !text && !children
+    }, rest), isLoading && /*#__PURE__*/React.createElement(ButtonLoader, null, loader), /*#__PURE__*/React.createElement(ButtonContentWrapper, {
+      $isLoading: isLoading
+    }, children, !children && contentLeft, !children && text && /*#__PURE__*/React.createElement(ButtonText, {
+      $isContentLeft: isContentLeft,
+      $isContentRight: isContentRight
+    }, text), !children && contentRight));
+  });
+}
+
+export { createButton };

package/dist/css/es/plasmaCore/components/Card/Card.js

@@ -0,0 +1,52 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Body1 } from '../Typography/Body.js';
+import { applyDisabled } from '../../utils/mixins/applyDisabled.js';
+import { applyRoundness, radiuses } from '../../utils/mixins/applyRoundness.js';
+import { surfaceCard } from '../../utils/tokens/colors.js';
+import { addFocus, syntheticFocus } from '../../utils/mixins/addFocus.js';
+
+var _excluded = ["roundness", "children"];
+var _templateObject, _templateObject2, _templateObject3;
+
+// В этих константах задаем размеры в em, чтобы не зависеть напрямую от пикселей
+// В то же время в числителях - значения в пикселях, взятые из макета
+var fontSize = 16;
+var shadowOffset = 8 / fontSize;
+var shadowSize = 24 / fontSize;
+var outlineSize = 2 / fontSize;
+var DEFAULT_ROUNDNESS = 20;
+var StyledCard = /*#__PURE__*/styled(Body1)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", "\n    ", ";\n\n    position: relative;\n\n    display: flex;\n    box-sizing: border-box;\n    flex-direction: column;\n    flex-shrink: 0;\n\n    background: ", ";\n    box-shadow: 0 ", "em ", "em rgba(0, 0, 0, 0.1);\n\n    transition: ", ";\n\n    ", "\n"])), applyDisabled, applyRoundness, surfaceCard, shadowOffset, shadowSize, function (_ref) {
+  var theme = _ref.theme;
+  return theme.lowPerformance ? 'unset' : 'transform 0.4s ease-in-out';
+}, function (_ref2) {
+  var focused = _ref2.focused,
+    outlined = _ref2.outlined,
+    roundness = _ref2.roundness,
+    scaleOnFocus = _ref2.scaleOnFocus,
+    theme = _ref2.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n\n        ", "\n\n        &:focus {\n            outline: none;\n        }\n    "])), addFocus({
+    lowPerformance: theme.lowPerformance,
+    focused: focused,
+    outlined: outlined,
+    outlineSize: "".concat(outlineSize, "rem"),
+    outlineRadius: "".concat(radiuses[roundness] + outlineSize, "rem")
+  }), scaleOnFocus && syntheticFocus(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                & {\n                    transform: scale(1.04);\n                }\n            "]))), focused));
+});
+/**
+ * Контейнер со скругленными углами с возможностью фокусировки на нем.
+ */
+// eslint-disable-next-line prefer-arrow-callback
+var Card = /*#__PURE__*/React.forwardRef(function Card(_ref3, ref) {
+  var _ref3$roundness = _ref3.roundness,
+    roundness = _ref3$roundness === void 0 ? DEFAULT_ROUNDNESS : _ref3$roundness,
+    children = _ref3.children,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  return /*#__PURE__*/React.createElement(StyledCard, _extends({
+    ref: ref,
+    roundness: roundness
+  }, rest), children);
+});
+
+export { Card, StyledCard };

package/dist/css/es/plasmaCore/components/Card/CardBody.js

@@ -0,0 +1,11 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import styled from 'styled-components';
+
+var _templateObject;
+/**
+ * Помещается в ``<Card />`` и скругляет рамки содержимого внутри него.
+ * Обязательно к использованию для корректного отображения скругленных углов контента.
+ */
+var CardBody = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    overflow: hidden;\n    flex: 1;\n    flex-direction: column;\n\n    box-sizing: content-box;\n    width: 100%;\n\n    border-radius: inherit;\n"])));
+
+export { CardBody };

package/dist/css/es/plasmaCore/components/Card/CardContent.js

@@ -0,0 +1,21 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import styled, { css } from 'styled-components';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/**
+ * Компонент для отображения как текстового, так и любого другого контента.
+ */
+var CardContent = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n\n    position: relative;\n\n    box-sizing: border-box;\n    padding: ", "rem 1rem;\n\n    border-radius: inherit;\n\n    ", "\n\n    ", "\n"])), function (_ref) {
+  var compact = _ref.compact;
+  return compact ? 0.375 : 1;
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            opacity: 0.5;\n        "])));
+}, function (_ref3) {
+  var cover = _ref3.cover,
+    _ref3$coverGradient = _ref3.coverGradient,
+    coverGradient = _ref3$coverGradient === void 0 ? true : _ref3$coverGradient;
+  return cover && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n\n            justify-content: flex-end;\n\n            ", ";\n        "])), coverGradient && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.74) 100%);\n            "]))));
+});
+
+export { CardContent };

package/dist/css/es/plasmaCore/components/Card/CardMedia.js

@@ -0,0 +1,36 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends, taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Image } from '../Image/Image.js';
+
+var _excluded = ["disabled", "placeholder", "style", "children", "className"];
+var _templateObject, _templateObject2, _templateObject3;
+var StyledImage = /*#__PURE__*/styled(Image)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    background-size: cover;\n\n    ", "\n"])), function (_ref) {
+  var $disabled = _ref.$disabled;
+  return $disabled && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            opacity: 0.5;\n        "])));
+});
+var StyledRoot = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n"])));
+
+/**
+ * Компонент для отображения картинок.
+ */
+var CardMedia = function CardMedia(_ref2) {
+  var disabled = _ref2.disabled,
+    placeholder = _ref2.placeholder,
+    style = _ref2.style,
+    children = _ref2.children,
+    className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var imgStyle = _objectSpread2({}, style);
+  if (placeholder && !props.src) {
+    imgStyle.backgroundImage = "url('".concat(placeholder, "')");
+  }
+  return /*#__PURE__*/React.createElement(StyledRoot, {
+    className: className
+  }, /*#__PURE__*/React.createElement(StyledImage, _extends({
+    $disabled: disabled,
+    style: imgStyle
+  }, props)), children);
+};
+
+export { CardMedia };

package/dist/css/es/plasmaCore/components/Card/CardPrice.js

@@ -0,0 +1,28 @@
+import { objectWithoutProperties as _objectWithoutProperties, taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import styled from 'styled-components';
+import { Body2 } from '../Typography/Body.js';
+import { Price } from '../Price/Price.js';
+import { primary, tertiary, buttonAccent } from '../../utils/tokens/colors.js';
+
+var _excluded = ["count", "currency", "oldPrice", "price"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var StyledRoot = /*#__PURE__*/styled(Body2)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    box-sizing: border-box;\n\n    margin-top: 0.75rem;\n"])));
+var StyledPrice = /*#__PURE__*/styled(Price)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n    height: 2.5rem;\n    color: ", ";\n"])), primary);
+var StyledOldPrice = /*#__PURE__*/styled(Price)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n    height: 2.5rem;\n    margin-left: 0.5rem;\n    color: ", ";\n"])), tertiary);
+var StyledCount = /*#__PURE__*/styled(Body2)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n    box-sizing: border-box;\n    height: 2.5rem;\n    margin-left: 0.5rem;\n\n    color: ", ";\n"])), buttonAccent);
+var CardPrice = function CardPrice(_ref) {
+  var count = _ref.count,
+    currency = _ref.currency,
+    oldPrice = _ref.oldPrice,
+    price = _ref.price,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledRoot, rest, /*#__PURE__*/React.createElement(StyledPrice, {
+    currency: currency
+  }, price), oldPrice && /*#__PURE__*/React.createElement(StyledOldPrice, {
+    currency: currency,
+    stroke: true
+  }, oldPrice), count ? /*#__PURE__*/React.createElement(StyledCount, null, "\xD7", count) : '');
+};
+
+export { CardPrice };

package/dist/css/es/plasmaCore/components/Card/CardTypography.js

@@ -0,0 +1,38 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import styled, { css } from 'styled-components';
+import { Headline1, Headline2, Headline3 } from '../Typography/Headline.js';
+import { Footnote1, Footnote2 } from '../Typography/Footnote.js';
+import { ParagraphText1, ParagraphText2 } from '../Typography/Paragraph.js';
+import { primary, secondary, tertiary } from '../../utils/tokens/colors.js';
+import { Body1, Body2 } from '../Typography/Body.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1;
+var views = {
+  primary: primary,
+  secondary: secondary,
+  tertiary: tertiary
+};
+var linesMixin = function linesMixin(_ref) {
+  var _ref$lines = _ref.lines,
+    lines = _ref$lines === void 0 ? 2 : _ref$lines;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    overflow: hidden;\n    box-sizing: border-box;\n\n    white-space: normal;\n\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: ", ";\n"])), lines);
+};
+var viewMixin = function viewMixin(_ref2) {
+  var _ref2$view = _ref2.view,
+    view = _ref2$view === void 0 ? 'primary' : _ref2$view;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transition: ", ";\n    color: ", ";\n"])), function (_ref3) {
+    var theme = _ref3.theme;
+    return theme.lowPerformance ? 'unset' : 'color 0.1s ease-in-out';
+  }, views[view]);
+};
+var CardHeadline1 = /*#__PURE__*/styled(Headline1)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n"])), viewMixin);
+var CardHeadline2 = /*#__PURE__*/styled(Headline2)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n"])), viewMixin);
+var CardHeadline3 = /*#__PURE__*/styled(Headline3)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n"])), viewMixin);
+var CardFootnote1 = /*#__PURE__*/styled(Footnote1)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n"])), viewMixin);
+var CardFootnote2 = /*#__PURE__*/styled(Footnote2)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n"])), viewMixin);
+var CardBody1 = /*#__PURE__*/styled(Body1)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n    ", ";\n"])), linesMixin, viewMixin);
+var CardBody2 = /*#__PURE__*/styled(Body2)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n    ", ";\n"])), linesMixin, viewMixin);
+var CardParagraph1 = /*#__PURE__*/styled(ParagraphText1)(_templateObject0 || (_templateObject0 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n    ", ";\n"])), linesMixin, viewMixin);
+var CardParagraph2 = /*#__PURE__*/styled(ParagraphText2)(_templateObject1 || (_templateObject1 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n    ", ";\n"])), linesMixin, viewMixin);
+
+export { CardBody1, CardBody2, CardFootnote1, CardFootnote2, CardHeadline1, CardHeadline2, CardHeadline3, CardParagraph1, CardParagraph2 };

package/dist/css/es/plasmaCore/components/Field/Field.js

@@ -0,0 +1,47 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import styled, { css } from 'styled-components';
+import { fieldStatuses } from './Field.statuses.js';
+import { applyEllipsis } from '../../utils/mixins/applyEllipsis.js';
+import { applyDisabled } from '../../utils/mixins/applyDisabled.js';
+import { tertiary, secondary } from '../../utils/tokens/colors.js';
+import { caption, body1 } from '../../utils/tokens/typography.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+/**
+ * Common dynamic placeholder.
+ */
+var FieldPlaceholder = /*#__PURE__*/styled.label(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    box-sizing: border-box;\n\n    width: 100%;\n    height: 100%;\n\n    color: ", ";\n    pointer-events: none;\n\n    transition: ", ";\n    transform-origin: top left;\n\n    ", "\n"])), tertiary, function (_ref) {
+  var theme = _ref.theme;
+  return theme.lowPerformance ? 'unset' : 'all 0.1s ease-in';
+}, applyEllipsis);
+
+/**
+ * Content wrapper for left and right slots of the field.
+ */
+var FieldContent = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    ", ";\n    bottom: 0;\n\n    display: flex;\n    align-items: center;\n    height: 3rem;\n"])), function (_ref2) {
+  var pos = _ref2.pos;
+  return pos === 'left' ? 'left: 1rem' : 'right: 1rem';
+});
+
+/**
+ * An inline block to place a helper text under the form item.
+ */
+var FieldHelper = /*#__PURE__*/styled.span(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n\n    display: block;\n\n    margin-top: 0.25rem;\n\n    ", "\n"])), caption, applyEllipsis);
+/**
+ * Common container for singular form item.
+ */
+var FieldRoot = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n\n    position: relative;\n\n    display: block;\n    box-sizing: border-box;\n\n    color: ", ";\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"])), body1, secondary, applyDisabled, function (_ref3) {
+  var _ref3$$size = _ref3.$size,
+    $size = _ref3$$size === void 0 ? 'm' : _ref3$$size;
+  return $size === 'l' ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                  /* stylelint-disable-next-line selector-nested-pattern */\n                  ", " {\n                      top: 1.125rem;\n                      left: 1rem;\n                      right: 1rem;\n                  }\n                  /* stylelint-disable-next-line selector-nested-pattern */\n                  input:not(:placeholder-shown) ~ ", " {\n                      transform: scale(0.75);\n                      top: 0.375rem;\n                  }\n                  /* stylelint-disable-next-line selector-nested-pattern */\n                  ", " {\n                      height: 3.5rem;\n                  }\n              "])), FieldPlaceholder, FieldPlaceholder, FieldContent) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                  /* stylelint-disable-next-line selector-nested-pattern */\n                  ", " {\n                      height: 3rem;\n                  }\n              "])), FieldContent);
+}, function (_ref4) {
+  var $isContentLeft = _ref4.$isContentLeft,
+    $isContentRight = _ref4.$isContentRight;
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        input, textarea {\n            ", " // 50px\n            ", "\n        }\n\n        ", " {\n            ", " // 50px\n            ", "\n        }\n    "])), $isContentLeft && 'padding-left: 3.125rem;', $isContentRight && 'padding-right: 3.125rem;', FieldPlaceholder, $isContentLeft && 'left: 3.125rem;', $isContentRight && 'right: 3.125rem;');
+}, function (_ref5) {
+  var $isHelper = _ref5.$isHelper,
+    status = _ref5.status;
+  return status && ($isHelper ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n                  ", " {\n                      color: ", ";\n                  }\n              "])), FieldHelper, fieldStatuses[status]) : css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n                  ", " {\n                      color: ", ";\n                  }\n              "])), FieldPlaceholder, fieldStatuses[status]));
+});
+
+export { FieldContent, FieldHelper, FieldPlaceholder, FieldRoot };

package/dist/css/es/plasmaCore/components/Field/Field.statuses.js

@@ -0,0 +1,14 @@
+import { success, warning, critical, buttonSuccess, buttonWarning, buttonCritical } from '../../utils/tokens/colors.js';
+
+var fieldStatuses = {
+  success: success,
+  warning: warning,
+  error: critical
+};
+var fieldBackgroundStatuses = {
+  success: buttonSuccess,
+  warning: buttonWarning,
+  error: buttonCritical
+};
+
+export { fieldBackgroundStatuses, fieldStatuses };

package/dist/css/es/plasmaCore/components/Image/Image.js

@@ -0,0 +1,80 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { toCssSize } from '../../utils/utils/toCssSize.js';
+
+var _excluded = ["src", "srcSet", "sizes", "base", "alt", "width", "height"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var ratios = {
+  '1 / 1': '100',
+  '1/1': '100',
+  '3 / 4': '133.3333',
+  '3/4': '133.3333',
+  '4 / 3': '75',
+  '4/3': '75',
+  '9 / 16': '177.7778',
+  '9/16': '177.7778',
+  '16 / 9': '56.25',
+  '16/9': '56.25',
+  '1 / 2': '200',
+  '1/2': '200',
+  '2 / 1': '50',
+  '2/1': '50'
+};
+var StyledRoot = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    display: block;\n    box-sizing: border-box;\n    overflow: hidden;\n\n    width: 100%;\n    height: inherit;\n    border-radius: inherit;\n\n    ", "\n\n    ", "\n"])), function (_ref) {
+  var $ratio = _ref.$ratio,
+    $customRatio = _ref.$customRatio;
+  return ($ratio || $customRatio) && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            height: 0;\n            padding-bottom: ", "%;\n        "])), $ratio ? ratios[$ratio] : $customRatio);
+}, function (_ref2) {
+  var $width = _ref2.$width,
+    $height = _ref2.$height;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            ", "\n            ", "\n        "])), $width && "width: ".concat(toCssSize($width), ";"), $height && "height: ".concat(toCssSize($height), ";"));
+});
+var StyledImg = /*#__PURE__*/styled.img(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n    width: 100%;\n    ", ";\n"])), function (_ref3) {
+  var src = _ref3.src,
+    ratio = _ref3.ratio;
+  return src && ratio && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            height: 100%;\n            object-fit: cover;\n            position: absolute;\n        "])));
+});
+var StyledDivImg = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    background-position: center;\n    background-size: cover;\n"])));
+
+/**
+ * Компонент для отображения картинок.
+ */
+var ImageBase = function ImageBase(_ref4) {
+  var src = _ref4.src,
+    srcSet = _ref4.srcSet,
+    sizes = _ref4.sizes,
+    _ref4$base = _ref4.base,
+    base = _ref4$base === void 0 ? 'img' : _ref4$base,
+    alt = _ref4.alt,
+    width = _ref4.width,
+    height = _ref4.height,
+    props = _objectWithoutProperties(_ref4, _excluded);
+  var ratio = 'ratio' in props ? props.ratio : undefined;
+  var customRatio = 'customRatio' in props ? props.customRatio : undefined;
+  return /*#__PURE__*/React.createElement(StyledRoot, _extends({
+    $ratio: ratio,
+    $customRatio: customRatio,
+    $width: width,
+    $height: height
+  }, props), base === 'img' && /*#__PURE__*/React.createElement(StyledImg, {
+    src: src,
+    srcSet: srcSet,
+    sizes: sizes,
+    alt: alt,
+    ratio: ratio
+  }), base === 'div' && /*#__PURE__*/React.createElement(StyledDivImg, {
+    style: {
+      backgroundImage: "url(".concat(src, ")")
+    },
+    role: "img",
+    "aria-label": alt
+  }));
+};
+
+/**
+ * Компонент для отображения картинок.
+ */
+var Image = /*#__PURE__*/styled(ImageBase)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral([""])));
+
+export { Image };