@vkontakte/vkui 6.0.2 → 6.1.0

package/dist/cjs/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\nimport { PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { PaginationPageButton } from './PaginationPage/PaginationPageButton';\nimport { PaginationPageEllipsis } from './PaginationPage/PaginationPageEllipsis';\nimport { getPageLabelDefault } from './utils';\nimport styles from './Pagination.module.css';\n\nexport interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElement>, 'onChange'> {\n  /**\n   * Текущая страница.\n   */\n  currentPage?: number;\n  /**\n   * Кол-во всегда видимых страниц по краям текущей страницы.\n   */\n  siblingCount?: number;\n  /**\n   * Кол-во всегда видимых страниц в начале и в конце.\n   */\n  boundaryCount?: number;\n  /**\n   * Общее кол-во страниц.\n   */\n  totalPages?: number;\n  /**\n   * Блокировка всех кнопок.\n   */\n  disabled?: boolean;\n  /**\n   * Переопределение текста для обозначения блока навигации.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  navigationLabel?: string;\n  navigationLabelComponent?: HasComponent['Component'];\n  /**\n   * Переопределение текста для кнопки навигации назад.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  prevButtonLabel?: string;\n  /**\n   * Переопределение текста для кнопки навигации вперёд.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  nextButtonLabel?: string;\n  /**\n   * Функция для переопределения и/или локализации текста кнопки страницы.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageLabel?(isCurrent: boolean): string;\n  onChange?(page: number): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Pagination\n */\nexport const Pagination = ({\n  currentPage = 1,\n  siblingCount = 1,\n  boundaryCount = 1,\n  totalPages = 1,\n  disabled,\n  getPageLabel = getPageLabelDefault,\n  navigationLabel = 'Навигация по страницам',\n  navigationLabelComponent = 'h2',\n  prevButtonLabel = 'Перейти на предыдущую страницу',\n  nextButtonLabel = 'Перейти на следующую страницу',\n  onChange,\n  ...resetProps\n}: PaginationProps) => {\n  const pages = usePagination({\n    currentPage,\n    totalPages,\n    siblingCount,\n    boundaryCount,\n  });\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const handlePrevClick = React.useCallback(() => {\n    if (onChange && !isFirstPage) {\n      onChange(currentPage - 1);\n    }\n  }, [currentPage, isFirstPage, onChange]);\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      const page: string = event.currentTarget.dataset.page || '1';\n      onChange?.(Number(page));\n    },\n    [onChange],\n  );\n\n  const handleNextClick = React.useCallback(() => {\n    if (onChange && !isLastPage) {\n      onChange(currentPage + 1);\n    }\n  }, [currentPage, isLastPage, onChange]);\n\n  const renderPages = React.useCallback(\n    (page: PaginationPageType) => {\n      switch (page) {\n        case 'start-ellipsis':\n        case 'end-ellipsis':\n          return (\n            <li key={page}>\n              <PaginationPageEllipsis disabled={disabled} />\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <PaginationPageButton\n                getPageLabel={getPageLabel}\n                isCurrent={isCurrent}\n                onClick={handleClick}\n                disabled={disabled}\n              >\n                {page}\n              </PaginationPageButton>\n            </li>\n          );\n        }\n      }\n    },\n    [currentPage, disabled, getPageLabel, handleClick],\n  );\n\n  return (\n    <RootComponent Component=\"nav\" role=\"navigation\" {...resetProps}>\n      <VisuallyHidden Component={navigationLabelComponent}>{navigationLabel}</VisuallyHidden>\n      <ul className={styles['Pagination__list']}>\n        <li className={styles['Pagination__prevButtonContainer']}>\n          <Button\n            size=\"l\"\n            before={\n              <>\n                <VisuallyHidden>{prevButtonLabel}</VisuallyHidden>{' '}\n                <Icon24ChevronCompactLeft width={24} />\n              </>\n            }\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isFirstPage || disabled}\n            onClick={handlePrevClick}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li className={styles['Pagination__nextButtonContainer']}>\n          <Button\n            size=\"l\"\n            after={\n              <>\n                <VisuallyHidden>{nextButtonLabel}</VisuallyHidden>\n                <Icon24ChevronCompactRight width={24} />\n              </>\n            }\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isLastPage || disabled}\n            onClick={handleNextClick}\n          />\n        </li>\n      </ul>\n    </RootComponent>\n  );\n};\n"],"names":["Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageLabel","getPageLabelDefault","navigationLabel","navigationLabelComponent","prevButtonLabel","nextButtonLabel","onChange","resetProps","pages","usePagination","isFirstPage","isLastPage","handlePrevClick","React","useCallback","handleClick","event","page","currentTarget","dataset","Number","handleNextClick","renderPages","li","key","PaginationPageEllipsis","isCurrent","PaginationPageButton","onClick","RootComponent","Component","role","VisuallyHidden","ul","className","Button","size","before","Icon24ChevronCompactLeft","width","appearance","mode","map","after","Icon24ChevronCompactRight"],"mappings":";;;;+BA4DaA;;;eAAAA;;;;;;iEA5DU;uBAC6C;+BAClB;wBAE3B;+BACO;gCACC;sCACM;wCACE;uBACH;AAmD7B,MAAMA,aAAa;QAAC,EACzBC,cAAc,CAAC,EACfC,eAAe,CAAC,EAChBC,gBAAgB,CAAC,EACjBC,aAAa,CAAC,EACdC,QAAQ,EACRC,eAAeC,0BAAmB,EAClCC,kBAAkB,wBAAwB,EAC1CC,2BAA2B,IAAI,EAC/BC,kBAAkB,gCAAgC,EAClDC,kBAAkB,+BAA+B,EACjDC,QAAQ,EAEQ,WADbC;QAXHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,QAAQC,IAAAA,4BAAa,EAAC;QAC1Bd;QACAG;QACAF;QACAC;IACF;IACA,MAAMa,cAAcf,gBAAgB;IACpC,MAAMgB,aAAahB,gBAAgBG;IAEnC,MAAMc,kBAAkBC,OAAMC,WAAW,CAAC;QACxC,IAAIR,YAAY,CAACI,aAAa;YAC5BJ,SAASX,cAAc;QACzB;IACF,GAAG;QAACA;QAAae;QAAaJ;KAAS;IAEvC,MAAMS,cAAcF,OAAMC,WAAW,CACnC,CAACE;QACC,MAAMC,OAAeD,MAAME,aAAa,CAACC,OAAO,CAACF,IAAI,IAAI;QACzDX,qBAAAA,+BAAAA,SAAWc,OAAOH;IACpB,GACA;QAACX;KAAS;IAGZ,MAAMe,kBAAkBR,OAAMC,WAAW,CAAC;QACxC,IAAIR,YAAY,CAACK,YAAY;YAC3BL,SAASX,cAAc;QACzB;IACF,GAAG;QAACA;QAAagB;QAAYL;KAAS;IAEtC,MAAMgB,cAAcT,OAAMC,WAAW,CACnC,CAACG;QACC,OAAQA;YACN,KAAK;YACL,KAAK;gBACH,qBACE,qBAACM;oBAAGC,KAAKP;iCACP,qBAACQ,8CAAsB;oBAAC1B,UAAUA;;YAGxC;gBAAS;oBACP,MAAM2B,YAAYT,SAAStB;oBAC3B,qBACE,qBAAC4B;wBAAGC,KAAKP;qCACP,qBAACU,0CAAoB;wBACnB3B,cAAcA;wBACd0B,WAAWA;wBACXE,SAASb;wBACThB,UAAUA;uBAETkB;gBAIT;QACF;IACF,GACA;QAACtB;QAAaI;QAAUC;QAAce;KAAY;IAGpD,qBACE,qBAACc,4BAAa;QAACC,WAAU;QAAMC,MAAK;OAAiBxB,2BACnD,qBAACyB,8BAAc;QAACF,WAAW3B;OAA2BD,gCACtD,qBAAC+B;QAAGC,SAAS;qBACX,qBAACX;QAAGW,SAAS;qBACX,qBAACC,cAAM;QACLC,MAAK;QACLC,sBACE,0DACE,qBAACL,8BAAc,QAAE5B,kBAAkC,mBACnD,qBAACkC,+BAAwB;YAACC,OAAO;;QAGrCC,YAAW;QACXC,MAAK;QACL1C,UAAUW,eAAeX;QACzB6B,SAAShB;SAGZJ,MAAMkC,GAAG,CAACpB,4BACX,qBAACC;QAAGW,SAAS;qBACX,qBAACC,cAAM;QACLC,MAAK;QACLO,qBACE,0DACE,qBAACX,8BAAc,QAAE3B,gCACjB,qBAACuC,gCAAyB;YAACL,OAAO;;QAGtCC,YAAW;QACXC,MAAK;QACL1C,UAAUY,cAAcZ;QACxB6B,SAASP;;AAMrB"}
+{"version":3,"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport {\n  type CustomPaginationNavigationButton,\n  PaginationNavigationButton,\n  type PaginationNavigationButtonProps,\n} from './PaginationNavigationButton/PaginationNavigationButton';\nimport {\n  type CustomPaginationPageButtonProps,\n  PaginationPageButton,\n} from './PaginationPage/PaginationPageButton';\nimport { PaginationPageEllipsis } from './PaginationPage/PaginationPageEllipsis';\nimport { getPageLabelDefault } from './utils';\nimport styles from './Pagination.module.css';\n\nexport interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElement>, 'onChange'> {\n  /**\n   * Текущая страница.\n   */\n  currentPage?: number;\n  /**\n   * Кол-во всегда видимых страниц по краям текущей страницы.\n   */\n  siblingCount?: number;\n  /**\n   * Кол-во всегда видимых страниц в начале и в конце.\n   */\n  boundaryCount?: number;\n  /**\n   * Общее кол-во страниц.\n   */\n  totalPages?: number;\n  /**\n   * Блокировка всех кнопок.\n   */\n  disabled?: boolean;\n  /**\n   * Декоративный текст для кнопки навигации назад.\n   *\n   * > Note: Экранные дикторы будут использовать `prevButtonLabel`.\n   */\n  prevButtonCaption?: string;\n  /**\n   * Декоративный текст для кнопки навигации вперёд.\n   *\n   * > Note: Экранные дикторы будут использовать `nextButtonLabel`.\n   */\n  nextButtonCaption?: string;\n  /**\n   * Задаёт стиль отображения кнопок навигации.\n   *\n   * - `icon` – показывать только иконку;\n   * - `caption` – показывать только подпись;\n   * - `both` – показывать и иконку, и подпись.\n   */\n  navigationButtonsStyle?: PaginationNavigationButtonProps['style'];\n  /**\n   * [a11y] Метка для обозначения блока навигации.\n   */\n  navigationLabel?: string;\n  navigationLabelComponent?: HasComponent['Component'];\n  /**\n   * [a11y] Метка для кнопки навигации назад.\n   */\n  prevButtonLabel?: string;\n  /**\n   * [a11y] Метка для кнопки навигации вперёд.\n   */\n  nextButtonLabel?: string;\n  /**\n   * [a11y] Функция для переопределения и/или локализации метки кнопки страницы.\n   */\n  getPageLabel?: (isCurrent: boolean) => string;\n  onChange?: (page: number, event: React.MouseEvent<HTMLElement>) => void;\n  /**\n   * Функция для кастомного рендера кнопок страниц.\n   *\n   * > Note: `CustomPaginationPageButtonProps` наследует API [Tappable](https://vkcom.github.io/VKUI/#/Tappable).\n   */\n  renderPageButton?: (props: CustomPaginationPageButtonProps) => React.ReactNode;\n  /**\n   Функция для кастомного рендера кнопок навигации `prev` и `next`.\n   *\n   * > Note: `CustomPaginationNavigationButton` наследует API [Button](https://vkcom.github.io/VKUI/#/Button).\n   */\n  renderNavigationButton?: (props: CustomPaginationNavigationButton) => React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Pagination\n */\nexport const Pagination = ({\n  currentPage = 1,\n  siblingCount = 1,\n  boundaryCount = 1,\n  totalPages = 1,\n  disabled,\n  prevButtonCaption = 'Назад',\n  nextButtonCaption = 'Вперёд',\n  navigationButtonsStyle = 'icon',\n  getPageLabel = getPageLabelDefault,\n  navigationLabel = 'Навигация по страницам',\n  navigationLabelComponent = 'h2',\n  prevButtonLabel = 'Перейти на предыдущую страницу',\n  nextButtonLabel = 'Перейти на следующую страницу',\n  onChange,\n  renderPageButton,\n  renderNavigationButton,\n  ...resetProps\n}: PaginationProps) => {\n  const pages = usePagination({\n    currentPage,\n    totalPages,\n    siblingCount,\n    boundaryCount,\n  });\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n  const prevPage = isFirstPage ? undefined : currentPage - 1;\n  const nextPage = isLastPage ? undefined : currentPage + 1;\n\n  const handlePrevClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      if (onChange && prevPage !== undefined) {\n        onChange(prevPage, event);\n      }\n    },\n    [prevPage, onChange],\n  );\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      const page: string = event.currentTarget.dataset.page || '1';\n      onChange?.(Number(page), event);\n    },\n    [onChange],\n  );\n\n  const handleNextClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      if (onChange && nextPage !== undefined) {\n        onChange(nextPage, event);\n      }\n    },\n    [nextPage, onChange],\n  );\n\n  const { sizeY } = useAdaptivity();\n\n  const renderPages = React.useCallback(\n    (page: PaginationPageType) => {\n      switch (page) {\n        case 'start-ellipsis':\n        case 'end-ellipsis':\n          return (\n            <li key={page}>\n              <PaginationPageEllipsis disabled={disabled} />\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n\n          return (\n            <li key={page}>\n              <PaginationPageButton\n                getPageLabel={getPageLabel}\n                isCurrent={isCurrent}\n                onClick={handleClick}\n                disabled={disabled}\n                sizeY={sizeY}\n                renderPageButton={renderPageButton}\n              >\n                {page}\n              </PaginationPageButton>\n            </li>\n          );\n        }\n      }\n    },\n    [currentPage, disabled, getPageLabel, handleClick, renderPageButton, sizeY],\n  );\n\n  return (\n    <RootComponent Component=\"nav\" role=\"navigation\" {...resetProps}>\n      <VisuallyHidden Component={navigationLabelComponent}>{navigationLabel}</VisuallyHidden>\n      <ul className={styles['Pagination__list']}>\n        <li className={styles['Pagination__prevButtonContainer']}>\n          <PaginationNavigationButton\n            type=\"prev\"\n            style={navigationButtonsStyle}\n            caption={prevButtonCaption}\n            Icon={Icon24ChevronCompactLeft}\n            a11yLabel={prevButtonLabel}\n            disabled={isFirstPage || disabled}\n            onClick={handlePrevClick}\n            data-page={prevPage}\n            renderNavigationButton={renderNavigationButton}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li className={styles['Pagination__nextButtonContainer']}>\n          <PaginationNavigationButton\n            type=\"next\"\n            style={navigationButtonsStyle}\n            caption={nextButtonCaption}\n            Icon={Icon24ChevronCompactRight}\n            a11yLabel={nextButtonLabel}\n            disabled={isLastPage || disabled}\n            onClick={handleNextClick}\n            data-page={nextPage}\n            renderNavigationButton={renderNavigationButton}\n          />\n        </li>\n      </ul>\n    </RootComponent>\n  );\n};\n"],"names":["Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","prevButtonCaption","nextButtonCaption","navigationButtonsStyle","getPageLabel","getPageLabelDefault","navigationLabel","navigationLabelComponent","prevButtonLabel","nextButtonLabel","onChange","renderPageButton","renderNavigationButton","resetProps","pages","usePagination","isFirstPage","isLastPage","prevPage","undefined","nextPage","handlePrevClick","React","useCallback","event","handleClick","page","currentTarget","dataset","Number","handleNextClick","sizeY","useAdaptivity","renderPages","li","PaginationPageEllipsis","isCurrent","PaginationPageButton","onClick","RootComponent","Component","role","VisuallyHidden","ul","className","PaginationNavigationButton","type","style","caption","Icon","Icon24ChevronCompactLeft","a11yLabel","data-page","map","Icon24ChevronCompactRight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgGaA;;;eAAAA;;;;;;;;iEAhGU;uBAC6C;+BACtC;+BACoB;+BAEpB;gCACC;4CAKxB;sCAIA;wCACgC;uBACH;AA+E7B,MAAMA,aAAa;QAAC,EACzBC,cAAc,CAAC,EACfC,eAAe,CAAC,EAChBC,gBAAgB,CAAC,EACjBC,aAAa,CAAC,EACdC,QAAQ,EACRC,oBAAoB,OAAO,EAC3BC,oBAAoB,QAAQ,EAC5BC,yBAAyB,MAAM,EAC/BC,eAAeC,0BAAmB,EAClCC,kBAAkB,wBAAwB,EAC1CC,2BAA2B,IAAI,EAC/BC,kBAAkB,gCAAgC,EAClDC,kBAAkB,+BAA+B,EACjDC,QAAQ,EACRC,gBAAgB,EAChBC,sBAAsB,EAEN,WADbC;QAhBHjB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,QAAQC,IAAAA,4BAAa,EAAC;QAC1BnB;QACAG;QACAF;QACAC;IACF;IACA,MAAMkB,cAAcpB,gBAAgB;IACpC,MAAMqB,aAAarB,gBAAgBG;IACnC,MAAMmB,WAAWF,cAAcG,YAAYvB,cAAc;IACzD,MAAMwB,WAAWH,aAAaE,YAAYvB,cAAc;IAExD,MAAMyB,kBAAkBC,OAAMC,WAAW,CACvC,CAACC;QACC,IAAId,YAAYQ,aAAaC,WAAW;YACtCT,SAASQ,UAAUM;QACrB;IACF,GACA;QAACN;QAAUR;KAAS;IAGtB,MAAMe,cAAcH,OAAMC,WAAW,CACnC,CAACC;QACC,MAAME,OAAeF,MAAMG,aAAa,CAACC,OAAO,CAACF,IAAI,IAAI;QACzDhB,qBAAAA,+BAAAA,SAAWmB,OAAOH,OAAOF;IAC3B,GACA;QAACd;KAAS;IAGZ,MAAMoB,kBAAkBR,OAAMC,WAAW,CACvC,CAACC;QACC,IAAId,YAAYU,aAAaD,WAAW;YACtCT,SAASU,UAAUI;QACrB;IACF,GACA;QAACJ;QAAUV;KAAS;IAGtB,MAAM,EAAEqB,KAAK,EAAE,GAAGC,IAAAA,4BAAa;IAE/B,MAAMC,cAAcX,OAAMC,WAAW,CACnC,CAACG;QACC,OAAQA;YACN,KAAK;YACL,KAAK;gBACH,qBACE,qBAACQ;8BACC,cAAA,qBAACC,8CAAsB;wBAACnC,UAAUA;;mBAD3B0B;YAIb;gBAAS;oBACP,MAAMU,YAAYV,SAAS9B;oBAE3B,qBACE,qBAACsC;kCACC,cAAA,qBAACG,0CAAoB;4BACnBjC,cAAcA;4BACdgC,WAAWA;4BACXE,SAASb;4BACTzB,UAAUA;4BACV+B,OAAOA;4BACPpB,kBAAkBA;sCAEjBe;;uBATIA;gBAab;QACF;IACF,GACA;QAAC9B;QAAaI;QAAUI;QAAcqB;QAAad;QAAkBoB;KAAM;IAG7E,qBACE,sBAACQ,4BAAa;QAACC,WAAU;QAAMC,MAAK;OAAiB5B;;0BACnD,qBAAC6B,8BAAc;gBAACF,WAAWjC;0BAA2BD;;0BACtD,sBAACqC;gBAAGC,SAAS;;kCACX,qBAACV;wBAAGU,SAAS;kCACX,cAAA,qBAACC,sDAA0B;4BACzBC,MAAK;4BACLC,OAAO5C;4BACP6C,SAAS/C;4BACTgD,MAAMC,+BAAwB;4BAC9BC,WAAW3C;4BACXR,UAAUgB,eAAehB;4BACzBsC,SAASjB;4BACT+B,aAAWlC;4BACXN,wBAAwBA;;;oBAG3BE,MAAMuC,GAAG,CAACpB;kCACX,qBAACC;wBAAGU,SAAS;kCACX,cAAA,qBAACC,sDAA0B;4BACzBC,MAAK;4BACLC,OAAO5C;4BACP6C,SAAS9C;4BACT+C,MAAMK,gCAAyB;4BAC/BH,WAAW1C;4BACXT,UAAUiB,cAAcjB;4BACxBsC,SAASR;4BACTsB,aAAWhC;4BACXR,wBAAwBA;;;;;;;AAMpC"}

package/dist/cjs/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export interface PaginationNavigationButtonOpts {
+    'type': 'prev' | 'next';
+    'style': 'icon' | 'caption' | 'both';
+    'caption': React.ReactNode;
+    'Icon': React.ComponentType;
+    'a11yLabel': React.ReactNode;
+    'disabled'?: boolean;
+    'onClick': (event: React.MouseEvent<HTMLElement>) => void;
+    'data-page': number | undefined;
+}
+export interface PaginationNavigationButtonProps extends PaginationNavigationButtonOpts {
+    renderNavigationButton?: (props: CustomPaginationNavigationButton) => React.ReactNode;
+}
+/**
+ * @private
+ */
+export declare const getButtonPropsFromPaginationNavigationButton: (opts: PaginationNavigationButtonOpts) => {
+    size: "l";
+    before: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+    after: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+    appearance: "accent" | "neutral";
+    mode: "tertiary";
+    disabled: boolean | undefined;
+    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    children: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+    'data-page': number | undefined;
+};
+/**
+ * @private
+ */
+export type CustomPaginationNavigationButton = ReturnType<typeof getButtonPropsFromPaginationNavigationButton>;
+/**
+ * @private
+ */
+export declare const PaginationNavigationButton: ({ renderNavigationButton, ...restProps }: PaginationNavigationButtonProps) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+//# sourceMappingURL=PaginationNavigationButton.d.ts.map

package/dist/cjs/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationNavigationButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,8BAA8B;IAC7C,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IACrC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,+BAAgC,SAAQ,8BAA8B;IACrF,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,gCAAgC,KAAK,KAAK,CAAC,SAAS,CAAC;CACvF;AAED;;GAEG;AACH,eAAO,MAAM,4CAA4C,SACjD,8BAA8B;;;;;;;qBAZjB,gBAAgB,CAAC,WAAW,CAAC,KAAK,IAAI;;;CA0C1D,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,gCAAgC,GAAG,UAAU,CACvD,OAAO,4CAA4C,CACpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B,6CAGpC,+BAA+B,uHAQjC,CAAC"}

package/dist/cjs/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PaginationNavigationButton: function() {
+        return PaginationNavigationButton;
+    },
+    getButtonPropsFromPaginationNavigationButton: function() {
+        return getButtonPropsFromPaginationNavigationButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _Button = require("../../Button/Button");
+const _VisuallyHidden = require("../../VisuallyHidden/VisuallyHidden");
+const getButtonPropsFromPaginationNavigationButton = (opts)=>{
+    const icon = opts.style !== 'caption' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                children: opts.a11yLabel
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(opts.Icon, {})
+        ]
+    }) : null;
+    const caption = opts.style === 'caption' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                children: opts.a11yLabel
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                "aria-hidden": "true",
+                children: opts.caption
+            })
+        ]
+    }) : opts.style !== 'icon' ? /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+        "aria-hidden": "true",
+        children: opts.caption
+    }) : null;
+    return {
+        'size': 'l',
+        'before': opts.type === 'prev' ? icon : null,
+        'after': opts.type === 'next' ? icon : null,
+        'appearance': opts.style === 'caption' ? 'neutral' : 'accent',
+        'mode': 'tertiary',
+        'disabled': opts.disabled,
+        'onClick': opts.onClick,
+        'children': caption,
+        'data-page': opts['data-page']
+    };
+};
+const PaginationNavigationButton = (_param)=>{
+    var { renderNavigationButton } = _param, restProps = _object_without_properties._(_param, [
+        "renderNavigationButton"
+    ]);
+    const buttonProps = getButtonPropsFromPaginationNavigationButton(restProps);
+    if (typeof renderNavigationButton === 'function') {
+        return renderNavigationButton(buttonProps);
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button, _object_spread._({}, buttonProps));
+};
+
+//# sourceMappingURL=PaginationNavigationButton.js.map

package/dist/cjs/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button, type ButtonProps } from '../../Button/Button';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\n\nexport interface PaginationNavigationButtonOpts {\n  'type': 'prev' | 'next';\n  'style': 'icon' | 'caption' | 'both';\n  'caption': React.ReactNode;\n  'Icon': React.ComponentType;\n  'a11yLabel': React.ReactNode;\n  'disabled'?: boolean;\n  'onClick': (event: React.MouseEvent<HTMLElement>) => void;\n  'data-page': number | undefined;\n}\n\nexport interface PaginationNavigationButtonProps extends PaginationNavigationButtonOpts {\n  renderNavigationButton?: (props: CustomPaginationNavigationButton) => React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const getButtonPropsFromPaginationNavigationButton = (\n  opts: PaginationNavigationButtonOpts,\n) => {\n  const icon: React.ReactElement | null =\n    opts.style !== 'caption' ? (\n      <>\n        <VisuallyHidden>{opts.a11yLabel}</VisuallyHidden>\n        <opts.Icon />\n      </>\n    ) : null;\n  const caption: React.ReactElement | null =\n    opts.style === 'caption' ? (\n      <>\n        <VisuallyHidden>{opts.a11yLabel}</VisuallyHidden>\n        <span aria-hidden=\"true\">{opts.caption}</span>\n      </>\n    ) : opts.style !== 'icon' ? (\n      <span aria-hidden=\"true\">{opts.caption}</span>\n    ) : null;\n\n  return {\n    'size': 'l',\n    'before': opts.type === 'prev' ? icon : null,\n    'after': opts.type === 'next' ? icon : null,\n    'appearance': opts.style === 'caption' ? 'neutral' : 'accent',\n    'mode': 'tertiary',\n    'disabled': opts.disabled,\n    'onClick': opts.onClick,\n    'children': caption,\n    'data-page': opts['data-page'],\n  } satisfies ButtonProps & { 'data-page': number | undefined };\n};\n\n/**\n * @private\n */\nexport type CustomPaginationNavigationButton = ReturnType<\n  typeof getButtonPropsFromPaginationNavigationButton\n>;\n\n/**\n * @private\n */\nexport const PaginationNavigationButton = ({\n  renderNavigationButton,\n  ...restProps\n}: PaginationNavigationButtonProps) => {\n  const buttonProps = getButtonPropsFromPaginationNavigationButton(restProps);\n\n  if (typeof renderNavigationButton === 'function') {\n    return renderNavigationButton(buttonProps);\n  }\n\n  return <Button {...buttonProps} />;\n};\n"],"names":["PaginationNavigationButton","getButtonPropsFromPaginationNavigationButton","opts","icon","style","VisuallyHidden","a11yLabel","Icon","caption","span","aria-hidden","type","disabled","onClick","renderNavigationButton","restProps","buttonProps","Button"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiEaA,0BAA0B;eAA1BA;;IA3CAC,4CAA4C;eAA5CA;;;;;;;iEAtBU;wBACkB;gCACV;AAoBxB,MAAMA,+CAA+C,CAC1DC;IAEA,MAAMC,OACJD,KAAKE,KAAK,KAAK,0BACb;;0BACE,qBAACC,8BAAc;0BAAEH,KAAKI,SAAS;;0BAC/B,qBAACJ,KAAKK,IAAI;;SAEV;IACN,MAAMC,UACJN,KAAKE,KAAK,KAAK,0BACb;;0BACE,qBAACC,8BAAc;0BAAEH,KAAKI,SAAS;;0BAC/B,qBAACG;gBAAKC,eAAY;0BAAQR,KAAKM,OAAO;;;SAEtCN,KAAKE,KAAK,KAAK,uBACjB,qBAACK;QAAKC,eAAY;kBAAQR,KAAKM,OAAO;SACpC;IAEN,OAAO;QACL,QAAQ;QACR,UAAUN,KAAKS,IAAI,KAAK,SAASR,OAAO;QACxC,SAASD,KAAKS,IAAI,KAAK,SAASR,OAAO;QACvC,cAAcD,KAAKE,KAAK,KAAK,YAAY,YAAY;QACrD,QAAQ;QACR,YAAYF,KAAKU,QAAQ;QACzB,WAAWV,KAAKW,OAAO;QACvB,YAAYL;QACZ,aAAaN,IAAI,CAAC,YAAY;IAChC;AACF;AAYO,MAAMF,6BAA6B;QAAC,EACzCc,sBAAsB,EAEU,WAD7BC;QADHD;;IAGA,MAAME,cAAcf,6CAA6Cc;IAEjE,IAAI,OAAOD,2BAA2B,YAAY;QAChD,OAAOA,uBAAuBE;IAChC;IAEA,qBAAO,qBAACC,cAAM,uBAAKD;AACrB"}

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageButton.d.ts

@@ -1,9 +1,25 @@
 import * as React from 'react';
-import type { HasRootRef } from '../../../types';
+import { type SizeTypeValues } from '../../../lib/adaptivity';
 import { PaginationProps } from '../Pagination';
-export interface PaginationPageButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, HasRootRef<HTMLButtonElement>, Pick<PaginationProps, 'getPageLabel'> {
+export interface PaginationPageButtonOpts extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled' | 'className'>, Pick<PaginationProps, 'getPageLabel'> {
     isCurrent?: boolean;
+    sizeY?: SizeTypeValues;
     children: number;
 }
-export declare const PaginationPageButton: ({ isCurrent, getPageLabel, children, className, disabled, ...restProps }: PaginationPageButtonProps) => React.JSX.Element;
+export interface PaginationPageButtonProps extends PaginationPageButtonOpts {
+    renderPageButton?: (props: CustomPaginationPageButtonProps) => React.ReactNode;
+}
+export declare const getTappablePropsFromPaginationPage: (opts: PaginationPageButtonOpts) => {
+    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    className: string;
+    activeMode: string;
+    hoverMode: string;
+    focusVisibleMode: "outside";
+    'aria-current': true | undefined;
+    disabled: boolean | undefined;
+    children: import("react/jsx-runtime").JSX.Element;
+    'data-page': number;
+};
+export type CustomPaginationPageButtonProps = ReturnType<typeof getTappablePropsFromPaginationPage>;
+export declare const PaginationPageButton: ({ renderPageButton, ...restProps }: PaginationPageButtonProps) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 //# sourceMappingURL=PaginationPageButton.d.ts.map

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPageButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIjD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAKhD,MAAM,WAAW,yBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,UAAU,CAAC,iBAAiB,CAAC,EAC7B,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,6EAO9B,yBAAyB,sBAoB3B,CAAC"}
+{"version":3,"file":"PaginationPageButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAKhD,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC,EAC/F,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACzE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,+BAA+B,KAAK,KAAK,CAAC,SAAS,CAAC;CAChF;AAED,eAAO,MAAM,kCAAkC,SAAU,wBAAwB;;;;;;;;;;CAiChF,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,UAAU,CAAC,OAAO,kCAAkC,CAAC,CAAC;AAEpG,eAAO,MAAM,oBAAoB,uCAG9B,yBAAyB,uHAQ3B,CAAC"}

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageButton.js

@@ -2,15 +2,24 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "PaginationPageButton", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PaginationPageButton: function() {
         return PaginationPageButton;
+    },
+    getTappablePropsFromPaginationPage: function() {
+        return getTappablePropsFromPaginationPage;
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _Tappable = require("../../Tappable/Tappable");
@@ -18,29 +27,51 @@ const _Text = require("../../Typography/Text/Text");
 const _VisuallyHidden = require("../../VisuallyHidden/VisuallyHidden");
 const _utils = require("../utils");
 const _usePaginationPageClasses = require("./usePaginationPageClasses");
-const PaginationPageButton = (_param)=>{
-    var { isCurrent = false, getPageLabel = _utils.getPageLabelDefault, children, className, disabled } = _param, restProps = _object_without_properties._(_param, [
+const getTappablePropsFromPaginationPage = (opts)=>{
+    const { isCurrent = false, getPageLabel = _utils.getPageLabelDefault, children, className, disabled, sizeY } = opts, restProps = _object_without_properties._(opts, [
         "isCurrent",
         "getPageLabel",
         "children",
         "className",
-        "disabled"
+        "disabled",
+        "sizeY"
     ]);
-    const paginationClassNames = (0, _usePaginationPageClasses.usePaginationPageClassNames)({
+    const pageClassNames = (0, _usePaginationPageClasses.getPaginationPageClassNames)({
         isCurrent,
-        disabled
+        disabled,
+        sizeY
     });
-    return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread._({
-        className: (0, _vkjs.classNames)(paginationClassNames, className),
-        activeMode: "vkuiPaginationPage--state-active",
-        hoverMode: "vkuiPaginationPage--state-hover",
-        focusVisibleMode: "outside",
-        "data-page": children,
-        "aria-current": isCurrent ? true : undefined,
-        disabled: disabled
-    }, restProps), /*#__PURE__*/ _react.createElement(_Text.Text, {
-        normalize: false
-    }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, getPageLabel(isCurrent), " "), children));
+    return _object_spread._({
+        'className': (0, _vkjs.classNames)(pageClassNames, className),
+        'activeMode': "vkuiPaginationPage--state-active",
+        'hoverMode': "vkuiPaginationPage--state-hover",
+        'focusVisibleMode': 'outside',
+        'aria-current': isCurrent ? true : undefined,
+        'disabled': disabled,
+        'children': /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.Text, {
+            normalize: false,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VisuallyHidden.VisuallyHidden, {
+                    children: [
+                        getPageLabel(isCurrent),
+                        " "
+                    ]
+                }),
+                children
+            ]
+        }),
+        'data-page': children
+    }, restProps);
+};
+const PaginationPageButton = (_param)=>{
+    var { renderPageButton } = _param, restProps = _object_without_properties._(_param, [
+        "renderPageButton"
+    ]);
+    const tappableProps = getTappablePropsFromPaginationPage(restProps);
+    if (typeof renderPageButton === 'function') {
+        return renderPageButton(tappableProps);
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tappable.Tappable, _object_spread._({}, tappableProps));
 };
 
 //# sourceMappingURL=PaginationPageButton.js.map

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../../types';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { Text } from '../../Typography/Text/Text';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { PaginationProps } from '../Pagination';\nimport { getPageLabelDefault } from '../utils';\nimport { usePaginationPageClassNames } from './usePaginationPageClasses';\nimport styles from './PaginationPage.module.css';\n\nexport interface PaginationPageButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement>,\n    Pick<PaginationProps, 'getPageLabel'> {\n  isCurrent?: boolean;\n  children: number;\n}\n\nexport const PaginationPageButton = ({\n  isCurrent = false,\n  getPageLabel = getPageLabelDefault,\n  children,\n  className,\n  disabled,\n  ...restProps\n}: PaginationPageButtonProps) => {\n  const paginationClassNames = usePaginationPageClassNames({ isCurrent, disabled });\n\n  return (\n    <Tappable\n      className={classNames(paginationClassNames, className)}\n      activeMode={styles['PaginationPage--state-active']}\n      hoverMode={styles['PaginationPage--state-hover']}\n      focusVisibleMode=\"outside\"\n      data-page={children}\n      aria-current={isCurrent ? true : undefined}\n      disabled={disabled}\n      {...restProps}\n    >\n      <Text normalize={false}>\n        <VisuallyHidden>{getPageLabel(isCurrent)} </VisuallyHidden>\n        {children}\n      </Text>\n    </Tappable>\n  );\n};\n"],"names":["PaginationPageButton","isCurrent","getPageLabel","getPageLabelDefault","children","className","disabled","restProps","paginationClassNames","usePaginationPageClassNames","Tappable","classNames","activeMode","hoverMode","focusVisibleMode","data-page","aria-current","undefined","Text","normalize","VisuallyHidden"],"mappings":";;;;+BAmBaA;;;eAAAA;;;;;;iEAnBU;sBACI;0BAEF;sBACJ;gCACU;uBAEK;0CACQ;AAWrC,MAAMA,uBAAuB;QAAC,EACnCC,YAAY,KAAK,EACjBC,eAAeC,0BAAmB,EAClCC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EAEkB,WADvBC;QALHN;QACAC;QACAE;QACAC;QACAC;;IAGA,MAAME,uBAAuBC,IAAAA,qDAA2B,EAAC;QAAER;QAAWK;IAAS;IAE/E,qBACE,qBAACI,kBAAQ;QACPL,WAAWM,IAAAA,gBAAU,EAACH,sBAAsBH;QAC5CO,UAAU;QACVC,SAAS;QACTC,kBAAiB;QACjBC,aAAWX;QACXY,gBAAcf,YAAY,OAAOgB;QACjCX,UAAUA;OACNC,0BAEJ,qBAACW,UAAI;QAACC,WAAW;qBACf,qBAACC,8BAAc,QAAElB,aAAaD,YAAW,MACxCG;AAIT"}
+{"version":3,"sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type SizeTypeValues } from '../../../lib/adaptivity';\nimport { Tappable, type TappableProps } from '../../Tappable/Tappable';\nimport { Text } from '../../Typography/Text/Text';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { PaginationProps } from '../Pagination';\nimport { getPageLabelDefault } from '../utils';\nimport { getPaginationPageClassNames } from './usePaginationPageClasses';\nimport styles from './PaginationPage.module.css';\n\nexport interface PaginationPageButtonOpts\n  extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled' | 'className'>,\n    Pick<PaginationProps, 'getPageLabel'> {\n  isCurrent?: boolean;\n  sizeY?: SizeTypeValues;\n  children: number;\n}\n\nexport interface PaginationPageButtonProps extends PaginationPageButtonOpts {\n  renderPageButton?: (props: CustomPaginationPageButtonProps) => React.ReactNode;\n}\n\nexport const getTappablePropsFromPaginationPage = (opts: PaginationPageButtonOpts) => {\n  const {\n    isCurrent = false,\n    getPageLabel = getPageLabelDefault,\n    children,\n    className,\n    disabled,\n    sizeY,\n    ...restProps\n  } = opts;\n\n  const pageClassNames = getPaginationPageClassNames({\n    isCurrent,\n    disabled,\n    sizeY,\n  });\n\n  return {\n    'className': classNames(pageClassNames, className),\n    'activeMode': styles['PaginationPage--state-active'],\n    'hoverMode': styles['PaginationPage--state-hover'],\n    'focusVisibleMode': 'outside',\n    'aria-current': isCurrent ? true : undefined,\n    'disabled': disabled,\n    'children': (\n      <Text normalize={false}>\n        <VisuallyHidden>{getPageLabel(isCurrent)} </VisuallyHidden>\n        {children}\n      </Text>\n    ),\n    'data-page': children,\n    ...restProps,\n  } satisfies TappableProps & { 'data-page': number };\n};\n\nexport type CustomPaginationPageButtonProps = ReturnType<typeof getTappablePropsFromPaginationPage>;\n\nexport const PaginationPageButton = ({\n  renderPageButton,\n  ...restProps\n}: PaginationPageButtonProps) => {\n  const tappableProps = getTappablePropsFromPaginationPage(restProps);\n\n  if (typeof renderPageButton === 'function') {\n    return renderPageButton(tappableProps);\n  }\n\n  return <Tappable {...tappableProps} />;\n};\n"],"names":["PaginationPageButton","getTappablePropsFromPaginationPage","opts","isCurrent","getPageLabel","getPageLabelDefault","children","className","disabled","sizeY","restProps","pageClassNames","getPaginationPageClassNames","classNames","undefined","Text","normalize","VisuallyHidden","renderPageButton","tappableProps","Tappable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA4DaA,oBAAoB;eAApBA;;IArCAC,kCAAkC;eAAlCA;;;;;;;iEAvBU;sBACI;0BAEkB;sBACxB;gCACU;uBAEK;0CACQ;AAerC,MAAMA,qCAAqC,CAACC;IACjD,MAAM,EACJC,YAAY,KAAK,EACjBC,eAAeC,0BAAmB,EAClCC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,KAAK,EAEN,GAAGP,MADCQ,yCACDR;QAPFC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAIF,MAAME,iBAAiBC,IAAAA,qDAA2B,EAAC;QACjDT;QACAK;QACAC;IACF;IAEA,OAAO;QACL,aAAaI,IAAAA,gBAAU,EAACF,gBAAgBJ;QACxC,YAAY;QACZ,WAAW;QACX,oBAAoB;QACpB,gBAAgBJ,YAAY,OAAOW;QACnC,YAAYN;QACZ,0BACE,sBAACO,UAAI;YAACC,WAAW;;8BACf,sBAACC,8BAAc;;wBAAEb,aAAaD;wBAAW;;;gBACxCG;;;QAGL,aAAaA;OACVI;AAEP;AAIO,MAAMV,uBAAuB;QAAC,EACnCkB,gBAAgB,EAEU,WADvBR;QADHQ;;IAGA,MAAMC,gBAAgBlB,mCAAmCS;IAEzD,IAAI,OAAOQ,qBAAqB,YAAY;QAC1C,OAAOA,iBAAiBC;IAC1B;IAEA,qBAAO,qBAACC,kBAAQ,uBAAKD;AACvB"}

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageEllipsis.d.ts

@@ -3,5 +3,5 @@ import type { HasRootRef } from '../../../types';
 export interface PaginationPageEllipsisProps extends React.HTMLAttributes<HTMLSpanElement>, HasRootRef<HTMLSpanElement> {
     disabled?: boolean;
 }
-export declare const PaginationPageEllipsis: ({ className, disabled, ...restProps }: PaginationPageEllipsisProps) => React.JSX.Element;
+export declare const PaginationPageEllipsis: ({ className, disabled, ...restProps }: PaginationPageEllipsisProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PaginationPageEllipsis.d.ts.map

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageEllipsis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPageEllipsis.d.ts","sourceRoot":"","sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageEllipsis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAKjD,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAC3C,UAAU,CAAC,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,0CAIhC,2BAA2B,sBAe7B,CAAC"}
+{"version":3,"file":"PaginationPageEllipsis.d.ts","sourceRoot":"","sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageEllipsis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAKjD,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAC3C,UAAU,CAAC,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,0CAIhC,2BAA2B,4CAe7B,CAAC"}

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageEllipsis.js

@@ -10,7 +10,9 @@ Object.defineProperty(exports, "PaginationPageEllipsis", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _Text = require("../../Typography/Text/Text");
@@ -24,9 +26,11 @@ const PaginationPageEllipsis = (_param)=>{
         isCurrent: false,
         disabled
     });
-    return /*#__PURE__*/ _react.createElement(_Text.Text, _object_spread._({
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.Text, _object_spread_props._(_object_spread._({
         className: (0, _vkjs.classNames)(paginationClassNames, "vkuiPaginationPage--type-ellipsis", className)
-    }, restProps), "…");
+    }, restProps), {
+        children: "…"
+    }));
 };
 
 //# sourceMappingURL=PaginationPageEllipsis.js.map

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageEllipsis.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageEllipsis.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../../types';\nimport { Text } from '../../Typography/Text/Text';\nimport { usePaginationPageClassNames } from './usePaginationPageClasses';\nimport styles from './PaginationPage.module.css';\n\nexport interface PaginationPageEllipsisProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    HasRootRef<HTMLSpanElement> {\n  disabled?: boolean;\n}\n\nexport const PaginationPageEllipsis = ({\n  className,\n  disabled,\n  ...restProps\n}: PaginationPageEllipsisProps) => {\n  const paginationClassNames = usePaginationPageClassNames({ isCurrent: false, disabled });\n\n  return (\n    <Text\n      className={classNames(\n        paginationClassNames,\n        styles['PaginationPage--type-ellipsis'],\n        className,\n      )}\n      {...restProps}\n    >\n      &#8230;\n    </Text>\n  );\n};\n"],"names":["PaginationPageEllipsis","className","disabled","restProps","paginationClassNames","usePaginationPageClassNames","isCurrent","Text","classNames"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;;iEAbU;sBACI;sBAEN;0CACuB;AASrC,MAAMA,yBAAyB;QAAC,EACrCC,SAAS,EACTC,QAAQ,EAEoB,WADzBC;QAFHF;QACAC;;IAGA,MAAME,uBAAuBC,IAAAA,qDAA2B,EAAC;QAAEC,WAAW;QAAOJ;IAAS;IAEtF,qBACE,qBAACK,UAAI;QACHN,WAAWO,IAAAA,gBAAU,EACnBJ,2DAEAH;OAEEE,YACL;AAIL"}
+{"version":3,"sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageEllipsis.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../../types';\nimport { Text } from '../../Typography/Text/Text';\nimport { usePaginationPageClassNames } from './usePaginationPageClasses';\nimport styles from './PaginationPage.module.css';\n\nexport interface PaginationPageEllipsisProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    HasRootRef<HTMLSpanElement> {\n  disabled?: boolean;\n}\n\nexport const PaginationPageEllipsis = ({\n  className,\n  disabled,\n  ...restProps\n}: PaginationPageEllipsisProps) => {\n  const paginationClassNames = usePaginationPageClassNames({ isCurrent: false, disabled });\n\n  return (\n    <Text\n      className={classNames(\n        paginationClassNames,\n        styles['PaginationPage--type-ellipsis'],\n        className,\n      )}\n      {...restProps}\n    >\n      &#8230;\n    </Text>\n  );\n};\n"],"names":["PaginationPageEllipsis","className","disabled","restProps","paginationClassNames","usePaginationPageClassNames","isCurrent","Text","classNames"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;;;;;iEAbU;sBACI;sBAEN;0CACuB;AASrC,MAAMA,yBAAyB;QAAC,EACrCC,SAAS,EACTC,QAAQ,EAEoB,WADzBC;QAFHF;QACAC;;IAGA,MAAME,uBAAuBC,IAAAA,qDAA2B,EAAC;QAAEC,WAAW;QAAOJ;IAAS;IAEtF,qBACE,qBAACK,UAAI;QACHN,WAAWO,IAAAA,gBAAU,EACnBJ,2DAEAH;OAEEE;kBACL;;AAIL"}

package/dist/cjs/components/Pagination/PaginationPage/usePaginationPageClasses.d.ts

@@ -1,6 +1,10 @@
+import { SizeTypeValues } from '../../../lib/adaptivity';
 export interface UsePaginationPageClassNamesProps {
     isCurrent?: boolean;
     disabled?: boolean;
 }
+export declare const getPaginationPageClassNames: (opts: UsePaginationPageClassNamesProps & {
+    sizeY?: SizeTypeValues;
+}) => string;
 export declare function usePaginationPageClassNames({ isCurrent, disabled, }: UsePaginationPageClassNamesProps): string;
 //# sourceMappingURL=usePaginationPageClasses.d.ts.map

package/dist/cjs/components/Pagination/PaginationPage/usePaginationPageClasses.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePaginationPageClasses.d.ts","sourceRoot":"","sources":["../../../../../src/components/Pagination/PaginationPage/usePaginationPageClasses.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,gCAAgC;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,SAAS,EACT,QAAQ,GACT,EAAE,gCAAgC,UAUlC"}
+{"version":3,"file":"usePaginationPageClasses.d.ts","sourceRoot":"","sources":["../../../../../src/components/Pagination/PaginationPage/usePaginationPageClasses.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,MAAM,WAAW,gCAAgC;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,2BAA2B,SAChC,gCAAgC,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAA;CAAE,WASpE,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,EAC1C,SAAS,EACT,QAAQ,GACT,EAAE,gCAAgC,UAOlC"}

package/dist/cjs/components/Pagination/PaginationPage/usePaginationPageClasses.js

@@ -2,17 +2,32 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "usePaginationPageClassNames", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getPaginationPageClassNames: function() {
+        return getPaginationPageClassNames;
+    },
+    usePaginationPageClassNames: function() {
         return usePaginationPageClassNames;
     }
 });
 const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../../hooks/useAdaptivity");
+const getPaginationPageClassNames = (opts)=>{
+    return (0, _vkjs.classNames)("vkuiPaginationPage", opts.sizeY == null && "vkuiPaginationPage--sizeY-none", opts.sizeY === 'compact' && "vkuiPaginationPage--sizeY-compact", opts.isCurrent && "vkuiPaginationPage--current", opts.disabled && "vkuiPaginationPage--disabled");
+};
 function usePaginationPageClassNames({ isCurrent, disabled }) {
-    const { sizeY = 'none' } = (0, _useAdaptivity.useAdaptivity)();
-    return (0, _vkjs.classNames)("vkuiPaginationPage", sizeY === 'none' && "vkuiPaginationPage--sizeY-none", sizeY === 'compact' && "vkuiPaginationPage--sizeY-compact", isCurrent && "vkuiPaginationPage--current", disabled && "vkuiPaginationPage--disabled");
+    const { sizeY } = (0, _useAdaptivity.useAdaptivity)();
+    return getPaginationPageClassNames({
+        isCurrent,
+        disabled,
+        sizeY
+    });
 }
 
 //# sourceMappingURL=usePaginationPageClasses.js.map

package/dist/cjs/components/Pagination/PaginationPage/usePaginationPageClasses.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Pagination/PaginationPage/usePaginationPageClasses.ts"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport styles from './PaginationPage.module.css';\n\nexport interface UsePaginationPageClassNamesProps {\n  isCurrent?: boolean;\n  disabled?: boolean;\n}\n\nexport function usePaginationPageClassNames({\n  isCurrent,\n  disabled,\n}: UsePaginationPageClassNamesProps) {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return classNames(\n    styles['PaginationPage'],\n    sizeY === 'none' && styles['PaginationPage--sizeY-none'],\n    sizeY === 'compact' && styles['PaginationPage--sizeY-compact'],\n    isCurrent && styles['PaginationPage--current'],\n    disabled && styles['PaginationPage--disabled'],\n  );\n}\n"],"names":["usePaginationPageClassNames","isCurrent","disabled","sizeY","useAdaptivity","classNames"],"mappings":";;;;+BASgBA;;;eAAAA;;;sBATW;+BACG;AAQvB,SAASA,4BAA4B,EAC1CC,SAAS,EACTC,QAAQ,EACyB;IACjC,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,OAAOC,IAAAA,gBAAU,wBAEfF,UAAU,4CACVA,UAAU,kDACVF,4CACAC;AAEJ"}
+{"version":3,"sources":["../../../../../src/components/Pagination/PaginationPage/usePaginationPageClasses.ts"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeTypeValues } from '../../../lib/adaptivity';\nimport styles from './PaginationPage.module.css';\n\nexport interface UsePaginationPageClassNamesProps {\n  isCurrent?: boolean;\n  disabled?: boolean;\n}\n\nexport const getPaginationPageClassNames = (\n  opts: UsePaginationPageClassNamesProps & { sizeY?: SizeTypeValues },\n) => {\n  return classNames(\n    styles['PaginationPage'],\n    opts.sizeY == null && styles['PaginationPage--sizeY-none'],\n    opts.sizeY === 'compact' && styles['PaginationPage--sizeY-compact'],\n    opts.isCurrent && styles['PaginationPage--current'],\n    opts.disabled && styles['PaginationPage--disabled'],\n  );\n};\n\nexport function usePaginationPageClassNames({\n  isCurrent,\n  disabled,\n}: UsePaginationPageClassNamesProps) {\n  const { sizeY } = useAdaptivity();\n  return getPaginationPageClassNames({\n    isCurrent,\n    disabled,\n    sizeY,\n  });\n}\n"],"names":["getPaginationPageClassNames","usePaginationPageClassNames","opts","classNames","sizeY","isCurrent","disabled","useAdaptivity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUaA,2BAA2B;eAA3BA;;IAYGC,2BAA2B;eAA3BA;;;sBAtBW;+BACG;AASvB,MAAMD,8BAA8B,CACzCE;IAEA,OAAOC,IAAAA,gBAAU,wBAEfD,KAAKE,KAAK,IAAI,0CACdF,KAAKE,KAAK,KAAK,kDACfF,KAAKG,SAAS,mCACdH,KAAKI,QAAQ;AAEjB;AAEO,SAASL,4BAA4B,EAC1CI,SAAS,EACTC,QAAQ,EACyB;IACjC,MAAM,EAAEF,KAAK,EAAE,GAAGG,IAAAA,4BAAa;IAC/B,OAAOP,4BAA4B;QACjCK;QACAC;QACAF;IACF;AACF"}

package/dist/cjs/components/Pagination/utils.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "getPageLabelDefault", {
     }
 });
 function getPageLabelDefault(isCurrent) {
-    return isCurrent ? `Cтраница` : `Перейти на страницу`;
+    return isCurrent ? `Страница` : `Перейти на страницу`;
 }
 
 //# sourceMappingURL=utils.js.map

package/dist/cjs/components/Pagination/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Pagination/utils.ts"],"sourcesContent":["export function getPageLabelDefault(isCurrent: boolean): string {\n  return isCurrent ? `Cтраница` : `Перейти на страницу`;\n}\n"],"names":["getPageLabelDefault","isCurrent"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,oBAAoBC,SAAkB;IACpD,OAAOA,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,mBAAmB,CAAC;AACvD"}
+{"version":3,"sources":["../../../../src/components/Pagination/utils.ts"],"sourcesContent":["export function getPageLabelDefault(isCurrent: boolean): string {\n  return isCurrent ? `Страница` : `Перейти на страницу`;\n}\n"],"names":["getPageLabelDefault","isCurrent"],"rangeMappings":";;;;;;;;;;;;","mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,oBAAoBC,SAAkB;IACpD,OAAOA,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,mBAAmB,CAAC;AACvD"}

package/dist/cjs/components/Panel/Panel.d.ts

@@ -1,11 +1,22 @@
-import * as React from 'react';
 import { NavIdProps } from '../../lib/getNavId';
 import { HTMLAttributesWithRootRef } from '../../types';
 export interface PanelProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {
     centered?: boolean;
+    /**
+     * Тип оформления панели.
+     *
+     * Позволяет переопределить тип оформления панели,
+     * заданный через адаптивность или свойство layout у [AppRoot](https://vkcom.github.io/VKUI/#/AppRoot),
+     * глобально задающим тип оформления макета.
+     *
+     * Если установлен `card` - Panel имеет фон отличный от фона контента.
+     * Позволяет компоненту [Group](https://vkcom.github.io/VKUI/#/Group) со свойством mode='card' точечно выглядеть как карточка.
+     * Тип `plain` — соответствует фону по умолчанию.
+     */
+    mode?: 'plain' | 'card';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Panel
  */
-export declare const Panel: ({ centered, children, nav, ...restProps }: PanelProps) => React.JSX.Element;
+export declare const Panel: ({ centered, children, nav, mode: modeProp, ...restProps }: PanelProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Panel.d.ts.map

package/dist/cjs/components/Panel/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAcxD,MAAM,WAAW,UAAW,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;IACvF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,8CAAuD,UAAU,sBA0BlF,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAoBxD,MAAM,WAAW,UAAW,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;IACvF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,8DAMf,UAAU,4CA2BZ,CAAC"}

package/dist/cjs/components/Panel/Panel.js

@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
@@ -25,28 +26,55 @@ const sizeXClassNames = {
     ['compact']: "vkuiPanel--sizeX-compact",
     ['regular']: "vkuiPanel--sizeX-regular"
 };
+const stylesMode = {
+    none: "vkuiPanel--mode-none",
+    plain: "vkuiPanel--mode-plain",
+    card: "vkuiPanel--mode-card"
+};
 const Panel = (_param)=>{
-    var { centered = false, children, nav } = _param, restProps = _object_without_properties._(_param, [
+    var { centered = false, children, nav, mode: modeProp } = _param, restProps = _object_without_properties._(_param, [
         "centered",
         "children",
-        "nav"
+        "nav",
+        "mode"
     ]);
     const { sizeX = 'none' } = (0, _useAdaptivity.useAdaptivity)();
-    const { layout } = _react.useContext(_AppRootContext.AppRootContext);
-    return /*#__PURE__*/ _react.createElement(_NavIdContext.NavPanelIdContext.Provider, {
-        value: restProps.id || nav
-    }, /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
-        baseClassName: (0, _vkjs.classNames)("vkuiPanel", sizeXClassNames[sizeX], centered && 'vkuiInternalPanel--centered', layout === 'card' && "vkuiPanel--layout-card")
-    }), /*#__PURE__*/ _react.createElement(_Touch.Touch, {
-        Component: _OnboardingTooltipContainer.OnboardingTooltipContainer,
-        className: (0, _vkjs.classNames)("vkuiPanel__in", 'vkuiInternalPanel__in')
-    }, /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiPanel__in-before"
-    }), centered ? /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiPanel__centered"
-    }, children) : children, /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiPanel__in-after"
-    }))));
+    const mode = usePanelMode(modeProp, sizeX);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_NavIdContext.NavPanelIdContext.Provider, {
+        value: restProps.id || nav,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+            baseClassName: (0, _vkjs.classNames)("vkuiPanel", sizeXClassNames[sizeX], centered && 'vkuiInternalPanel--centered', stylesMode[mode]),
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Touch.Touch, {
+                Component: _OnboardingTooltipContainer.OnboardingTooltipContainer,
+                className: (0, _vkjs.classNames)("vkuiPanel__in", 'vkuiInternalPanel__in'),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "vkuiPanel__in-before"
+                    }),
+                    centered ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "vkuiPanel__centered",
+                        children: children
+                    }) : children,
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "vkuiPanel__in-after"
+                    })
+                ]
+            })
+        }))
+    });
 };
+function usePanelMode(modeProp, sizeX) {
+    const { layout } = _react.useContext(_AppRootContext.AppRootContext);
+    if (modeProp) {
+        return modeProp;
+    }
+    if (layout) {
+        return layout;
+    }
+    if (sizeX !== 'none') {
+        return sizeX === 'regular' ? 'card' : 'plain';
+    }
+    return 'none';
+}
 
 //# sourceMappingURL=Panel.js.map