@cloud-ru/ds-uikit-product-modal-predefined 1.0.0

package/dist/esm/helperComponents/InputConfirm/InputConfirm.d.ts

@@ -0,0 +1,48 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+export type InputConfirmProps = WithSupportProps<{
+    /** Текст, который нужно ввести для подтверждения */
+    confirmText: string;
+    /** Инструкция над текстом подтверждения */
+    confirmLabel?: string;
+    /** Скрыть кнопку копирования */
+    hideConfirmCopyButton?: boolean;
+    /** Значение поля */
+    value: string;
+    /** Текст ошибки */
+    error?: string;
+    /** Label поля */
+    label?: string;
+    /** Размер поля */
+    size?: FieldComboProps['size'];
+    /** Выравнивание copy-line */
+    copyLineAlign?: 'start' | 'space-between';
+    /** Placeholder поля */
+    placeholder: string;
+    /** Колбэк изменения значения */
+    onChange(value: string): void;
+}>;
+export declare const InputConfirm: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    /** Текст, который нужно ввести для подтверждения */
+    confirmText: string;
+    /** Инструкция над текстом подтверждения */
+    confirmLabel?: string;
+    /** Скрыть кнопку копирования */
+    hideConfirmCopyButton?: boolean;
+    /** Значение поля */
+    value: string;
+    /** Текст ошибки */
+    error?: string;
+    /** Label поля */
+    label?: string;
+    /** Размер поля */
+    size?: FieldComboProps["size"];
+    /** Выравнивание copy-line */
+    copyLineAlign?: "start" | "space-between";
+    /** Placeholder поля */
+    placeholder: string;
+    /** Колбэк изменения значения */
+    onChange(value: string): void;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/helperComponents/InputConfirm/InputConfirm.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldCombo, VALIDATION_STATE } from '@cloud-ru/ds-fields';
+import { CopyButton } from '@cloud-ru/ds-uikit-product-copy';
+import { forwardRef } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import styles from './styles.module.css';
+export const InputConfirm = forwardRef(function InputConfirm({ confirmText, confirmLabel, hideConfirmCopyButton, value, error, label, size = 'm', copyLineAlign = 'space-between', placeholder, onChange, ...rest }, ref) {
+    return (_jsxs("div", { className: styles.root, children: [confirmLabel && _jsx("span", { className: styles.confirmLabel, children: confirmLabel }), _jsxs("div", { className: styles.confirmText, "data-align": copyLineAlign, children: [_jsx("span", { className: styles.confirmValue, children: confirmText }), !hideConfirmCopyButton && _jsx(CopyButton, { valueToCopy: confirmText, "data-test-id": TEST_IDS.confirmCopyButton })] }), _jsx(FieldCombo, { ...rest, ref: ref, inputMode: 'text', label: label, required: Boolean(label), size: size, placeholder: placeholder, value: value, onChange: onChange, hint: error, validationState: error ? VALIDATION_STATE.Error : VALIDATION_STATE.Default, "data-test-id": TEST_IDS.confirmInput })] }));
+});

package/dist/esm/helperComponents/InputConfirm/index.d.ts

@@ -0,0 +1 @@
+export * from './InputConfirm.js';

package/dist/esm/helperComponents/InputConfirm/index.js

@@ -0,0 +1 @@
+export * from './InputConfirm.js';

package/dist/esm/helperComponents/InputConfirm/styles.module.css

@@ -0,0 +1,38 @@
+.root{
+  display:flex;
+  flex-direction:column;
+}
+
+.confirmText{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:space-between;
+  margin-bottom:var(--sn-primitive-dimension-8, 8px);
+}
+
+.confirmText[data-align=start]{
+  -moz-column-gap:var(--sn-primitive-dimension-4, 4px);
+       column-gap:var(--sn-primitive-dimension-4, 4px);
+  justify-content:flex-start;
+}
+
+.confirmLabel{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.confirmValue{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}

package/dist/esm/helperComponents/MobileReleaseNotes/MobileReleaseNotes.d.ts

@@ -0,0 +1,2 @@
+import { ReleaseNotesProps } from '../../types.js';
+export declare function MobileReleaseNotes({ open, onClose, closeOnPopstate, contentState, items, loading, onReadLaterClick, onDataErrorRetryClick, onSlideChange, readLaterButtonProps, ...rest }: ReleaseNotesProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/MobileReleaseNotes/MobileReleaseNotes.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BottomSheet } from '@cloud-ru/ds-bottom-sheet';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import { CONTENT_STATE } from '../../constants.js';
+import { useReleaseNotesNavigation } from '../../hooks.js';
+import { modalPredefinedLocale } from '../../locale/index.js';
+import { ReleaseNotesContent } from '../ReleaseNotesContent/index.js';
+import { ReleaseNotesFooter } from '../ReleaseNotesFooter/index.js';
+export function MobileReleaseNotes({ open, onClose, closeOnPopstate, contentState = CONTENT_STATE.Data, items, loading, onReadLaterClick, onDataErrorRetryClick, onSlideChange, readLaterButtonProps, ...rest }) {
+    const { t } = modalPredefinedLocale.useTranslations();
+    const { pageIndex, readablePageNumber, setPage, handleClose, handleReadLaterClick, handleNextPageClick, handlePrevPageClick, } = useReleaseNotesNavigation({ onClose, onReadLaterClick, onSlideChange });
+    const { onClick: onReadLaterButtonClick, ...readLaterButtonRest } = readLaterButtonProps ?? {};
+    const shouldShowFooter = contentState === CONTENT_STATE.Data && (loading || items.length > 0);
+    const handleReadLaterButtonClick = (event) => {
+        onReadLaterButtonClick?.(event);
+        handleReadLaterClick();
+    };
+    return (_jsx(BottomSheet
+    // Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
+    , { 
+        // Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
+        withDividers: false, open: open, onClose: handleClose, closeOnPopstate: closeOnPopstate, title: t('releaseNotes.title'), content: _jsx(ReleaseNotesContent, { contentState: contentState, items: items, loading: loading, pageIndex: pageIndex, surface: 'bottomSheet', noDataTitle: t('releaseNotes.noDataTitle'), noDataDescription: t('releaseNotes.noDataDescription'), errorTitle: t('releaseNotes.errorTitle'), errorDescription: t('releaseNotes.errorDescription'), retryLabel: t('releaseNotes.retry'), onPageChange: setPage, onDataErrorRetryClick: onDataErrorRetryClick }), footer: shouldShowFooter ? (_jsx(ReleaseNotesFooter, { surface: 'bottomSheet', total: items.length, pageIndex: pageIndex, readablePageNumber: readablePageNumber, counterLabel: t('releaseNotes.counter', { page: readablePageNumber, total: items.length }), readLaterLabel: t('releaseNotes.readLater'), onReadLaterClick: handleReadLaterButtonClick, onPrevPageClick: handlePrevPageClick, onNextPageClick: () => handleNextPageClick(items.length), readLaterButtonProps: readLaterButtonRest })) : undefined, "data-content-state": contentState, "data-surface": 'bottomSheet', ...extractSupportProps(rest) }));
+}

package/dist/esm/helperComponents/MobileReleaseNotes/index.d.ts

@@ -0,0 +1 @@
+export * from './MobileReleaseNotes.js';

package/dist/esm/helperComponents/MobileReleaseNotes/index.js

@@ -0,0 +1 @@
+export * from './MobileReleaseNotes.js';

package/dist/esm/helperComponents/NoteItem/NoteItem.d.ts

@@ -0,0 +1,6 @@
+import { NoteItemProps } from '../../types.js';
+type NoteItemComponentProps = NoteItemProps & {
+    surface?: 'modal' | 'bottomSheet';
+};
+export declare function NoteItem({ title, description, image, video, surface }: NoteItemComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/NoteItem/NoteItem.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Markdown } from '@cloud-ru/ds-markdown';
+import { BAR_HIDE_STRATEGY, Scroll } from '@cloud-ru/ds-scroll';
+import { Skeleton } from '@cloud-ru/ds-skeleton';
+import { Typography } from '@cloud-ru/ds-typography';
+import { useState } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import styles from './styles.module.css';
+export function NoteItem({ title, description, image, video, surface = 'modal' }) {
+    const [isVideoReady, setIsVideoReady] = useState(false);
+    const [hasVideoError, setHasVideoError] = useState(false);
+    const shouldShowVideo = Boolean(video && !hasVideoError);
+    return (_jsxs("article", { className: styles.root, "data-surface": surface, "data-test-id": TEST_IDS.releaseNotesItem, children: [_jsxs("div", { className: styles.media, "data-test-id": TEST_IDS.releaseNotesMedia, children: [shouldShowVideo && (_jsxs(_Fragment, { children: [_jsx("video", { className: styles.video, src: video, muted: true, loop: true, playsInline: true, autoPlay: true, onLoadedData: () => setIsVideoReady(true), onError: () => setHasVideoError(true), "data-test-id": TEST_IDS.releaseNotesVideo }), !isVideoReady && (_jsx("div", { className: styles.videoSkeleton, "aria-hidden": true, children: _jsx(Skeleton, { loading: true, width: '100%', height: '100%' }) }))] })), !shouldShowVideo && _jsx("img", { className: styles.image, src: image.src, alt: image.alt })] }), _jsxs("div", { className: styles.content, children: [_jsx(Typography, { variant: 'headline', size: 's', children: title }), _jsx(Scroll, { className: styles.description, barHideStrategy: BAR_HIDE_STRATEGY.Leave, children: _jsx(Markdown, { value: description }) })] })] }));
+}

package/dist/esm/helperComponents/NoteItem/index.d.ts

@@ -0,0 +1 @@
+export * from './NoteItem.js';

package/dist/esm/helperComponents/NoteItem/index.js

@@ -0,0 +1 @@
+export * from './NoteItem.js';

package/dist/esm/helperComponents/NoteItem/styles.module.css

@@ -0,0 +1,53 @@
+.root{
+  display:grid;
+  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
+  -moz-column-gap:var(--sn-primitive-dimension-24, 24px);
+       column-gap:var(--sn-primitive-dimension-24, 24px);
+  min-height:calc(5 * var(--sn-primitive-dimension-64, 64px));
+}
+.root[data-surface=bottomSheet]{
+  grid-template-columns:minmax(0, 1fr);
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+  min-height:0;
+}
+
+.media{
+  position:relative;
+  overflow:hidden;
+  min-width:0;
+  border-radius:var(--sn-primitive-dimension-16, 16px);
+}
+
+.image,
+.video{
+  display:block;
+  width:100%;
+  height:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+
+.videoSkeleton{
+  position:absolute;
+  inset:0;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-12, 12px);
+  min-width:0;
+}
+
+.description{
+  min-height:0;
+}
+
+.root[data-surface=modal] .content{
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+  order:1;
+}
+
+.root[data-surface=modal] .media{
+  order:2;
+}

package/dist/esm/helperComponents/ReleaseNotesContent/ReleaseNotesContent.d.ts

@@ -0,0 +1,28 @@
+import { NoteItemProps, ReleaseNotesContentState } from '../../types.js';
+export type ReleaseNotesContentProps = {
+    /** Визуальное состояние */
+    contentState: ReleaseNotesContentState;
+    /** Новости */
+    items: NoteItemProps[];
+    /** Состояние загрузки */
+    loading?: boolean;
+    /** Текущая страница, zero-based */
+    pageIndex: number;
+    /** Поверхность */
+    surface: 'modal' | 'bottomSheet';
+    /** Заголовок no-data */
+    noDataTitle: string;
+    /** Описание no-data */
+    noDataDescription: string;
+    /** Заголовок ошибки */
+    errorTitle: string;
+    /** Описание ошибки */
+    errorDescription: string;
+    /** Label retry-кнопки */
+    retryLabel: string;
+    /** Смена страницы */
+    onPageChange(pageIndex: number): void;
+    /** Повторная загрузка */
+    onDataErrorRetryClick?(): void;
+};
+export declare function ReleaseNotesContent({ contentState, items, loading, pageIndex, surface, noDataTitle, noDataDescription, errorTitle, errorDescription, retryLabel, onPageChange, onDataErrorRetryClick, }: ReleaseNotesContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/ReleaseNotesContent/ReleaseNotesContent.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { Carousel } from '@cloud-ru/ds-carousel';
+import { CrossSVG } from '@cloud-ru/ds-icons/interface/system';
+import { InfoBlock } from '@cloud-ru/ds-info-block';
+import { Skeleton } from '@cloud-ru/ds-skeleton';
+import cn from 'classnames';
+import { CONTENT_STATE, TEST_IDS } from '../../constants.js';
+import { NoteItem } from '../NoteItem/index.js';
+import styles from './styles.module.css';
+export function ReleaseNotesContent({ contentState, items, loading, pageIndex, surface, noDataTitle, noDataDescription, errorTitle, errorDescription, retryLabel, onPageChange, onDataErrorRetryClick, }) {
+    const total = items.length;
+    const hasItems = total > 0;
+    if (loading) {
+        return (_jsx("div", { className: styles.loading, "data-surface": surface, children: _jsx(Skeleton, { loading: true, width: '100%', height: '100%', borderRadius: 'var(--border-radius-l)' }) }));
+    }
+    if (contentState === CONTENT_STATE.Error) {
+        return (_jsx("div", { className: styles.stateWrapper, "data-surface": surface, children: _jsx(InfoBlock, { className: styles.state, size: 'l', title: errorTitle, content: errorDescription, icon: { icon: CrossSVG, appearance: 'neutral', background: true }, "data-test-id": TEST_IDS.releaseNotesError, footer: _jsx(Button, { view: 'filled', appearance: 'neutral', size: 'l', label: retryLabel, onClick: onDataErrorRetryClick, "data-test-id": TEST_IDS.releaseNotesRetryButton }) }) }));
+    }
+    if (contentState === CONTENT_STATE.NoData || !hasItems) {
+        return (_jsx("div", { className: styles.stateWrapper, "data-surface": surface, children: _jsx(InfoBlock, { className: styles.state, size: 'l', title: noDataTitle, content: noDataDescription, "data-test-id": TEST_IDS.releaseNotesNoData }) }));
+    }
+    return (_jsx("div", { className: cn(styles.root, styles[surface]), children: _jsx(Carousel, { arrows: false, pagination: false, swipe: true, state: { page: pageIndex, onChange: onPageChange }, className: styles.carousel, children: items.map(item => (_jsx(NoteItem, { ...item, surface: surface }, `${item.title}-${item.image.src}`))) }) }));
+}

package/dist/esm/helperComponents/ReleaseNotesContent/index.d.ts

@@ -0,0 +1 @@
+export * from './ReleaseNotesContent.js';

package/dist/esm/helperComponents/ReleaseNotesContent/index.js

@@ -0,0 +1 @@
+export * from './ReleaseNotesContent.js';

package/dist/esm/helperComponents/ReleaseNotesContent/styles.module.css

@@ -0,0 +1,40 @@
+.root{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+}
+
+.modal{
+  min-width:calc(11 * var(--sn-primitive-dimension-64, 64px));
+}
+
+.bottomSheet{
+  min-width:0;
+}
+
+.carousel{
+  min-width:0;
+}
+
+.stateWrapper{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+}
+.stateWrapper[data-surface=modal]{
+  height:calc(7 * var(--sn-primitive-dimension-64, 64px) - var(--sn-primitive-dimension-4, 4px));
+}
+.stateWrapper[data-surface=bottomSheet]{
+  min-height:calc(7 * var(--sn-primitive-dimension-64, 64px));
+}
+
+.state{
+  width:100%;
+  max-width:calc(9 * var(--sn-primitive-dimension-64, 64px) + 3 * var(--sn-primitive-dimension-16, 16px));
+}
+
+.loading{
+  height:calc(5 * var(--sn-primitive-dimension-64, 64px));
+}

package/dist/esm/helperComponents/ReleaseNotesFooter/ReleaseNotesFooter.d.ts

@@ -0,0 +1,25 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { MouseEvent } from 'react';
+export type ReleaseNotesFooterProps = {
+    /** Поверхность отображения */
+    surface: 'modal' | 'bottomSheet';
+    /** Количество страниц */
+    total: number;
+    /** Текущая страница, zero-based */
+    pageIndex: number;
+    /** Номер страницы для отображения */
+    readablePageNumber: number;
+    /** Текст счётчика «1 из N» (используется на bottomSheet) */
+    counterLabel: string;
+    /** Label кнопки «Ознакомиться позже» */
+    readLaterLabel: string;
+    /** Действие «Ознакомиться позже» */
+    onReadLaterClick(event: MouseEvent<HTMLButtonElement>): void;
+    /** Предыдущая страница */
+    onPrevPageClick(): void;
+    /** Следующая страница */
+    onNextPageClick(): void;
+    /** Дополнительные пропсы кнопки «Ознакомиться позже» */
+    readLaterButtonProps?: Partial<ButtonProps>;
+};
+export declare function ReleaseNotesFooter({ surface, total, pageIndex, readablePageNumber, counterLabel, readLaterLabel, onReadLaterClick, onPrevPageClick, onNextPageClick, readLaterButtonProps, }: ReleaseNotesFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/ReleaseNotesFooter/ReleaseNotesFooter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { ChevronLeftSVG, ChevronRightSVG } from '@cloud-ru/ds-icons/interface/system';
+import { TEST_IDS } from '../../constants.js';
+import styles from './styles.module.css';
+export function ReleaseNotesFooter({ surface, total, pageIndex, readablePageNumber, counterLabel, readLaterLabel, onReadLaterClick, onPrevPageClick, onNextPageClick, readLaterButtonProps, }) {
+    const hasPagination = total > 1;
+    const isModal = surface === 'modal';
+    const buttonSize = isModal ? 'm' : 'l';
+    return (_jsxs("div", { className: styles.root, "data-surface": surface, children: [_jsx(Button, { view: 'function', appearance: 'neutral', size: buttonSize, label: readLaterLabel, "data-test-id": TEST_IDS.releaseNotesReadLaterButton, ...readLaterButtonProps, onClick: onReadLaterClick }), hasPagination && (_jsxs("div", { className: styles.controls, children: [!isModal && _jsx("span", { className: styles.counter, children: counterLabel }), _jsx(Button, { view: 'outline', appearance: 'neutral', size: buttonSize, icon: _jsx(ChevronLeftSVG, {}), disabled: pageIndex === 0, onClick: onPrevPageClick, "data-test-id": TEST_IDS.releaseNotesPrevButton }), _jsx(Button, { view: 'outline', appearance: 'neutral', size: buttonSize, icon: _jsx(ChevronRightSVG, {}), disabled: readablePageNumber === total, onClick: onNextPageClick, "data-test-id": TEST_IDS.releaseNotesNextButton })] }))] }));
+}

package/dist/esm/helperComponents/ReleaseNotesFooter/index.d.ts

@@ -0,0 +1 @@
+export * from './ReleaseNotesFooter.js';

package/dist/esm/helperComponents/ReleaseNotesFooter/index.js

@@ -0,0 +1 @@
+export * from './ReleaseNotesFooter.js';

package/dist/esm/helperComponents/ReleaseNotesFooter/styles.module.css

@@ -0,0 +1,27 @@
+.root{
+  position:relative;
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-16, 16px);
+       column-gap:var(--sn-primitive-dimension-16, 16px);
+  align-items:center;
+  justify-content:space-between;
+  width:100%;
+}
+
+.controls{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+}
+
+.counter{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  white-space:nowrap;
+}

package/dist/esm/helperComponents/index.d.ts

@@ -0,0 +1,6 @@
+export * from './DesktopReleaseNotes/index.js';
+export * from './InputConfirm/index.js';
+export * from './MobileReleaseNotes/index.js';
+export * from './NoteItem/index.js';
+export * from './ReleaseNotesContent/index.js';
+export * from './ReleaseNotesFooter/index.js';

package/dist/esm/helperComponents/index.js

@@ -0,0 +1,6 @@
+export * from './DesktopReleaseNotes/index.js';
+export * from './InputConfirm/index.js';
+export * from './MobileReleaseNotes/index.js';
+export * from './NoteItem/index.js';
+export * from './ReleaseNotesContent/index.js';
+export * from './ReleaseNotesFooter/index.js';

package/dist/esm/hooks.d.ts

@@ -0,0 +1,26 @@
+type TextFieldValidationParams = {
+    target?: string;
+    errorText: string;
+};
+export declare function useTextFieldValidation({ target, errorText }: TextFieldValidationParams): {
+    value: string;
+    error: string;
+    handleChange: (nextValue: string) => void;
+    reset: () => void;
+    validate: () => boolean;
+};
+type ReleaseNotesNavigationParams = {
+    onClose(): void;
+    onReadLaterClick?(): void;
+    onSlideChange?(slide: number): void;
+};
+export declare function useReleaseNotesNavigation({ onClose, onReadLaterClick, onSlideChange }: ReleaseNotesNavigationParams): {
+    pageIndex: number;
+    readablePageNumber: number;
+    setPage: (nextPage: number) => void;
+    handleClose: () => void;
+    handleReadLaterClick: () => void;
+    handleNextPageClick: (totalPages: number) => void;
+    handlePrevPageClick: () => void;
+};
+export {};

package/dist/esm/hooks.js

@@ -0,0 +1,55 @@
+import { useCallback, useState } from 'react';
+export function useTextFieldValidation({ target, errorText }) {
+    const [value, setValue] = useState('');
+    const [error, setError] = useState('');
+    const handleChange = useCallback((nextValue) => {
+        setValue(nextValue);
+        if (target === nextValue) {
+            setError('');
+        }
+    }, [target]);
+    const reset = useCallback(() => {
+        setValue('');
+        setError('');
+    }, []);
+    const validate = useCallback(() => {
+        if (!target || target === value) {
+            setError('');
+            return true;
+        }
+        setError(errorText);
+        return false;
+    }, [errorText, target, value]);
+    return { value, error, handleChange, reset, validate };
+}
+export function useReleaseNotesNavigation({ onClose, onReadLaterClick, onSlideChange }) {
+    const [pageIndex, setPageIndex] = useState(0);
+    const setPage = useCallback((nextPage) => {
+        setPageIndex(nextPage);
+        onSlideChange?.(nextPage);
+    }, [onSlideChange]);
+    const handleClose = useCallback(() => {
+        setPageIndex(0);
+        onClose();
+    }, [onClose]);
+    const handleReadLaterClick = useCallback(() => {
+        setPageIndex(0);
+        onReadLaterClick?.();
+        onClose();
+    }, [onClose, onReadLaterClick]);
+    const handleNextPageClick = useCallback((totalPages) => {
+        setPage(Math.min(totalPages - 1, pageIndex + 1));
+    }, [pageIndex, setPage]);
+    const handlePrevPageClick = useCallback(() => {
+        setPage(Math.max(0, pageIndex - 1));
+    }, [pageIndex, setPage]);
+    return {
+        pageIndex,
+        readablePageNumber: pageIndex + 1,
+        setPage,
+        handleClose,
+        handleReadLaterClick,
+        handleNextPageClick,
+        handlePrevPageClick,
+    };
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';
+export * from './locale/index.js';

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';
+export * from './locale/index.js';