@vkontakte/vkui 5.0.3 → 5.1.2

package/dist/components/HorizontalScroll/HorizontalScrollArrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollArrow.js","names":["React","Icon24Chevron","Icon24ChevronCompactLeft","Icon16Chevron","Icon16ChevronLeft","classNamesString","Tappable","HorizontalScrollArrow","size","direction","onClick","className","restProps","ArrowIcon","styles"],"sources":["../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n  Icon16Chevron,\n  Icon16ChevronLeft,\n} from \"@vkontakte/icons\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport styles from \"./HorizontalScrollArrow.module.css\";\n\nexport interface HorizontalScrollArrowProps {\n  direction: \"left\" | \"right\";\n  size?: \"m\" | \"l\";\n  onClick(event: React.MouseEvent): void;\n  className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = \"l\",\n  direction,\n  onClick,\n  className,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === \"m\") {\n    ArrowIcon = direction === \"left\" ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === \"left\" ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      className={classNamesString(\n        styles[\"HorizontalScrollArrow\"],\n        styles[`HorizontalScrollArrow--size-${size}`],\n        styles[`HorizontalScrollArrow--direction-${direction}`],\n        className\n      )}\n      onClick={onClick}\n    >\n      <span className={styles[\"HorizontalScrollArrow__icon\"]}>\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,aAAa,EACbC,wBAAwB,EACxBC,aAAa,EACbC,iBAAiB,QACZ,kBAAkB;AACzB,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,QAAQ,QAAQ,sBAAsB;AAU/C,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OAMA;EAAA,qBALhCC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IACVC,SAAS,QAATA,SAAS;IACTC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,SAAuC;EAE3C,IAAIL,IAAI,KAAK,GAAG,EAAE;IAChBK,SAAS,GAAGJ,SAAS,KAAK,MAAM,GAAGL,iBAAiB,GAAGD,aAAa;EACtE,CAAC,MAAM;IACLU,SAAS,GAAGJ,SAAS,KAAK,MAAM,GAAGP,wBAAwB,GAAGD,aAAa;EAC7E;EAEA,oBACE,oBAAC,QAAQ,eACHW,SAAS;IACb,SAAS,EAAC,QAAQ;IAClB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,SAAS,EAAEP,gBAAgB,8BAEzBS,MAAM,uCAAgCN,IAAI,EAAG,EAC7CM,MAAM,4CAAqCL,SAAS,EAAG,EACvDE,SAAS,CACT;IACF,OAAO,EAAED;EAAQ,iBAEjB;IAAM,SAAS;EAAwC,gBACrD,oBAAC,SAAS,OAAG,CACR,CACE;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"HorizontalScrollArrow.js","names":["React","Icon24Chevron","Icon24ChevronCompactLeft","Icon16Chevron","Icon16ChevronLeft","classNames","Tappable","HorizontalScrollArrow","size","direction","onClick","className","restProps","ArrowIcon","styles"],"sources":["../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n  Icon16Chevron,\n  Icon16ChevronLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './HorizontalScrollArrow.module.css';\n\nexport interface HorizontalScrollArrowProps {\n  direction: 'left' | 'right';\n  size?: 'm' | 'l';\n  onClick(event: React.MouseEvent): void;\n  className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = 'l',\n  direction,\n  onClick,\n  className,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === 'm') {\n    ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      className={classNames(\n        styles['HorizontalScrollArrow'],\n        styles[`HorizontalScrollArrow--size-${size}`],\n        styles[`HorizontalScrollArrow--direction-${direction}`],\n        className,\n      )}\n      onClick={onClick}\n    >\n      <span className={styles['HorizontalScrollArrow__icon']}>\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,aAAa,EACbC,wBAAwB,EACxBC,aAAa,EACbC,iBAAiB,QACZ,kBAAkB;AACzB,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,sBAAsB;AAU/C,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OAMA;EAAA,qBALhCC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IACVC,SAAS,QAATA,SAAS;IACTC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,SAAuC;EAE3C,IAAIL,IAAI,KAAK,GAAG,EAAE;IAChBK,SAAS,GAAGJ,SAAS,KAAK,MAAM,GAAGL,iBAAiB,GAAGD,aAAa;EACtE,CAAC,MAAM;IACLU,SAAS,GAAGJ,SAAS,KAAK,MAAM,GAAGP,wBAAwB,GAAGD,aAAa;EAC7E;EAEA,oBACE,oBAAC,QAAQ,eACHW,SAAS;IACb,SAAS,EAAC,QAAQ;IAClB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,SAAS,EAAEP,UAAU,8BAEnBS,MAAM,uCAAgCN,IAAI,EAAG,EAC7CM,MAAM,4CAAqCL,SAAS,EAAG,EACvDE,SAAS,CACT;IACF,OAAO,EAAED;EAAQ,iBAEjB;IAAM,SAAS;EAAwC,gBACrD,oBAAC,SAAS,OAAG,CACR,CACE;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/components/HoverPopper/HoverPopper.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { PopperCommonProps } from "../Popper/Popper";
+import * as React from 'react';
+import { PopperCommonProps } from '../Popper/Popper';
 export interface HoverPopperProps extends PopperCommonProps {
     /**
      * Содержимое тултипа

package/dist/components/HoverPopper/HoverPopper.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["getRef", "content", "children", "onShownChange", "shown", "showDelay", "hideDelay"];
-import * as React from "react";
-import { Popper } from "../Popper/Popper";
-import { useEventListener } from "../../hooks/useEventListener";
-import { useTimeout } from "../../hooks/useTimeout";
-import { usePatchChildrenRef } from "../../hooks/usePatchChildrenRef";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import * as React from 'react';
+import { Popper } from '../Popper/Popper';
+import { useEventListener } from '../../hooks/useEventListener';
+import { useTimeout } from '../../hooks/useTimeout';
+import { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 export var HoverPopper = function HoverPopper(_ref) {
   var getRef = _ref.getRef,
     content = _ref.content,
@@ -23,12 +23,12 @@ export var HoverPopper = function HoverPopper(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     computedShown = _React$useState2[0],
     setComputedShown = _React$useState2[1];
-  var shown = typeof _shown === "boolean" ? _shown : computedShown;
+  var shown = typeof _shown === 'boolean' ? _shown : computedShown;
   var setShown = function setShown(value) {
-    if (typeof _shown !== "boolean") {
+    if (typeof _shown !== 'boolean') {
       setComputedShown(value);
     }
-    typeof onShownChange === "function" && onShownChange(value);
+    typeof onShownChange === 'function' && onShownChange(value);
   };
   var showTimeout = useTimeout(function () {
     setShown(true);
@@ -48,8 +48,8 @@ export var HoverPopper = function HoverPopper(_ref) {
     showTimeout.clear();
     hideTimeout.set();
   };
-  var targetEnterListener = useEventListener("pointerenter", onTargetEnter);
-  var targetLeaveListener = useEventListener("pointerleave", onTargetLeave);
+  var targetEnterListener = useEventListener('pointerenter', onTargetEnter);
+  var targetLeaveListener = useEventListener('pointerleave', onTargetLeave);
   useIsomorphicLayoutEffect(function () {
     if (childRef.current) {
       targetEnterListener.add(childRef.current);

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

@@ -1 +1 @@
-{"version":3,"file":"HoverPopper.js","names":["React","Popper","useEventListener","useTimeout","usePatchChildrenRef","useIsomorphicLayoutEffect","HoverPopper","getRef","content","children","onShownChange","_shown","shown","showDelay","hideDelay","restProps","useState","computedShown","setComputedShown","setShown","value","showTimeout","hideTimeout","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","targetLeaveListener","current","add"],"sources":["../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Popper, PopperCommonProps } from \"../Popper/Popper\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { usePatchChildrenRef } from \"../../hooks/usePatchChildrenRef\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\n\nexport interface HoverPopperProps extends PopperCommonProps {\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"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAA2B,kBAAkB;AAC5D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,yBAAyB,QAAQ,qCAAqC;AA6B/E,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACNC,MAAM,QAAbC,KAAK;IAAA,sBACLC,SAAS;IAATA,SAAS,+BAAG,GAAG;IAAA,sBACfC,SAAS;IAATA,SAAS,+BAAG,GAAG;IACZC,SAAS;EAEZ,sBAA0Cf,KAAK,CAACgB,QAAQ,CAACL,MAAM,IAAI,KAAK,CAAC;IAAA;IAAlEM,aAAa;IAAEC,gBAAgB;EAEtC,IAAMN,KAAK,GAAG,OAAOD,MAAM,KAAK,SAAS,GAAGA,MAAM,GAAGM,aAAa;EAElE,IAAME,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAc,EAAK;IACnC,IAAI,OAAOT,MAAM,KAAK,SAAS,EAAE;MAC/BO,gBAAgB,CAACE,KAAK,CAAC;IACzB;IACA,OAAOV,aAAa,KAAK,UAAU,IAAIA,aAAa,CAACU,KAAK,CAAC;EAC7D,CAAC;EAED,IAAMC,WAAW,GAAGlB,UAAU,CAAC,YAAM;IACnCgB,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC,EAAEN,SAAS,CAAC;EAEb,IAAMS,WAAW,GAAGnB,UAAU,CAAC,YAAM;IACnCgB,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC,EAAEL,SAAS,CAAC;EAEb,2BAA0BV,mBAAmB,CAACK,QAAQ,CAAC;IAAA;IAAhDc,QAAQ;IAAEC,KAAK;EAEtB,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BH,WAAW,CAACI,KAAK,EAAE;IACnBL,WAAW,CAACM,GAAG,EAAE;EACnB,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BP,WAAW,CAACK,KAAK,EAAE;IACnBJ,WAAW,CAACK,GAAG,EAAE;EACnB,CAAC;EAED,IAAME,mBAAmB,GAAG3B,gBAAgB,CAAC,cAAc,EAAEuB,aAAa,CAAC;EAC3E,IAAMK,mBAAmB,GAAG5B,gBAAgB,CAAC,cAAc,EAAE0B,aAAa,CAAC;EAE3EvB,yBAAyB,CAAC,YAAM;IAC9B,IAAIkB,QAAQ,CAACQ,OAAO,EAAE;MACpBF,mBAAmB,CAACG,GAAG,CAACT,QAAQ,CAACQ,OAAO,CAAC;MACzCD,mBAAmB,CAACE,GAAG,CAACT,QAAQ,CAACQ,OAAO,CAAC;IAC3C;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZP,KAAK,EACLZ,KAAK,iBACJ,oBAAC,MAAM,eACDG,SAAS;IACb,WAAW,EAAEO,WAAW,CAACI,KAAM;IAC/B,UAAU,EAAEE,aAAc;IAC1B,MAAM,EAAErB,MAAO;IACf,SAAS,EAAEgB;EAAS,IAEnBf,OAAO,CAEX,CACc;AAErB,CAAC"}
+{"version":3,"file":"HoverPopper.js","names":["React","Popper","useEventListener","useTimeout","usePatchChildrenRef","useIsomorphicLayoutEffect","HoverPopper","getRef","content","children","onShownChange","_shown","shown","showDelay","hideDelay","restProps","useState","computedShown","setComputedShown","setShown","value","showTimeout","hideTimeout","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","targetLeaveListener","current","add"],"sources":["../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\n\nexport interface HoverPopperProps extends PopperCommonProps {\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"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAA2B,kBAAkB;AAC5D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,yBAAyB,QAAQ,qCAAqC;AA6B/E,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACNC,MAAM,QAAbC,KAAK;IAAA,sBACLC,SAAS;IAATA,SAAS,+BAAG,GAAG;IAAA,sBACfC,SAAS;IAATA,SAAS,+BAAG,GAAG;IACZC,SAAS;EAEZ,sBAA0Cf,KAAK,CAACgB,QAAQ,CAACL,MAAM,IAAI,KAAK,CAAC;IAAA;IAAlEM,aAAa;IAAEC,gBAAgB;EAEtC,IAAMN,KAAK,GAAG,OAAOD,MAAM,KAAK,SAAS,GAAGA,MAAM,GAAGM,aAAa;EAElE,IAAME,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAc,EAAK;IACnC,IAAI,OAAOT,MAAM,KAAK,SAAS,EAAE;MAC/BO,gBAAgB,CAACE,KAAK,CAAC;IACzB;IACA,OAAOV,aAAa,KAAK,UAAU,IAAIA,aAAa,CAACU,KAAK,CAAC;EAC7D,CAAC;EAED,IAAMC,WAAW,GAAGlB,UAAU,CAAC,YAAM;IACnCgB,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC,EAAEN,SAAS,CAAC;EAEb,IAAMS,WAAW,GAAGnB,UAAU,CAAC,YAAM;IACnCgB,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC,EAAEL,SAAS,CAAC;EAEb,2BAA0BV,mBAAmB,CAACK,QAAQ,CAAC;IAAA;IAAhDc,QAAQ;IAAEC,KAAK;EAEtB,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BH,WAAW,CAACI,KAAK,EAAE;IACnBL,WAAW,CAACM,GAAG,EAAE;EACnB,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BP,WAAW,CAACK,KAAK,EAAE;IACnBJ,WAAW,CAACK,GAAG,EAAE;EACnB,CAAC;EAED,IAAME,mBAAmB,GAAG3B,gBAAgB,CAAC,cAAc,EAAEuB,aAAa,CAAC;EAC3E,IAAMK,mBAAmB,GAAG5B,gBAAgB,CAAC,cAAc,EAAE0B,aAAa,CAAC;EAE3EvB,yBAAyB,CAAC,YAAM;IAC9B,IAAIkB,QAAQ,CAACQ,OAAO,EAAE;MACpBF,mBAAmB,CAACG,GAAG,CAACT,QAAQ,CAACQ,OAAO,CAAC;MACzCD,mBAAmB,CAACE,GAAG,CAACT,QAAQ,CAACQ,OAAO,CAAC;IAC3C;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZP,KAAK,EACLZ,KAAK,iBACJ,oBAAC,MAAM,eACDG,SAAS;IACb,WAAW,EAAEO,WAAW,CAACI,KAAM;IAC/B,UAAU,EAAEE,aAAc;IAC1B,MAAM,EAAErB,MAAO;IACf,SAAS,EAAEgB;EAAS,IAEnBf,OAAO,CAEX,CACc;AAErB,CAAC"}

package/dist/components/IconButton/IconButton.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { TappableProps } from "../Tappable/Tappable";
+import * as React from 'react';
+import { TappableProps } from '../Tappable/Tappable';
 export interface IconButtonProps extends TappableProps {
     children?: React.ReactNode;
 }

package/dist/components/IconButton/IconButton.js

@@ -1,20 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "Component", "className"];
-import * as React from "react";
-import { Tappable } from "../Tappable/Tappable";
-import { classNamesString } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { Platform } from "../../lib/platform";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import * as React from 'react';
+import { Tappable } from '../Tappable/Tappable';
+import { classNames } from '@vkontakte/vkjs';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton
  */
 export var IconButton = function IconButton(_ref) {
   var children = _ref.children,
     _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? "button" : _ref$Component,
+    Component = _ref$Component === void 0 ? 'button' : _ref$Component,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
@@ -24,8 +24,8 @@ export var IconButton = function IconButton(_ref) {
     activeEffectDelay: 200,
     activeMode: "background"
   }, restProps, {
-    Component: restProps.href ? "a" : Component,
-    className: classNamesString("vkuiIconButton", getSizeYClassName("vkuiIconButton", sizeY), platform === Platform.IOS && "vkuiIconButton--ios", className)
+    Component: restProps.href ? 'a' : Component,
+    className: classNames("vkuiIconButton", getSizeYClassName("vkuiIconButton", sizeY), platform === Platform.IOS && "vkuiIconButton--ios", className)
   }), children);
 };
 //# sourceMappingURL=IconButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["React","Tappable","classNamesString","usePlatform","Platform","getSizeYClassName","useAdaptivity","IconButton","children","Component","className","restProps","platform","sizeY","href","IOS"],"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport styles from \"./IconButton.module.css\";\n\nexport interface IconButtonProps extends TappableProps {\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({\n  children,\n  Component = \"button\",\n  className,\n  ...restProps\n}: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      {...restProps}\n      Component={restProps.href ? \"a\" : Component}\n      className={classNamesString(\n        styles[\"IconButton\"],\n        getSizeYClassName(styles[\"IconButton\"], sizeY),\n        platform === Platform.IOS && styles[\"IconButton--ios\"],\n        className\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAwBC,QAAQ,QAAQ,sBAAsB;AAC9D,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AAOzD;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAKA;EAAA,IAJrBC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,QAAQ;IACpBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAC9B,qBAAkBG,aAAa,EAAE;IAAzBO,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,QAAQ;IACP,iBAAiB,EAAE,GAAI;IACvB,UAAU,EAAC;EAAY,GACnBF,SAAS;IACb,SAAS,EAAEA,SAAS,CAACG,IAAI,GAAG,GAAG,GAAGL,SAAU;IAC5C,SAAS,EAAEP,gBAAgB,mBAEzBG,iBAAiB,mBAAuBQ,KAAK,CAAC,EAC9CD,QAAQ,KAAKR,QAAQ,CAACW,GAAG,yBAA6B,EACtDL,SAAS;EACT,IAEDF,QAAQ,CACA;AAEf,CAAC"}
+{"version":3,"file":"IconButton.js","names":["React","Tappable","classNames","usePlatform","Platform","getSizeYClassName","useAdaptivity","IconButton","children","Component","className","restProps","platform","sizeY","href","IOS"],"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends TappableProps {\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({\n  children,\n  Component = 'button',\n  className,\n  ...restProps\n}: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      {...restProps}\n      Component={restProps.href ? 'a' : Component}\n      className={classNames(\n        styles['IconButton'],\n        getSizeYClassName(styles['IconButton'], sizeY),\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAwBC,QAAQ,QAAQ,sBAAsB;AAC9D,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AAOzD;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAKA;EAAA,IAJrBC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,QAAQ;IACpBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAC9B,qBAAkBG,aAAa,EAAE;IAAzBO,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,QAAQ;IACP,iBAAiB,EAAE,GAAI;IACvB,UAAU,EAAC;EAAY,GACnBF,SAAS;IACb,SAAS,EAAEA,SAAS,CAACG,IAAI,GAAG,GAAG,GAAGL,SAAU;IAC5C,SAAS,EAAEP,UAAU,mBAEnBG,iBAAiB,mBAAuBQ,KAAK,CAAC,EAC9CD,QAAQ,KAAKR,QAAQ,CAACW,GAAG,yBAA6B,EACtDL,SAAS;EACT,IAEDF,QAAQ,CACA;AAEf,CAAC"}

package/dist/components/Image/Image.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-import { type ImageBaseProps, type ImageBaseOverlayProps } from "../ImageBase/ImageBase";
-import { type ImageBadgeProps } from "./ImageBadge/ImageBadge";
+import { type ImageBaseProps, type ImageBaseOverlayProps } from '../ImageBase/ImageBase';
+import { type ImageBadgeProps } from './ImageBadge/ImageBadge';
 export type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };
 export declare const IMAGE_DEFAULT_SIZE = 48;
-export interface ImageProps extends Omit<ImageBaseProps, "badge"> {
+export interface ImageProps extends Omit<ImageBaseProps, 'badge'> {
     /**
      * Размер закругления.
      */
-    borderRadius?: "s" | "l" | "m";
+    borderRadius?: 's' | 'l' | 'm';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Image

package/dist/components/Image/Image.js

@@ -2,10 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size", "borderRadius", "style", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { ImageBase } from "../ImageBase/ImageBase";
-import { ImageBadge } from "./ImageBadge/ImageBadge";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { ImageBase } from '../ImageBase/ImageBase';
+import { ImageBadge } from './ImageBadge/ImageBadge';
 export var IMAGE_DEFAULT_SIZE = 48;
 /**
  * @see https://vkcom.github.io/VKUI/#/Image
@@ -14,13 +14,13 @@ export var Image = function Image(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? IMAGE_DEFAULT_SIZE : _ref$size,
     _ref$borderRadius = _ref.borderRadius,
-    borderRadiusProp = _ref$borderRadius === void 0 ? "m" : _ref$borderRadius,
+    borderRadiusProp = _ref$borderRadius === void 0 ? 'm' : _ref$borderRadius,
     style = _ref.style,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var borderRadius;
   switch (borderRadiusProp) {
-    case "s":
+    case 's':
       {
         if (size <= 32) {
           borderRadius = 2;
@@ -30,7 +30,7 @@ export var Image = function Image(_ref) {
         borderRadius = 4;
         break;
       }
-    case "m":
+    case 'm':
       {
         if (size <= 32) {
           borderRadius = 3;
@@ -44,7 +44,7 @@ export var Image = function Image(_ref) {
         borderRadius = 10;
         break;
       }
-    case "l":
+    case 'l':
       {
         if (size <= 16) {
           borderRadius = 4;
@@ -69,7 +69,7 @@ export var Image = function Image(_ref) {
     style: _objectSpread(_objectSpread({}, style), {}, {
       borderRadius: borderRadius
     }),
-    className: classNamesString("vkuiImage", className)
+    className: classNames("vkuiImage", className)
   }));
 };
 Image.Badge = ImageBadge;

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["React","classNamesString","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","Image","size","borderRadius","borderRadiusProp","style","className","restProps","Badge","Overlay"],"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport {\n  type ImageBaseProps,\n  type ImageBaseOverlayProps,\n  ImageBase,\n} from \"../ImageBase/ImageBase\";\nimport { type ImageBadgeProps, ImageBadge } from \"./ImageBadge/ImageBadge\";\nimport styles from \"./Image.module.css\";\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={classNamesString(styles[\"Image\"], className)}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAGEC,SAAS,QACJ,wBAAwB;AAC/B,SAA+BC,UAAU,QAAQ,yBAAyB;AAK1E,OAAO,IAAMC,kBAAkB,GAAG,EAAE;AASpC;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAMA;EAAA,qBALhBC,IAAI;IAAJA,IAAI,0BAAGF,kBAAkB;IAAA,yBACzBG,YAAY;IAAEC,gBAAgB,kCAAG,GAAG;IACpCC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIJ,YAAoB;EAExB,QAAQC,gBAAgB;IACtB,KAAK,GAAG;MAAE;QACR,IAAIF,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,CAAC;QAChB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,EAAE;QACjB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB;QACAA,YAAY,GAAG,EAAE;MACnB;EAAC;EAGH,oBACE,oBAAC,SAAS,eACJI,SAAS;IACb,IAAI,EAAEL,IAAK;IACX,KAAK,kCAAOG,KAAK;MAAEF,YAAY,EAAZA;IAAY,EAAG;IAClC,SAAS,EAAEN,gBAAgB,cAAkBS,SAAS;EAAE,GACxD;AAEN,CAAC;AAEDL,KAAK,CAACO,KAAK,GAAGT,UAAU;AAExBE,KAAK,CAACQ,OAAO,GAAGX,SAAS,CAACW,OAAO"}
+{"version":3,"file":"Image.js","names":["React","classNames","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","Image","size","borderRadius","borderRadiusProp","style","className","restProps","Badge","Overlay"],"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type ImageBaseProps, type ImageBaseOverlayProps, ImageBase } from '../ImageBase/ImageBase';\nimport { type ImageBadgeProps, ImageBadge } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\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={classNames(styles['Image'], className)}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAA0DC,SAAS,QAAQ,wBAAwB;AACnG,SAA+BC,UAAU,QAAQ,yBAAyB;AAK1E,OAAO,IAAMC,kBAAkB,GAAG,EAAE;AASpC;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAMA;EAAA,qBALhBC,IAAI;IAAJA,IAAI,0BAAGF,kBAAkB;IAAA,yBACzBG,YAAY;IAAEC,gBAAgB,kCAAG,GAAG;IACpCC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIJ,YAAoB;EAExB,QAAQC,gBAAgB;IACtB,KAAK,GAAG;MAAE;QACR,IAAIF,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,CAAC;QAChB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,EAAE;QACjB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB;QACAA,YAAY,GAAG,EAAE;MACnB;EAAC;EAGH,oBACE,oBAAC,SAAS,eACJI,SAAS;IACb,IAAI,EAAEL,IAAK;IACX,KAAK,kCAAOG,KAAK;MAAEF,YAAY,EAAZA;IAAY,EAAG;IAClC,SAAS,EAAEN,UAAU,cAAkBS,SAAS;EAAE,GAClD;AAEN,CAAC;AAEDL,KAAK,CAACO,KAAK,GAAGT,UAAU;AAExBE,KAAK,CAACQ,OAAO,GAAGX,SAAS,CAACW,OAAO"}

package/dist/components/Image/ImageBadge/ImageBadge.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { type ImageBaseBadgeProps } from "../../ImageBase/ImageBase";
+import { type ImageBaseBadgeProps } from '../../ImageBase/ImageBase';
 export declare type ImageBadgeProps = ImageBaseBadgeProps;
 export declare const ImageBadge: ({ className, ...restProps }: ImageBadgeProps) => JSX.Element;

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

@@ -1,16 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className"];
-import * as React from "react";
-import { classNamesString } from "../../../lib/classNames";
-import { ImageBase, ImageBaseContext } from "../../ImageBase/ImageBase";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { ImageBase, ImageBaseContext } from '../../ImageBase/ImageBase';
 export var ImageBadge = function ImageBadge(_ref) {
   var className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _React$useContext = React.useContext(ImageBaseContext),
     size = _React$useContext.size;
   return /*#__PURE__*/React.createElement(ImageBase.Badge, _extends({}, restProps, {
-    className: classNamesString("vkuiImageBadge", size < 96 && "vkuiImageBadge--shifted", className)
+    className: classNames("vkuiImageBadge", size < 96 && "vkuiImageBadge--shifted", className)
   }));
 };
 //# sourceMappingURL=ImageBadge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBadge.js","names":["React","classNamesString","ImageBase","ImageBaseContext","ImageBadge","className","restProps","useContext","size"],"sources":["../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport {\n  type ImageBaseBadgeProps,\n  ImageBase,\n  ImageBaseContext,\n} 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={classNamesString(\n        styles[\"ImageBadge\"],\n        size < 96 && styles[\"ImageBadge--shifted\"],\n        className\n      )}\n    />\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAEEC,SAAS,EACTC,gBAAgB,QACX,2BAA2B;AAKlC,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAAqD;EAAA,IAA/CC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAClD,wBAAiBN,KAAK,CAACO,UAAU,CAACJ,gBAAgB,CAAC;IAA3CK,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,SAAS,CAAC,KAAK,eACVF,SAAS;IACb,SAAS,EAAEL,gBAAgB,mBAEzBO,IAAI,GAAG,EAAE,6BAAiC,EAC1CH,SAAS;EACT,GACF;AAEN,CAAC"}
+{"version":3,"file":"ImageBadge.js","names":["React","classNames","ImageBase","ImageBaseContext","ImageBadge","className","restProps","useContext","size"],"sources":["../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type ImageBaseBadgeProps, ImageBase, 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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAAmCC,SAAS,EAAEC,gBAAgB,QAAQ,2BAA2B;AAKjG,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAAqD;EAAA,IAA/CC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAClD,wBAAiBN,KAAK,CAACO,UAAU,CAACJ,gBAAgB,CAAC;IAA3CK,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,SAAS,CAAC,KAAK,eACVF,SAAS;IACb,SAAS,EAAEL,UAAU,mBAEnBO,IAAI,GAAG,EAAE,6BAAiC,EAC1CH,SAAS;EACT,GACF;AAEN,CAAC"}

package/dist/components/ImageBase/ImageBase.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
-import type { HasRef, HasRootRef } from "../../types";
-import { type ImageBaseBadgeProps } from "./ImageBaseBadge/ImageBaseBadge";
-import { type ImageBaseOverlayProps } from "./ImageBaseOverlay/ImageBaseOverlay";
-import type { ImageBaseExpectedIconProps, ImageBaseSize, ImageBaseContextProps } from "./types";
-import { ImageBaseContext } from "./context";
+import * as React from 'react';
+import type { HasRef, HasRootRef } from '../../types';
+import { type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';
+import { type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';
+import type { ImageBaseExpectedIconProps, ImageBaseSize, ImageBaseContextProps } from './types';
+import { ImageBaseContext } from './context';
 export type { ImageBaseSize, ImageBaseExpectedIconProps, ImageBaseBadgeProps, ImageBaseOverlayProps, ImageBaseContextProps, };
-export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize, } from "./helpers";
+export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize, } from './helpers';
 export { ImageBaseContext };
 export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {
     /**
@@ -39,7 +39,7 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, Ha
  * @see https://vkcom.github.io/VKUI/#/ImageBase
  */
 export declare const ImageBase: {
-    ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size, width, height, style, className, getRootRef, withBorder, fallbackIcon: fallbackIconProp, children, "aria-label": ariaLabel, onClick, onLoad, onError, ...restProps }: ImageBaseProps): JSX.Element;
+    ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size, width, height, style, className, getRootRef, withBorder, "fallbackIcon": fallbackIconProp, children, "aria-label": ariaLabel, onClick, onLoad, onError, ...restProps }: ImageBaseProps): JSX.Element;
     Badge: ({ background, children, className, ...restProps }: ImageBaseBadgeProps) => JSX.Element;
     Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => JSX.Element;
 };

package/dist/components/ImageBase/ImageBase.js

@@ -3,13 +3,13 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["alt", "crossOrigin", "decoding", "loading", "referrerPolicy", "sizes", "src", "srcSet", "useMap", "getRef", "size", "width", "height", "style", "className", "getRootRef", "withBorder", "fallbackIcon", "children", "aria-label", "onClick", "onLoad", "onError"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { ImageBaseBadge } from "./ImageBaseBadge/ImageBaseBadge";
-import { ImageBaseOverlay } from "./ImageBaseOverlay/ImageBaseOverlay";
-import { ImageBaseContext } from "./context";
-import { validateSize, validateFallbackIcon } from "./validators";
-export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize } from "./helpers";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { ImageBaseBadge } from './ImageBaseBadge/ImageBaseBadge';
+import { ImageBaseOverlay } from './ImageBaseOverlay/ImageBaseOverlay';
+import { ImageBaseContext } from './context';
+import { validateSize, validateFallbackIcon } from './validators';
+export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize } from './helpers';
 export { ImageBaseContext };
 /**
  * @see https://vkcom.github.io/VKUI/#/ImageBase
@@ -34,9 +34,9 @@ export var ImageBase = function ImageBase(_ref) {
     getRootRef = _ref.getRootRef,
     _ref$withBorder = _ref.withBorder,
     withBorder = _ref$withBorder === void 0 ? true : _ref$withBorder,
-    fallbackIconProp = _ref.fallbackIcon,
+    fallbackIconProp = _ref['fallbackIcon'],
     children = _ref.children,
-    ariaLabel = _ref["aria-label"],
+    ariaLabel = _ref['aria-label'],
     onClick = _ref.onClick,
     onLoad = _ref.onLoad,
     onError = _ref.onError,
@@ -52,11 +52,11 @@ export var ImageBase = function ImageBase(_ref) {
   var hasSrc = src || srcSet;
   var needShowFallbackIcon = (failed || !hasSrc) && /*#__PURE__*/React.isValidElement(fallbackIconProp);
   var fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;
-  if (process.env.NODE_ENV === "development") {
+  if (process.env.NODE_ENV === 'development') {
     validateSize(size);
     if (fallbackIcon) {
       validateFallbackIcon(size, {
-        name: "fallbackIcon",
+        name: 'fallbackIcon',
         value: fallbackIcon
       });
     }
@@ -81,8 +81,8 @@ export var ImageBase = function ImageBase(_ref) {
       width: size,
       height: size
     }),
-    className: classNamesString(className, "vkuiImageBase", styles["ImageBase--size-".concat(size)], withBorder && "vkuiImageBase--withBorder", loaded && "vkuiImageBase--loaded"),
-    role: hasSrc ? "img" : "presentation",
+    className: classNames(className, "vkuiImageBase", styles["ImageBase--size-".concat(size)], withBorder && "vkuiImageBase--withBorder", loaded && "vkuiImageBase--loaded"),
+    role: hasSrc ? 'img' : 'presentation',
     "aria-label": ariaLabel,
     onClick: onClick
   }), hasSrc && /*#__PURE__*/React.createElement("img", {
@@ -102,7 +102,7 @@ export var ImageBase = function ImageBase(_ref) {
     onLoad: handleImageLoad,
     onError: handleImageError
   }), fallbackIcon && /*#__PURE__*/React.createElement("div", {
-    className: classNamesString("vkuiImageBase__fallback")
+    className: classNames("vkuiImageBase__fallback")
   }, fallbackIcon), children));
 };
 ImageBase.Badge = ImageBaseBadge;

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBase.js","names":["React","classNamesString","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateSize","validateFallbackIcon","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","fallbackIcon","children","ariaLabel","onClick","onLoad","onError","restProps","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","styles","Badge","Overlay"],"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport type { HasRef, HasRootRef } from \"../../types\";\nimport {\n  type ImageBaseBadgeProps,\n  ImageBaseBadge,\n} from \"./ImageBaseBadge/ImageBaseBadge\";\nimport {\n  type ImageBaseOverlayProps,\n  ImageBaseOverlay,\n} from \"./ImageBaseOverlay/ImageBaseOverlay\";\nimport type {\n  ImageBaseExpectedIconProps,\n  ImageBaseSize,\n  ImageBaseContextProps,\n} from \"./types\";\nimport { ImageBaseContext } from \"./context\";\nimport { validateSize, validateFallbackIcon } 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?: 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 =\n    (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  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNamesString(\n          className,\n          styles[\"ImageBase\"],\n          styles[`ImageBase--size-${size as ImageBaseSize}`],\n          withBorder && styles[\"ImageBase--withBorder\"],\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={classNamesString(styles[\"ImageBase__fallback\"])}>\n            {fallbackIcon}\n          </div>\n        )}\n        {children}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"mappings":"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"}
+{"version":3,"file":"ImageBase.js","names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateSize","validateFallbackIcon","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","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","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","styles","Badge","Overlay"],"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { type ImageBaseBadgeProps, ImageBaseBadge } from './ImageBaseBadge/ImageBaseBadge';\nimport { type ImageBaseOverlayProps, ImageBaseOverlay } from './ImageBaseOverlay/ImageBaseOverlay';\nimport type { ImageBaseExpectedIconProps, ImageBaseSize, ImageBaseContextProps } from './types';\nimport { ImageBaseContext } from './context';\nimport { validateSize, validateFallbackIcon } 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?: 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  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          styles[`ImageBase--size-${size as ImageBaseSize}`],\n          withBorder && styles['ImageBase--withBorder'],\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      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"mappings":"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"}

package/dist/components/ImageBase/ImageBaseBadge/ImageBaseBadge.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import type { ImageBaseExpectedIconProps } from "../types";
+import * as React from 'react';
+import type { ImageBaseExpectedIconProps } from '../types';
 export interface ImageBaseBadgeProps extends React.AriaAttributes {
     /**
      * Вид подложки под иконку.
@@ -7,7 +7,7 @@ export interface ImageBaseBadgeProps extends React.AriaAttributes {
      * - `"stroke"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).
      * - `"shadow"` – добавляет небольшую тень.
      */
-    background?: "stroke" | "shadow";
+    background?: 'stroke' | 'shadow';
     /**
      * Принимает иконку.
      *

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

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["background", "children", "className"];
-import * as React from "react";
-import { classNamesString } from "../../../lib/classNames";
-import { ImageBaseContext } from "../context";
-import { validateBadgeIcon } from "../validators";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { ImageBaseContext } from '../context';
+import { validateBadgeIcon } from '../validators';
 var backgroundStyles = {
   stroke: "vkuiImageBaseBadge--background-stroke",
   shadow: "vkuiImageBaseBadge--background-shadow"
@@ -16,23 +16,23 @@ var backgroundStyles = {
  */
 export var ImageBaseBadge = function ImageBaseBadge(_ref) {
   var _ref$background = _ref.background,
-    background = _ref$background === void 0 ? "shadow" : _ref$background,
+    background = _ref$background === void 0 ? 'shadow' : _ref$background,
     children = _ref.children,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  if (process.env.NODE_ENV === "development") {
+  if (process.env.NODE_ENV === 'development') {
     if (children) {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       var _React$useContext = React.useContext(ImageBaseContext),
         size = _React$useContext.size;
       validateBadgeIcon(size, {
-        name: "children",
+        name: 'children',
         value: children
       });
     }
   }
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNamesString("vkuiImageBaseBadge", backgroundStyles[background], className)
+    className: classNames("vkuiImageBaseBadge", backgroundStyles[background], className)
   }), children);
 };
 //# sourceMappingURL=ImageBaseBadge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseBadge.js","names":["React","classNamesString","ImageBaseContext","validateBadgeIcon","backgroundStyles","stroke","shadow","ImageBaseBadge","background","children","className","restProps","process","env","NODE_ENV","useContext","size","name","value"],"sources":["../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../../lib/classNames\";\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={classNamesString(\n        styles[\"ImageBaseBadge\"],\n        backgroundStyles[background],\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,iBAAiB,QAAQ,eAAe;AAGjD,IAAMC,gBAAgB,GAAG;EACvBC,MAAM,yCAA6C;EACnDC,MAAM;AACR,CAAC;AAyBD;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAc,OAKA;EAAA,2BAJzBC,UAAU;IAAVA,UAAU,gCAAG,QAAQ;IACrBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIL,QAAQ,EAAE;MACZ;MACA,wBAAiBT,KAAK,CAACe,UAAU,CAACb,gBAAgB,CAAC;QAA3Cc,IAAI,qBAAJA,IAAI;MACZb,iBAAiB,CAACa,IAAI,EAAE;QAAEC,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAET;MAAS,CAAC,CAAC;IAChE;EACF;EAEA,oBACE,wCACME,SAAS;IACb,SAAS,EAAEV,gBAAgB,uBAEzBG,gBAAgB,CAACI,UAAU,CAAC,EAC5BE,SAAS;EACT,IAEDD,QAAQ,CACL;AAEV,CAAC"}
+{"version":3,"file":"ImageBaseBadge.js","names":["React","classNames","ImageBaseContext","validateBadgeIcon","backgroundStyles","stroke","shadow","ImageBaseBadge","background","children","className","restProps","process","env","NODE_ENV","useContext","size","name","value"],"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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,iBAAiB,QAAQ,eAAe;AAGjD,IAAMC,gBAAgB,GAAG;EACvBC,MAAM,yCAA6C;EACnDC,MAAM;AACR,CAAC;AAyBD;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAc,OAKA;EAAA,2BAJzBC,UAAU;IAAVA,UAAU,gCAAG,QAAQ;IACrBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIL,QAAQ,EAAE;MACZ;MACA,wBAAiBT,KAAK,CAACe,UAAU,CAACb,gBAAgB,CAAC;QAA3Cc,IAAI,qBAAJA,IAAI;MACZb,iBAAiB,CAACa,IAAI,EAAE;QAAEC,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAET;MAAS,CAAC,CAAC;IAChE;EACF;EAEA,oBACE,wCACME,SAAS;IACb,SAAS,EAAEV,UAAU,uBAA2BG,gBAAgB,CAACI,UAAU,CAAC,EAAEE,SAAS;EAAE,IAExFD,QAAQ,CACL;AAEV,CAAC"}

package/dist/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.d.ts

@@ -1,12 +1,12 @@
-import * as React from "react";
-import type { ImageBaseExpectedIconProps } from "../types";
+import * as React from 'react';
+import type { ImageBaseExpectedIconProps } from '../types';
 export interface ImageBaseOverlayProps extends React.AriaAttributes {
     /**
      * Задаёт тему оформления.
      *
      * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.
      */
-    theme?: "dark" | "light";
+    theme?: 'dark' | 'light';
     /**
      * Определяет каким образом должен показываться оверлей.
      *
@@ -15,7 +15,7 @@ export interface ImageBaseOverlayProps extends React.AriaAttributes {
      *
      * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.
      */
-    visibility?: "on-hover" | "always";
+    visibility?: 'on-hover' | 'always';
     /**
      * Принимает иконку.
      *