@uzum-tech/ui 1.12.22 → 1.13.0

package/es/date-picker-v2/styles/light.d.ts

@@ -0,0 +1,477 @@
+import { ThemeCommonVars } from '../../_styles/common';
+export declare const self: (vars: ThemeCommonVars) => {
+    panelColor: string;
+    panelBoxShadow: string;
+    panelBorderRadius: string;
+    panelTextColor: string;
+    dividerColor: string;
+    itemTextColor: string;
+    itemTextColorOtherMonth: string;
+    itemTextColorDisabled: string;
+    itemColorHover: string;
+    itemColorActive: string;
+    itemColorIncluded: string;
+    itemTextColorActive: string;
+    itemBorderRadius: string;
+    iconColor: string;
+    iconColorDisabled: string;
+    weekdayTextColor: string;
+    weekendTextColor: string;
+    monthItemHeight: string;
+    monthItemColorHover: string;
+    monthItemColorActive: string;
+    monthItemTextColorActive: string;
+    yearTriggerColor: string;
+    yearTriggerColorHover: string;
+    yearTriggerTextColor: string;
+    currentDateIndicatorColor: string;
+};
+export type DatePickerV2ThemeVars = ReturnType<typeof self>;
+declare const datePickerV2Light: import("../../_mixins").Theme<"DatePickerV2", {
+    panelColor: string;
+    panelBoxShadow: string;
+    panelBorderRadius: string;
+    panelTextColor: string;
+    dividerColor: string;
+    itemTextColor: string;
+    itemTextColorOtherMonth: string;
+    itemTextColorDisabled: string;
+    itemColorHover: string;
+    itemColorActive: string;
+    itemColorIncluded: string;
+    itemTextColorActive: string;
+    itemBorderRadius: string;
+    iconColor: string;
+    iconColorDisabled: string;
+    weekdayTextColor: string;
+    weekendTextColor: string;
+    monthItemHeight: string;
+    monthItemColorHover: string;
+    monthItemColorActive: string;
+    monthItemTextColorActive: string;
+    yearTriggerColor: string;
+    yearTriggerColorHover: string;
+    yearTriggerTextColor: string;
+    currentDateIndicatorColor: string;
+}, {
+    Button: import("../../_mixins").Theme<"Button", {
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        borderRadiusTiny: string;
+        borderRadiusSmall: string;
+        borderRadiusMedium: string;
+        borderRadiusLarge: string;
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        opacityDisabled: string;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
+        colorOpacitySecondaryFocus: string;
+        colorSecondary: string;
+        colorSecondaryHover: string;
+        colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
+        waveColorSecondary: string;
+        colorTertiary: string;
+        colorTertiaryHover: string;
+        colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
+        colorTertiaryDisalbed: string;
+        waveColorTertiary: string;
+        textColorTextTertiary: string;
+        rippleColorTertiary: string;
+        colorQuaternary: string;
+        colorQuaternaryHover: string;
+        colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
+        color: string;
+        colorHover: string;
+        colorPressed: string;
+        colorFocus: string;
+        colorDisabled: string;
+        textColor: string;
+        textTertiary: string;
+        textColorTertiary: string;
+        textColorHover: string;
+        textColorPressed: string;
+        textColorFocus: string;
+        textColorDisabled: string;
+        textColorText: string;
+        textColorTextHover: string;
+        textColorTextPressed: string;
+        textColorTextFocus: string;
+        textColorTextDisabled: string;
+        textColorGhost: string;
+        textColorGhostHover: string;
+        textColorGhostPressed: string;
+        textColorGhostFocus: string;
+        textColorGhostDisabled: string;
+        border: string;
+        borderHover: string;
+        borderPressed: string;
+        borderFocus: string;
+        borderDisabled: string;
+        rippleColor: string;
+        colorPrimary: string;
+        colorHoverPrimary: string;
+        colorPressedPrimary: string;
+        colorFocusPrimary: string;
+        colorDisabledPrimary: string;
+        waveColorPrimary: string;
+        textColorPrimary: string;
+        textColorHoverPrimary: string;
+        textColorPressedPrimary: string;
+        textColorFocusPrimary: string;
+        textColorDisabledPrimary: string;
+        textColorTextPrimary: string;
+        textColorTextHoverPrimary: string;
+        textColorTextPressedPrimary: string;
+        textColorTextFocusPrimary: string;
+        textColorTextDisabledPrimary: string;
+        textColorGhostPrimary: string;
+        textColorGhostHoverPrimary: string;
+        textColorGhostPressedPrimary: string;
+        textColorGhostFocusPrimary: string;
+        textColorGhostDisabledPrimary: string;
+        borderPrimary: string;
+        borderHoverPrimary: string;
+        borderPressedPrimary: string;
+        borderFocusPrimary: string;
+        borderDisabledPrimary: string;
+        rippleColorPrimary: string;
+        colorInfo: string;
+        colorHoverInfo: string;
+        colorPressedInfo: string;
+        colorFocusInfo: string;
+        colorDisabledInfo: string;
+        textColorInfo: string;
+        textColorHoverInfo: string;
+        textColorPressedInfo: string;
+        textColorFocusInfo: string;
+        textColorDisabledInfo: string;
+        textColorTextInfo: string;
+        textColorTextHoverInfo: string;
+        textColorTextPressedInfo: string;
+        textColorTextFocusInfo: string;
+        textColorTextDisabledInfo: string;
+        textColorGhostInfo: string;
+        textColorGhostHoverInfo: string;
+        textColorGhostPressedInfo: string;
+        textColorGhostFocusInfo: string;
+        textColorGhostDisabledInfo: string;
+        borderInfo: string;
+        borderHoverInfo: string;
+        borderPressedInfo: string;
+        borderFocusInfo: string;
+        borderDisabledInfo: string;
+        rippleColorInfo: string;
+        colorSuccess: string;
+        colorHoverSuccess: string;
+        colorPressedSuccess: string;
+        colorFocusSuccess: string;
+        colorDisabledSuccess: string;
+        textColorSuccess: string;
+        textColorHoverSuccess: string;
+        textColorPressedSuccess: string;
+        textColorFocusSuccess: string;
+        textColorDisabledSuccess: string;
+        textColorTextSuccess: string;
+        textColorTextHoverSuccess: string;
+        textColorTextPressedSuccess: string;
+        textColorTextFocusSuccess: string;
+        textColorTextDisabledSuccess: string;
+        textColorGhostSuccess: string;
+        textColorGhostHoverSuccess: string;
+        textColorGhostPressedSuccess: string;
+        textColorGhostFocusSuccess: string;
+        textColorGhostDisabledSuccess: string;
+        borderSuccess: string;
+        borderHoverSuccess: string;
+        borderPressedSuccess: string;
+        borderFocusSuccess: string;
+        borderDisabledSuccess: string;
+        rippleColorSuccess: string;
+        colorWarning: string;
+        colorHoverWarning: string;
+        colorPressedWarning: string;
+        colorFocusWarning: string;
+        colorDisabledWarning: string;
+        textColorWarning: string;
+        textColorHoverWarning: string;
+        textColorPressedWarning: string;
+        textColorFocusWarning: string;
+        textColorDisabledWarning: string;
+        textColorTextWarning: string;
+        textColorTextHoverWarning: string;
+        textColorTextPressedWarning: string;
+        textColorTextFocusWarning: string;
+        textColorTextDisabledWarning: string;
+        textColorGhostWarning: string;
+        textColorGhostHoverWarning: string;
+        textColorGhostPressedWarning: string;
+        textColorGhostFocusWarning: string;
+        textColorGhostDisabledWarning: string;
+        borderWarning: string;
+        borderHoverWarning: string;
+        borderPressedWarning: string;
+        borderFocusWarning: string;
+        borderDisabledWarning: string;
+        rippleColorWarning: string;
+        colorError: string;
+        colorHoverError: string;
+        colorPressedError: string;
+        colorFocusError: string;
+        colorDisabledError: string;
+        textColorError: string;
+        textColorHoverError: string;
+        textColorPressedError: string;
+        textColorFocusError: string;
+        textColorDisabledError: string;
+        textColorTextError: string;
+        textColorTextHoverError: string;
+        textColorTextPressedError: string;
+        textColorTextFocusError: string;
+        textColorTextDisabledError: string;
+        textColorGhostError: string;
+        textColorGhostHoverError: string;
+        textColorGhostPressedError: string;
+        textColorGhostFocusError: string;
+        textColorGhostDisabledError: string;
+        borderError: string;
+        borderHoverError: string;
+        borderPressedError: string;
+        borderFocusError: string;
+        borderDisabledError: string;
+        rippleColorError: string;
+        waveOpacity: string;
+        fontWeight: string;
+        fontWeightStrong: string;
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingRoundTiny: string;
+        paddingRoundSmall: string;
+        paddingRoundMedium: string;
+        paddingRoundLarge: string;
+        iconMarginTiny: string;
+        iconMarginSmall: string;
+        iconMarginMedium: string;
+        iconMarginLarge: string;
+        iconSizeTiny: string;
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        rippleDuration: string;
+    }, any>;
+    Input: import("../../_mixins").Theme<"Input", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSize: string;
+        countTextColorDisabled: string;
+        countTextColor: string;
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        heightHuge: string;
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        fontSizeHuge: string;
+        lineHeight: string;
+        lineHeightTextarea: string;
+        borderRadius: string;
+        iconSize: string;
+        groupLabelTextColor: string;
+        textColor: string;
+        textColorDisabled: string;
+        textDecorationColor: string;
+        caretColor: string;
+        placeholderColor: string;
+        placeholderColorDisabled: string;
+        color: string;
+        colorDisabled: string;
+        colorFocus: string;
+        groupLabelBorder: string;
+        border: string;
+        borderHover: string;
+        borderDisabled: string;
+        borderFocus: string;
+        boxShadowFocus: string;
+        loadingColor: string;
+        loadingColorWarning: string;
+        borderWarning: string;
+        borderHoverWarning: string;
+        colorFocusWarning: string;
+        borderFocusWarning: string;
+        boxShadowFocusWarning: string;
+        caretColorWarning: string;
+        loadingColorError: string;
+        borderError: string;
+        borderHoverError: string;
+        colorFocusError: string;
+        borderFocusError: string;
+        boxShadowFocusError: string;
+        caretColorError: string;
+        clearColor: string;
+        clearColorHover: string;
+        clearColorPressed: string;
+        iconColor: string;
+        iconColorDisabled: string;
+        iconColorHover: string;
+        iconColorPressed: string;
+        suffixTextColor: string;
+        selectionColor: string;
+    }, any>;
+    Select: import("../../_mixins").Theme<"InternalSelection", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSizeTiny: string;
+        clearSizeSmall: string;
+        clearSizeMedium: string;
+        clearSizeLarge: string;
+        clearSizeHuge: string;
+        arrowSizeTiny: string;
+        arrowSizeSmall: string;
+        arrowSizeMedium: string;
+        arrowSizeLarge: string;
+        arrowSizeHuge: string;
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        fontSizeHuge: string;
+        lineHeightTiny: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        lineHeightHuge: string;
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        heightHuge: string;
+        borderRadiusTiny: string;
+        borderRadiusSmall: string;
+        borderRadiusMedium: string;
+        borderRadiusLarge: string;
+        borderRadiusHuge: string;
+        textColor: string;
+        textColorDisabled: string;
+        placeholderColor: string;
+        placeholderColorDisabled: string;
+        color: string;
+        colorFilled: string;
+        colorDisabled: string;
+        colorActive: string;
+        border: string;
+        borderFilled: string;
+        borderHover: string;
+        borderActive: string;
+        borderFocus: string;
+        borderDisabled: string;
+        boxShadowHover: string;
+        boxShadowActive: string;
+        boxShadowFocus: string;
+        caretColor: string;
+        arrowColor: string;
+        arrowColorHover: string;
+        arrowColorDisabled: string;
+        loadingColor: string;
+        borderWarning: string;
+        borderHoverWarning: string;
+        borderActiveWarning: string;
+        borderFocusWarning: string;
+        boxShadowHoverWarning: string;
+        boxShadowActiveWarning: string;
+        boxShadowFocusWarning: string;
+        colorActiveWarning: string;
+        caretColorWarning: string;
+        borderError: string;
+        borderHoverError: string;
+        borderActiveError: string;
+        borderFocusError: string;
+        boxShadowHoverError: string;
+        boxShadowActiveError: string;
+        boxShadowFocusError: string;
+        colorActiveError: string;
+        caretColorError: string;
+        clearColor: string;
+        clearColorHover: string;
+        clearColorPressed: string;
+        caretColorSecondary: string;
+        filterCounterTextColor: string;
+        filterCounterTextColorDisabled: string;
+        arrowColorSecondary: string;
+        clearColorSecondary: string;
+        colorSecondary: string;
+        textColorSecondary: string;
+        borderSecondary: string;
+        arrowColorDisabledSecondary: string;
+        clearColorDisabledSecondary: string;
+        colorDisabledSecondary: string;
+        textColorDisabledSecondary: string;
+        borderDisabledSecondary: string;
+        arrowColorHoverSecondary: string;
+        clearColorHoverSecondary: string;
+        colorHoverSecondary: string;
+        textColorHoverSecondary: string;
+        borderHoverSecondary: string;
+        arrowColorFocusSecondary: string;
+        clearColorFocusSecondary: string;
+        colorFocusSecondary: string;
+        textColorFocusSecondary: string;
+        borderFocusSecondary: string;
+        arrowColorActiveSecondary: string;
+        clearColorActiveSecondary: string;
+        colorActiveSecondary: string;
+        textColorActiveSecondary: string;
+        borderActiveSecondary: string;
+    }, {
+        Popover: import("../../_mixins").Theme<"Popover", {
+            space: string;
+            spaceArrow: string;
+            arrowOffset: string;
+            arrowOffsetVertical: string;
+            arrowHeight: string;
+            padding: string;
+            fontSize: string;
+            borderRadius: string;
+            color: string;
+            dividerColor: string;
+            textColor: string;
+            boxShadow: string;
+        }, any>;
+    }>;
+    Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
+        color: string;
+        colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
+    }, any>;
+}>;
+export default datePickerV2Light;
+export type DatePickerV2Theme = typeof datePickerV2Light;

package/es/date-picker-v2/styles/light.js

@@ -0,0 +1,56 @@
+import { inputLight } from '../../input/styles';
+import { buttonLight } from '../../button/styles';
+import { internalSelectionLight } from '../../_internal/selection/styles';
+import { commonLight } from '../../_styles/common';
+import { scrollbarLight } from '../../_internal/scrollbar/styles';
+import { createTheme } from '../../_mixins';
+export const self = (vars) => {
+    const { brandPrimary100, brandPrimary500, transparencySecondary, elementsTertiary, elementsQuaternary, textPrimary, textSecondary, borderRadiusSmall, borderRadiusLarge, containerPrimary, elementsPrimary, shadowDepth2, brandQuinary500, brandPrimary10 } = vars;
+    return {
+        // Panel
+        panelColor: containerPrimary,
+        panelBoxShadow: shadowDepth2,
+        panelBorderRadius: borderRadiusLarge,
+        panelTextColor: textPrimary,
+        // Divider
+        dividerColor: elementsQuaternary,
+        // Item (date cell)
+        itemTextColor: textPrimary,
+        itemTextColorOtherMonth: textSecondary,
+        itemTextColorDisabled: transparencySecondary,
+        itemColorHover: elementsTertiary,
+        itemColorActive: brandPrimary100,
+        itemColorIncluded: brandPrimary10,
+        itemTextColorActive: textPrimary,
+        itemBorderRadius: borderRadiusSmall,
+        // Icons
+        iconColor: elementsPrimary,
+        iconColorDisabled: transparencySecondary,
+        // Weekdays
+        weekdayTextColor: textPrimary,
+        weekendTextColor: brandQuinary500,
+        // Month items
+        monthItemHeight: '48px',
+        monthItemColorHover: elementsTertiary,
+        monthItemColorActive: brandPrimary100,
+        monthItemTextColorActive: brandPrimary500,
+        // Year trigger
+        yearTriggerColor: elementsTertiary,
+        yearTriggerColorHover: elementsQuaternary,
+        yearTriggerTextColor: textSecondary,
+        // Current date indicator
+        currentDateIndicatorColor: textPrimary
+    };
+};
+const datePickerV2Light = createTheme({
+    name: 'DatePickerV2',
+    common: commonLight,
+    peers: {
+        Button: buttonLight,
+        Input: inputLight,
+        Select: internalSelectionLight,
+        Scrollbar: scrollbarLight
+    },
+    self
+});
+export default datePickerV2Light;

package/es/dialog/src/DialogProvider.d.ts

@@ -288,6 +288,7 @@ export declare const UDialogProvider: import("vue").DefineComponent<{
                     brand150: string;
                     brand350: string;
                     brand550: string;
+                    brandPrimary10: string;
                     brandPrimary50: string;
                     brandPrimary100: string;
                     brandPrimary200: string;
@@ -656,6 +657,7 @@ export declare const UDialogProvider: import("vue").DefineComponent<{
                     brand150: string;
                     brand350: string;
                     brand550: string;
+                    brandPrimary10: string;
                     brandPrimary50: string;
                     brandPrimary100: string;
                     brandPrimary200: string;

package/es/locales/common/enUS.js

@@ -21,7 +21,7 @@ const enUS = {
     },
     DatePicker: {
         yearFormat: 'yyyy',
-        monthFormat: 'MMM',
+        monthFormat: 'MMMM',
         dayFormat: 'eeeeee',
         yearTypeFormat: 'yyyy',
         monthTypeFormat: 'yyyy-MM',

package/es/theme-editor/src/ThemeEditor.d.ts

@@ -20,6 +20,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         brand150: string;
         brand350: string;
         brand550: string;
+        brandPrimary10: string;
         brandPrimary50: string;
         brandPrimary100: string;
         brandPrimary200: string;

package/es/themes/dark.js

@@ -94,6 +94,7 @@ import safeTopScrollbarDark from '../_internal/safe-top-scrollbar/styles/dark';
 import { headerDark } from '../header/styles';
 import { iconBarDark } from '../icon-bar/styles';
 import { qrcodeDark } from '../qr-code/styles';
+import { datePickerV2Dark } from '../components';
 export const darkTheme = {
     name: 'dark',
     common: commonDark,
@@ -121,6 +122,7 @@ export const darkTheme = {
     ColorPicker: colorPickerDark,
     DataTable: dataTableDark,
     DatePicker: datePickerDark,
+    DatePickerV2: datePickerV2Dark,
     Descriptions: descriptionsDark,
     Dialog: dialogDark,
     Divider: dividerDark,

package/es/themes/light.js

@@ -96,6 +96,7 @@ import { qrcodeLight } from '../qr-code/styles';
 import safeTopScrollbarLight from '../_internal/safe-top-scrollbar/styles/light';
 import { headerLight } from '../header/styles';
 import { iconBarLight } from '../icon-bar/styles';
+import { datePickerV2Light } from '../components';
 export const lightTheme = {
     name: 'light',
     common: commonLight,
@@ -123,6 +124,7 @@ export const lightTheme = {
     ColorPicker: colorPickerLight,
     DataTable: dataTableLight,
     DatePicker: datePickerLight,
+    DatePickerV2: datePickerV2Light,
     Descriptions: descriptionsLight,
     Dialog: dialogLight,
     Divider: dividerLight,

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.22";
+declare const _default: "1.13.0";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.12.22';
+export default '1.13.0';

package/lib/_styles/common/dark.js

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const _common_1 = __importDefault(require("./_common"));
-const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247', shadowDepth: '0px 8px 8px 0px rgba(255, 255, 255, 0.25)' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
+const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary10: '#F3F2F9', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247', shadowDepth: '0px 8px 8px 0px rgba(255, 255, 255, 0.25)' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
  });
 exports.default = derived;

package/lib/_styles/common/light.d.ts

@@ -8,6 +8,7 @@ declare const derived: {
     brand150: string;
     brand350: string;
     brand550: string;
+    brandPrimary10: string;
     brandPrimary50: string;
     brandPrimary100: string;
     brandPrimary200: string;

package/lib/_styles/common/light.js

@@ -4,5 +4,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const _common_1 = __importDefault(require("./_common"));
-const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(0, 0, 0, 0.25)', scrollbarColorHover: 'rgba(0, 0, 0, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#F8F2FF', brandPrimary100: '#EAE2FF', brandPrimary200: '#DACCFF', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#7000FF', brandPrimary550: '#6607DF', brandPrimary600: '#5B34C1', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#fff', surfaceSecondary: '#1d1d1d', containerPrimary: '#fff', containerSecondary: '#F3F4F6', textPrimary: '#101010', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#FFFFFF', textBrand: '#7000FF', elementsPrimary: '#101010', elementsSecondary: '#fff', elementsTertiary: '#F3F4F6', elementsQuaternary: '#E7E8EA', elementsQuinary: '#C5C7CA', elementsDarkQuinary: '#919396', elementsSenary: '#4E4D4D', elementsOnContainer: '#fff', transparencyPrimary: 'rgba(0, 0, 0, 0.35)', transparencySecondary: 'rgba(0, 0, 0, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.40)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', shadowDepth: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)' });
+const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(0, 0, 0, 0.25)', scrollbarColorHover: 'rgba(0, 0, 0, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary10: '#F3F2F9', brandPrimary50: '#F8F2FF', brandPrimary100: '#EAE2FF', brandPrimary200: '#DACCFF', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#7000FF', brandPrimary550: '#6607DF', brandPrimary600: '#5B34C1', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#fff', surfaceSecondary: '#1d1d1d', containerPrimary: '#fff', containerSecondary: '#F3F4F6', textPrimary: '#101010', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#FFFFFF', textBrand: '#7000FF', elementsPrimary: '#101010', elementsSecondary: '#fff', elementsTertiary: '#F3F4F6', elementsQuaternary: '#E7E8EA', elementsQuinary: '#C5C7CA', elementsDarkQuinary: '#919396', elementsSenary: '#4E4D4D', elementsOnContainer: '#fff', transparencyPrimary: 'rgba(0, 0, 0, 0.35)', transparencySecondary: 'rgba(0, 0, 0, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.40)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', shadowDepth: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)' });
 exports.default = derived;

package/lib/chat/src/ChatMessages.js

@@ -214,7 +214,12 @@ exports.default = (0, vue_1.defineComponent)({
                         ? `${mergedClsPrefixRef.value}-chat-main__message--own`
                         : `${mergedClsPrefixRef.value}-chat-main__message--other`
                 ] },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
+                (0, vue_1.h)("div", { class: [
+                        `${mergedClsPrefixRef.value}-chat-main__message-wrapper`,
+                        isOwn
+                            ? `${mergedClsPrefixRef.value}-chat-main__message-wrapper--own`
+                            : `${mergedClsPrefixRef.value}-chat-main__message-wrapper--other`
+                    ] },
                     hasBubbleActionsSlot ? ((0, vue_1.h)("div", { onContextmenu: (e) => {
                             e.preventDefault();
                             contextMenuShow.value = false;

package/lib/chat/src/styles/index.cssr.js

@@ -229,7 +229,11 @@ exports.default = (0, cssr_1.cB)('chat', `
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
- `), (0, cssr_1.cE)('message-bubble', `
+ `, [(0, cssr_1.cM)('own', `
+ align-items: flex-end;
+ `), (0, cssr_1.cM)('other', `
+ align-items: flex-start;
+ `)]), (0, cssr_1.cE)('message-bubble', `
  border-radius: 18px;
  font-size: 14px;
  line-height: 20px;