@gravity-ui/aikit 1.7.0 → 1.9.0

package/dist/components/pages/ChatContainer/ChatContainer.css

@@ -0,0 +1,49 @@
+.g-aikit-chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: var(--g-aikit-chat-container-background);
+}
+.g-aikit-chat-container__header {
+  display: flex;
+  padding: var(--g-aikit-layout-base-padding-m);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--g-spacing-2);
+  align-self: stretch;
+  background: var(--g-aikit-chat-container-header-background);
+}
+.g-aikit-chat-container__content {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  background: var(--g-aikit-chat-container-content-background);
+  padding: 0 var(--g-aikit-layout-base-padding-m) var(--g-spacing-4) var(--g-aikit-layout-base-padding-m);
+  gap: var(--g-spacing-2);
+  flex: 1 0 0;
+}
+.g-aikit-chat-container__content_view_empty {
+  background: var(--g-aikit-chat-container-content-empty-background);
+}
+.g-aikit-chat-container__content_view_chat {
+  background: var(--g-aikit-chat-container-content-chat-background);
+}
+.g-aikit-chat-container__footer {
+  display: flex;
+  padding: var(--g-aikit-layout-base-padding-m);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--g-spacing-1);
+  align-self: stretch;
+  background: var(--g-aikit-chat-container-footer-background);
+}
+.g-aikit-chat-container__footer_view_empty {
+  background: var(--g-aikit-chat-container-footer-empty-background);
+}
+.g-aikit-chat-container__footer_view_chat {
+  background: var(--g-aikit-chat-container-footer-chat-background);
+}

package/dist/components/pages/ChatContainer/ChatContainer.js

@@ -8,7 +8,7 @@ import { ChatContent } from '../../templates/ChatContent';
 import { History } from '../../templates/History';
 import { i18n } from './i18n';
 import { useChatContainer } from './useChatContainer';
-import './ChatContainer.scss';
+import './ChatContainer.css';
 const b = block('chat-container');
 /**
  * ChatContainer - fully assembled chat component, the main exportable component of the library.

package/dist/components/pages/ChatContainer/__stories__/ChatContainer.stories.d.ts

@@ -83,3 +83,8 @@ export declare const EmbeddedInPageWithStreaming: Story;
  * Demonstrates passing additional actions to Header and custom actions to BaseMessage
  */
 export declare const WithAdditionalActions: Story;
+/**
+ * Like / Unlike actions with local rating state.
+ * Only like and unlike actions; rating toggles on repeated click (like → clear, dislike → clear).
+ */
+export declare const WithLikeUnlikeActions: Story;

package/dist/components/pages/ChatContainer/__stories__/ChatContainer.stories.js

@@ -5,6 +5,7 @@ import { Gear, Sparkles, Star } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { ChatContainer } from '..';
 import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { BaseMessageActionType } from '../../../molecules/BaseMessage';
 import MDXDocs from './Docs.mdx';
 export default {
     title: 'pages/ChatContainer',
@@ -1110,3 +1111,79 @@ export const WithAdditionalActions = {
     },
     decorators: defaultDecorators,
 };
+/**
+ * Like / Unlike actions with local rating state.
+ * Only like and unlike actions; rating toggles on repeated click (like → clear, dislike → clear).
+ */
+export const WithLikeUnlikeActions = {
+    args: {
+        chats: mockChats,
+        activeChat: mockChats[0],
+        showHistory: true,
+        showNewChat: true,
+        showActionsOnHover: true,
+    },
+    render: (args) => {
+        const initialChat = mockChats[0];
+        const [messages, setMessages] = useState(() => mockChatMessages[initialChat.id] || []);
+        const [status, setStatus] = useState('ready');
+        const [activeChat, setActiveChat] = useState(initialChat);
+        const assistantActions = [
+            {
+                type: BaseMessageActionType.Like,
+                onClick: (message) => {
+                    setMessages((prev) => prev.map((m) => m.id === message.id
+                        ? Object.assign(Object.assign({}, m), { userRating: m.userRating === 'like'
+                                ? undefined
+                                : 'like' }) : m));
+                },
+            },
+            {
+                type: BaseMessageActionType.Unlike,
+                onClick: (message) => {
+                    setMessages((prev) => prev.map((m) => m.id === message.id
+                        ? Object.assign(Object.assign({}, m), { userRating: m.userRating === 'dislike'
+                                ? undefined
+                                : 'dislike' }) : m));
+                },
+            },
+        ];
+        const handleSendMessage = async (data) => {
+            const timestamp = Date.now();
+            const userMessageId = `user-${timestamp}`;
+            const userMessage = {
+                id: userMessageId,
+                role: 'user',
+                content: data.content,
+                timestamp: new Date().toISOString(),
+            };
+            setMessages((prev) => [...prev, userMessage]);
+            setStatus('streaming');
+            await new Promise((resolve) => setTimeout(resolve, 500));
+            const assistantMessageId = `assistant-${timestamp + 1}`;
+            const assistantMessage = {
+                id: assistantMessageId,
+                role: 'assistant',
+                content: `Response to: "${data.content}". Use like/unlike below — they toggle on second click.`,
+                timestamp: new Date().toISOString(),
+            };
+            setMessages((prev) => [...prev, assistantMessage]);
+            setStatus('ready');
+        };
+        const handleSelectChat = (chat) => {
+            setActiveChat(chat);
+            setMessages(mockChatMessages[chat.id] || []);
+        };
+        const handleCreateChat = () => {
+            setActiveChat(null);
+            setMessages([]);
+        };
+        const handleCancel = async () => {
+            setStatus('ready');
+        };
+        return (_jsx(ChatContainer, Object.assign({}, args, { messages: messages, activeChat: activeChat, onSendMessage: handleSendMessage, onCancel: handleCancel, onSelectChat: handleSelectChat, onCreateChat: handleCreateChat, status: status, messageListConfig: {
+                assistantActions,
+            } })));
+    },
+    decorators: defaultDecorators,
+};

package/dist/components/templates/ChatContent/ChatContent.css

@@ -0,0 +1,23 @@
+.g-aikit-chat-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: var(--g-aikit-chat-content-background);
+  align-items: flex-start;
+  gap: var(--g-spacing-2);
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.g-aikit-chat-content__message-list-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--g-spacing-4);
+  align-self: stretch;
+  flex: 1;
+  min-height: 0;
+}
+.g-aikit-chat-content__message-list {
+  padding: var(--g-spacing-2) var(--g-spacing-2) 0 var(--g-spacing-2);
+}

package/dist/components/templates/ChatContent/ChatContent.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
 import { MessageList } from '../../organisms/MessageList';
 import { EmptyContainer } from '../EmptyContainer';
-import './ChatContent.scss';
+import './ChatContent.css';
 const b = block('chat-content');
 /**
  * ChatContent - main chat content with state switching (EmptyContainer/MessageList).

package/dist/components/templates/EmptyContainer/EmptyContainer.css

@@ -0,0 +1,64 @@
+.g-aikit-empty-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background: var(--g-aikit-empty-container-background);
+}
+.g-aikit-empty-container__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  gap: var(--g-aikit-empty-container-content-gap);
+  padding: var(--g-aikit-empty-container-padding);
+}
+.g-aikit-empty-container__welcome-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-6);
+}
+.g-aikit-empty-container__text-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-3);
+}
+.g-aikit-empty-container__image-container {
+  display: flex;
+  flex: 1;
+}
+.g-aikit-empty-container__image-container_align_left {
+  justify-content: flex-start;
+}
+.g-aikit-empty-container__image-container_align_center {
+  justify-content: center;
+}
+.g-aikit-empty-container__image-container_align_right {
+  justify-content: flex-end;
+}
+.g-aikit-empty-container__title_align_left, .g-aikit-empty-container__description_align_left {
+  text-align: left;
+}
+.g-aikit-empty-container__title_align_center, .g-aikit-empty-container__description_align_center {
+  text-align: center;
+}
+.g-aikit-empty-container__title_align_right, .g-aikit-empty-container__description_align_right {
+  text-align: right;
+}
+.g-aikit-empty-container__suggestions-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-3);
+}
+.g-aikit-empty-container__suggestions-title {
+  display: flex;
+  padding: 0 var(--g-spacing-2);
+  align-items: flex-start;
+  gap: var(--g-spacing-2);
+  align-self: stretch;
+}
+.g-aikit-empty-container__show-more {
+  display: flex;
+  justify-content: flex-start;
+  padding-top: var(--g-spacing-2);
+}

package/dist/components/templates/EmptyContainer/EmptyContainer.js

@@ -4,7 +4,7 @@ import { Button, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
 import { Suggestions } from '../../molecules/Suggestions';
 import { i18n } from './i18n';
-import './EmptyContainer.scss';
+import './EmptyContainer.css';
 const b = block('empty-container');
 /**
  * EmptyContainer component - displays a welcome screen with image, title, description,

package/dist/components/templates/History/History.css

@@ -0,0 +1,81 @@
+.g-aikit-history__container {
+  display: flex;
+  flex-direction: column;
+  width: var(--g-aikit-history-width);
+  background: var(--g-color-base-background);
+}
+.g-aikit-history__list-wrapper {
+  flex: 1;
+}
+.g-aikit-history__list {
+  padding: 0 calc(var(--g-spacing-base) * 2) 0 calc(var(--g-spacing-base) * 2);
+  overflow: auto;
+  max-height: var(--g-aikit-history-max-height);
+}
+.g-aikit-history__list-item {
+  border-radius: 6px;
+}
+.g-aikit-history__filter {
+  padding: calc(var(--g-spacing-base) * 2);
+  border-bottom: 1px solid var(--g-color-line-generic);
+  margin-bottom: 0;
+}
+.g-aikit-history__date-header {
+  display: flex;
+  padding: var(--g-spacing-3) var(--g-spacing-2) var(--g-spacing-1) var(--g-spacing-2);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: calc(var(--g-spacing-base) * 3);
+  align-self: stretch;
+}
+.g-aikit-history__chat-item {
+  cursor: pointer;
+  display: flex;
+  padding: calc(var(--g-spacing-base) * 2) calc(var(--g-spacing-base) * 4);
+  align-items: center;
+  gap: calc(var(--g-spacing-base) * 4);
+  align-self: stretch;
+  flex: 1;
+  min-width: 0;
+}
+.g-aikit-history__chat-item_active .g-aikit-history__delete-button {
+  display: block;
+}
+.g-aikit-history__chat-content {
+  height: var(--g-aikit-history-item-height);
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.g-aikit-history__chat-content > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.g-aikit-history__icon-button {
+  color: var(--g-color-text-secondary);
+}
+.g-aikit-history__delete-button {
+  margin-left: calc(var(--g-spacing-base) * 2);
+  display: none;
+}
+.g-aikit-history__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--g-spacing-base) * 8) calc(var(--g-spacing-base) * 4);
+  color: var(--g-color-text-secondary);
+  font-size: var(--g-text-body-2-font-size);
+  text-align: center;
+  flex: 1;
+}
+.g-aikit-history__loader-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--g-spacing-base) * 8) calc(var(--g-spacing-base) * 4);
+  flex: 1;
+}

package/dist/components/templates/History/HistoryList.js

@@ -7,7 +7,7 @@ import { Loader } from '../../atoms/Loader';
 import { ChatItem } from './ChatItem';
 import { DateHeaderItem } from './DateHeaderItem';
 import { i18n } from './i18n';
-import './History.scss';
+import './History.css';
 const b = block('history');
 /**
  * HistoryList component - displays a list of chats with search, grouping, and actions

package/dist/demo/ContentWrapper/ContentWrapper.css

@@ -0,0 +1,6 @@
+.content-wrapper {
+  padding: var(--g-spacing-4);
+  border: 2px dashed #9747ff;
+  border-radius: 12px;
+  width: fit-content;
+}

package/dist/demo/ContentWrapper/ContentWrapper.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../utils/cn';
-import './ContentWrapper.scss';
+import './ContentWrapper.css';
 const b = cn('content-wrapper');
 export function ContentWrapper(props) {
     const { children } = props, style = __rest(props, ["children"]);

package/dist/demo/DocsDecorator/DocsDecorator.css

@@ -0,0 +1,87 @@
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator p,
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator li:not([class*=g-aikit-]),
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator a:not([class*=g-aikit-]) {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator .sbdocs-wrapper {
+  padding: 0 40px;
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator .sbdocs-content {
+  max-width: 800px;
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator p,
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ul:not([class*=g-aikit-]),
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ol:not([class*=g-aikit-]) {
+  margin: 4px 0;
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator p + p, .docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator p + ul, .docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator p + ol,
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ul:not([class*=g-aikit-]) + p,
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ul:not([class*=g-aikit-]) + ul,
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ul:not([class*=g-aikit-]) + ol,
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ol:not([class*=g-aikit-]) + p,
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ol:not([class*=g-aikit-]) + ul,
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ol:not([class*=g-aikit-]) + ol {
+  margin-block-start: 8px;
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator li + li:not([class*=g-aikit-]) {
+  margin-block-start: 4px;
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ul:not([class*=g-aikit-]),
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ol:not([class*=g-aikit-]) {
+  padding-inline-start: 16px;
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator h1 {
+  font-family: var(--g-text-display-font-family);
+  font-weight: var(--g-text-display-font-weight);
+  font-size: var(--g-text-display-3-font-size);
+  line-height: var(--g-text-display-3-line-height);
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator h2 {
+  font-family: var(--g-text-display-font-family);
+  font-weight: var(--g-text-display-font-weight);
+  font-size: var(--g-text-display-1-font-size);
+  line-height: var(--g-text-display-1-line-height);
+  border: 0;
+  padding: 0;
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator h3 {
+  font-family: var(--g-text-header-font-family);
+  font-weight: var(--g-text-header-font-weight);
+  font-size: var(--g-text-header-2-font-size);
+  line-height: var(--g-text-header-2-line-height);
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator h1,
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator h2,
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator h3 {
+  margin-block: 40px 16px;
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator a:not([class*=g-aikit-]) {
+  text-decoration: none;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  cursor: pointer;
+  color: var(--g-color-text-link);
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator a:not([class*=g-aikit-]):hover {
+  color: var(--g-color-text-link-hover);
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator p code,
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator li:not([class*=g-aikit-]) code {
+  font-family: var(--g-text-code-font-family);
+  font-weight: var(--g-text-code-font-weight);
+  font-size: var(--g-text-code-inline-2-font-size);
+  line-height: var(--g-text-code-inline-2-line-height);
+  line-height: 1;
+  padding: 1px 4px;
+  background: var(--g-color-base-misc-light);
+  color: var(--g-color-text-misc);
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator .docblock-source {
+  margin: 16px 0;
+}
+.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator .docs-example {
+  margin: 16px 0;
+}

package/dist/demo/Showcase/Showcase.css

@@ -0,0 +1,34 @@
+.showcase {
+  display: flex;
+  flex-direction: column;
+}
+.showcase + .showcase {
+  margin-block-start: var(--g-spacing-9);
+}
+.showcase__title {
+  font-family: var(--g-text-display-font-family);
+  font-weight: var(--g-text-display-font-weight);
+  font-size: var(--g-text-display-2-font-size);
+  line-height: var(--g-text-display-2-line-height);
+}
+.showcase__description {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  margin-block-start: var(--g-spacing-2);
+  color: var(--g-color-text-secondary);
+}
+.showcase__content {
+  flex-grow: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--g-spacing-6);
+}
+.showcase__content:not(:only-child) {
+  margin-block-start: var(--g-spacing-5);
+}
+.showcase_direction_column .showcase__content {
+  flex-direction: column;
+  align-items: flex-start;
+}

package/dist/demo/Showcase/Showcase.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../utils/cn';
-import './Showcase.scss';
+import './Showcase.css';
 const b = cn('showcase');
 export function Showcase({ title, description, direction = 'row', className, children }) {
     return (_jsxs("div", { className: b({ direction }, className), children: [title && _jsx("div", { className: b('title'), children: title }), description && _jsx("div", { className: b('description'), children: description }), _jsx("div", { className: b('content'), children: children })] }));

package/dist/demo/ShowcaseItem/ShowcaseItem.css

@@ -0,0 +1,7 @@
+.showcase-item__title {
+  font-family: var(--g-text-subheader-font-family);
+  font-weight: var(--g-text-subheader-font-weight);
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  margin-block-end: var(--g-spacing-3);
+}

package/dist/demo/ShowcaseItem/ShowcaseItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../utils/cn';
-import './ShowcaseItem.scss';
+import './ShowcaseItem.css';
 const b = cn('showcase-item');
 export function ShowcaseItem({ title, children, width }) {
     return (_jsxs("div", { className: b(), style: { width }, children: [_jsx("div", { className: b('title'), children: title }), _jsx("div", { className: b('content'), children: children })] }));

package/dist/demo/SwapArea/SwapArea.css

@@ -0,0 +1,11 @@
+.g-aikit-swap-area {
+  display: flex;
+  padding: 3px 6px;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px dashed var(--g-color-line-generic);
+  background: var(--g-color-base-generic);
+}

package/dist/demo/SwapArea/SwapArea.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { block } from '../../utils/cn';
-import './SwapArea.scss';
+import './SwapArea.css';
 const b = block('swap-area');
 export const SwapArea = () => {
     return _jsx("div", { className: b(), children: "Swap Area" });

package/dist/styles/variables.css

@@ -0,0 +1 @@
+

package/dist/types/messages.d.ts

@@ -8,10 +8,12 @@ export type BaseMessageActionConfig = ActionConfig;
  * - React.ReactNode for fully custom content
  */
 export type BaseMessageAction = BaseMessageActionConfig | React.ReactNode;
+export type UserRating = 'like' | 'dislike';
 export type BaseMessageProps = {
     children: React.ReactNode;
     role: TMessageRole;
     actions?: BaseMessageAction[];
+    userRating?: UserRating;
     timestamp?: string;
     showTimestamp?: boolean;
     showActionsOnHover?: boolean;
@@ -65,5 +67,6 @@ export type TUserMessage<Metadata = TMessageMetadata> = TBaseMessage<Metadata> &
 export type TAssistantMessage<TCustomMessageContent extends TMessageContent = never, Metadata = TMessageMetadata> = TBaseMessage<Metadata> & {
     role: 'assistant';
     content: TAssistantMessageContent<TCustomMessageContent>;
+    userRating?: UserRating;
 };
 export type TChatMessage<TCustomMessageContent extends TMessageContent = never, Metadata = TMessageMetadata> = TUserMessage<Metadata> | TAssistantMessage<TCustomMessageContent, Metadata>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/aikit",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Gravity UI base kit for building ai assistant chats",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -10,7 +10,7 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./styles": "./dist/styles/styles.scss",
+    "./styles": "./dist/styles/styles.css",
     "./themes/common": "./dist/themes/common.css",
     "./themes/dark": "./dist/themes/dark.css",
     "./themes/light": "./dist/themes/light.css",
@@ -55,11 +55,12 @@
     "lint:prettier": "prettier --check '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md,mdx}'",
     "lint:prettier:fix": "prettier --write '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md,mdx}'",
     "test": "npm run test:unit && npm run test:server:unit",
-    "build": "npm run build:clean && npm run build:ts && npm run build:copy && npm run build:server",
+    "build": "npm run build:clean && npm run build:ts && npm run build:fix-imports && npm run build:compile:scss && npm run build:copy && npm run build:server",
     "build:clean": "rm -rf dist",
     "build:ts": "tsc",
-    "build:copy": "npm run build:copy:styles && npm run build:copy:themes && npm run build:copy:i18n",
-    "build:copy:styles": "copyfiles -u 1 'src/**/*.scss' dist --exclude 'src/demo/**'",
+    "build:compile:scss": "sass --no-source-map --load-path=src --load-path=node_modules src:dist",
+    "build:fix-imports": "find dist -type f -name '*.js' -exec perl -i -pe \"s/\\.scss'/.css'/g; s/\\.scss\\\"/.css\\\"/g\" {} +",
+    "build:copy": "npm run build:copy:themes && npm run build:copy:i18n",
     "build:copy:themes": "copyfiles -u 1 'src/themes/**/*.css' dist",
     "build:copy:i18n": "copyfiles -u 1 'src/**/i18n/*.json' dist",
     "build:server": "tsc -p src/server/tsconfig.esm.json && tsc -p src/server/tsconfig.cjs.json",

package/dist/components/atoms/Alert/Alert.scss

@@ -1,39 +0,0 @@
-@use '../../../styles/variables';
-
-$block: '.#{variables.$ns}alert';
-
-#{$block} {
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-spacing-2);
-
-    &__header {
-        display: flex;
-        align-items: center;
-        gap: var(--g-spacing-2);
-    }
-
-    &__text {
-        flex: 1;
-    }
-
-    &__icon {
-        flex-shrink: 0;
-
-        &_variant_error {
-            color: var(--g-color-text-danger);
-        }
-
-        &_variant_warning {
-            color: var(--g-color-text-warning-heavy);
-        }
-
-        &_variant_info {
-            color: var(--g-color-text-info);
-        }
-    }
-
-    &__action {
-        margin-left: auto;
-    }
-}

package/dist/components/atoms/ChatDate/ChatDate.scss

@@ -1,15 +0,0 @@
-@use '../../../styles/variables';
-
-$block: '.#{variables.$ns}chat-date';
-
-#{$block} {
-    color: var(--g-color-text-secondary);
-
-    font-family: var(--g-text-body-font-family);
-    font-size: var(--g-text-body-1-font-size);
-    font-style: normal;
-    font-weight: var(--g-text-body-font-weight);
-    line-height: var(--g-text-body-1-line-height);
-
-    display: inline-block;
-}