@vkontakte/vkui 5.1.2 → 5.2.1

package/dist/cssm/components/ModalRoot/useModalManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"useModalManager.js","names":["React","ModalType","warnOnce","getNavId","useIsomorphicLayoutEffect","noop","isFunction","getModals","children","Children","toArray","warn","modalTransitionReducer","state","action","type","id","activeModal","nextModal","prevModal","exitingModal","history","isBack","Boolean","includes","splice","indexOf","push","enteringModal","useModalManager","onOpen","onOpened","onClose","onClosed","initModal","modalsState","useRef","current","forEach","Modal","modalProps","props","undefined","dynamicContentHeight","settlingHeight","isMissing","safeActiveModal","useReducer","transitionState","dispatchTransition","process","env","NODE_ENV","isCard","CARD","onEntered","useCallback","modalState","onExited","delayEnter","getModalState","onEnter","onExit","withModalManager","Wrapped","WithModalManager","transitionManager"],"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ModalsState, ModalsStateEntry, ModalType } from './types';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { getNavId } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { noop, isFunction } from '@vkontakte/vkjs';\n\ninterface ModalTransitionState {\n  activeModal?: string | null;\n  enteringModal?: string | null;\n  exitingModal?: string | null;\n\n  history?: string[];\n  isBack?: boolean | null;\n}\n\nexport interface ModalTransitionProps extends ModalTransitionState {\n  onEnter: VoidFunction;\n  onEntered: (id: string | null) => void;\n  onExit: VoidFunction;\n  onExited: (id: string | null) => void;\n  getModalState: (id: string) => ModalsStateEntry;\n  delayEnter: boolean;\n}\n\nfunction getModals(children: React.ReactNode | React.ReactNode[]) {\n  return React.Children.toArray(children) as React.ReactElement[];\n}\n\nconst warn = warnOnce('ModalRoot');\n\nexport function modalTransitionReducer(\n  state: ModalTransitionState,\n  action: {\n    type: 'setActive' | 'entered' | 'exited' | 'inited';\n    id: string | null;\n  },\n): ModalTransitionState {\n  if (action.type === 'setActive' && action.id !== state.activeModal) {\n    const nextModal = action.id;\n    // preserve exiting modal if switching mid-transition\n    const prevModal = state.exitingModal || state.activeModal;\n    let history = state.history ? [...state.history] : [];\n    const isBack = Boolean(nextModal && history.includes(nextModal));\n\n    if (nextModal === null) {\n      history = [];\n    } else if (isBack) {\n      history = history.splice(0, history.indexOf(nextModal) + 1);\n    } else {\n      history.push(nextModal);\n    }\n\n    return {\n      activeModal: nextModal,\n      // not entering yet\n      enteringModal: null,\n      exitingModal: prevModal,\n      history,\n      isBack,\n    };\n  }\n  if (action.type === 'entered' && action.id === state.enteringModal) {\n    return { ...state, enteringModal: null };\n  }\n  if (action.type === 'exited' && action.id === state.exitingModal) {\n    return { ...state, exitingModal: null };\n  }\n  if (action.type === 'inited' && action.id === state.activeModal) {\n    return { ...state, enteringModal: action.id };\n  }\n  return state;\n}\n\n/**\n * Реализует переход модалок. При смене activeModal m1 -> m2:\n * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода\n * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода\n * одновременный переход между ModalPage:\n *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2\n *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации\n * ИЛИ дожидаемся скрытия ModalCard\n *   3b. activeModal: m2, exitingModal: null, enteringModal: m2\n *   4b. enteringModal переходит в null после завершения анимации\n * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен\n */\nexport function useModalManager(\n  activeModal: string | null | undefined,\n  children: React.ReactNode | React.ReactNode[],\n  onOpen: (id: string) => void = noop,\n  onOpened: (id: string) => void = noop,\n  onClose: (id: string) => void = noop,\n  onClosed: (id: string) => void = noop,\n  initModal: (state: ModalsStateEntry) => void = noop,\n): ModalTransitionProps {\n  const modalsState = React.useRef<ModalsState>({}).current;\n  getModals(children).forEach((Modal) => {\n    const modalProps = Modal.props;\n    const id = getNavId(modalProps, warn);\n    const state: ModalsStateEntry = (id !== undefined && modalsState[id]) || {\n      id: id ?? null,\n    };\n\n    state.onOpen = Modal.props.onOpen;\n    state.onOpened = Modal.props.onOpened;\n    state.onClose = Modal.props.onClose;\n    state.onClosed = Modal.props.onClosed;\n    state.dynamicContentHeight = !!modalProps.dynamicContentHeight;\n    // ModalPage props\n    if (typeof modalProps.settlingHeight === 'number') {\n      state.settlingHeight = modalProps.settlingHeight;\n    }\n\n    if (state.id !== null) {\n      modalsState[state.id] = state;\n    }\n  });\n\n  const isMissing = activeModal && !modalsState[activeModal];\n  const safeActiveModal = isMissing ? null : activeModal;\n  const [transitionState, dispatchTransition] = React.useReducer(modalTransitionReducer, {\n    activeModal: safeActiveModal,\n    enteringModal: null,\n    exitingModal: null,\n    history: safeActiveModal ? [safeActiveModal] : [],\n    isBack: false,\n  });\n\n  // Map props to state, render activeModal for init\n  useIsomorphicLayoutEffect(() => {\n    // ignore non-existent activeModal\n    if (process.env.NODE_ENV === 'development' && isMissing) {\n      warn(`Переход невозможен - модальное окно (страница) ${activeModal} не существует`, 'error');\n    }\n    dispatchTransition({ type: 'setActive', id: safeActiveModal ?? null });\n  }, [activeModal]);\n\n  // Init activeModal & set enteringModal\n  useIsomorphicLayoutEffect(() => {\n    if (transitionState.activeModal) {\n      initModal(modalsState[transitionState.activeModal]);\n      dispatchTransition({ type: 'inited', id: transitionState.activeModal });\n    }\n  }, [transitionState.activeModal]);\n\n  const isCard = (id: string | null | undefined) =>\n    id != null && modalsState[id]?.type === ModalType.CARD;\n  const onEntered = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        const modalState = modalsState[id];\n\n        if (isFunction(modalState.onOpened)) {\n          modalState.onOpened();\n        } else if (isFunction(onOpened)) {\n          onOpened(id);\n        }\n      }\n\n      dispatchTransition({ type: 'entered', id });\n    },\n    [modalsState, onOpened],\n  );\n  const onExited = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        const modalState = modalsState[id];\n\n        if (isFunction(modalState.onClosed)) {\n          modalState.onClosed();\n        } else if (isFunction(onClosed)) {\n          onClosed(id);\n        }\n      }\n\n      dispatchTransition({ type: 'exited', id });\n    },\n    [modalsState, onClosed],\n  );\n  const delayEnter = Boolean(\n    transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)),\n  );\n  const getModalState = React.useCallback((id: string) => modalsState[id], [modalsState]);\n\n  function onEnter() {\n    const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n    if (modalState) {\n      if (isFunction(modalState.onOpen)) {\n        modalState.onOpen();\n      } else if (isFunction(onOpen)) {\n        onOpen(modalState.id);\n      }\n    }\n  }\n\n  function onExit() {\n    const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n    if (modalState) {\n      if (isFunction(modalState.onClose)) {\n        modalState.onClose();\n      } else if (isFunction(onClose)) {\n        onClose(modalState.id);\n      }\n    }\n  }\n\n  return {\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    ...transitionState,\n    delayEnter,\n    getModalState,\n  };\n}\n\nexport function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {\n  return function <Props extends ModalTransitionProps>(\n    Wrapped: React.ComponentType<Props>,\n  ): React.ComponentType<\n    Omit<Props, keyof ModalTransitionProps> & {\n      activeModal?: string | null;\n      children?: React.ReactNode;\n    }\n  > {\n    return function WithModalManager(props) {\n      const transitionManager = useModalManager(\n        props.activeModal,\n        props.children,\n        (props as any).onOpen,\n        (props as any).onOpened,\n        (props as any).onClose,\n        (props as any).onClosed,\n        initModal,\n      );\n      return <Wrapped {...(props as any)} {...transitionManager} />;\n    };\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useModalManager.js","names":["React","isFunction","noop","getNavId","useIsomorphicLayoutEffect","warnOnce","ModalType","getModals","children","Children","toArray","warn","modalTransitionReducer","state","action","type","id","activeModal","nextModal","prevModal","exitingModal","history","isBack","Boolean","includes","splice","indexOf","push","enteringModal","useModalManager","onOpen","onOpened","onClose","onClosed","initModal","modalsState","useRef","current","forEach","Modal","modalProps","props","undefined","dynamicContentHeight","settlingHeight","isMissing","safeActiveModal","useReducer","transitionState","dispatchTransition","process","env","NODE_ENV","isCard","CARD","onEntered","useCallback","modalState","onExited","delayEnter","getModalState","onEnter","onExit","withModalManager","Wrapped","WithModalManager","transitionManager"],"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isFunction, noop } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalsState, ModalsStateEntry, ModalType } from './types';\n\ninterface ModalTransitionState {\n  activeModal?: string | null;\n  enteringModal?: string | null;\n  exitingModal?: string | null;\n\n  history?: string[];\n  isBack?: boolean | null;\n}\n\nexport interface ModalTransitionProps extends ModalTransitionState {\n  onEnter: VoidFunction;\n  onEntered: (id: string | null) => void;\n  onExit: VoidFunction;\n  onExited: (id: string | null) => void;\n  getModalState: (id: string) => ModalsStateEntry;\n  delayEnter: boolean;\n}\n\nfunction getModals(children: React.ReactNode | React.ReactNode[]) {\n  return React.Children.toArray(children) as React.ReactElement[];\n}\n\nconst warn = warnOnce('ModalRoot');\n\nexport function modalTransitionReducer(\n  state: ModalTransitionState,\n  action: {\n    type: 'setActive' | 'entered' | 'exited' | 'inited';\n    id: string | null;\n  },\n): ModalTransitionState {\n  if (action.type === 'setActive' && action.id !== state.activeModal) {\n    const nextModal = action.id;\n    // preserve exiting modal if switching mid-transition\n    const prevModal = state.exitingModal || state.activeModal;\n    let history = state.history ? [...state.history] : [];\n    const isBack = Boolean(nextModal && history.includes(nextModal));\n\n    if (nextModal === null) {\n      history = [];\n    } else if (isBack) {\n      history = history.splice(0, history.indexOf(nextModal) + 1);\n    } else {\n      history.push(nextModal);\n    }\n\n    return {\n      activeModal: nextModal,\n      // not entering yet\n      enteringModal: null,\n      exitingModal: prevModal,\n      history,\n      isBack,\n    };\n  }\n  if (action.type === 'entered' && action.id === state.enteringModal) {\n    return { ...state, enteringModal: null };\n  }\n  if (action.type === 'exited' && action.id === state.exitingModal) {\n    return { ...state, exitingModal: null };\n  }\n  if (action.type === 'inited' && action.id === state.activeModal) {\n    return { ...state, enteringModal: action.id };\n  }\n  return state;\n}\n\n/**\n * Реализует переход модалок. При смене activeModal m1 -> m2:\n * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода\n * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода\n * одновременный переход между ModalPage:\n *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2\n *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации\n * ИЛИ дожидаемся скрытия ModalCard\n *   3b. activeModal: m2, exitingModal: null, enteringModal: m2\n *   4b. enteringModal переходит в null после завершения анимации\n * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен\n */\nexport function useModalManager(\n  activeModal: string | null | undefined,\n  children: React.ReactNode | React.ReactNode[],\n  onOpen: (id: string) => void = noop,\n  onOpened: (id: string) => void = noop,\n  onClose: (id: string) => void = noop,\n  onClosed: (id: string) => void = noop,\n  initModal: (state: ModalsStateEntry) => void = noop,\n): ModalTransitionProps {\n  const modalsState = React.useRef<ModalsState>({}).current;\n  getModals(children).forEach((Modal) => {\n    const modalProps = Modal.props;\n    const id = getNavId(modalProps, warn);\n    const state: ModalsStateEntry = (id !== undefined && modalsState[id]) || {\n      id: id ?? null,\n    };\n\n    state.onOpen = Modal.props.onOpen;\n    state.onOpened = Modal.props.onOpened;\n    state.onClose = Modal.props.onClose;\n    state.onClosed = Modal.props.onClosed;\n    state.dynamicContentHeight = !!modalProps.dynamicContentHeight;\n    // ModalPage props\n    if (typeof modalProps.settlingHeight === 'number') {\n      state.settlingHeight = modalProps.settlingHeight;\n    }\n\n    if (state.id !== null) {\n      modalsState[state.id] = state;\n    }\n  });\n\n  const isMissing = activeModal && !modalsState[activeModal];\n  const safeActiveModal = isMissing ? null : activeModal;\n  const [transitionState, dispatchTransition] = React.useReducer(modalTransitionReducer, {\n    activeModal: safeActiveModal,\n    enteringModal: null,\n    exitingModal: null,\n    history: safeActiveModal ? [safeActiveModal] : [],\n    isBack: false,\n  });\n\n  // Map props to state, render activeModal for init\n  useIsomorphicLayoutEffect(() => {\n    // ignore non-existent activeModal\n    if (process.env.NODE_ENV === 'development' && isMissing) {\n      warn(`Переход невозможен - модальное окно (страница) ${activeModal} не существует`, 'error');\n    }\n    dispatchTransition({ type: 'setActive', id: safeActiveModal ?? null });\n  }, [activeModal]);\n\n  // Init activeModal & set enteringModal\n  useIsomorphicLayoutEffect(() => {\n    if (transitionState.activeModal) {\n      initModal(modalsState[transitionState.activeModal]);\n      dispatchTransition({ type: 'inited', id: transitionState.activeModal });\n    }\n  }, [transitionState.activeModal]);\n\n  const isCard = (id: string | null | undefined) =>\n    id != null && modalsState[id]?.type === ModalType.CARD;\n  const onEntered = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        const modalState = modalsState[id];\n\n        if (isFunction(modalState.onOpened)) {\n          modalState.onOpened();\n        } else if (isFunction(onOpened)) {\n          onOpened(id);\n        }\n      }\n\n      dispatchTransition({ type: 'entered', id });\n    },\n    [modalsState, onOpened],\n  );\n  const onExited = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        const modalState = modalsState[id];\n\n        if (isFunction(modalState.onClosed)) {\n          modalState.onClosed();\n        } else if (isFunction(onClosed)) {\n          onClosed(id);\n        }\n      }\n\n      dispatchTransition({ type: 'exited', id });\n    },\n    [modalsState, onClosed],\n  );\n  const delayEnter = Boolean(\n    transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)),\n  );\n  const getModalState = React.useCallback((id: string) => modalsState[id], [modalsState]);\n\n  function onEnter() {\n    const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n    if (modalState) {\n      if (isFunction(modalState.onOpen)) {\n        modalState.onOpen();\n      } else if (isFunction(onOpen)) {\n        onOpen(modalState.id);\n      }\n    }\n  }\n\n  function onExit() {\n    const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n    if (modalState) {\n      if (isFunction(modalState.onClose)) {\n        modalState.onClose();\n      } else if (isFunction(onClose)) {\n        onClose(modalState.id);\n      }\n    }\n  }\n\n  return {\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    ...transitionState,\n    delayEnter,\n    getModalState,\n  };\n}\n\nexport function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {\n  return function <Props extends ModalTransitionProps>(\n    Wrapped: React.ComponentType<Props>,\n  ): React.ComponentType<\n    Omit<Props, keyof ModalTransitionProps> & {\n      activeModal?: string | null;\n      children?: React.ReactNode;\n    }\n  > {\n    return function WithModalManager(props) {\n      const transitionManager = useModalManager(\n        props.activeModal,\n        props.children,\n        (props as any).onOpen,\n        (props as any).onOpened,\n        (props as any).onClose,\n        (props as any).onClosed,\n        initModal,\n      );\n      return <Wrapped {...(props as any)} {...transitionManager} />;\n    };\n  };\n}\n"],"mappings":"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"}

package/dist/cssm/components/NativeSelect/NativeSelect.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { FormFieldProps } from '../FormField/FormField';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
+import { FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
 export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, HasRef<HTMLSelectElement>, HasRootRef<HTMLLabelElement>, HasAlign, Pick<FormFieldProps, 'status'> {
     placeholder?: string;

package/dist/cssm/components/NativeSelect/NativeSelect.js

@@ -1,21 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["style", "defaultValue", "align", "placeholder", "children", "className", "getRef", "getRootRef", "disabled", "multiline", "selectType", "status", "onChange", "value"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
-import { FormField } from '../FormField/FormField';
 import { getPlatformClassName } from '../../helpers/getPlatformClassName';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { getSizeXClassName } from '../../helpers/getSizeXClassName';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { SizeType } from '../../lib/adaptivity';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
+import { FormField } from '../FormField/FormField';
 import { SelectTypography } from '../SelectTypography/SelectTypography';
 import "../Select/Select.module.css";
+var sizeYClassNames = _defineProperty({
+  none: "vkuiSelect--sizeY-none"
+}, SizeType.COMPACT, "vkuiSelect--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
  */
@@ -57,8 +60,8 @@ var NativeSelect = function NativeSelect(_ref) {
     onChange = _useEnsuredControl2[1];
   var selectRef = useExternRef(getRef);
   var _useAdaptivity = useAdaptivity(),
-    sizeX = _useAdaptivity.sizeX,
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   useIsomorphicLayoutEffect(function () {
     var _selectRef$current;
     var selectedOption = (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.options[selectRef.current.selectedIndex];
@@ -69,7 +72,7 @@ var NativeSelect = function NativeSelect(_ref) {
   }, [value, children]);
   return /*#__PURE__*/React.createElement(FormField, {
     Component: "label",
-    className: classNames("vkuiSelect", getPlatformClassName("vkuiSelect", platform), empty && "vkuiSelect--empty", multiline && "vkuiSelect--multiline", align && styles["Select--align-".concat(align)], getSizeXClassName("vkuiSelect", sizeX), getSizeYClassName("vkuiSelect", sizeY), className),
+    className: classNames("vkuiSelect", getPlatformClassName("vkuiSelect", platform), empty && "vkuiSelect--empty", multiline && "vkuiSelect--multiline", align && styles["Select--align-".concat(align)], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
     style: style,
     getRootRef: getRootRef,
     disabled: disabled,

package/dist/cssm/components/NativeSelect/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.js","names":["React","classNames","DropdownIcon","FormField","getPlatformClassName","useIsomorphicLayoutEffect","useEnsuredControl","useExternRef","usePlatform","useAdaptivity","getSizeXClassName","getSizeYClassName","SelectTypography","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","onChangeProp","onChange","valueProp","value","restProps","platform","useState","title","setTitle","empty","setEmpty","selectRef","sizeX","sizeY","selectedOption","current","options","selectedIndex","text","styles"],"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nexport interface NativeSelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'status'> {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  defaultValue = '',\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: NativeSelectProps) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    disabled,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const selectRef = useExternRef(getRef);\n  const { sizeX, sizeY } = useAdaptivity();\n\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      className={classNames(\n        styles['Select'],\n        getPlatformClassName(styles['Select'], platform),\n        empty && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align && styles[`Select--align-${align}`],\n        getSizeXClassName(styles['Select'], sizeX),\n        getSizeYClassName(styles['Select'], sizeY),\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={<DropdownIcon />}\n      status={status}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        className={styles['Select__el']}\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles['Select__container']}>\n        <SelectTypography className={styles['Select__title']} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"mappings":"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"}
+{"version":3,"file":"NativeSelect.js","names":["React","classNames","getPlatformClassName","useAdaptivity","useEnsuredControl","useExternRef","usePlatform","SizeType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","COMPACT","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","onChangeProp","onChange","valueProp","value","restProps","platform","useState","title","setTitle","empty","setEmpty","selectRef","sizeY","selectedOption","current","options","selectedIndex","text","styles","REGULAR"],"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'status'> {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  defaultValue = '',\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: NativeSelectProps) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    disabled,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      className={classNames(\n        styles['Select'],\n        getPlatformClassName(styles['Select'], platform),\n        empty && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align && styles[`Select--align-${align}`],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={<DropdownIcon />}\n      status={status}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        className={styles['Select__el']}\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles['Select__container']}>\n        <SelectTypography className={styles['Select__title']} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"mappings":"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"}

package/dist/cssm/components/Pagination/Pagination.js

@@ -1,15 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["currentPage", "siblingCount", "boundaryCount", "totalPages", "disabled", "getPageAriaLabel", "prevButtonAriaLabel", "nextButtonAriaLabel", "getRootRef", "onChange", "className"];
+var _pageSizeYClassNames;
 import * as React from 'react';
 import { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { usePagination } from '../../hooks/usePagination';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
-import { Tappable } from '../Tappable/Tappable';
+import { SizeType } from '../../lib/adaptivity';
 import { Button } from '../Button/Button';
+import { Tappable } from '../Tappable/Tappable';
 import "./Pagination.module.css";
+var pageSizeYClassNames = (_pageSizeYClassNames = {
+  none: "vkuiPagination__page--sizeY-none"
+}, _defineProperty(_pageSizeYClassNames, SizeType.COMPACT, "vkuiPagination__page--sizeY-compact"), _defineProperty(_pageSizeYClassNames, SizeType.REGULAR, "vkuiPagination__page--sizeY-regular"), _pageSizeYClassNames);
 function getPageAriaLabelDefault(page, isCurrent) {
   return isCurrent ? "".concat(page, " \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430") : "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 ".concat(page, " \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443");
 }
@@ -37,7 +42,8 @@ export var Pagination = function Pagination(_ref) {
     className = _ref.className,
     resetProps = _objectWithoutProperties(_ref, _excluded);
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var pages = usePagination({
     currentPage: currentPage,
     totalPages: totalPages,
@@ -67,7 +73,7 @@ export var Pagination = function Pagination(_ref) {
         return /*#__PURE__*/React.createElement("li", {
           key: page
         }, /*#__PURE__*/React.createElement("div", {
-          className: classNames("vkuiPagination__page", "vkuiPagination__page--type-ellipsis", getSizeYClassName("vkuiPagination__page", sizeY), disabled && "vkuiPagination__page--disabled")
+          className: classNames("vkuiPagination__page", "vkuiPagination__page--type-ellipsis", pageSizeYClassNames[sizeY], disabled && "vkuiPagination__page--disabled")
         }, "..."));
       default:
         {
@@ -75,7 +81,7 @@ export var Pagination = function Pagination(_ref) {
           return /*#__PURE__*/React.createElement("li", {
             key: page
           }, /*#__PURE__*/React.createElement(Tappable, {
-            className: classNames("vkuiPagination__page", getSizeYClassName("vkuiPagination__page", sizeY), _isCurrent && "vkuiPagination__page--current", disabled && "vkuiPagination__page--disabled"),
+            className: classNames("vkuiPagination__page", pageSizeYClassNames[sizeY], _isCurrent && "vkuiPagination__page--current", disabled && "vkuiPagination__page--disabled"),
             activeMode: "vkuiPagination__page--state-active",
             hoverMode: "vkuiPagination__page--state-hover",
             hasActive: !_isCurrent,

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","getSizeYClassName","Tappable","Button","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","className","resetProps","sizeY","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","undefined","map"],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nimport type { HasRootRef } from '../../types';\n\nimport { classNames } from '@vkontakte/vkjs';\n\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\n\nimport { Tappable } from '../Tappable/Tappable';\nimport { Button } from '../Button/Button';\n\nimport styles from './Pagination.module.css';\n\nfunction getPageAriaLabelDefault(page: number, isCurrent: boolean): string {\n  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;\n}\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>,\n    HasRootRef<HTMLElement> {\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   * Переопределение `aria-label` для кнопки навигации назад.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  prevButtonAriaLabel?: string;\n  /**\n   * Переопределение `aria-label` для кнопки навигации вперёд.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  nextButtonAriaLabel?: string;\n  /**\n   * Функция для переопределения и/или локализации `aria-label` атрибута.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageAriaLabel?(page: number, 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  getPageAriaLabel = getPageAriaLabelDefault,\n  prevButtonAriaLabel = 'Перейти на предыдущую страницу',\n  nextButtonAriaLabel = 'Перейти на следующую страницу',\n  getRootRef,\n  onChange,\n  className,\n  ...resetProps\n}: PaginationProps) => {\n  const { sizeY } = useAdaptivity();\n\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              <div\n                className={classNames(\n                  styles['Pagination__page'],\n                  styles['Pagination__page--type-ellipsis'],\n                  getSizeYClassName(styles['Pagination__page'], sizeY),\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n              >\n                ...\n              </div>\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <Tappable\n                className={classNames(\n                  styles['Pagination__page'],\n                  getSizeYClassName(styles['Pagination__page'], sizeY),\n                  isCurrent && styles['Pagination__page--current'],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n                activeMode={styles['Pagination__page--state-active']}\n                hoverMode={styles['Pagination__page--state-hover']}\n                hasActive={!isCurrent}\n                hasHover={!isCurrent}\n                focusVisibleMode=\"outside\"\n                disabled={disabled}\n                data-page={page}\n                aria-current={isCurrent ? true : undefined}\n                aria-label={getPageAriaLabel(page, isCurrent)}\n                onClick={handleClick}\n              >\n                {page}\n              </Tappable>\n            </li>\n          );\n        }\n      }\n    },\n    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick],\n  );\n\n  return (\n    <nav\n      className={classNames(styles['Pagination'], className)}\n      role=\"navigation\"\n      aria-label=\"Навигация по страницам\"\n      ref={getRootRef}\n      {...resetProps}\n    >\n      <ul className={styles['Pagination__list']}>\n        <li className={styles['Pagination__prevButtonContainer']}>\n          <Button\n            size=\"l\"\n            before={<Icon24ChevronCompactLeft width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isFirstPage || disabled}\n            aria-label={prevButtonAriaLabel}\n            onClick={handlePrevClick}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li className={styles['Pagination__nextButtonContainer']}>\n          <Button\n            size=\"l\"\n            after={<Icon24ChevronCompactRight width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isLastPage || disabled}\n            aria-label={nextButtonAriaLabel}\n            onClick={handleNextClick}\n          />\n        </li>\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","SizeType","Button","Tappable","pageSizeYClassNames","none","COMPACT","REGULAR","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","className","resetProps","sizeY","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","undefined","map"],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Pagination.module.css';\n\nconst pageSizeYClassNames = {\n  none: styles['Pagination__page--sizeY-none'],\n  [SizeType.COMPACT]: styles['Pagination__page--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Pagination__page--sizeY-regular'],\n};\n\nfunction getPageAriaLabelDefault(page: number, isCurrent: boolean): string {\n  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;\n}\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>,\n    HasRootRef<HTMLElement> {\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   * Переопределение `aria-label` для кнопки навигации назад.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  prevButtonAriaLabel?: string;\n  /**\n   * Переопределение `aria-label` для кнопки навигации вперёд.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  nextButtonAriaLabel?: string;\n  /**\n   * Функция для переопределения и/или локализации `aria-label` атрибута.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageAriaLabel?(page: number, 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  getPageAriaLabel = getPageAriaLabelDefault,\n  prevButtonAriaLabel = 'Перейти на предыдущую страницу',\n  nextButtonAriaLabel = 'Перейти на следующую страницу',\n  getRootRef,\n  onChange,\n  className,\n  ...resetProps\n}: PaginationProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\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              <div\n                className={classNames(\n                  styles['Pagination__page'],\n                  styles['Pagination__page--type-ellipsis'],\n                  pageSizeYClassNames[sizeY],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n              >\n                ...\n              </div>\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <Tappable\n                className={classNames(\n                  styles['Pagination__page'],\n                  pageSizeYClassNames[sizeY],\n                  isCurrent && styles['Pagination__page--current'],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n                activeMode={styles['Pagination__page--state-active']}\n                hoverMode={styles['Pagination__page--state-hover']}\n                hasActive={!isCurrent}\n                hasHover={!isCurrent}\n                focusVisibleMode=\"outside\"\n                disabled={disabled}\n                data-page={page}\n                aria-current={isCurrent ? true : undefined}\n                aria-label={getPageAriaLabel(page, isCurrent)}\n                onClick={handleClick}\n              >\n                {page}\n              </Tappable>\n            </li>\n          );\n        }\n      }\n    },\n    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick],\n  );\n\n  return (\n    <nav\n      className={classNames(styles['Pagination'], className)}\n      role=\"navigation\"\n      aria-label=\"Навигация по страницам\"\n      ref={getRootRef}\n      {...resetProps}\n    >\n      <ul className={styles['Pagination__list']}>\n        <li className={styles['Pagination__prevButtonContainer']}>\n          <Button\n            size=\"l\"\n            before={<Icon24ChevronCompactLeft width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isFirstPage || disabled}\n            aria-label={prevButtonAriaLabel}\n            onClick={handlePrevClick}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li className={styles['Pagination__nextButtonContainer']}>\n          <Button\n            size=\"l\"\n            after={<Icon24ChevronCompactRight width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isLastPage || disabled}\n            aria-label={nextButtonAriaLabel}\n            onClick={handleNextClick}\n          />\n        </li>\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":"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"}

package/dist/cssm/components/Pagination/Pagination.module.css

@@ -1 +1 @@
-.vkuiPagination__list{display:flex;list-style-type:none;margin:0;padding:0}.vkuiPagination__prevButtonContainer{margin-right:8px}.vkuiPagination__nextButtonContainer{margin-left:8px}.vkuiPagination__page{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;color:#818c99;color:var(--vkui--color_text_secondary);font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);min-width:40px;padding-left:8px;padding-right:8px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.vkuiPagination__page--state-hover{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover)}.vkuiPagination__page--current,.vkuiPagination__page--state-active{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active);color:#000;color:var(--vkui--color_text_primary)}.vkuiPagination__page--disabled{opacity:.4;opacity:var(--vkui--opacity_disable)}.vkuiPagination__page--sizeY-compact{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);height:36px;height:var(--vkui--size_button_large_height--compact);line-height:36px;line-height:var(--vkui--size_button_large_height--compact)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiPagination__page--sizeY-none{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);height:36px;height:var(--vkui--size_button_large_height--compact);line-height:36px;line-height:var(--vkui--size_button_large_height--compact)}}.vkuiPagination__page--sizeY-regular{font-size:16px;font-size:var(--vkui--font_text--font_size--regular);height:44px;height:var(--vkui--size_button_large_height--regular);line-height:44px;line-height:var(--vkui--size_button_large_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiPagination__page--sizeY-none{font-size:16px;font-size:var(--vkui--font_text--font_size--regular);height:44px;height:var(--vkui--size_button_large_height--regular);line-height:44px;line-height:var(--vkui--size_button_large_height--regular)}}.vkuiPagination__page--type-ellipsis{min-width:16px;padding-left:0;padding-right:0}
+.vkuiPagination__list{display:flex;list-style-type:none;margin:0;padding:0}.vkuiPagination__prevButtonContainer{margin-right:8px}.vkuiPagination__nextButtonContainer{margin-left:8px}.vkuiPagination__page{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;color:#818c99;color:var(--vkui--color_text_secondary);font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);min-width:40px;padding-left:8px;padding-right:8px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.vkuiPagination__page--state-hover{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover)}.vkuiPagination__page--current,.vkuiPagination__page--state-active{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active);color:#000;color:var(--vkui--color_text_primary)}.vkuiPagination__page--disabled{opacity:.4;opacity:var(--vkui--opacity_disable)}.vkuiPagination__page--sizeY-compact{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);height:36px;height:var(--vkui--size_button_large_height--compact);line-height:36px;line-height:var(--vkui--size_button_large_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiPagination__page--sizeY-none{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);height:36px;height:var(--vkui--size_button_large_height--compact);line-height:36px;line-height:var(--vkui--size_button_large_height--compact)}}.vkuiPagination__page--sizeY-regular{font-size:16px;font-size:var(--vkui--font_text--font_size--regular);height:44px;height:var(--vkui--size_button_large_height--regular);line-height:44px;line-height:var(--vkui--size_button_large_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiPagination__page--sizeY-none{font-size:16px;font-size:var(--vkui--font_text--font_size--regular);height:44px;height:var(--vkui--size_button_large_height--regular);line-height:44px;line-height:var(--vkui--size_button_large_height--regular)}}.vkuiPagination__page--type-ellipsis{min-width:16px;padding-left:0;padding-right:0}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
 import { NavIdProps } from '../../lib/getNavId';
+import { HasRootRef } from '../../types';
 export interface PanelProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, NavIdProps {
     centered?: boolean;
 }

package/dist/cssm/components/Panel/Panel.js

@@ -1,15 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["centered", "children", "getRootRef", "nav", "className"];
+var _sizeXClassNames;
 import * as React from 'react';
-import { getSizeXClassName } from '../../helpers/getSizeXClassName';
 import { classNames } from '@vkontakte/vkjs';
-import { Touch } from '../Touch/Touch';
-import { TooltipContainer } from '../Tooltip/TooltipContainer';
-import { Platform } from '../../lib/platform';
-import { usePlatform } from '../../hooks/usePlatform';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
+import { Platform } from '../../lib/platform';
+import { TooltipContainer } from '../Tooltip/TooltipContainer';
+import { Touch } from '../Touch/Touch';
 import "./Panel.module.css";
+var sizeXClassNames = (_sizeXClassNames = {
+  none: "vkuiPanel--sizeX-none"
+}, _defineProperty(_sizeXClassNames, SizeType.COMPACT, "vkuiPanel--sizeX-compact"), _defineProperty(_sizeXClassNames, SizeType.REGULAR, "vkuiPanel--sizeX-regular"), _sizeXClassNames);
 /**
  * @see https://vkcom.github.io/VKUI/#/Panel
  */
@@ -23,10 +28,11 @@ export var Panel = function Panel(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
   var _useAdaptivity = useAdaptivity(),
-    sizeX = _useAdaptivity.sizeX;
+    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
+    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     ref: getRootRef,
-    className: classNames("vkuiPanel", getSizeXClassName("vkuiPanel", sizeX), centered && "vkuiPanel--centered", className)
+    className: classNames("vkuiPanel", sizeXClassNames[sizeX], centered && "vkuiPanel--centered", className)
   }), /*#__PURE__*/React.createElement(Touch, {
     Component: TooltipContainer,
     className: "vkuiPanel__in"

package/dist/cssm/components/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":["React","getSizeXClassName","classNames","Touch","TooltipContainer","Platform","usePlatform","useAdaptivity","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","IOS"],"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Touch } from '../Touch/Touch';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { HasRootRef } from '../../types';\nimport { Platform } from '../../lib/platform';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './Panel.module.css';\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        getSizeXClassName(styles['Panel'], sizeX),\n        centered && styles['Panel--centered'],\n        className,\n      )}\n    >\n      <Touch Component={TooltipContainer} className={styles['Panel__in']}>\n        {platform === Platform.IOS && <div className={styles['Panel__fade']} />}\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,gBAAgB,QAAQ,6BAA6B;AAE9D,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,aAAa,QAAQ,2BAA2B;AAAC;AAU1D;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,yBANhBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,GAAG,QAAHA,GAAG;IACHC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAC9B,qBAAkBC,aAAa,EAAE;IAAzBS,KAAK,kBAALA,KAAK;EAEb,oBACE,wCACMF,SAAS;IACb,GAAG,EAAEH,UAAW;IAChB,SAAS,EAAET,UAAU,cAEnBD,iBAAiB,cAAkBe,KAAK,CAAC,EACzCP,QAAQ,yBAA6B,EACrCI,SAAS;EACT,iBAEF,oBAAC,KAAK;IAAC,SAAS,EAAET,gBAAiB;IAAC,SAAS;EAAsB,GAChEW,QAAQ,KAAKV,QAAQ,CAACY,GAAG,iBAAI;IAAK,SAAS;EAAwB,EAAG,eACvE;IAAK,SAAS;EAA6B,EAAG,EAC7CR,QAAQ,gBAAG;IAAK,SAAS;EAA4B,GAAEC,QAAQ,CAAO,GAAGA,QAAQ,eAClF;IAAK,SAAS;EAA4B,EAAG,CACvC,CACJ;AAEV,CAAC"}
+{"version":3,"file":"Panel.js","names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","TooltipContainer","Touch","sizeXClassNames","none","COMPACT","REGULAR","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","IOS"],"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  [SizeType.COMPACT]: styles['Panel--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Panel--sizeX-regular'],\n};\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        sizeXClassNames[sizeX],\n        centered && styles['Panel--centered'],\n        className,\n      )}\n    >\n      <Touch Component={TooltipContainer} className={styles['Panel__in']}>\n        {platform === Platform.IOS && <div className={styles['Panel__fade']} />}\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,KAAK,QAAQ,gBAAgB;AAAC;AAGvC,IAAMC,eAAe;EACnBC,IAAI;AAA6B,qCAChCL,QAAQ,CAACM,OAAO,iEAChBN,QAAQ,CAACO,OAAO,gDAClB;AASD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,yBANhBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,GAAG,QAAHA,GAAG;IACHC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGhB,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlCkB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,wCACMF,SAAS;IACb,GAAG,EAAEH,UAAW;IAChB,SAAS,EAAEd,UAAU,cAEnBO,eAAe,CAACY,KAAK,CAAC,EACtBP,QAAQ,yBAA6B,EACrCI,SAAS;EACT,iBAEF,oBAAC,KAAK;IAAC,SAAS,EAAEX,gBAAiB;IAAC,SAAS;EAAsB,GAChEa,QAAQ,KAAKd,QAAQ,CAACgB,GAAG,iBAAI;IAAK,SAAS;EAAwB,EAAG,eACvE;IAAK,SAAS;EAA6B,EAAG,EAC7CR,QAAQ,gBAAG;IAAK,SAAS;EAA4B,GAAEC,QAAQ,CAAO,GAAGA,QAAQ,eAClF;IAAK,SAAS;EAA4B,EAAG,CACvC,CACJ;AAEV,CAAC"}

package/dist/cssm/components/Panel/Panel.module.css

@@ -1 +1 @@
-.vkuiPanel{height:100%;position:relative;width:100%}.vkuiPanel:before{content:"";height:100%}.vkuiPanel--centered .vkuiPanelHeader,.vkuiPanel:before{left:0;position:absolute;top:0;width:100%}.vkuiPanel__in{box-sizing:border-box;display:flex;flex-direction:column;min-height:100%;position:relative;width:100%}.vkuiPanel__centered{align-items:center;box-sizing:border-box;display:flex;flex:1 0;flex-direction:column;justify-content:center}.vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--vis+*,.vkuiPanel__centered .vkuiPanelHeader--vis+*{margin-top:56px;margin-top:var(--vkui--size_panel_header_height--regular)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media not (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media not (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media not (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiEpic--hasTabbar .vkuiPanel__in{padding-bottom:calc(0px + 48px);padding-bottom:calc(var(--vkui_internal--safe_area_inset_bottom) + var(--vkui_internal--tabbar_height))}.vkuiPanel__in-before{height:1px;margin-bottom:-1px}.vkuiPanel__in-after{height:1px;margin-top:-1px}.vkuiPanel .vkuiPanel__in,.vkuiPanel:before{background-color:#fff;background-color:var(--vkui--color_background_content)}.vkuiPanel.vkuiPanel--sizeX-regular .vkuiPanel__in,.vkuiPanel.vkuiPanel--sizeX-regular:before{background-color:initial}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__in,.vkuiPanel--sizeX-none:before{background-color:initial}}
+.vkuiPanel{height:100%;position:relative;width:100%}.vkuiPanel:before{content:"";height:100%}.vkuiPanel--centered .vkuiPanelHeader,.vkuiPanel:before{left:0;position:absolute;top:0;width:100%}.vkuiPanel__in{box-sizing:border-box;display:flex;flex-direction:column;min-height:100%;position:relative;width:100%}.vkuiPanel__centered{align-items:center;box-sizing:border-box;display:flex;flex:1 0;flex-direction:column;justify-content:center}.vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--vis+*,.vkuiPanel__centered .vkuiPanelHeader--vis+*{margin-top:56px;margin-top:var(--vkui--size_panel_header_height--regular)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767.9px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767.9px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767.9px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiEpic--hasTabbar .vkuiPanel__in{padding-bottom:calc(0px + 48px);padding-bottom:calc(var(--vkui_internal--safe_area_inset_bottom) + var(--vkui_internal--tabbar_height))}.vkuiPanel__in-before{height:1px;margin-bottom:-1px}.vkuiPanel__in-after{height:1px;margin-top:-1px}.vkuiPanel .vkuiPanel__in,.vkuiPanel:before{background-color:#fff;background-color:var(--vkui--color_background_content)}.vkuiPanel.vkuiPanel--sizeX-regular .vkuiPanel__in,.vkuiPanel.vkuiPanel--sizeX-regular:before{background-color:initial}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__in,.vkuiPanel--sizeX-none:before{background-color:initial}}

package/dist/cssm/components/PanelHeader/PanelHeader.js

@@ -2,18 +2,18 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["before", "children", "after", "separator", "visor", "transparent", "shadow", "getRef", "getRootRef", "fixed", "className"];
 import * as React from 'react';
-import { usePlatform } from '../../hooks/usePlatform';
 import { classNames } from '@vkontakte/vkjs';
-import { FixedLayout } from '../FixedLayout/FixedLayout';
-import { Separator } from '../Separator/Separator';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
+import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
 import { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';
-import { Text } from '../Typography/Text/Text';
-import { TooltipContainer } from '../Tooltip/TooltipContainer';
+import { FixedLayout } from '../FixedLayout/FixedLayout';
 import { ModalRootContext } from '../ModalRoot/ModalRootContext';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
+import { Separator } from '../Separator/Separator';
 import { Spacing } from '../Spacing/Spacing';
+import { TooltipContainer } from '../Tooltip/TooltipContainer';
+import { Text } from '../Typography/Text/Text';
 import "./PanelHeader.module.css";
 function getPlatformClassName(platform) {
   switch (platform) {

package/dist/cssm/components/PanelHeader/PanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.js","names":["React","usePlatform","classNames","FixedLayout","Separator","Platform","useConfigProvider","WebviewType","Text","TooltipContainer","ModalRootContext","useAdaptivity","useAdaptivityConditionalRender","Spacing","getPlatformClassName","platform","sizeXClassNames","compact","regular","none","PanelHeaderIn","before","after","separator","children","webviewType","useContext","isInsideModal","VKCOM","INTERNAL","PanelHeader","visor","transparent","shadow","getRef","getRootRef","fixed","className","restProps","sizeX","adaptiveSizeX","isFixed","undefined","VKAPPS"],"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Separator } from '../Separator/Separator';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { Text } from '../Typography/Text/Text';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { Spacing } from '../Spacing/Spacing';\nimport styles from './PanelHeader.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n  switch (platform) {\n    case 'ios':\n      return styles['PanelHeader--ios'];\n    case 'vkcom':\n      return styles['PanelHeader--vkcom'];\n    default:\n      return styles['PanelHeader--android'];\n  }\n}\n\nconst sizeXClassNames = {\n  compact: '',\n  regular: styles['PanelHeader--sizeX-regular'],\n  none: styles['PanelHeader--sizeX-none'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div className={styles['PanelHeader__before']}>{before}</div>\n        <div className={styles['PanelHeader__content']}>\n          {platform === Platform.VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span className={styles['PanelHeader__content-in']}>{children}</span>\n          )}\n        </div>\n        <div className={styles['PanelHeader__after']}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && <Separator wide />}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        getPlatformClassName(platform),\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && styles['PanelHeader--vis'],\n        separator && visor && styles['PanelHeader--sep'],\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PanelHeader.js","names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","Platform","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","getPlatformClassName","platform","sizeXClassNames","compact","regular","none","PanelHeaderIn","before","after","separator","children","webviewType","useContext","isInsideModal","VKCOM","INTERNAL","PanelHeader","visor","transparent","shadow","getRef","getRootRef","fixed","className","restProps","sizeX","adaptiveSizeX","isFixed","undefined","VKAPPS"],"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n  switch (platform) {\n    case 'ios':\n      return styles['PanelHeader--ios'];\n    case 'vkcom':\n      return styles['PanelHeader--vkcom'];\n    default:\n      return styles['PanelHeader--android'];\n  }\n}\n\nconst sizeXClassNames = {\n  compact: '',\n  regular: styles['PanelHeader--sizeX-regular'],\n  none: styles['PanelHeader--sizeX-none'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div className={styles['PanelHeader__before']}>{before}</div>\n        <div className={styles['PanelHeader__content']}>\n          {platform === Platform.VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span className={styles['PanelHeader__content-in']}>{children}</span>\n          )}\n        </div>\n        <div className={styles['PanelHeader__after']}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && <Separator wide />}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        getPlatformClassName(platform),\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && styles['PanelHeader--vis'],\n        separator && visor && styles['PanelHeader--sep'],\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/cssm/components/PanelHeader/PanelHeader.module.css

@@ -1 +1 @@
-.vkuiPanelHeader{position:relative}.vkuiPanelHeader--vis.vkuiPanelHeader--fixed:before{content:"";display:block}.vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed){height:0}.vkuiPanelHeader__fixed{z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader__in{align-items:center;background:#fff;background:var(--vkui--color_background_content);display:flex;justify-content:space-between;position:relative;white-space:nowrap}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:transparent}.vkuiPanelHeader--sizeX-regular .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}@media (min-width:768px){.vkuiPanelHeader--sizeX-none .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}}.vkuiPanelHeader__before{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:#000;color:var(--vkui--color_text_primary);font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_accent);font-weight:500}.vkuiPanelHeader:before,.vkuiPanelHeader__in{height:56px;height:var(--vkui--size_panel_header_height--regular);padding-top:0;padding-top:var(--vkui_internal--safe_area_inset_top)}.vkuiPanelHeader__after{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;justify-content:flex-end}.vkuiPanelHeader--vkapps .vkuiPanelHeader__after{min-width:90px}.vkuiPanelHeader--ios .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 0 4px 4px;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__before .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{opacity:1;text-align:center;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__after{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 4px 4px 0;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__after,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__before,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}.vkuiPanelHeader--android .vkuiPanelHeader__before:not(:empty){padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--android .vkuiSearch,.vkuiPanelHeader--vkcom .vkuiSearch{padding:0 4px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content,.vkuiSplitCol--viewWidth-tabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:16px}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content,.vkuiSplitCol--viewWidth-tabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}}.vkuiPanelHeader--android .vkuiPanelHeader__after:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__after:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{position:relative;z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in):after,.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiModalPageHeader__in):after,.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom .vkuiPanelHeader__before:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__after,.vkuiPanelHeader--vkcom .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0}.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}
+.vkuiPanelHeader{position:relative}.vkuiPanelHeader--vis.vkuiPanelHeader--fixed:before{content:"";display:block}.vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed){height:0}.vkuiPanelHeader__fixed{z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader__in{align-items:center;background:#fff;background:var(--vkui--color_background_content);display:flex;justify-content:space-between;position:relative;white-space:nowrap}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:transparent}.vkuiPanelHeader--sizeX-regular .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}@media (min-width:768px){.vkuiPanelHeader--sizeX-none .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}}.vkuiPanelHeader__before{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:#000;color:var(--vkui--color_text_primary);font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_accent);font-weight:500}.vkuiPanelHeader:before,.vkuiPanelHeader__in{height:56px;height:var(--vkui--size_panel_header_height--regular);padding-top:0;padding-top:var(--vkui_internal--safe_area_inset_top)}.vkuiPanelHeader__after{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;justify-content:flex-end}.vkuiPanelHeader--vkapps .vkuiPanelHeader__after{min-width:90px}.vkuiPanelHeader--ios .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 0 4px 4px;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__before .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{opacity:1;text-align:center;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__after{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 4px 4px 0;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__after,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__before,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}.vkuiPanelHeader--android .vkuiPanelHeader__before:not(:empty){padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--android .vkuiSearch,.vkuiPanelHeader--vkcom .vkuiSearch{padding:0 4px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content,.vkuiSplitCol--viewWidth-tabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:16px}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content,.vkuiSplitCol--viewWidth-tabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}}.vkuiPanelHeader--android .vkuiPanelHeader__after:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__after:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{position:relative;z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in):after,.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiModalPageHeader__in):after,.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom .vkuiPanelHeader__before:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__after,.vkuiPanelHeader--vkcom .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0}.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}

package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["label", "aria-label", "className"];
 import * as React from 'react';
-import { Icon28ChevronBack, Icon28ChevronLeftOutline, Icon28ArrowLeftOutline } from '@vkontakte/icons';
-import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
-import { Platform } from '../../lib/platform';
-import { getSizeXClassName } from '../../helpers/getSizeXClassName';
-import { usePlatform } from '../../hooks/usePlatform';
+import { Icon28ArrowLeftOutline, Icon28ChevronBack, Icon28ChevronLeftOutline } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
+import { Platform } from '../../lib/platform';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 import "./PanelHeaderBack.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack
@@ -21,7 +21,8 @@ export var PanelHeaderBack = function PanelHeaderBack(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
   var _useAdaptivity = useAdaptivity(),
-    sizeX = _useAdaptivity.sizeX;
+    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
+    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
   // так-же label нужно скрывать при platform === Platform.IOS && sizeX === regular
   // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104
   var showLabel = platform === Platform.VKCOM || platform === Platform.IOS;
@@ -35,7 +36,7 @@ export var PanelHeaderBack = function PanelHeaderBack(_ref) {
       break;
   }
   return /*#__PURE__*/React.createElement(PanelHeaderButton, _extends({}, restProps, {
-    className: classNames("vkuiPanelHeaderBack", getSizeXClassName("vkuiPanelHeaderBack", sizeX), platform === Platform.IOS && "vkuiPanelHeaderBack--ios", platform === Platform.VKCOM && "vkuiPanelHeaderBack--vkcom", showLabel && !!label && "vkuiPanelHeaderBack--has-label", className),
+    className: classNames("vkuiPanelHeaderBack", sizeX === SizeType.COMPACT && "vkuiPanelHeaderBack--sizeX-compact", platform === Platform.IOS && "vkuiPanelHeaderBack--ios", platform === Platform.VKCOM && "vkuiPanelHeaderBack--vkcom", showLabel && !!label && "vkuiPanelHeaderBack--has-label", className),
     label: showLabel && label,
     "aria-label": ariaLabel
   }), icon);

package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderBack.js","names":["React","Icon28ChevronBack","Icon28ChevronLeftOutline","Icon28ArrowLeftOutline","PanelHeaderButton","Platform","getSizeXClassName","usePlatform","classNames","useAdaptivity","PanelHeaderBack","label","ariaLabel","className","restProps","platform","sizeX","showLabel","VKCOM","IOS","icon"],"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n  Icon28ArrowLeftOutline,\n} from '@vkontakte/icons';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Platform } from '../../lib/platform';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './PanelHeaderBack.module.css';\n\nexport type PanelHeaderBackProps = PanelHeaderButtonProps & {\n  'aria-label'?: string;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack\n */\nexport const PanelHeaderBack = ({\n  label,\n  'aria-label': ariaLabel = 'Назад',\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n  // так-же label нужно скрывать при platform === Platform.IOS && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel = platform === Platform.VKCOM || platform === Platform.IOS;\n\n  let icon = <Icon28ArrowLeftOutline />;\n  switch (platform) {\n    case Platform.IOS:\n      icon = <Icon28ChevronBack />;\n      break;\n    case Platform.VKCOM:\n      icon = <Icon28ChevronLeftOutline />;\n      break;\n  }\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderBack'],\n        getSizeXClassName(styles['PanelHeaderBack'], sizeX),\n        platform === Platform.IOS && styles['PanelHeaderBack--ios'],\n        platform === Platform.VKCOM && styles['PanelHeaderBack--vkcom'],\n        showLabel && !!label && styles['PanelHeaderBack--has-label'],\n        className,\n      )}\n      label={showLabel && label}\n      aria-label={ariaLabel}\n    >\n      {icon}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,EACjBC,wBAAwB,EACxBC,sBAAsB,QACjB,kBAAkB;AACzB,SAASC,iBAAiB,QAAgC,wCAAwC;AAClG,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AAAC;AAO1D;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAe,OAKE;EAAA,IAJ5BC,KAAK,QAALA,KAAK;IAAA,sBACL,YAAY;IAAEC,SAAS,+BAAG,OAAO;IACjCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGR,WAAW,EAAE;EAC9B,qBAAkBE,aAAa,EAAE;IAAzBO,KAAK,kBAALA,KAAK;EACb;EACA;EACA,IAAMC,SAAS,GAAGF,QAAQ,KAAKV,QAAQ,CAACa,KAAK,IAAIH,QAAQ,KAAKV,QAAQ,CAACc,GAAG;EAE1E,IAAIC,IAAI,gBAAG,oBAAC,sBAAsB,OAAG;EACrC,QAAQL,QAAQ;IACd,KAAKV,QAAQ,CAACc,GAAG;MACfC,IAAI,gBAAG,oBAAC,iBAAiB,OAAG;MAC5B;IACF,KAAKf,QAAQ,CAACa,KAAK;MACjBE,IAAI,gBAAG,oBAAC,wBAAwB,OAAG;MACnC;EAAM;EAGV,oBACE,oBAAC,iBAAiB,eACZN,SAAS;IACb,SAAS,EAAEN,UAAU,wBAEnBF,iBAAiB,wBAA4BU,KAAK,CAAC,EACnDD,QAAQ,KAAKV,QAAQ,CAACc,GAAG,8BAAkC,EAC3DJ,QAAQ,KAAKV,QAAQ,CAACa,KAAK,gCAAoC,EAC/DD,SAAS,IAAI,CAAC,CAACN,KAAK,oCAAwC,EAC5DE,SAAS,CACT;IACF,KAAK,EAAEI,SAAS,IAAIN,KAAM;IAC1B,cAAYC;EAAU,IAErBQ,IAAI,CACa;AAExB,CAAC"}
+{"version":3,"file":"PanelHeaderBack.js","names":["React","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","usePlatform","SizeType","Platform","PanelHeaderButton","PanelHeaderBack","label","ariaLabel","className","restProps","platform","sizeX","showLabel","VKCOM","IOS","icon","COMPACT"],"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport styles from './PanelHeaderBack.module.css';\n\nexport type PanelHeaderBackProps = PanelHeaderButtonProps & {\n  'aria-label'?: string;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack\n */\nexport const PanelHeaderBack = ({\n  label,\n  'aria-label': ariaLabel = 'Назад',\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  // так-же label нужно скрывать при platform === Platform.IOS && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel = platform === Platform.VKCOM || platform === Platform.IOS;\n\n  let icon = <Icon28ArrowLeftOutline />;\n  switch (platform) {\n    case Platform.IOS:\n      icon = <Icon28ChevronBack />;\n      break;\n    case Platform.VKCOM:\n      icon = <Icon28ChevronLeftOutline />;\n      break;\n  }\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderBack'],\n        sizeX === SizeType.COMPACT && styles['PanelHeaderBack--sizeX-compact'],\n        platform === Platform.IOS && styles['PanelHeaderBack--ios'],\n        platform === Platform.VKCOM && styles['PanelHeaderBack--vkcom'],\n        showLabel && !!label && styles['PanelHeaderBack--has-label'],\n        className,\n      )}\n      label={showLabel && label}\n      aria-label={ariaLabel}\n    >\n      {icon}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,kBAAkB;AACzB,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,iBAAiB,QAAgC,wCAAwC;AAAC;AAOnG;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAe,OAKE;EAAA,IAJ5BC,KAAK,QAALA,KAAK;IAAA,sBACL,YAAY;IAAEC,SAAS,+BAAG,OAAO;IACjCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlCW,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB;EACA;EACA,IAAMC,SAAS,GAAGF,QAAQ,KAAKP,QAAQ,CAACU,KAAK,IAAIH,QAAQ,KAAKP,QAAQ,CAACW,GAAG;EAE1E,IAAIC,IAAI,gBAAG,oBAAC,sBAAsB,OAAG;EACrC,QAAQL,QAAQ;IACd,KAAKP,QAAQ,CAACW,GAAG;MACfC,IAAI,gBAAG,oBAAC,iBAAiB,OAAG;MAC5B;IACF,KAAKZ,QAAQ,CAACU,KAAK;MACjBE,IAAI,gBAAG,oBAAC,wBAAwB,OAAG;MACnC;EAAM;EAGV,oBACE,oBAAC,iBAAiB,eACZN,SAAS;IACb,SAAS,EAAEV,UAAU,wBAEnBY,KAAK,KAAKT,QAAQ,CAACc,OAAO,wCAA4C,EACtEN,QAAQ,KAAKP,QAAQ,CAACW,GAAG,8BAAkC,EAC3DJ,QAAQ,KAAKP,QAAQ,CAACU,KAAK,gCAAoC,EAC/DD,SAAS,IAAI,CAAC,CAACN,KAAK,oCAAwC,EAC5DE,SAAS,CACT;IACF,KAAK,EAAEI,SAAS,IAAIN,KAAM;IAC1B,cAAYC;EAAU,IAErBQ,IAAI,CACa;AAExB,CAAC"}