@salutejs/plasma-new-hope 0.236.0-canary.1680.12493948115.0 → 0.236.0-canary.1681.12503763792.0

package/styled-components/cjs/components/Note/variations/_size/base.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Note = /*#__PURE__*/require("../../Note.tokens");
+var _Note2 = /*#__PURE__*/require("../../Note.styles");
+var _mixins = /*#__PURE__*/require("../../../../mixins");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["padding:var(", ");border-radius:var(", ");height:var(", ");width:var(", ");gap:var(", ");&.", "{width:100%;height:100%;}", "{width:var(", ");height:var(", ");padding:var(", ");box-sizing:border-box;}&.", "{align-items:center;padding:var(", ");gap:var(", ");", "{width:fit-content;height:fit-content;padding:unset;}}", "{width:var(", ");gap:var(", ");}", ",", "{width:100%;min-height:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", "}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-all;}"], _Note.tokens.padding, _Note.tokens.borderRadius, _Note.privateTokens.height, _Note.privateTokens.width, _Note.tokens.gap, _Note.classes.stretch, _Note2.ContentBefore, _Note.tokens.fixedContentBeforeWidth, _Note.tokens.fixedContentBeforeHeight, _Note.tokens.fixedContentBeforePadding, _Note.classes.contentAlignCenter, _Note.tokens.paddingScalable, _Note.tokens.gapScalable, _Note2.ContentBefore, _Note2.ContentWrapper, _Note.privateTokens.contentWidthWithOffset, _Note.tokens.contentGap, _Note2.Title, _Note2.TitleHelper, _Note.tokens.titleLineHeight, _Note.tokens.titleFontFamily, _Note.tokens.titleFontSize, _Note.tokens.titleFontStyle, _Note.tokens.titleFontWeight, _Note.tokens.titleLetterSpacing, _Note.tokens.titleLineHeight, /*#__PURE__*/(0, _mixins.applyEllipsis)(), _Note2.Text, _Note2.TextHelper, _Note.tokens.textFontFamily, _Note.tokens.textFontSize, _Note.tokens.textFontStyle, _Note.tokens.textFontWeight, _Note.tokens.textLetterSpacing, _Note.tokens.textLineHeight);

package/styled-components/cjs/components/Note/variations/_size/tokens.json

@@ -0,0 +1,23 @@
+[
+    "--plasma-note-padding",
+    "--plasma-note-padding-scalable",
+    "--plasma-note-border-radius",
+    "--plasma-note-gap",
+    "--plasma-note-gap-scalable",
+    "--plasma-note-content-gap",
+    "--plasma-note-fixed-content-before-width",
+    "--plasma-note-fixed-content-before-height",
+    "--plasma-note-fixed-content-before-padding",
+    "--plasma-note-title-font-family",
+    "--plasma-note-title-font-size",
+    "--plasma-note-title-font-style",
+    "--plasma-note-title-font-weight",
+    "--plasma-note-title-letter-spacing",
+    "--plasma-note-title-line-height",
+    "--plasma-note-text-font-family",
+    "--plasma-note-text-font-size",
+    "--plasma-note-text-font-style",
+    "--plasma-note-text-font-weight",
+    "--plasma-note-text-letter-spacing",
+    "--plasma-note-text-line-height"
+]

package/styled-components/cjs/components/Note/variations/_view/base.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Note = /*#__PURE__*/require("../../Note.tokens");
+var _Note2 = /*#__PURE__*/require("../../Note.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["background:var(", ");color:var(", ");", "{color:var(", ");fill:var(", ");}"], _Note.tokens.background, _Note.tokens.color, _Note2.ContentBefore, _Note.tokens.contentBeforeColor, _Note.tokens.contentBeforeColor);

package/styled-components/cjs/components/Note/variations/_view/tokens.json

@@ -0,0 +1 @@
+["--plasma-note-background", "--plasma-note-color", "--plasma-note-content-before-color"]

package/styled-components/cjs/components/_Icon/Icon.assets/Icon.svg.16/SaluteOutline.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SaluteOutline = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _path, _path2, _path3, _path4;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SaluteOutline = exports.SaluteOutline = function SaluteOutline(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M15 9.70416C14.6834 9.20404 13.3379 9.22327 12.032 9.24251H10.1226C6.84787 8.98283 5.4628 7.73251 4.8791 6.77074C4.59025 6.27939 4.42611 5.72815 4.4003 5.16278C4.37449 4.59741 4.48775 4.03421 4.7307 3.51992C5.06401 2.88911 5.53511 2.33675 6.11101 1.90148C6.68692 1.46621 7.35373 1.15856 8.06475 1.00006C6.83005 0.995151 5.61445 1.29638 4.53283 1.87528C3.97428 2.18508 3.45892 2.56326 2.99936 3.00056C2.47912 3.52357 2.08772 4.15452 1.85466 4.8459C1.6216 5.53727 1.55295 6.27104 1.65387 6.99194C1.78941 7.75289 2.10006 8.47424 2.5626 9.1021C3.02515 9.72996 3.62764 10.2481 4.32507 10.6179C6.40573 11.8641 8.91885 11.7822 10.6889 11.7245L10.7063 11.7239H11.6956C12.497 11.7239 13.0609 11.8105 13.2489 12.1856C13.295 12.3231 13.295 12.4712 13.2489 12.6087C13.2489 12.6761 13.3181 12.6953 13.3775 12.6087C14.1345 11.7836 14.6773 10.7942 14.9604 9.7234L15 9.70416Z"
+  })), _path2 || (_path2 = /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M10.7294 14.4119L10.7284 14.4067L10.7391 14.402L10.7294 14.4119Z"
+  })), _path3 || (_path3 = /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M10.7284 14.4067C10.6529 14.0325 9.75121 13.953 8.61812 13.8637C7.77017 13.8071 6.92772 13.6838 6.09821 13.495C5.00136 13.2435 3.97783 12.7307 3.11063 11.9981C2.24344 11.2656 1.55701 10.334 1.10702 9.27885C1 9.10941 1 9.13931 1 9.31872C1.24058 10.4704 1.75306 11.5442 2.49259 12.446C3.23211 13.3478 4.17613 14.0502 5.24202 14.4917C6.376 14.9613 7.32411 14.984 7.81058 14.984C7.91362 14.9943 8.01734 15 8.12192 15C9.01953 14.9723 9.90389 14.771 10.7284 14.4067Z"
+  })), _path4 || (_path4 = /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M6.54638 5.04669C6.44892 4.63788 6.45618 4.21285 6.56757 3.80727V3.78793C6.7151 3.34161 6.97062 2.93427 7.3137 2.59851C7.65677 2.26274 8.07787 2.00787 8.54329 1.85429C9.06429 1.6697 9.61669 1.57793 10.1728 1.58358H10.3459C10.4875 1.58679 10.6267 1.61981 10.7532 1.68026C11.2671 1.93217 11.7607 2.21978 12.2299 2.54073C11.774 2.52419 11.3178 2.56978 10.8755 2.67609C10.6379 2.75038 10.422 2.87656 10.2451 3.04447C10.0682 3.21239 9.9353 3.41736 9.85705 3.64291C9.81173 3.81077 9.81032 3.9866 9.85291 4.1551C9.89551 4.32361 9.98084 4.47967 10.1015 4.60973C10.5719 4.9655 11.1267 5.20692 11.7176 5.31307C12.3086 5.41921 12.918 5.38686 13.4928 5.21883C13.7912 5.12446 14.0605 4.96175 14.277 4.74508C14.6057 5.31276 14.849 5.92131 15 6.55304C14.6533 7.093 14.1209 7.50281 13.4928 7.71322C12.3859 8.05651 11.1987 8.09238 10.071 7.81661C8.94333 7.54084 7.92214 6.96491 7.1277 6.15664C6.8432 5.83612 6.64384 5.45549 6.54638 5.04669Z"
+  })));
+};

package/styled-components/cjs/components/_Icon/Icons/Icon.16/IconSaluteOutline.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconSaluteOutline16 = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _SaluteOutline = /*#__PURE__*/require("../../Icon.assets/Icon.svg.16/SaluteOutline");
+var _IconRoot = /*#__PURE__*/require("../../IconRoot");
+var _excluded = ["size", "color", "className"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var IconSaluteOutline16 = exports.IconSaluteOutline16 = function IconSaluteOutline16(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'xs' : _ref$size,
+    color = _ref.color,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, _extends({
+    className: className,
+    size: size,
+    color: color,
+    icon: _SaluteOutline.SaluteOutline
+  }, rest));
+};

package/styled-components/cjs/components/_Icon/index.js

@@ -177,6 +177,12 @@ Object.defineProperty(exports, "IconPlus", {
     return _IconPlus.IconPlus;
   }
 });
+Object.defineProperty(exports, "IconSaluteOutline16", {
+  enumerable: true,
+  get: function get() {
+    return _IconSaluteOutline.IconSaluteOutline16;
+  }
+});
 Object.defineProperty(exports, "IconStarFill16", {
   enumerable: true,
   get: function get() {
@@ -268,4 +274,5 @@ var _IconStarOutline2 = /*#__PURE__*/require("./Icons/Icon.24/IconStarOutline");
 var _IconStarFill3 = /*#__PURE__*/require("./Icons/Icon.36/IconStarFill");
 var _IconStarHalfFill3 = /*#__PURE__*/require("./Icons/Icon.36/IconStarHalfFill");
 var _IconStarOutline3 = /*#__PURE__*/require("./Icons/Icon.36/IconStarOutline");
-var _IconFolder = /*#__PURE__*/require("./Icons/IconFolder");
+var _IconFolder = /*#__PURE__*/require("./Icons/IconFolder");
+var _IconSaluteOutline = /*#__PURE__*/require("./Icons/Icon.16/IconSaluteOutline");

package/styled-components/cjs/examples/plasma_b2c/components/Dropzone/Dropzone.stories.tsx

@@ -16,7 +16,7 @@ const onChoseFiles = action('onChoseFiles');
 const iconPlacements = ['top', 'left'];
 
 const meta: Meta<typeof Dropzone> = {
-    title: 'plasma_b2c/Dropzone',
+    title: 'b2c/Data Entry/Dropzone',
     component: Dropzone,
     decorators: [WithTheme],
     argTypes: {

package/styled-components/cjs/examples/plasma_b2c/components/Note/Note.config.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Note = /*#__PURE__*/require("../../../../components/Note");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Note.noteTokens.background, _Note.noteTokens.color, _Note.noteTokens.contentBeforeColor),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-positive);"], _Note.noteTokens.background, _Note.noteTokens.color, _Note.noteTokens.contentBeforeColor),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-warning);", ":var(--text-primary);", ":var(--text-warning);"], _Note.noteTokens.background, _Note.noteTokens.color, _Note.noteTokens.contentBeforeColor),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--text-negative);"], _Note.noteTokens.background, _Note.noteTokens.color, _Note.noteTokens.contentBeforeColor),
+      info: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-info);", ":var(--text-primary);", ":var(--text-info);"], _Note.noteTokens.background, _Note.noteTokens.color, _Note.noteTokens.contentBeforeColor)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem 1.875rem;", ":1.5rem 1.75rem;", ":0.875rem;", ":0.75rem;", ":1rem;", ":0.25rem;", ":1.5rem;", ":2rem;", ":0.25rem 0;", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-bold-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.25rem 1.5rem;", ":1.25rem;", ":0.75rem;", ":0.625rem;", ":0.75rem;", ":0.125rem;", ":1.5rem;", ":1.5rem;", ":0;", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-bold-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem 1.25rem;", ":1rem;", ":0.625rem;", ":0.5rem;", ":0.75rem;", ":0.125rem;", ":1rem;", ":1.125rem;", ":0.063rem 0;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-bold-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem 1rem;", ":0.75rem;", ":0.5rem;", ":0.375rem;", ":0.5rem;", ":0.125rem;", ":1rem;", ":1rem;", ":0;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-bold-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_b2c/components/Note/Note.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Note = void 0;
+var _Note = /*#__PURE__*/require("../../../../components/Note");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Note2 = /*#__PURE__*/require("./Note.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Note.noteConfig, _Note2.config);
+var Note = exports.Note = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/plasma_b2c/components/Note/Note.stories.tsx

@@ -0,0 +1,86 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { IconSaluteOutline16 } from '../../../../components/_Icon';
+
+import { Note } from './Note';
+
+const views = ['default', 'positive', 'warning', 'negative', 'info'];
+const sizes = ['l', 'm', 's', 'xs'];
+const contentBeforeSizes = ['fixed', 'scalable'];
+
+const meta: Meta<typeof Note> = {
+    title: 'b2c/Data Display/Note',
+    component: Note,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        contentBeforeSizing: {
+            options: contentBeforeSizes,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'enableContentBefore', truthy: true },
+            defaultValue: 'fixed',
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = {
+    enableContentBefore: boolean;
+} & ComponentProps<typeof Note>;
+
+const getIconSize = (size?: string, isScalable?: boolean) => {
+    if (isScalable) {
+        return 'm';
+    }
+
+    if (size === 'l' || size === 'm') {
+        return 's';
+    }
+
+    return 'xs';
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'l',
+        width: 400,
+        height: 116,
+        stretch: false,
+        title: 'Title',
+        text: 'Text',
+        enableContentBefore: true,
+        contentBeforeSizing: 'fixed',
+    },
+    render: ({ enableContentBefore, ...args }) => (
+        <div style={{ height: '100vh' }}>
+            <Note
+                contentBefore={
+                    enableContentBefore && (
+                        <IconSaluteOutline16
+                            size={getIconSize(args.size, args.contentBeforeSizing === 'scalable')}
+                            color="inherit"
+                        />
+                    )
+                }
+                {...args}
+            />
+        </div>
+    ),
+};

package/styled-components/cjs/examples/plasma_web/components/Note/Note.config.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Note = /*#__PURE__*/require("../../../../components/Note");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Note.noteTokens.background, _Note.noteTokens.color, _Note.noteTokens.contentBeforeColor),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-positive);"], _Note.noteTokens.background, _Note.noteTokens.color, _Note.noteTokens.contentBeforeColor),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-warning);", ":var(--text-primary);", ":var(--text-warning);"], _Note.noteTokens.background, _Note.noteTokens.color, _Note.noteTokens.contentBeforeColor),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--text-negative);"], _Note.noteTokens.background, _Note.noteTokens.color, _Note.noteTokens.contentBeforeColor),
+      info: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-info);", ":var(--text-primary);", ":var(--text-info);"], _Note.noteTokens.background, _Note.noteTokens.color, _Note.noteTokens.contentBeforeColor)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem 1.875rem;", ":1.5rem 1.75rem;", ":0.875rem;", ":0.75rem;", ":1rem;", ":0.25rem;", ":1.5rem;", ":2rem;", ":0.25rem 0;", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-bold-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.25rem 1.5rem;", ":1.25rem;", ":0.75rem;", ":0.625rem;", ":0.75rem;", ":0.125rem;", ":1.5rem;", ":1.5rem;", ":0;", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-bold-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem 1.25rem;", ":1rem;", ":0.625rem;", ":0.5rem;", ":0.75rem;", ":0.125rem;", ":1rem;", ":1.125rem;", ":0.063rem 0;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-bold-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem 1rem;", ":0.75rem;", ":0.5rem;", ":0.375rem;", ":0.5rem;", ":0.125rem;", ":1rem;", ":1rem;", ":0;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-bold-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_web/components/Note/Note.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Note = void 0;
+var _Note = /*#__PURE__*/require("../../../../components/Note");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Note2 = /*#__PURE__*/require("./Note.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Note.noteConfig, _Note2.config);
+var Note = exports.Note = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/plasma_web/components/Note/Note.stories.tsx

@@ -0,0 +1,86 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { IconSaluteOutline16 } from '../../../../components/_Icon';
+
+import { Note } from './Note';
+
+const views = ['default', 'positive', 'warning', 'negative', 'info'];
+const sizes = ['l', 'm', 's', 'xs'];
+const contentBeforeSizes = ['fixed', 'scalable'];
+
+const meta: Meta<typeof Note> = {
+    title: 'web/Data Display/Note',
+    component: Note,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        contentBeforeSizing: {
+            options: contentBeforeSizes,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'enableContentBefore', truthy: true },
+            defaultValue: 'fixed',
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = {
+    enableContentBefore: boolean;
+} & ComponentProps<typeof Note>;
+
+const getIconSize = (size?: string, isScalable?: boolean) => {
+    if (isScalable) {
+        return 'm';
+    }
+
+    if (size === 'l' || size === 'm') {
+        return 's';
+    }
+
+    return 'xs';
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'l',
+        width: 400,
+        height: 116,
+        stretch: false,
+        title: 'Title',
+        text: 'Text',
+        enableContentBefore: true,
+        contentBeforeSizing: 'fixed',
+    },
+    render: ({ enableContentBefore, ...args }) => (
+        <div style={{ height: '100vh' }}>
+            <Note
+                contentBefore={
+                    enableContentBefore && (
+                        <IconSaluteOutline16
+                            size={getIconSize(args.size, args.contentBeforeSizing === 'scalable')}
+                            color="inherit"
+                        />
+                    )
+                }
+                {...args}
+            />
+        </div>
+    ),
+};

package/styled-components/cjs/index.js

@@ -739,4 +739,15 @@ Object.keys(_Rating).forEach(function (key) {
       return _Rating[key];
     }
   });
+});
+var _Note = /*#__PURE__*/require("./components/Note");
+Object.keys(_Note).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Note[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Note[key];
+    }
+  });
 });

package/styled-components/es/components/Note/Note.js

@@ -0,0 +1,127 @@
+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); }
+var _excluded = ["className", "style", "title", "text", "contentBefore", "contentBeforeSizing", "size", "view", "stretch", "width", "height"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useResizeObserver } from '@salutejs/plasma-core';
+import { canUseDOM, cx, getSizeValueFromProp } from '../../utils';
+import { base as viewCSS } from './variations/_view/base';
+import { base as sizeCSS } from './variations/_size/base';
+import { base, ContentBefore, ContentWrapper, Text, TextHelper, Title, TitleHelper } from './Note.styles';
+import { classes, privateTokens, tokens } from './Note.tokens';
+export var noteRoot = function noteRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (_ref, outerRef) {
+    var className = _ref.className,
+      style = _ref.style,
+      title = _ref.title,
+      text = _ref.text,
+      contentBefore = _ref.contentBefore,
+      _ref$contentBeforeSiz = _ref.contentBeforeSizing,
+      contentBeforeSizing = _ref$contentBeforeSiz === void 0 ? 'fixed' : _ref$contentBeforeSiz,
+      size = _ref.size,
+      view = _ref.view,
+      stretch = _ref.stretch,
+      width = _ref.width,
+      height = _ref.height,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    var _useState = useState(text),
+      _useState2 = _slicedToArray(_useState, 2),
+      innerText = _useState2[0],
+      setInnerText = _useState2[1];
+    var _useState3 = useState(contentBefore ? "var(".concat(tokens.fixedContentBeforeWidth, ")") : '0'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      contentBeforeWidth = _useState4[0],
+      setContentBeforeWidth = _useState4[1];
+    var contentWrapperRef = useRef(null);
+    var contentBeforeRef = useRef(null);
+    var titleHelperRef = useRef(null);
+    var textRenderHelperRef = useRef(null);
+    var innerWidth = width ? getSizeValueFromProp(width) : 'fit-content';
+    var innerHeight = height ? getSizeValueFromProp(height) : 'fit-content';
+    var contentGapToken = contentBeforeSizing === 'scalable' ? tokens.gapScalable : tokens.gap;
+    var contentWidthWithOffsetToken = contentBefore ? "calc(100% - ".concat(contentBeforeWidth, " - var(").concat(contentGapToken, "))") : '100%';
+    var setTruncatedText = function setTruncatedText() {
+      var _titleHelperRef$curre;
+      if (!canUseDOM || !text || !(contentWrapperRef !== null && contentWrapperRef !== void 0 && contentWrapperRef.current) || !(textRenderHelperRef !== null && textRenderHelperRef !== void 0 && textRenderHelperRef.current) || !width && !height) {
+        return;
+      }
+      var contentHeight = contentWrapperRef.current.offsetHeight;
+      var titleHeight = ((_titleHelperRef$curre = titleHelperRef.current) === null || _titleHelperRef$curre === void 0 ? void 0 : _titleHelperRef$curre.offsetHeight) || 0;
+      var contentGap = Number(window.getComputedStyle(contentWrapperRef.current).rowGap.replace('px', ''));
+      var textAvailableHeight = contentHeight - titleHeight - contentGap;
+      textRenderHelperRef.current.textContent = text;
+      if (textRenderHelperRef.current.offsetHeight <= textAvailableHeight) {
+        setInnerText(text);
+        return;
+      }
+      var fullText = "".concat(text.slice(0, -3), "...");
+      for (var i = text.length - 1; i >= 0; i -= 1) {
+        textRenderHelperRef.current.textContent = fullText;
+        if (textRenderHelperRef.current.offsetHeight <= textAvailableHeight) {
+          break;
+        }
+        fullText = "".concat(fullText.slice(0, i), "...");
+      }
+      setInnerText(fullText);
+    };
+    useResizeObserver(contentWrapperRef, setTruncatedText);
+    useLayoutEffect(function () {
+      setTruncatedText();
+    }, [text, contentBefore, contentBeforeSizing, stretch]);
+    useEffect(function () {
+      if (!(contentBeforeRef !== null && contentBeforeRef !== void 0 && contentBeforeRef.current)) {
+        return;
+      }
+      if (contentBeforeSizing === 'scalable') {
+        setContentBeforeWidth("".concat(contentBeforeRef.current.offsetWidth, "px"));
+        return;
+      }
+      setContentBeforeWidth("var(".concat(tokens.fixedContentBeforeWidth, ")"));
+    }, [contentBefore, contentBeforeSizing]);
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      ref: outerRef,
+      className: cx(className, stretch && classes.stretch, contentBeforeSizing === 'scalable' && classes.contentAlignCenter),
+      view: view,
+      size: size,
+      style: _objectSpread(_objectSpread({}, style), {}, _defineProperty(_defineProperty(_defineProperty({}, privateTokens.width, innerWidth), privateTokens.height, innerHeight), privateTokens.contentWidthWithOffset, contentWidthWithOffsetToken))
+    }, rest), contentBefore && /*#__PURE__*/React.createElement(ContentBefore, {
+      ref: contentBeforeRef
+    }, contentBefore), /*#__PURE__*/React.createElement(ContentWrapper, {
+      ref: contentWrapperRef
+    }, title && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(TitleHelper, {
+      ref: titleHelperRef
+    }, "C")), innerText && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, innerText, /*#__PURE__*/React.createElement(TextHelper, {
+      ref: textRenderHelperRef
+    }, "C")))));
+  });
+};
+export var noteConfig = {
+  name: 'Note',
+  tag: 'div',
+  layout: noteRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

package/styled-components/es/components/Note/Note.styles.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css(["position:relative;display:flex;box-sizing:border-box;"]);
+export var ContentBefore = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-0"
+})(["display:flex;"]);
+export var ContentWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-1"
+})(["display:flex;flex-direction:column;box-sizing:border-box;"]);
+export var Title = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-2"
+})([""]);
+export var TitleHelper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-3"
+})(["visibility:hidden;position:absolute;z-index:-9999;opacity:0;"]);
+export var Text = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-4"
+})(["display:block;position:relative;"]);
+export var TextHelper = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-5"
+})(["visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;"]);