npm - @vkontakte/vkui - Versions diffs - 6.1.2 → 6.2.0 - Mend

@vkontakte/vkui 6.1.2 → 6.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1986) hide show

package/dist/cjs/components/Group/Group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n ['compact']: styles['Group--sizeX-compact'],\n};\n\nconst stylesMode = {\n none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n s: styles['Group--padding-s'],\n m: styles['Group--padding-m'],\n};\n\n/*\n Вычисляем mode для Group.\n /\nfunction useGroupMode(\n forcedMode: GroupProps['mode'],\n sizeX: SizeTypeValues \| 'none',\n isInsideModal: boolean,\n): 'plain' \| 'card' \| 'none' {\n const { layout } = React.useContext(AppRootContext);\n\n if (forcedMode) {\n return forcedMode;\n }\n\n if (isInsideModal) {\n return 'plain';\n }\n\n if (layout) {\n return layout;\n }\n\n if (sizeX !== 'none') {\n return sizeX === 'regular' ? 'card' : 'plain';\n }\n\n return 'none';\n}\n\nexport interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {\n header?: React.ReactNode;\n description?: React.ReactNode;\n /\n `show` - разделитель всегда показывается,\n `hide` - разделитель всегда спрятан,\n `auto` - разделитель рисуется автоматически между соседними группами.\n /\n separator?: 'show' \| 'hide' \| 'auto';\n /*\n Режим отображения. Если установлен `card`, выглядит как карточка c\n * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n * В модальных окнах по умолчанию `plain`.\n /\n mode?: 'plain' \| 'card';\n /\n Отвечает за отступы вокруг контента в режиме `card`.\n /\n padding?: 's' \| 'm';\n}\n\nconst warn = warnOnce('Group');\n/\n @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n header,\n description,\n children,\n separator = 'auto',\n mode: modeProps,\n padding = 'm',\n tabIndex: tabIndexProp,\n ...restProps\n}: GroupProps) => {\n const { isInsideModal } = React.useContext(ModalRootContext);\n const { sizeX = 'none' } = useAdaptivity();\n\n const mode = useGroupMode(modeProps, sizeX, isInsideModal);\n\n const isTabPanel = restProps.role === 'tabpanel';\n\n if (\n process.env.NODE_ENV === 'development' &&\n isTabPanel &&\n (!restProps['aria-controls'] \|\| !restProps['id'])\n ) {\n warn(\n 'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n );\n }\n\n const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n return (\n <>\n <RootComponent\n Component=\"section\"\n {...restProps}\n tabIndex={tabIndex}\n baseClassName={classNames(\n 'vkuiInternalGroup',\n styles['Group'],\n isInsideModal && styles['Group--inside-modal'],\n sizeX !== 'regular' && sizeXClassNames[sizeX],\n mode && stylesMode[mode],\n stylesPadding[padding],\n )}\n >\n {hasReactNode(header) && <div className={styles['Group__header']}>{header}</div>}\n {children}\n {hasReactNode(description) && (\n <Footnote className={styles['Group__description']}>{description}</Footnote>\n )}\n </RootComponent>\n\n {separator !== 'hide' && (\n <React.Fragment>\n <div\n className={classNames(styles['Group__separator'], styles['Group__separator--spacing'])}\n />\n <Separator\n className={classNames(\n styles['Group__separator'],\n styles['Group__separator--separator'],\n separator === 'show' && styles['Group__separator--force'],\n )}\n />\n </React.Fragment>\n )}\n </>\n );\n};\n"],"names":["Group","sizeXClassNames","none","classNames","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","React","useContext","AppRootContext","warn","warnOnce","header","description","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","ModalRootContext","useAdaptivity","isTabPanel","role","process","env","NODE_ENV","undefined","RootComponent","Component","baseClassName","hasReactNode","div","className","Footnote","Fragment","Separator"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAoFaA;;;eAAAA;;;;;;;;iEApFU;sBACkB;+BACX;0BAEL;gCAEM;kCACE;+BACH;2BACJ;0BACD;AAGzB,MAAMC,kBAAkB;IACtBC,MAAMC,IAAAA,gBAAU,2BAA8B;IAC9C,CAAC,UAAU;AACb;AAEA,MAAMC,aAAa;IACjBF,MAAMC,IAAAA,gBAAU,0BAA6B;IAC7CE,OAAOF,IAAAA,gBAAU,2BAA8B;IAC/CG,MAAMH,IAAAA,gBAAU,0BAA6B;AAC/C;AAEA,MAAMI,gBAAgB;IACpBC,CAAC;IACDC,CAAC;AACH;AAEA;;CAEC,GACD,SAASC,aACPC,UAA8B,EAC9BC,KAA8B,EAC9BC,aAAsB;IAEtB,MAAM,EAAEC,MAAM,EAAE,GAAGC,OAAMC,UAAU,CAACC,8BAAc;IAElD,IAAIN,YAAY;QACd,OAAOA;IACT;IAEA,IAAIE,eAAe;QACjB,OAAO;IACT;IAEA,IAAIC,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIF,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT;AAwBA,MAAMM,OAAOC,IAAAA,kBAAQ,EAAC;AAIf,MAAMnB,QAAQ;QAAC,EACpBoB,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,UAAUC,YAAY,EAEX,WADRC;QAPHT;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,MAAM,EAAEd,aAAa,EAAE,GAAGE,OAAMC,UAAU,CAACc,kCAAgB;IAC3D,MAAM,EAAElB,QAAQ,MAAM,EAAE,GAAGmB,IAAAA,4BAAa;IAExC,MAAMP,OAAOd,aAAae,WAAWb,OAAOC;IAE5C,MAAMmB,aAAaH,UAAUI,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACH,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAX,KACE;IAEJ;IAEA,MAAMS,WAAWK,cAAcJ,iBAAiBS,YAAY,IAAIT;IAEhE,qBACE;;0BACE,sBAACU,4BAAa;gBACZC,WAAU;eACNV;gBACJF,UAAUA;gBACVa,eAAerC,IAAAA,gBAAU,EACvB,kCAEAU,4CACAD,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CY,QAAQpB,UAAU,CAACoB,KAAK,EACxBjB,aAAa,CAACmB,QAAQ;;oBAGvBe,IAAAA,kBAAY,EAACrB,yBAAW,qBAACsB;wBAAIC,SAAS;kCAA4BvB;;oBAClEE;oBACAmB,IAAAA,kBAAY,EAACpB,8BACZ,qBAACuB,kBAAQ;wBAACD,SAAS;kCAAiCtB;;;;YAIvDE,cAAc,wBACb,sBAACR,OAAM8B,QAAQ;;kCACb,qBAACH;wBACCC,WAAWxC,IAAAA,gBAAU;;kCAEvB,qBAAC2C,oBAAS;wBACRH,WAAWxC,IAAAA,gBAAU,6DAGnBoB,cAAc;;;;;;AAO5B"}
1	+ {"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n ['compact']: styles['Group--sizeX-compact'],\n};\n\nconst stylesMode = {\n none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n s: styles['Group--padding-s'],\n m: styles['Group--padding-m'],\n};\n\n/*\n Вычисляем mode для Group.\n /\nfunction useGroupMode(\n forcedMode: GroupProps['mode'],\n sizeX: SizeTypeValues \| 'none',\n isInsideModal: boolean,\n): 'plain' \| 'card' \| 'none' {\n const { layout } = React.useContext(AppRootContext);\n\n if (forcedMode) {\n return forcedMode;\n }\n\n if (isInsideModal) {\n return 'plain';\n }\n\n if (layout) {\n return layout;\n }\n\n if (sizeX !== 'none') {\n return sizeX === 'regular' ? 'card' : 'plain';\n }\n\n return 'none';\n}\n\nexport interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {\n header?: React.ReactNode;\n description?: React.ReactNode;\n /\n `show` - разделитель всегда показывается,\n `hide` - разделитель всегда спрятан,\n `auto` - разделитель рисуется автоматически между соседними группами.\n /\n separator?: 'show' \| 'hide' \| 'auto';\n /*\n Режим отображения. Если установлен `card`, выглядит как карточка c\n * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n * В модальных окнах по умолчанию `plain`.\n /\n mode?: 'plain' \| 'card';\n /\n Отвечает за отступы вокруг контента в режиме `card`.\n /\n padding?: 's' \| 'm';\n}\n\nconst warn = warnOnce('Group');\n/\n @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n header,\n description,\n children,\n separator = 'auto',\n mode: modeProps,\n padding = 'm',\n tabIndex: tabIndexProp,\n ...restProps\n}: GroupProps) => {\n const { isInsideModal } = React.useContext(ModalRootContext);\n const { sizeX = 'none' } = useAdaptivity();\n\n const mode = useGroupMode(modeProps, sizeX, isInsideModal);\n\n const isTabPanel = restProps.role === 'tabpanel';\n\n if (\n process.env.NODE_ENV === 'development' &&\n isTabPanel &&\n (!restProps['aria-controls'] \|\| !restProps['id'])\n ) {\n warn(\n 'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n );\n }\n\n const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n return (\n <>\n <RootComponent\n Component=\"section\"\n {...restProps}\n tabIndex={tabIndex}\n baseClassName={classNames(\n 'vkuiInternalGroup',\n styles['Group'],\n isInsideModal && styles['Group--inside-modal'],\n sizeX !== 'regular' && sizeXClassNames[sizeX],\n mode && stylesMode[mode],\n stylesPadding[padding],\n )}\n >\n {hasReactNode(header) && <div className={styles['Group__header']}>{header}</div>}\n {children}\n {hasReactNode(description) && (\n <Footnote className={styles['Group__description']}>{description}</Footnote>\n )}\n </RootComponent>\n\n {separator !== 'hide' && (\n <React.Fragment>\n <div\n className={classNames(styles['Group__separator'], styles['Group__separator--spacing'])}\n />\n <Separator\n className={classNames(\n styles['Group__separator'],\n styles['Group__separator--separator'],\n separator === 'show' && styles['Group__separator--force'],\n )}\n />\n </React.Fragment>\n )}\n </>\n );\n};\n"],"names":["Group","sizeXClassNames","none","classNames","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","React","useContext","AppRootContext","warn","warnOnce","header","description","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","ModalRootContext","useAdaptivity","isTabPanel","role","process","env","NODE_ENV","undefined","RootComponent","Component","baseClassName","hasReactNode","div","className","Footnote","Fragment","Separator"],"mappings":";;;;+BAoFaA;;;eAAAA;;;;;;;;iEApFU;sBACkB;+BACX;0BAEL;gCAEM;kCACE;+BACH;2BACJ;0BACD;AAGzB,MAAMC,kBAAkB;IACtBC,MAAMC,IAAAA,gBAAU,2BAA8B;IAC9C,CAAC,UAAU;AACb;AAEA,MAAMC,aAAa;IACjBF,MAAMC,IAAAA,gBAAU,0BAA6B;IAC7CE,OAAOF,IAAAA,gBAAU,2BAA8B;IAC/CG,MAAMH,IAAAA,gBAAU,0BAA6B;AAC/C;AAEA,MAAMI,gBAAgB;IACpBC,CAAC;IACDC,CAAC;AACH;AAEA;;CAEC,GACD,SAASC,aACPC,UAA8B,EAC9BC,KAA8B,EAC9BC,aAAsB;IAEtB,MAAM,EAAEC,MAAM,EAAE,GAAGC,OAAMC,UAAU,CAACC,8BAAc;IAElD,IAAIN,YAAY;QACd,OAAOA;IACT;IAEA,IAAIE,eAAe;QACjB,OAAO;IACT;IAEA,IAAIC,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIF,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT;AAwBA,MAAMM,OAAOC,IAAAA,kBAAQ,EAAC;AAIf,MAAMnB,QAAQ;QAAC,EACpBoB,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,UAAUC,YAAY,EAEX,WADRC;QAPHT;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,MAAM,EAAEd,aAAa,EAAE,GAAGE,OAAMC,UAAU,CAACc,kCAAgB;IAC3D,MAAM,EAAElB,QAAQ,MAAM,EAAE,GAAGmB,IAAAA,4BAAa;IAExC,MAAMP,OAAOd,aAAae,WAAWb,OAAOC;IAE5C,MAAMmB,aAAaH,UAAUI,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACH,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAX,KACE;IAEJ;IAEA,MAAMS,WAAWK,cAAcJ,iBAAiBS,YAAY,IAAIT;IAEhE,qBACE;;0BACE,sBAACU,4BAAa;gBACZC,WAAU;eACNV;gBACJF,UAAUA;gBACVa,eAAerC,IAAAA,gBAAU,EACvB,kCAEAU,4CACAD,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CY,QAAQpB,UAAU,CAACoB,KAAK,EACxBjB,aAAa,CAACmB,QAAQ;;oBAGvBe,IAAAA,kBAAY,EAACrB,yBAAW,qBAACsB;wBAAIC,SAAS;kCAA4BvB;;oBAClEE;oBACAmB,IAAAA,kBAAY,EAACpB,8BACZ,qBAACuB,kBAAQ;wBAACD,SAAS;kCAAiCtB;;;;YAIvDE,cAAc,wBACb,sBAACR,OAAM8B,QAAQ;;kCACb,qBAACH;wBACCC,WAAWxC,IAAAA,gBAAU;;kCAEvB,qBAAC2C,oBAAS;wBACRH,WAAWxC,IAAAA,gBAAU,6DAGnBoB,cAAc;;;;;;AAO5B"}

package/dist/cjs/components/Header/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {\n mode?: 'primary' \| 'secondary' \| 'tertiary';\n size?: 'regular' \| 'large';\n subtitle?: React.ReactNode;\n /* Позволяет задать тип элемента в который будет обёрнут subtitle /\n subtitleComponent?: React.ElementType;\n /\n Допускаются иконки, текст, Link\n /\n aside?: React.ReactNode;\n /\n Допускаются текст, Indicator\n /\n indicator?: React.ReactNode;\n multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' \| 'mode' \| 'size' \| 'className'> &\n HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n const isLarge = size === 'large';\n\n const platform = usePlatform();\n if (platform === 'ios') {\n switch (mode) {\n case 'primary':\n return isLarge ? (\n <Title level=\"2\" weight=\"2\" {...restProps} />\n ) : (\n <Title weight=\"1\" level=\"3\" {...restProps} />\n );\n case 'secondary':\n return <Footnote weight=\"1\" caps {...restProps} />;\n case 'tertiary':\n return <Title weight=\"1\" level=\"3\" {...restProps} />;\n }\n }\n\n switch (mode) {\n case 'primary':\n return isLarge ? (\n <Title level=\"2\" weight=\"2\" {...restProps} />\n ) : (\n <Headline weight=\"2\" {...restProps} />\n );\n case 'secondary':\n return <Footnote weight=\"1\" caps {...restProps} />;\n case 'tertiary':\n return <Headline weight=\"2\" {...restProps} />;\n }\n\n return null;\n};\n\nconst stylesMode = {\n primary: styles['Header--mode-primary'],\n secondary: styles['Header--mode-secondary'],\n tertiary: styles['Header--mode-tertiary'],\n};\n/\n @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n mode = 'primary',\n size = 'regular',\n Component = 'h2',\n children,\n subtitle,\n subtitleComponent = 'span',\n indicator,\n aside,\n multiline,\n ...restProps\n}: HeaderProps) => {\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['Header'],\n stylesMode[mode],\n size === 'large' && styles['Header--large'],\n isPrimitiveReactNode(indicator) && styles['Header--pi'],\n hasReactNode(subtitle) && styles['Header--with-subtitle'],\n )}\n >\n <div className={styles['Header__main']}>\n <HeaderContent\n className={styles['Header__content']}\n Component={Component}\n mode={mode}\n size={size}\n >\n <span\n className={classNames(\n styles['Header__content-in'],\n multiline && styles['Header__content--multiline'],\n )}\n >\n {children}\n </span>\n {hasReactNode(indicator) && (\n <Footnote className={styles['Header__indicator']} weight=\"2\">\n {indicator}\n </Footnote>\n )}\n </HeaderContent>\n\n {hasReactNode(subtitle) && (\n <Subhead\n className={classNames(\n styles['Header__subtitle'],\n multiline && styles['Header__content--multiline'],\n )}\n Component={subtitleComponent}\n >\n {subtitle}\n </Subhead>\n )}\n </div>\n\n {hasReactNode(aside) && (\n <Paragraph className={styles['Header__aside']} Component=\"span\">\n {aside}\n </Paragraph>\n )}\n </RootComponent>\n );\n};\n"],"names":["Header","HeaderContent","mode","size","restProps","isLarge","platform","usePlatform","Title","level","weight","Footnote","caps","Headline","stylesMode","primary","secondary","tertiary","Component","children","subtitle","subtitleComponent","indicator","aside","multiline","RootComponent","baseClassName","classNames","isPrimitiveReactNode","hasReactNode","div","className","span","Subhead","Paragraph"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA2EaA;;;eAAAA;;;;;;;;iEA3EU;sBACwC;6BACnC;+BAEE;0BACL;0BACA;2BACC;yBACF;uBACF;AAuBtB,MAAMC,gBAAgB;QAAC,EAAEC,IAAI,EAAEC,IAAI,EAAoC,WAA/BC;QAAfF;QAAMC;;IAC7B,MAAME,UAAUF,SAAS;IAEzB,MAAMG,WAAWC,IAAAA,wBAAW;IAC5B,IAAID,aAAa,OAAO;QACtB,OAAQJ;YACN,KAAK;gBACH,OAAOG,wBACL,qBAACG,YAAK;oBAACC,OAAM;oBAAIC,QAAO;mBAAQN,4BAEhC,qBAACI,YAAK;oBAACE,QAAO;oBAAID,OAAM;mBAAQL;YAEpC,KAAK;gBACH,qBAAO,qBAACO,kBAAQ;oBAACD,QAAO;oBAAIE,IAAI;mBAAKR;YACvC,KAAK;gBACH,qBAAO,qBAACI,YAAK;oBAACE,QAAO;oBAAID,OAAM;mBAAQL;QAC3C;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,qBAACG,YAAK;gBAACC,OAAM;gBAAIC,QAAO;eAAQN,4BAEhC,qBAACS,kBAAQ;gBAACH,QAAO;eAAQN;QAE7B,KAAK;YACH,qBAAO,qBAACO,kBAAQ;gBAACD,QAAO;gBAAIE,IAAI;eAAKR;QACvC,KAAK;YACH,qBAAO,qBAACS,kBAAQ;gBAACH,QAAO;eAAQN;IACpC;IAEA,OAAO;AACT;AAEA,MAAMU,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;AACV;AAIO,MAAMjB,SAAS;QAAC,EACrBE,OAAO,SAAS,EAChBC,OAAO,SAAS,EAChBe,YAAY,IAAI,EAChBC,QAAQ,EACRC,QAAQ,EACRC,oBAAoB,MAAM,EAC1BC,SAAS,EACTC,KAAK,EACLC,SAAS,EAEG,WADTpB;QATHF;QACAC;QACAe;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,sBAACC,4BAAa,8CACRrB;QACJsB,eAAeC,IAAAA,gBAAU,gBAEvBb,UAAU,CAACZ,KAAK,EAChBC,SAAS,gCACTyB,IAAAA,0BAAoB,EAACN,gCACrBO,IAAAA,kBAAY,EAACT;;0BAGf,sBAACU;gBAAIC,SAAS;;kCACZ,sBAAC9B;wBACC8B,SAAS;wBACTb,WAAWA;wBACXhB,MAAMA;wBACNC,MAAMA;;0CAEN,qBAAC6B;gCACCD,WAAWJ,IAAAA,gBAAU,4BAEnBH;0CAGDL;;4BAEFU,IAAAA,kBAAY,EAACP,4BACZ,qBAACX,kBAAQ;gCAACoB,SAAS;gCAA+BrB,QAAO;0CACtDY;;;;oBAKNO,IAAAA,kBAAY,EAACT,2BACZ,qBAACa,gBAAO;wBACNF,WAAWJ,IAAAA,gBAAU,0BAEnBH;wBAEFN,WAAWG;kCAEVD;;;;YAKNS,IAAAA,kBAAY,EAACN,wBACZ,qBAACW,oBAAS;gBAACH,SAAS;gBAA2Bb,WAAU;0BACtDK;;;;AAKX"}
1	+ {"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {\n mode?: 'primary' \| 'secondary' \| 'tertiary';\n size?: 'regular' \| 'large';\n subtitle?: React.ReactNode;\n /* Позволяет задать тип элемента в который будет обёрнут subtitle /\n subtitleComponent?: React.ElementType;\n /\n Допускаются иконки, текст, Link\n /\n aside?: React.ReactNode;\n /\n Допускаются текст, Indicator\n /\n indicator?: React.ReactNode;\n multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' \| 'mode' \| 'size' \| 'className'> &\n HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n const isLarge = size === 'large';\n\n const platform = usePlatform();\n if (platform === 'ios') {\n switch (mode) {\n case 'primary':\n return isLarge ? (\n <Title level=\"2\" weight=\"2\" {...restProps} />\n ) : (\n <Title weight=\"1\" level=\"3\" {...restProps} />\n );\n case 'secondary':\n return <Footnote weight=\"1\" caps {...restProps} />;\n case 'tertiary':\n return <Title weight=\"1\" level=\"3\" {...restProps} />;\n }\n }\n\n switch (mode) {\n case 'primary':\n return isLarge ? (\n <Title level=\"2\" weight=\"2\" {...restProps} />\n ) : (\n <Headline weight=\"2\" {...restProps} />\n );\n case 'secondary':\n return <Footnote weight=\"1\" caps {...restProps} />;\n case 'tertiary':\n return <Headline weight=\"2\" {...restProps} />;\n }\n\n return null;\n};\n\nconst stylesMode = {\n primary: styles['Header--mode-primary'],\n secondary: styles['Header--mode-secondary'],\n tertiary: styles['Header--mode-tertiary'],\n};\n/\n @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n mode = 'primary',\n size = 'regular',\n Component = 'h2',\n children,\n subtitle,\n subtitleComponent = 'span',\n indicator,\n aside,\n multiline,\n ...restProps\n}: HeaderProps) => {\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['Header'],\n stylesMode[mode],\n size === 'large' && styles['Header--large'],\n isPrimitiveReactNode(indicator) && styles['Header--pi'],\n hasReactNode(subtitle) && styles['Header--with-subtitle'],\n )}\n >\n <div className={styles['Header__main']}>\n <HeaderContent\n className={styles['Header__content']}\n Component={Component}\n mode={mode}\n size={size}\n >\n <span\n className={classNames(\n styles['Header__content-in'],\n multiline && styles['Header__content--multiline'],\n )}\n >\n {children}\n </span>\n {hasReactNode(indicator) && (\n <Footnote className={styles['Header__indicator']} weight=\"2\">\n {indicator}\n </Footnote>\n )}\n </HeaderContent>\n\n {hasReactNode(subtitle) && (\n <Subhead\n className={classNames(\n styles['Header__subtitle'],\n multiline && styles['Header__content--multiline'],\n )}\n Component={subtitleComponent}\n >\n {subtitle}\n </Subhead>\n )}\n </div>\n\n {hasReactNode(aside) && (\n <Paragraph className={styles['Header__aside']} Component=\"span\">\n {aside}\n </Paragraph>\n )}\n </RootComponent>\n );\n};\n"],"names":["Header","HeaderContent","mode","size","restProps","isLarge","platform","usePlatform","Title","level","weight","Footnote","caps","Headline","stylesMode","primary","secondary","tertiary","Component","children","subtitle","subtitleComponent","indicator","aside","multiline","RootComponent","baseClassName","classNames","isPrimitiveReactNode","hasReactNode","div","className","span","Subhead","Paragraph"],"mappings":";;;;+BA2EaA;;;eAAAA;;;;;;;;iEA3EU;sBACwC;6BACnC;+BAEE;0BACL;0BACA;2BACC;yBACF;uBACF;AAuBtB,MAAMC,gBAAgB;QAAC,EAAEC,IAAI,EAAEC,IAAI,EAAoC,WAA/BC;QAAfF;QAAMC;;IAC7B,MAAME,UAAUF,SAAS;IAEzB,MAAMG,WAAWC,IAAAA,wBAAW;IAC5B,IAAID,aAAa,OAAO;QACtB,OAAQJ;YACN,KAAK;gBACH,OAAOG,wBACL,qBAACG,YAAK;oBAACC,OAAM;oBAAIC,QAAO;mBAAQN,4BAEhC,qBAACI,YAAK;oBAACE,QAAO;oBAAID,OAAM;mBAAQL;YAEpC,KAAK;gBACH,qBAAO,qBAACO,kBAAQ;oBAACD,QAAO;oBAAIE,IAAI;mBAAKR;YACvC,KAAK;gBACH,qBAAO,qBAACI,YAAK;oBAACE,QAAO;oBAAID,OAAM;mBAAQL;QAC3C;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,qBAACG,YAAK;gBAACC,OAAM;gBAAIC,QAAO;eAAQN,4BAEhC,qBAACS,kBAAQ;gBAACH,QAAO;eAAQN;QAE7B,KAAK;YACH,qBAAO,qBAACO,kBAAQ;gBAACD,QAAO;gBAAIE,IAAI;eAAKR;QACvC,KAAK;YACH,qBAAO,qBAACS,kBAAQ;gBAACH,QAAO;eAAQN;IACpC;IAEA,OAAO;AACT;AAEA,MAAMU,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;AACV;AAIO,MAAMjB,SAAS;QAAC,EACrBE,OAAO,SAAS,EAChBC,OAAO,SAAS,EAChBe,YAAY,IAAI,EAChBC,QAAQ,EACRC,QAAQ,EACRC,oBAAoB,MAAM,EAC1BC,SAAS,EACTC,KAAK,EACLC,SAAS,EAEG,WADTpB;QATHF;QACAC;QACAe;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,sBAACC,4BAAa,8CACRrB;QACJsB,eAAeC,IAAAA,gBAAU,gBAEvBb,UAAU,CAACZ,KAAK,EAChBC,SAAS,gCACTyB,IAAAA,0BAAoB,EAACN,gCACrBO,IAAAA,kBAAY,EAACT;;0BAGf,sBAACU;gBAAIC,SAAS;;kCACZ,sBAAC9B;wBACC8B,SAAS;wBACTb,WAAWA;wBACXhB,MAAMA;wBACNC,MAAMA;;0CAEN,qBAAC6B;gCACCD,WAAWJ,IAAAA,gBAAU,4BAEnBH;0CAGDL;;4BAEFU,IAAAA,kBAAY,EAACP,4BACZ,qBAACX,kBAAQ;gCAACoB,SAAS;gCAA+BrB,QAAO;0CACtDY;;;;oBAKNO,IAAAA,kBAAY,EAACT,2BACZ,qBAACa,gBAAO;wBACNF,WAAWJ,IAAAA,gBAAU,0BAEnBH;wBAEFN,WAAWG;kCAEVD;;;;YAKNS,IAAAA,kBAAY,EAACN,wBACZ,qBAACW,oBAAS;gBAACH,SAAS;gBAA2Bb,WAAU;0BACtDK;;;;AAKX"}

package/dist/cjs/components/HorizontalCell/HorizontalCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nconst stylesSize = {\n s: styles['HorizontalCell--size-s'],\n m: styles['HorizontalCell--size-m'],\n l: styles['HorizontalCell--size-l'],\n};\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n return size === 's' ? (\n <Caption {...restProps}>{children}</Caption>\n ) : (\n <Subhead {...restProps}>{children}</Subhead>\n );\n};\n\nexport interface HorizontalCellProps\n extends Omit<TappableProps, 'size' \| 'getRootRef'>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n size?: 's' \| 'm' \| 'l';\n /*\n Заголовок\n /\n header?: React.ReactNode;\n /\n Дополнительная строка текста под `children`.\n /\n subtitle?: React.ReactNode;\n /\n Дополнительная строка текста под `children` и `subtitle`.\n /\n extraSubtitle?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n className,\n header,\n style,\n subtitle,\n size = 's',\n children = <Avatar size={56} />,\n getRootRef,\n getRef,\n extraSubtitle,\n ...restProps\n}: HorizontalCellProps) => {\n return (\n <div\n ref={getRootRef}\n style={style}\n className={classNames(styles['HorizontalCell'], stylesSize[size], className)}\n >\n <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n {hasReactNode(children) && (\n <div className={styles['HorizontalCell__image']}>{children}</div>\n )}\n {(header \|\| subtitle \|\| extraSubtitle) && (\n <div className={styles['HorizontalCell__content']}>\n {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n {hasReactNode(subtitle) && (\n <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n )}\n {hasReactNode(extraSubtitle) && (\n <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n )}\n </div>\n )}\n </Tappable>\n </div>\n );\n};\n"],"names":["HorizontalCell","stylesSize","s","m","l","CellTypography","size","children","restProps","Caption","Subhead","className","header","style","subtitle","Avatar","getRootRef","getRef","extraSubtitle","div","ref","classNames","Tappable","hasReactNode","Footnote"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAkDaA;;;eAAAA;;;;;;;;iEAlDU;sBACkB;wBAElB;0BACsB;yBACrB;0BACC;yBACD;AAGxB,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAMA,MAAMC,iBAAiB;QAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAqC,WAAhCC;QAAnBF;QAAMC;;IAC9B,OAAOD,SAAS,oBACd,qBAACG,gBAAO,8CAAKD;kBAAYD;wBAEzB,qBAACG,gBAAO,8CAAKF;kBAAYD;;AAE7B;AAwBO,MAAMP,iBAAiB;QAAC,EAC7BW,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRR,OAAO,GAAG,EACVC,yBAAW,qBAACQ,cAAM;QAACT,MAAM;MAAM,EAC/BU,UAAU,EACVC,MAAM,EACNC,aAAa,EAEO,WADjBV;QATHG;QACAC;QACAC;QACAC;QACAR;QACAC;QACAS;QACAC;QACAC;;IAGA,qBACE,qBAACC;QACCC,KAAKJ;QACLH,OAAOA;QACPF,WAAWU,IAAAA,gBAAU,wBAA2BpB,UAAU,CAACK,KAAK,EAAEK;kBAElE,cAAA,sBAACW,kBAAQ;YAACX,SAAS;YAAkCK,YAAYC;WAAYT;;gBAC1Ee,IAAAA,kBAAY,EAAChB,2BACZ,qBAACY;oBAAIR,SAAS;8BAAoCJ;;gBAElDK,CAAAA,UAAUE,YAAYI,aAAY,mBAClC,sBAACC;oBAAIR,SAAS;;wBACXY,IAAAA,kBAAY,EAACX,yBAAW,qBAACP;4BAAeC,MAAMA;sCAAOM;;wBACrDW,IAAAA,kBAAY,EAACT,2BACZ,qBAACU,kBAAQ;4BAACb,SAAS;sCAAuCG;;wBAE3DS,IAAAA,kBAAY,EAACL,gCACZ,qBAACM,kBAAQ;4BAACb,SAAS;sCAAuCO;;;;;;;AAOxE"}
1	+ {"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nconst stylesSize = {\n s: styles['HorizontalCell--size-s'],\n m: styles['HorizontalCell--size-m'],\n l: styles['HorizontalCell--size-l'],\n};\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n return size === 's' ? (\n <Caption {...restProps}>{children}</Caption>\n ) : (\n <Subhead {...restProps}>{children}</Subhead>\n );\n};\n\nexport interface HorizontalCellProps\n extends Omit<TappableProps, 'size' \| 'getRootRef'>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n size?: 's' \| 'm' \| 'l';\n /*\n Заголовок\n /\n header?: React.ReactNode;\n /\n Дополнительная строка текста под `children`.\n /\n subtitle?: React.ReactNode;\n /\n Дополнительная строка текста под `children` и `subtitle`.\n /\n extraSubtitle?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n className,\n header,\n style,\n subtitle,\n size = 's',\n children = <Avatar size={56} />,\n getRootRef,\n getRef,\n extraSubtitle,\n ...restProps\n}: HorizontalCellProps) => {\n return (\n <div\n ref={getRootRef}\n style={style}\n className={classNames(styles['HorizontalCell'], stylesSize[size], className)}\n >\n <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n {hasReactNode(children) && (\n <div className={styles['HorizontalCell__image']}>{children}</div>\n )}\n {(header \|\| subtitle \|\| extraSubtitle) && (\n <div className={styles['HorizontalCell__content']}>\n {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n {hasReactNode(subtitle) && (\n <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n )}\n {hasReactNode(extraSubtitle) && (\n <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n )}\n </div>\n )}\n </Tappable>\n </div>\n );\n};\n"],"names":["HorizontalCell","stylesSize","s","m","l","CellTypography","size","children","restProps","Caption","Subhead","className","header","style","subtitle","Avatar","getRootRef","getRef","extraSubtitle","div","ref","classNames","Tappable","hasReactNode","Footnote"],"mappings":";;;;+BAkDaA;;;eAAAA;;;;;;;;iEAlDU;sBACkB;wBAElB;0BACsB;yBACrB;0BACC;yBACD;AAGxB,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAMA,MAAMC,iBAAiB;QAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAqC,WAAhCC;QAAnBF;QAAMC;;IAC9B,OAAOD,SAAS,oBACd,qBAACG,gBAAO,8CAAKD;kBAAYD;wBAEzB,qBAACG,gBAAO,8CAAKF;kBAAYD;;AAE7B;AAwBO,MAAMP,iBAAiB;QAAC,EAC7BW,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRR,OAAO,GAAG,EACVC,yBAAW,qBAACQ,cAAM;QAACT,MAAM;MAAM,EAC/BU,UAAU,EACVC,MAAM,EACNC,aAAa,EAEO,WADjBV;QATHG;QACAC;QACAC;QACAC;QACAR;QACAC;QACAS;QACAC;QACAC;;IAGA,qBACE,qBAACC;QACCC,KAAKJ;QACLH,OAAOA;QACPF,WAAWU,IAAAA,gBAAU,wBAA2BpB,UAAU,CAACK,KAAK,EAAEK;kBAElE,cAAA,sBAACW,kBAAQ;YAACX,SAAS;YAAkCK,YAAYC;WAAYT;;gBAC1Ee,IAAAA,kBAAY,EAAChB,2BACZ,qBAACY;oBAAIR,SAAS;8BAAoCJ;;gBAElDK,CAAAA,UAAUE,YAAYI,aAAY,mBAClC,sBAACC;oBAAIR,SAAS;;wBACXY,IAAAA,kBAAY,EAACX,yBAAW,qBAACP;4BAAeC,MAAMA;sCAAOM;;wBACrDW,IAAAA,kBAAY,EAACT,2BACZ,qBAACU,kBAAQ;4BAACb,SAAS;sCAAuCG;;wBAE3DS,IAAAA,kBAAY,EAACL,gCACZ,qBAACM,kBAAQ;4BAACb,SAAS;sCAAuCO;;;;;;;AAOxE"}

package/dist/cjs/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, LiteralUnion } from '../../../types';\nimport type { ImageBaseSize } from '../../ImageBase/ImageBase';\nimport { Tappable, TappableProps } from '../../Tappable/Tappable';\nimport { Subhead, SubheadProps } from '../../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n s: styles['HorizontalCellShowMore--size-s'],\n m: styles['HorizontalCellShowMore--size-m'],\n l: styles['HorizontalCellShowMore--size-l'],\n};\n\nexport interface HorizontalCellShowMoreProps\n extends Omit<TappableProps, 'getRootRef' \| 'size'>,\n HasRef<HTMLElement>,\n HasRootRef<HTMLDivElement> {\n /*\n Задаёт высоту компонента. Должeн соответствовать размеру картинок\n * внутри соседних `HorizontalCell` компонентов.\n \n Используйте размеры заданные дизайн-системой (см. типы).\n \n > ⚠️ Использование кастомного размера – это пограничный кейс.\n \n Игнорируется если `size='s'`.\n /\n height?: LiteralUnion<ImageBaseSize, number>;\n /\n Задаёт размер компонента. Аналогичен такому же пропу у [HorizontalCell](https://vkcom.github.io/VKUI/#/HorizontalCellShowMore?id=props).\n * Должен соответствовать значению пропа `size` соседних `HorizontalCell`.\n /\n size?: 's' \| 'm' \| 'l';\n /\n Предназначен для отрисовки текста.\n * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.\n * /\n children?: SubheadProps['children'];\n /\n Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,\n * в том случае, если тот элемент последний в родителе.\n * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.\n */\n compensateLastCellIndent?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n className,\n style,\n getRef,\n getRootRef,\n compensateLastCellIndent,\n height,\n size = 's',\n children = size === 's' ? 'Все' : 'Показать все',\n ...restProps\n}: HorizontalCellShowMoreProps) => {\n return (\n <div\n style={style}\n className={classNames(\n styles['HorizontalCellShowMore'],\n compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],\n sizeClassNames[size],\n className,\n )}\n ref={getRootRef}\n >\n <Tappable\n style={size === 's' ? undefined : { height }}\n className={styles['HorizontalCellShowMore__body']}\n getRootRef={getRef}\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n {...restProps}\n >\n <Icon28ChevronRightCircle\n className={styles['HorizontalCellShowMore__icon']}\n fill=\"currentColor\"\n />\n\n <Subhead className={styles['HorizontalCellShowMore__text']} weight=\"2\">\n {children}\n </Subhead>\n </Tappable>\n </div>\n );\n};\n"],"names":["HorizontalCellShowMore","sizeClassNames","s","m","l","className","style","getRef","getRootRef","compensateLastCellIndent","height","size","children","restProps","div","classNames","ref","Tappable","undefined","activeMode","hoverMode","Icon28ChevronRightCircle","fill","Subhead","weight"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;uBA/C4B;sBACd;0BAGa;yBACF;AAGtC,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAmCO,MAAMJ,yBAAyB;QAAC,EACrCK,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,wBAAwB,EACxBC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAEpB,WADzBE;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE;QACCR,OAAOA;QACPD,WAAWU,IAAAA,gBAAU,gCAEnBN,uFACAR,cAAc,CAACU,KAAK,EACpBN;QAEFW,KAAKR;kBAEL,cAAA,sBAACS,kBAAQ;YACPX,OAAOK,SAAS,MAAMO,YAAY;gBAAER;YAAO;YAC3CL,SAAS;YACTG,YAAYD;YACZY,YAAW;YACXC,WAAU;WACNP;;8BAEJ,qBAACQ,+BAAwB;oBACvBhB,SAAS;oBACTiB,MAAK;;8BAGP,qBAACC,gBAAO;oBAAClB,SAAS;oBAA0CmB,QAAO;8BAChEZ;;;;;AAKX"}
1	+ {"version":3,"sources":["../../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, LiteralUnion } from '../../../types';\nimport type { ImageBaseSize } from '../../ImageBase/ImageBase';\nimport { Tappable, TappableProps } from '../../Tappable/Tappable';\nimport { Subhead, SubheadProps } from '../../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n s: styles['HorizontalCellShowMore--size-s'],\n m: styles['HorizontalCellShowMore--size-m'],\n l: styles['HorizontalCellShowMore--size-l'],\n};\n\nexport interface HorizontalCellShowMoreProps\n extends Omit<TappableProps, 'getRootRef' \| 'size'>,\n HasRef<HTMLElement>,\n HasRootRef<HTMLDivElement> {\n /*\n Задаёт высоту компонента. Должeн соответствовать размеру картинок\n * внутри соседних `HorizontalCell` компонентов.\n \n Используйте размеры заданные дизайн-системой (см. типы).\n \n > ⚠️ Использование кастомного размера – это пограничный кейс.\n \n Игнорируется если `size='s'`.\n /\n height?: LiteralUnion<ImageBaseSize, number>;\n /\n Задаёт размер компонента. Аналогичен такому же пропу у [HorizontalCell](https://vkcom.github.io/VKUI/#/HorizontalCellShowMore?id=props).\n * Должен соответствовать значению пропа `size` соседних `HorizontalCell`.\n /\n size?: 's' \| 'm' \| 'l';\n /\n Предназначен для отрисовки текста.\n * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.\n * /\n children?: SubheadProps['children'];\n /\n Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,\n * в том случае, если тот элемент последний в родителе.\n * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.\n */\n compensateLastCellIndent?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n className,\n style,\n getRef,\n getRootRef,\n compensateLastCellIndent,\n height,\n size = 's',\n children = size === 's' ? 'Все' : 'Показать все',\n ...restProps\n}: HorizontalCellShowMoreProps) => {\n return (\n <div\n style={style}\n className={classNames(\n styles['HorizontalCellShowMore'],\n compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],\n sizeClassNames[size],\n className,\n )}\n ref={getRootRef}\n >\n <Tappable\n style={size === 's' ? undefined : { height }}\n className={styles['HorizontalCellShowMore__body']}\n getRootRef={getRef}\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n {...restProps}\n >\n <Icon28ChevronRightCircle\n className={styles['HorizontalCellShowMore__icon']}\n fill=\"currentColor\"\n />\n\n <Subhead className={styles['HorizontalCellShowMore__text']} weight=\"2\">\n {children}\n </Subhead>\n </Tappable>\n </div>\n );\n};\n"],"names":["HorizontalCellShowMore","sizeClassNames","s","m","l","className","style","getRef","getRootRef","compensateLastCellIndent","height","size","children","restProps","div","classNames","ref","Tappable","undefined","activeMode","hoverMode","Icon28ChevronRightCircle","fill","Subhead","weight"],"mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;uBA/C4B;sBACd;0BAGa;yBACF;AAGtC,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAmCO,MAAMJ,yBAAyB;QAAC,EACrCK,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,wBAAwB,EACxBC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAEpB,WADzBE;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE;QACCR,OAAOA;QACPD,WAAWU,IAAAA,gBAAU,gCAEnBN,uFACAR,cAAc,CAACU,KAAK,EACpBN;QAEFW,KAAKR;kBAEL,cAAA,sBAACS,kBAAQ;YACPX,OAAOK,SAAS,MAAMO,YAAY;gBAAER;YAAO;YAC3CL,SAAS;YACTG,YAAYD;YACZY,YAAW;YACXC,WAAU;WACNP;;8BAEJ,qBAACQ,+BAAwB;oBACvBhB,SAAS;oBACTiB,MAAK;;8BAGP,qBAACC,gBAAO;oBAAClB,SAAS;oBAA0CmB,QAAO;8BAChEZ;;;;;AAKX"}

package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n scrollElement: HTMLElement \| null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToEndBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /*\n Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n /\n initialScrollWidth: number;\n textDirection: 'ltr' \| 'rtl';\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /\n Функция для расчета величины прокрутки при клике на левую стрелку.\n /\n getScrollToLeft?: ScrollPositionHandler;\n /\n Функция для расчета величины прокрутки при клике на правую стрелку.\n /\n getScrollToRight?: ScrollPositionHandler;\n arrowSize?: 'm' \| 'l';\n /\n Смещает иконки кнопок навигации по вертикали.\n /\n arrowOffsetY?: number \| string;\n showArrows?: boolean \| 'always';\n scrollAnimationDuration?: number;\n /\n Добавляет возможность прокручивать контент на любое колесо мыши.\n * По умолчанию прокручивается как любой горизонтальный контент через shift.\n /\n scrollOnAnyWheel?: boolean;\n /\n Задает потомкам инлайновое положение (горизонально)\n \n TODO [>=7]: Сделать по умолчанию `true` (или удалить, применяя стили всегда)\n /\n inline?: boolean;\n}\n\n/\n timing method\n /\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/\n Округление к большему по модулю\n \n ## Пример\n \n ```ts\n * import { strict as assert } from 'node:assert';\n \n assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n /\nfunction roundingAwayFromZero(value: number): number {\n return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/\n Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n /\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/\n Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n /\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToEndBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n textDirection,\n}: ScrollContext) {\n if (!scrollElement \|\| !getScrollPosition) {\n return;\n }\n\n /\n крайнее значение сдвига\n /\n const extremeScrollLeft =\n (textDirection === 'ltr' ? 1 : -1) (initialScrollWidth - scrollElement.offsetWidth);\n\n let startScrollLeft = roundUpElementScrollLeft(scrollElement);\n let endScrollLeft = getScrollPosition(startScrollLeft);\n\n onScrollStart();\n\n /*\n Если окончание прокрутки вышло за ноль\n /\n if (startScrollLeft endScrollLeft < 0) {\n endScrollLeft = 0;\n }\n\n if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n onScrollToEndBorder();\n endScrollLeft = extremeScrollLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n if (!scrollElement) {\n onScrollEnd();\n return;\n }\n\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n const scrollEnd =\n textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n /\nexport const HorizontalScroll = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = 'l',\n arrowOffsetY,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n getRef,\n scrollOnAnyWheel = false,\n inline = false,\n ...restProps\n}: HorizontalScrollProps) => {\n const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n const [canScrollRight, setCanScrollRight] = React.useState(false);\n const [directionRef, textDirection = 'ltr'] = useDirection<HTMLDivElement>();\n\n const setCanScrollStart = textDirection === 'ltr' ? setCanScrollLeft : setCanScrollRight;\n const setCanScrollEnd = textDirection === 'ltr' ? setCanScrollRight : setCanScrollLeft;\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef, directionRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const hasPointer = useAdaptivityHasPointer();\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToEndBorder: () => setCanScrollEnd(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth \|\| 0,\n scrollAnimationDuration,\n textDirection,\n }),\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollerRef, scrollAnimationDuration, textDirection, setCanScrollEnd],\n );\n\n const scrollToLeft = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToRight = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const calculateArrowsVisibility = React.useCallback(() => {\n if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n const scrollElement = scrollerRef.current;\n\n setCanScrollStart(scrollElement.scrollLeft !== 0);\n setCanScrollEnd(\n Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n scrollElement.scrollWidth,\n );\n }\n }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]);\n\n const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);\n React.useEffect(\n function addScrollerRefToScrollEvent() {\n if (!scrollerRef.current) {\n return noop;\n }\n\n scrollEvent.add(scrollerRef.current);\n return scrollEvent.remove;\n },\n [scrollEvent, scrollerRef],\n );\n\n React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n /\n Прокрутка с помощью любого колеса мыши\n */\n const onwheel = React.useCallback(\n (e: WheelEvent) => {\n scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n e.preventDefault();\n },\n [scrollerRef],\n );\n\n const wheelEvent = useEventListener('wheel', onwheel);\n React.useEffect(\n function addScrollerRefToWheelEvent() {\n if (!scrollerRef.current \|\| !scrollOnAnyWheel) {\n return noop;\n }\n\n wheelEvent.add(scrollerRef.current);\n\n return wheelEvent.remove;\n },\n [wheelEvent, scrollerRef, scrollOnAnyWheel],\n );\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['HorizontalScroll'],\n 'vkuiInternalHorizontalScroll',\n showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n inline && styles['HorizontalScroll--inline'],\n )}\n onMouseEnter={calculateArrowsVisibility}\n >\n {showArrows && (hasPointer \|\| hasPointer === undefined) && canScrollLeft && (\n <ScrollArrow\n data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"left\"\n aria-hidden\n tabIndex={-1}\n className={classNames(\n styles['HorizontalScroll__arrow'],\n styles['HorizontalScroll__arrowLeft'],\n )}\n onClick={scrollToLeft}\n />\n )}\n {showArrows && (hasPointer \|\| hasPointer === undefined) && canScrollRight && (\n <ScrollArrow\n data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"right\"\n aria-hidden\n tabIndex={-1}\n className={classNames(\n styles['HorizontalScroll__arrow'],\n styles['HorizontalScroll__arrowRight'],\n )}\n onClick={scrollToRight}\n />\n )}\n <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n </div>\n </RootComponent>\n );\n};\n"],"names":["HorizontalScroll","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","endScrollLeft","abs","startTime","scroll","time","elapsed","min","easeInOutSine","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","inline","restProps","canScrollLeft","setCanScrollLeft","React","useState","canScrollRight","setCanScrollRight","directionRef","useDirection","setCanScrollStart","setCanScrollEnd","isCustomScrollingRef","useRef","scrollerRef","useExternRef","hasPointer","useAdaptivityHasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","scrollEvent","useEventListener","useEffect","addScrollerRefToScrollEvent","noop","add","remove","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","addScrollerRefToWheelEvent","RootComponent","baseClassName","classNames","onMouseEnter","undefined","ScrollArrow","data-testid","process","env","NODE_ENV","size","offsetY","direction","aria-hidden","tabIndex","className","onClick","div","ref"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n scrollElement: HTMLElement \| null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToEndBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /*\n Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n /\n initialScrollWidth: number;\n textDirection: 'ltr' \| 'rtl';\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /\n Функция для расчета величины прокрутки при клике на левую стрелку.\n /\n getScrollToLeft?: ScrollPositionHandler;\n /\n Функция для расчета величины прокрутки при клике на правую стрелку.\n /\n getScrollToRight?: ScrollPositionHandler;\n arrowSize?: 'm' \| 'l';\n /\n Смещает иконки кнопок навигации по вертикали.\n /\n arrowOffsetY?: number \| string;\n showArrows?: boolean \| 'always';\n scrollAnimationDuration?: number;\n /\n Добавляет возможность прокручивать контент на любое колесо мыши.\n * По умолчанию прокручивается как любой горизонтальный контент через shift.\n /\n scrollOnAnyWheel?: boolean;\n /\n Задает потомкам инлайновое положение (горизонально)\n \n TODO [>=7]: Сделать по умолчанию `true` (или удалить, применяя стили всегда)\n /\n inline?: boolean;\n}\n\n/\n timing method\n /\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/\n Округление к большему по модулю\n \n ## Пример\n \n ```ts\n * import { strict as assert } from 'node:assert';\n \n assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n /\nfunction roundingAwayFromZero(value: number): number {\n return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/\n Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n /\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/\n Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n /\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToEndBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n textDirection,\n}: ScrollContext) {\n if (!scrollElement \|\| !getScrollPosition) {\n return;\n }\n\n /\n крайнее значение сдвига\n /\n const extremeScrollLeft =\n (textDirection === 'ltr' ? 1 : -1) (initialScrollWidth - scrollElement.offsetWidth);\n\n let startScrollLeft = roundUpElementScrollLeft(scrollElement);\n let endScrollLeft = getScrollPosition(startScrollLeft);\n\n onScrollStart();\n\n /*\n Если окончание прокрутки вышло за ноль\n /\n if (startScrollLeft endScrollLeft < 0) {\n endScrollLeft = 0;\n }\n\n if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n onScrollToEndBorder();\n endScrollLeft = extremeScrollLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n if (!scrollElement) {\n onScrollEnd();\n return;\n }\n\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n const scrollEnd =\n textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n /\nexport const HorizontalScroll = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = 'l',\n arrowOffsetY,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n getRef,\n scrollOnAnyWheel = false,\n inline = false,\n ...restProps\n}: HorizontalScrollProps) => {\n const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n const [canScrollRight, setCanScrollRight] = React.useState(false);\n const [directionRef, textDirection = 'ltr'] = useDirection<HTMLDivElement>();\n\n const setCanScrollStart = textDirection === 'ltr' ? setCanScrollLeft : setCanScrollRight;\n const setCanScrollEnd = textDirection === 'ltr' ? setCanScrollRight : setCanScrollLeft;\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef, directionRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const hasPointer = useAdaptivityHasPointer();\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToEndBorder: () => setCanScrollEnd(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth \|\| 0,\n scrollAnimationDuration,\n textDirection,\n }),\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollerRef, scrollAnimationDuration, textDirection, setCanScrollEnd],\n );\n\n const scrollToLeft = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToRight = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const calculateArrowsVisibility = React.useCallback(() => {\n if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n const scrollElement = scrollerRef.current;\n\n setCanScrollStart(scrollElement.scrollLeft !== 0);\n setCanScrollEnd(\n Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n scrollElement.scrollWidth,\n );\n }\n }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]);\n\n const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);\n React.useEffect(\n function addScrollerRefToScrollEvent() {\n if (!scrollerRef.current) {\n return noop;\n }\n\n scrollEvent.add(scrollerRef.current);\n return scrollEvent.remove;\n },\n [scrollEvent, scrollerRef],\n );\n\n React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n /\n Прокрутка с помощью любого колеса мыши\n */\n const onwheel = React.useCallback(\n (e: WheelEvent) => {\n scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n e.preventDefault();\n },\n [scrollerRef],\n );\n\n const wheelEvent = useEventListener('wheel', onwheel);\n React.useEffect(\n function addScrollerRefToWheelEvent() {\n if (!scrollerRef.current \|\| !scrollOnAnyWheel) {\n return noop;\n }\n\n wheelEvent.add(scrollerRef.current);\n\n return wheelEvent.remove;\n },\n [wheelEvent, scrollerRef, scrollOnAnyWheel],\n );\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['HorizontalScroll'],\n 'vkuiInternalHorizontalScroll',\n showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n inline && styles['HorizontalScroll--inline'],\n )}\n onMouseEnter={calculateArrowsVisibility}\n >\n {showArrows && (hasPointer \|\| hasPointer === undefined) && canScrollLeft && (\n <ScrollArrow\n data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"left\"\n aria-hidden\n tabIndex={-1}\n className={classNames(\n styles['HorizontalScroll__arrow'],\n styles['HorizontalScroll__arrowLeft'],\n )}\n onClick={scrollToLeft}\n />\n )}\n {showArrows && (hasPointer \|\| hasPointer === undefined) && canScrollRight && (\n <ScrollArrow\n data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"right\"\n aria-hidden\n tabIndex={-1}\n className={classNames(\n styles['HorizontalScroll__arrow'],\n styles['HorizontalScroll__arrowRight'],\n )}\n onClick={scrollToRight}\n />\n )}\n <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n </div>\n </RootComponent>\n );\n};\n"],"names":["HorizontalScroll","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","endScrollLeft","abs","startTime","scroll","time","elapsed","min","easeInOutSine","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","inline","restProps","canScrollLeft","setCanScrollLeft","React","useState","canScrollRight","setCanScrollRight","directionRef","useDirection","setCanScrollStart","setCanScrollEnd","isCustomScrollingRef","useRef","scrollerRef","useExternRef","hasPointer","useAdaptivityHasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","scrollEvent","useEventListener","useEffect","addScrollerRefToScrollEvent","noop","add","remove","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","addScrollerRefToWheelEvent","RootComponent","baseClassName","classNames","onMouseEnter","undefined","ScrollArrow","data-testid","process","env","NODE_ENV","size","offsetY","direction","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n none: styles['IconButton--sizeY-none'],\n compact: styles['IconButton--sizeY-compact'],\n} as const;\n\nexport interface IconButtonProps extends TappableProps {\n /*\n Текст кнопки-иконки. Делает ее доступной для ассистивных технологий\n /\n label?: string;\n}\n\nconst warn = warnOnce('IconButton');\n\n/\n @see https://vkcom.github.io/VKUI/#/IconButton\n /\nexport const IconButton = ({ label, children, className, ...restProps }: IconButtonProps) => {\n const platform = usePlatform();\n const { sizeY = 'none' } = useAdaptivity();\n\n if (process.env.NODE_ENV === 'development') {\n / istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n const isAccessible = hasAccessibleName({\n children: [children, label],\n ...restProps,\n });\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 !== 'regular' && sizeYClassNames[sizeY],\n platform === 'ios' && styles['IconButton--ios'],\n className,\n )}\n >\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n {children}\n </Tappable>\n );\n};\n"],"names":["IconButton","sizeYClassNames","none","compact","warn","warnOnce","label","children","className","restProps","platform","usePlatform","sizeY","useAdaptivity","process","env","NODE_ENV","isAccessible","hasAccessibleName","COMMON_WARNINGS","a11y","href","Tappable","activeEffectDelay","activeMode","Component","classNames","VisuallyHidden"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;sBA1Bc;+BACG;6BACF;+BACM;0BACQ;0BACF;gCACT;AAG/B,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AASA,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAML,aAAa;QAAC,EAAEM,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAiC,WAA5BC;QAA/BH;QAAOC;QAAUC;;IAC5C,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAeC,IAAAA,gCAAiB,EAAC;YACrCX,UAAU;gBAACA;gBAAUD;aAAM;WACxBG;QAGL,IAAI,CAACQ,cAAc;YACjBb,KAAKe,yBAAe,CAACC,IAAI,CAACX,UAAUY,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,sBAACC,kBAAQ;QACPC,mBAAmB;QACnBC,YAAW;QACXC,WAAWhB,UAAUY,IAAI,GAAG,MAAM;OAC9BZ;QACJD,WAAWkB,IAAAA,gBAAU,oBAEnBd,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CF,aAAa,gCACbF;;YAGDF,uBAAS,qBAACqB,8BAAc;0BAAErB;;YAC1BC;;;AAGP"}
1	+ {"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n none: styles['IconButton--sizeY-none'],\n compact: styles['IconButton--sizeY-compact'],\n} as const;\n\nexport interface IconButtonProps extends TappableProps {\n /*\n Текст кнопки-иконки. Делает ее доступной для ассистивных технологий\n /\n label?: string;\n}\n\nconst warn = warnOnce('IconButton');\n\n/\n @see https://vkcom.github.io/VKUI/#/IconButton\n /\nexport const IconButton = ({ label, children, className, ...restProps }: IconButtonProps) => {\n const platform = usePlatform();\n const { sizeY = 'none' } = useAdaptivity();\n\n if (process.env.NODE_ENV === 'development') {\n / istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n const isAccessible = hasAccessibleName({\n children: [children, label],\n ...restProps,\n });\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 !== 'regular' && sizeYClassNames[sizeY],\n platform === 'ios' && styles['IconButton--ios'],\n className,\n )}\n >\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n {children}\n </Tappable>\n );\n};\n"],"names":["IconButton","sizeYClassNames","none","compact","warn","warnOnce","label","children","className","restProps","platform","usePlatform","sizeY","useAdaptivity","process","env","NODE_ENV","isAccessible","hasAccessibleName","COMMON_WARNINGS","a11y","href","Tappable","activeEffectDelay","activeMode","Component","classNames","VisuallyHidden"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;sBA1Bc;+BACG;6BACF;+BACM;0BACQ;0BACF;gCACT;AAG/B,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AASA,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAML,aAAa;QAAC,EAAEM,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAiC,WAA5BC;QAA/BH;QAAOC;QAAUC;;IAC5C,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAeC,IAAAA,gCAAiB,EAAC;YACrCX,UAAU;gBAACA;gBAAUD;aAAM;WACxBG;QAGL,IAAI,CAACQ,cAAc;YACjBb,KAAKe,yBAAe,CAACC,IAAI,CAACX,UAAUY,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,sBAACC,kBAAQ;QACPC,mBAAmB;QACnBC,YAAW;QACXC,WAAWhB,UAAUY,IAAI,GAAG,MAAM;OAC9BZ;QACJD,WAAWkB,IAAAA,gBAAU,oBAEnBd,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CF,aAAa,gCACbF;;YAGDF,uBAAS,qBAACqB,8BAAc;0BAAErB;;YAC1BC;;;AAGP"}

package/dist/cjs/components/Image/Image.d.ts CHANGED Viewed

@@ -15,7 +15,7 @@ export declare const Image: {
     ({ size, borderRadius: borderRadiusProp, style, className, ...restProps }: ImageProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     Badge: {
-        ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, ...restProps }: ImageBadgeProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Overlay: {

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

	@@ -1 +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\nconst getBorderRadiusBySize = (\n size: Exclude<ImageBaseProps['size'], undefined>,\n borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n switch (borderRadius) {\n case 's': {\n if (size <= 32) {\n return 2;\n }\n if (size <= 56) {\n return 3;\n }\n return 4;\n }\n case 'm': {\n if (size <= 32) {\n return 3;\n }\n if (size <= 48) {\n return 4;\n }\n if (size <= 72) {\n return 6;\n }\n if (size <= 80) {\n return 8;\n }\n return 10;\n }\n case 'l': {\n if (size <= 16) {\n return 4;\n }\n if (size <= 20) {\n return 5;\n }\n if (size <= 32) {\n return 6;\n }\n if (size <= 40) {\n return 8;\n }\n if (size <= 48) {\n return 10;\n }\n if (size <= 56) {\n return 12;\n }\n if (size <= 64) {\n return 14;\n }\n return 16;\n }\n }\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 const borderRadius = React.useMemo(\n () => getBorderRadiusBySize(size, borderRadiusProp),\n [size, borderRadiusProp],\n );\n\n return (\n <ImageBase\n {...restProps}\n size={size}\n style={{ ...style, borderRadius }}\n className={className}\n />\n );\n};\n\nImage.displayName = 'Image';\n\nImage.Badge = ImageBadge;\nImage.Badge.displayName = 'Image.Badge';\n\nImage.Overlay = ImageBase.Overlay;\nImage.Overlay.displayName = 'Image.Overlay';\n"],"names":["IMAGE_DEFAULT_SIZE","Image","getBorderRadiusBySize","size","borderRadius","borderRadiusProp","style","className","restProps","React","useMemo","ImageBase","displayName","Badge","ImageBadge","Overlay"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;;;;;;;;IAMaA,kBAAkB;eAAlBA;;IAoEAC,KAAK;eAALA;;;;;;;;iEA1EU;2BACoD;4BAC1B;AAI1C,MAAMD,qBAAqB;AASlC,MAAME,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAKO,MAAMF,QAAQ;QAAC,EACpBE,OAAOH,kBAAkB,EACzBI,cAAcC,mBAAmB,GAAG,EACpCC,KAAK,EACLC,SAAS,EAEE,WADRC;QAJHL;QACAC;QACAE;QACAC;;IAGA,MAAMH,eAAeK,OAAMC,OAAO,CAChC,IAAMR,sBAAsBC,MAAME,mBAClC;QAACF;QAAME;KAAiB;IAG1B,qBACE,qBAACM,oBAAS,8CACJH;QACJL,MAAMA;QACNG,OAAO,4CAAKA;YAAOF;;QACnBG,WAAWA;;AAGjB;AAEAN,MAAMW,WAAW,GAAG;AAEpBX,MAAMY,KAAK,GAAGC,sBAAU;AACxBb,MAAMY,KAAK,CAACD,WAAW,GAAG;AAE1BX,MAAMc,OAAO,GAAGJ,oBAAS,CAACI,OAAO;AACjCd,MAAMc,OAAO,CAACH,WAAW,GAAG"}
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\nconst getBorderRadiusBySize = (\n size: Exclude<ImageBaseProps['size'], undefined>,\n borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n switch (borderRadius) {\n case 's': {\n if (size <= 32) {\n return 2;\n }\n if (size <= 56) {\n return 3;\n }\n return 4;\n }\n case 'm': {\n if (size <= 32) {\n return 3;\n }\n if (size <= 48) {\n return 4;\n }\n if (size <= 72) {\n return 6;\n }\n if (size <= 80) {\n return 8;\n }\n return 10;\n }\n case 'l': {\n if (size <= 16) {\n return 4;\n }\n if (size <= 20) {\n return 5;\n }\n if (size <= 32) {\n return 6;\n }\n if (size <= 40) {\n return 8;\n }\n if (size <= 48) {\n return 10;\n }\n if (size <= 56) {\n return 12;\n }\n if (size <= 64) {\n return 14;\n }\n return 16;\n }\n }\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 const borderRadius = React.useMemo(\n () => getBorderRadiusBySize(size, borderRadiusProp),\n [size, borderRadiusProp],\n );\n\n return (\n <ImageBase\n {...restProps}\n size={size}\n style={{ ...style, borderRadius }}\n className={className}\n />\n );\n};\n\nImage.displayName = 'Image';\n\nImage.Badge = ImageBadge;\nImage.Badge.displayName = 'Image.Badge';\n\nImage.Overlay = ImageBase.Overlay;\nImage.Overlay.displayName = 'Image.Overlay';\n"],"names":["IMAGE_DEFAULT_SIZE","Image","getBorderRadiusBySize","size","borderRadius","borderRadiusProp","style","className","restProps","React","useMemo","ImageBase","displayName","Badge","ImageBadge","Overlay"],"mappings":";;;;;;;;;;;IAMaA,kBAAkB;eAAlBA;;IAoEAC,KAAK;eAALA;;;;;;;;iEA1EU;2BACoD;4BAC1B;AAI1C,MAAMD,qBAAqB;AASlC,MAAME,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAKO,MAAMF,QAAQ;QAAC,EACpBE,OAAOH,kBAAkB,EACzBI,cAAcC,mBAAmB,GAAG,EACpCC,KAAK,EACLC,SAAS,EAEE,WADRC;QAJHL;QACAC;QACAE;QACAC;;IAGA,MAAMH,eAAeK,OAAMC,OAAO,CAChC,IAAMR,sBAAsBC,MAAME,mBAClC;QAACF;QAAME;KAAiB;IAG1B,qBACE,qBAACM,oBAAS,8CACJH;QACJL,MAAMA;QACNG,OAAO,4CAAKA;YAAOF;;QACnBG,WAAWA;;AAGjB;AAEAN,MAAMW,WAAW,GAAG;AAEpBX,MAAMY,KAAK,GAAGC,sBAAU;AACxBb,MAAMY,KAAK,CAACD,WAAW,GAAG;AAE1BX,MAAMc,OAAO,GAAGJ,oBAAS,CAACI,OAAO;AACjCd,MAAMc,OAAO,CAACH,WAAW,GAAG"}

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

	@@ -1 +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\nImageBadge.displayName = 'ImageBadge';\n"],"names":["ImageBadge","className","restProps","size","React","useContext","ImageBaseContext","ImageBase","Badge","classNames","displayName"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAOaA;;;eAAAA;;;;;;;;iEAPU;sBACI;2BAC2C;AAK/D,MAAMA,aAAa;QAAC,EAAEC,SAAS,EAAiC,WAA5BC;QAAdD;;IAC3B,MAAM,EAAEE,IAAI,EAAE,GAAGC,OAAMC,UAAU,CAACC,2BAAgB;IAClD,qBACE,qBAACC,oBAAS,CAACC,KAAK,8CACVN;QACJD,WAAWQ,IAAAA,gBAAU,oBAEnBN,OAAO,iCACPF;;AAIR;AAEAD,WAAWU,WAAW,GAAG"}
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\nImageBadge.displayName = 'ImageBadge';\n"],"names":["ImageBadge","className","restProps","size","React","useContext","ImageBaseContext","ImageBase","Badge","classNames","displayName"],"mappings":";;;;+BAOaA;;;eAAAA;;;;;;;;iEAPU;sBACI;2BAC2C;AAK/D,MAAMA,aAAa;QAAC,EAAEC,SAAS,EAAiC,WAA5BC;QAAdD;;IAC3B,MAAM,EAAEE,IAAI,EAAE,GAAGC,OAAMC,UAAU,CAACC,2BAAgB;IAClD,qBACE,qBAACC,oBAAS,CAACC,KAAK,8CACVN;QACJD,WAAWQ,IAAAA,gBAAU,oBAEnBN,OAAO,iCACPF;;AAIR;AAEAD,WAAWU,WAAW,GAAG"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\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\n/*\n Размер по умолчанию.\n /\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n AnchorHTMLAttributesOnly,\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 widthSize?: number;\n /\n Высота изображения\n /\n heightSize?: number;\n /\n Отключает обводку.\n /\n noBorder?: 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 * @since 5.10.0\n /\n withTransparentBackground?: boolean;\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 fetchPriority,\n getRef,\n size: sizeProp,\n width: widthImg,\n height: heightImg,\n widthSize,\n heightSize,\n style,\n noBorder = false,\n fallbackIcon: fallbackIconProp,\n children,\n onLoad,\n onError,\n withTransparentBackground,\n ...restProps\n}: ImageBaseProps) => {\n const size = sizeProp ?? minOr([widthSize, heightSize], defaultSize);\n\n const width = widthSize ?? size;\n const height = heightSize ?? size;\n\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 if (loaded) {\n return;\n }\n\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 imgRef = useExternRef(getRef);\n const isOnLoadStatusCheckedRef = React.useRef(false);\n React.useEffect(\n function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n if (isOnLoadStatusCheckedRef.current) {\n return;\n }\n isOnLoadStatusCheckedRef.current = true;\n\n if (imgRef.current && imgRef.current.complete && !loaded) {\n const event = new Event('load');\n imgRef.current.dispatchEvent(event);\n }\n },\n [imgRef, loaded],\n );\n\n return (\n <ImageBaseContext.Provider value={{ size }}>\n <Clickable\n style={{ width, height, ...style }}\n baseClassName={classNames(\n styles['ImageBase'],\n loaded && styles['ImageBase--loaded'],\n withTransparentBackground && styles['ImageBase--transparent-background'],\n )}\n {...restProps}\n >\n {hasSrc && (\n <img\n ref={imgRef}\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={widthImg}\n height={heightImg}\n onLoad={handleImageLoad}\n onError={handleImageError}\n {...getFetchPriorityProp(fetchPriority)}\n />\n )}\n {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n {children}\n {!noBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n </Clickable>\n </ImageBaseContext.Provider>\n );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["ImageBase","ImageBaseContext","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","size","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","style","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","restProps","minOr","loaded","setLoaded","React","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","value","handleImageLoad","event","handleImageError","imgRef","useExternRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","Clickable","baseClassName","classNames","img","ref","className","getFetchPriorityProp","div","aria-hidden","displayName","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\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\n/*\n Размер по умолчанию.\n /\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n AnchorHTMLAttributesOnly,\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 widthSize?: number;\n /\n Высота изображения\n /\n heightSize?: number;\n /\n Отключает обводку.\n /\n noBorder?: 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 * @since 5.10.0\n /\n withTransparentBackground?: boolean;\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 fetchPriority,\n getRef,\n size: sizeProp,\n width: widthImg,\n height: heightImg,\n widthSize,\n heightSize,\n style,\n noBorder = false,\n fallbackIcon: fallbackIconProp,\n children,\n onLoad,\n onError,\n withTransparentBackground,\n ...restProps\n}: ImageBaseProps) => {\n const size = sizeProp ?? minOr([widthSize, heightSize], defaultSize);\n\n const width = widthSize ?? size;\n const height = heightSize ?? size;\n\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 if (loaded) {\n return;\n }\n\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 imgRef = useExternRef(getRef);\n const isOnLoadStatusCheckedRef = React.useRef(false);\n React.useEffect(\n function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n if (isOnLoadStatusCheckedRef.current) {\n return;\n }\n isOnLoadStatusCheckedRef.current = true;\n\n if (imgRef.current && imgRef.current.complete && !loaded) {\n const event = new Event('load');\n imgRef.current.dispatchEvent(event);\n }\n },\n [imgRef, loaded],\n );\n\n return (\n <ImageBaseContext.Provider value={{ size }}>\n <Clickable\n style={{ width, height, ...style }}\n baseClassName={classNames(\n styles['ImageBase'],\n loaded && styles['ImageBase--loaded'],\n withTransparentBackground && styles['ImageBase--transparent-background'],\n )}\n {...restProps}\n >\n {hasSrc && (\n <img\n ref={imgRef}\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={widthImg}\n height={heightImg}\n onLoad={handleImageLoad}\n onError={handleImageError}\n {...getFetchPriorityProp(fetchPriority)}\n />\n )}\n {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n {children}\n {!noBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n </Clickable>\n </ImageBaseContext.Provider>\n );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["ImageBase","ImageBaseContext","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","size","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","style","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","restProps","minOr","loaded","setLoaded","React","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","value","handleImageLoad","event","handleImageError","imgRef","useExternRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","Clickable","baseClassName","classNames","img","ref","className","getFetchPriorityProp","div","aria-hidden","displayName","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\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 HTMLAttributesWithRootRef<HTMLDivElement> {\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}\n\n/\n Бейдж в правом нижнем углу компонента.\n \n > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge = ({ background = 'shadow', ...restProps }: ImageBaseBadgeProps) => {\n if (process.env.NODE_ENV === 'development') {\n if (restProps.children) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const { size } = React.useContext(ImageBaseContext);\n validateBadgeIcon(size, { name: 'children', value: restProps.children });\n }\n }\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(styles['ImageBaseBadge'], backgroundStyles[background])}\n />\n );\n};\n\nImageBaseBadge.displayName = 'ImageBaseBadge';\n"],"names":["ImageBaseBadge","backgroundStyles","stroke","shadow","background","restProps","process","env","NODE_ENV","children","size","React","useContext","ImageBaseContext","validateBadgeIcon","name","value","RootComponent","baseClassName","classNames","displayName"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;;iEAzCU;sBACI;+BAEG;yBACG;4BAEC;AAGlC,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,MAAM;AACR;AA6BO,MAAMH,iBAAiB;QAAC,EAAEI,aAAa,QAAQ,EAAqC,WAAhCC;QAA1BD;;IAC/B,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIH,UAAUI,QAAQ,EAAE;YACtB,sDAAsD;YACtD,MAAM,EAAEC,IAAI,EAAE,GAAGC,OAAMC,UAAU,CAACC,yBAAgB;YAClDC,IAAAA,6BAAiB,EAACJ,MAAM;gBAAEK,MAAM;gBAAYC,OAAOX,UAAUI,QAAQ;YAAC;QACxE;IACF;IAEA,qBACE,qBAACQ,4BAAa,8CACRZ;QACJa,eAAeC,IAAAA,gBAAU,wBAA2BlB,gBAAgB,CAACG,WAAW;;AAGtF;AAEAJ,eAAeoB,WAAW,GAAG"}
1	+ {"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\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 HTMLAttributesWithRootRef<HTMLDivElement> {\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}\n\n/\n Бейдж в правом нижнем углу компонента.\n \n > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge = ({ background = 'shadow', ...restProps }: ImageBaseBadgeProps) => {\n if (process.env.NODE_ENV === 'development') {\n if (restProps.children) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const { size } = React.useContext(ImageBaseContext);\n validateBadgeIcon(size, { name: 'children', value: restProps.children });\n }\n }\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(styles['ImageBaseBadge'], backgroundStyles[background])}\n />\n );\n};\n\nImageBaseBadge.displayName = 'ImageBaseBadge';\n"],"names":["ImageBaseBadge","backgroundStyles","stroke","shadow","background","restProps","process","env","NODE_ENV","children","size","React","useContext","ImageBaseContext","validateBadgeIcon","name","value","RootComponent","baseClassName","classNames","displayName"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;;iEAzCU;sBACI;+BAEG;yBACG;4BAEC;AAGlC,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,MAAM;AACR;AA6BO,MAAMH,iBAAiB;QAAC,EAAEI,aAAa,QAAQ,EAAqC,WAAhCC;QAA1BD;;IAC/B,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIH,UAAUI,QAAQ,EAAE;YACtB,sDAAsD;YACtD,MAAM,EAAEC,IAAI,EAAE,GAAGC,OAAMC,UAAU,CAACC,yBAAgB;YAClDC,IAAAA,6BAAiB,EAACJ,MAAM;gBAAEK,MAAM;gBAAYC,OAAOX,UAAUI,QAAQ;YAAC;QACxE;IACF;IAEA,qBACE,qBAACQ,4BAAa,8CACRZ;QACJa,eAAeC,IAAAA,gBAAU,wBAA2BlB,gBAAgB,CAACG,WAAW;;AAGtF;AAEAJ,eAAeoB,WAAW,GAAG"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { focusVisiblePresetModeClassNames } from '../../../hooks/useFocusVisibleClassName';\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: onClickProp,\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 const onClick = onClickProp ?? visibility === 'on-hover' ? noop : undefined;\n\n return (\n <Tappable\n {...restProps}\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={classNames(\n focusVisiblePresetModeClassNames['inside'],\n styles['ImageBaseOverlay--visible'],\n )}\n hasActive={false}\n onClick={onClick}\n >\n {children}\n </Tappable>\n );\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["ImageBaseOverlay","className","theme","themeProp","visibility","visibilityProp","children","onClick","onClickProp","restProps","appearance","useAppearance","hasPointer","useAdaptivityHasPointer","process","env","NODE_ENV","size","React","useContext","ImageBaseContext","validateOverlayIcon","name","value","noop","undefined","Tappable","classNames","hasHover","hoverMode","focusVisibleMode","focusVisiblePresetModeClassNames","hasActive","displayName"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;;iEA/CU;sBACU;yCACO;+BACV;0CACmB;0BACxB;yBACQ;4BAEG;AAuC7B,MAAMA,mBAAmB;QAAC,EAC/BC,SAAS,EACTC,OAAOC,SAAS,EAChBC,YAAYC,cAAc,EAC1BC,QAAQ,EACRC,SAASC,WAAW,EAEE,WADnBC;QALHR;QACAC;QACAE;QACAE;QACAC;;IAGA,MAAMG,aAAaC,IAAAA,4BAAa;IAChC,MAAMC,aAAaC,IAAAA,gDAAuB;IAC1C,MAAMX,QAAQC,sBAAAA,uBAAAA,YAAaO;IAC3B,MAAMN,aAAaC,2BAAAA,4BAAAA,iBAAmBO,aAAa,aAAa;IAEhE,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIV,UAAU;YACZ,sDAAsD;YACtD,MAAM,EAAEW,IAAI,EAAE,GAAGC,OAAMC,UAAU,CAACC,yBAAgB;YAClDC,IAAAA,+BAAmB,EAACJ,MAAM;gBAAEK,MAAM;gBAAYC,OAAOjB;YAAS;QAChE;IACF;IAEA,MAAMC,UAAUC,CAAAA,wBAAAA,yBAAAA,cAAeJ,eAAe,UAAS,IAAIoB,UAAI,GAAGC;IAElE,qBACE,qBAACC,kBAAQ,8CACHjB;QACJR,WAAW0B,IAAAA,gBAAU,0BAEnBvB,eAAe,6CACfF,UAAU,gDACVA,UAAU,8CACVD;QAEF2B,UAAUxB,eAAe;QACzByB,WAAWzB,eAAe,+CAAmDqB;QAC7EK,kBAAkBH,IAAAA,gBAAU,EAC1BI,0DAAgC,CAAC,SAAS;QAG5CC,WAAW;QACXzB,SAASA;kBAERD;;AAGP;AAEAN,iBAAiBiC,WAAW,GAAG"}
1	+ {"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { focusVisiblePresetModeClassNames } from '../../../hooks/useFocusVisibleClassName';\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: onClickProp,\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 const onClick = onClickProp ?? visibility === 'on-hover' ? noop : undefined;\n\n return (\n <Tappable\n {...restProps}\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={classNames(\n focusVisiblePresetModeClassNames['inside'],\n styles['ImageBaseOverlay--visible'],\n )}\n hasActive={false}\n onClick={onClick}\n >\n {children}\n </Tappable>\n );\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["ImageBaseOverlay","className","theme","themeProp","visibility","visibilityProp","children","onClick","onClickProp","restProps","appearance","useAppearance","hasPointer","useAdaptivityHasPointer","process","env","NODE_ENV","size","React","useContext","ImageBaseContext","validateOverlayIcon","name","value","noop","undefined","Tappable","classNames","hasHover","hoverMode","focusVisibleMode","focusVisiblePresetModeClassNames","hasActive","displayName"],"mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;;iEA/CU;sBACU;yCACO;+BACV;0CACmB;0BACxB;yBACQ;4BAEG;AAuC7B,MAAMA,mBAAmB;QAAC,EAC/BC,SAAS,EACTC,OAAOC,SAAS,EAChBC,YAAYC,cAAc,EAC1BC,QAAQ,EACRC,SAASC,WAAW,EAEE,WADnBC;QALHR;QACAC;QACAE;QACAE;QACAC;;IAGA,MAAMG,aAAaC,IAAAA,4BAAa;IAChC,MAAMC,aAAaC,IAAAA,gDAAuB;IAC1C,MAAMX,QAAQC,sBAAAA,uBAAAA,YAAaO;IAC3B,MAAMN,aAAaC,2BAAAA,4BAAAA,iBAAmBO,aAAa,aAAa;IAEhE,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIV,UAAU;YACZ,sDAAsD;YACtD,MAAM,EAAEW,IAAI,EAAE,GAAGC,OAAMC,UAAU,CAACC,yBAAgB;YAClDC,IAAAA,+BAAmB,EAACJ,MAAM;gBAAEK,MAAM;gBAAYC,OAAOjB;YAAS;QAChE;IACF;IAEA,MAAMC,UAAUC,CAAAA,wBAAAA,yBAAAA,cAAeJ,eAAe,UAAS,IAAIoB,UAAI,GAAGC;IAElE,qBACE,qBAACC,kBAAQ,8CACHjB;QACJR,WAAW0B,IAAAA,gBAAU,0BAEnBvB,eAAe,6CACfF,UAAU,gDACVA,UAAU,8CACVD;QAEF2B,UAAUxB,eAAe;QACzByB,WAAWzB,eAAe,+CAAmDqB;QAC7EK,kBAAkBH,IAAAA,gBAAU,EAC1BI,0DAAgC,CAAC,SAAS;QAG5CC,WAAW;QACXzB,SAASA;kBAERD;;AAGP;AAEAN,iBAAiBiC,WAAW,GAAG"}

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

	@@ -1 +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"],"~~rangeMappings":";;;;;;;;;;;;;;","~~mappings":";;;;+BAGaA;;;eAAAA;;;;iEAHU;AAGhB,MAAMA,mBAAmBC,OAAMC,aAAa,CAAwB;IACzEC,MAAM;AACR"}
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;;;;iEAHU;AAGhB,MAAMA,mBAAmBC,OAAMC,aAAa,CAAwB;IACzEC,MAAM;AACR"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/*\n Возвращает размер иконки основанный на дизайн-системы.\n \n @param imageSize наименьшая сторона изображения\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 \n @param imageSize наименьшая сторона изображения\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 \n @param imageSize наименьшая сторона изображения\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":["getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageSize","MAX_SIZE"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":"AAAA;;;;CAIC;;;;;;;;;;;IAuBeA,+BAA+B;eAA/BA;;IAtBAC,kCAAkC;eAAlCA;;IAwCAC,iCAAiC;eAAjCA;;;AAxCT,SAASD,mCAAmCE,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,OAAOF,mCAAmCG,QAAQ;AACpD;AAEAH,mCAAmCG,QAAQ,GAAG;AAOvC,SAASJ,gCAAgCG,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,OAAOH,gCAAgCI,QAAQ;AACjD;AAEAJ,gCAAgCI,QAAQ,GAAG;AAOpC,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"}
1	+ {"version":3,"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/*\n Возвращает размер иконки основанный на дизайн-системы.\n \n @param imageSize наименьшая сторона изображения\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 \n @param imageSize наименьшая сторона изображения\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 \n @param imageSize наименьшая сторона изображения\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":["getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageSize","MAX_SIZE"],"mappings":"AAAA;;;;CAIC;;;;;;;;;;;IAuBeA,+BAA+B;eAA/BA;;IAtBAC,kCAAkC;eAAlCA;;IAwCAC,iCAAiC;eAAjCA;;;AAxCT,SAASD,mCAAmCE,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,OAAOF,mCAAmCG,QAAQ;AACpD;AAEAH,mCAAmCG,QAAQ,GAAG;AAOvC,SAASJ,gCAAgCG,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,OAAOH,gCAAgCI,QAAQ;AACjD;AAEAJ,gCAAgCI,QAAQ,GAAG;AAOpC,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/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ImageBase/types.ts"],"sourcesContent":["export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96] as const;\n\nexport type ImageBaseSize = (typeof imageBaseSizes)[number];\n\nexport type ImageBaseExpectedIconProps = {\n width?: number;\n height?: number;\n className?: string;\n};\n\nexport interface ImageBaseContextProps {\n size: ImageBaseSize \| number;\n}\n"],"names":["imageBaseSizes"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,iBAAiB;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;CAAG"}
1	+ {"version":3,"sources":["../../../../src/components/ImageBase/types.ts"],"sourcesContent":["export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96] as const;\n\nexport type ImageBaseSize = (typeof imageBaseSizes)[number];\n\nexport type ImageBaseExpectedIconProps = {\n width?: number;\n height?: number;\n className?: string;\n};\n\nexport interface ImageBaseContextProps {\n size: ImageBaseSize \| number;\n}\n"],"names":["imageBaseSizes"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,iBAAiB;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;CAAG"}

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

	@@ -1 +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 * 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":["validateBadgeIcon","validateFallbackIcon","validateOverlayIcon","validateSize","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"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":"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"}
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 * 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":["validateBadgeIcon","validateFallbackIcon","validateOverlayIcon","validateSize","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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\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 HTMLAttributesWithRootRef<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> </VisuallyHidden>\n </Subhead>\n )}\n {children}\n </Headline>\n);\n"],"names":["InfoRow","header","children","className","restProps","Headline","Component","classNames","weight","hasReactNode","Subhead","VisuallyHidden"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAeaA;;;eAAAA;;;;;;;;iEAfU;sBACkB;0BAEhB;yBACD;gCACO;AAUxB,MAAMA,UAAU;QAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAA8B,WAAzBC;QAAhCH;QAAQC;QAAUC;;yBAC1C,sBAACE,kBAAQ,8CACHD;QACJE,WAAU;QACVH,WAAWI,IAAAA,gBAAU,iBAAoBJ;QACzCK,QAAO;;YAENC,IAAAA,kBAAY,EAACR,yBACZ,sBAACS,gBAAO;gBAACJ,WAAU;gBAASH,SAAS;;oBAClCF;kCACD,qBAACU,8BAAc;kCAAC;;;;YAGnBT"}
1	+ {"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\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 HTMLAttributesWithRootRef<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> </VisuallyHidden>\n </Subhead>\n )}\n {children}\n </Headline>\n);\n"],"names":["InfoRow","header","children","className","restProps","Headline","Component","classNames","weight","hasReactNode","Subhead","VisuallyHidden"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;;iEAfU;sBACkB;0BAEhB;yBACD;gCACO;AAUxB,MAAMA,UAAU;QAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAA8B,WAAzBC;QAAhCH;QAAQC;QAAUC;;yBAC1C,sBAACE,kBAAQ,8CACHD;QACJE,WAAU;QACVH,WAAWI,IAAAA,gBAAU,iBAAoBJ;QACzCK,QAAO;;YAENC,IAAAA,kBAAY,EAACR,yBACZ,sBAACS,gBAAO;gBAACJ,WAAU;gBAASH,SAAS;;oBAClCF;kCACD,qBAACU,8BAAc;kCAAC;;;;YAGnBT"}

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

	@@ -1 +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 { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n none: styles['Input--sizeY-none'],\n ['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 !== '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 <UnstyledTextField\n {...restProps}\n as=\"input\"\n type={type}\n className={styles['Input__el']}\n getRootRef={getRef}\n />\n </FormField>\n );\n};\n"],"names":["Input","sizeYClassNames","none","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","useAdaptivity","FormField","classNames","disabled","UnstyledTextField","as"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;;iEAvBU;sBACI;+BACG;2BAEY;mCACR;AAGlC,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAYO,MAAMF,QAAQ;QAAC,EACpBG,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EAEO,WADRC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,qBAACC,oBAAS;QACRR,OAAOA;QACPF,WAAWW,IAAAA,gBAAU,eAEnBb,UAAU,qCACVA,UAAU,uCACVU,UAAU,aAAab,eAAe,CAACa,MAAM,EAC7CL,kCACAC,gCACAJ;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPQ,UAAUL,UAAUK,QAAQ;QAC5BN,MAAMA;QACND,QAAQA;kBAER,cAAA,qBAACQ,oCAAiB,8CACZN;YACJO,IAAG;YACHjB,MAAMA;YACNG,SAAS;YACTC,YAAYF;;;AAIpB"}
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 { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n none: styles['Input--sizeY-none'],\n ['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 !== '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 <UnstyledTextField\n {...restProps}\n as=\"input\"\n type={type}\n className={styles['Input__el']}\n getRootRef={getRef}\n />\n </FormField>\n );\n};\n"],"names":["Input","sizeYClassNames","none","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","useAdaptivity","FormField","classNames","disabled","UnstyledTextField","as"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;;iEAvBU;sBACI;+BACG;2BAEY;mCACR;AAGlC,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAYO,MAAMF,QAAQ;QAAC,EACpBG,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EAEO,WADRC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,qBAACC,oBAAS;QACRR,OAAOA;QACPF,WAAWW,IAAAA,gBAAU,eAEnBb,UAAU,qCACVA,UAAU,uCACVU,UAAU,aAAab,eAAe,CAACa,MAAM,EAC7CL,kCACAC,gCACAJ;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPQ,UAAUL,UAAUK,QAAQ;QAC5BN,MAAMA;QACND,QAAQA;kBAER,cAAA,qBAACQ,oCAAiB,8CACZN;YACJO,IAAG;YACHjB,MAAMA;YACNG,SAAS;YACTC,YAAYF;;;AAIpB"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {\n length: number;\n index: number;\n value?: string;\n label?: 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 label,\n ...restProps\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 <RootComponent\n Component=\"span\"\n baseClassName={value?.length === length ? styles['InputLike--full'] : undefined}\n tabIndex={0}\n onClick={callMultiple(onClick, handleElementSelect)}\n onFocus={callMultiple(stopPropagation, onFocus)}\n {...restProps}\n >\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\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 </RootComponent>\n );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["InputLike","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","className","value","onElementSelect","onClick","onFocus","label","restProps","handleElementSelect","React","useCallback","event","stopPropagation","RootComponent","Component","baseClassName","undefined","tabIndex","callMultiple","VisuallyHidden","slice","displayName"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA6BaA;;;eAAAA;;;;;;;;iEA7BU;8BACM;uBACG;+BACuB;gCACxB;AAW/B,MAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc;IACrC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,qBAACC;YAAiBC,SAAS;sBACxBT;WADQM;IAIf;IACA,OAAOD;AACT;AAEO,MAAMN,YAAY;QAAC,EACxBW,KAAK,EACLN,MAAM,EACNE,KAAK,EACLK,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,KAAK,EAEU,WADZC;QAPHL;QACAN;QACAE;QACAK;QACAC;QACAC;QACAC;;IAGA,MAAME,sBAAsBC,OAAMC,WAAW,CAC3C,CAACC;QACCC,IAAAA,sBAAe,EAACD;QAChBR,4BAAAA,sCAAAA,gBAAkBL;IACpB,GACA;QAACA;QAAOK;KAAgB;QAmBKD;IAhB/B,qBACE,sBAACW,4BAAa;QACZC,WAAU;QACVC,eAAeb,CAAAA,kBAAAA,4BAAAA,MAAON,MAAM,MAAKA,iCAAqCoB;QACtEC,UAAU;QACVb,SAASc,IAAAA,0BAAY,EAACd,SAASI;QAC/BH,SAASa,IAAAA,0BAAY,EAACN,sBAAe,EAAEP;OACnCE;;YAEHD,uBAAS,qBAACa,8BAAc;0BAAEb;;YAC1BJ,kBAAAA,4BAAAA,MAAOkB,KAAK,CAAC,GAAGxB,SAAS;YACzBM,CAAAA,kBAAAA,4BAAAA,MAAOkB,KAAK,CAACxB,SAAS,qBACrB,qBAACI;gBAAiBC,SAAS;0BACxBC,MAAMkB,KAAK,CAACxB,SAAS;eADbE;YAIZH,gBAAgBC,SAAUM,CAAAA,CAAAA,gBAAAA,kBAAAA,4BAAAA,MAAON,MAAM,cAAbM,2BAAAA,gBAAiB,CAAA;;;AAGlD;AAEAX,UAAU8B,WAAW,GAAG"}
1	+ {"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {\n length: number;\n index: number;\n value?: string;\n label?: 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 label,\n ...restProps\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 <RootComponent\n Component=\"span\"\n baseClassName={value?.length === length ? styles['InputLike--full'] : undefined}\n tabIndex={0}\n onClick={callMultiple(onClick, handleElementSelect)}\n onFocus={callMultiple(stopPropagation, onFocus)}\n {...restProps}\n >\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\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 </RootComponent>\n );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["InputLike","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","className","value","onElementSelect","onClick","onFocus","label","restProps","handleElementSelect","React","useCallback","event","stopPropagation","RootComponent","Component","baseClassName","undefined","tabIndex","callMultiple","VisuallyHidden","slice","displayName"],"mappings":";;;;+BA6BaA;;;eAAAA;;;;;;;;iEA7BU;8BACM;uBACG;+BACuB;gCACxB;AAW/B,MAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc;IACrC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,qBAACC;YAAiBC,SAAS;sBACxBT;WADQM;IAIf;IACA,OAAOD;AACT;AAEO,MAAMN,YAAY;QAAC,EACxBW,KAAK,EACLN,MAAM,EACNE,KAAK,EACLK,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,KAAK,EAEU,WADZC;QAPHL;QACAN;QACAE;QACAK;QACAC;QACAC;QACAC;;IAGA,MAAME,sBAAsBC,OAAMC,WAAW,CAC3C,CAACC;QACCC,IAAAA,sBAAe,EAACD;QAChBR,4BAAAA,sCAAAA,gBAAkBL;IACpB,GACA;QAACA;QAAOK;KAAgB;QAmBKD;IAhB/B,qBACE,sBAACW,4BAAa;QACZC,WAAU;QACVC,eAAeb,CAAAA,kBAAAA,4BAAAA,MAAON,MAAM,MAAKA,iCAAqCoB;QACtEC,UAAU;QACVb,SAASc,IAAAA,0BAAY,EAACd,SAASI;QAC/BH,SAASa,IAAAA,0BAAY,EAACN,sBAAe,EAAEP;OACnCE;;YAEHD,uBAAS,qBAACa,8BAAc;0BAAEb;;YAC1BJ,kBAAAA,4BAAAA,MAAOkB,KAAK,CAAC,GAAGxB,SAAS;YACzBM,CAAAA,kBAAAA,4BAAAA,MAAOkB,KAAK,CAACxB,SAAS,qBACrB,qBAACI;gBAAiBC,SAAS;0BACxBC,MAAMkB,KAAK,CAACxB,SAAS;eADbE;YAIZH,gBAAgBC,SAAUM,CAAAA,CAAAA,gBAAAA,kBAAAA,4BAAAA,MAAON,MAAM,cAAbM,2BAAAA,gBAAiB,CAAA;;;AAGlD;AAEAX,UAAU8B,WAAW,GAAG"}

package/dist/cjs/components/InputLike/InputLikeDivider.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputLikeDivider.d.ts","sourceRoot":"","sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,gBAAgB,sCAI1B,~~MAAM~~,mBAAmB,CAAC,eAAe,CAAC,4CAM5C,CAAC"}
1	+ {"version":3,"file":"InputLikeDivider.d.ts","sourceRoot":"","sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,gBAAgB,sCAI1B,KAAK,CAAC,mBAAmB,CAAC,eAAe,CAAC,4CAM5C,CAAC"}

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

	@@ -1 +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"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAIaA;;;eAAAA;;;;;;;;iEAJU;sBACI;AAGpB,MAAMA,mBAAmB;QAAC,EAC/BC,QAAQ,EACRC,SAAS,EAEkC,WADxCC;QAFHF;QACAC;;IAGA,qBACE,qBAACE;QAAKF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAAgBC;kBACvEF;;AAGP"}
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;;;;;;;;iEAJU;sBACI;AAGpB,MAAMA,mBAAmB;QAAC,EAC/BC,QAAQ,EACRC,SAAS,EAEkC,WADxCC;QAFHF;QACAC;;IAGA,qBACE,qBAACE;QAAKF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAAgBC;kBACvEF;;AAGP"}

package/dist/cjs/components/Link/Link.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG/D,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,+DAMd,SAAS,~~4CAcX~~,CAAC"}
1	+ {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG/D,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,+DAMd,SAAS,4CAeX,CAAC"}

package/dist/cjs/components/Link/Link.js CHANGED Viewed

@@ -28,6 +28,7 @@ const Link = (_param)=>{
         className: (0, _vkjs.classNames)("vkuiLink", hasVisited && "vkuiLink--has-visited", className),
         hasHover: false,
         activeMode: "opacity",
+        hoverMode: "none",
         focusVisibleMode: "outside",
         children: children
     }));