@vkontakte/vkui 6.0.2 → 6.1.0

package/dist/cjs/components/TabsItem/TabsItem.js

@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
@@ -39,7 +40,7 @@ const fillModeClassNames = {
 };
 const warn = (0, _warnOnce.warnOnce)('TabsItem');
 const TabsItem = (_param)=>{
-    var { before, children, status, after, selected = false, className, role = 'tab', tabIndex: tabIndexProp, getRootRef } = _param, restProps = _object_without_properties._(_param, [
+    var { before, children, status, after, selected = false, className, role = 'tab', tabIndex: tabIndexProp, getRootRef, hoverMode = "vkuiTabsItem--hover", activeMode = '', hovered, activated, hasHover, hasActive = false, focusVisibleMode = 'inside' } = _param, restProps = _object_without_properties._(_param, [
         "before",
         "children",
         "status",
@@ -48,20 +49,39 @@ const TabsItem = (_param)=>{
         "className",
         "role",
         "tabIndex",
-        "getRootRef"
+        "getRootRef",
+        "hoverMode",
+        "activeMode",
+        "hovered",
+        "activated",
+        "hasHover",
+        "hasActive",
+        "focusVisibleMode"
     ]);
     const { sizeY = 'none' } = (0, _useAdaptivity.useAdaptivity)();
     const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } = _react.useContext(_Tabs.TabsModeContext);
     let statusComponent = null;
     const isTabFlow = role === 'tab';
     if ((0, _vkjs.hasReactNode)(status)) {
-        statusComponent = typeof status === 'number' ? /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
+        statusComponent = typeof status === 'number' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Subhead.Subhead, {
             Component: "span",
             className: (0, _vkjs.classNames)("vkuiTabsItem__status", "vkuiTabsItem__status--count"),
-            weight: "2"
-        }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, " "), status) : /*#__PURE__*/ _react.createElement("span", {
-            className: "vkuiTabsItem__status"
-        }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, " "), status);
+            weight: "2",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                    children: " "
+                }),
+                status
+            ]
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+            className: "vkuiTabsItem__status",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                    children: " "
+                }),
+                status
+            ]
+        });
     }
     if (process.env.NODE_ENV === 'development' && isTabFlow) {
         if (!restProps['aria-controls']) {
@@ -105,29 +125,42 @@ const TabsItem = (_param)=>{
         shouldScrollToSelected,
         scrollBehaviorToSelectedTab
     ]);
-    return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread_props._(_object_spread._({}, restProps), {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Tappable.Tappable, _object_spread_props._(_object_spread._({}, restProps), {
         getRootRef: rootRef,
         className: (0, _vkjs.classNames)("vkuiTabsItem", mode && stylesMode[mode], selected && "vkuiTabsItem--selected", sizeY !== 'regular' && sizeYClassNames[sizeY], withGaps && "vkuiTabsItem--withGaps", layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode], className),
-        hoverMode: "vkuiTabsItem--hover",
-        activeMode: "",
-        focusVisibleMode: "inside",
-        hasActive: false,
+        hoverMode: hoverMode,
+        activeMode: activeMode,
+        hasHover: hasHover,
+        hasActive: hasActive,
+        hovered: hovered,
+        activated: activated,
+        focusVisibleMode: focusVisibleMode,
         role: role,
         "aria-selected": selected,
-        tabIndex: tabIndex
-    }), before && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiTabsItem__before"
-    }, before), /*#__PURE__*/ _react.createElement(_Headline.Headline, {
-        Component: "span",
-        className: "vkuiTabsItem__label",
-        level: mode === 'default' ? '1' : '2',
-        weight: "2"
-    }, children), statusComponent, after && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiTabsItem__after"
-    }, after), mode === 'default' && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiTabsItem__underline",
-        "aria-hidden": true,
-        "data-selected": selected
+        tabIndex: tabIndex,
+        children: [
+            before && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiTabsItem__before",
+                children: before
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Headline.Headline, {
+                Component: "span",
+                className: "vkuiTabsItem__label",
+                level: mode === 'default' ? '1' : '2',
+                weight: "2",
+                children: children
+            }),
+            statusComponent,
+            after && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiTabsItem__after",
+                children: after
+            }),
+            mode === 'default' && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiTabsItem__underline",
+                "aria-hidden": true,
+                "data-selected": selected
+            })
+        ]
     }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  ['compact']: styles['TabsItem--sizeY-compact'],\n};\n\nconst stylesMode = {\n  default: styles['TabsItem--mode-default'],\n  accent: styles['TabsItem--mode-accent'],\n  secondary: styles['TabsItem--mode-secondary'],\n};\n\nconst fillModeClassNames = {\n  stretched: styles['TabsItem--stretched'],\n  shrinked: styles['TabsItem--shrinked'],\n};\n\nexport interface TabsItemProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      {...restProps}\n      getRootRef={rootRef}\n      className={classNames(\n        styles['TabsItem'],\n        mode && stylesMode[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["TabsItem","sizeYClassNames","none","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","warnOnce","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","getRootRef","restProps","sizeY","useAdaptivity","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","React","useContext","TabsModeContext","statusComponent","isTabFlow","hasReactNode","Subhead","Component","classNames","weight","VisuallyHidden","span","process","env","NODE_ENV","undefined","rootRef","useExternRef","prevSelected","usePrevious","isInitialRender","shouldScrollToSelected","document","useDOM","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","Tappable","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","Headline","level","aria-hidden","data-selected"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  ['compact']: styles['TabsItem--sizeY-compact'],\n};\n\nconst stylesMode = {\n  default: styles['TabsItem--mode-default'],\n  accent: styles['TabsItem--mode-accent'],\n  secondary: styles['TabsItem--mode-secondary'],\n};\n\nconst fillModeClassNames = {\n  stretched: styles['TabsItem--stretched'],\n  shrinked: styles['TabsItem--shrinked'],\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableProps,\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles['TabsItem--hover'],\n  activeMode = '',\n  hovered,\n  activated,\n  hasHover,\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      {...restProps}\n      getRootRef={rootRef}\n      className={classNames(\n        styles['TabsItem'],\n        mode && stylesMode[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n        className,\n      )}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      hovered={hovered}\n      activated={activated}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["TabsItem","sizeYClassNames","none","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","warnOnce","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","getRootRef","hoverMode","activeMode","hovered","activated","hasHover","hasActive","focusVisibleMode","restProps","sizeY","useAdaptivity","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","React","useContext","TabsModeContext","statusComponent","isTabFlow","hasReactNode","Subhead","Component","classNames","weight","VisuallyHidden","span","process","env","NODE_ENV","undefined","rootRef","useExternRef","prevSelected","usePrevious","isInitialRender","shouldScrollToSelected","document","useDOM","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","Tappable","aria-selected","div","Headline","level","aria-hidden","data-selected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/cjs/components/Tappable/Ripple.d.ts

@@ -22,6 +22,6 @@ export interface RippleProps {
     needRipple: boolean;
     clicks: Wave[];
 }
-export declare const Ripple: ({ needRipple, clicks }: RippleProps) => React.JSX.Element;
+export declare const Ripple: ({ needRipple, clicks }: RippleProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Ripple.d.ts.map

package/dist/cjs/components/Tappable/Ripple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,eAAO,MAAM,kBAAkB,eAAgB,MAAM,cAAc,OAAO,GAAG,SAAS,YAIrF,CAAC;AAEF,UAAU,IAAI;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;CACnB;AAKD;;GAEG;AACH,eAAO,MAAM,SAAS,eAAgB,OAAO,qBAAqB,OAAO,GAAG,SAAS;;;;CAkDpF,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,2BAAmC,WAAW,sBAkBhE,CAAC"}
+{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,eAAO,MAAM,kBAAkB,eAAgB,MAAM,cAAc,OAAO,GAAG,SAAS,YAIrF,CAAC;AAEF,UAAU,IAAI;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;CACnB;AAKD;;GAEG;AACH,eAAO,MAAM,SAAS,eAAgB,OAAO,qBAAqB,OAAO,GAAG,SAAS;;;;CAkDpF,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,2BAAmC,WAAW,4CAkBhE,CAAC"}

package/dist/cjs/components/Tappable/Ripple.js

@@ -20,6 +20,7 @@ _export(exports, {
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _usePlatform = require("../../hooks/usePlatform");
@@ -74,17 +75,17 @@ const useRipple = (needRipple, hasPointerContext)=>{
     };
 };
 const Ripple = ({ needRipple = true, clicks })=>{
-    return /*#__PURE__*/ _react.createElement("span", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
         "aria-hidden": true,
-        className: (0, _vkjs.classNames)("vkuiTappable__stateLayer", needRipple && "vkuiTappable__ripple")
-    }, clicks.map((wave)=>/*#__PURE__*/ _react.createElement("span", {
-            key: wave.id,
-            className: "vkuiTappable__wave",
-            style: {
-                top: wave.y,
-                left: wave.x
-            }
-        })));
+        className: (0, _vkjs.classNames)("vkuiTappable__stateLayer", needRipple && "vkuiTappable__ripple"),
+        children: clicks.map((wave)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: "vkuiTappable__wave",
+                style: {
+                    top: wave.y,
+                    left: wave.x
+                }
+            }, wave.id))
+    });
 };
 
 //# sourceMappingURL=Ripple.js.map

package/dist/cjs/components/Tappable/Ripple.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/Ripple.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasMouse as hasPointerLib, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { getOffsetRect } from '../../lib/offset';\nimport styles from './Tappable.module.css';\n\n/**\n * Возможно нужен Ripple эффект. Данный хук нужен для отказа\n * от двойного ререндера.\n */\nexport const useMaybeNeedRipple = (activeMode: string, hasPointer: boolean | undefined) => {\n  const platform = usePlatform();\n\n  return platform === 'android' && !hasPointer && activeMode === 'background';\n};\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n  pointerId: number;\n}\n\nconst DELAY = 70;\nconst WAVE_LIVE = 225;\n\n/**\n * Хук для создания Ripple эффектов\n */\nexport const useRipple = (needRipple: boolean, hasPointerContext: boolean | undefined) => {\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n\n  /**\n   * Коллекция нажатий и таймеров задержки появления волны\n   */\n  const pointerDelayTimers = React.useMemo(\n    () => new Map<number, ReturnType<typeof setTimeout>>(),\n    [],\n  );\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number, pointerId: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow, pointerId }]);\n    clearClicks.set();\n    pointerDelayTimers.delete(pointerId);\n  }\n\n  /**\n   * Добавляем волну с задержкой. Задержка необходима при отмене волны.\n   */\n  const onPointerDown: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const { top, left } = getOffsetRect(e.currentTarget);\n    const x = e.clientX - (left ?? 0);\n    const y = e.clientY - (top ?? 0);\n\n    pointerDelayTimers.set(\n      e.pointerId,\n      setTimeout(() => addClick(x, y, e.pointerId), DELAY),\n    );\n  };\n\n  const onPointerCancel: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const timer = pointerDelayTimers.get(e.pointerId);\n    clearTimeout(timer);\n    pointerDelayTimers.delete(e.pointerId);\n  };\n\n  // WARNING: не использовать для рендеринга\n  const reallyNeedRipple = (!hasPointerLib || hasPointerContext === false) && needRipple;\n\n  return {\n    clicks,\n    onPointerDown: reallyNeedRipple ? onPointerDown : noop,\n    onPointerCancel: reallyNeedRipple ? onPointerCancel : noop,\n  };\n};\n\nexport interface RippleProps {\n  needRipple: boolean;\n  clicks: Wave[];\n}\n\nexport const Ripple = ({ needRipple = true, clicks }: RippleProps) => {\n  return (\n    <span\n      aria-hidden\n      className={classNames(\n        styles['Tappable__stateLayer'],\n        needRipple && styles['Tappable__ripple'],\n      )}\n    >\n      {clicks.map((wave) => (\n        <span\n          key={wave.id}\n          className={styles['Tappable__wave']}\n          style={{ top: wave.y, left: wave.x }}\n        />\n      ))}\n    </span>\n  );\n};\n"],"names":["Ripple","useMaybeNeedRipple","useRipple","activeMode","hasPointer","platform","usePlatform","DELAY","WAVE_LIVE","needRipple","hasPointerContext","clicks","setClicks","React","useState","pointerDelayTimers","useMemo","Map","clearClicks","useTimeout","addClick","x","y","pointerId","dateNow","Date","now","filteredClicks","filter","click","id","set","delete","onPointerDown","e","top","left","getOffsetRect","currentTarget","clientX","clientY","setTimeout","onPointerCancel","timer","get","clearTimeout","reallyNeedRipple","hasPointerLib","noop","span","aria-hidden","className","classNames","map","wave","key","style"],"mappings":";;;;;;;;;;;IAuFaA,MAAM;eAANA;;IA5EAC,kBAAkB;eAAlBA;;IAmBAC,SAAS;eAATA;;;;iEA9BU;sBACqC;6BAChC;4BACD;wBACG;AAOvB,MAAMD,qBAAqB,CAACE,YAAoBC;IACrD,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,OAAOD,aAAa,aAAa,CAACD,cAAcD,eAAe;AACjE;AASA,MAAMI,QAAQ;AACd,MAAMC,YAAY;AAKX,MAAMN,YAAY,CAACO,YAAqBC;IAC7C,MAAM,CAACC,QAAQC,UAAU,GAAGC,OAAMC,QAAQ,CAAS,EAAE;IAErD;;GAEC,GACD,MAAMC,qBAAqBF,OAAMG,OAAO,CACtC,IAAM,IAAIC,OACV,EAAE;IAGJ,MAAMC,cAAcC,IAAAA,sBAAU,EAAC,IAAMP,UAAU,EAAE,GAAGJ;IAEpD,SAASY,SAASC,CAAS,EAAEC,CAAS,EAAEC,SAAiB;QACvD,MAAMC,UAAUC,KAAKC,GAAG;QACxB,MAAMC,iBAAiBhB,OAAOiB,MAAM,CAAC,CAACC,QAAUA,MAAMC,EAAE,GAAGtB,YAAYgB;QAEvEZ,UAAU;eAAIe;YAAgB;gBAAEN;gBAAGC;gBAAGQ,IAAIN;gBAASD;YAAU;SAAE;QAC/DL,YAAYa,GAAG;QACfhB,mBAAmBiB,MAAM,CAACT;IAC5B;IAEA;;GAEC,GACD,MAAMU,gBAA4D,CAACC;QACjE,MAAM,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,IAAAA,qBAAa,EAACH,EAAEI,aAAa;QACnD,MAAMjB,IAAIa,EAAEK,OAAO,GAAIH,CAAAA,iBAAAA,kBAAAA,OAAQ,CAAA;QAC/B,MAAMd,IAAIY,EAAEM,OAAO,GAAIL,CAAAA,gBAAAA,iBAAAA,MAAO,CAAA;QAE9BpB,mBAAmBgB,GAAG,CACpBG,EAAEX,SAAS,EACXkB,WAAW,IAAMrB,SAASC,GAAGC,GAAGY,EAAEX,SAAS,GAAGhB;IAElD;IAEA,MAAMmC,kBAA8D,CAACR;QACnE,MAAMS,QAAQ5B,mBAAmB6B,GAAG,CAACV,EAAEX,SAAS;QAChDsB,aAAaF;QACb5B,mBAAmBiB,MAAM,CAACE,EAAEX,SAAS;IACvC;IAEA,0CAA0C;IAC1C,MAAMuB,mBAAmB,AAAC,CAAA,CAACC,cAAa,IAAIrC,sBAAsB,KAAI,KAAMD;IAE5E,OAAO;QACLE;QACAsB,eAAea,mBAAmBb,gBAAgBe,UAAI;QACtDN,iBAAiBI,mBAAmBJ,kBAAkBM,UAAI;IAC5D;AACF;AAOO,MAAMhD,SAAS,CAAC,EAAES,aAAa,IAAI,EAAEE,MAAM,EAAe;IAC/D,qBACE,qBAACsC;QACCC,eAAAA;QACAC,WAAWC,IAAAA,gBAAU,8BAEnB3C;OAGDE,OAAO0C,GAAG,CAAC,CAACC,qBACX,qBAACL;YACCM,KAAKD,KAAKxB,EAAE;YACZqB,SAAS;YACTK,OAAO;gBAAErB,KAAKmB,KAAKhC,CAAC;gBAAEc,MAAMkB,KAAKjC,CAAC;YAAC;;AAK7C"}
+{"version":3,"sources":["../../../../src/components/Tappable/Ripple.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasMouse as hasPointerLib, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { getOffsetRect } from '../../lib/offset';\nimport styles from './Tappable.module.css';\n\n/**\n * Возможно нужен Ripple эффект. Данный хук нужен для отказа\n * от двойного ререндера.\n */\nexport const useMaybeNeedRipple = (activeMode: string, hasPointer: boolean | undefined) => {\n  const platform = usePlatform();\n\n  return platform === 'android' && !hasPointer && activeMode === 'background';\n};\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n  pointerId: number;\n}\n\nconst DELAY = 70;\nconst WAVE_LIVE = 225;\n\n/**\n * Хук для создания Ripple эффектов\n */\nexport const useRipple = (needRipple: boolean, hasPointerContext: boolean | undefined) => {\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n\n  /**\n   * Коллекция нажатий и таймеров задержки появления волны\n   */\n  const pointerDelayTimers = React.useMemo(\n    () => new Map<number, ReturnType<typeof setTimeout>>(),\n    [],\n  );\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number, pointerId: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow, pointerId }]);\n    clearClicks.set();\n    pointerDelayTimers.delete(pointerId);\n  }\n\n  /**\n   * Добавляем волну с задержкой. Задержка необходима при отмене волны.\n   */\n  const onPointerDown: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const { top, left } = getOffsetRect(e.currentTarget);\n    const x = e.clientX - (left ?? 0);\n    const y = e.clientY - (top ?? 0);\n\n    pointerDelayTimers.set(\n      e.pointerId,\n      setTimeout(() => addClick(x, y, e.pointerId), DELAY),\n    );\n  };\n\n  const onPointerCancel: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const timer = pointerDelayTimers.get(e.pointerId);\n    clearTimeout(timer);\n    pointerDelayTimers.delete(e.pointerId);\n  };\n\n  // WARNING: не использовать для рендеринга\n  const reallyNeedRipple = (!hasPointerLib || hasPointerContext === false) && needRipple;\n\n  return {\n    clicks,\n    onPointerDown: reallyNeedRipple ? onPointerDown : noop,\n    onPointerCancel: reallyNeedRipple ? onPointerCancel : noop,\n  };\n};\n\nexport interface RippleProps {\n  needRipple: boolean;\n  clicks: Wave[];\n}\n\nexport const Ripple = ({ needRipple = true, clicks }: RippleProps) => {\n  return (\n    <span\n      aria-hidden\n      className={classNames(\n        styles['Tappable__stateLayer'],\n        needRipple && styles['Tappable__ripple'],\n      )}\n    >\n      {clicks.map((wave) => (\n        <span\n          key={wave.id}\n          className={styles['Tappable__wave']}\n          style={{ top: wave.y, left: wave.x }}\n        />\n      ))}\n    </span>\n  );\n};\n"],"names":["Ripple","useMaybeNeedRipple","useRipple","activeMode","hasPointer","platform","usePlatform","DELAY","WAVE_LIVE","needRipple","hasPointerContext","clicks","setClicks","React","useState","pointerDelayTimers","useMemo","Map","clearClicks","useTimeout","addClick","x","y","pointerId","dateNow","Date","now","filteredClicks","filter","click","id","set","delete","onPointerDown","e","top","left","getOffsetRect","currentTarget","clientX","clientY","setTimeout","onPointerCancel","timer","get","clearTimeout","reallyNeedRipple","hasPointerLib","noop","span","aria-hidden","className","classNames","map","wave","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAuFaA,MAAM;eAANA;;IA5EAC,kBAAkB;eAAlBA;;IAmBAC,SAAS;eAATA;;;;;iEA9BU;sBACqC;6BAChC;4BACD;wBACG;AAOvB,MAAMD,qBAAqB,CAACE,YAAoBC;IACrD,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,OAAOD,aAAa,aAAa,CAACD,cAAcD,eAAe;AACjE;AASA,MAAMI,QAAQ;AACd,MAAMC,YAAY;AAKX,MAAMN,YAAY,CAACO,YAAqBC;IAC7C,MAAM,CAACC,QAAQC,UAAU,GAAGC,OAAMC,QAAQ,CAAS,EAAE;IAErD;;GAEC,GACD,MAAMC,qBAAqBF,OAAMG,OAAO,CACtC,IAAM,IAAIC,OACV,EAAE;IAGJ,MAAMC,cAAcC,IAAAA,sBAAU,EAAC,IAAMP,UAAU,EAAE,GAAGJ;IAEpD,SAASY,SAASC,CAAS,EAAEC,CAAS,EAAEC,SAAiB;QACvD,MAAMC,UAAUC,KAAKC,GAAG;QACxB,MAAMC,iBAAiBhB,OAAOiB,MAAM,CAAC,CAACC,QAAUA,MAAMC,EAAE,GAAGtB,YAAYgB;QAEvEZ,UAAU;eAAIe;YAAgB;gBAAEN;gBAAGC;gBAAGQ,IAAIN;gBAASD;YAAU;SAAE;QAC/DL,YAAYa,GAAG;QACfhB,mBAAmBiB,MAAM,CAACT;IAC5B;IAEA;;GAEC,GACD,MAAMU,gBAA4D,CAACC;QACjE,MAAM,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,IAAAA,qBAAa,EAACH,EAAEI,aAAa;QACnD,MAAMjB,IAAIa,EAAEK,OAAO,GAAIH,CAAAA,iBAAAA,kBAAAA,OAAQ,CAAA;QAC/B,MAAMd,IAAIY,EAAEM,OAAO,GAAIL,CAAAA,gBAAAA,iBAAAA,MAAO,CAAA;QAE9BpB,mBAAmBgB,GAAG,CACpBG,EAAEX,SAAS,EACXkB,WAAW,IAAMrB,SAASC,GAAGC,GAAGY,EAAEX,SAAS,GAAGhB;IAElD;IAEA,MAAMmC,kBAA8D,CAACR;QACnE,MAAMS,QAAQ5B,mBAAmB6B,GAAG,CAACV,EAAEX,SAAS;QAChDsB,aAAaF;QACb5B,mBAAmBiB,MAAM,CAACE,EAAEX,SAAS;IACvC;IAEA,0CAA0C;IAC1C,MAAMuB,mBAAmB,AAAC,CAAA,CAACC,cAAa,IAAIrC,sBAAsB,KAAI,KAAMD;IAE5E,OAAO;QACLE;QACAsB,eAAea,mBAAmBb,gBAAgBe,UAAI;QACtDN,iBAAiBI,mBAAmBJ,kBAAkBM,UAAI;IAC5D;AACF;AAOO,MAAMhD,SAAS,CAAC,EAAES,aAAa,IAAI,EAAEE,MAAM,EAAe;IAC/D,qBACE,qBAACsC;QACCC,aAAW;QACXC,WAAWC,IAAAA,gBAAU,8BAEnB3C;kBAGDE,OAAO0C,GAAG,CAAC,CAACC,qBACX,qBAACL;gBAECE,SAAS;gBACTI,OAAO;oBAAEpB,KAAKmB,KAAKhC,CAAC;oBAAEc,MAAMkB,KAAKjC,CAAC;gBAAC;eAF9BiC,KAAKxB,EAAE;;AAOtB"}

package/dist/cjs/components/Tappable/Tappable.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ClickableProps } from '../Clickable/Clickable';
 import { StateProps } from './state';
 export interface TappableProps extends ClickableProps, StateProps {
@@ -8,5 +7,5 @@ export interface TappableProps extends ClickableProps, StateProps {
      */
     borderRadiusMode?: 'auto' | 'inherit';
 }
-export declare const Tappable: ({ baseClassName, borderRadiusMode, children, hoverMode, activeMode, onPointerDown, onPointerCancel, ...restProps }: TappableProps) => React.JSX.Element;
+export declare const Tappable: ({ baseClassName, borderRadiusMode, children, hoverMode, activeMode, onPointerDown, onPointerCancel, ...restProps }: TappableProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tappable.d.ts.map

package/dist/cjs/components/Tappable/Tappable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tappable.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Tappable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAA6B,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAEnF,OAAO,EAA+C,UAAU,EAAE,MAAM,SAAS,CAAC;AAmBlF,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,UAAU;IAC/D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,QAAQ,uHASlB,aAAa,sBAoCf,CAAC"}
+{"version":3,"file":"Tappable.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Tappable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA6B,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAEnF,OAAO,EAA+C,UAAU,EAAE,MAAM,SAAS,CAAC;AAmBlF,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,UAAU;IAC/D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,QAAQ,uHASlB,aAAa,4CAoCf,CAAC"}

package/dist/cjs/components/Tappable/Tappable.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "Tappable", {
         return Tappable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
 const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
 const _adaptivity = require("../../lib/adaptivity");
@@ -55,13 +55,18 @@ const Tappable = (_param)=>{
     const typeProps = restProps.Component === 'button' ? {
         type: 'button'
     } : {};
-    return /*#__PURE__*/ _react.createElement(_Clickable.Clickable, _object_spread._({
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Clickable.Clickable, _object_spread_props._(_object_spread._({
         baseClassName: (0, _vkjs.classNames)(baseClassName, "vkuiTappable", sizeX !== _adaptivity.SizeType.REGULAR && sizeXClassNames[sizeX], borderRadiusMode === 'inherit' && "vkuiTappable--borderRadiusInherit", hasPointerClassName(hasPointer)),
         hoverClassName: (0, _state.hoverClass)(hoverMode),
         activeClassName: (0, _state.activeClass)(activeMode)
-    }, typeProps, handlers, restProps), children, isClickable && (hoverMode === 'background' || activeMode === 'background') && /*#__PURE__*/ _react.createElement(_Ripple.Ripple, {
-        needRipple: needRipple,
-        clicks: clicks
+    }, typeProps, handlers, restProps), {
+        children: [
+            children,
+            isClickable && (hoverMode === 'background' || activeMode === 'background') && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Ripple.Ripple, {
+                needRipple: needRipple,
+                clicks: clicks
+            })
+        ]
     }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles['Tappable--hasPointer-none'];\n    case false:\n      return styles['Tappable--hasPointer-false'];\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n}\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps) => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        baseClassName,\n        styles['Tappable'],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles['Tappable--borderRadiusInherit'],\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["Tappable","sizeXClassNames","none","compact","hasPointerClassName","hasPointer","undefined","baseClassName","borderRadiusMode","children","hoverMode","DEFAULT_STATE_MODE","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","checkClickable","sizeX","useAdaptivity","needRipple","useMaybeNeedRipple","useRipple","clicks","rippleEvents","handlers","mergeCalls","typeProps","Component","type","Clickable","classNames","SizeType","REGULAR","hoverClassName","hoverClass","activeClassName","activeClass","Ripple"],"mappings":";;;;+BAkCaA;;;eAAAA;;;;;;iEAlCU;sBACI;+BACG;4BACL;4BACE;2BAC+B;wBACJ;uBACkB;AAGxE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH;QACF,KAAK;YACH;IACJ;IAEA,OAAOA;AACT;AAUO,MAAMN,WAAW;QAAC,EACvBO,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYC,yBAAkB,EAC9BC,aAAaD,yBAAkB,EAC/BE,aAAa,EACbC,eAAe,EAED,WADXC;QAPHR;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,MAAME,cAAcC,IAAAA,yBAAc,EAACF;IAEnC,MAAM,EAAEG,QAAQ,MAAM,EAAEb,UAAU,EAAE,GAAGc,IAAAA,4BAAa;IAEpD,MAAMC,aAAaC,IAAAA,0BAAkB,EAACT,YAAYP;IAClD,MAAoCiB,aAAAA,IAAAA,iBAAS,EAACF,YAAYf,aAApD,EAAEkB,MAAM,EAAmB,GAAGD,YAAjBE,4CAAiBF;QAA5BC;;IAER,MAAME,WAAWC,IAAAA,sBAAU,EAACF,cAAc;QACxCX;QACAC;IACF;IAEA,MAAMa,YAAYZ,UAAUa,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,qBAACC,oBAAS;QACRvB,eAAewB,IAAAA,gBAAU,EACvBxB,+BAEAW,UAAUc,oBAAQ,CAACC,OAAO,IAAIhC,eAAe,CAACiB,MAAM,EACpDV,qBAAqB,kDACrBJ,oBAAoBC;QAEtB6B,gBAAgBC,IAAAA,iBAAU,EAACzB;QAC3B0B,iBAAiBC,IAAAA,kBAAW,EAACzB;OACzBe,WACAF,UACAV,YAEHN,UACAO,eAAgBN,CAAAA,cAAc,gBAAgBE,eAAe,YAAW,mBACvE,qBAAC0B,cAAM;QAAClB,YAAYA;QAAYG,QAAQA;;AAIhD"}
+{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles['Tappable--hasPointer-none'];\n    case false:\n      return styles['Tappable--hasPointer-false'];\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n}\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps) => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        baseClassName,\n        styles['Tappable'],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles['Tappable--borderRadiusInherit'],\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["Tappable","sizeXClassNames","none","compact","hasPointerClassName","hasPointer","undefined","baseClassName","borderRadiusMode","children","hoverMode","DEFAULT_STATE_MODE","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","checkClickable","sizeX","useAdaptivity","needRipple","useMaybeNeedRipple","useRipple","clicks","rippleEvents","handlers","mergeCalls","typeProps","Component","type","Clickable","classNames","SizeType","REGULAR","hoverClassName","hoverClass","activeClassName","activeClass","Ripple"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiCaA;;;eAAAA;;;;;;;sBAjCc;+BACG;4BACL;4BACE;2BAC+B;wBACJ;uBACkB;AAGxE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH;QACF,KAAK;YACH;IACJ;IAEA,OAAOA;AACT;AAUO,MAAMN,WAAW;QAAC,EACvBO,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYC,yBAAkB,EAC9BC,aAAaD,yBAAkB,EAC/BE,aAAa,EACbC,eAAe,EAED,WADXC;QAPHR;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,MAAME,cAAcC,IAAAA,yBAAc,EAACF;IAEnC,MAAM,EAAEG,QAAQ,MAAM,EAAEb,UAAU,EAAE,GAAGc,IAAAA,4BAAa;IAEpD,MAAMC,aAAaC,IAAAA,0BAAkB,EAACT,YAAYP;IAClD,MAAoCiB,aAAAA,IAAAA,iBAAS,EAACF,YAAYf,aAApD,EAAEkB,MAAM,EAAmB,GAAGD,YAAjBE,4CAAiBF;QAA5BC;;IAER,MAAME,WAAWC,IAAAA,sBAAU,EAACF,cAAc;QACxCX;QACAC;IACF;IAEA,MAAMa,YAAYZ,UAAUa,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,sBAACC,oBAAS;QACRvB,eAAewB,IAAAA,gBAAU,EACvBxB,+BAEAW,UAAUc,oBAAQ,CAACC,OAAO,IAAIhC,eAAe,CAACiB,MAAM,EACpDV,qBAAqB,kDACrBJ,oBAAoBC;QAEtB6B,gBAAgBC,IAAAA,iBAAU,EAACzB;QAC3B0B,iBAAiBC,IAAAA,kBAAW,EAACzB;OACzBe,WACAF,UACAV;;YAEHN;YACAO,eAAgBN,CAAAA,cAAc,gBAAgBE,eAAe,YAAW,mBACvE,qBAAC0B,cAAM;gBAAClB,YAAYA;gBAAYG,QAAQA;;;;AAIhD"}

package/dist/cjs/components/Tappable/state.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/state.tsx"],"sourcesContent":["import { LiteralUnion } from '../../types';\nimport styles from './Tappable.module.css';\n\ntype StateMode = 'opacity' | 'background' | 'none';\nexport type StateModeLiteral = LiteralUnion<StateMode, string>;\n\nexport interface StateProps {\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateModeLiteral;\n\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateModeLiteral;\n}\n\n/**\n * Состояние по умолчанию\n */\nexport const DEFAULT_STATE_MODE: StateMode = 'background';\n\nconst stylesHovered: Record<string, string> = {\n  background: styles['Tappable--hovered-background'],\n  opacity: styles['Tappable--hovered-opacity'],\n  none: '',\n};\n\n/**\n * Определяем класс наведения\n */\nexport function hoverClass(hoverMode: StateModeLiteral = DEFAULT_STATE_MODE) {\n  const presetClass = stylesHovered[hoverMode] as string | undefined;\n\n  return presetClass !== undefined ? presetClass : hoverMode;\n}\n\nconst stylesActivated: Record<string, string> = {\n  background: styles['Tappable--activated-background'],\n  opacity: styles['Tappable--activated-opacity'],\n  none: '',\n};\n\n/**\n * Определяем класс наведения\n */\nexport function activeClass(activeMode: StateModeLiteral = DEFAULT_STATE_MODE) {\n  const presetClass = stylesActivated[activeMode] as string | undefined;\n\n  return presetClass !== undefined ? presetClass : activeMode;\n}\n"],"names":["DEFAULT_STATE_MODE","activeClass","hoverClass","stylesHovered","background","opacity","none","hoverMode","presetClass","undefined","stylesActivated","activeMode"],"mappings":";;;;;;;;;;;IAqBaA,kBAAkB;eAAlBA;;IA0BGC,WAAW;eAAXA;;IAfAC,UAAU;eAAVA;;;AAXT,MAAMF,qBAAgC;AAE7C,MAAMG,gBAAwC;IAC5CC,UAAU;IACVC,OAAO;IACPC,MAAM;AACR;AAKO,SAASJ,WAAWK,YAA8BP,kBAAkB;IACzE,MAAMQ,cAAcL,aAAa,CAACI,UAAU;IAE5C,OAAOC,gBAAgBC,YAAYD,cAAcD;AACnD;AAEA,MAAMG,kBAA0C;IAC9CN,UAAU;IACVC,OAAO;IACPC,MAAM;AACR;AAKO,SAASL,YAAYU,aAA+BX,kBAAkB;IAC3E,MAAMQ,cAAcE,eAAe,CAACC,WAAW;IAE/C,OAAOH,gBAAgBC,YAAYD,cAAcG;AACnD"}
+{"version":3,"sources":["../../../../src/components/Tappable/state.tsx"],"sourcesContent":["import { LiteralUnion } from '../../types';\nimport styles from './Tappable.module.css';\n\ntype StateMode = 'opacity' | 'background' | 'none';\nexport type StateModeLiteral = LiteralUnion<StateMode, string>;\n\nexport interface StateProps {\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateModeLiteral;\n\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateModeLiteral;\n}\n\n/**\n * Состояние по умолчанию\n */\nexport const DEFAULT_STATE_MODE: StateMode = 'background';\n\nconst stylesHovered: Record<string, string> = {\n  background: styles['Tappable--hovered-background'],\n  opacity: styles['Tappable--hovered-opacity'],\n  none: '',\n};\n\n/**\n * Определяем класс наведения\n */\nexport function hoverClass(hoverMode: StateModeLiteral = DEFAULT_STATE_MODE) {\n  const presetClass = stylesHovered[hoverMode] as string | undefined;\n\n  return presetClass !== undefined ? presetClass : hoverMode;\n}\n\nconst stylesActivated: Record<string, string> = {\n  background: styles['Tappable--activated-background'],\n  opacity: styles['Tappable--activated-opacity'],\n  none: '',\n};\n\n/**\n * Определяем класс наведения\n */\nexport function activeClass(activeMode: StateModeLiteral = DEFAULT_STATE_MODE) {\n  const presetClass = stylesActivated[activeMode] as string | undefined;\n\n  return presetClass !== undefined ? presetClass : activeMode;\n}\n"],"names":["DEFAULT_STATE_MODE","activeClass","hoverClass","stylesHovered","background","opacity","none","hoverMode","presetClass","undefined","stylesActivated","activeMode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAqBaA,kBAAkB;eAAlBA;;IA0BGC,WAAW;eAAXA;;IAfAC,UAAU;eAAVA;;;AAXT,MAAMF,qBAAgC;AAE7C,MAAMG,gBAAwC;IAC5CC,UAAU;IACVC,OAAO;IACPC,MAAM;AACR;AAKO,SAASJ,WAAWK,YAA8BP,kBAAkB;IACzE,MAAMQ,cAAcL,aAAa,CAACI,UAAU;IAE5C,OAAOC,gBAAgBC,YAAYD,cAAcD;AACnD;AAEA,MAAMG,kBAA0C;IAC9CN,UAAU;IACVC,OAAO;IACPC,MAAM;AACR;AAKO,SAASL,YAAYU,aAA+BX,kBAAkB;IAC3E,MAAMQ,cAAcE,eAAe,CAACC,WAAW;IAE/C,OAAOH,gBAAgBC,YAAYD,cAAcG;AACnD"}

package/dist/cjs/components/Textarea/Textarea.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { HasRef, HasRootRef } from '../../types';
+import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormFieldProps } from '../FormField/FormField';
-export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>, HasRef<HTMLTextAreaElement>, HasRootRef<HTMLElement>, Pick<React.CSSProperties, 'maxHeight'>, Pick<FormFieldProps, 'status'> {
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>, HasRef<HTMLTextAreaElement>, HasRootRef<HTMLElement>, Pick<React.CSSProperties, 'maxHeight'>, HasAlign, Pick<FormFieldProps, 'status' | 'mode'> {
     grow?: boolean;
-    onResize?(el: HTMLTextAreaElement): void;
+    onResize?: (el: HTMLTextAreaElement) => void;
     defaultValue?: string;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Textarea
  */
-export declare const Textarea: ({ grow, style, onResize, className, getRootRef, getRef, rows, maxHeight, status, onChange, ...restProps }: TextareaProps) => React.JSX.Element;
+export declare const Textarea: ({ grow, style, onResize, className, getRootRef, getRef, rows, maxHeight, status, onChange, align, mode, ...restProps }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Textarea.d.ts.map

package/dist/cjs/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASnE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACzE,MAAM,CAAC,mBAAmB,CAAC,EAC3B,UAAU,CAAC,WAAW,CAAC,EACvB,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,WAAW,CAAC,EACtC,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,CAAC,EAAE,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,8GAYlB,aAAa,sBA6Cf,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASnE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACzE,MAAM,CAAC,mBAAmB,CAAC,EAC3B,UAAU,CAAC,WAAW,CAAC,EACvB,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,WAAW,CAAC,EACtC,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,2HAclB,aAAa,4CA+Cf,CAAC"}

package/dist/cjs/components/Textarea/Textarea.js

@@ -12,19 +12,20 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
 const _useExternRef = require("../../hooks/useExternRef");
 const _callMultiple = require("../../lib/callMultiple");
 const _FormField = require("../FormField/FormField");
-const _Text = require("../Typography/Text/Text");
+const _UnstyledTextField = require("../UnstyledTextField/UnstyledTextField");
 const sizeYClassNames = {
     none: "vkuiTextarea--sizeY-none",
     ['compact']: "vkuiTextarea--sizeY-compact"
 };
 const Textarea = (_param)=>{
-    var { grow = true, style, onResize, className, getRootRef, getRef, rows = 2, maxHeight, status, onChange } = _param, restProps = _object_without_properties._(_param, [
+    var { grow = true, style, onResize, className, getRootRef, getRef, rows = 2, maxHeight, status, onChange, align, mode } = _param, restProps = _object_without_properties._(_param, [
         "grow",
         "style",
         "onResize",
@@ -34,7 +35,9 @@ const Textarea = (_param)=>{
         "rows",
         "maxHeight",
         "status",
-        "onChange"
+        "onChange",
+        "align",
+        "mode"
     ]);
     const currentScrollHeight = _react.useRef();
     const elementRef = (0, _useExternRef.useExternRef)(getRef);
@@ -56,23 +59,24 @@ const Textarea = (_param)=>{
         elementRef,
         onResize
     ]);
-    return /*#__PURE__*/ _react.createElement(_FormField.FormField, {
-        className: (0, _vkjs.classNames)("vkuiTextarea", sizeY !== 'regular' && sizeYClassNames[sizeY], className),
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FormField.FormField, {
+        className: (0, _vkjs.classNames)("vkuiTextarea", sizeY !== 'regular' && sizeYClassNames[sizeY], align === 'right' && "vkuiTextarea--align-right", align === 'center' && "vkuiTextarea--align-center", className),
         style: style,
         getRootRef: getRootRef,
         disabled: restProps.disabled,
-        status: status
-    }, /*#__PURE__*/ _react.createElement(_Text.Text, _object_spread_props._(_object_spread._({}, restProps), {
-        Component: "textarea",
-        normalize: false,
-        style: {
-            maxHeight
-        },
-        rows: rows,
-        className: "vkuiTextarea__el",
-        onChange: (0, _callMultiple.callMultiple)(onChange, autosizeInput),
-        getRootRef: elementRef
-    })));
+        status: status,
+        mode: mode,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_UnstyledTextField.UnstyledTextField, _object_spread_props._(_object_spread._({}, restProps), {
+            as: "textarea",
+            style: {
+                maxHeight
+            },
+            rows: rows,
+            className: "vkuiTextarea__el",
+            onChange: (0, _callMultiple.callMultiple)(onChange, autosizeInput),
+            getRootRef: elementRef
+        }))
+    });
 };
 
 //# sourceMappingURL=Textarea.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Textarea--sizeY-none'],\n  ['compact']: styles['Textarea--sizeY-compact'],\n};\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    Pick<React.CSSProperties, 'maxHeight'>,\n    Pick<FormFieldProps, 'status'> {\n  grow?: boolean;\n  onResize?(el: HTMLTextAreaElement): void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange,\n  ...restProps\n}: TextareaProps) => {\n  const currentScrollHeight = React.useRef<number>();\n  const elementRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const autosizeInput = () => {\n    const el = elementRef.current;\n\n    if (grow && el?.offsetParent) {\n      el.style.height = '';\n      el.style.height = `${el.scrollHeight}px`;\n\n      if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n        onResize(el);\n        currentScrollHeight.current = el.scrollHeight;\n      }\n    }\n  };\n\n  React.useEffect(autosizeInput, [grow, sizeY, elementRef, onResize]);\n\n  return (\n    <FormField\n      className={classNames(\n        styles['Textarea'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n    >\n      <Text\n        {...restProps}\n        Component=\"textarea\"\n        normalize={false}\n        style={{ maxHeight }}\n        rows={rows}\n        className={styles['Textarea__el']}\n        onChange={callMultiple(onChange, autosizeInput)}\n        getRootRef={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["Textarea","sizeYClassNames","none","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","restProps","currentScrollHeight","React","useRef","elementRef","useExternRef","sizeY","useAdaptivity","autosizeInput","el","current","offsetParent","height","scrollHeight","useEffect","FormField","classNames","disabled","Text","Component","normalize","callMultiple"],"mappings":";;;;+BA6BaA;;;eAAAA;;;;;;;iEA7BU;sBACI;+BACG;8BACD;8BACA;2BAEa;sBACrB;AAGrB,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAgBO,MAAMF,WAAW;QAAC,EACvBG,OAAO,IAAI,EACXC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,OAAO,CAAC,EACRC,SAAS,EACTC,MAAM,EACNC,QAAQ,EAEM,WADXC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,sBAAsBC,OAAMC,MAAM;IACxC,MAAMC,aAAaC,IAAAA,0BAAY,EAACV;IAChC,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAMC,gBAAgB;QACpB,MAAMC,KAAKL,WAAWM,OAAO;QAE7B,IAAIpB,SAAQmB,eAAAA,yBAAAA,GAAIE,YAAY,GAAE;YAC5BF,GAAGlB,KAAK,CAACqB,MAAM,GAAG;YAClBH,GAAGlB,KAAK,CAACqB,MAAM,GAAG,CAAC,EAAEH,GAAGI,YAAY,CAAC,EAAE,CAAC;YAExC,IAAIJ,GAAGI,YAAY,KAAKZ,oBAAoBS,OAAO,IAAIlB,UAAU;gBAC/DA,SAASiB;gBACTR,oBAAoBS,OAAO,GAAGD,GAAGI,YAAY;YAC/C;QACF;IACF;IAEAX,OAAMY,SAAS,CAACN,eAAe;QAAClB;QAAMgB;QAAOF;QAAYZ;KAAS;IAElE,qBACE,qBAACuB,oBAAS;QACRtB,WAAWuB,IAAAA,gBAAU,kBAEnBV,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7Cb;QAEFF,OAAOA;QACPG,YAAYA;QACZuB,UAAUjB,UAAUiB,QAAQ;QAC5BnB,QAAQA;qBAER,qBAACoB,UAAI,8CACClB;QACJmB,WAAU;QACVC,WAAW;QACX7B,OAAO;YAAEM;QAAU;QACnBD,MAAMA;QACNH,SAAS;QACTM,UAAUsB,IAAAA,0BAAY,EAACtB,UAAUS;QACjCd,YAAYU;;AAIpB"}
+{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Textarea--sizeY-none'],\n  ['compact']: styles['Textarea--sizeY-compact'],\n};\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    Pick<React.CSSProperties, 'maxHeight'>,\n    HasAlign,\n    Pick<FormFieldProps, 'status' | 'mode'> {\n  grow?: boolean;\n  onResize?: (el: HTMLTextAreaElement) => void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange,\n  align,\n  mode,\n  ...restProps\n}: TextareaProps) => {\n  const currentScrollHeight = React.useRef<number>();\n  const elementRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const autosizeInput = () => {\n    const el = elementRef.current;\n\n    if (grow && el?.offsetParent) {\n      el.style.height = '';\n      el.style.height = `${el.scrollHeight}px`;\n\n      if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n        onResize(el);\n        currentScrollHeight.current = el.scrollHeight;\n      }\n    }\n  };\n\n  React.useEffect(autosizeInput, [grow, sizeY, elementRef, onResize]);\n\n  return (\n    <FormField\n      className={classNames(\n        styles['Textarea'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        align === 'right' && styles['Textarea--align-right'],\n        align === 'center' && styles['Textarea--align-center'],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n      mode={mode}\n    >\n      <UnstyledTextField\n        {...restProps}\n        as=\"textarea\"\n        style={{ maxHeight }}\n        rows={rows}\n        className={styles['Textarea__el']}\n        onChange={callMultiple(onChange, autosizeInput)}\n        getRootRef={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["Textarea","sizeYClassNames","none","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","align","mode","restProps","currentScrollHeight","React","useRef","elementRef","useExternRef","sizeY","useAdaptivity","autosizeInput","el","current","offsetParent","height","scrollHeight","useEffect","FormField","classNames","disabled","UnstyledTextField","as","callMultiple"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;;iEA9BU;sBACI;+BACG;8BACD;8BACA;2BAEa;mCACR;AAGlC,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAiBO,MAAMF,WAAW;QAAC,EACvBG,OAAO,IAAI,EACXC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,OAAO,CAAC,EACRC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,IAAI,EAEU,WADXC;QAZHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,sBAAsBC,OAAMC,MAAM;IACxC,MAAMC,aAAaC,IAAAA,0BAAY,EAACZ;IAChC,MAAM,EAAEa,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAMC,gBAAgB;QACpB,MAAMC,KAAKL,WAAWM,OAAO;QAE7B,IAAItB,SAAQqB,eAAAA,yBAAAA,GAAIE,YAAY,GAAE;YAC5BF,GAAGpB,KAAK,CAACuB,MAAM,GAAG;YAClBH,GAAGpB,KAAK,CAACuB,MAAM,GAAG,CAAC,EAAEH,GAAGI,YAAY,CAAC,EAAE,CAAC;YAExC,IAAIJ,GAAGI,YAAY,KAAKZ,oBAAoBS,OAAO,IAAIpB,UAAU;gBAC/DA,SAASmB;gBACTR,oBAAoBS,OAAO,GAAGD,GAAGI,YAAY;YAC/C;QACF;IACF;IAEAX,OAAMY,SAAS,CAACN,eAAe;QAACpB;QAAMkB;QAAOF;QAAYd;KAAS;IAElE,qBACE,qBAACyB,oBAAS;QACRxB,WAAWyB,IAAAA,gBAAU,kBAEnBV,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CR,UAAU,wCACVA,UAAU,0CACVP;QAEFF,OAAOA;QACPG,YAAYA;QACZyB,UAAUjB,UAAUiB,QAAQ;QAC5BrB,QAAQA;QACRG,MAAMA;kBAEN,cAAA,qBAACmB,oCAAiB,8CACZlB;YACJmB,IAAG;YACH9B,OAAO;gBAAEM;YAAU;YACnBD,MAAMA;YACNH,SAAS;YACTM,UAAUuB,IAAAA,0BAAY,EAACvB,UAAUW;YACjChB,YAAYY;;;AAIpB"}

package/dist/cjs/components/ToolButton/ToolButton.d.ts

@@ -0,0 +1,17 @@
+import { AdaptiveIconRendererProps } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';
+import { TappableProps } from '../Tappable/Tappable';
+export interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {
+    mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';
+    appearance?: 'accent' | 'neutral';
+    direction?: 'row' | 'column';
+    rounded?: boolean;
+}
+/**
+ * Кнопки, которые используются для вызова инструмента, вставки аттачей или
+ * для форматирования. Их можно использовать как кнопки для разового действия
+ * или для включения/выключения режима.
+ *
+ * @see https://vkcom.github.io/VKUI/#/ToolButton
+ */
+export declare const ToolButton: ({ mode, appearance, direction, onClick, className, children, IconCompact, IconRegular, rounded, ...restProps }: ToolButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolButton.d.ts.map

package/dist/cjs/components/ToolButton/ToolButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAyB/D,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,yBAAyB;IAC/E,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,mHAWpB,eAAe,4CA0BjB,CAAC"}

package/dist/cjs/components/ToolButton/ToolButton.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ToolButton", {
+    enumerable: true,
+    get: function() {
+        return ToolButton;
+    }
+});
+const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
+const _vkjs = require("@vkontakte/vkjs");
+const _useAdaptivity = require("../../hooks/useAdaptivity");
+const _AdaptiveIconRenderer = require("../AdaptiveIconRenderer/AdaptiveIconRenderer");
+const _Tappable = require("../Tappable/Tappable");
+const stylesMode = {
+    primary: "vkuiToolButton--mode-primary",
+    secondary: "vkuiToolButton--mode-secondary",
+    tertiary: "vkuiToolButton--mode-tertiary",
+    outline: "vkuiToolButton--mode-outline"
+};
+const stylesAppearance = {
+    accent: "vkuiToolButton--appearance-accent",
+    neutral: "vkuiToolButton--appearance-neutral"
+};
+const stylesDirection = {
+    row: "vkuiToolButton--direction-row",
+    column: "vkuiToolButton--direction-column"
+};
+const sizeYClassNames = {
+    none: "vkuiToolButton--sizeY-none",
+    ['regular']: "vkuiToolButton--sizeY-regular"
+};
+const ToolButton = (_param)=>{
+    var { mode = 'primary', appearance = 'accent', direction = 'row', onClick = _vkjs.noop, className, children, IconCompact, IconRegular, rounded } = _param, restProps = _object_without_properties._(_param, [
+        "mode",
+        "appearance",
+        "direction",
+        "onClick",
+        "className",
+        "children",
+        "IconCompact",
+        "IconRegular",
+        "rounded"
+    ]);
+    const { sizeY = 'none' } = (0, _useAdaptivity.useAdaptivity)();
+    const hasChildren = (0, _vkjs.hasReactNode)(children);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Tappable.Tappable, _object_spread_props._(_object_spread._({
+        hoverMode: "vkuiToolButton--hover",
+        activeMode: "vkuiToolButton--active",
+        Component: restProps.href ? 'a' : 'button',
+        focusVisibleMode: "outside",
+        onClick: onClick,
+        className: (0, _vkjs.classNames)(className, "vkuiToolButton", rounded && !hasChildren && "vkuiToolButton--rounded", stylesMode[mode], stylesAppearance[appearance], stylesDirection[direction], sizeY !== 'compact' && sizeYClassNames[sizeY])
+    }, restProps), {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_AdaptiveIconRenderer.AdaptiveIconRenderer, {
+                IconCompact: IconCompact,
+                IconRegular: IconRegular
+            }),
+            hasChildren && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                children: children
+            })
+        ]
+    }));
+};
+
+//# sourceMappingURL=ToolButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles['ToolButton--mode-primary'],\n  secondary: styles['ToolButton--mode-secondary'],\n  tertiary: styles['ToolButton--mode-tertiary'],\n  outline: styles['ToolButton--mode-outline'],\n};\n\nconst stylesAppearance = {\n  accent: styles['ToolButton--appearance-accent'],\n  neutral: styles['ToolButton--appearance-neutral'],\n};\n\nconst stylesDirection = {\n  row: styles['ToolButton--direction-row'],\n  column: styles['ToolButton--direction-column'],\n};\n\nconst sizeYClassNames = {\n  none: styles['ToolButton--sizeY-none'],\n  ['regular']: styles['ToolButton--sizeY-regular'],\n};\n\nexport interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  appearance?: 'accent' | 'neutral';\n  direction?: 'row' | 'column';\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  onClick = noop,\n  className,\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles['ToolButton--hover']}\n      activeMode={styles['ToolButton--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      onClick={onClick}\n      className={classNames(\n        className,\n        styles['ToolButton'],\n        rounded && !hasChildren && styles['ToolButton--rounded'],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span>{children}</span>}\n    </Tappable>\n  );\n};\n"],"names":["ToolButton","stylesMode","primary","secondary","tertiary","outline","stylesAppearance","accent","neutral","stylesDirection","row","column","sizeYClassNames","none","mode","appearance","direction","onClick","noop","className","children","IconCompact","IconRegular","rounded","restProps","sizeY","useAdaptivity","hasChildren","hasReactNode","Tappable","hoverMode","activeMode","Component","href","focusVisibleMode","classNames","AdaptiveIconRenderer","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6CaA;;;eAAAA;;;;;;;sBA7CkC;+BACjB;sCAIvB;0BACiC;AAGxC,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBC,GAAG;IACHC,MAAM;AACR;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAgBO,MAAMb,aAAa;QAAC,EACzBc,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,UAAUC,UAAI,EACdC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EAES,WADbC;QATHV;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,cAAcC,IAAAA,kBAAY,EAACR;IAEjC,qBACE,sBAACS,kBAAQ;QACPC,SAAS;QACTC,UAAU;QACVC,WAAWR,UAAUS,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBjB,SAASA;QACTE,WAAWgB,IAAAA,gBAAU,EACnBhB,6BAEAI,WAAW,CAACI,0CACZ1B,UAAU,CAACa,KAAK,EAChBR,gBAAgB,CAACS,WAAW,EAC5BN,eAAe,CAACO,UAAU,EAC1BS,UAAU,aAAab,eAAe,CAACa,MAAM;OAE3CD;;0BAEJ,qBAACY,0CAAoB;gBAACf,aAAaA;gBAAaC,aAAaA;;YAC5DK,6BAAe,qBAACU;0BAAMjB;;;;AAG7B"}