@salutejs/sdds-os 0.46.1-dev.0 → 0.47.0-dev.0

package/dist/css/es/index.js

@@ -1,5 +1,5 @@
 export { Accordion } from './components/Accordion/Accordion.js';
-export { AccordionItem, ButtonBase, CellTextbox, CellTextboxLabel, CellTextboxSubtitle, CellTextboxTitle, Col, ListItem, Overlay, PaginationDot, PaginationDots, PopupProvider, Portal, RadioGroup, Row, SSRProvider, SmartPaginationDots, TabItemRefs, TabsContext, addNotification, closeNotification, datePickerClasses, datePickerTokens, dividerTokens, dropzoneClasses, dropzoneTokens, modalClasses, popupClasses, rangeTokens, stepsTokens, textFieldTokens, timePickerClasses, timePickerTokens, toolbarTokens, useNotifications, usePopupContext } from '@salutejs/plasma-new-hope/css';
+export { AccordionItem, ButtonBase, CellTextbox, CellTextboxLabel, CellTextboxSubtitle, CellTextboxTitle, Col, ListItem, Overlay, PaginationDot, PaginationDots, PopupProvider, Portal, RadioGroup, Row, SSRProvider, SmartPaginationDots, TabItemRefs, TabsContext, addNotification, closeNotification, datePickerClasses, datePickerTokens, dividerTokens, dropzoneClasses, dropzoneTokens, groupTokens, modalClasses, popupClasses, rangeTokens, stepsTokens, textFieldTokens, timePickerClasses, timePickerTokens, toolbarTokens, useNotifications, usePopupContext } from '@salutejs/plasma-new-hope/css';
 export { Attach } from './components/Attach/Attach.js';
 export { Autocomplete } from './components/Autocomplete/Autocomplete.js';
 export { Avatar } from './components/Avatar/Avatar.js';
@@ -23,6 +23,7 @@ export { EmbedIconButton } from './components/EmbedIconButton/EmbedIconButton.js
 export { EmptyState } from './components/EmptyState/EmptyState.js';
 export { Flow } from './components/Flow/Flow.js';
 export { Grid } from './components/Grid/Grid.js';
+export { Group } from './components/Group/Group.js';
 export { IconButton } from './components/IconButton/IconButton.js';
 export { IconTabItem, TabItem } from './components/Tabs/TabItem.js';
 export { Image } from './components/Image/Image.js';

package/dist/css/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/dist/styled-components/cjs/components/Autocomplete/Autocomplete.config.js

@@ -265,6 +265,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height);
                 ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionMargin}: 0.3125rem;
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionInnerLabelOffset}: 0.25rem;
                 ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
                 ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
@@ -350,6 +351,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
                 ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionMargin}: 0.1875rem;
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionInnerLabelOffset}: 0.25rem;
                 ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
                 ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
@@ -481,8 +483,9 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldPlaceholderColor}: var(--text-tertiary);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelColor}: var(--text-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperColor}: var(--text-tertiary);
-                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionColor}: var(--text-secondary);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionColor}: var(--text-tertiary);
                 ${_styledcomponents.autocompleteTokens.textFieldContentSlotColor}: var(--text-tertiary);
+                ${_styledcomponents.autocompleteTokens.textFieldContentSlotRightColor}: var(--text-tertiary);
                 ${_styledcomponents.autocompleteTokens.textFieldBackgroundColor}: var(--surface-solid-tertiary);
                 ${_styledcomponents.autocompleteTokens.textFieldBorderColor}: transparent;
             `
@@ -490,6 +493,7 @@ const config = {
         readOnly: {
             true: (0, _styledcomponents.css)`
                 ${_styledcomponents.autocompleteTokens.textFieldReadOnlyOpacity}: 1;
+                ${_styledcomponents.autocompleteTokens.textFieldContentSlotColor}: var(--text-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldColorReadOnly}: var(--text-primary);
                 ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);

package/dist/styled-components/cjs/components/Combobox/Combobox.config.js

@@ -314,6 +314,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height);
 
                 ${_styledcomponents.comboboxTokens.textFieldLabelOffset}: 0.625rem;
+                ${_styledcomponents.comboboxTokens.textFieldTitleCaptionInnerLabelOffset}: 0.25rem;
                 ${_styledcomponents.comboboxTokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family);
                 ${_styledcomponents.comboboxTokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size);
                 ${_styledcomponents.comboboxTokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style);
@@ -438,6 +439,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height);
 
                 ${_styledcomponents.comboboxTokens.textFieldLabelOffset}: 0.5rem;
+                ${_styledcomponents.comboboxTokens.textFieldTitleCaptionInnerLabelOffset}: 0.25rem;
                 ${_styledcomponents.comboboxTokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family);
                 ${_styledcomponents.comboboxTokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size);
                 ${_styledcomponents.comboboxTokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style);

package/dist/styled-components/cjs/components/DatePicker/DatePicker.config.js

@@ -197,7 +197,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${_styledcomponents.datePickerTokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0.313rem;
+                ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0.25rem;
                 ${_styledcomponents.datePickerTokens.titleCaptionMargin}: 0.3125rem;
                 ${_styledcomponents.datePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
@@ -369,7 +369,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${_styledcomponents.datePickerTokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0.188rem;
+                ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0.25rem;
                 ${_styledcomponents.datePickerTokens.titleCaptionMargin}: 0.1875rem;
                 ${_styledcomponents.datePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);

package/dist/styled-components/cjs/components/Group/Group.config.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const config = {
+    defaults: {
+        gap: 'dense',
+        orientation: 'horizontal',
+        shape: 'default',
+        stretching: 'auto'
+    },
+    variations: {
+        orientation: {
+            horizontal: (0, _styledcomponents.css)`
+                ${_styledcomponents.groupTokens.orientation}: row;
+            `,
+            vertical: (0, _styledcomponents.css)`
+                ${_styledcomponents.groupTokens.orientation}: column;
+            `
+        },
+        gap: {
+            none: (0, _styledcomponents.css)`
+                ${_styledcomponents.groupTokens.gap}: 0;
+            `,
+            dense: (0, _styledcomponents.css)`
+                ${_styledcomponents.groupTokens.gap}: 0.125rem;
+            `,
+            wide: (0, _styledcomponents.css)`
+                ${_styledcomponents.groupTokens.gap}: 0.5rem;
+            `
+        },
+        shape: {
+            default: (0, _styledcomponents.css)``,
+            segmented: (0, _styledcomponents.css)`
+                ${_styledcomponents.groupTokens.segmentedRadius}: 0.25rem;
+            `
+        },
+        stretching: {
+            auto: (0, _styledcomponents.css)``,
+            filled: (0, _styledcomponents.css)``
+        }
+    }
+};

package/dist/styled-components/cjs/components/Group/Group.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Group", {
+    enumerable: true,
+    get: function() {
+        return Group;
+    }
+});
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _Groupconfig = require("./Group.config");
+const mergedConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.groupConfig, _Groupconfig.config);
+const Group = (0, _styledcomponents.component)(mergedConfig);

package/dist/styled-components/cjs/components/Group/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Group () {
+        return _Group.Group;
+    },
+    get groupTokens () {
+        return _styledcomponents.groupTokens;
+    }
+});
+const _Group = require("./Group");
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");

package/dist/styled-components/cjs/components/Select/Select.config.js

@@ -296,6 +296,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${_styledcomponents.selectTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height);
                 ${_styledcomponents.selectTokens.textFieldTitleCaptionMargin}: 0.3125rem;
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionInnerLabelOffset}: 0.25rem;
                 ${_styledcomponents.selectTokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.selectTokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.selectTokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -431,6 +432,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${_styledcomponents.selectTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
                 ${_styledcomponents.selectTokens.textFieldTitleCaptionMargin}: 0.1875rem;
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionInnerLabelOffset}: 0.25rem;
                 ${_styledcomponents.selectTokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.selectTokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.selectTokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -658,7 +660,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldColor}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldLabelColor}: var(--text-secondary);
-                ${_styledcomponents.selectTokens.textFieldTitleCaptionColor}: var(--text-secondary);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldContentSlotColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldBackgroundColor}: var(--surface-solid-tertiary);

package/dist/styled-components/cjs/components/TimePicker/TimePicker.config.js

@@ -106,6 +106,7 @@ const config = {
                 ${_styledcomponents.timePickerTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${_styledcomponents.timePickerTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
                 ${_styledcomponents.timePickerTokens.titleCaptionMargin}: 0.3125rem;
+                ${_styledcomponents.timePickerTokens.titleCaptionInnerLabelOffset}: 0.25rem;
                 ${_styledcomponents.timePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.timePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
                 ${_styledcomponents.timePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
@@ -198,6 +199,7 @@ const config = {
                 ${_styledcomponents.timePickerTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${_styledcomponents.timePickerTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
                 ${_styledcomponents.timePickerTokens.titleCaptionMargin}: 0.1875rem;
+                ${_styledcomponents.timePickerTokens.titleCaptionInnerLabelOffset}: 0.25rem;
                 ${_styledcomponents.timePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.timePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
                 ${_styledcomponents.timePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
@@ -345,7 +347,7 @@ const config = {
 
                 ${_styledcomponents.timePickerTokens.labelColor}: var(--text-secondary);
                 ${_styledcomponents.timePickerTokens.leftHelperColor}: var(--text-tertiary);
-                ${_styledcomponents.timePickerTokens.titleCaptionColor}: var(--text-secondary);
+                ${_styledcomponents.timePickerTokens.titleCaptionColor}: var(--text-tertiary);
 
                 ${_styledcomponents.timePickerTokens.textFieldColor}: var(--text-secondary);
                 ${_styledcomponents.timePickerTokens.textFieldPlaceholderColor}: var(--text-tertiary);
@@ -371,6 +373,7 @@ const config = {
                 ${_styledcomponents.timePickerTokens.textFieldBorderColorReadOnly}: transparent;
                 ${_styledcomponents.timePickerTokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
                 ${_styledcomponents.timePickerTokens.textFieldContentSlotRightOpacityReadOnly}: 1;
+                ${_styledcomponents.timePickerTokens.textFieldContentRightSlotColor}: var(--text-tertiary);
             `
         }
     }

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

@@ -18,6 +18,7 @@ _export_star(require("./components/Attach"), exports);
 _export_star(require("./components/Dropzone"), exports);
 _export_star(require("./components/Button"), exports);
 _export_star(require("./components/ButtonGroup"), exports);
+_export_star(require("./components/Group"), exports);
 _export_star(require("./components/IconButton"), exports);
 _export_star(require("./components/EmbedIconButton"), exports);
 _export_star(require("./components/ButtonBase"), exports);

package/dist/styled-components/es/components/Autocomplete/Autocomplete.config.js

@@ -255,6 +255,7 @@ export const config = {
                 ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height);
                 ${tokens.textFieldTitleCaptionMargin}: 0.3125rem;
+                ${tokens.textFieldTitleCaptionInnerLabelOffset}: 0.25rem;
                 ${tokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
                 ${tokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
@@ -340,6 +341,7 @@ export const config = {
                 ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
                 ${tokens.textFieldTitleCaptionMargin}: 0.1875rem;
+                ${tokens.textFieldTitleCaptionInnerLabelOffset}: 0.25rem;
                 ${tokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
                 ${tokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
@@ -471,8 +473,9 @@ export const config = {
                 ${tokens.textFieldPlaceholderColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-secondary);
                 ${tokens.textFieldLeftHelperColor}: var(--text-tertiary);
-                ${tokens.textFieldTitleCaptionColor}: var(--text-secondary);
+                ${tokens.textFieldTitleCaptionColor}: var(--text-tertiary);
                 ${tokens.textFieldContentSlotColor}: var(--text-tertiary);
+                ${tokens.textFieldContentSlotRightColor}: var(--text-tertiary);
                 ${tokens.textFieldBackgroundColor}: var(--surface-solid-tertiary);
                 ${tokens.textFieldBorderColor}: transparent;
             `
@@ -480,6 +483,7 @@ export const config = {
         readOnly: {
             true: css`
                 ${tokens.textFieldReadOnlyOpacity}: 1;
+                ${tokens.textFieldContentSlotColor}: var(--text-secondary);
                 ${tokens.textFieldColorReadOnly}: var(--text-primary);
                 ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-secondary);
                 ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);

package/dist/styled-components/es/components/Combobox/Combobox.config.js

@@ -304,6 +304,7 @@ export const config = {
                 ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height);
 
                 ${tokens.textFieldLabelOffset}: 0.625rem;
+                ${tokens.textFieldTitleCaptionInnerLabelOffset}: 0.25rem;
                 ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family);
                 ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size);
                 ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style);
@@ -428,6 +429,7 @@ export const config = {
                 ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height);
 
                 ${tokens.textFieldLabelOffset}: 0.5rem;
+                ${tokens.textFieldTitleCaptionInnerLabelOffset}: 0.25rem;
                 ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family);
                 ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size);
                 ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style);

package/dist/styled-components/es/components/DatePicker/DatePicker.config.js

@@ -187,7 +187,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${tokens.titleCaptionOffset}: 0.313rem;
+                ${tokens.titleCaptionOffset}: 0.25rem;
                 ${tokens.titleCaptionMargin}: 0.3125rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
@@ -359,7 +359,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${tokens.titleCaptionOffset}: 0.188rem;
+                ${tokens.titleCaptionOffset}: 0.25rem;
                 ${tokens.titleCaptionMargin}: 0.1875rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);

package/dist/styled-components/es/components/Group/Group.config.js

@@ -0,0 +1,40 @@
+import { css, groupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+export const config = {
+    defaults: {
+        gap: 'dense',
+        orientation: 'horizontal',
+        shape: 'default',
+        stretching: 'auto'
+    },
+    variations: {
+        orientation: {
+            horizontal: css`
+                ${tokens.orientation}: row;
+            `,
+            vertical: css`
+                ${tokens.orientation}: column;
+            `
+        },
+        gap: {
+            none: css`
+                ${tokens.gap}: 0;
+            `,
+            dense: css`
+                ${tokens.gap}: 0.125rem;
+            `,
+            wide: css`
+                ${tokens.gap}: 0.5rem;
+            `
+        },
+        shape: {
+            default: css``,
+            segmented: css`
+                ${tokens.segmentedRadius}: 0.25rem;
+            `
+        },
+        stretching: {
+            auto: css``,
+            filled: css``
+        }
+    }
+};

package/dist/styled-components/es/components/Group/Group.js

@@ -0,0 +1,6 @@
+import { groupConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import { config } from './Group.config';
+const mergedConfig = mergeConfig(groupConfig, config);
+/**
+ * Группа элементов с общими отступами, направлением и скруглением внутренних углов.
+ */ export const Group = component(mergedConfig);

package/dist/styled-components/es/components/Group/index.js

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

package/dist/styled-components/es/components/Select/Select.config.js

@@ -286,6 +286,7 @@ export const config = {
                 ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height);
                 ${tokens.textFieldTitleCaptionMargin}: 0.3125rem;
+                ${tokens.textFieldTitleCaptionInnerLabelOffset}: 0.25rem;
                 ${tokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -421,6 +422,7 @@ export const config = {
                 ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
                 ${tokens.textFieldTitleCaptionMargin}: 0.1875rem;
+                ${tokens.textFieldTitleCaptionInnerLabelOffset}: 0.25rem;
                 ${tokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -648,7 +650,7 @@ export const config = {
                 ${tokens.textFieldColor}: var(--text-secondary);
                 ${tokens.textFieldPlaceholderColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-secondary);
-                ${tokens.textFieldTitleCaptionColor}: var(--text-secondary);
+                ${tokens.textFieldTitleCaptionColor}: var(--text-tertiary);
                 ${tokens.textFieldLeftHelperColor}: var(--text-tertiary);
                 ${tokens.textFieldContentSlotColor}: var(--text-tertiary);
                 ${tokens.textFieldBackgroundColor}: var(--surface-solid-tertiary);

package/dist/styled-components/es/components/TimePicker/TimePicker.config.js

@@ -96,6 +96,7 @@ export const config = {
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
                 ${tokens.titleCaptionMargin}: 0.3125rem;
+                ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
@@ -188,6 +189,7 @@ export const config = {
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
                 ${tokens.titleCaptionMargin}: 0.1875rem;
+                ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
@@ -335,7 +337,7 @@ export const config = {
 
                 ${tokens.labelColor}: var(--text-secondary);
                 ${tokens.leftHelperColor}: var(--text-tertiary);
-                ${tokens.titleCaptionColor}: var(--text-secondary);
+                ${tokens.titleCaptionColor}: var(--text-tertiary);
 
                 ${tokens.textFieldColor}: var(--text-secondary);
                 ${tokens.textFieldPlaceholderColor}: var(--text-tertiary);
@@ -361,6 +363,7 @@ export const config = {
                 ${tokens.textFieldBorderColorReadOnly}: transparent;
                 ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
                 ${tokens.textFieldContentSlotRightOpacityReadOnly}: 1;
+                ${tokens.textFieldContentRightSlotColor}: var(--text-tertiary);
             `
         }
     }

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

@@ -17,6 +17,7 @@ export * from './components/Dropzone';
 // Data Entry
 export * from './components/Button';
 export * from './components/ButtonGroup';
+export * from './components/Group';
 export * from './components/IconButton';
 export * from './components/EmbedIconButton';
 export * from './components/ButtonBase';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/sdds-os",
-  "version": "0.46.1-dev.0",
+  "version": "0.47.0-dev.0",
   "description": "Salute Design System / React UI kit for SDDS OS web applications",
   "author": "Salute Frontend Team <salute.developers@gmail.com>",
   "publishConfig": {
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@salutejs-ds/sdds_os": "0.1.2",
-    "@salutejs/plasma-new-hope": "0.388.1-dev.0"
+    "@salutejs/plasma-new-hope": "0.389.0-dev.0"
   },
   "devDependencies": {
     "@babel/cli": "7.24.1",
@@ -60,10 +60,10 @@
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@salutejs/plasma-colors": "0.28.0-dev.0",
-    "@salutejs/plasma-core": "1.249.0-dev.0",
-    "@salutejs/plasma-cy-utils": "0.179.0-dev.0",
+    "@salutejs/plasma-core": "1.250.0-dev.0",
+    "@salutejs/plasma-cy-utils": "0.180.0-dev.0",
     "@salutejs/plasma-icons": "1.257.1-dev.0",
-    "@salutejs/plasma-sb-utils": "0.251.1-dev.0",
+    "@salutejs/plasma-sb-utils": "0.252.0-dev.0",
     "@types/node": "16.7.13",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
@@ -108,5 +108,11 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "ed4c47d66e4b9e902ba7b56c72b5df1da7230489"
+  "overrides": {
+    "@linaria/babel-preset": {
+      "happy-dom": "21.0.4"
+    },
+    "dompurify": "3.4.17"
+  },
+  "gitHead": "3c21629c0b49cb41f7254eb061bb18e82a13e858"
 }

package/types/components/Group/Group.config.d.ts

@@ -0,0 +1,27 @@
+export declare const config: {
+    defaults: {
+        gap: string;
+        orientation: string;
+        shape: string;
+        stretching: string;
+    };
+    variations: {
+        orientation: {
+            horizontal: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+            vertical: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        };
+        gap: {
+            none: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+            dense: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+            wide: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        };
+        shape: {
+            default: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+            segmented: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        };
+        stretching: {
+            auto: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+            filled: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        };
+    };
+};

package/types/components/Group/Group.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Группа элементов с общими отступами, направлением и скруглением внутренних углов.
+ */
+export declare const Group: import("react").FunctionComponent<import("@salutejs/plasma-new-hope/types/engines/types.js").PropsType<{
+    orientation: {
+        horizontal: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        vertical: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+    };
+    gap: {
+        none: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        dense: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        wide: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+    };
+    shape: {
+        default: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        segmented: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+    };
+    stretching: {
+        auto: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        filled: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+    };
+}> & import("@salutejs/plasma-new-hope/styled-components").GroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/components/Group/index.d.ts

@@ -0,0 +1,3 @@
+export { Group } from './Group';
+export { groupTokens } from '@salutejs/plasma-new-hope/styled-components';
+export type { GroupProps } from '@salutejs/plasma-new-hope/styled-components';

package/types/index.d.ts

@@ -13,6 +13,7 @@ export * from './components/Attach';
 export * from './components/Dropzone';
 export * from './components/Button';
 export * from './components/ButtonGroup';
+export * from './components/Group';
 export * from './components/IconButton';
 export * from './components/EmbedIconButton';
 export * from './components/ButtonBase';