@vkontakte/vkui 5.5.4 → 5.6.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["HoverPopper","getRef","content","children","onShownChange","shown","_shown","showDelay","hideDelay","restProps","React","useState","computedShown","setComputedShown","setShown","value","showTimeout","useTimeout","hideTimeout","usePatchChildrenRef","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","useEventListener","targetLeaveListener","useIsomorphicLayoutEffect","current","add","Fragment","Popper","onMouseOver","onMouseOut","targetRef"],"mappings":";;;;+BAkCaA;;;eAAAA;;;;;;;;+DAlCU;gCACU;mCACG;0BACT;yCACe;sBACA;AA6BnC,IAAMA,cAAc;QACzBC,gBAAAA,QACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,AAAOC,gBAAPD,iCACAE,WAAAA,0CAAY,kDACZC,WAAAA,0CAAY,wBACTC;QAPHR;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,IAA0CE,qCAAAA,OAAMC,SAASL,UAAU,YAA5DM,gBAAmCF,oBAApBG,mBAAoBH;IAE1C,IAAML,QAAQ,OAAOC,WAAW,YAAYA,SAASM;IAErD,IAAME,WAAW,SAACC;QAChB,IAAI,OAAOT,WAAW,WAAW;YAC/BO,iBAAiBE;QACnB;QACA,OAAOX,kBAAkB,cAAcA,cAAcW;IACvD;IAEA,IAAMC,cAAcC,IAAAA,wBAAW;QAC7BH,SAAS;IACX,GAAGP;IAEH,IAAMW,cAAcD,IAAAA,wBAAW;QAC7BH,SAAS;IACX,GAAGN;IAEH,IAA0BW,2CAAAA,IAAAA,0CAAoBhB,eAAvCiB,WAAmBD,0BAATE,QAASF;IAE1B,IAAMG,gBAAgB;QACpBJ,YAAYK;QACZP,YAAYQ;IACd;IAEA,IAAMC,gBAAgB;QACpBT,YAAYO;QACZL,YAAYM;IACd;IAEA,IAAME,sBAAsBC,IAAAA,oCAAiB,gBAAgBL;IAC7D,IAAMM,sBAAsBD,IAAAA,oCAAiB,gBAAgBF;IAE7DI,IAAAA,sDAA0B;QACxB,IAAIT,SAASU,SAAS;YACpBJ,oBAAoBK,IAAIX,SAASU;YACjCF,oBAAoBG,IAAIX,SAASU;QACnC;IACF,GAAG,EAAE;IAEL,qBACE,qBAACpB,OAAMsB,gBACJX,OACAhB,uBACC,qBAAC4B,4DACKxB;QACJyB,aAAahB,YAAYK;QACzBY,YAAYV;QACZxB,QAAQA;QACRmC,WAAWhB;QAEVlB;AAKX"}
+{"version":3,"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["HoverPopper","getRef","content","children","onShownChange","shown","_shown","showDelay","hideDelay","restProps","React","useState","computedShown","setComputedShown","setShown","value","showTimeout","useTimeout","hideTimeout","usePatchChildrenRef","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","useEventListener","targetLeaveListener","useIsomorphicLayoutEffect","current","add","Fragment","Popper","onMouseOver","onMouseOut","targetRef"],"mappings":";;;;+BAkCaA;;;eAAAA;;;;;;;;+DAlCU;gCACU;mCACG;0BACT;yCACe;sBACA;AA6BnC,IAAMA,cAAc;QACzBC,gBAAAA,QACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,AAAOC,gBAAPD,iCACAE,WAAAA,0CAAY,kDACZC,WAAAA,0CAAY,wBACTC;QAPHR;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,IAA0CE,qCAAAA,OAAMC,QAAQ,CAACL,UAAU,YAA5DM,gBAAmCF,oBAApBG,mBAAoBH;IAE1C,IAAML,QAAQ,OAAOC,WAAW,YAAYA,SAASM;IAErD,IAAME,WAAW,SAACC;QAChB,IAAI,OAAOT,WAAW,WAAW;YAC/BO,iBAAiBE;QACnB;QACA,OAAOX,kBAAkB,cAAcA,cAAcW;IACvD;IAEA,IAAMC,cAAcC,IAAAA,sBAAU,EAAC;QAC7BH,SAAS;IACX,GAAGP;IAEH,IAAMW,cAAcD,IAAAA,sBAAU,EAAC;QAC7BH,SAAS;IACX,GAAGN;IAEH,IAA0BW,2CAAAA,IAAAA,wCAAmB,EAAChB,eAAvCiB,WAAmBD,0BAATE,QAASF;IAE1B,IAAMG,gBAAgB;QACpBJ,YAAYK,KAAK;QACjBP,YAAYQ,GAAG;IACjB;IAEA,IAAMC,gBAAgB;QACpBT,YAAYO,KAAK;QACjBL,YAAYM,GAAG;IACjB;IAEA,IAAME,sBAAsBC,IAAAA,kCAAgB,EAAC,gBAAgBL;IAC7D,IAAMM,sBAAsBD,IAAAA,kCAAgB,EAAC,gBAAgBF;IAE7DI,IAAAA,oDAAyB,EAAC;QACxB,IAAIT,SAASU,OAAO,EAAE;YACpBJ,oBAAoBK,GAAG,CAACX,SAASU,OAAO;YACxCF,oBAAoBG,GAAG,CAACX,SAASU,OAAO;QAC1C;IACF,GAAG,EAAE;IAEL,qBACE,qBAACpB,OAAMsB,QAAQ,QACZX,OACAhB,uBACC,qBAAC4B,cAAM,8CACDxB;QACJyB,aAAahB,YAAYK,KAAK;QAC9BY,YAAYV;QACZxB,QAAQA;QACRmC,WAAWhB;QAEVlB;AAKX"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/IconButton/IconButton.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 { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasChildren } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps, HasChildren {}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(\n        styles['IconButton'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["IconButton","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","process","env","NODE_ENV","isAccessible","COMMON_WARNINGS","a11y","href","Tappable","activeEffectDelay","activeMode","Component","classNames","REGULAR","Platform","IOS"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;;+DAvBU;oBACI;6BACG;2BACF;0BACH;wBACA;wBACiB;wBAEF;AAGxC,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAKZ,IAAMC,OAAOC,IAAAA,oBAAS;AAKf,IAAMN,aAAa;QAAGO,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAxBF;QAAUC;;IACrC,IAAME,WAAWC,IAAAA;IACjB,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAMC,eAAeR,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE5E,IAAI,CAACQ,cAAc;YACjBZ,KAAKa,0BAAgBC,IAAI,CAACV,UAAUW,OAAO,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,qBAACC;QACCC,mBAAmB;QACnBC,YAAW;QACXC,WAAWf,UAAUW,OAAO,MAAM;OAC9BX;QACJD,WAAWiB,IAAAA,oCAETZ,UAAUV,qBAASuB,WAAWzB,eAAe,CAACY,MAAM,EACpDH,aAAaiB,mBAASC,8BACtBpB;QAGDD;AAGP"}
+{"version":3,"sources":["../../../../src/components/IconButton/IconButton.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 { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasChildren } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps, HasChildren {}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(\n        styles['IconButton'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["IconButton","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","process","env","NODE_ENV","isAccessible","COMMON_WARNINGS","a11y","href","Tappable","activeEffectDelay","activeMode","Component","classNames","REGULAR","Platform","IOS"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;;+DAvBU;oBACI;6BACG;2BACF;0BACH;wBACA;wBACiB;wBAEF;AAGxC,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAKnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,aAAa;QAAGO,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAxBF;QAAUC;;IACrC,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,eAAeR,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE5E,IAAI,CAACQ,cAAc;YACjBZ,KAAKa,yBAAe,CAACC,IAAI,CAACV,UAAUW,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,qBAACC,kBAAQ;QACPC,mBAAmB;QACnBC,YAAW;QACXC,WAAWf,UAAUW,IAAI,GAAG,MAAM;OAC9BX;QACJD,WAAWiB,IAAAA,gBAAU,oBAEnBZ,UAAUV,oBAAQ,CAACuB,OAAO,IAAIzB,eAAe,CAACY,MAAM,EACpDH,aAAaiB,kBAAQ,CAACC,GAAG,2BACzBpB;QAGDD;AAGP"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = 'm',\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  let borderRadius: number;\n\n  switch (borderRadiusProp) {\n    case 's': {\n      if (size <= 32) {\n        borderRadius = 2;\n      } else if (size <= 56) {\n        borderRadius = 3;\n      }\n      borderRadius = 4;\n      break;\n    }\n    case 'm': {\n      if (size <= 32) {\n        borderRadius = 3;\n      } else if (size <= 48) {\n        borderRadius = 4;\n      } else if (size <= 72) {\n        borderRadius = 6;\n      } else if (size <= 80) {\n        borderRadius = 8;\n      }\n      borderRadius = 10;\n      break;\n    }\n    case 'l': {\n      if (size <= 16) {\n        borderRadius = 4;\n      } else if (size <= 20) {\n        borderRadius = 5;\n      } else if (size <= 32) {\n        borderRadius = 6;\n      } else if (size <= 40) {\n        borderRadius = 8;\n      } else if (size <= 48) {\n        borderRadius = 10;\n      } else if (size <= 56) {\n        borderRadius = 12;\n      } else if (size <= 64) {\n        borderRadius = 14;\n      }\n      borderRadius = 16;\n    }\n  }\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={className}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"names":["IMAGE_DEFAULT_SIZE","Image","size","borderRadiusProp","borderRadius","style","className","restProps","ImageBase","Badge","ImageBadge","Overlay"],"mappings":";;;;;;;;;;;IAMaA,kBAAkB;eAAlBA;;IAYAC,KAAK;eAALA;;;;;;;+DAlBU;yBACoD;0BAC1B;AAI1C,IAAMD,qBAAqB;AAY3B,IAAMC,QAAQ;6BACnBC,MAAAA,gCAAOF,kCACOG,aAAdC,cAAcD,mBAAAA,iBAAmB,MAAnBA,KACdE,eAAAA,OACAC,mBAAAA,WACGC;QAJHL;QACAE;QACAC;QACAC;;IAGA,IAAIF;IAEJ,OAAQD;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACdE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB;gBACAA,eAAe;gBACf;YACF;QACA,KAAK;YAAK;gBACR,IAAIF,QAAQ,IAAI;oBACdE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB;gBACAA,eAAe;gBACf;YACF;QACA,KAAK;YAAK;gBACR,IAAIF,QAAQ,IAAI;oBACdE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB;gBACAA,eAAe;YACjB;IACF;IAEA,qBACE,qBAACI,kEACKD;QACJL,MAAMA;QACNG,OAAO,4CAAKA;YAAOD,cAAAA;;QACnBE,WAAWA;;AAGjB;AAEAL,MAAMQ,QAAQC;AAEdT,MAAMU,UAAUH,qBAAUG"}
+{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = 'm',\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  let borderRadius: number;\n\n  switch (borderRadiusProp) {\n    case 's': {\n      if (size <= 32) {\n        borderRadius = 2;\n      } else if (size <= 56) {\n        borderRadius = 3;\n      }\n      borderRadius = 4;\n      break;\n    }\n    case 'm': {\n      if (size <= 32) {\n        borderRadius = 3;\n      } else if (size <= 48) {\n        borderRadius = 4;\n      } else if (size <= 72) {\n        borderRadius = 6;\n      } else if (size <= 80) {\n        borderRadius = 8;\n      }\n      borderRadius = 10;\n      break;\n    }\n    case 'l': {\n      if (size <= 16) {\n        borderRadius = 4;\n      } else if (size <= 20) {\n        borderRadius = 5;\n      } else if (size <= 32) {\n        borderRadius = 6;\n      } else if (size <= 40) {\n        borderRadius = 8;\n      } else if (size <= 48) {\n        borderRadius = 10;\n      } else if (size <= 56) {\n        borderRadius = 12;\n      } else if (size <= 64) {\n        borderRadius = 14;\n      }\n      borderRadius = 16;\n    }\n  }\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={className}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"names":["IMAGE_DEFAULT_SIZE","Image","size","borderRadiusProp","borderRadius","style","className","restProps","ImageBase","Badge","ImageBadge","Overlay"],"mappings":";;;;;;;;;;;IAMaA,kBAAkB;eAAlBA;;IAYAC,KAAK;eAALA;;;;;;;+DAlBU;yBACoD;0BAC1B;AAI1C,IAAMD,qBAAqB;AAY3B,IAAMC,QAAQ;6BACnBC,MAAAA,gCAAOF,kCACOG,aAAdC,cAAcD,mBAAAA,iBAAmB,MAAnBA,KACdE,eAAAA,OACAC,mBAAAA,WACGC;QAJHL;QACAE;QACAC;QACAC;;IAGA,IAAIF;IAEJ,OAAQD;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACdE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB;gBACAA,eAAe;gBACf;YACF;QACA,KAAK;YAAK;gBACR,IAAIF,QAAQ,IAAI;oBACdE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB;gBACAA,eAAe;gBACf;YACF;QACA,KAAK;YAAK;gBACR,IAAIF,QAAQ,IAAI;oBACdE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB;gBACAA,eAAe;YACjB;IACF;IAEA,qBACE,qBAACI,oBAAS,8CACJD;QACJL,MAAMA;QACNG,OAAO,4CAAKA;YAAOD,cAAAA;;QACnBE,WAAWA;;AAGjB;AAEAL,MAAMQ,KAAK,GAAGC,sBAAU;AAExBT,MAAMU,OAAO,GAAGH,oBAAS,CAACG,OAAO"}

package/dist/cjs/components/Image/ImageBadge/ImageBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './ImageBadge.module.css';\n\nexport type ImageBadgeProps = ImageBaseBadgeProps;\n\nexport const ImageBadge = ({ className, ...restProps }: ImageBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['ImageBadge'],\n        size < 96 && styles['ImageBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["ImageBadge","className","restProps","size","React","useContext","ImageBaseContext","ImageBase","Badge","classNames"],"mappings":";;;;+BAOaA;;;eAAAA;;;;;;;+DAPU;oBACI;yBAC2C;AAK/D,IAAMA,aAAa;QAAGC,mBAAAA,WAAcC;QAAdD;;IAC3B,IAAM,AAAEE,OAASC,OAAMC,WAAWC,6BAA1BH;IACR,qBACE,qBAACI,qBAAUC,mDACLN;QACJD,WAAWQ,IAAAA,oCAETN,OAAO,iCACPF;;AAIR"}
+{"version":3,"sources":["../../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './ImageBadge.module.css';\n\nexport type ImageBadgeProps = ImageBaseBadgeProps;\n\nexport const ImageBadge = ({ className, ...restProps }: ImageBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['ImageBadge'],\n        size < 96 && styles['ImageBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["ImageBadge","className","restProps","size","React","useContext","ImageBaseContext","ImageBase","Badge","classNames"],"mappings":";;;;+BAOaA;;;eAAAA;;;;;;;+DAPU;oBACI;yBAC2C;AAK/D,IAAMA,aAAa;QAAGC,mBAAAA,WAAcC;QAAdD;;IAC3B,IAAM,AAAEE,OAASC,OAAMC,UAAU,CAACC,2BAAgB,EAA1CH;IACR,qBACE,qBAACI,oBAAS,CAACC,KAAK,8CACVN;QACJD,WAAWQ,IAAAA,gBAAU,oBAEnBN,OAAO,iCACPF;;AAIR"}

package/dist/cjs/components/ImageBase/ImageBase.js

@@ -78,14 +78,16 @@ var ImageBase = function(_param) {
         }
     }
     var handleImageLoad = function(event) {
+        var _onLoad;
         setLoaded(true);
         setFailed(false);
-        onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
+        (_onLoad = onLoad) === null || _onLoad === void 0 ? void 0 : _onLoad(event);
     };
     var handleImageError = function(event) {
+        var _onError;
         setLoaded(false);
         setFailed(true);
-        onError === null || onError === void 0 ? void 0 : onError(event);
+        (_onError = onError) === null || _onError === void 0 ? void 0 : _onError(event);
     };
     var sizeClassName = function() {
         switch(size){

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBaseContext","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","React","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","classNames","role","aria-label","img","aria-hidden","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"mappings":";;;;;;;;;;;IAmBEA,+BAA+B;eAA/BA;;IACAC,kCAAkC;eAAlCA;;IACAC,iCAAiC;eAAjCA;;IAGOC,gBAAgB;eAAhBA;;IAqCIC,SAAS;eAATA;;;;;;;;+DA7DU;oBACI;8BAE8B;gCACI;uBAC5B;0BAEkB;uBAe5C;AAuCA,IAAMA,YAAY;QACvBC,aAAAA,KACAC,qBAAAA,aACAC,kBAAAA,UACAC,iBAAAA,SACAC,wBAAAA,gBACAC,eAAAA,OACAC,aAAAA,KACAC,gBAAAA,QACAC,gBAAAA,QACAC,gBAAAA,6BACAC,MAAAA,gCAAO,kBACPC,eAAAA,OACAC,gBAAAA,QACAC,eAAAA,OACAC,mBAAAA,WACAC,oBAAAA,uCACAC,YAAAA,4CAAa,0BACb,AAAgBC,0BAAhB,iBACAC,kBAAAA,UACA,AAAcC,mBAAd,eACAC,iBAAAA,SACAC,gBAAAA,QACAC,iBAAAA,SACGC;QAvBHvB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACA;QACAE;QACA;QACAE;QACAC;QACAC;;IAGA,IAA4BE,qCAAAA,OAAMC,SAAS,YAApCC,SAAqBF,oBAAbG,YAAaH;IAC5B,IAA4BA,sCAAAA,OAAMC,SAAS,YAApCG,SAAqBJ,qBAAbK,YAAaL;IAE5B,IAAMM,SAASxB,OAAOC;IACtB,IAAMwB,uBAAuB,AAACH,CAAAA,UAAU,CAACE,MAAK,mBAAMN,OAAMQ,eAAef;IAEzE,IAAMgB,eAAeF,uBAAuBd,mBAAmB;IAE/D,IAAIiB,QAAQC,IAAIC,aAAa,eAAe;QAC1CC,IAAAA,0BAAa3B;QACb,IAAIuB,cAAc;YAChBK,IAAAA,kCAAqB5B,MAAM;gBAAE6B,MAAM;gBAAgBC,OAAOP;YAAa;QACzE;IACF;IAEA,IAAMQ,kBAAkB,SAACC;QACvBf,UAAU;QACVE,UAAU;QACVR,mBAAAA,oBAAAA,KAAAA,IAAAA,OAASqB;IACX;IAEA,IAAMC,mBAAmB,SAACD;QACxBf,UAAU;QACVE,UAAU;QACVP,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAUoB;IACZ;IAEA,IAAME,gBAAgB,AAAC;QACrB,OAAQlC;YACN,KAAK;gBACH;YACF,KAAK;gBACH;YACF,KAAK;gBACH;YACF,KAAK;gBACH;YACF,KAAK;gBACH;QACJ;QAEA,OAAO;IACT;IAEA,qBACE,qBAACZ,0BAAiB+C;QAASL,OAAO;YAAE9B,MAAAA;QAAK;qBACvC,qBAACoC,mDACKvB;QACJwB,KAAKhC;QACLF,OAAO,4CAAKA;YAAOF,OAAOD;YAAME,QAAQF;;QACxCI,WAAWkC,IAAAA,kBACTlC,4BAEA8B,eACAlB;QAEFuB,MAAMnB,SAAS,QAAQ;QACvBoB,cAAY/B;QACZC,SAASA;QAERU,wBACC,qBAACqB;QACCJ,KAAKtC;QACLT,KAAKA;QACLc,SAAS;QACTb,aAAaA;QACbC,UAAUA;QACVC,SAASA;QACTC,gBAAgBA;QAChBC,OAAOA;QACPC,KAAKA;QACLC,QAAQA;QACRC,QAAQA;QACRG,OAAOA;QACPC,QAAQA;QACRS,QAAQoB;QACRnB,SAASqB;QAGZV,8BACC,qBAACa;QAAIhC,WAAWkC,IAAAA;OAA4Cf,eAE7Df,UACAF,4BAAc,qBAAC8B;QAAIM,eAAAA;QAAYtC,SAAS;;AAIjD;AAEAf,UAAUsD,QAAQC;AAElBvD,UAAUwD,UAAUC"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBaseContext","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","React","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","classNames","role","aria-label","img","aria-hidden","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"mappings":"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"}

package/dist/cjs/components/ImageBase/ImageBaseBadge/ImageBaseBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nconst backgroundStyles = {\n  stroke: styles['ImageBaseBadge--background-stroke'],\n  shadow: styles['ImageBaseBadge--background-shadow'],\n};\n\nexport interface ImageBaseBadgeProps extends React.AriaAttributes {\n  /**\n   * Вид подложки под иконку.\n   *\n   * - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   * - `\"shadow\"` – добавляет небольшую тень.\n   */\n  background?: 'stroke' | 'shadow';\n  /**\n   * Принимает иконку.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge = ({\n  background = 'shadow',\n  children,\n  className,\n  ...restProps\n}: ImageBaseBadgeProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateBadgeIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(styles['ImageBaseBadge'], backgroundStyles[background], className)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["ImageBaseBadge","backgroundStyles","stroke","shadow","background","children","className","restProps","process","env","NODE_ENV","size","React","useContext","ImageBaseContext","validateBadgeIcon","name","value","div","classNames"],"mappings":";;;;+BAwCaA;;;eAAAA;;;;;;;+DAxCU;oBACI;uBACM;0BAEC;AAGlC,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,MAAM;AACR;AA8BO,IAAMH,iBAAiB;mCAC5BI,YAAAA,4CAAa,8BACbC,kBAAAA,UACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,IAAIE,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAIL,UAAU;YACZ,sDAAsD;YACtD,IAAM,AAAEM,OAASC,OAAMC,WAAWC,2BAA1BH;YACRI,IAAAA,+BAAkBJ,MAAM;gBAAEK,MAAM;gBAAYC,OAAOZ;YAAS;QAC9D;IACF;IAEA,qBACE,qBAACa,mDACKX;QACJD,WAAWa,IAAAA,wCAAqClB,gBAAgB,CAACG,WAAW,EAAEE;QAE7ED;AAGP"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nconst backgroundStyles = {\n  stroke: styles['ImageBaseBadge--background-stroke'],\n  shadow: styles['ImageBaseBadge--background-shadow'],\n};\n\nexport interface ImageBaseBadgeProps extends React.AriaAttributes {\n  /**\n   * Вид подложки под иконку.\n   *\n   * - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   * - `\"shadow\"` – добавляет небольшую тень.\n   */\n  background?: 'stroke' | 'shadow';\n  /**\n   * Принимает иконку.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge = ({\n  background = 'shadow',\n  children,\n  className,\n  ...restProps\n}: ImageBaseBadgeProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateBadgeIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(styles['ImageBaseBadge'], backgroundStyles[background], className)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["ImageBaseBadge","backgroundStyles","stroke","shadow","background","children","className","restProps","process","env","NODE_ENV","size","React","useContext","ImageBaseContext","validateBadgeIcon","name","value","div","classNames"],"mappings":";;;;+BAwCaA;;;eAAAA;;;;;;;+DAxCU;oBACI;uBACM;0BAEC;AAGlC,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,MAAM;AACR;AA8BO,IAAMH,iBAAiB;mCAC5BI,YAAAA,4CAAa,8BACbC,kBAAAA,UACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIL,UAAU;YACZ,sDAAsD;YACtD,IAAM,AAAEM,OAASC,OAAMC,UAAU,CAACC,yBAAgB,EAA1CH;YACRI,IAAAA,6BAAiB,EAACJ,MAAM;gBAAEK,MAAM;gBAAYC,OAAOZ;YAAS;QAC9D;IACF;IAEA,qBACE,qBAACa,mDACKX;QACJD,WAAWa,IAAAA,gBAAU,wBAA2BlB,gBAAgB,CAACG,WAAW,EAAEE;QAE7ED;AAGP"}

package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateOverlayIcon } from '../validators';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport interface ImageBaseOverlayProps extends React.AriaAttributes {\n  /**\n   * Задаёт тему оформления.\n   *\n   * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n   */\n  theme?: 'dark' | 'light';\n  /**\n   * Определяет каким образом должен показываться оверлей.\n   *\n   * - `\"on-hover\"` – на наведение указателя мыши.\n   * - `\"always\"` – всегда показывать.\n   *\n   * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n   */\n  visibility?: 'on-hover' | 'always';\n  /**\n   * Принимает иконку.\n   *\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * Интерактивный оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  children,\n  onClick,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const appearance = useAppearance();\n  const hasPointer = useAdaptivityHasPointer();\n  const theme = themeProp ?? appearance;\n  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      type=\"button\"\n      Component=\"button\"\n      className={classNames(\n        styles['ImageBaseOverlay'],\n        visibility === 'always' && styles['ImageBaseOverlay--visible'],\n        theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n        theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n        className,\n      )}\n      hasHover={visibility === 'on-hover'}\n      hoverMode={visibility === 'on-hover' ? styles['ImageBaseOverlay--visible'] : undefined}\n      focusVisibleMode={styles['ImageBaseOverlay--focus-visible']}\n      hasActive={false}\n      onClick={onClick}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["ImageBaseOverlay","className","theme","themeProp","visibility","visibilityProp","children","onClick","restProps","appearance","useAppearance","hasPointer","useAdaptivityHasPointer","process","env","NODE_ENV","size","React","useContext","ImageBaseContext","validateOverlayIcon","name","value","Tappable","type","Component","classNames","hasHover","hoverMode","undefined","focusVisibleMode","hasActive"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;;;;+DA9CU;oBACI;uCACa;6BACV;wBACL;uBACQ;0BAEG;AAuC7B,IAAMA,mBAAmB;QAC9BC,mBAAAA,WACAC,AAAOC,mBAAPD,OACAE,AAAYC,wBAAZD,YACAE,kBAAAA,UACAC,iBAAAA,SACGC;QALHP;QACAC;QACAE;QACAE;QACAC;;IAGA,IAAME,aAAaC,IAAAA;IACnB,IAAMC,aAAaC,IAAAA;IACnB,IAAMV,QAAQC,sBAAAA,uBAAAA,YAAaM;IAC3B,IAAML,aAAaC,2BAAAA,4BAAAA,iBAAmBM,aAAa,aAAa;IAEhE,IAAIE,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAIT,UAAU;YACZ,sDAAsD;YACtD,IAAM,AAAEU,OAASC,OAAMC,WAAWC,2BAA1BH;YACRI,IAAAA,iCAAoBJ,MAAM;gBAAEK,MAAM;gBAAYC,OAAOhB;YAAS;QAChE;IACF;IAEA,qBACE,qBAACiB,gEACKf;QACJgB,MAAK;QACLC,WAAU;QACVxB,WAAWyB,IAAAA,0CAETtB,eAAe,6CACfF,UAAU,gDACVA,UAAU,8CACVD;QAEF0B,UAAUvB,eAAe;QACzBwB,WAAWxB,eAAe,+CAAmDyB;QAC7EC,gBAAgB;QAChBC,WAAW;QACXxB,SAASA;QAERD;AAGP"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateOverlayIcon } from '../validators';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport interface ImageBaseOverlayProps extends React.AriaAttributes {\n  /**\n   * Задаёт тему оформления.\n   *\n   * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n   */\n  theme?: 'dark' | 'light';\n  /**\n   * Определяет каким образом должен показываться оверлей.\n   *\n   * - `\"on-hover\"` – на наведение указателя мыши.\n   * - `\"always\"` – всегда показывать.\n   *\n   * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n   */\n  visibility?: 'on-hover' | 'always';\n  /**\n   * Принимает иконку.\n   *\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * Интерактивный оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  children,\n  onClick,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const appearance = useAppearance();\n  const hasPointer = useAdaptivityHasPointer();\n  const theme = themeProp ?? appearance;\n  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      type=\"button\"\n      Component=\"button\"\n      className={classNames(\n        styles['ImageBaseOverlay'],\n        visibility === 'always' && styles['ImageBaseOverlay--visible'],\n        theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n        theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n        className,\n      )}\n      hasHover={visibility === 'on-hover'}\n      hoverMode={visibility === 'on-hover' ? styles['ImageBaseOverlay--visible'] : undefined}\n      focusVisibleMode={styles['ImageBaseOverlay--focus-visible']}\n      hasActive={false}\n      onClick={onClick}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["ImageBaseOverlay","className","theme","themeProp","visibility","visibilityProp","children","onClick","restProps","appearance","useAppearance","hasPointer","useAdaptivityHasPointer","process","env","NODE_ENV","size","React","useContext","ImageBaseContext","validateOverlayIcon","name","value","Tappable","type","Component","classNames","hasHover","hoverMode","undefined","focusVisibleMode","hasActive"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;;;;+DA9CU;oBACI;uCACa;6BACV;wBACL;uBACQ;0BAEG;AAuC7B,IAAMA,mBAAmB;QAC9BC,mBAAAA,WACAC,AAAOC,mBAAPD,OACAE,AAAYC,wBAAZD,YACAE,kBAAAA,UACAC,iBAAAA,SACGC;QALHP;QACAC;QACAE;QACAE;QACAC;;IAGA,IAAME,aAAaC,IAAAA,4BAAa;IAChC,IAAMC,aAAaC,IAAAA,gDAAuB;IAC1C,IAAMV,QAAQC,sBAAAA,uBAAAA,YAAaM;IAC3B,IAAML,aAAaC,2BAAAA,4BAAAA,iBAAmBM,aAAa,aAAa;IAEhE,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIT,UAAU;YACZ,sDAAsD;YACtD,IAAM,AAAEU,OAASC,OAAMC,UAAU,CAACC,yBAAgB,EAA1CH;YACRI,IAAAA,+BAAmB,EAACJ,MAAM;gBAAEK,MAAM;gBAAYC,OAAOhB;YAAS;QAChE;IACF;IAEA,qBACE,qBAACiB,kBAAQ,8CACHf;QACJgB,MAAK;QACLC,WAAU;QACVxB,WAAWyB,IAAAA,gBAAU,0BAEnBtB,eAAe,6CACfF,UAAU,gDACVA,UAAU,8CACVD;QAEF0B,UAAUvB,eAAe;QACzBwB,WAAWxB,eAAe,+CAAmDyB;QAC7EC,gBAAgB;QAChBC,WAAW;QACXxB,SAASA;QAERD;AAGP"}

package/dist/cjs/components/ImageBase/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/context.ts"],"sourcesContent":["import * as React from 'react';\nimport { ImageBaseContextProps } from './types';\n\nexport const ImageBaseContext = React.createContext<ImageBaseContextProps>({\n  size: 0,\n});\n"],"names":["ImageBaseContext","React","createContext","size"],"mappings":";;;;+BAGaA;;;eAAAA;;;;+DAHU;AAGhB,IAAMA,mBAAmBC,OAAMC,cAAqC;IACzEC,MAAM;AACR"}
+{"version":3,"sources":["../../../../src/components/ImageBase/context.ts"],"sourcesContent":["import * as React from 'react';\nimport { ImageBaseContextProps } from './types';\n\nexport const ImageBaseContext = React.createContext<ImageBaseContextProps>({\n  size: 0,\n});\n"],"names":["ImageBaseContext","React","createContext","size"],"mappings":";;;;+BAGaA;;;eAAAA;;;;+DAHU;AAGhB,IAAMA,mBAAmBC,OAAMC,aAAa,CAAwB;IACzEC,MAAM;AACR"}

package/dist/cjs/components/ImageBase/helpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 28) {\n    return 16;\n  } else if (imageSize > 28 && imageSize <= 32) {\n    return 20;\n  } else if (imageSize > 32 && imageSize <= 44) {\n    return 24;\n  } else if (imageSize > 44 && imageSize <= 64) {\n    return 28;\n  }\n  return getFallbackIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetFallbackIconSizeByImageBaseSize.MAX_SIZE = 36 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 {\n  if (imageSize <= 36) {\n    return 12;\n  } else if (imageSize > 36 && imageSize <= 48) {\n    return 16;\n  } else if (imageSize > 48 && imageSize <= 64) {\n    return 20;\n  }\n  return getBadgeIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getOverlayIconSizeByImageBaseSize(\n  imageSize: number,\n): 12 | 16 | 18 | 20 | 24 | 28 | 32 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 24) {\n    return 16;\n  } else if (imageSize > 24 && imageSize <= 28) {\n    return 18;\n  } else if (imageSize > 28 && imageSize <= 40) {\n    return 20;\n  } else if (imageSize > 40 && imageSize <= 48) {\n    return 24;\n  } else if (imageSize > 48 && imageSize <= 88) {\n    return 28;\n  }\n  return getOverlayIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetOverlayIconSizeByImageBaseSize.MAX_SIZE = 32 as const;\n"],"names":["getFallbackIconSizeByImageBaseSize","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageSize","MAX_SIZE"],"mappings":"AAAA;;CAEC;;;;;;;;;;;IACeA,kCAAkC;eAAlCA;;IAoBAC,+BAA+B;eAA/BA;;IAgBAC,iCAAiC;eAAjCA;;;AApCT,SAASF,mCAAmCG,SAAiB;IAClE,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOH,mCAAmCI;AAC5C;AAEAJ,mCAAmCI,WAAW;AAKvC,SAASH,gCAAgCE,SAAiB;IAC/D,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOF,gCAAgCG;AACzC;AAEAH,gCAAgCG,WAAW;AAKpC,SAASF,kCACdC,SAAiB;IAEjB,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOD,kCAAkCE;AAC3C;AAEAF,kCAAkCE,WAAW"}
+{"version":3,"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 28) {\n    return 16;\n  } else if (imageSize > 28 && imageSize <= 32) {\n    return 20;\n  } else if (imageSize > 32 && imageSize <= 44) {\n    return 24;\n  } else if (imageSize > 44 && imageSize <= 64) {\n    return 28;\n  }\n  return getFallbackIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetFallbackIconSizeByImageBaseSize.MAX_SIZE = 36 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 {\n  if (imageSize <= 36) {\n    return 12;\n  } else if (imageSize > 36 && imageSize <= 48) {\n    return 16;\n  } else if (imageSize > 48 && imageSize <= 64) {\n    return 20;\n  }\n  return getBadgeIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getOverlayIconSizeByImageBaseSize(\n  imageSize: number,\n): 12 | 16 | 18 | 20 | 24 | 28 | 32 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 24) {\n    return 16;\n  } else if (imageSize > 24 && imageSize <= 28) {\n    return 18;\n  } else if (imageSize > 28 && imageSize <= 40) {\n    return 20;\n  } else if (imageSize > 40 && imageSize <= 48) {\n    return 24;\n  } else if (imageSize > 48 && imageSize <= 88) {\n    return 28;\n  }\n  return getOverlayIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetOverlayIconSizeByImageBaseSize.MAX_SIZE = 32 as const;\n"],"names":["getFallbackIconSizeByImageBaseSize","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageSize","MAX_SIZE"],"mappings":"AAAA;;CAEC;;;;;;;;;;;IACeA,kCAAkC;eAAlCA;;IAoBAC,+BAA+B;eAA/BA;;IAgBAC,iCAAiC;eAAjCA;;;AApCT,SAASF,mCAAmCG,SAAiB;IAClE,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOH,mCAAmCI,QAAQ;AACpD;AAEAJ,mCAAmCI,QAAQ,GAAG;AAKvC,SAASH,gCAAgCE,SAAiB;IAC/D,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOF,gCAAgCG,QAAQ;AACjD;AAEAH,gCAAgCG,QAAQ,GAAG;AAKpC,SAASF,kCACdC,SAAiB;IAEjB,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOD,kCAAkCE,QAAQ;AACnD;AAEAF,kCAAkCE,QAAQ,GAAG"}

package/dist/cjs/components/ImageBase/validators.js

@@ -31,14 +31,13 @@ var _types = require("./types");
  * Icon28User -> 28
  * Icon12Circle1 -> 12
  * Icon12Circle2 -> 12
+ * Icon20TextHeading1Outline -> 20
  */ function parseIconSizeByDisplayName(displayName) {
     if (typeof displayName !== "string") {
         return null;
     }
-    var rawSize = displayName.replace(/\d+$/g, "") // удаляем цифры в конце
-    .replace(/\D/g, ""); // удаляем всё, что не является числом
-    var size = Number(rawSize);
-    return size > 0 ? size : null;
+    var match = /Icon(\d+)/.exec(displayName);
+    return match ? Number(match[1]) : null;
 }
 function parseIconSizeByWidthProp(width) {
     if (typeof width !== "string" && typeof width !== "number") {

package/dist/cjs/components/ImageBase/validators.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n  const rawSize = displayName\n    .replace(/\\d+$/g, '') // удаляем цифры в конце\n    .replace(/\\D/g, ''); // удаляем всё, что не является числом\n  const size = Number(rawSize);\n  return size > 0 ? size : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number | null {\n  if (typeof width !== 'string' && typeof width !== 'number') {\n    return null;\n  }\n  const size = Number(width);\n  return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string | null {\n  return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number | string | null {\n  return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number | null {\n  const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n  const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n  return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n  name: string;\n  value: JSX.Element;\n}\n\ninterface SelectorFn {\n  (imageSize: number): number;\n  MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n  imageSize: number,\n  iconProp: IconProp,\n  selectorFn: SelectorFn,\n  logger: ReturnType<typeof warnOnce>,\n) {\n  const iconSize = getIconSizeByElement(iconProp.value);\n\n  if (iconSize === null) {\n    return;\n  }\n\n  const result = selectorFn(imageSize);\n\n  if (result === iconSize || (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n    return;\n  }\n\n  const iconName = getElementDisplayName(iconProp.value);\n  const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n  logger(\n    `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n    'log',\n  );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp) {\n  return validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getFallbackIconSizeByImageBaseSize,\n    warnImageBase,\n  );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {\n    return;\n  }\n  warnImageBase(\n    `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n      ' | ',\n    )}`,\n    'log',\n  );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n  if (imageSize < 24 && iconProp) {\n    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n  }\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getBadgeIconSizeByImageBaseSize,\n    warnImageBaseBadge,\n  );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getOverlayIconSizeByImageBaseSize,\n    warnImageBaseOverlay,\n  );\n}\n"],"names":["validateFallbackIcon","validateSize","validateBadgeIcon","validateOverlayIcon","parseIconSizeByDisplayName","displayName","rawSize","replace","size","Number","parseIconSizeByWidthProp","width","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","warnOnce","getFallbackIconSizeByImageBaseSize","mapOfExpectedSize","Set","imageBaseSizes","arrayOfSizes","Object","keys","map","str","maxSize","reduce","has","join","warnImageBaseBadge","getBadgeIconSizeByImageBaseSize","warnImageBaseOverlay","getOverlayIconSizeByImageBaseSize"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n * Icon20TextHeading1Outline -> 20\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n\n  const match = /Icon(\\d+)/.exec(displayName);\n\n  return match ? Number(match[1]) : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number | null {\n  if (typeof width !== 'string' && typeof width !== 'number') {\n    return null;\n  }\n  const size = Number(width);\n  return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string | null {\n  return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number | string | null {\n  return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number | null {\n  const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n  const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n  return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n  name: string;\n  value: JSX.Element;\n}\n\ninterface SelectorFn {\n  (imageSize: number): number;\n  MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n  imageSize: number,\n  iconProp: IconProp,\n  selectorFn: SelectorFn,\n  logger: ReturnType<typeof warnOnce>,\n) {\n  const iconSize = getIconSizeByElement(iconProp.value);\n\n  if (iconSize === null) {\n    return;\n  }\n\n  const result = selectorFn(imageSize);\n\n  if (result === iconSize || (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n    return;\n  }\n\n  const iconName = getElementDisplayName(iconProp.value);\n  const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n  logger(\n    `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n    'log',\n  );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp) {\n  return validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getFallbackIconSizeByImageBaseSize,\n    warnImageBase,\n  );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {\n    return;\n  }\n  warnImageBase(\n    `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n      ' | ',\n    )}`,\n    'log',\n  );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n  if (imageSize < 24 && iconProp) {\n    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n  }\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getBadgeIconSizeByImageBaseSize,\n    warnImageBaseBadge,\n  );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getOverlayIconSizeByImageBaseSize,\n    warnImageBaseOverlay,\n  );\n}\n"],"names":["validateFallbackIcon","validateSize","validateBadgeIcon","validateOverlayIcon","parseIconSizeByDisplayName","displayName","match","exec","Number","parseIconSizeByWidthProp","width","size","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","warnOnce","getFallbackIconSizeByImageBaseSize","mapOfExpectedSize","Set","imageBaseSizes","arrayOfSizes","Object","keys","map","str","maxSize","reduce","has","join","warnImageBaseBadge","getBadgeIconSizeByImageBaseSize","warnImageBaseOverlay","getOverlayIconSizeByImageBaseSize"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNames(styles['InfoRow'], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"strong\" className={styles['InfoRow__header']}>\n        {header}\n        <VisuallyHidden>&nbsp;</VisuallyHidden>\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"names":["InfoRow","header","children","className","restProps","Headline","Component","classNames","weight","hasReactNode","Subhead","VisuallyHidden"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;+DAdU;oBACkB;wBAChB;uBACD;8BACO;AAUxB,IAAMA,UAAU;QAAGC,gBAAAA,QAAQC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAhCH;QAAQC;QAAUC;;WAC1C,qBAACE,gEACKD;QACJE,WAAU;QACVH,WAAWI,IAAAA,iCAA8BJ;QACzCK,QAAO;QAENC,IAAAA,oBAAaR,yBACZ,qBAACS;QAAQJ,WAAU;QAASH,SAAS;OAClCF,sBACD,qBAACU,sCAAe,UAGnBT;AACO"}
+{"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNames(styles['InfoRow'], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"strong\" className={styles['InfoRow__header']}>\n        {header}\n        <VisuallyHidden>&nbsp;</VisuallyHidden>\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"names":["InfoRow","header","children","className","restProps","Headline","Component","classNames","weight","hasReactNode","Subhead","VisuallyHidden"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;+DAdU;oBACkB;wBAChB;uBACD;8BACO;AAUxB,IAAMA,UAAU;QAAGC,gBAAAA,QAAQC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAhCH;QAAQC;QAAUC;;WAC1C,qBAACE,kBAAQ,8CACHD;QACJE,WAAU;QACVH,WAAWI,IAAAA,gBAAU,iBAAoBJ;QACzCK,QAAO;QAENC,IAAAA,kBAAY,EAACR,yBACZ,qBAACS,gBAAO;QAACJ,WAAU;QAASH,SAAS;OAClCF,sBACD,qBAACU,8BAAc,QAAC,UAGnBT;AACO"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  [SizeType.COMPACT]: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n  type = 'text',\n  align = 'left',\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: InputProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['Input'],\n        align === 'right' && styles['Input--align-right'],\n        align === 'center' && styles['Input--align-center'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        before && styles['Input--hasBefore'],\n        after && styles['Input--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      mode={mode}\n      status={status}\n    >\n      <Text\n        {...restProps}\n        Component=\"input\"\n        normalize={false}\n        type={type}\n        className={styles['Input__el']}\n        getRootRef={getRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["Input","sizeYClassNames","none","SizeType","COMPACT","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","useAdaptivity","sizeY","FormField","classNames","REGULAR","disabled","Text","Component","normalize"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;;;+DAxBU;oBACI;6BACG;0BACL;yBAEiB;oBACrB;AAGrB,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAaL,IAAMJ,QAAQ;6BACnBK,MAAAA,gCAAO,4CACPC,OAAAA,kCAAQ,uBACRC,gBAAAA,QACAC,mBAAAA,WACAC,oBAAAA,YACAC,eAAAA,OACAC,gBAAAA,QACAC,eAAAA,OACAC,gBAAAA,QACAC,cAAAA,MACGC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC;QACCR,OAAOA;QACPF,WAAWW,IAAAA,+BAETb,UAAU,qCACVA,UAAU,uCACVW,UAAUd,qBAASiB,WAAWnB,eAAe,CAACgB,MAAM,EACpDN,kCACAC,gCACAJ;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPS,UAAUN,UAAUM;QACpBP,MAAMA;QACND,QAAQA;qBAER,qBAACS,wDACKP;QACJQ,WAAU;QACVC,WAAW;QACXnB,MAAMA;QACNG,SAAS;QACTC,YAAYF;;AAIpB"}
+{"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  [SizeType.COMPACT]: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n  type = 'text',\n  align = 'left',\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: InputProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['Input'],\n        align === 'right' && styles['Input--align-right'],\n        align === 'center' && styles['Input--align-center'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        before && styles['Input--hasBefore'],\n        after && styles['Input--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      mode={mode}\n      status={status}\n    >\n      <Text\n        {...restProps}\n        Component=\"input\"\n        normalize={false}\n        type={type}\n        className={styles['Input__el']}\n        getRootRef={getRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["Input","sizeYClassNames","none","SizeType","COMPACT","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","useAdaptivity","sizeY","FormField","classNames","REGULAR","disabled","Text","Component","normalize"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;;;+DAxBU;oBACI;6BACG;0BACL;yBAEiB;oBACrB;AAGrB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAaZ,IAAMJ,QAAQ;6BACnBK,MAAAA,gCAAO,4CACPC,OAAAA,kCAAQ,uBACRC,gBAAAA,QACAC,mBAAAA,WACAC,oBAAAA,YACAC,eAAAA,OACAC,gBAAAA,QACAC,eAAAA,OACAC,gBAAAA,QACAC,cAAAA,MACGC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,oBAAS;QACRR,OAAOA;QACPF,WAAWW,IAAAA,gBAAU,eAEnBb,UAAU,qCACVA,UAAU,uCACVW,UAAUd,oBAAQ,CAACiB,OAAO,IAAInB,eAAe,CAACgB,MAAM,EACpDN,kCACAC,gCACAJ;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPS,UAAUN,UAAUM,QAAQ;QAC5BP,MAAMA;QACND,QAAQA;qBAER,qBAACS,UAAI,8CACCP;QACJQ,WAAU;QACVC,WAAW;QACXnB,MAAMA;QACNG,SAAS;QACTC,YAAYF;;AAIpB"}

package/dist/cjs/components/InputLike/InputLike.js

@@ -37,24 +37,26 @@ var InputLike = function(_param) {
         "getRootRef",
         "className"
     ]);
+    var _value, _value1, _value2, _value3;
     var handleElementSelect = _react.useCallback(function(event) {
+        var _onElementSelect;
         (0, _utils.stopPropagation)(event);
-        onElementSelect === null || onElementSelect === void 0 ? void 0 : onElementSelect(index);
+        (_onElementSelect = onElementSelect) === null || _onElementSelect === void 0 ? void 0 : _onElementSelect(index);
     }, [
         index,
         onElementSelect
     ]);
     var _value_length;
     return /*#__PURE__*/ _react.createElement("span", _object_spread._({
-        className: (0, _vkjs.classNames)("vkuiInputLike", (value === null || value === void 0 ? void 0 : value.length) === length && "vkuiInputLike--full", className),
+        className: (0, _vkjs.classNames)("vkuiInputLike", ((_value = value) === null || _value === void 0 ? void 0 : _value.length) === length && "vkuiInputLike--full", className),
         tabIndex: 0,
         ref: getRootRef,
         onClick: (0, _callMultiple.callMultiple)(onClick, handleElementSelect),
         onFocus: (0, _callMultiple.callMultiple)(_utils.stopPropagation, onFocus)
-    }, props), value === null || value === void 0 ? void 0 : value.slice(0, length - 1), (value === null || value === void 0 ? void 0 : value.slice(length - 1)) && /*#__PURE__*/ _react.createElement("span", {
+    }, props), (_value1 = value) === null || _value1 === void 0 ? void 0 : _value1.slice(0, length - 1), ((_value2 = value) === null || _value2 === void 0 ? void 0 : _value2.slice(length - 1)) && /*#__PURE__*/ _react.createElement("span", {
         key: index,
         className: "vkuiInputLike__last_character"
-    }, value.slice(length - 1)), getMaskElements(length - ((_value_length = value === null || value === void 0 ? void 0 : value.length) !== null && _value_length !== void 0 ? _value_length : 0)));
+    }, value.slice(length - 1)), getMaskElements(length - ((_value_length = (_value3 = value) === null || _value3 === void 0 ? void 0 : _value3.length) !== null && _value_length !== void 0 ? _value_length : 0)));
 };
 InputLike.displayName = "InputLike";
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { HasRootRef } from '../../types';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    HasRootRef<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: string;\n  onElementSelect?(index: number): void;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n  const result = [];\n  for (let index = 0; index < length; index += 1) {\n    result.push(\n      <span key={index} className={styles['InputLike__mask']}>\n        {MASK_SYMBOL}\n      </span>,\n    );\n  }\n  return result;\n}\n\nexport const InputLike = ({\n  value,\n  length,\n  index,\n  onElementSelect,\n  onClick,\n  onFocus,\n  getRootRef,\n  className,\n  ...props\n}: InputLikeProps) => {\n  const handleElementSelect = React.useCallback(\n    (event: React.MouseEvent<HTMLSpanElement>) => {\n      stopPropagation(event);\n      onElementSelect?.(index);\n    },\n    [index, onElementSelect],\n  );\n\n  return (\n    <span\n      className={classNames(\n        styles['InputLike'],\n        value?.length === length && styles['InputLike--full'],\n        className,\n      )}\n      tabIndex={0}\n      ref={getRootRef}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...props}\n    >\n      {value?.slice(0, length - 1)}\n      {value?.slice(length - 1) && (\n        <span key={index} className={styles['InputLike__last_character']}>\n          {value.slice(length - 1)}\n        </span>\n      )}\n      {getMaskElements(length - (value?.length ?? 0))}\n    </span>\n  );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["InputLike","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","key","className","value","onElementSelect","onClick","onFocus","getRootRef","props","handleElementSelect","React","useCallback","event","stopPropagation","classNames","tabIndex","ref","callMultiple","slice","displayName"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;+DA9BU;oBACI;4BACE;qBACG;AAahC,IAAMC,cAAcC,OAAOC,aAAa;AAExC,SAASC,gBAAgBC,MAAc;IACrC,IAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,mBACL,qBAACC;YAAKC,KAAKH;YAAOI,SAAS;WACxBV;IAGP;IACA,OAAOK;AACT;AAEO,IAAMN,YAAY;QACvBY,eAAAA,OACAP,gBAAAA,QACAE,eAAAA,OACAM,yBAAAA,iBACAC,iBAAAA,SACAC,iBAAAA,SACAC,oBAAAA,YACAL,mBAAAA,WACGM;QARHL;QACAP;QACAE;QACAM;QACAC;QACAC;QACAC;QACAL;;IAGA,IAAMO,sBAAsBC,OAAMC,YAChC,SAACC;QACCC,IAAAA,wBAAgBD;QAChBR,4BAAAA,6BAAAA,KAAAA,IAAAA,gBAAkBN;IACpB,GACA;QAACA;QAAOM;KAAgB;QAsBKD;IAnB/B,qBACE,qBAACH;QACCE,WAAWY,IAAAA,mCAETX,CAAAA,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOP,MAAK,MAAMA,iCAClBM;QAEFa,UAAU;QACVC,KAAKT;QACLF,SAASY,IAAAA,4BAAaZ,SAASI;QAC/BH,SAASW,IAAAA,4BAAaJ,wBAAiBP;OACnCE,QAEHL,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOe,MAAM,GAAGtB,SAAS,IACzBO,CAAAA,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOe,MAAMtB,SAAS,qBACrB,qBAACI;QAAKC,KAAKH;QAAOI,SAAS;OACxBC,MAAMe,MAAMtB,SAAS,KAGzBD,gBAAgBC,SAAUO,CAAAA,CAAAA,gBAAAA,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOP,oBAAPO,2BAAAA,gBAAiB,CAAA;AAGlD;AAEAZ,UAAU4B,cAAc"}
+{"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { HasRootRef } from '../../types';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    HasRootRef<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: string;\n  onElementSelect?(index: number): void;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n  const result = [];\n  for (let index = 0; index < length; index += 1) {\n    result.push(\n      <span key={index} className={styles['InputLike__mask']}>\n        {MASK_SYMBOL}\n      </span>,\n    );\n  }\n  return result;\n}\n\nexport const InputLike = ({\n  value,\n  length,\n  index,\n  onElementSelect,\n  onClick,\n  onFocus,\n  getRootRef,\n  className,\n  ...props\n}: InputLikeProps) => {\n  const handleElementSelect = React.useCallback(\n    (event: React.MouseEvent<HTMLSpanElement>) => {\n      stopPropagation(event);\n      onElementSelect?.(index);\n    },\n    [index, onElementSelect],\n  );\n\n  return (\n    <span\n      className={classNames(\n        styles['InputLike'],\n        value?.length === length && styles['InputLike--full'],\n        className,\n      )}\n      tabIndex={0}\n      ref={getRootRef}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...props}\n    >\n      {value?.slice(0, length - 1)}\n      {value?.slice(length - 1) && (\n        <span key={index} className={styles['InputLike__last_character']}>\n          {value.slice(length - 1)}\n        </span>\n      )}\n      {getMaskElements(length - (value?.length ?? 0))}\n    </span>\n  );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["InputLike","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","key","className","value","onElementSelect","onClick","onFocus","getRootRef","props","handleElementSelect","React","useCallback","event","stopPropagation","classNames","tabIndex","ref","callMultiple","slice","displayName"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;+DA9BU;oBACI;4BACE;qBACG;AAahC,IAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc;IACrC,IAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,qBAACC;YAAKC,KAAKH;YAAOI,SAAS;WACxBV;IAGP;IACA,OAAOK;AACT;AAEO,IAAMN,YAAY;QACvBY,eAAAA,OACAP,gBAAAA,QACAE,eAAAA,OACAM,yBAAAA,iBACAC,iBAAAA,SACAC,iBAAAA,SACAC,oBAAAA,YACAL,mBAAAA,WACGM;QARHL;QACAP;QACAE;QACAM;QACAC;QACAC;QACAC;QACAL;;QAeMC,QASDA,SACAA,SAK0BA;IA3B/B,IAAMM,sBAAsBC,OAAMC,WAAW,CAC3C,SAACC;YAECR;QADAS,IAAAA,sBAAe,EAACD;SAChBR,mBAAAA,6BAAAA,uCAAAA,iBAAkBN;IACpB,GACA;QAACA;QAAOM;KAAgB;QAsBKD;IAnB/B,qBACE,qBAACH;QACCE,WAAWY,IAAAA,gBAAU,mBAEnBX,EAAAA,SAAAA,mBAAAA,6BAAAA,OAAOP,MAAM,MAAKA,iCAClBM;QAEFa,UAAU;QACVC,KAAKT;QACLF,SAASY,IAAAA,0BAAY,EAACZ,SAASI;QAC/BH,SAASW,IAAAA,0BAAY,EAACJ,sBAAe,EAAEP;OACnCE,SAEHL,UAAAA,mBAAAA,8BAAAA,QAAOe,KAAK,CAAC,GAAGtB,SAAS,IACzBO,EAAAA,UAAAA,mBAAAA,8BAAAA,QAAOe,KAAK,CAACtB,SAAS,qBACrB,qBAACI;QAAKC,KAAKH;QAAOI,SAAS;OACxBC,MAAMe,KAAK,CAACtB,SAAS,KAGzBD,gBAAgBC,SAAUO,CAAAA,CAAAA,iBAAAA,UAAAA,mBAAAA,8BAAAA,QAAOP,MAAM,cAAbO,2BAAAA,gBAAiB,CAAA;AAGlD;AAEAZ,UAAU4B,WAAW,GAAG"}

package/dist/cjs/components/InputLike/InputLikeDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './InputLike.module.css';\n\nexport const InputLikeDivider = ({\n  children,\n  className,\n  ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span className={classNames(styles['InputLike__divider'], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"names":["InputLikeDivider","children","className","props","span","classNames"],"mappings":";;;;+BAIaA;;;eAAAA;;;;;;+DAJU;oBACI;AAGpB,IAAMA,mBAAmB;QAC9BC,kBAAAA,UACAC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,qBACE,qBAACE;QAAKF,WAAWG,IAAAA,4CAAyCH;OAAgBC,QACvEF;AAGP"}
+{"version":3,"sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './InputLike.module.css';\n\nexport const InputLikeDivider = ({\n  children,\n  className,\n  ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span className={classNames(styles['InputLike__divider'], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"names":["InputLikeDivider","children","className","props","span","classNames"],"mappings":";;;;+BAIaA;;;eAAAA;;;;;;+DAJU;oBACI;AAGpB,IAAMA,mBAAmB;QAC9BC,kBAAAA,UACAC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,qBACE,qBAACE;QAAKF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAAgBC,QACvEF;AAGP"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends TappableProps {\n  /**\n   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет\n   */\n  hasVisited?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Link\n */\nexport const Link = ({ hasVisited, children, className, ...restProps }: LinkProps) => {\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}\n      hasHover={false}\n      activeMode=\"opacity\"\n      focusVisibleMode={styles['Link--focus-visible']}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["Link","hasVisited","children","className","restProps","Tappable","Component","href","classNames","hasHover","activeMode","focusVisibleMode"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;oBACI;wBACa;AAajC,IAAMA,OAAO;QAAGC,oBAAAA,YAAYC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAApCH;QAAYC;QAAUC;;IAC3C,qBACE,qBAACE;QACCC,WAAWF,UAAUG,OAAO,MAAM;OAC9BH;QACJD,WAAWK,IAAAA,8BAA2BP,uCAA2CE;QACjFM,UAAU;QACVC,YAAW;QACXC,gBAAgB;QAEfT;AAGP"}
+{"version":3,"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends TappableProps {\n  /**\n   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет\n   */\n  hasVisited?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Link\n */\nexport const Link = ({ hasVisited, children, className, ...restProps }: LinkProps) => {\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}\n      hasHover={false}\n      activeMode=\"opacity\"\n      focusVisibleMode={styles['Link--focus-visible']}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["Link","hasVisited","children","className","restProps","Tappable","Component","href","classNames","hasHover","activeMode","focusVisibleMode"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;oBACI;wBACa;AAajC,IAAMA,OAAO;QAAGC,oBAAAA,YAAYC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAApCH;QAAYC;QAAUC;;IAC3C,qBACE,qBAACE,kBAAQ;QACPC,WAAWF,UAAUG,IAAI,GAAG,MAAM;OAC9BH;QACJD,WAAWK,IAAAA,gBAAU,cAAiBP,uCAA2CE;QACjFM,UAAU;QACVC,YAAW;QACXC,gBAAgB;QAEfT;AAGP"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ListContext } from './ListContext';\nimport styles from './List.module.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, className, ...restProps }: ListProps) => {\n  const [isDragging, toggleDrag] = React.useState(false);\n\n  return (\n    <div\n      role=\"list\"\n      {...restProps}\n      className={classNames(styles['List'], isDragging && 'vkuiInternalList--dragging', className)}\n    >\n      <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>\n        {children}\n      </ListContext.Provider>\n    </div>\n  );\n};\n"],"names":["List","children","className","restProps","React","useState","isDragging","toggleDrag","div","role","classNames","ListContext","Provider","value","useMemo"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;;;+DAVU;oBACI;2BACC;AAQrB,IAAMA,OAAO;QAAGC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAxBF;QAAUC;;IAC/B,IAAiCE,qCAAAA,OAAMC,SAAS,YAAzCC,aAA0BF,oBAAdG,aAAcH;IAEjC,qBACE,qBAACI;QACCC,MAAK;OACDN;QACJD,WAAWQ,IAAAA,8BAA2BJ,cAAc,8BAA8BJ;sBAElF,qBAACS,yBAAYC;QAASC,OAAOT,OAAMU,QAAQ;mBAAO;gBAAEP,YAAAA;YAAW;WAAI,EAAE;OAClEN;AAIT"}
+{"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ListContext } from './ListContext';\nimport styles from './List.module.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, className, ...restProps }: ListProps) => {\n  const [isDragging, toggleDrag] = React.useState(false);\n\n  return (\n    <div\n      role=\"list\"\n      {...restProps}\n      className={classNames(styles['List'], isDragging && 'vkuiInternalList--dragging', className)}\n    >\n      <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>\n        {children}\n      </ListContext.Provider>\n    </div>\n  );\n};\n"],"names":["List","children","className","restProps","React","useState","isDragging","toggleDrag","div","role","classNames","ListContext","Provider","value","useMemo"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;;;+DAVU;oBACI;2BACC;AAQrB,IAAMA,OAAO;QAAGC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAxBF;QAAUC;;IAC/B,IAAiCE,qCAAAA,OAAMC,QAAQ,CAAC,YAAzCC,aAA0BF,oBAAdG,aAAcH;IAEjC,qBACE,qBAACI;QACCC,MAAK;OACDN;QACJD,WAAWQ,IAAAA,gBAAU,cAAiBJ,cAAc,8BAA8BJ;sBAElF,qBAACS,wBAAW,CAACC,QAAQ;QAACC,OAAOT,OAAMU,OAAO,CAAC;mBAAO;gBAAEP,YAAAA;YAAW;WAAI,EAAE;OAClEN;AAIT"}

package/dist/cjs/components/List/ListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/List/ListContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\n\nexport const ListContext = React.createContext({\n  toggleDrag: noop as (value: boolean) => void,\n});\n"],"names":["ListContext","React","createContext","toggleDrag","noop"],"mappings":";;;;+BAGaA;;;eAAAA;;;;+DAHU;oBACF;AAEd,IAAMA,cAAcC,OAAMC,cAAc;IAC7CC,YAAYC;AACd"}
+{"version":3,"sources":["../../../../src/components/List/ListContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\n\nexport const ListContext = React.createContext({\n  toggleDrag: noop as (value: boolean) => void,\n});\n"],"names":["ListContext","React","createContext","toggleDrag","noop"],"mappings":";;;;+BAGaA;;;eAAAA;;;;+DAHU;oBACF;AAEd,IAAMA,cAAcC,OAAMC,aAAa,CAAC;IAC7CC,YAAYC,UAAI;AAClB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface LocaleProviderProps {\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  value: ConfigProviderContextInterface['locale'];\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, прокидывающий локаль. Список можно найти в\n * [реестре языковых подметок IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)\n *\n * @since 5.0.0\n * @see https://vkcom.github.io/VKUI/#/LocaleProvider\n */\nexport function LocaleProvider({ value, children }: LocaleProviderProps) {\n  return <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>;\n}\n"],"names":["LocaleProvider","value","children","ConfigProviderOverride","locale"],"mappings":";;;;+BAmBgBA;;;eAAAA;;;;8DAnBE;sCAEqB;AAiBhC,SAASA,eAAe,KAAwC;QAAtCC,QAAF,MAAEA,OAAOC,WAAT,MAASA;IACtC,qBAAO,6BAACC;QAAuBC,QAAQH;OAAQC;AACjD"}
+{"version":3,"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface LocaleProviderProps {\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  value: ConfigProviderContextInterface['locale'];\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, прокидывающий локаль. Список можно найти в\n * [реестре языковых подметок IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)\n *\n * @since 5.0.0\n * @see https://vkcom.github.io/VKUI/#/LocaleProvider\n */\nexport function LocaleProvider({ value, children }: LocaleProviderProps) {\n  return <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>;\n}\n"],"names":["LocaleProvider","value","children","ConfigProviderOverride","locale"],"mappings":";;;;+BAmBgBA;;;eAAAA;;;;8DAnBE;sCAEqB;AAiBhC,SAASA,eAAe,KAAwC;QAAtCC,QAAF,MAAEA,OAAOC,WAAT,MAASA;IACtC,qBAAO,6BAACC,8CAAsB;QAACC,QAAQH;OAAQC;AACjD"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './MiniInfoCell.module.css';\n\nexport interface MiniInfoCellProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Иконка слева.<br />\n   * Рекомендуется использовать иконки размера 20.\n   */\n  before: React.ReactNode;\n\n  /**\n   * Содержимое справа.<br />\n   * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Тип ячейки:\n   *\n   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n   */\n  mode?: 'base' | 'accent' | 'add' | 'more';\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: 'nowrap' | 'short' | 'full';\n\n  /**\n   * Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  children,\n  mode = 'base',\n  textWrap = 'nowrap',\n  expandable = false,\n  className,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const cellClasses = classNames(\n    styles['MiniInfoCell'],\n    {\n      nowrap: styles['MiniInfoCell--textWrap-nowrap'],\n      full: styles['MiniInfoCell--textWrap-full'],\n      short: styles['MiniInfoCell--textWrap-short'],\n    }[textWrap],\n    mode !== 'base' &&\n      {\n        add: styles['MiniInfoCell--mode-add'],\n        accent: styles['MiniInfoCell--mode-accent'],\n        more: styles['MiniInfoCell--mode-more'],\n      }[mode],\n    className,\n  );\n\n  const cellContent = (\n    <React.Fragment>\n      <span className={styles['MiniInfoCell__before']}>{before}</span>\n      <div className={styles['MiniInfoCell__middle']}>\n        <Paragraph\n          className={styles['MiniInfoCell__content']}\n          weight={mode === 'more' ? '2' : undefined}\n        >\n          {children}\n        </Paragraph>\n        {expandable && <Icon16Chevron />}\n      </div>\n      {hasReactNode(after) && <span className={styles['MiniInfoCell__after']}>{after}</span>}\n    </React.Fragment>\n  );\n\n  return restProps.onClick ? (\n    <Tappable Component=\"div\" role=\"button\" {...restProps} className={cellClasses}>\n      {cellContent}\n    </Tappable>\n  ) : (\n    <div {...restProps} className={cellClasses}>\n      {cellContent}\n    </div>\n  );\n};\n"],"names":["MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","classNames","nowrap","full","short","add","accent","more","cellContent","React","Fragment","span","div","Paragraph","weight","undefined","Icon16Chevron","hasReactNode","onClick","Tappable","Component","role"],"mappings":";;;;+BAgDaA;;;eAAAA;;;;;;;+DAhDU;qBACO;oBACW;wBAChB;yBACC;AA4CnB,IAAMA,eAAe;QAC1BC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAC,MAAAA,gCAAO,+CACPC,UAAAA,wCAAW,uDACXC,YAAAA,4CAAa,2BACbC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,cAAcC,IAAAA,sCAElB;QACEC,MAAM;QACNC,IAAI;QACJC,KAAK;IACP,CAAC,CAACR,SAAS,EACXD,SAAS,UACP,CAAA;QACEU,GAAG;QACHC,MAAM;QACNC,IAAI;IACN,CAAA,CAAC,CAACZ,KAAK,EACTG;IAGF,IAAMU,4BACJ,qBAACC,OAAMC,8BACL,qBAACC;QAAKb,SAAS;OAAmCN,uBAClD,qBAACoB;QAAId,SAAS;qBACZ,qBAACe;QACCf,SAAS;QACTgB,QAAQnB,SAAS,SAAS,MAAMoB;OAE/BrB,WAEFG,4BAAc,qBAACmB,8BAEjBC,IAAAA,oBAAaxB,wBAAU,qBAACkB;QAAKb,SAAS;OAAkCL;IAI7E,OAAOM,UAAUmB,wBACf,qBAACC;QAASC,WAAU;QAAMC,MAAK;OAAatB;QAAWD,WAAWE;QAC/DQ,6BAGH,qBAACI,mDAAQb;QAAWD,WAAWE;QAC5BQ;AAGP"}
+{"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './MiniInfoCell.module.css';\n\nexport interface MiniInfoCellProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Иконка слева.<br />\n   * Рекомендуется использовать иконки размера 20.\n   */\n  before: React.ReactNode;\n\n  /**\n   * Содержимое справа.<br />\n   * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Тип ячейки:\n   *\n   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n   */\n  mode?: 'base' | 'accent' | 'add' | 'more';\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: 'nowrap' | 'short' | 'full';\n\n  /**\n   * Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  children,\n  mode = 'base',\n  textWrap = 'nowrap',\n  expandable = false,\n  className,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const cellClasses = classNames(\n    styles['MiniInfoCell'],\n    {\n      nowrap: styles['MiniInfoCell--textWrap-nowrap'],\n      full: styles['MiniInfoCell--textWrap-full'],\n      short: styles['MiniInfoCell--textWrap-short'],\n    }[textWrap],\n    mode !== 'base' &&\n      {\n        add: styles['MiniInfoCell--mode-add'],\n        accent: styles['MiniInfoCell--mode-accent'],\n        more: styles['MiniInfoCell--mode-more'],\n      }[mode],\n    className,\n  );\n\n  const cellContent = (\n    <React.Fragment>\n      <span className={styles['MiniInfoCell__before']}>{before}</span>\n      <div className={styles['MiniInfoCell__middle']}>\n        <Paragraph\n          className={styles['MiniInfoCell__content']}\n          weight={mode === 'more' ? '2' : undefined}\n        >\n          {children}\n        </Paragraph>\n        {expandable && <Icon16Chevron />}\n      </div>\n      {hasReactNode(after) && <span className={styles['MiniInfoCell__after']}>{after}</span>}\n    </React.Fragment>\n  );\n\n  return restProps.onClick ? (\n    <Tappable Component=\"div\" role=\"button\" {...restProps} className={cellClasses}>\n      {cellContent}\n    </Tappable>\n  ) : (\n    <div {...restProps} className={cellClasses}>\n      {cellContent}\n    </div>\n  );\n};\n"],"names":["MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","classNames","nowrap","full","short","add","accent","more","cellContent","React","Fragment","span","div","Paragraph","weight","undefined","Icon16Chevron","hasReactNode","onClick","Tappable","Component","role"],"mappings":";;;;+BAgDaA;;;eAAAA;;;;;;;+DAhDU;qBACO;oBACW;wBAChB;yBACC;AA4CnB,IAAMA,eAAe;QAC1BC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAC,MAAAA,gCAAO,+CACPC,UAAAA,wCAAW,uDACXC,YAAAA,4CAAa,2BACbC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,cAAcC,IAAAA,gBAAU,sBAE5B;QACEC,MAAM;QACNC,IAAI;QACJC,KAAK;IACP,CAAC,CAACR,SAAS,EACXD,SAAS,UACP,CAAA;QACEU,GAAG;QACHC,MAAM;QACNC,IAAI;IACN,CAAA,CAAC,CAACZ,KAAK,EACTG;IAGF,IAAMU,4BACJ,qBAACC,OAAMC,QAAQ,sBACb,qBAACC;QAAKb,SAAS;OAAmCN,uBAClD,qBAACoB;QAAId,SAAS;qBACZ,qBAACe,oBAAS;QACRf,SAAS;QACTgB,QAAQnB,SAAS,SAAS,MAAMoB;OAE/BrB,WAEFG,4BAAc,qBAACmB,oBAAa,UAE9BC,IAAAA,kBAAY,EAACxB,wBAAU,qBAACkB;QAAKb,SAAS;OAAkCL;IAI7E,OAAOM,UAAUmB,OAAO,iBACtB,qBAACC,kBAAQ;QAACC,WAAU;QAAMC,MAAK;OAAatB;QAAWD,WAAWE;QAC/DQ,6BAGH,qBAACI,mDAAQb;QAAWD,WAAWE;QAC5BQ;AAGP"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport styles from './ModalCard.module.css';\n\nconst platformClassNames = {\n  ios: styles['ModalCard--ios'],\n  android: styles['ModalCard--android'],\n  vkcom: styles['ModalCard--vkcom'],\n};\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  nav,\n  id,\n  className,\n  size,\n  getRootRef,\n  ...restProps\n}: ModalCardProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.CARD);\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      id={id}\n      className={classNames(\n        styles['ModalCard'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isDesktop && styles['ModalCard--desktop'],\n        className,\n      )}\n    >\n      <ModalCardBase\n        className={styles['ModalCard__in']}\n        getRootRef={refs.innerElement}\n        icon={icon}\n        header={header}\n        subheader={subheader}\n        actions={actions}\n        onClose={onClose || modalContext.onClose}\n        size={size}\n      >\n        {children}\n      </ModalCardBase>\n    </div>\n  );\n};\n"],"names":["ModalCard","platformClassNames","ios","android","vkcom","warn","warnOnce","icon","header","subheader","children","actions","onClose","nav","id","className","size","getRootRef","restProps","isDesktop","useAdaptivityWithJSMediaQueries","platform","usePlatform","modalContext","React","useContext","ModalRootContext","refs","useModalRegistry","getNavId","ModalType","CARD","div","ref","classNames","hasOwnProperty","ModalCardBase","innerElement"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;;+DAxBU;oBACI;+CACqB;2BACpB;wBACS;wBACZ;6BACyB;gCACC;qBACzB;AAG1B,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAIA,IAAMC,OAAOC,IAAAA,oBAAS;AAKf,IAAMN,YAAY;QACvBO,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,iBAAAA,SACAC,aAAAA,KACAC,YAAAA,IACAC,mBAAAA,WACAC,cAAAA,MACAC,oBAAAA,YACGC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,YAAcC,IAAAA,oEAAdD;IACR,IAAME,WAAWC,IAAAA;IAEjB,IAAMC,eAAeC,OAAMC,WAAWC;IACtC,IAAM,AAAEC,OAASC,IAAAA,oCAAiBC,IAAAA,oBAAS;QAAEhB,KAAAA;QAAKC,IAAAA;IAAG,GAAGT,OAAOyB,iBAAUC,MAAjEJ;IAER,qBACE,qBAACK,mDACKd;QACJe,KAAKhB;QACLH,IAAIA;QACJC,WAAWmB,IAAAA,mCAETjC,mBAAmBkC,eAAed,YAC9BpB,kBAAkB,CAACoB,SAAS,GAC5BpB,mBAAmBE,SACvBgB,uCACAJ;sBAGF,qBAACqB;QACCrB,SAAS;QACTE,YAAYU,KAAKU;QACjB9B,MAAMA;QACNC,QAAQA;QACRC,WAAWA;QACXE,SAASA;QACTC,SAASA,WAAWW,aAAaX;QACjCI,MAAMA;OAELN;AAIT"}
+{"version":3,"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport styles from './ModalCard.module.css';\n\nconst platformClassNames = {\n  ios: styles['ModalCard--ios'],\n  android: styles['ModalCard--android'],\n  vkcom: styles['ModalCard--vkcom'],\n};\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  nav,\n  id,\n  className,\n  size,\n  getRootRef,\n  ...restProps\n}: ModalCardProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.CARD);\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      id={id}\n      className={classNames(\n        styles['ModalCard'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isDesktop && styles['ModalCard--desktop'],\n        className,\n      )}\n    >\n      <ModalCardBase\n        className={styles['ModalCard__in']}\n        getRootRef={refs.innerElement}\n        icon={icon}\n        header={header}\n        subheader={subheader}\n        actions={actions}\n        onClose={onClose || modalContext.onClose}\n        size={size}\n      >\n        {children}\n      </ModalCardBase>\n    </div>\n  );\n};\n"],"names":["ModalCard","platformClassNames","ios","android","vkcom","warn","warnOnce","icon","header","subheader","children","actions","onClose","nav","id","className","size","getRootRef","restProps","isDesktop","useAdaptivityWithJSMediaQueries","platform","usePlatform","modalContext","React","useContext","ModalRootContext","refs","useModalRegistry","getNavId","ModalType","CARD","div","ref","classNames","hasOwnProperty","ModalCardBase","innerElement"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;;+DAxBU;oBACI;+CACqB;2BACpB;wBACS;wBACZ;6BACyB;gCACC;qBACzB;AAG1B,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAIA,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,YAAY;QACvBO,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,iBAAAA,SACAC,aAAAA,KACAC,YAAAA,IACAC,mBAAAA,WACAC,cAAAA,MACAC,oBAAAA,YACGC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,YAAcC,IAAAA,gEAA+B,IAA7CD;IACR,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,eAAeC,OAAMC,UAAU,CAACC,kCAAgB;IACtD,IAAM,AAAEC,OAASC,IAAAA,kCAAgB,EAACC,IAAAA,kBAAQ,EAAC;QAAEhB,KAAAA;QAAKC,IAAAA;IAAG,GAAGT,OAAOyB,gBAAS,CAACC,IAAI,EAArEJ;IAER,qBACE,qBAACK,mDACKd;QACJe,KAAKhB;QACLH,IAAIA;QACJC,WAAWmB,IAAAA,gBAAU,mBAEnBjC,mBAAmBkC,cAAc,CAACd,YAC9BpB,kBAAkB,CAACoB,SAAS,GAC5BpB,mBAAmBE,OAAO,EAC9BgB,uCACAJ;sBAGF,qBAACqB,4BAAa;QACZrB,SAAS;QACTE,YAAYU,KAAKU,YAAY;QAC7B9B,MAAMA;QACNC,QAAQA;QACRC,WAAWA;QACXE,SAASA;QACTC,SAASA,WAAWW,aAAaX,OAAO;QACxCI,MAAMA;OAELN;AAIT"}

package/dist/cjs/components/ModalCardBase/ModalCardBase.js

@@ -18,16 +18,13 @@ var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
 var _useKeyboard = require("../../hooks/useKeyboard");
 var _usePlatform = require("../../hooks/usePlatform");
+var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
+var _AdaptivityContext = require("../AdaptivityProvider/AdaptivityContext");
 var _ModalDismissButton = require("../ModalDismissButton/ModalDismissButton");
 var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
 var _Subhead = require("../Typography/Subhead/Subhead");
 var _Title = require("../Typography/Title/Title");
-var platformClassNames = {
-    ios: "vkuiModalCardBase--ios",
-    android: "vkuiModalCardBase--android",
-    vkcom: "vkuiModalCardBase--vkcom"
-};
 var ModalCardBase = function(_param) {
     var getRootRef = _param.getRootRef, icon = _param.icon, header = _param.header, subheader = _param.subheader, children = _param.children, actions = _param.actions, onClose = _param.onClose, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Скрыть" : _param_dismissLabel, className = _param.className, style = _param.style, sizeProp = _param.size, restProps = _object_without_properties._(_param, [
         "getRootRef",
@@ -48,7 +45,7 @@ var ModalCardBase = function(_param) {
     var canShowCloseButtonIOS = platform === _platform.Platform.IOS && !isDesktop;
     var size = isDesktop ? sizeProp : undefined;
     return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiInternalModalCardBase", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isDesktop && "vkuiModalCardBase--desktop", className),
+        className: (0, _vkjs.classNames)("vkuiInternalModalCardBase", platform === _platform.Platform.IOS && "vkuiModalCardBase--ios", isDesktop && "vkuiModalCardBase--desktop", className),
         ref: getRootRef,
         style: _object_spread_props._(_object_spread._({}, style), {
             maxWidth: size
@@ -61,9 +58,13 @@ var ModalCardBase = function(_param) {
         level: "2",
         weight: "2",
         className: (0, _vkjs.classNames)("vkuiModalCardBase__header", "vkuiInternalModalCardBase__header")
-    }, header), (0, _vkjs.hasReactNode)(subheader) && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
+    }, header), (0, _vkjs.hasReactNode)(subheader) && /*#__PURE__*/ _react.createElement(_AdaptivityContext.AdaptivityContext.Provider, {
+        value: {
+            sizeY: _adaptivity.SizeType.REGULAR
+        }
+    }, /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
         className: (0, _vkjs.classNames)("vkuiModalCardBase__subheader", "vkuiInternalModalCardBase__subheader")
-    }, subheader), children, (0, _vkjs.hasReactNode)(actions) && /*#__PURE__*/ _react.createElement("div", {
+    }, subheader)), children, (0, _vkjs.hasReactNode)(actions) && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiModalCardBase__actions"
     }, actions), isDesktop && /*#__PURE__*/ _react.createElement(_ModalDismissButton.ModalDismissButton, {
         onClick: onClose

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ModalCardBase.module.css';\n\nconst platformClassNames = {\n  ios: styles['ModalCardBase--ios'],\n  android: styles['ModalCardBase--android'],\n  vkcom: styles['ModalCardBase--vkcom'],\n};\n\nexport interface ModalCardBaseProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Иконка.\n   *\n   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Заголовок карточки\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Подзаголовок\n   */\n  subheader?: React.ReactNode;\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   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n  getRootRef,\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  dismissLabel = 'Скрыть',\n  className,\n  style,\n  size: sizeProp,\n  ...restProps\n}: ModalCardBaseProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n  const canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;\n\n  const size = isDesktop ? sizeProp : undefined;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        'vkuiInternalModalCardBase',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isDesktop && styles['ModalCardBase--desktop'],\n        className,\n      )}\n      ref={getRootRef}\n      style={{\n        ...style,\n        maxWidth: size,\n      }}\n    >\n      <div\n        className={classNames(\n          styles['ModalCardBase__container'],\n          isSoftwareKeyboardOpened && styles['ModalCardBase__container--softwareKeyboardOpened'],\n        )}\n      >\n        {hasReactNode(icon) && <div className={styles['ModalCardBase__icon']}>{icon}</div>}\n        {hasReactNode(header) && (\n          <Title\n            level=\"2\"\n            weight=\"2\"\n            className={classNames(\n              styles['ModalCardBase__header'],\n              'vkuiInternalModalCardBase__header',\n            )}\n          >\n            {header}\n          </Title>\n        )}\n        {hasReactNode(subheader) && (\n          <Subhead\n            className={classNames(\n              styles['ModalCardBase__subheader'],\n              'vkuiInternalModalCardBase__subheader',\n            )}\n          >\n            {subheader}\n          </Subhead>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && <div className={styles['ModalCardBase__actions']}>{actions}</div>}\n\n        {isDesktop && <ModalDismissButton onClick={onClose} />}\n        {canShowCloseButtonIOS && (\n          <PanelHeaderButton\n            aria-label={dismissLabel}\n            className={styles['ModalCardBase__dismiss']}\n            onClick={onClose}\n          >\n            <Icon24Dismiss />\n          </PanelHeaderButton>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["ModalCardBase","platformClassNames","ios","android","vkcom","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","style","size","sizeProp","restProps","platform","usePlatform","isDesktop","useAdaptivityWithJSMediaQueries","isSoftwareKeyboardOpened","useKeyboard","isOpened","canShowCloseButtonIOS","Platform","IOS","undefined","div","classNames","hasOwnProperty","ref","maxWidth","hasReactNode","Title","level","weight","Subhead","ModalDismissButton","onClick","PanelHeaderButton","aria-label","Icon24Dismiss"],"mappings":";;;;+BAqEaA;;;eAAAA;;;;;;;+DArEU;qBACO;oBACW;+CACO;2BACpB;2BACA;wBACH;kCAEU;iCACD;uBACV;qBACF;AAGtB,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAmDO,IAAMJ,gBAAgB;QAC3BK,oBAAAA,YACAC,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,iBAAAA,sCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,eAAAA,OACAC,AAAMC,kBAAND,MACGE;QAXHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMG,WAAWC,IAAAA;IACjB,IAAM,AAAEC,YAAcC,IAAAA,oEAAdD;IACR,IAAME,2BAA2BC,IAAAA,4BAAcC;IAE/C,IAAMC,wBAAwBP,aAAaQ,mBAASC,OAAO,CAACP;IAE5D,IAAML,OAAOK,YAAYJ,WAAWY;IAEpC,qBACE,qBAACC,mDACKZ;QACJJ,WAAWiB,IAAAA,kBACT,6BACA7B,mBAAmB8B,eAAeb,YAC9BjB,kBAAkB,CAACiB,SAAS,GAC5BjB,mBAAmBE,SACvBiB,2CACAP;QAEFmB,KAAK3B;QACLS,OAAO,4CACFA;YACHmB,UAAUlB;;sBAGZ,qBAACc;QACChB,WAAWiB,IAAAA,kDAETR;OAGDY,IAAAA,oBAAa5B,uBAAS,qBAACuB;QAAIhB,SAAS;OAAkCP,OACtE4B,IAAAA,oBAAa3B,yBACZ,qBAAC4B;QACCC,OAAM;QACNC,QAAO;QACPxB,WAAWiB,IAAAA,+CAET;OAGDvB,SAGJ2B,IAAAA,oBAAa1B,4BACZ,qBAAC8B;QACCzB,WAAWiB,IAAAA,kDAET;OAGDtB,YAIJC,UAEAyB,IAAAA,oBAAaxB,0BAAY,qBAACmB;QAAIhB,SAAS;OAAqCH,UAE5EU,2BAAa,qBAACmB;QAAmBC,SAAS7B;QAC1Cc,uCACC,qBAACgB;QACCC,cAAY9B;QACZC,SAAS;QACT2B,SAAS7B;qBAET,qBAACgC;AAMb"}
+{"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Иконка.\n   *\n   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Заголовок карточки\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Подзаголовок\n   */\n  subheader?: React.ReactNode;\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   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n  getRootRef,\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  dismissLabel = 'Скрыть',\n  className,\n  style,\n  size: sizeProp,\n  ...restProps\n}: ModalCardBaseProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n  const canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;\n\n  const size = isDesktop ? sizeProp : undefined;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        'vkuiInternalModalCardBase',\n        platform === Platform.IOS && styles['ModalCardBase--ios'],\n        isDesktop && styles['ModalCardBase--desktop'],\n        className,\n      )}\n      ref={getRootRef}\n      style={{\n        ...style,\n        maxWidth: size,\n      }}\n    >\n      <div\n        className={classNames(\n          styles['ModalCardBase__container'],\n          isSoftwareKeyboardOpened && styles['ModalCardBase__container--softwareKeyboardOpened'],\n        )}\n      >\n        {hasReactNode(icon) && <div className={styles['ModalCardBase__icon']}>{icon}</div>}\n        {hasReactNode(header) && (\n          <Title\n            level=\"2\"\n            weight=\"2\"\n            className={classNames(\n              styles['ModalCardBase__header'],\n              'vkuiInternalModalCardBase__header',\n            )}\n          >\n            {header}\n          </Title>\n        )}\n        {hasReactNode(subheader) && (\n          <AdaptivityContext.Provider value={{ sizeY: SizeType.REGULAR }}>\n            <Subhead\n              className={classNames(\n                styles['ModalCardBase__subheader'],\n                'vkuiInternalModalCardBase__subheader',\n              )}\n            >\n              {subheader}\n            </Subhead>\n          </AdaptivityContext.Provider>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && <div className={styles['ModalCardBase__actions']}>{actions}</div>}\n\n        {isDesktop && <ModalDismissButton onClick={onClose} />}\n        {canShowCloseButtonIOS && (\n          <PanelHeaderButton\n            aria-label={dismissLabel}\n            className={styles['ModalCardBase__dismiss']}\n            onClick={onClose}\n          >\n            <Icon24Dismiss />\n          </PanelHeaderButton>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["ModalCardBase","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","style","size","sizeProp","restProps","platform","usePlatform","isDesktop","useAdaptivityWithJSMediaQueries","isSoftwareKeyboardOpened","useKeyboard","isOpened","canShowCloseButtonIOS","Platform","IOS","undefined","div","classNames","ref","maxWidth","hasReactNode","Title","level","weight","AdaptivityContext","Provider","value","sizeY","SizeType","REGULAR","Subhead","ModalDismissButton","onClick","PanelHeaderButton","aria-label","Icon24Dismiss"],"mappings":";;;;+BAiEaA;;;eAAAA;;;;;;;+DAjEU;qBACO;oBACW;+CACO;2BACpB;2BACA;0BACH;wBACA;iCAES;kCACC;iCACD;uBACV;qBACF;AAoDf,IAAMA,gBAAgB;QAC3BC,oBAAAA,YACAC,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,iBAAAA,sCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,eAAAA,OACAC,AAAMC,kBAAND,MACGE;QAXHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMG,WAAWC,IAAAA,wBAAW;IAC5B,IAAM,AAAEC,YAAcC,IAAAA,gEAA+B,IAA7CD;IACR,IAAME,2BAA2BC,IAAAA,wBAAW,IAAGC,QAAQ;IAEvD,IAAMC,wBAAwBP,aAAaQ,kBAAQ,CAACC,GAAG,IAAI,CAACP;IAE5D,IAAML,OAAOK,YAAYJ,WAAWY;IAEpC,qBACE,qBAACC,mDACKZ;QACJJ,WAAWiB,IAAAA,gBAAU,EACnB,6BACAZ,aAAaQ,kBAAQ,CAACC,GAAG,8BACzBP,2CACAP;QAEFkB,KAAK1B;QACLS,OAAO,4CACFA;YACHkB,UAAUjB;;sBAGZ,qBAACc;QACChB,WAAWiB,IAAAA,gBAAU,kCAEnBR;OAGDW,IAAAA,kBAAY,EAAC3B,uBAAS,qBAACuB;QAAIhB,SAAS;OAAkCP,OACtE2B,IAAAA,kBAAY,EAAC1B,yBACZ,qBAAC2B,YAAK;QACJC,OAAM;QACNC,QAAO;QACPvB,WAAWiB,IAAAA,gBAAU,+BAEnB;OAGDvB,SAGJ0B,IAAAA,kBAAY,EAACzB,4BACZ,qBAAC6B,oCAAiB,CAACC,QAAQ;QAACC,OAAO;YAAEC,OAAOC,oBAAQ,CAACC,OAAO;QAAC;qBAC3D,qBAACC,gBAAO;QACN9B,WAAWiB,IAAAA,gBAAU,kCAEnB;OAGDtB,aAKNC,UAEAwB,IAAAA,kBAAY,EAACvB,0BAAY,qBAACmB;QAAIhB,SAAS;OAAqCH,UAE5EU,2BAAa,qBAACwB,sCAAkB;QAACC,SAASlC;QAC1Cc,uCACC,qBAACqB,oCAAiB;QAChBC,cAAYnC;QACZC,SAAS;QACTgC,SAASlC;qBAET,qBAACqC,oBAAa;AAM1B"}