@salutejs/sdds-serv 0.221.1-canary.1675.12514887207.0 → 0.222.0-canary.1681.12515137471.0

package/api/sdds-serv.api.md

@@ -143,6 +143,8 @@ import { mediaQuery } from '@salutejs/plasma-new-hope/styled-components';
 import { modalClasses } from '@salutejs/plasma-new-hope/styled-components';
 import { ModalProps } from '@salutejs/plasma-new-hope/styled-components';
 import { MouseEvent as MouseEvent_2 } from 'react';
+import { noteClasses } from '@salutejs/plasma-new-hope/styled-components';
+import { noteTokens } from '@salutejs/plasma-new-hope/styled-components';
 import { NotificationIconPlacement } from '@salutejs/plasma-new-hope/styled-components';
 import { NotificationLayout } from '@salutejs/plasma-new-hope/styled-components';
 import { NotificationPlacement } from '@salutejs/plasma-new-hope/styled-components';
@@ -2590,6 +2592,37 @@ export { modalClasses }
 
 export { ModalProps }
 
+// @public (undocumented)
+export const Note: FunctionComponent<PropsType<    {
+view: {
+default: PolymorphicClassName;
+positive: PolymorphicClassName;
+warning: PolymorphicClassName;
+negative: PolymorphicClassName;
+info: PolymorphicClassName;
+};
+size: {
+l: PolymorphicClassName;
+m: PolymorphicClassName;
+s: PolymorphicClassName;
+xs: PolymorphicClassName;
+};
+}> & {
+title?: string | undefined;
+text?: string | undefined;
+contentBefore?: ReactNode;
+contentBeforeSizing?: "fixed" | "scalable" | undefined;
+stretch?: boolean | undefined;
+width?: string | number | undefined;
+height?: string | number | undefined;
+view?: string | undefined;
+size?: string | undefined;
+} & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
+
+export { noteClasses }
+
+export { noteTokens }
+
 // @public (undocumented)
 const Notification_2: React_2.FunctionComponent<PropsType<    {
 view: {

package/components/Note/Note.config.d.ts

@@ -0,0 +1,21 @@
+export declare const config: {
+    defaults: {
+        view: string;
+        size: string;
+    };
+    variations: {
+        view: {
+            default: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            positive: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            warning: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            negative: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            info: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        };
+        size: {
+            l: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            m: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            xs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        };
+    };
+};

package/components/Note/Note.config.js

@@ -0,0 +1,29 @@
+import './Note.config_1psv03r.css';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": "dlpid31",
+      positive: "pj3b0d5",
+      warning: "w73g2ww",
+      negative: "n1m8g88j",
+      info: "ifuz2qv"
+    },
+    size: {
+      l: "ly7aunu",
+      m: "m1sat9qb",
+      s: "s1gn2ksf",
+      xs: "xqm7lmj"
+    }
+  }
+};
+
+exports.config = config;
+//# sourceMappingURL=Note.config.js.map

package/components/Note/Note.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.config.js","sources":["../../src-css/components/Note/Note.config.ts"],"sourcesContent":["import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n    defaults: {\n        view: 'default',\n        size: 'l',\n    },\n    variations: {\n        view: {\n            default: css`\n                ${tokens.background}: var(--surface-transparent-secondary);\n                ${tokens.color}: var(--text-primary);\n                ${tokens.contentBeforeColor}: var(--text-primary);\n            `,\n            positive: css`\n                ${tokens.background}: var(--surface-transparent-positive);\n                ${tokens.color}: var(--text-primary);\n                ${tokens.contentBeforeColor}: var(--text-positive);\n            `,\n            warning: css`\n                ${tokens.background}: var(--surface-transparent-warning);\n                ${tokens.color}: var(--text-primary);\n                ${tokens.contentBeforeColor}: var(--text-warning);\n            `,\n            negative: css`\n                ${tokens.background}: var(--surface-transparent-negative);\n                ${tokens.color}: var(--text-primary);\n                ${tokens.contentBeforeColor}: var(--text-negative);\n            `,\n            info: css`\n                ${tokens.background}: var(--surface-transparent-info);\n                ${tokens.color}: var(--text-primary);\n                ${tokens.contentBeforeColor}: var(--text-info);\n            `,\n        },\n        size: {\n            l: css`\n                ${tokens.padding}: 1.5rem 1.875rem;\n                ${tokens.paddingScalable}: 1.5rem 1.75rem;\n                ${tokens.borderRadius}: 0.875rem;\n                ${tokens.gap}: 0.75rem;\n                ${tokens.gapScalable}: 1rem;\n                ${tokens.contentGap}: 0.25rem;\n\n                ${tokens.fixedContentBeforeWidth}: 1.5rem;\n                ${tokens.fixedContentBeforeHeight}: 2rem;\n                ${tokens.fixedContentBeforePadding}: 0.25rem 0;\n\n                ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family);\n                ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size);\n                ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style);\n                ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight);\n                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing);\n                ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height);\n\n                ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family);\n                ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size);\n                ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style);\n                ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight);\n                ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing);\n                ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height);\n            `,\n            m: css`\n                ${tokens.padding}: 1.25rem 1.5rem;\n                ${tokens.paddingScalable}: 1.25rem;\n                ${tokens.borderRadius}: 0.75rem;\n                ${tokens.gap}: 0.625rem;\n                ${tokens.gapScalable}: 0.75rem;\n                ${tokens.contentGap}: 0.125rem;\n\n                ${tokens.fixedContentBeforeWidth}: 1.5rem;\n                ${tokens.fixedContentBeforeHeight}: 1.5rem;\n                ${tokens.fixedContentBeforePadding}: 0;\n\n                ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family);\n                ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size);\n                ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style);\n                ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight);\n                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing);\n                ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height);\n\n                ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family);\n                ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size);\n                ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style);\n                ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight);\n                ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing);\n                ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height);\n            `,\n            s: css`\n                ${tokens.padding}: 1rem 1.25rem;\n                ${tokens.paddingScalable}: 1rem;\n                ${tokens.borderRadius}: 0.625rem;\n                ${tokens.gap}: 0.5rem;\n                ${tokens.gapScalable}: 0.75rem;\n                ${tokens.contentGap}: 0.125rem;\n\n                ${tokens.fixedContentBeforeWidth}: 1rem;\n                ${tokens.fixedContentBeforeHeight}: 1.125rem;\n                ${tokens.fixedContentBeforePadding}: 0.063rem 0;\n\n                ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family);\n                ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size);\n                ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style);\n                ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight);\n                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);\n                ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height);\n\n                ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family);\n                ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size);\n                ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style);\n                ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight);\n                ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);\n                ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height);\n            `,\n            xs: css`\n                ${tokens.padding}: 0.75rem 1rem;\n                ${tokens.paddingScalable}: 0.75rem;\n                ${tokens.borderRadius}: 0.5rem;\n                ${tokens.gap}: 0.375rem;\n                ${tokens.gapScalable}: 0.5rem;\n                ${tokens.contentGap}: 0.125rem;\n\n                ${tokens.fixedContentBeforeWidth}: 1rem;\n                ${tokens.fixedContentBeforeHeight}: 1rem;\n                ${tokens.fixedContentBeforePadding}: 0;\n\n                ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family);\n                ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size);\n                ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style);\n                ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight);\n                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);\n                ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height);\n\n                ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family);\n                ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size);\n                ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style);\n                ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight);\n                ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);\n                ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height);\n            `,\n        },\n    },\n};\n"],"names":["config","defaults","view","size","variations","default","positive","warning","negative","info","l","m","s","xs"],"mappings":";;;;AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,GAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;AACFG,MAAAA,SAAAA,EAIC,SAAA;AACDC,MAAAA,QAAQ,EAIP,SAAA;AACDC,MAAAA,OAAO,EAIN,SAAA;AACDC,MAAAA,QAAQ,EAIP,UAAA;AACDC,MAAAA,IAAI,EAAA,SAAA;KAKP;AACDN,IAAAA,IAAI,EAAE;AACFO,MAAAA,CAAC,EAyBA,SAAA;AACDC,MAAAA,CAAC,EAyBA,UAAA;AACDC,MAAAA,CAAC,EAyBA,UAAA;AACDC,MAAAA,EAAE,EAAA,SAAA;AA0BN,KAAA;AACJ,GAAA;AACJ;;;;"}

package/components/Note/Note.config_1psv03r.css

@@ -0,0 +1,9 @@
+.dlpid31{--plasma-note-background:var(--surface-transparent-secondary);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-primary);}
+.pj3b0d5{--plasma-note-background:var(--surface-transparent-positive);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-positive);}
+.w73g2ww{--plasma-note-background:var(--surface-transparent-warning);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-warning);}
+.n1m8g88j{--plasma-note-background:var(--surface-transparent-negative);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-negative);}
+.ifuz2qv{--plasma-note-background:var(--surface-transparent-info);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-info);}
+.ly7aunu{--plasma-note-padding:1.5rem 1.875rem;--plasma-note-padding-scalable:1.5rem 1.75rem;--plasma-note-border-radius:0.875rem;--plasma-note-gap:0.75rem;--plasma-note-gap-scalable:1rem;--plasma-note-content-gap:0.25rem;--plasma-note-fixed-content-before-width:1.5rem;--plasma-note-fixed-content-before-height:2rem;--plasma-note-fixed-content-before-padding:0.25rem 0;--plasma-note-title-font-family:var(--plasma-typo-text-l-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-l-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-l-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-l-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-l-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-l-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-l-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-l-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-l-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-l-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-l-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-l-line-height);}
+.m1sat9qb{--plasma-note-padding:1.25rem 1.5rem;--plasma-note-padding-scalable:1.25rem;--plasma-note-border-radius:0.75rem;--plasma-note-gap:0.625rem;--plasma-note-gap-scalable:0.75rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1.5rem;--plasma-note-fixed-content-before-height:1.5rem;--plasma-note-fixed-content-before-padding:0;--plasma-note-title-font-family:var(--plasma-typo-text-m-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-m-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-m-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-m-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-m-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-m-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-m-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-m-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-m-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-m-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-m-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-m-line-height);}
+.s1gn2ksf{--plasma-note-padding:1rem 1.25rem;--plasma-note-padding-scalable:1rem;--plasma-note-border-radius:0.625rem;--plasma-note-gap:0.5rem;--plasma-note-gap-scalable:0.75rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1rem;--plasma-note-fixed-content-before-height:1.125rem;--plasma-note-fixed-content-before-padding:0.063rem 0;--plasma-note-title-font-family:var(--plasma-typo-text-s-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-s-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-s-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-s-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-s-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-s-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-s-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-s-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-s-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-s-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-s-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-s-line-height);}
+.xqm7lmj{--plasma-note-padding:0.75rem 1rem;--plasma-note-padding-scalable:0.75rem;--plasma-note-border-radius:0.5rem;--plasma-note-gap:0.375rem;--plasma-note-gap-scalable:0.5rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1rem;--plasma-note-fixed-content-before-height:1rem;--plasma-note-fixed-content-before-padding:0;--plasma-note-title-font-family:var(--plasma-typo-text-xs-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-xs-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-xs-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-xs-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-xs-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-xs-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-xs-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-xs-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-xs-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-xs-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-xs-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-xs-line-height);}

package/components/Note/Note.css

@@ -0,0 +1,9 @@
+.Note_config_1psv03r_dlpid31__b15400fc{--plasma-note-background:var(--surface-transparent-secondary);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-primary);}
+.Note_config_1psv03r_pj3b0d5__b15400fc{--plasma-note-background:var(--surface-transparent-positive);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-positive);}
+.Note_config_1psv03r_w73g2ww__b15400fc{--plasma-note-background:var(--surface-transparent-warning);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-warning);}
+.Note_config_1psv03r_n1m8g88j__b15400fc{--plasma-note-background:var(--surface-transparent-negative);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-negative);}
+.Note_config_1psv03r_ifuz2qv__b15400fc{--plasma-note-background:var(--surface-transparent-info);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-info);}
+.Note_config_1psv03r_ly7aunu__b15400fc{--plasma-note-padding:1.5rem 1.875rem;--plasma-note-padding-scalable:1.5rem 1.75rem;--plasma-note-border-radius:0.875rem;--plasma-note-gap:0.75rem;--plasma-note-gap-scalable:1rem;--plasma-note-content-gap:0.25rem;--plasma-note-fixed-content-before-width:1.5rem;--plasma-note-fixed-content-before-height:2rem;--plasma-note-fixed-content-before-padding:0.25rem 0;--plasma-note-title-font-family:var(--plasma-typo-text-l-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-l-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-l-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-l-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-l-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-l-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-l-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-l-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-l-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-l-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-l-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-l-line-height);}
+.Note_config_1psv03r_m1sat9qb__b15400fc{--plasma-note-padding:1.25rem 1.5rem;--plasma-note-padding-scalable:1.25rem;--plasma-note-border-radius:0.75rem;--plasma-note-gap:0.625rem;--plasma-note-gap-scalable:0.75rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1.5rem;--plasma-note-fixed-content-before-height:1.5rem;--plasma-note-fixed-content-before-padding:0;--plasma-note-title-font-family:var(--plasma-typo-text-m-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-m-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-m-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-m-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-m-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-m-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-m-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-m-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-m-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-m-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-m-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-m-line-height);}
+.Note_config_1psv03r_s1gn2ksf__b15400fc{--plasma-note-padding:1rem 1.25rem;--plasma-note-padding-scalable:1rem;--plasma-note-border-radius:0.625rem;--plasma-note-gap:0.5rem;--plasma-note-gap-scalable:0.75rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1rem;--plasma-note-fixed-content-before-height:1.125rem;--plasma-note-fixed-content-before-padding:0.063rem 0;--plasma-note-title-font-family:var(--plasma-typo-text-s-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-s-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-s-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-s-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-s-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-s-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-s-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-s-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-s-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-s-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-s-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-s-line-height);}
+.Note_config_1psv03r_xqm7lmj__b15400fc{--plasma-note-padding:0.75rem 1rem;--plasma-note-padding-scalable:0.75rem;--plasma-note-border-radius:0.5rem;--plasma-note-gap:0.375rem;--plasma-note-gap-scalable:0.5rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1rem;--plasma-note-fixed-content-before-height:1rem;--plasma-note-fixed-content-before-padding:0;--plasma-note-title-font-family:var(--plasma-typo-text-xs-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-xs-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-xs-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-xs-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-xs-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-xs-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-xs-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-xs-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-xs-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-xs-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-xs-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-xs-line-height);}

package/components/Note/Note.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export declare const Note: import("react").FunctionComponent<import("@salutejs/plasma-new-hope/types/engines/types").PropsType<{
+    view: {
+        default: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        positive: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        warning: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        negative: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        info: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+    };
+    size: {
+        l: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        m: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        xs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+    };
+}> & {
+    title?: string | undefined;
+    text?: string | undefined;
+    contentBefore?: import("react").ReactNode;
+    contentBeforeSizing?: "fixed" | "scalable" | undefined;
+    stretch?: boolean | undefined;
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    view?: string | undefined;
+    size?: string | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/components/Note/Note.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var plasmaNewHope = require('@salutejs/plasma-new-hope');
+var Note_config = require('./Note.config.js');
+
+var mergedConfig = /*#__PURE__*/plasmaNewHope.mergeConfig(plasmaNewHope.noteConfig, Note_config.config);
+var Note = /*#__PURE__*/plasmaNewHope.component(mergedConfig);
+
+exports.Note = Note;
+//# sourceMappingURL=Note.js.map

package/components/Note/Note.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.js","sources":["../../src-css/components/Note/Note.ts"],"sourcesContent":["import { noteConfig, component, mergeConfig } from '@salutejs/plasma-new-hope';\n\nimport { config } from './Note.config';\n\nconst mergedConfig = mergeConfig(noteConfig, config);\n\nexport const Note = component(mergedConfig);\n"],"names":["mergedConfig","mergeConfig","noteConfig","config","Note","component"],"mappings":";;;;;;;AAIA,IAAMA,YAAY,gBAAGC,yBAAW,CAACC,wBAAU,EAAEC,kBAAM,CAAC,CAAA;IAEvCC,IAAI,gBAAGC,uBAAS,CAACL,YAAY;;;;"}

package/components/Note/index.d.ts

@@ -0,0 +1,2 @@
+export { Note } from './Note';
+export { noteTokens, noteClasses } from '@salutejs/plasma-new-hope/styled-components';

package/emotion/cjs/components/Note/Note.config.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--text-primary);\n                ", ": var(--text-primary);\n            "])), _emotion.noteTokens.background, _emotion.noteTokens.color, _emotion.noteTokens.contentBeforeColor),
+      positive: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-positive);\n                ", ": var(--text-primary);\n                ", ": var(--text-positive);\n            "])), _emotion.noteTokens.background, _emotion.noteTokens.color, _emotion.noteTokens.contentBeforeColor),
+      warning: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-warning);\n                ", ": var(--text-primary);\n                ", ": var(--text-warning);\n            "])), _emotion.noteTokens.background, _emotion.noteTokens.color, _emotion.noteTokens.contentBeforeColor),
+      negative: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-negative);\n                ", ": var(--text-primary);\n                ", ": var(--text-negative);\n            "])), _emotion.noteTokens.background, _emotion.noteTokens.color, _emotion.noteTokens.contentBeforeColor),
+      info: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-info);\n                ", ": var(--text-primary);\n                ", ": var(--text-info);\n            "])), _emotion.noteTokens.background, _emotion.noteTokens.color, _emotion.noteTokens.contentBeforeColor)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem 1.875rem;\n                ", ": 1.5rem 1.75rem;\n                ", ": 0.875rem;\n                ", ": 0.75rem;\n                ", ": 1rem;\n                ", ": 0.25rem;\n\n                ", ": 1.5rem;\n                ", ": 2rem;\n                ", ": 0.25rem 0;\n\n                ", ": var(--plasma-typo-text-l-font-family);\n                ", ": var(--plasma-typo-text-l-font-size);\n                ", ": var(--plasma-typo-text-l-font-style);\n                ", ": var(--plasma-typo-text-l-bold-font-weight);\n                ", ": var(--plasma-typo-text-l-letter-spacing);\n                ", ": var(--plasma-typo-text-l-line-height);\n\n                ", ": var(--plasma-typo-text-l-font-family);\n                ", ": var(--plasma-typo-text-l-font-size);\n                ", ": var(--plasma-typo-text-l-font-style);\n                ", ": var(--plasma-typo-text-l-font-weight);\n                ", ": var(--plasma-typo-text-l-letter-spacing);\n                ", ": var(--plasma-typo-text-l-line-height);\n            "])), _emotion.noteTokens.padding, _emotion.noteTokens.paddingScalable, _emotion.noteTokens.borderRadius, _emotion.noteTokens.gap, _emotion.noteTokens.gapScalable, _emotion.noteTokens.contentGap, _emotion.noteTokens.fixedContentBeforeWidth, _emotion.noteTokens.fixedContentBeforeHeight, _emotion.noteTokens.fixedContentBeforePadding, _emotion.noteTokens.titleFontFamily, _emotion.noteTokens.titleFontSize, _emotion.noteTokens.titleFontStyle, _emotion.noteTokens.titleFontWeight, _emotion.noteTokens.titleLetterSpacing, _emotion.noteTokens.titleLineHeight, _emotion.noteTokens.textFontFamily, _emotion.noteTokens.textFontSize, _emotion.noteTokens.textFontStyle, _emotion.noteTokens.textFontWeight, _emotion.noteTokens.textLetterSpacing, _emotion.noteTokens.textLineHeight),
+      m: /*#__PURE__*/(0, _emotion.css)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.25rem 1.5rem;\n                ", ": 1.25rem;\n                ", ": 0.75rem;\n                ", ": 0.625rem;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 1.5rem;\n                ", ": 0;\n\n                ", ": var(--plasma-typo-text-m-font-family);\n                ", ": var(--plasma-typo-text-m-font-size);\n                ", ": var(--plasma-typo-text-m-font-style);\n                ", ": var(--plasma-typo-text-m-bold-font-weight);\n                ", ": var(--plasma-typo-text-m-letter-spacing);\n                ", ": var(--plasma-typo-text-m-line-height);\n\n                ", ": var(--plasma-typo-text-m-font-family);\n                ", ": var(--plasma-typo-text-m-font-size);\n                ", ": var(--plasma-typo-text-m-font-style);\n                ", ": var(--plasma-typo-text-m-font-weight);\n                ", ": var(--plasma-typo-text-m-letter-spacing);\n                ", ": var(--plasma-typo-text-m-line-height);\n            "])), _emotion.noteTokens.padding, _emotion.noteTokens.paddingScalable, _emotion.noteTokens.borderRadius, _emotion.noteTokens.gap, _emotion.noteTokens.gapScalable, _emotion.noteTokens.contentGap, _emotion.noteTokens.fixedContentBeforeWidth, _emotion.noteTokens.fixedContentBeforeHeight, _emotion.noteTokens.fixedContentBeforePadding, _emotion.noteTokens.titleFontFamily, _emotion.noteTokens.titleFontSize, _emotion.noteTokens.titleFontStyle, _emotion.noteTokens.titleFontWeight, _emotion.noteTokens.titleLetterSpacing, _emotion.noteTokens.titleLineHeight, _emotion.noteTokens.textFontFamily, _emotion.noteTokens.textFontSize, _emotion.noteTokens.textFontStyle, _emotion.noteTokens.textFontWeight, _emotion.noteTokens.textLetterSpacing, _emotion.noteTokens.textLineHeight),
+      s: /*#__PURE__*/(0, _emotion.css)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1rem 1.25rem;\n                ", ": 1rem;\n                ", ": 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 1.125rem;\n                ", ": 0.063rem 0;\n\n                ", ": var(--plasma-typo-text-s-font-family);\n                ", ": var(--plasma-typo-text-s-font-size);\n                ", ": var(--plasma-typo-text-s-font-style);\n                ", ": var(--plasma-typo-text-s-bold-font-weight);\n                ", ": var(--plasma-typo-text-s-letter-spacing);\n                ", ": var(--plasma-typo-text-s-line-height);\n\n                ", ": var(--plasma-typo-text-s-font-family);\n                ", ": var(--plasma-typo-text-s-font-size);\n                ", ": var(--plasma-typo-text-s-font-style);\n                ", ": var(--plasma-typo-text-s-font-weight);\n                ", ": var(--plasma-typo-text-s-letter-spacing);\n                ", ": var(--plasma-typo-text-s-line-height);\n            "])), _emotion.noteTokens.padding, _emotion.noteTokens.paddingScalable, _emotion.noteTokens.borderRadius, _emotion.noteTokens.gap, _emotion.noteTokens.gapScalable, _emotion.noteTokens.contentGap, _emotion.noteTokens.fixedContentBeforeWidth, _emotion.noteTokens.fixedContentBeforeHeight, _emotion.noteTokens.fixedContentBeforePadding, _emotion.noteTokens.titleFontFamily, _emotion.noteTokens.titleFontSize, _emotion.noteTokens.titleFontStyle, _emotion.noteTokens.titleFontWeight, _emotion.noteTokens.titleLetterSpacing, _emotion.noteTokens.titleLineHeight, _emotion.noteTokens.textFontFamily, _emotion.noteTokens.textFontSize, _emotion.noteTokens.textFontStyle, _emotion.noteTokens.textFontWeight, _emotion.noteTokens.textLetterSpacing, _emotion.noteTokens.textLineHeight),
+      xs: /*#__PURE__*/(0, _emotion.css)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.75rem 1rem;\n                ", ": 0.75rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": 0;\n\n                ", ": var(--plasma-typo-text-xs-font-family);\n                ", ": var(--plasma-typo-text-xs-font-size);\n                ", ": var(--plasma-typo-text-xs-font-style);\n                ", ": var(--plasma-typo-text-xs-bold-font-weight);\n                ", ": var(--plasma-typo-text-xs-letter-spacing);\n                ", ": var(--plasma-typo-text-xs-line-height);\n\n                ", ": var(--plasma-typo-text-xs-font-family);\n                ", ": var(--plasma-typo-text-xs-font-size);\n                ", ": var(--plasma-typo-text-xs-font-style);\n                ", ": var(--plasma-typo-text-xs-font-weight);\n                ", ": var(--plasma-typo-text-xs-letter-spacing);\n                ", ": var(--plasma-typo-text-xs-line-height);\n            "])), _emotion.noteTokens.padding, _emotion.noteTokens.paddingScalable, _emotion.noteTokens.borderRadius, _emotion.noteTokens.gap, _emotion.noteTokens.gapScalable, _emotion.noteTokens.contentGap, _emotion.noteTokens.fixedContentBeforeWidth, _emotion.noteTokens.fixedContentBeforeHeight, _emotion.noteTokens.fixedContentBeforePadding, _emotion.noteTokens.titleFontFamily, _emotion.noteTokens.titleFontSize, _emotion.noteTokens.titleFontStyle, _emotion.noteTokens.titleFontWeight, _emotion.noteTokens.titleLetterSpacing, _emotion.noteTokens.titleLineHeight, _emotion.noteTokens.textFontFamily, _emotion.noteTokens.textFontSize, _emotion.noteTokens.textFontStyle, _emotion.noteTokens.textFontWeight, _emotion.noteTokens.textLetterSpacing, _emotion.noteTokens.textLineHeight)
+    }
+  }
+};

package/emotion/cjs/components/Note/Note.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Note = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _Note = /*#__PURE__*/require("./Note.config");
+var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.noteConfig, _Note.config);
+var Note = exports.Note = /*#__PURE__*/(0, _emotion.component)(mergedConfig);

package/emotion/cjs/components/Note/Note.stories.tsx

@@ -0,0 +1,85 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { IconSaluteOutline } from '@salutejs/plasma-icons';
+
+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: 'Data Display/Note',
+    component: Note,
+    decorators: [InSpacingDecorator],
+    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 && (
+                        <IconSaluteOutline
+                            size={getIconSize(args.size, args.contentBeforeSizing === 'scalable')}
+                            color="inherit"
+                        />
+                    )
+                }
+                {...args}
+            />
+        </div>
+    ),
+};

package/emotion/cjs/components/Note/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Note", {
+  enumerable: true,
+  get: function get() {
+    return _Note.Note;
+  }
+});
+Object.defineProperty(exports, "noteClasses", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.noteClasses;
+  }
+});
+Object.defineProperty(exports, "noteTokens", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.noteTokens;
+  }
+});
+var _Note = /*#__PURE__*/require("./Note");
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");

package/emotion/cjs/index.js

@@ -674,6 +674,17 @@ Object.keys(_Tree).forEach(function (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];
+    }
+  });
+});
 var _mixins = /*#__PURE__*/require("./mixins");
 Object.keys(_mixins).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/emotion/es/components/Note/Note.config.js

@@ -0,0 +1,24 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--text-primary);\n                ", ": var(--text-primary);\n            "])), tokens.background, tokens.color, tokens.contentBeforeColor),
+      positive: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-positive);\n                ", ": var(--text-primary);\n                ", ": var(--text-positive);\n            "])), tokens.background, tokens.color, tokens.contentBeforeColor),
+      warning: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-warning);\n                ", ": var(--text-primary);\n                ", ": var(--text-warning);\n            "])), tokens.background, tokens.color, tokens.contentBeforeColor),
+      negative: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-negative);\n                ", ": var(--text-primary);\n                ", ": var(--text-negative);\n            "])), tokens.background, tokens.color, tokens.contentBeforeColor),
+      info: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-info);\n                ", ": var(--text-primary);\n                ", ": var(--text-info);\n            "])), tokens.background, tokens.color, tokens.contentBeforeColor)
+    },
+    size: {
+      l: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem 1.875rem;\n                ", ": 1.5rem 1.75rem;\n                ", ": 0.875rem;\n                ", ": 0.75rem;\n                ", ": 1rem;\n                ", ": 0.25rem;\n\n                ", ": 1.5rem;\n                ", ": 2rem;\n                ", ": 0.25rem 0;\n\n                ", ": var(--plasma-typo-text-l-font-family);\n                ", ": var(--plasma-typo-text-l-font-size);\n                ", ": var(--plasma-typo-text-l-font-style);\n                ", ": var(--plasma-typo-text-l-bold-font-weight);\n                ", ": var(--plasma-typo-text-l-letter-spacing);\n                ", ": var(--plasma-typo-text-l-line-height);\n\n                ", ": var(--plasma-typo-text-l-font-family);\n                ", ": var(--plasma-typo-text-l-font-size);\n                ", ": var(--plasma-typo-text-l-font-style);\n                ", ": var(--plasma-typo-text-l-font-weight);\n                ", ": var(--plasma-typo-text-l-letter-spacing);\n                ", ": var(--plasma-typo-text-l-line-height);\n            "])), tokens.padding, tokens.paddingScalable, tokens.borderRadius, tokens.gap, tokens.gapScalable, tokens.contentGap, tokens.fixedContentBeforeWidth, tokens.fixedContentBeforeHeight, tokens.fixedContentBeforePadding, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textLetterSpacing, tokens.textLineHeight),
+      m: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.25rem 1.5rem;\n                ", ": 1.25rem;\n                ", ": 0.75rem;\n                ", ": 0.625rem;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 1.5rem;\n                ", ": 0;\n\n                ", ": var(--plasma-typo-text-m-font-family);\n                ", ": var(--plasma-typo-text-m-font-size);\n                ", ": var(--plasma-typo-text-m-font-style);\n                ", ": var(--plasma-typo-text-m-bold-font-weight);\n                ", ": var(--plasma-typo-text-m-letter-spacing);\n                ", ": var(--plasma-typo-text-m-line-height);\n\n                ", ": var(--plasma-typo-text-m-font-family);\n                ", ": var(--plasma-typo-text-m-font-size);\n                ", ": var(--plasma-typo-text-m-font-style);\n                ", ": var(--plasma-typo-text-m-font-weight);\n                ", ": var(--plasma-typo-text-m-letter-spacing);\n                ", ": var(--plasma-typo-text-m-line-height);\n            "])), tokens.padding, tokens.paddingScalable, tokens.borderRadius, tokens.gap, tokens.gapScalable, tokens.contentGap, tokens.fixedContentBeforeWidth, tokens.fixedContentBeforeHeight, tokens.fixedContentBeforePadding, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textLetterSpacing, tokens.textLineHeight),
+      s: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1rem 1.25rem;\n                ", ": 1rem;\n                ", ": 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 1.125rem;\n                ", ": 0.063rem 0;\n\n                ", ": var(--plasma-typo-text-s-font-family);\n                ", ": var(--plasma-typo-text-s-font-size);\n                ", ": var(--plasma-typo-text-s-font-style);\n                ", ": var(--plasma-typo-text-s-bold-font-weight);\n                ", ": var(--plasma-typo-text-s-letter-spacing);\n                ", ": var(--plasma-typo-text-s-line-height);\n\n                ", ": var(--plasma-typo-text-s-font-family);\n                ", ": var(--plasma-typo-text-s-font-size);\n                ", ": var(--plasma-typo-text-s-font-style);\n                ", ": var(--plasma-typo-text-s-font-weight);\n                ", ": var(--plasma-typo-text-s-letter-spacing);\n                ", ": var(--plasma-typo-text-s-line-height);\n            "])), tokens.padding, tokens.paddingScalable, tokens.borderRadius, tokens.gap, tokens.gapScalable, tokens.contentGap, tokens.fixedContentBeforeWidth, tokens.fixedContentBeforeHeight, tokens.fixedContentBeforePadding, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textLetterSpacing, tokens.textLineHeight),
+      xs: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.75rem 1rem;\n                ", ": 0.75rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": 0;\n\n                ", ": var(--plasma-typo-text-xs-font-family);\n                ", ": var(--plasma-typo-text-xs-font-size);\n                ", ": var(--plasma-typo-text-xs-font-style);\n                ", ": var(--plasma-typo-text-xs-bold-font-weight);\n                ", ": var(--plasma-typo-text-xs-letter-spacing);\n                ", ": var(--plasma-typo-text-xs-line-height);\n\n                ", ": var(--plasma-typo-text-xs-font-family);\n                ", ": var(--plasma-typo-text-xs-font-size);\n                ", ": var(--plasma-typo-text-xs-font-style);\n                ", ": var(--plasma-typo-text-xs-font-weight);\n                ", ": var(--plasma-typo-text-xs-letter-spacing);\n                ", ": var(--plasma-typo-text-xs-line-height);\n            "])), tokens.padding, tokens.paddingScalable, tokens.borderRadius, tokens.gap, tokens.gapScalable, tokens.contentGap, tokens.fixedContentBeforeWidth, tokens.fixedContentBeforeHeight, tokens.fixedContentBeforePadding, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textLetterSpacing, tokens.textLineHeight)
+    }
+  }
+};

package/emotion/es/components/Note/Note.js

@@ -0,0 +1,4 @@
+import { noteConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
+import { config } from './Note.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(noteConfig, config);
+export var Note = /*#__PURE__*/component(mergedConfig);

package/emotion/es/components/Note/Note.stories.tsx

@@ -0,0 +1,85 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { IconSaluteOutline } from '@salutejs/plasma-icons';
+
+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: 'Data Display/Note',
+    component: Note,
+    decorators: [InSpacingDecorator],
+    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 && (
+                        <IconSaluteOutline
+                            size={getIconSize(args.size, args.contentBeforeSizing === 'scalable')}
+                            color="inherit"
+                        />
+                    )
+                }
+                {...args}
+            />
+        </div>
+    ),
+};

package/emotion/es/components/Note/index.js

@@ -0,0 +1,2 @@
+export { Note } from './Note';
+export { noteTokens, noteClasses } from '@salutejs/plasma-new-hope/emotion';

package/emotion/es/index.js

@@ -59,5 +59,6 @@ export * from './components/NumberInput';
 export * from './components/Dropzone';
 export * from './components/Rating';
 export * from './components/Tree';
+export * from './components/Note';
 export * from './mixins';
 export * from './tokens';

package/es/components/Note/Note.config.js

@@ -0,0 +1,25 @@
+import './Note.config_1psv03r.css';
+var config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": "dlpid31",
+      positive: "pj3b0d5",
+      warning: "w73g2ww",
+      negative: "n1m8g88j",
+      info: "ifuz2qv"
+    },
+    size: {
+      l: "ly7aunu",
+      m: "m1sat9qb",
+      s: "s1gn2ksf",
+      xs: "xqm7lmj"
+    }
+  }
+};
+
+export { config };
+//# sourceMappingURL=Note.config.js.map

package/es/components/Note/Note.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.config.js","sources":["../../../src-css/components/Note/Note.config.ts"],"sourcesContent":["import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n    defaults: {\n        view: 'default',\n        size: 'l',\n    },\n    variations: {\n        view: {\n            default: css`\n                ${tokens.background}: var(--surface-transparent-secondary);\n                ${tokens.color}: var(--text-primary);\n                ${tokens.contentBeforeColor}: var(--text-primary);\n            `,\n            positive: css`\n                ${tokens.background}: var(--surface-transparent-positive);\n                ${tokens.color}: var(--text-primary);\n                ${tokens.contentBeforeColor}: var(--text-positive);\n            `,\n            warning: css`\n                ${tokens.background}: var(--surface-transparent-warning);\n                ${tokens.color}: var(--text-primary);\n                ${tokens.contentBeforeColor}: var(--text-warning);\n            `,\n            negative: css`\n                ${tokens.background}: var(--surface-transparent-negative);\n                ${tokens.color}: var(--text-primary);\n                ${tokens.contentBeforeColor}: var(--text-negative);\n            `,\n            info: css`\n                ${tokens.background}: var(--surface-transparent-info);\n                ${tokens.color}: var(--text-primary);\n                ${tokens.contentBeforeColor}: var(--text-info);\n            `,\n        },\n        size: {\n            l: css`\n                ${tokens.padding}: 1.5rem 1.875rem;\n                ${tokens.paddingScalable}: 1.5rem 1.75rem;\n                ${tokens.borderRadius}: 0.875rem;\n                ${tokens.gap}: 0.75rem;\n                ${tokens.gapScalable}: 1rem;\n                ${tokens.contentGap}: 0.25rem;\n\n                ${tokens.fixedContentBeforeWidth}: 1.5rem;\n                ${tokens.fixedContentBeforeHeight}: 2rem;\n                ${tokens.fixedContentBeforePadding}: 0.25rem 0;\n\n                ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family);\n                ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size);\n                ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style);\n                ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight);\n                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing);\n                ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height);\n\n                ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family);\n                ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size);\n                ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style);\n                ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight);\n                ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing);\n                ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height);\n            `,\n            m: css`\n                ${tokens.padding}: 1.25rem 1.5rem;\n                ${tokens.paddingScalable}: 1.25rem;\n                ${tokens.borderRadius}: 0.75rem;\n                ${tokens.gap}: 0.625rem;\n                ${tokens.gapScalable}: 0.75rem;\n                ${tokens.contentGap}: 0.125rem;\n\n                ${tokens.fixedContentBeforeWidth}: 1.5rem;\n                ${tokens.fixedContentBeforeHeight}: 1.5rem;\n                ${tokens.fixedContentBeforePadding}: 0;\n\n                ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family);\n                ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size);\n                ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style);\n                ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight);\n                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing);\n                ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height);\n\n                ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family);\n                ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size);\n                ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style);\n                ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight);\n                ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing);\n                ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height);\n            `,\n            s: css`\n                ${tokens.padding}: 1rem 1.25rem;\n                ${tokens.paddingScalable}: 1rem;\n                ${tokens.borderRadius}: 0.625rem;\n                ${tokens.gap}: 0.5rem;\n                ${tokens.gapScalable}: 0.75rem;\n                ${tokens.contentGap}: 0.125rem;\n\n                ${tokens.fixedContentBeforeWidth}: 1rem;\n                ${tokens.fixedContentBeforeHeight}: 1.125rem;\n                ${tokens.fixedContentBeforePadding}: 0.063rem 0;\n\n                ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family);\n                ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size);\n                ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style);\n                ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight);\n                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);\n                ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height);\n\n                ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family);\n                ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size);\n                ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style);\n                ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight);\n                ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);\n                ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height);\n            `,\n            xs: css`\n                ${tokens.padding}: 0.75rem 1rem;\n                ${tokens.paddingScalable}: 0.75rem;\n                ${tokens.borderRadius}: 0.5rem;\n                ${tokens.gap}: 0.375rem;\n                ${tokens.gapScalable}: 0.5rem;\n                ${tokens.contentGap}: 0.125rem;\n\n                ${tokens.fixedContentBeforeWidth}: 1rem;\n                ${tokens.fixedContentBeforeHeight}: 1rem;\n                ${tokens.fixedContentBeforePadding}: 0;\n\n                ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family);\n                ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size);\n                ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style);\n                ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight);\n                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);\n                ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height);\n\n                ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family);\n                ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size);\n                ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style);\n                ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight);\n                ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);\n                ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height);\n            `,\n        },\n    },\n};\n"],"names":["config","defaults","view","size","variations","default","positive","warning","negative","info","l","m","s","xs"],"mappings":"AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,GAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;AACFG,MAAAA,SAAAA,EAIC,SAAA;AACDC,MAAAA,QAAQ,EAIP,SAAA;AACDC,MAAAA,OAAO,EAIN,SAAA;AACDC,MAAAA,QAAQ,EAIP,UAAA;AACDC,MAAAA,IAAI,EAAA,SAAA;KAKP;AACDN,IAAAA,IAAI,EAAE;AACFO,MAAAA,CAAC,EAyBA,SAAA;AACDC,MAAAA,CAAC,EAyBA,UAAA;AACDC,MAAAA,CAAC,EAyBA,UAAA;AACDC,MAAAA,EAAE,EAAA,SAAA;AA0BN,KAAA;AACJ,GAAA;AACJ;;;;"}

package/es/components/Note/Note.config_1psv03r.css

@@ -0,0 +1,9 @@
+.dlpid31{--plasma-note-background:var(--surface-transparent-secondary);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-primary);}
+.pj3b0d5{--plasma-note-background:var(--surface-transparent-positive);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-positive);}
+.w73g2ww{--plasma-note-background:var(--surface-transparent-warning);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-warning);}
+.n1m8g88j{--plasma-note-background:var(--surface-transparent-negative);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-negative);}
+.ifuz2qv{--plasma-note-background:var(--surface-transparent-info);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-info);}
+.ly7aunu{--plasma-note-padding:1.5rem 1.875rem;--plasma-note-padding-scalable:1.5rem 1.75rem;--plasma-note-border-radius:0.875rem;--plasma-note-gap:0.75rem;--plasma-note-gap-scalable:1rem;--plasma-note-content-gap:0.25rem;--plasma-note-fixed-content-before-width:1.5rem;--plasma-note-fixed-content-before-height:2rem;--plasma-note-fixed-content-before-padding:0.25rem 0;--plasma-note-title-font-family:var(--plasma-typo-text-l-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-l-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-l-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-l-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-l-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-l-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-l-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-l-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-l-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-l-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-l-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-l-line-height);}
+.m1sat9qb{--plasma-note-padding:1.25rem 1.5rem;--plasma-note-padding-scalable:1.25rem;--plasma-note-border-radius:0.75rem;--plasma-note-gap:0.625rem;--plasma-note-gap-scalable:0.75rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1.5rem;--plasma-note-fixed-content-before-height:1.5rem;--plasma-note-fixed-content-before-padding:0;--plasma-note-title-font-family:var(--plasma-typo-text-m-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-m-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-m-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-m-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-m-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-m-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-m-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-m-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-m-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-m-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-m-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-m-line-height);}
+.s1gn2ksf{--plasma-note-padding:1rem 1.25rem;--plasma-note-padding-scalable:1rem;--plasma-note-border-radius:0.625rem;--plasma-note-gap:0.5rem;--plasma-note-gap-scalable:0.75rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1rem;--plasma-note-fixed-content-before-height:1.125rem;--plasma-note-fixed-content-before-padding:0.063rem 0;--plasma-note-title-font-family:var(--plasma-typo-text-s-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-s-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-s-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-s-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-s-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-s-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-s-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-s-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-s-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-s-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-s-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-s-line-height);}
+.xqm7lmj{--plasma-note-padding:0.75rem 1rem;--plasma-note-padding-scalable:0.75rem;--plasma-note-border-radius:0.5rem;--plasma-note-gap:0.375rem;--plasma-note-gap-scalable:0.5rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1rem;--plasma-note-fixed-content-before-height:1rem;--plasma-note-fixed-content-before-padding:0;--plasma-note-title-font-family:var(--plasma-typo-text-xs-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-xs-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-xs-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-xs-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-xs-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-xs-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-xs-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-xs-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-xs-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-xs-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-xs-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-xs-line-height);}

package/es/components/Note/Note.css

@@ -0,0 +1,9 @@
+.Note_config_1psv03r_dlpid31__b15400fc{--plasma-note-background:var(--surface-transparent-secondary);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-primary);}
+.Note_config_1psv03r_pj3b0d5__b15400fc{--plasma-note-background:var(--surface-transparent-positive);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-positive);}
+.Note_config_1psv03r_w73g2ww__b15400fc{--plasma-note-background:var(--surface-transparent-warning);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-warning);}
+.Note_config_1psv03r_n1m8g88j__b15400fc{--plasma-note-background:var(--surface-transparent-negative);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-negative);}
+.Note_config_1psv03r_ifuz2qv__b15400fc{--plasma-note-background:var(--surface-transparent-info);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-info);}
+.Note_config_1psv03r_ly7aunu__b15400fc{--plasma-note-padding:1.5rem 1.875rem;--plasma-note-padding-scalable:1.5rem 1.75rem;--plasma-note-border-radius:0.875rem;--plasma-note-gap:0.75rem;--plasma-note-gap-scalable:1rem;--plasma-note-content-gap:0.25rem;--plasma-note-fixed-content-before-width:1.5rem;--plasma-note-fixed-content-before-height:2rem;--plasma-note-fixed-content-before-padding:0.25rem 0;--plasma-note-title-font-family:var(--plasma-typo-text-l-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-l-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-l-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-l-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-l-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-l-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-l-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-l-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-l-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-l-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-l-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-l-line-height);}
+.Note_config_1psv03r_m1sat9qb__b15400fc{--plasma-note-padding:1.25rem 1.5rem;--plasma-note-padding-scalable:1.25rem;--plasma-note-border-radius:0.75rem;--plasma-note-gap:0.625rem;--plasma-note-gap-scalable:0.75rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1.5rem;--plasma-note-fixed-content-before-height:1.5rem;--plasma-note-fixed-content-before-padding:0;--plasma-note-title-font-family:var(--plasma-typo-text-m-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-m-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-m-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-m-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-m-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-m-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-m-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-m-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-m-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-m-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-m-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-m-line-height);}
+.Note_config_1psv03r_s1gn2ksf__b15400fc{--plasma-note-padding:1rem 1.25rem;--plasma-note-padding-scalable:1rem;--plasma-note-border-radius:0.625rem;--plasma-note-gap:0.5rem;--plasma-note-gap-scalable:0.75rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1rem;--plasma-note-fixed-content-before-height:1.125rem;--plasma-note-fixed-content-before-padding:0.063rem 0;--plasma-note-title-font-family:var(--plasma-typo-text-s-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-s-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-s-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-s-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-s-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-s-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-s-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-s-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-s-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-s-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-s-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-s-line-height);}
+.Note_config_1psv03r_xqm7lmj__b15400fc{--plasma-note-padding:0.75rem 1rem;--plasma-note-padding-scalable:0.75rem;--plasma-note-border-radius:0.5rem;--plasma-note-gap:0.375rem;--plasma-note-gap-scalable:0.5rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1rem;--plasma-note-fixed-content-before-height:1rem;--plasma-note-fixed-content-before-padding:0;--plasma-note-title-font-family:var(--plasma-typo-text-xs-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-xs-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-xs-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-xs-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-xs-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-xs-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-xs-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-xs-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-xs-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-xs-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-xs-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-xs-line-height);}

package/es/components/Note/Note.js

@@ -0,0 +1,8 @@
+import { component, mergeConfig, noteConfig } from '@salutejs/plasma-new-hope';
+import { config } from './Note.config.js';
+
+var mergedConfig = /*#__PURE__*/mergeConfig(noteConfig, config);
+var Note = /*#__PURE__*/component(mergedConfig);
+
+export { Note };
+//# sourceMappingURL=Note.js.map

package/es/components/Note/Note.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.js","sources":["../../../src-css/components/Note/Note.ts"],"sourcesContent":["import { noteConfig, component, mergeConfig } from '@salutejs/plasma-new-hope';\n\nimport { config } from './Note.config';\n\nconst mergedConfig = mergeConfig(noteConfig, config);\n\nexport const Note = component(mergedConfig);\n"],"names":["mergedConfig","mergeConfig","noteConfig","config","Note","component"],"mappings":";;;AAIA,IAAMA,YAAY,gBAAGC,WAAW,CAACC,UAAU,EAAEC,MAAM,CAAC,CAAA;IAEvCC,IAAI,gBAAGC,SAAS,CAACL,YAAY;;;;"}

package/es/index.css

@@ -290,6 +290,16 @@
 
 .Modal_config_1c34cg3_d142ug3n__b666ae01{--plasma-modal-overlay-with-blur-color:rgba(35,35,35,0.2);--plasma-modal-overlay-color:var(--overlay-soft);--plasma-modal-body-background:var(--surface-solid-card);--plasma-modal-body-border-radius:1.25rem;--plasma-modal-body-padding:2rem;--plasma-modal-content-padding:0.625rem;--plasma-modal-close-button-radius:0.375rem;--plasma-modal-close-button-color:var(--text-secondary);--plasma-modal-close-button-hover-color:var(--text-secondary-hover);--plasma-modal-close-button-active-color:var(--text-secondary-active);--plasma-modal-outline-focus-color:var(--surface-accent);}
 
+.Note_config_1psv03r_dlpid31__b15400fc{--plasma-note-background:var(--surface-transparent-secondary);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-primary);}
+.Note_config_1psv03r_pj3b0d5__b15400fc{--plasma-note-background:var(--surface-transparent-positive);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-positive);}
+.Note_config_1psv03r_w73g2ww__b15400fc{--plasma-note-background:var(--surface-transparent-warning);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-warning);}
+.Note_config_1psv03r_n1m8g88j__b15400fc{--plasma-note-background:var(--surface-transparent-negative);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-negative);}
+.Note_config_1psv03r_ifuz2qv__b15400fc{--plasma-note-background:var(--surface-transparent-info);--plasma-note-color:var(--text-primary);--plasma-note-content-before-color:var(--text-info);}
+.Note_config_1psv03r_ly7aunu__b15400fc{--plasma-note-padding:1.5rem 1.875rem;--plasma-note-padding-scalable:1.5rem 1.75rem;--plasma-note-border-radius:0.875rem;--plasma-note-gap:0.75rem;--plasma-note-gap-scalable:1rem;--plasma-note-content-gap:0.25rem;--plasma-note-fixed-content-before-width:1.5rem;--plasma-note-fixed-content-before-height:2rem;--plasma-note-fixed-content-before-padding:0.25rem 0;--plasma-note-title-font-family:var(--plasma-typo-text-l-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-l-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-l-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-l-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-l-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-l-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-l-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-l-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-l-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-l-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-l-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-l-line-height);}
+.Note_config_1psv03r_m1sat9qb__b15400fc{--plasma-note-padding:1.25rem 1.5rem;--plasma-note-padding-scalable:1.25rem;--plasma-note-border-radius:0.75rem;--plasma-note-gap:0.625rem;--plasma-note-gap-scalable:0.75rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1.5rem;--plasma-note-fixed-content-before-height:1.5rem;--plasma-note-fixed-content-before-padding:0;--plasma-note-title-font-family:var(--plasma-typo-text-m-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-m-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-m-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-m-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-m-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-m-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-m-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-m-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-m-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-m-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-m-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-m-line-height);}
+.Note_config_1psv03r_s1gn2ksf__b15400fc{--plasma-note-padding:1rem 1.25rem;--plasma-note-padding-scalable:1rem;--plasma-note-border-radius:0.625rem;--plasma-note-gap:0.5rem;--plasma-note-gap-scalable:0.75rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1rem;--plasma-note-fixed-content-before-height:1.125rem;--plasma-note-fixed-content-before-padding:0.063rem 0;--plasma-note-title-font-family:var(--plasma-typo-text-s-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-s-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-s-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-s-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-s-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-s-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-s-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-s-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-s-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-s-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-s-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-s-line-height);}
+.Note_config_1psv03r_xqm7lmj__b15400fc{--plasma-note-padding:0.75rem 1rem;--plasma-note-padding-scalable:0.75rem;--plasma-note-border-radius:0.5rem;--plasma-note-gap:0.375rem;--plasma-note-gap-scalable:0.5rem;--plasma-note-content-gap:0.125rem;--plasma-note-fixed-content-before-width:1rem;--plasma-note-fixed-content-before-height:1rem;--plasma-note-fixed-content-before-padding:0;--plasma-note-title-font-family:var(--plasma-typo-text-xs-font-family);--plasma-note-title-font-size:var(--plasma-typo-text-xs-font-size);--plasma-note-title-font-style:var(--plasma-typo-text-xs-font-style);--plasma-note-title-font-weight:var(--plasma-typo-text-xs-bold-font-weight);--plasma-note-title-letter-spacing:var(--plasma-typo-text-xs-letter-spacing);--plasma-note-title-line-height:var(--plasma-typo-text-xs-line-height);--plasma-note-text-font-family:var(--plasma-typo-text-xs-font-family);--plasma-note-text-font-size:var(--plasma-typo-text-xs-font-size);--plasma-note-text-font-style:var(--plasma-typo-text-xs-font-style);--plasma-note-text-font-weight:var(--plasma-typo-text-xs-font-weight);--plasma-note-text-letter-spacing:var(--plasma-typo-text-xs-letter-spacing);--plasma-note-text-line-height:var(--plasma-typo-text-xs-line-height);}
+
 .Notification_config_7q5pn5_demycyd__d09fa18f{--plasma-notification-content-color:var(--text-secondary);--plasma-notification-backgorund:var(--surface-transparent-card);--plasma-notification-border-radius:0.75rem;--plasma-notification-padding:0.375rem;--plasma-notification-content-padding-top:0.125rem;--plasma-notification-content-padding-right:0.25rem;--plasma-notification-content-padding-bottom:0rem;--plasma-notification-content-padding-left:0.25rem;--plasma-notification-content-padding-top-without-icon:0.25rem;--plasma-notification-horizontal-layout-right-padding-without-close-icon:1rem;--plasma-notification-textbox-padding-top:0.1875rem;--plasma-notification-textbox-padding-right:0.125rem;--plasma-notification-textbox-padding-bottom:0.375rem;--plasma-notification-textbox-padding-left:0.125rem;--plasma-notification-textbox-padding-right-with-close-icon:1.625rem;--plasma-notification-textbox-gap:0.25rem;--plasma-notification-close-icon-top:0.5rem;--plasma-notification-close-icon-right:0.5rem;--plasma-notification-buttons-margin-top:0.375rem;--plasma-notification-content-left-icon-size:1.5rem;--plasma-notification-content-left-icon-margin:0.375rem;--plasma-notification-content-top-icon-margin:0.5rem;--plasma-notification-content-font-family:var(--plasma-typo-body-s-font-family);--plasma-notification-content-font-size:var(--plasma-typo-body-s-font-size);--plasma-notification-content-font-style:var(--plasma-typo-body-s-font-style);--plasma-notification-content-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-notification-content-font-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-notification-content-font-line-height:var(--plasma-typo-body-s-line-height);--plasma-notification-title-font-family:var(--plasma-typo-body-s-font-family);--plasma-notification-title-font-size:var(--plasma-typo-body-s-font-size);--plasma-notification-title-font-style:var(--plasma-typo-body-s-font-style);--plasma-notification-title-font-weight:var(--plasma-typo-body-s-bold-font-weight);--plasma-notification-title-font-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-notification-title-font-line-height:var(--plasma-typo-body-s-line-height);--plasma-notification-close-icon-color:var(--text-tertiary);--plasma-notification-close-icon-color-on-hover:var(--text-primary);--plasma-notification-horizontal-layout-gap:0.375rem;--plasma-notification-horizontal-layout-left-icon-margin:0.75rem;--plasma-notification-padding-one-line-textbox:0.8125rem 0.5rem 0.8125rem 0.875rem;}
 .Notification_config_7q5pn5_hu7sha0__d09fa18f{--plasma-notification-width:25rem;--plasma-notification-horizontal-layout-padding:1rem 0.5rem 1rem 0.875rem;}
 .Notification_config_7q5pn5_v1dvr7yw__d09fa18f{--plasma-notification-width:15rem;--plasma-notification-padding:0.375rem;}

package/es/index.js

@@ -1,5 +1,5 @@
 export { Accordion } from './components/Accordion/Accordion.js';
-export { AccordionItem, ButtonBase, CellTextbox, CellTextboxLabel, CellTextboxSubtitle, CellTextboxTitle, Col, Overlay, PopupProvider, Portal, RadioGroup, RectSkeleton, Row, SSRProvider, SegmentProvider, TabItemRefs, TabsContext, addNotification, closeNotification, counterTokens, datePickerClasses, datePickerTokens, dividerTokens, dropzoneClasses, dropzoneTokens, modalClasses, numberInputClasses, numberInputTokens, popupClasses, priceClasses, rangeTokens, ratingClasses, ratingTokens, sheetClasses, textFieldTokens, toolbarTokens, usePopupContext, useSegment, useToast, withSkeleton } from '@salutejs/plasma-new-hope';
+export { AccordionItem, ButtonBase, CellTextbox, CellTextboxLabel, CellTextboxSubtitle, CellTextboxTitle, Col, Overlay, PopupProvider, Portal, RadioGroup, RectSkeleton, Row, SSRProvider, SegmentProvider, TabItemRefs, TabsContext, addNotification, closeNotification, counterTokens, datePickerClasses, datePickerTokens, dividerTokens, dropzoneClasses, dropzoneTokens, modalClasses, noteClasses, noteTokens, numberInputClasses, numberInputTokens, popupClasses, priceClasses, rangeTokens, ratingClasses, ratingTokens, sheetClasses, textFieldTokens, toolbarTokens, usePopupContext, useSegment, useToast, withSkeleton } from '@salutejs/plasma-new-hope';
 export { Attach } from './components/Attach/Attach.js';
 export { Autocomplete } from './components/Autocomplete/Autocomplete.js';
 export { Avatar } from './components/Avatar/Avatar.js';
@@ -28,6 +28,7 @@ export { Indicator } from './components/Indicator/Indicator.js';
 export { Link } from './components/Link/Link.js';
 export { Mask } from './components/Mask/Mask.js';
 export { Modal } from './components/Modal/Modal.js';
+export { Note } from './components/Note/Note.js';
 export { Notification, NotificationsProvider } from './components/Notification/Notification.js';
 export { NumberInput } from './components/NumberInput/NumberInput.js';
 export { Pagination } from './components/Pagination/Pagination.js';

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.d.ts

@@ -59,5 +59,6 @@ export * from './components/NumberInput';
 export * from './components/Dropzone';
 export * from './components/Rating';
 export * from './components/Tree';
+export * from './components/Note';
 export * from './mixins';
 export * from './tokens';

package/index.js

@@ -32,6 +32,7 @@ var Indicator = require('./components/Indicator/Indicator.js');
 var Link = require('./components/Link/Link.js');
 var Mask = require('./components/Mask/Mask.js');
 var Modal = require('./components/Modal/Modal.js');
+var Note = require('./components/Note/Note.js');
 var Notification = require('./components/Notification/Notification.js');
 var NumberInput = require('./components/NumberInput/NumberInput.js');
 var Pagination = require('./components/Pagination/Pagination.js');
@@ -170,6 +171,14 @@ Object.defineProperty(exports, 'modalClasses', {
 	enumerable: true,
 	get: function () { return plasmaNewHope.modalClasses; }
 });
+Object.defineProperty(exports, 'noteClasses', {
+	enumerable: true,
+	get: function () { return plasmaNewHope.noteClasses; }
+});
+Object.defineProperty(exports, 'noteTokens', {
+	enumerable: true,
+	get: function () { return plasmaNewHope.noteTokens; }
+});
 Object.defineProperty(exports, 'numberInputClasses', {
 	enumerable: true,
 	get: function () { return plasmaNewHope.numberInputClasses; }
@@ -262,6 +271,7 @@ exports.Indicator = Indicator.Indicator;
 exports.Link = Link.Link;
 exports.Mask = Mask.Mask;
 exports.Modal = Modal.Modal;
+exports.Note = Note.Note;
 exports.Notification = Notification.Notification;
 exports.NotificationsProvider = Notification.NotificationsProvider;
 exports.NumberInput = NumberInput.NumberInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/sdds-serv",
-  "version": "0.221.1-canary.1675.12514887207.0",
+  "version": "0.222.0-canary.1681.12515137471.0",
   "description": "Salute Design System / React UI kit for SDDS SERV web applications",
   "author": "Salute Frontend Team <salute.developers@gmail.com>",
   "license": "MIT",
@@ -48,7 +48,7 @@
     "directory": "packages/sdds-serv"
   },
   "dependencies": {
-    "@salutejs/plasma-new-hope": "0.236.1-canary.1675.12514887207.0",
+    "@salutejs/plasma-new-hope": "0.237.0-canary.1681.12515137471.0",
     "@salutejs/sdds-themes": "0.31.0"
   },
   "peerDependencies": {
@@ -79,10 +79,10 @@
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@salutejs/plasma-colors": "0.14.0",
-    "@salutejs/plasma-core": "1.190.0",
-    "@salutejs/plasma-cy-utils": "0.121.0",
+    "@salutejs/plasma-core": "1.191.0-canary.1681.12515137471.0",
+    "@salutejs/plasma-cy-utils": "0.122.0-canary.1681.12515137471.0",
     "@salutejs/plasma-icons": "1.210.0",
-    "@salutejs/plasma-sb-utils": "0.189.0",
+    "@salutejs/plasma-sb-utils": "0.190.0-canary.1681.12515137471.0",
     "@storybook/addon-docs": "7.6.17",
     "@storybook/addon-essentials": "7.6.17",
     "@storybook/addons": "7.6.17",
@@ -153,5 +153,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "4ca952fd1c697ecc9230916a45c0f01d60445f63"
+  "gitHead": "b9f688bfe6ad09f4d02bd79f23bf3125ab6ae6c7"
 }

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--text-primary);\n                ", ": var(--text-primary);\n            "])), _styledComponents.noteTokens.background, _styledComponents.noteTokens.color, _styledComponents.noteTokens.contentBeforeColor),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-positive);\n                ", ": var(--text-primary);\n                ", ": var(--text-positive);\n            "])), _styledComponents.noteTokens.background, _styledComponents.noteTokens.color, _styledComponents.noteTokens.contentBeforeColor),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-warning);\n                ", ": var(--text-primary);\n                ", ": var(--text-warning);\n            "])), _styledComponents.noteTokens.background, _styledComponents.noteTokens.color, _styledComponents.noteTokens.contentBeforeColor),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-negative);\n                ", ": var(--text-primary);\n                ", ": var(--text-negative);\n            "])), _styledComponents.noteTokens.background, _styledComponents.noteTokens.color, _styledComponents.noteTokens.contentBeforeColor),
+      info: /*#__PURE__*/(0, _styledComponents.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-info);\n                ", ": var(--text-primary);\n                ", ": var(--text-info);\n            "])), _styledComponents.noteTokens.background, _styledComponents.noteTokens.color, _styledComponents.noteTokens.contentBeforeColor)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem 1.875rem;\n                ", ": 1.5rem 1.75rem;\n                ", ": 0.875rem;\n                ", ": 0.75rem;\n                ", ": 1rem;\n                ", ": 0.25rem;\n\n                ", ": 1.5rem;\n                ", ": 2rem;\n                ", ": 0.25rem 0;\n\n                ", ": var(--plasma-typo-text-l-font-family);\n                ", ": var(--plasma-typo-text-l-font-size);\n                ", ": var(--plasma-typo-text-l-font-style);\n                ", ": var(--plasma-typo-text-l-bold-font-weight);\n                ", ": var(--plasma-typo-text-l-letter-spacing);\n                ", ": var(--plasma-typo-text-l-line-height);\n\n                ", ": var(--plasma-typo-text-l-font-family);\n                ", ": var(--plasma-typo-text-l-font-size);\n                ", ": var(--plasma-typo-text-l-font-style);\n                ", ": var(--plasma-typo-text-l-font-weight);\n                ", ": var(--plasma-typo-text-l-letter-spacing);\n                ", ": var(--plasma-typo-text-l-line-height);\n            "])), _styledComponents.noteTokens.padding, _styledComponents.noteTokens.paddingScalable, _styledComponents.noteTokens.borderRadius, _styledComponents.noteTokens.gap, _styledComponents.noteTokens.gapScalable, _styledComponents.noteTokens.contentGap, _styledComponents.noteTokens.fixedContentBeforeWidth, _styledComponents.noteTokens.fixedContentBeforeHeight, _styledComponents.noteTokens.fixedContentBeforePadding, _styledComponents.noteTokens.titleFontFamily, _styledComponents.noteTokens.titleFontSize, _styledComponents.noteTokens.titleFontStyle, _styledComponents.noteTokens.titleFontWeight, _styledComponents.noteTokens.titleLetterSpacing, _styledComponents.noteTokens.titleLineHeight, _styledComponents.noteTokens.textFontFamily, _styledComponents.noteTokens.textFontSize, _styledComponents.noteTokens.textFontStyle, _styledComponents.noteTokens.textFontWeight, _styledComponents.noteTokens.textLetterSpacing, _styledComponents.noteTokens.textLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.25rem 1.5rem;\n                ", ": 1.25rem;\n                ", ": 0.75rem;\n                ", ": 0.625rem;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 1.5rem;\n                ", ": 0;\n\n                ", ": var(--plasma-typo-text-m-font-family);\n                ", ": var(--plasma-typo-text-m-font-size);\n                ", ": var(--plasma-typo-text-m-font-style);\n                ", ": var(--plasma-typo-text-m-bold-font-weight);\n                ", ": var(--plasma-typo-text-m-letter-spacing);\n                ", ": var(--plasma-typo-text-m-line-height);\n\n                ", ": var(--plasma-typo-text-m-font-family);\n                ", ": var(--plasma-typo-text-m-font-size);\n                ", ": var(--plasma-typo-text-m-font-style);\n                ", ": var(--plasma-typo-text-m-font-weight);\n                ", ": var(--plasma-typo-text-m-letter-spacing);\n                ", ": var(--plasma-typo-text-m-line-height);\n            "])), _styledComponents.noteTokens.padding, _styledComponents.noteTokens.paddingScalable, _styledComponents.noteTokens.borderRadius, _styledComponents.noteTokens.gap, _styledComponents.noteTokens.gapScalable, _styledComponents.noteTokens.contentGap, _styledComponents.noteTokens.fixedContentBeforeWidth, _styledComponents.noteTokens.fixedContentBeforeHeight, _styledComponents.noteTokens.fixedContentBeforePadding, _styledComponents.noteTokens.titleFontFamily, _styledComponents.noteTokens.titleFontSize, _styledComponents.noteTokens.titleFontStyle, _styledComponents.noteTokens.titleFontWeight, _styledComponents.noteTokens.titleLetterSpacing, _styledComponents.noteTokens.titleLineHeight, _styledComponents.noteTokens.textFontFamily, _styledComponents.noteTokens.textFontSize, _styledComponents.noteTokens.textFontStyle, _styledComponents.noteTokens.textFontWeight, _styledComponents.noteTokens.textLetterSpacing, _styledComponents.noteTokens.textLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1rem 1.25rem;\n                ", ": 1rem;\n                ", ": 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 1.125rem;\n                ", ": 0.063rem 0;\n\n                ", ": var(--plasma-typo-text-s-font-family);\n                ", ": var(--plasma-typo-text-s-font-size);\n                ", ": var(--plasma-typo-text-s-font-style);\n                ", ": var(--plasma-typo-text-s-bold-font-weight);\n                ", ": var(--plasma-typo-text-s-letter-spacing);\n                ", ": var(--plasma-typo-text-s-line-height);\n\n                ", ": var(--plasma-typo-text-s-font-family);\n                ", ": var(--plasma-typo-text-s-font-size);\n                ", ": var(--plasma-typo-text-s-font-style);\n                ", ": var(--plasma-typo-text-s-font-weight);\n                ", ": var(--plasma-typo-text-s-letter-spacing);\n                ", ": var(--plasma-typo-text-s-line-height);\n            "])), _styledComponents.noteTokens.padding, _styledComponents.noteTokens.paddingScalable, _styledComponents.noteTokens.borderRadius, _styledComponents.noteTokens.gap, _styledComponents.noteTokens.gapScalable, _styledComponents.noteTokens.contentGap, _styledComponents.noteTokens.fixedContentBeforeWidth, _styledComponents.noteTokens.fixedContentBeforeHeight, _styledComponents.noteTokens.fixedContentBeforePadding, _styledComponents.noteTokens.titleFontFamily, _styledComponents.noteTokens.titleFontSize, _styledComponents.noteTokens.titleFontStyle, _styledComponents.noteTokens.titleFontWeight, _styledComponents.noteTokens.titleLetterSpacing, _styledComponents.noteTokens.titleLineHeight, _styledComponents.noteTokens.textFontFamily, _styledComponents.noteTokens.textFontSize, _styledComponents.noteTokens.textFontStyle, _styledComponents.noteTokens.textFontWeight, _styledComponents.noteTokens.textLetterSpacing, _styledComponents.noteTokens.textLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.75rem 1rem;\n                ", ": 0.75rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": 0;\n\n                ", ": var(--plasma-typo-text-xs-font-family);\n                ", ": var(--plasma-typo-text-xs-font-size);\n                ", ": var(--plasma-typo-text-xs-font-style);\n                ", ": var(--plasma-typo-text-xs-bold-font-weight);\n                ", ": var(--plasma-typo-text-xs-letter-spacing);\n                ", ": var(--plasma-typo-text-xs-line-height);\n\n                ", ": var(--plasma-typo-text-xs-font-family);\n                ", ": var(--plasma-typo-text-xs-font-size);\n                ", ": var(--plasma-typo-text-xs-font-style);\n                ", ": var(--plasma-typo-text-xs-font-weight);\n                ", ": var(--plasma-typo-text-xs-letter-spacing);\n                ", ": var(--plasma-typo-text-xs-line-height);\n            "])), _styledComponents.noteTokens.padding, _styledComponents.noteTokens.paddingScalable, _styledComponents.noteTokens.borderRadius, _styledComponents.noteTokens.gap, _styledComponents.noteTokens.gapScalable, _styledComponents.noteTokens.contentGap, _styledComponents.noteTokens.fixedContentBeforeWidth, _styledComponents.noteTokens.fixedContentBeforeHeight, _styledComponents.noteTokens.fixedContentBeforePadding, _styledComponents.noteTokens.titleFontFamily, _styledComponents.noteTokens.titleFontSize, _styledComponents.noteTokens.titleFontStyle, _styledComponents.noteTokens.titleFontWeight, _styledComponents.noteTokens.titleLetterSpacing, _styledComponents.noteTokens.titleLineHeight, _styledComponents.noteTokens.textFontFamily, _styledComponents.noteTokens.textFontSize, _styledComponents.noteTokens.textFontStyle, _styledComponents.noteTokens.textFontWeight, _styledComponents.noteTokens.textLetterSpacing, _styledComponents.noteTokens.textLineHeight)
+    }
+  }
+};

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Note = void 0;
+var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
+var _Note = /*#__PURE__*/require("./Note.config");
+var mergedConfig = /*#__PURE__*/(0, _styledComponents.mergeConfig)(_styledComponents.noteConfig, _Note.config);
+var Note = exports.Note = /*#__PURE__*/(0, _styledComponents.component)(mergedConfig);

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Note", {
+  enumerable: true,
+  get: function get() {
+    return _Note.Note;
+  }
+});
+Object.defineProperty(exports, "noteClasses", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponents.noteClasses;
+  }
+});
+Object.defineProperty(exports, "noteTokens", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponents.noteTokens;
+  }
+});
+var _Note = /*#__PURE__*/require("./Note");
+var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");

package/styled-components/cjs/index.js

@@ -674,6 +674,17 @@ Object.keys(_Tree).forEach(function (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];
+    }
+  });
+});
 var _mixins = /*#__PURE__*/require("./mixins");
 Object.keys(_mixins).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -0,0 +1,24 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--text-primary);\n                ", ": var(--text-primary);\n            "])), tokens.background, tokens.color, tokens.contentBeforeColor),
+      positive: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-positive);\n                ", ": var(--text-primary);\n                ", ": var(--text-positive);\n            "])), tokens.background, tokens.color, tokens.contentBeforeColor),
+      warning: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-warning);\n                ", ": var(--text-primary);\n                ", ": var(--text-warning);\n            "])), tokens.background, tokens.color, tokens.contentBeforeColor),
+      negative: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-negative);\n                ", ": var(--text-primary);\n                ", ": var(--text-negative);\n            "])), tokens.background, tokens.color, tokens.contentBeforeColor),
+      info: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-info);\n                ", ": var(--text-primary);\n                ", ": var(--text-info);\n            "])), tokens.background, tokens.color, tokens.contentBeforeColor)
+    },
+    size: {
+      l: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem 1.875rem;\n                ", ": 1.5rem 1.75rem;\n                ", ": 0.875rem;\n                ", ": 0.75rem;\n                ", ": 1rem;\n                ", ": 0.25rem;\n\n                ", ": 1.5rem;\n                ", ": 2rem;\n                ", ": 0.25rem 0;\n\n                ", ": var(--plasma-typo-text-l-font-family);\n                ", ": var(--plasma-typo-text-l-font-size);\n                ", ": var(--plasma-typo-text-l-font-style);\n                ", ": var(--plasma-typo-text-l-bold-font-weight);\n                ", ": var(--plasma-typo-text-l-letter-spacing);\n                ", ": var(--plasma-typo-text-l-line-height);\n\n                ", ": var(--plasma-typo-text-l-font-family);\n                ", ": var(--plasma-typo-text-l-font-size);\n                ", ": var(--plasma-typo-text-l-font-style);\n                ", ": var(--plasma-typo-text-l-font-weight);\n                ", ": var(--plasma-typo-text-l-letter-spacing);\n                ", ": var(--plasma-typo-text-l-line-height);\n            "])), tokens.padding, tokens.paddingScalable, tokens.borderRadius, tokens.gap, tokens.gapScalable, tokens.contentGap, tokens.fixedContentBeforeWidth, tokens.fixedContentBeforeHeight, tokens.fixedContentBeforePadding, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textLetterSpacing, tokens.textLineHeight),
+      m: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.25rem 1.5rem;\n                ", ": 1.25rem;\n                ", ": 0.75rem;\n                ", ": 0.625rem;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 1.5rem;\n                ", ": 0;\n\n                ", ": var(--plasma-typo-text-m-font-family);\n                ", ": var(--plasma-typo-text-m-font-size);\n                ", ": var(--plasma-typo-text-m-font-style);\n                ", ": var(--plasma-typo-text-m-bold-font-weight);\n                ", ": var(--plasma-typo-text-m-letter-spacing);\n                ", ": var(--plasma-typo-text-m-line-height);\n\n                ", ": var(--plasma-typo-text-m-font-family);\n                ", ": var(--plasma-typo-text-m-font-size);\n                ", ": var(--plasma-typo-text-m-font-style);\n                ", ": var(--plasma-typo-text-m-font-weight);\n                ", ": var(--plasma-typo-text-m-letter-spacing);\n                ", ": var(--plasma-typo-text-m-line-height);\n            "])), tokens.padding, tokens.paddingScalable, tokens.borderRadius, tokens.gap, tokens.gapScalable, tokens.contentGap, tokens.fixedContentBeforeWidth, tokens.fixedContentBeforeHeight, tokens.fixedContentBeforePadding, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textLetterSpacing, tokens.textLineHeight),
+      s: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1rem 1.25rem;\n                ", ": 1rem;\n                ", ": 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 1.125rem;\n                ", ": 0.063rem 0;\n\n                ", ": var(--plasma-typo-text-s-font-family);\n                ", ": var(--plasma-typo-text-s-font-size);\n                ", ": var(--plasma-typo-text-s-font-style);\n                ", ": var(--plasma-typo-text-s-bold-font-weight);\n                ", ": var(--plasma-typo-text-s-letter-spacing);\n                ", ": var(--plasma-typo-text-s-line-height);\n\n                ", ": var(--plasma-typo-text-s-font-family);\n                ", ": var(--plasma-typo-text-s-font-size);\n                ", ": var(--plasma-typo-text-s-font-style);\n                ", ": var(--plasma-typo-text-s-font-weight);\n                ", ": var(--plasma-typo-text-s-letter-spacing);\n                ", ": var(--plasma-typo-text-s-line-height);\n            "])), tokens.padding, tokens.paddingScalable, tokens.borderRadius, tokens.gap, tokens.gapScalable, tokens.contentGap, tokens.fixedContentBeforeWidth, tokens.fixedContentBeforeHeight, tokens.fixedContentBeforePadding, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textLetterSpacing, tokens.textLineHeight),
+      xs: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.75rem 1rem;\n                ", ": 0.75rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": 0;\n\n                ", ": var(--plasma-typo-text-xs-font-family);\n                ", ": var(--plasma-typo-text-xs-font-size);\n                ", ": var(--plasma-typo-text-xs-font-style);\n                ", ": var(--plasma-typo-text-xs-bold-font-weight);\n                ", ": var(--plasma-typo-text-xs-letter-spacing);\n                ", ": var(--plasma-typo-text-xs-line-height);\n\n                ", ": var(--plasma-typo-text-xs-font-family);\n                ", ": var(--plasma-typo-text-xs-font-size);\n                ", ": var(--plasma-typo-text-xs-font-style);\n                ", ": var(--plasma-typo-text-xs-font-weight);\n                ", ": var(--plasma-typo-text-xs-letter-spacing);\n                ", ": var(--plasma-typo-text-xs-line-height);\n            "])), tokens.padding, tokens.paddingScalable, tokens.borderRadius, tokens.gap, tokens.gapScalable, tokens.contentGap, tokens.fixedContentBeforeWidth, tokens.fixedContentBeforeHeight, tokens.fixedContentBeforePadding, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textLetterSpacing, tokens.textLineHeight)
+    }
+  }
+};

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

@@ -0,0 +1,4 @@
+import { noteConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import { config } from './Note.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(noteConfig, config);
+export var Note = /*#__PURE__*/component(mergedConfig);

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

@@ -0,0 +1,2 @@
+export { Note } from './Note';
+export { noteTokens, noteClasses } from '@salutejs/plasma-new-hope/styled-components';

package/styled-components/es/index.js

@@ -59,5 +59,6 @@ export * from './components/NumberInput';
 export * from './components/Dropzone';
 export * from './components/Rating';
 export * from './components/Tree';
+export * from './components/Note';
 export * from './mixins';
 export * from './tokens';