@vkontakte/vkui 7.1.3 → 7.2.0

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

@@ -1,17 +1,17 @@
 .host {
+  overflow: hidden;
+  text-overflow: ellipsis;
   -webkit-user-select: text;
      -moz-user-select: text;
           user-select: text;
-  text-overflow: ellipsis;
-  overflow: hidden;
 }
 
 .header {
   display: block;
   -webkit-margin-after: 2px;
           margin-block-end: 2px;
-  color: var(--vkui--color_text_subhead);
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--vkui--color_text_subhead);
   white-space: nowrap;
 }

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

@@ -1,7 +1,7 @@
 .host {
   position: relative;
-  line-height: 20px;
   font-size: 16px;
+  line-height: 20px;
 }
 
 .alignCenter .el {
@@ -15,13 +15,13 @@
 .el {
   position: relative;
   z-index: var(--vkui_internal--z_index_form_field_element);
-  padding-block: 0;
-  padding-inline: 12px;
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: var(--vkui--size_field_height--regular);
-  box-sizing: border-box;
-  border-radius: inherit;
+  padding-block: 0;
+  padding-inline: 12px;
   color: var(--vkui--color_text_primary);
+  border-radius: inherit;
 }
 
 .sizeYCompact .el {

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

@@ -4,12 +4,12 @@
 }
 
 .mask::after {
-  content: '';
   position: absolute;
-  inline-size: calc(100% - 0.1em);
-  block-size: 1px;
   inset-block-end: 0;
   inset-inline-start: 0;
+  inline-size: calc(100% - 0.1em);
+  block-size: 1px;
+  content: '';
   -webkit-border-after: solid 1px var(--vkui--color_text_secondary);
           border-block-end: solid 1px var(--vkui--color_text_secondary);
 }

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

@@ -1,15 +1,15 @@
 .host {
-  color: var(--vkui_internal--link-color, var(--vkui--color_text_link));
-  border: 0;
-  background: none;
-  margin: 0;
+  display: inline;
   padding: 0;
+  margin: 0;
+  font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-  font-family: inherit;
   line-height: inherit;
+  color: var(--vkui_internal--link-color, var(--vkui--color_text_link));
   text-align: inherit;
-  display: inline;
+  background: none;
+  border: 0;
   border-radius: 0;
 }
 

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

@@ -1,8 +1,8 @@
 .host {
-  border-radius: 4px;
   padding: 2px;
   margin: -2px;
+  color: inherit;
   /* Перебиваем значения браузера */
   background-color: var(--vkui--color_background_accent_themed_alpha);
-  color: inherit;
+  border-radius: 4px;
 }

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

@@ -16,11 +16,11 @@
 }
 
 .middle {
+  display: flex;
   flex: 1;
+  align-items: center;
   min-inline-size: 0;
   overflow: hidden;
-  display: flex;
-  align-items: center;
 }
 
 .content {
@@ -28,15 +28,15 @@
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   word-break: break-word;
+  white-space: nowrap;
 }
 
 .textWrapShort .content {
-  white-space: initial;
   display: -webkit-box;
   max-block-size: 60px;
   -webkit-line-clamp: 3;
+  white-space: initial;
   -webkit-box-orient: vertical;
 }
 
@@ -50,9 +50,9 @@
 }
 
 .after {
+  margin-block: calc(-1 * var(--vkui--spacing_size_2xs));
   -webkit-margin-start: var(--vkui--spacing_size_xl);
           margin-inline-start: var(--vkui--spacing_size_xl);
-  margin-block: calc(-1 * var(--vkui--spacing_size_2xs));
 }
 
 .modeAdd,

package/dist/cssm/components/ModalCard/ModalCard.js

@@ -34,6 +34,7 @@ const warn = warnOnce('ModalCard');
         children: /*#__PURE__*/ _jsx(ModalCardInternal, {
             id: id,
             "aria-labelledby": `${id}-label`,
+            titleId: `${id}-label`,
             ...resolvedProps,
             ...restProps
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\nimport { ModalContext } from '../../context/ModalContext';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useModalManager } from '../ModalRoot/useModalManager';\nimport { ModalCardInternal } from './ModalCardInternal';\nimport type { ModalCardProps } from './types';\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  id: idProp,\n  nav,\n  open = false,\n  modalOverlayTestId,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  keepMounted = false,\n  ...restProps\n}: ModalCardProps): React.ReactNode => {\n  const generatingId = useId();\n  const id = getNavId({ nav, id: idProp }, warn) || generatingId;\n\n  const {\n    mounted,\n    shouldPreserveSnapPoint: excludedProp,\n    ...resolvedProps\n  } = useModalManager({\n    id,\n    open,\n    keepMounted,\n    modalOverlayTestId,\n    noFocusToDialog,\n    onOpen,\n    onOpened,\n    onClose,\n    onClosed,\n  });\n\n  if (mounted === false) {\n    return null;\n  }\n\n  return (\n    <ModalContext.Provider value={id}>\n      <ModalCardInternal\n        id={id}\n        aria-labelledby={`${id}-label`}\n        {...resolvedProps}\n        {...restProps}\n      />\n    </ModalContext.Provider>\n  );\n};\n"],"names":["useId","ModalContext","getNavId","warnOnce","useModalManager","ModalCardInternal","warn","ModalCard","id","idProp","nav","open","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","keepMounted","restProps","generatingId","mounted","shouldPreserveSnapPoint","excludedProp","resolvedProps","Provider","value","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,KAAK,QAAQ,QAAQ;AAC9B,SAASC,YAAY,QAAQ,gCAA6B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,eAAe,QAAQ,kCAA+B;AAC/D,SAASC,iBAAiB,QAAQ,yBAAsB;AAGxD,MAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMI,YAAY,CAAC,EACxBC,IAAIC,MAAM,EACVC,GAAG,EACHC,OAAO,KAAK,EACZC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,cAAc,KAAK,EACnB,GAAGC,WACY;IACf,MAAMC,eAAepB;IACrB,MAAMQ,KAAKN,SAAS;QAAEQ;QAAKF,IAAIC;IAAO,GAAGH,SAASc;IAElD,MAAM,EACJC,OAAO,EACPC,yBAAyBC,YAAY,EACrC,GAAGC,eACJ,GAAGpB,gBAAgB;QAClBI;QACAG;QACAO;QACAN;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,IAAII,YAAY,OAAO;QACrB,OAAO;IACT;IAEA,qBACE,KAACpB,aAAawB,QAAQ;QAACC,OAAOlB;kBAC5B,cAAA,KAACH;YACCG,IAAIA;YACJmB,mBAAiB,GAAGnB,GAAG,MAAM,CAAC;YAC7B,GAAGgB,aAAa;YAChB,GAAGL,SAAS;;;AAIrB,EAAE"}
+{"version":3,"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\nimport { ModalContext } from '../../context/ModalContext';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useModalManager } from '../ModalRoot/useModalManager';\nimport { ModalCardInternal } from './ModalCardInternal';\nimport type { ModalCardProps } from './types';\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  id: idProp,\n  nav,\n  open = false,\n  modalOverlayTestId,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  keepMounted = false,\n  ...restProps\n}: ModalCardProps): React.ReactNode => {\n  const generatingId = useId();\n  const id = getNavId({ nav, id: idProp }, warn) || generatingId;\n\n  const {\n    mounted,\n    shouldPreserveSnapPoint: excludedProp,\n    ...resolvedProps\n  } = useModalManager({\n    id,\n    open,\n    keepMounted,\n    modalOverlayTestId,\n    noFocusToDialog,\n    onOpen,\n    onOpened,\n    onClose,\n    onClosed,\n  });\n\n  if (mounted === false) {\n    return null;\n  }\n\n  return (\n    <ModalContext.Provider value={id}>\n      <ModalCardInternal\n        id={id}\n        aria-labelledby={`${id}-label`}\n        titleId={`${id}-label`}\n        {...resolvedProps}\n        {...restProps}\n      />\n    </ModalContext.Provider>\n  );\n};\n"],"names":["useId","ModalContext","getNavId","warnOnce","useModalManager","ModalCardInternal","warn","ModalCard","id","idProp","nav","open","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","keepMounted","restProps","generatingId","mounted","shouldPreserveSnapPoint","excludedProp","resolvedProps","Provider","value","aria-labelledby","titleId"],"mappings":"AAAA;;AAEA,SAASA,KAAK,QAAQ,QAAQ;AAC9B,SAASC,YAAY,QAAQ,gCAA6B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,eAAe,QAAQ,kCAA+B;AAC/D,SAASC,iBAAiB,QAAQ,yBAAsB;AAGxD,MAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMI,YAAY,CAAC,EACxBC,IAAIC,MAAM,EACVC,GAAG,EACHC,OAAO,KAAK,EACZC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,cAAc,KAAK,EACnB,GAAGC,WACY;IACf,MAAMC,eAAepB;IACrB,MAAMQ,KAAKN,SAAS;QAAEQ;QAAKF,IAAIC;IAAO,GAAGH,SAASc;IAElD,MAAM,EACJC,OAAO,EACPC,yBAAyBC,YAAY,EACrC,GAAGC,eACJ,GAAGpB,gBAAgB;QAClBI;QACAG;QACAO;QACAN;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,IAAII,YAAY,OAAO;QACrB,OAAO;IACT;IAEA,qBACE,KAACpB,aAAawB,QAAQ;QAACC,OAAOlB;kBAC5B,cAAA,KAACH;YACCG,IAAIA;YACJmB,mBAAiB,GAAGnB,GAAG,MAAM,CAAC;YAC9BoB,SAAS,GAAGpB,GAAG,MAAM,CAAC;YACrB,GAAGgB,aAAa;YAChB,GAAGL,SAAS;;;AAIrB,EAAE"}

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

@@ -1,7 +1,7 @@
 .host {
+  inline-size: 100%;
   padding: var(--vkui--spacing_size_m);
   margin-inline: auto;
-  inline-size: 100%;
 }
 
 .host:focus {
@@ -27,13 +27,13 @@
   --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
 
   position: absolute;
-  inset-inline: 0;
   inset-block-end: 0;
+  inset-inline: 0;
+  box-sizing: border-box;
   -webkit-margin-after: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
           margin-block-end: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
   transform: translate3d(0, calc(100% - var(--vkui_internal_ModalCard--translateY)), 0);
   transition: transform 0.4s var(--vkui_internal--spring-easing);
-  box-sizing: border-box;
 }
 
 .hostMobile.hostStateEnter {
@@ -58,10 +58,10 @@
 /* Desktop */
 
 .hostDesktop {
+  box-sizing: content-box;
   margin-block: auto;
   opacity: 1;
   transition: opacity 340ms var(--vkui--animation_easing_platform);
-  box-sizing: content-box;
 }
 
 .hostDesktop.hostStateEnter {

package/dist/cssm/components/ModalCard/ModalCardInternal.js

@@ -32,7 +32,7 @@ const transitionStateClassNames = {
  * В компоненте заложена вся логика модального окна.
  *
  * @private
- */ export const ModalCardInternal = ({ icon, title, titleComponent, description, descriptionComponent, children, actions, size, open, style: styleProp, className, preventClose, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalDismissButtonTestId, getRootRef, dismissButtonMode, dismissLabel, noFocusToDialog, onOpen, onOpened, onClose = noop, onClosed, disableFocusTrap, ...restProps })=>{
+ */ export const ModalCardInternal = ({ icon, title, titleComponent, description, descriptionComponent, children, actions, size, open, style: styleProp, className, preventClose, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalDismissButtonTestId, getRootRef, dismissButtonMode, dismissLabel, noFocusToDialog, restoreFocus, onOpen, onOpened, onClose = noop, onClosed, disableFocusTrap, ...restProps })=>{
     const platform = usePlatform();
     const [transitionState, { ref, onTransitionEnd }] = useCSSTransition(open, {
         enableAppear: true,
@@ -85,7 +85,8 @@ const transitionStateClassNames = {
     useScrollLock(!hidden);
     useFocusTrap(ref, {
         autoFocus: !noFocusToDialog,
-        disabled: !opened || hidden || disableFocusTrap
+        disabled: !opened || hidden || disableFocusTrap,
+        restoreFocus
     });
     return /*#__PURE__*/ _jsxs(ModalOutlet, {
         hidden: hidden,

package/dist/cssm/components/ModalCard/ModalCardInternal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalCard/ModalCardInternal.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentType, type KeyboardEvent, type ReactNode, useCallback } from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';\nimport { useBottomSheet } from '../../lib/sheet';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ModalCardBase } from '../ModalCardBase/ModalCardBase';\nimport { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n  ModalOverlay as ModalOverlayDefault,\n  type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport type { ModalCardProps } from './types';\nimport styles from './ModalCard.module.css';\n\nconst sizeByPlatformClassNames = {\n  vkcom: styles['hostMaxWidthS'],\n  ios: styles['hostMaxWidthM'],\n  android: styles['hostMaxWidthL'],\n};\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['hostStateEnter'],\n  appearing: styles['hostStateEntering'],\n\n  enter: styles['hostStateEnter'],\n  entering: styles['hostStateEntering'],\n\n  exiting: styles['hostStateExiting'],\n  exited: styles['hostStateExited'],\n};\n\nexport interface ModalCardInternalProps extends Omit<ModalCardProps, 'nav' | 'keepMounted'> {\n  ModalOverlay?: ComponentType<ModalOverlayProps>;\n}\n\n/**\n * В компоненте заложена вся логика модального окна.\n *\n * @private\n */\nexport const ModalCardInternal = ({\n  icon,\n  title,\n  titleComponent,\n  description,\n  descriptionComponent,\n  children,\n  actions,\n  size,\n  open,\n  style: styleProp,\n  className,\n  preventClose,\n  ModalOverlay = ModalOverlayDefault,\n  modalOverlayTestId,\n  modalDismissButtonTestId,\n  getRootRef,\n  dismissButtonMode,\n  dismissLabel,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose = noop,\n  onClosed,\n  disableFocusTrap,\n  ...restProps\n}: ModalCardInternalProps): ReactNode => {\n  const platform = usePlatform();\n  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {\n    enableAppear: true,\n    onEnter() {\n      onOpen?.();\n    },\n    onEntered() {\n      onOpened?.();\n    },\n    onExited() {\n      onClosed?.();\n    },\n  });\n  const opened = transitionState === 'appeared' || transitionState === 'entered';\n  const hidden = transitionState === 'exited';\n  const closable = !preventClose && opened;\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';\n\n  const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);\n  const [{ setSheetEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(\n    bottomSheetEnabled,\n    {\n      blocked: keyboardOpened,\n      snapPoint: 'auto',\n      sheetCSSProperty: '--vkui_internal_ModalCard--translateY',\n      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n      onDismiss() {\n        onClose?.('swipe-down');\n      },\n    },\n  );\n  const handleRef = useExternRef<HTMLDivElement>(setSheetEl, ref, getRootRef);\n  const style = keyboardOpened\n    ? {\n        ...styleProp,\n        '--vkui_internal_ModalCard--safeAreaInsetBottom': '0px',\n      }\n    : styleProp;\n  const modalOverlay = (\n    <ModalOverlay\n      getRootRef={setBackdropEl}\n      data-testid={modalOverlayTestId}\n      visible={open}\n      onClick={\n        closable\n          ? function handleBackdropClick(event) {\n              onClose('click-overlay', event);\n            }\n          : undefined\n      }\n    />\n  );\n  const handleEscKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (closable && pressedKey(event) === Keys.ESCAPE) {\n        onClose('escape-key');\n      }\n    },\n    [closable, onClose],\n  );\n\n  useScrollLock(!hidden);\n  useFocusTrap(ref, {\n    autoFocus: !noFocusToDialog,\n    disabled: !opened || hidden || disableFocusTrap,\n  });\n\n  return (\n    <ModalOutlet hidden={hidden} isDesktop={isDesktop} onKeyDown={handleEscKeyDown}>\n      {modalOverlay}\n      <ModalCardBase\n        {...restProps}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        getRootRef={handleRef}\n        style={style}\n        className={classNames(\n          styles.host,\n          isDesktop ? styles.hostDesktop : styles.hostMobile,\n          sizeByPlatformClassNames[platform],\n          transitionStateClassNames[transitionState],\n          className,\n        )}\n        onTransitionEnd={onTransitionEnd}\n        {...bottomSheetEventHandlers}\n        icon={icon}\n        title={title}\n        titleComponent={titleComponent}\n        description={description}\n        descriptionComponent={descriptionComponent}\n        actions={actions}\n        onClose={() => onClose('click-close-button')}\n        size={size}\n        modalDismissButtonTestId={modalDismissButtonTestId}\n        dismissButtonMode={dismissButtonMode}\n        dismissLabel={dismissLabel}\n      >\n        {children}\n      </ModalCardBase>\n    </ModalOutlet>\n  );\n};\n"],"names":["useCallback","classNames","noop","useAdaptivityWithJSMediaQueries","useExternRef","useFocusTrap","usePlatform","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","useBottomSheet","useScrollLock","ModalCardBase","ModalOutlet","ModalOverlay","ModalOverlayDefault","styles","sizeByPlatformClassNames","vkcom","ios","android","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalCardInternal","icon","title","titleComponent","description","descriptionComponent","children","actions","size","open","style","styleProp","className","preventClose","modalOverlayTestId","modalDismissButtonTestId","getRootRef","dismissButtonMode","dismissLabel","noFocusToDialog","onOpen","onOpened","onClose","onClosed","disableFocusTrap","restProps","platform","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","isDesktop","bottomSheetEnabled","keyboardOpened","setSheetEl","setBackdropEl","bottomSheetEventHandlers","blocked","snapPoint","sheetCSSProperty","backdropCSSProperty","onDismiss","handleRef","modalOverlay","data-testid","visible","onClick","handleBackdropClick","event","undefined","handleEscKeyDown","ESCAPE","autoFocus","disabled","onKeyDown","tabIndex","role","aria-modal","host","hostDesktop","hostMobile"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ModalCard/ModalCardInternal.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentType, type KeyboardEvent, type ReactNode, useCallback } from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';\nimport { useBottomSheet } from '../../lib/sheet';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ModalCardBase } from '../ModalCardBase/ModalCardBase';\nimport { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n  ModalOverlay as ModalOverlayDefault,\n  type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport type { ModalCardProps } from './types';\nimport styles from './ModalCard.module.css';\n\nconst sizeByPlatformClassNames = {\n  vkcom: styles['hostMaxWidthS'],\n  ios: styles['hostMaxWidthM'],\n  android: styles['hostMaxWidthL'],\n};\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['hostStateEnter'],\n  appearing: styles['hostStateEntering'],\n\n  enter: styles['hostStateEnter'],\n  entering: styles['hostStateEntering'],\n\n  exiting: styles['hostStateExiting'],\n  exited: styles['hostStateExited'],\n};\n\nexport interface ModalCardInternalProps extends Omit<ModalCardProps, 'nav' | 'keepMounted'> {\n  ModalOverlay?: ComponentType<ModalOverlayProps>;\n}\n\n/**\n * В компоненте заложена вся логика модального окна.\n *\n * @private\n */\nexport const ModalCardInternal = ({\n  icon,\n  title,\n  titleComponent,\n  description,\n  descriptionComponent,\n  children,\n  actions,\n  size,\n  open,\n  style: styleProp,\n  className,\n  preventClose,\n  ModalOverlay = ModalOverlayDefault,\n  modalOverlayTestId,\n  modalDismissButtonTestId,\n  getRootRef,\n  dismissButtonMode,\n  dismissLabel,\n  noFocusToDialog,\n  restoreFocus,\n  onOpen,\n  onOpened,\n  onClose = noop,\n  onClosed,\n  disableFocusTrap,\n  ...restProps\n}: ModalCardInternalProps): ReactNode => {\n  const platform = usePlatform();\n  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {\n    enableAppear: true,\n    onEnter() {\n      onOpen?.();\n    },\n    onEntered() {\n      onOpened?.();\n    },\n    onExited() {\n      onClosed?.();\n    },\n  });\n  const opened = transitionState === 'appeared' || transitionState === 'entered';\n  const hidden = transitionState === 'exited';\n  const closable = !preventClose && opened;\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';\n\n  const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);\n  const [{ setSheetEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(\n    bottomSheetEnabled,\n    {\n      blocked: keyboardOpened,\n      snapPoint: 'auto',\n      sheetCSSProperty: '--vkui_internal_ModalCard--translateY',\n      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n      onDismiss() {\n        onClose?.('swipe-down');\n      },\n    },\n  );\n  const handleRef = useExternRef<HTMLDivElement>(setSheetEl, ref, getRootRef);\n  const style = keyboardOpened\n    ? {\n        ...styleProp,\n        '--vkui_internal_ModalCard--safeAreaInsetBottom': '0px',\n      }\n    : styleProp;\n  const modalOverlay = (\n    <ModalOverlay\n      getRootRef={setBackdropEl}\n      data-testid={modalOverlayTestId}\n      visible={open}\n      onClick={\n        closable\n          ? function handleBackdropClick(event) {\n              onClose('click-overlay', event);\n            }\n          : undefined\n      }\n    />\n  );\n  const handleEscKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (closable && pressedKey(event) === Keys.ESCAPE) {\n        onClose('escape-key');\n      }\n    },\n    [closable, onClose],\n  );\n\n  useScrollLock(!hidden);\n  useFocusTrap(ref, {\n    autoFocus: !noFocusToDialog,\n    disabled: !opened || hidden || disableFocusTrap,\n    restoreFocus,\n  });\n\n  return (\n    <ModalOutlet hidden={hidden} isDesktop={isDesktop} onKeyDown={handleEscKeyDown}>\n      {modalOverlay}\n      <ModalCardBase\n        {...restProps}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        getRootRef={handleRef}\n        style={style}\n        className={classNames(\n          styles.host,\n          isDesktop ? styles.hostDesktop : styles.hostMobile,\n          sizeByPlatformClassNames[platform],\n          transitionStateClassNames[transitionState],\n          className,\n        )}\n        onTransitionEnd={onTransitionEnd}\n        {...bottomSheetEventHandlers}\n        icon={icon}\n        title={title}\n        titleComponent={titleComponent}\n        description={description}\n        descriptionComponent={descriptionComponent}\n        actions={actions}\n        onClose={() => onClose('click-close-button')}\n        size={size}\n        modalDismissButtonTestId={modalDismissButtonTestId}\n        dismissButtonMode={dismissButtonMode}\n        dismissLabel={dismissLabel}\n      >\n        {children}\n      </ModalCardBase>\n    </ModalOutlet>\n  );\n};\n"],"names":["useCallback","classNames","noop","useAdaptivityWithJSMediaQueries","useExternRef","useFocusTrap","usePlatform","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","useBottomSheet","useScrollLock","ModalCardBase","ModalOutlet","ModalOverlay","ModalOverlayDefault","styles","sizeByPlatformClassNames","vkcom","ios","android","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalCardInternal","icon","title","titleComponent","description","descriptionComponent","children","actions","size","open","style","styleProp","className","preventClose","modalOverlayTestId","modalDismissButtonTestId","getRootRef","dismissButtonMode","dismissLabel","noFocusToDialog","restoreFocus","onOpen","onOpened","onClose","onClosed","disableFocusTrap","restProps","platform","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","isDesktop","bottomSheetEnabled","keyboardOpened","setSheetEl","setBackdropEl","bottomSheetEventHandlers","blocked","snapPoint","sheetCSSProperty","backdropCSSProperty","onDismiss","handleRef","modalOverlay","data-testid","visible","onClick","handleBackdropClick","event","undefined","handleEscKeyDown","ESCAPE","autoFocus","disabled","onKeyDown","tabIndex","role","aria-modal","host","hostDesktop","hostMobile"],"mappings":"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"}

package/dist/cssm/components/ModalCard/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalCard/types.ts"],"sourcesContent":["import type { UIEvent } from 'react';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport type { NavIdProps } from '../../lib/getNavId';\nimport type { UseBottomSheetHandlers } from '../../lib/sheet';\nimport type { ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\n\nexport type ModalCardCloseReason =\n  | 'click-overlay'\n  | 'click-close-button'\n  | 'escape-key'\n  | 'swipe-down';\n\nexport interface ModalCardProps\n  extends NavIdProps,\n    Omit<ModalCardBaseProps, 'id' | 'onClose' | 'onTransitionEnd' | keyof UseBottomSheetHandlers> {\n  /**\n   * Состояние видимости.\n   *\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Сохранять ли компонент в DOM при `open={false}`.\n   *\n   * @default false\n   */\n  keepMounted?: boolean;\n  /**\n   * Отключает фокус на интерактивный элемент после открытия модалки.\n   */\n  noFocusToDialog?: boolean;\n  /**\n   * `data-testid` для оверлея.\n   */\n  modalOverlayTestId?: string;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: (reason: ModalCardCloseReason, event?: UIEvent<HTMLElement>) => void;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Позволяет отключить захват фокуса.\n   *\n   * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали\n   */\n  disableFocusTrap?: UseFocusTrapProps['disabled'];\n}\n"],"names":[],"mappings":"AAYA,WA6CC"}
+{"version":3,"sources":["../../../../src/components/ModalCard/types.ts"],"sourcesContent":["import type { UIEvent } from 'react';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport type { NavIdProps } from '../../lib/getNavId';\nimport type { UseBottomSheetHandlers } from '../../lib/sheet';\nimport type { ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\n\nexport type ModalCardCloseReason =\n  | 'click-overlay'\n  | 'click-close-button'\n  | 'escape-key'\n  | 'swipe-down';\n\nexport interface ModalCardProps\n  extends NavIdProps,\n    Omit<ModalCardBaseProps, 'id' | 'onClose' | 'onTransitionEnd' | keyof UseBottomSheetHandlers>,\n    Pick<UseFocusTrapProps, 'restoreFocus'> {\n  /**\n   * Состояние видимости.\n   *\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Сохранять ли компонент в DOM при `open={false}`.\n   *\n   * @default false\n   */\n  keepMounted?: boolean;\n  /**\n   * Отключает фокус на интерактивный элемент после открытия модалки.\n   */\n  noFocusToDialog?: boolean;\n  /**\n   * `data-testid` для оверлея.\n   */\n  modalOverlayTestId?: string;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: (reason: ModalCardCloseReason, event?: UIEvent<HTMLElement>) => void;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Позволяет отключить захват фокуса.\n   *\n   * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали\n   */\n  disableFocusTrap?: UseFocusTrapProps['disabled'];\n}\n"],"names":[],"mappings":"AAYA,WA8CC"}

package/dist/cssm/components/ModalCardBase/ModalCardBase.js

@@ -1,19 +1,23 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Icon20Cancel, Icon24Dismiss } from "@vkontakte/icons";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { AdaptivityContext } from "../AdaptivityProvider/AdaptivityContext.js";
+import { ModalOutsideButton } from "../ModalOutsideButton/ModalOutsideButton.js";
+import { ModalOutsideButtons } from "../ModalOutsideButtons/ModalOutsideButtons.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { Spacing } from "../Spacing/Spacing.js";
+import { Tappable } from "../Tappable/Tappable.js";
 import { Subhead } from "../Typography/Subhead/Subhead.js";
 import { Title } from "../Typography/Title/Title.js";
-import { ModalCardBaseCloseButton } from "./ModalCardBaseCloseButton.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import styles from "./ModalCardBase.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCardBase
- */ export const ModalCardBase = ({ icon, title, titleComponent = 'span', description, descriptionComponent = 'span', children, actions, onClose, dismissLabel = 'Скрыть', size: sizeProp, modalDismissButtonTestId, dismissButtonMode = 'outside', preventClose, ...restProps })=>{
+ */ export const ModalCardBase = ({ icon, title, titleComponent = 'span', description, descriptionComponent = 'span', children, actions, onClose, dismissLabel = 'Закрыть', size: sizeProp, modalDismissButtonTestId, dismissButtonMode = 'outside', preventClose, outsideButtons, titleId, ...restProps })=>{
     const platform = usePlatform();
     const { isDesktop } = useAdaptivityWithJSMediaQueries();
     const size = isDesktop ? sizeProp : undefined;
@@ -34,6 +38,7 @@ import styles from "./ModalCardBase.module.css";
                     children: icon
                 }),
                 hasReactNode(title) && /*#__PURE__*/ _jsx(Title, {
+                    id: titleId,
                     level: "2",
                     weight: "2",
                     className: styles.title,
@@ -58,11 +63,29 @@ import styles from "./ModalCardBase.module.css";
                     className: styles.actions,
                     children: actions
                 }),
-                dismissButtonMode !== 'none' && /*#__PURE__*/ _jsx(ModalCardBaseCloseButton, {
-                    testId: modalDismissButtonTestId,
-                    onClose: onClose,
-                    mode: dismissButtonMode,
-                    children: dismissLabel
+                isDesktop && (dismissButtonMode === 'outside' || outsideButtons) && /*#__PURE__*/ _jsxs(ModalOutsideButtons, {
+                    children: [
+                        dismissButtonMode === 'outside' && /*#__PURE__*/ _jsx(ModalOutsideButton, {
+                            "aria-label": dismissLabel,
+                            "data-testid": modalDismissButtonTestId,
+                            onClick: onClose,
+                            children: /*#__PURE__*/ _jsx(Icon20Cancel, {})
+                        }),
+                        outsideButtons
+                    ]
+                }),
+                (dismissButtonMode === 'inside' || platform === 'ios' && !isDesktop && dismissButtonMode !== 'none') && /*#__PURE__*/ _jsxs(Tappable, {
+                    className: styles.dismiss,
+                    onClick: onClose,
+                    hoverMode: "opacity",
+                    activeMode: "opacity",
+                    "data-testid": modalDismissButtonTestId,
+                    children: [
+                        /*#__PURE__*/ _jsx(VisuallyHidden, {
+                            children: dismissLabel
+                        }),
+                        platform === 'ios' ? /*#__PURE__*/ _jsx(Icon24Dismiss, {}) : /*#__PURE__*/ _jsx(Icon20Cancel, {})
+                    ]
                 })
             ]
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport { ModalCardBaseCloseButton } from './ModalCardBaseCloseButton';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'title'> {\n  /**\n   * Иконка.\n   *\n   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Заголовок карточки\n   */\n  title?: React.ReactNode;\n  /* Позволяет поменять тег используемый для заголовка */\n  titleComponent?: React.ElementType;\n\n  /**\n   * Описание\n   */\n  description?: React.ReactNode;\n  /* Позволяет поменять тег используемый для описания */\n  descriptionComponent?: React.ElementType;\n\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `size=\"l\" mode=\"primary\" stretched`\n   * - `size=\"l\" mode=\"secondary\" stretched`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"s\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n\n  onClose?: VoidFunction;\n\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: number;\n\n  /**\n   * Передает атрибут `data-testid` для кнопки закрытия\n   */\n  modalDismissButtonTestId?: string;\n  /**\n   * Расположение кнопки закрытия (внутри и вне `popout'a`)\n   *\n   * Доступно только в `compact`-режиме\n   *\n   * На `iOS` в `regular`-режиме всегда включен `inside`\n   *\n   * ⚠️ ВНИМАНИЕ: использование `none` скрывает крестик, это негативно сказывается на пользовательском опыте\n   */\n  dismissButtonMode?: 'inside' | 'outside' | 'none';\n  /**\n   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n   *\n   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n   */\n  preventClose?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n  icon,\n  title,\n  titleComponent = 'span',\n  description,\n  descriptionComponent = 'span',\n  children,\n  actions,\n  onClose,\n  dismissLabel = 'Скрыть',\n  size: sizeProp,\n  modalDismissButtonTestId,\n  dismissButtonMode = 'outside',\n  preventClose,\n  ...restProps\n}: ModalCardBaseProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  const size = isDesktop ? sizeProp : undefined;\n  const withSafeZone =\n    !icon &&\n    (dismissButtonMode === 'inside' ||\n      (platform === 'ios' && !isDesktop && dismissButtonMode !== 'none'));\n\n  const hasTitle = hasReactNode(title);\n  const hasDescription = hasReactNode(description);\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        'vkuiInternalModalCardBase',\n        platform === 'ios' && styles.ios,\n        isDesktop && styles.desktop,\n        withSafeZone && styles.withSafeZone,\n      )}\n      baseStyle={{\n        maxWidth: size,\n      }}\n    >\n      <div className={styles.container}>\n        {hasReactNode(icon) && <div className={styles.icon}>{icon}</div>}\n        {hasReactNode(title) && (\n          <Title level=\"2\" weight=\"2\" className={styles.title} Component={titleComponent}>\n            {title}\n          </Title>\n        )}\n        {hasTitle && hasDescription && <Spacing size={8} />}\n        {hasDescription && (\n          <AdaptivityContext.Provider value={{ sizeY: 'regular' }}>\n            <Subhead className={styles.description} Component={descriptionComponent}>\n              {description}\n            </Subhead>\n          </AdaptivityContext.Provider>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && <div className={styles.actions}>{actions}</div>}\n\n        {dismissButtonMode !== 'none' && (\n          <ModalCardBaseCloseButton\n            testId={modalDismissButtonTestId}\n            onClose={onClose}\n            mode={dismissButtonMode}\n          >\n            {dismissLabel}\n          </ModalCardBaseCloseButton>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","usePlatform","AdaptivityContext","RootComponent","Spacing","Subhead","Title","ModalCardBaseCloseButton","styles","ModalCardBase","icon","title","titleComponent","description","descriptionComponent","children","actions","onClose","dismissLabel","size","sizeProp","modalDismissButtonTestId","dismissButtonMode","preventClose","restProps","platform","isDesktop","undefined","withSafeZone","hasTitle","hasDescription","baseClassName","ios","desktop","baseStyle","maxWidth","div","className","container","level","weight","Component","Provider","value","sizeY","testId","mode"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,KAAK,QAAQ,+BAA4B;AAClD,SAASC,wBAAwB,QAAQ,gCAA6B;AACtE,OAAOC,YAAY,6BAA6B;AAwEhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,IAAI,EACJC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,uBAAuB,MAAM,EAC7BC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,eAAe,QAAQ,EACvBC,MAAMC,QAAQ,EACdC,wBAAwB,EACxBC,oBAAoB,SAAS,EAC7BC,YAAY,EACZ,GAAGC,WACgB;IACnB,MAAMC,WAAWxB;IACjB,MAAM,EAAEyB,SAAS,EAAE,GAAG1B;IAEtB,MAAMmB,OAAOO,YAAYN,WAAWO;IACpC,MAAMC,eACJ,CAAClB,QACAY,CAAAA,sBAAsB,YACpBG,aAAa,SAAS,CAACC,aAAaJ,sBAAsB,MAAM;IAErE,MAAMO,WAAW9B,aAAaY;IAC9B,MAAMmB,iBAAiB/B,aAAac;IACpC,qBACE,KAACV;QACE,GAAGqB,SAAS;QACbO,eAAejC,WACb,6BACA2B,aAAa,SAASjB,OAAOwB,GAAG,EAChCN,aAAalB,OAAOyB,OAAO,EAC3BL,gBAAgBpB,OAAOoB,YAAY;QAErCM,WAAW;YACTC,UAAUhB;QACZ;kBAEA,cAAA,MAACiB;YAAIC,WAAW7B,OAAO8B,SAAS;;gBAC7BvC,aAAaW,uBAAS,KAAC0B;oBAAIC,WAAW7B,OAAOE,IAAI;8BAAGA;;gBACpDX,aAAaY,wBACZ,KAACL;oBAAMiC,OAAM;oBAAIC,QAAO;oBAAIH,WAAW7B,OAAOG,KAAK;oBAAE8B,WAAW7B;8BAC7DD;;gBAGJkB,YAAYC,gCAAkB,KAAC1B;oBAAQe,MAAM;;gBAC7CW,gCACC,KAAC5B,kBAAkBwC,QAAQ;oBAACC,OAAO;wBAAEC,OAAO;oBAAU;8BACpD,cAAA,KAACvC;wBAAQgC,WAAW7B,OAAOK,WAAW;wBAAE4B,WAAW3B;kCAChDD;;;gBAKNE;gBAEAhB,aAAaiB,0BAAY,KAACoB;oBAAIC,WAAW7B,OAAOQ,OAAO;8BAAGA;;gBAE1DM,sBAAsB,wBACrB,KAACf;oBACCsC,QAAQxB;oBACRJ,SAASA;oBACT6B,MAAMxB;8BAELJ;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon20Cancel, Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';\nimport { ModalOutsideButton } from '../ModalOutsideButton/ModalOutsideButton';\nimport { ModalOutsideButtons } from '../ModalOutsideButtons/ModalOutsideButtons';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'title'> {\n  /**\n   * Иконка.\n   *\n   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Заголовок карточки\n   */\n  title?: React.ReactNode;\n  /* Позволяет поменять тег используемый для заголовка */\n  titleComponent?: React.ElementType;\n  /* Позволяет задать id для заголовка. Используется, чтобы связать модальное окно и title через aria-labelledby, тем самым задав модальному окну имя через title */\n  titleId?: string;\n\n  /**\n   * Описание\n   */\n  description?: React.ReactNode;\n  /* Позволяет поменять тег используемый для описания */\n  descriptionComponent?: React.ElementType;\n\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `size=\"l\" mode=\"primary\" stretched`\n   * - `size=\"l\" mode=\"secondary\" stretched`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"s\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n\n  onClose?: VoidFunction;\n\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: number;\n\n  /**\n   * Передает атрибут `data-testid` для кнопки закрытия\n   */\n  modalDismissButtonTestId?: string;\n  /**\n   * Расположение кнопки закрытия (внутри и вне `popout'a`)\n   *\n   * Доступно только в `compact`-режиме\n   *\n   * На `iOS` в `regular`-режиме всегда включен `inside`\n   *\n   * ⚠️ ВНИМАНИЕ: использование `none` скрывает крестик, это негативно сказывается на пользовательском опыте\n   */\n  dismissButtonMode?: 'inside' | 'outside' | 'none';\n  /**\n   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n   *\n   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n   */\n  preventClose?: boolean;\n  /**\n   * Управляющие элементы под кнопкой закрытия.\n   *\n   * Доступно только в `compact`-режиме. Рекомендуется размещать иконки размера 20, обернутые в ModalOutsideButton\n   *\n   */\n  outsideButtons?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n  icon,\n  title,\n  titleComponent = 'span',\n  description,\n  descriptionComponent = 'span',\n  children,\n  actions,\n  onClose,\n  dismissLabel = 'Закрыть',\n  size: sizeProp,\n  modalDismissButtonTestId,\n  dismissButtonMode = 'outside',\n  preventClose,\n  outsideButtons,\n  titleId,\n  ...restProps\n}: ModalCardBaseProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  const size = isDesktop ? sizeProp : undefined;\n  const withSafeZone =\n    !icon &&\n    (dismissButtonMode === 'inside' ||\n      (platform === 'ios' && !isDesktop && dismissButtonMode !== 'none'));\n\n  const hasTitle = hasReactNode(title);\n  const hasDescription = hasReactNode(description);\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        'vkuiInternalModalCardBase',\n        platform === 'ios' && styles.ios,\n        isDesktop && styles.desktop,\n        withSafeZone && styles.withSafeZone,\n      )}\n      baseStyle={{\n        maxWidth: size,\n      }}\n    >\n      <div className={styles.container}>\n        {hasReactNode(icon) && <div className={styles.icon}>{icon}</div>}\n        {hasReactNode(title) && (\n          <Title\n            id={titleId}\n            level=\"2\"\n            weight=\"2\"\n            className={styles.title}\n            Component={titleComponent}\n          >\n            {title}\n          </Title>\n        )}\n        {hasTitle && hasDescription && <Spacing size={8} />}\n        {hasDescription && (\n          <AdaptivityContext.Provider value={{ sizeY: 'regular' }}>\n            <Subhead className={styles.description} Component={descriptionComponent}>\n              {description}\n            </Subhead>\n          </AdaptivityContext.Provider>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && <div className={styles.actions}>{actions}</div>}\n\n        {isDesktop && (dismissButtonMode === 'outside' || outsideButtons) && (\n          <ModalOutsideButtons>\n            {dismissButtonMode === 'outside' && (\n              <ModalOutsideButton\n                aria-label={dismissLabel}\n                data-testid={modalDismissButtonTestId}\n                onClick={onClose}\n              >\n                <Icon20Cancel />\n              </ModalOutsideButton>\n            )}\n            {outsideButtons}\n          </ModalOutsideButtons>\n        )}\n\n        {(dismissButtonMode === 'inside' ||\n          (platform === 'ios' && !isDesktop && dismissButtonMode !== 'none')) && (\n          <Tappable\n            className={styles.dismiss}\n            onClick={onClose}\n            hoverMode=\"opacity\"\n            activeMode=\"opacity\"\n            data-testid={modalDismissButtonTestId}\n          >\n            <VisuallyHidden>{dismissLabel}</VisuallyHidden>\n            {platform === 'ios' ? <Icon24Dismiss /> : <Icon20Cancel />}\n          </Tappable>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon20Cancel","Icon24Dismiss","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","usePlatform","AdaptivityContext","ModalOutsideButton","ModalOutsideButtons","RootComponent","Spacing","Tappable","Subhead","Title","VisuallyHidden","styles","ModalCardBase","icon","title","titleComponent","description","descriptionComponent","children","actions","onClose","dismissLabel","size","sizeProp","modalDismissButtonTestId","dismissButtonMode","preventClose","outsideButtons","titleId","restProps","platform","isDesktop","undefined","withSafeZone","hasTitle","hasDescription","baseClassName","ios","desktop","baseStyle","maxWidth","div","className","container","id","level","weight","Component","Provider","value","sizeY","aria-label","data-testid","onClick","dismiss","hoverMode","activeMode"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,QAAQ,mBAAmB;AAC/D,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,KAAK,QAAQ,+BAA4B;AAClD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,6BAA6B;AAiFhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,IAAI,EACJC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,uBAAuB,MAAM,EAC7BC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,eAAe,SAAS,EACxBC,MAAMC,QAAQ,EACdC,wBAAwB,EACxBC,oBAAoB,SAAS,EAC7BC,YAAY,EACZC,cAAc,EACdC,OAAO,EACP,GAAGC,WACgB;IACnB,MAAMC,WAAW7B;IACjB,MAAM,EAAE8B,SAAS,EAAE,GAAG/B;IAEtB,MAAMsB,OAAOS,YAAYR,WAAWS;IACpC,MAAMC,eACJ,CAACpB,QACAY,CAAAA,sBAAsB,YACpBK,aAAa,SAAS,CAACC,aAAaN,sBAAsB,MAAM;IAErE,MAAMS,WAAWnC,aAAae;IAC9B,MAAMqB,iBAAiBpC,aAAaiB;IACpC,qBACE,KAACX;QACE,GAAGwB,SAAS;QACbO,eAAetC,WACb,6BACAgC,aAAa,SAASnB,OAAO0B,GAAG,EAChCN,aAAapB,OAAO2B,OAAO,EAC3BL,gBAAgBtB,OAAOsB,YAAY;QAErCM,WAAW;YACTC,UAAUlB;QACZ;kBAEA,cAAA,MAACmB;YAAIC,WAAW/B,OAAOgC,SAAS;;gBAC7B5C,aAAac,uBAAS,KAAC4B;oBAAIC,WAAW/B,OAAOE,IAAI;8BAAGA;;gBACpDd,aAAae,wBACZ,KAACL;oBACCmC,IAAIhB;oBACJiB,OAAM;oBACNC,QAAO;oBACPJ,WAAW/B,OAAOG,KAAK;oBACvBiC,WAAWhC;8BAEVD;;gBAGJoB,YAAYC,gCAAkB,KAAC7B;oBAAQgB,MAAM;;gBAC7Ca,gCACC,KAACjC,kBAAkB8C,QAAQ;oBAACC,OAAO;wBAAEC,OAAO;oBAAU;8BACpD,cAAA,KAAC1C;wBAAQkC,WAAW/B,OAAOK,WAAW;wBAAE+B,WAAW9B;kCAChDD;;;gBAKNE;gBAEAnB,aAAaoB,0BAAY,KAACsB;oBAAIC,WAAW/B,OAAOQ,OAAO;8BAAGA;;gBAE1DY,aAAcN,CAAAA,sBAAsB,aAAaE,cAAa,mBAC7D,MAACvB;;wBACEqB,sBAAsB,2BACrB,KAACtB;4BACCgD,cAAY9B;4BACZ+B,eAAa5B;4BACb6B,SAASjC;sCAET,cAAA,KAACxB;;wBAGJ+B;;;gBAIHF,CAAAA,sBAAsB,YACrBK,aAAa,SAAS,CAACC,aAAaN,sBAAsB,MAAM,mBACjE,MAAClB;oBACCmC,WAAW/B,OAAO2C,OAAO;oBACzBD,SAASjC;oBACTmC,WAAU;oBACVC,YAAW;oBACXJ,eAAa5B;;sCAEb,KAACd;sCAAgBW;;wBAChBS,aAAa,sBAAQ,KAACjC,mCAAmB,KAACD;;;;;;AAMvD,EAAE"}

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

@@ -1,13 +1,13 @@
 .container {
-  box-sizing: border-box;
   position: relative;
-  background: var(--vkui--color_background_modal);
-  border-radius: 12px;
-  padding: 16px;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: 16px;
   pointer-events: initial;
+  background: var(--vkui--color_background_modal);
+  border-radius: 12px;
   box-shadow: var(--vkui--elevation3);
 
   --vkui_internal--background: var(--vkui--color_background_modal);
@@ -35,10 +35,10 @@
 
 .title,
 .description {
-  text-align: center;
-  margin: 0;
   padding-block: 0;
   padding-inline: 8px;
+  margin: 0;
+  text-align: center;
   word-break: break-word;
 }
 
@@ -65,8 +65,8 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-end: 0;
-  color: var(--vkui--color_icon_secondary);
   padding: var(--vkui_internal--dismiss_icon_padding);
+  color: var(--vkui--color_icon_secondary);
 }
 
 /**

package/dist/cssm/components/ModalDismissButton/ModalDismissButton.js

@@ -1,17 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon20Cancel } from "@vkontakte/icons";
-import { Tappable } from "../Tappable/Tappable.js";
+import { classNames } from "@vkontakte/vkjs";
+import { ModalOutsideButton } from "../ModalOutsideButton/ModalOutsideButton.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import styles from "./ModalDismissButton.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
- */ export const ModalDismissButton = ({ children = 'Закрыть', ...restProps })=>{
-    return /*#__PURE__*/ _jsxs(Tappable, {
-        baseClassName: styles.host,
+ */ export const ModalDismissButton = ({ children = 'Закрыть', className, ...restProps })=>{
+    return /*#__PURE__*/ _jsxs(ModalOutsideButton, {
+        className: classNames(styles.host, className),
         ...restProps,
-        activeMode: styles.active,
-        hoverMode: styles.hover,
         children: [
             children && /*#__PURE__*/ _jsx(VisuallyHidden, {
                 children: children

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ModalDismissButton.module.css';\n\nexport type ModalDismissButtonProps = Omit<TappableProps, 'mode' | 'onClose'>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n  children = 'Закрыть',\n  ...restProps\n}: ModalDismissButtonProps): React.ReactNode => {\n  return (\n    <Tappable\n      baseClassName={styles.host}\n      {...restProps}\n      activeMode={styles.active}\n      hoverMode={styles.hover}\n    >\n      {children && <VisuallyHidden>{children}</VisuallyHidden>}\n      <Icon20Cancel />\n    </Tappable>\n  );\n};\n"],"names":["React","Icon20Cancel","Tappable","VisuallyHidden","styles","ModalDismissButton","children","restProps","baseClassName","host","activeMode","active","hoverMode","hover"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,kCAAkC;AAIrD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EACjCC,WAAW,SAAS,EACpB,GAAGC,WACqB;IACxB,qBACE,MAACL;QACCM,eAAeJ,OAAOK,IAAI;QACzB,GAAGF,SAAS;QACbG,YAAYN,OAAOO,MAAM;QACzBC,WAAWR,OAAOS,KAAK;;YAEtBP,0BAAY,KAACH;0BAAgBG;;0BAC9B,KAACL;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  ModalOutsideButton,\n  type ModalOutsideButtonProps,\n} from '../ModalOutsideButton/ModalOutsideButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ModalDismissButton.module.css';\n\nexport interface ModalDismissButtonProps extends Omit<ModalOutsideButtonProps, 'children'> {\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n  children = 'Закрыть',\n  className,\n  ...restProps\n}: ModalDismissButtonProps): React.ReactNode => {\n  return (\n    <ModalOutsideButton className={classNames(styles.host, className)} {...restProps}>\n      {children && <VisuallyHidden>{children}</VisuallyHidden>}\n      <Icon20Cancel />\n    </ModalOutsideButton>\n  );\n};\n"],"names":["React","Icon20Cancel","classNames","ModalOutsideButton","VisuallyHidden","styles","ModalDismissButton","children","className","restProps","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,kBAAkB,QAEb,8CAA2C;AAClD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,kCAAkC;AAMrD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EACjCC,WAAW,SAAS,EACpBC,SAAS,EACT,GAAGC,WACqB;IACxB,qBACE,MAACN;QAAmBK,WAAWN,WAAWG,OAAOK,IAAI,EAAEF;QAAa,GAAGC,SAAS;;YAC7EF,0BAAY,KAACH;0BAAgBG;;0BAC9B,KAACN;;;AAGP,EAAE"}

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

@@ -2,33 +2,4 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-end: -56px;
-  inline-size: 56px;
-  block-size: 56px;
-  padding: 18px;
-  box-sizing: border-box;
-  color: var(--vkui--color_icon_contrast);
-}
-
-.host::before {
-  display: block;
-  content: '';
-  inset: 14px;
-  background: var(--vkui--color_overlay_secondary);
-  border-radius: 50%;
-  position: absolute;
-  transition: background-color 0.15s ease-out;
-}
-
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- fixes icon misplacement on Safari in some cases */
-
-.host :global(.vkuiIcon) {
-  transform: translateX(0);
-}
-
-.hover::before {
-  background: var(--vkui--color_overlay_secondary--hover);
-}
-
-.active::before {
-  background: var(--vkui--color_overlay_secondary--active);
 }

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

@@ -1,9 +1,9 @@
 .host:not([hidden]) {
-  isolation: isolate;
   position: fixed;
   inset: 0;
   z-index: var(--vkui--z_index_modal);
   overflow: hidden;
+  isolation: isolate;
 }
 
 /* Desktop */

package/dist/cssm/components/ModalOutsideButton/ModalOutsideButton.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Tappable } from "../Tappable/Tappable.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import styles from "./ModalOutsideButton.module.css";
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalOutsideButton
+ */ export const ModalOutsideButton = ({ children, 'aria-label': ariaLabel, ...restProps })=>{
+    return /*#__PURE__*/ _jsxs(Tappable, {
+        baseClassName: styles.host,
+        activeMode: styles.active,
+        hoverMode: styles.hover,
+        ...restProps,
+        children: [
+            ariaLabel && /*#__PURE__*/ _jsx(VisuallyHidden, {
+                children: ariaLabel
+            }),
+            children
+        ]
+    });
+};
+
+//# sourceMappingURL=ModalOutsideButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ModalOutsideButton/ModalOutsideButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ModalOutsideButton.module.css';\n\nexport interface ModalOutsideButtonProps extends TappableProps {\n  /**\n   * Текст для скринридера\n   */\n  'aria-label'?: string;\n  /**\n   * Рекомендуется использовать иконки размером `20px`\n   */\n  'children': React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalOutsideButton\n */\nexport const ModalOutsideButton = ({\n  children,\n  'aria-label': ariaLabel,\n  ...restProps\n}: ModalOutsideButtonProps) => {\n  return (\n    <Tappable\n      baseClassName={styles.host}\n      activeMode={styles.active}\n      hoverMode={styles.hover}\n      {...restProps}\n    >\n      {ariaLabel && <VisuallyHidden>{ariaLabel}</VisuallyHidden>}\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["React","Tappable","VisuallyHidden","styles","ModalOutsideButton","children","ariaLabel","restProps","baseClassName","host","activeMode","active","hoverMode","hover"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,kCAAkC;AAarD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EACjCC,QAAQ,EACR,cAAcC,SAAS,EACvB,GAAGC,WACqB;IACxB,qBACE,MAACN;QACCO,eAAeL,OAAOM,IAAI;QAC1BC,YAAYP,OAAOQ,MAAM;QACzBC,WAAWT,OAAOU,KAAK;QACtB,GAAGN,SAAS;;YAEZD,2BAAa,KAACJ;0BAAgBI;;YAC9BD;;;AAGP,EAAE"}

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

@@ -0,0 +1,31 @@
+.host {
+  box-sizing: border-box;
+  inline-size: 56px;
+  block-size: 56px;
+  padding: 18px;
+  color: var(--vkui--color_icon_contrast);
+}
+
+.host::before {
+  position: absolute;
+  inset: 14px;
+  display: block;
+  content: '';
+  background: var(--vkui--color_overlay_secondary);
+  border-radius: 50%;
+  transition: background-color 0.15s ease-out;
+}
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- fixes icon misplacement on Safari in some cases */
+
+.host :global(.vkuiIcon) {
+  transform: translateX(0);
+}
+
+.hover::before {
+  background: var(--vkui--color_overlay_secondary--hover);
+}
+
+.active::before {
+  background: var(--vkui--color_overlay_secondary--active);
+}

package/dist/cssm/components/ModalOutsideButtons/ModalOutsideButtons.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@vkontakte/vkjs";
+import { Flex } from "../Flex/Flex.js";
+import styles from "./ModalOutsideButtons.module.css";
+/**
+ * @private
+ */ export const ModalOutsideButtons = ({ className, children, ...restProps })=>{
+    return /*#__PURE__*/ _jsx(Flex, {
+        direction: "column",
+        className: classNames(styles.host, className),
+        ...restProps,
+        children: children
+    });
+};
+
+//# sourceMappingURL=ModalOutsideButtons.js.map