@vkontakte/vkui 4.37.0 → 5.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","names":["React","Touch","classNames","ANDROID","IOS","VKCOM","rubber","withAdaptivity","ViewWidth","Paragraph","Button","AppRootPortal","useWaitTransitionFinish","usePlatform","useTimeout","SnackbarComponent","children","layout","action","before","after","viewWidth","duration","onActionClick","onClose","mode","restProps","platform","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","isDesktop","SMALL_TABLET","transitionFinishDurationFallback","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","resolvedLayout","displayName","Snackbar"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasPlatform } from \"../../types\";\nimport { ANDROID, IOS, VKCOM } from \"../../lib/platform\";\nimport { rubber } from \"../../lib/touch\";\nimport { withAdaptivity, ViewWidth } from \"../../hoc/withAdaptivity\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Button } from \"../Button/Button\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { useWaitTransitionFinish } from \"../../hooks/useWaitTransitionFinish\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./Snackbar.css\";\n\nexport interface SnackbarProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasPlatform,\n    AdaptivityProps {\n  /**\n   * Название кнопки действия в уведомлении\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Цветная иконка 24x24 пикселя\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть `<Avatar size={32} />`\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: \"default\" | \"dark\";\n}\n\nconst SnackbarComponent = ({\n  children,\n  layout = \"horizontal\",\n  action,\n  before,\n  after,\n  viewWidth,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = \"default\",\n  ...restProps\n}: SnackbarProps & AdaptivityContextInterface) => {\n  const platform = usePlatform();\n\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<\n    typeof requestAnimationFrame\n  > | null>(null);\n\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const transitionFinishDurationFallback =\n    platform === ANDROID || platform === VKCOM ? 400 : 320;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === \"function\") {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current =\n      (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(\n      shiftXPercentRef.current,\n      72,\n      1.2,\n      platform === ANDROID || platform === VKCOM\n    );\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const resolvedLayout = after || isDesktop ? \"vertical\" : layout;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        vkuiClass={classNames(\n          \"Snackbar\",\n          platform === IOS && \"Snackbar--ios\",\n          `Snackbar--l-${resolvedLayout}`,\n          `Snackbar--${mode}`,\n          closing && \"Snackbar--closing\",\n          touched && \"Snackbar--touched\",\n          isDesktop && \"Snackbar--desktop\"\n        )}\n      >\n        <Touch\n          vkuiClass=\"Snackbar__in\"\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div vkuiClass=\"Snackbar__body\" ref={bodyElRef}>\n            {before && <div vkuiClass=\"Snackbar__before\">{before}</div>}\n\n            <div vkuiClass=\"Snackbar__content\">\n              <Paragraph vkuiClass=\"Snackbar__content-text\">\n                {children}\n              </Paragraph>\n\n              {action && (\n                <Button\n                  align=\"left\"\n                  hasHover={false}\n                  mode=\"tertiary\"\n                  appearance={mode === \"dark\" ? \"overlay\" : \"accent\"}\n                  size=\"s\"\n                  vkuiClass=\"Snackbar__action\"\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div vkuiClass=\"Snackbar__after\">{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n\nSnackbarComponent.displayName = \"Snackbar\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = withAdaptivity(SnackbarComponent, {\n  viewWidth: true,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Snackbar.js","names":["React","Touch","classNames","Platform","rubber","Paragraph","Button","AppRootPortal","useWaitTransitionFinish","usePlatform","useAdaptivityWithMediaQueries","useTimeout","Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","restProps","platform","isDesktop","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasPlatform } from \"../../types\";\nimport { Platform } from \"../../lib/platform\";\nimport { rubber } from \"../../lib/touch\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Button } from \"../Button/Button\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { useWaitTransitionFinish } from \"../../hooks/useWaitTransitionFinish\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivityWithMediaQueries } from \"../../hooks/useAdaptivityWithMediaQueries\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport \"./Snackbar.css\";\n\nexport interface SnackbarProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasPlatform {\n  /**\n   * Название кнопки действия в уведомлении\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Цветная иконка 24x24 пикселя\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть `<Avatar size={32} />`\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: \"default\" | \"dark\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = \"horizontal\",\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = \"default\",\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithMediaQueries();\n\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<\n    typeof requestAnimationFrame\n  > | null>(null);\n\n  const transitionFinishDurationFallback =\n    platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === \"function\") {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current =\n      (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(\n      shiftXPercentRef.current,\n      72,\n      1.2,\n      platform !== Platform.IOS\n    );\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop ? \"vertical\" : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        vkuiClass={classNames(\n          \"Snackbar\",\n          platform === Platform.IOS && \"Snackbar--ios\",\n          `Snackbar--layout-${layout}`,\n          `Snackbar--mode-${mode}`,\n          closing && \"Snackbar--closing\",\n          touched && \"Snackbar--touched\",\n          isDesktop && \"Snackbar--desktop\"\n        )}\n      >\n        <Touch\n          vkuiClass=\"Snackbar__in\"\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div vkuiClass=\"Snackbar__body\" ref={bodyElRef}>\n            {before && <div vkuiClass=\"Snackbar__before\">{before}</div>}\n\n            <div vkuiClass=\"Snackbar__content\">\n              <Paragraph vkuiClass=\"Snackbar__content-text\">\n                {children}\n              </Paragraph>\n\n              {action && (\n                <Button\n                  align=\"left\"\n                  hasHover={false}\n                  mode=\"tertiary\"\n                  appearance={mode === \"dark\" ? \"overlay\" : \"accent\"}\n                  size=\"s\"\n                  vkuiClass=\"Snackbar__action\"\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div vkuiClass=\"Snackbar__after\">{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,KAAT;AACA,SAASC,UAAT;AAEA,SAASC,QAAT;AACA,SAASC,MAAT;AACA,SAASC,SAAT;AACA,SAASC,MAAT;AACA,SAASC,aAAT;AACA,SAASC,uBAAT;AACA,SAASC,WAAT;AACA,SAASC,6BAAT;AACA,SAASC,UAAT;AACA;;AAyCA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAWH;EAAA,IAVnBC,QAUmB,QAVnBA,QAUmB;EAAA,uBATnBC,MASmB;EAAA,IATXC,WASW,4BATG,YASH;EAAA,IARnBC,MAQmB,QARnBA,MAQmB;EAAA,IAPnBC,MAOmB,QAPnBA,MAOmB;EAAA,IANnBC,KAMmB,QANnBA,KAMmB;EAAA,yBALnBC,QAKmB;EAAA,IALnBA,QAKmB,8BALR,IAKQ;EAAA,IAJnBC,aAImB,QAJnBA,aAImB;EAAA,IAHnBC,OAGmB,QAHnBA,OAGmB;EAAA,qBAFnBC,IAEmB;EAAA,IAFnBA,IAEmB,0BAFZ,SAEY;EAAA,IADhBC,SACgB;;EACnB,IAAMC,QAAQ,GAAGf,WAAW,EAA5B;;EACA,4BAAsBC,6BAA6B,EAAnD;EAAA,IAAQe,SAAR,yBAAQA,SAAR;;EAEA,4BAAiCjB,uBAAuB,EAAxD;EAAA,IAAQkB,oBAAR,yBAAQA,oBAAR;;EAEA,sBAA8B1B,KAAK,CAAC2B,QAAN,CAAe,KAAf,CAA9B;EAAA;EAAA,IAAOC,OAAP;EAAA,IAAgBC,UAAhB;;EACA,uBAA8B7B,KAAK,CAAC2B,QAAN,CAAe,KAAf,CAA9B;EAAA;EAAA,IAAOG,OAAP;EAAA,IAAgBC,UAAhB;;EAEA,IAAMC,gBAAgB,GAAGhC,KAAK,CAACiC,MAAN,CAAqB,CAArB,CAAzB;EACA,IAAMC,gBAAgB,GAAGlC,KAAK,CAACiC,MAAN,CAAqB,CAArB,CAAzB;EAEA,IAAME,SAAS,GAAGnC,KAAK,CAACiC,MAAN,CAAoC,IAApC,CAAlB;EACA,IAAMG,UAAU,GAAGpC,KAAK,CAACiC,MAAN,CAAoC,IAApC,CAAnB;EAEA,IAAMI,iBAAiB,GAAGrC,KAAK,CAACiC,MAAN,CAEhB,IAFgB,CAA1B;EAIA,IAAMK,gCAAgC,GACpCd,QAAQ,KAAKrB,QAAQ,CAACoC,GAAtB,GAA4B,GAA5B,GAAkC,GADpC;;EAGA,IAAMC,KAAK,GAAG,SAARA,KAAQ,GAAM;IAClBX,UAAU,CAAC,IAAD,CAAV;IACAH,oBAAoB,CAClBU,UAAU,CAACK,OADO,EAElB,YAAM;MACJpB,OAAO;IACR,CAJiB,EAKlBiB,gCALkB,CAApB;EAOD,CATD;;EAWA,IAAMI,iBAAuD,GAAG,SAA1DA,iBAA0D,CAACC,CAAD,EAAO;IACrEH,KAAK;;IAEL,IAAIxB,MAAM,IAAI,OAAOI,aAAP,KAAyB,UAAvC,EAAmD;MACjDA,aAAa,CAACuB,CAAD,CAAb;IACD;EACF,CAND;;EAQA,IAAMC,YAAY,GAAGjC,UAAU,CAAC6B,KAAD,EAAQrB,QAAR,CAA/B;;EAEA,IAAM0B,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAqB;IAC5C,IAAIT,iBAAiB,CAACI,OAAlB,KAA8B,IAAlC,EAAwC;MACtCM,oBAAoB,CAACV,iBAAiB,CAACI,OAAnB,CAApB;IACD;;IACDJ,iBAAiB,CAACI,OAAlB,GAA4BO,qBAAqB,CAAC,YAAM;MACtD,IAAIb,SAAS,CAACM,OAAd,EAAuB;QACrBN,SAAS,CAACM,OAAV,CAAkBQ,KAAlB,CAAwBC,SAAxB,yBAAmDJ,OAAnD;MACD;IACF,CAJgD,CAAjD;EAKD,CATD;;EAWA,IAAMK,YAAY,GAAGP,YAAY,CAACQ,KAAlC;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAuB;IAAA;;IAC1C,IAAQC,MAAR,GAAkCD,KAAlC,CAAQC,MAAR;IAAA,IAAgBC,aAAhB,GAAkCF,KAAlC,CAAgBE,aAAhB;IACAA,aAAa,CAACC,cAAd;;IAEA,IAAI,CAAC3B,OAAL,EAAc;MACZC,UAAU,CAAC,IAAD,CAAV;IACD;;IAEDC,gBAAgB,CAACS,OAAjB,GACGc,MAAM,mDAAIpB,SAAS,CAACM,OAAd,uDAAI,mBAAmBiB,WAAvB,yEAAsC,CAAtC,CAAP,GAAmD,GADrD;IAEAxB,gBAAgB,CAACO,OAAjB,GAA2BrC,MAAM,CAC/B4B,gBAAgB,CAACS,OADc,EAE/B,EAF+B,EAG/B,GAH+B,EAI/BjB,QAAQ,KAAKrB,QAAQ,CAACoC,GAJS,CAAjC;IAOAM,gBAAgB,CAACX,gBAAgB,CAACO,OAAlB,CAAhB;EACD,CAlBD;;EAoBA,IAAMkB,UAAU,GAAG,SAAbA,UAAa,CAAChB,CAAD,EAAmB;IACpC,IAAIiB,QAAJ;;IAEA,IAAI9B,OAAJ,EAAa;MACX,IAAI+B,aAAa,GAAG3B,gBAAgB,CAACO,OAArC;MACA,IAAMqB,gBAAgB,GAAID,aAAa,GAAGlB,CAAC,CAACxB,QAAnB,GAA+B,GAA/B,GAAqC,GAA9D;MACA0C,aAAa,GAAGA,aAAa,GAAGC,gBAAhC;;MAEA,IAAIrC,SAAS,IAAIoC,aAAa,IAAI,CAAC,EAAnC,EAAuC;QACrCjB,YAAY,CAACQ,KAAb;QACA1B,oBAAoB,CAClBS,SAAS,CAACM,OADQ,EAElB,YAAM;UACJpB,OAAO;QACR,CAJiB,EAKlBiB,gCALkB,CAApB;QAOAO,gBAAgB,CAAC,CAAC,GAAF,CAAhB;MACD,CAVD,MAUO,IAAI,CAACpB,SAAD,IAAcoC,aAAa,IAAI,EAAnC,EAAuC;QAC5CjB,YAAY,CAACQ,KAAb;QACA1B,oBAAoB,CAClBS,SAAS,CAACM,OADQ,EAElB,YAAM;UACJpB,OAAO;QACR,CAJiB,EAKlBiB,gCALkB,CAApB;QAOAO,gBAAgB,CAAC,GAAD,CAAhB;MACD,CAVM,MAUA;QACLe,QAAQ,GAAG,oBAAM;UACfhB,YAAY,CAACmB,GAAb;UACAlB,gBAAgB,CAAC,CAAD,CAAhB;QACD,CAHD;MAID;IACF,CA/BD,MA+BO;MACLD,YAAY,CAACmB,GAAb;IACD;;IAEDhC,UAAU,CAAC,KAAD,CAAV;IACA6B,QAAQ,IAAIZ,qBAAqB,CAACY,QAAD,CAAjC;EACD,CAxCD;;EA0CA5D,KAAK,CAACgE,SAAN,CAAgB;IAAA,OAAMpB,YAAY,CAACmB,GAAb,EAAN;EAAA,CAAhB,EAA0C,CAACnB,YAAD,CAA1C;EAEA,IAAM9B,MAAM,GAAGI,KAAK,IAAIO,SAAT,GAAqB,UAArB,GAAkCV,WAAjD;EAEA,OACE,oBAAC,aAAD,QACE,wCACMQ,SADN;IAEE,SAAS,EAAErB,UAAU,CACnB,UADmB,EAEnBsB,QAAQ,KAAKrB,QAAQ,CAACoC,GAAtB,IAA6B,eAFV,6BAGCzB,MAHD,4BAIDQ,IAJC,GAKnBM,OAAO,IAAI,mBALQ,EAMnBE,OAAO,IAAI,mBANQ,EAOnBL,SAAS,IAAI,mBAPM;EAFvB,IAYE,oBAAC,KAAD;IACE,SAAS,EAAC,cADZ;IAEE,UAAU,EAAEW,UAFd;IAGE,OAAO,EAAEe,YAHX;IAIE,OAAO,EAAEE,YAJX;IAKE,KAAK,EAAEM;EALT,GAOE;IAAK,SAAS,EAAC,gBAAf;IAAgC,GAAG,EAAExB;EAArC,GACGlB,MAAM,IAAI;IAAK,SAAS,EAAC;EAAf,GAAmCA,MAAnC,CADb,EAGE;IAAK,SAAS,EAAC;EAAf,GACE,oBAAC,SAAD;IAAW,SAAS,EAAC;EAArB,GACGJ,QADH,CADF,EAKGG,MAAM,IACL,oBAAC,MAAD;IACE,KAAK,EAAC,MADR;IAEE,QAAQ,EAAE,KAFZ;IAGE,IAAI,EAAC,UAHP;IAIE,UAAU,EAAEM,IAAI,KAAK,MAAT,GAAkB,SAAlB,GAA8B,QAJ5C;IAKE,IAAI,EAAC,GALP;IAME,SAAS,EAAC,kBANZ;IAOE,OAAO,EAAEoB;EAPX,GASG1B,MATH,CANJ,CAHF,EAuBGE,KAAK,IAAI;IAAK,SAAS,EAAC;EAAf,GAAkCA,KAAlC,CAvBZ,CAPF,CAZF,CADF,CADF;AAkDD,CAvLM"}

package/dist/cssm/components/Spacing/Spacing.css

@@ -1 +1 @@
-.vkuiSpacing{box-sizing:border-box;color:#d7d8d9;color:var(--separator_common,var(--vkui--color_separator_primary));display:flex;flex-flow:column;justify-content:center;position:relative}.vkuiSpacing--separator{padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular,16px);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiSpacing--separator-top{justify-content:start}.vkuiSpacing--separator-center{justify-content:center}.vkuiSpacing--separator-bottom{justify-content:end}.vkuiSpacing--separator:after{background:currentColor;content:"";display:block;height:1px;-webkit-transform-origin:center top;transform-origin:center top}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiSpacing--separator:after{-webkit-transform:scaleY(.5);transform:scaleY(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiSpacing--separator:after{-webkit-transform:scaleY(.32);transform:scaleY(.32)}}
+.vkuiSpacing{box-sizing:border-box;color:var(--vkui--color_separator_primary);display:flex;flex-flow:column;justify-content:center;position:relative}.vkuiSpacing--separator{padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:var(--vkui--size_base_padding_horizontal--regular)}.vkuiSpacing--separator-top{justify-content:start}.vkuiSpacing--separator-center{justify-content:center}.vkuiSpacing--separator-bottom{justify-content:end}.vkuiSpacing--separator:after{background:currentColor;content:"";display:block;height:1px;transform-origin:center top}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiSpacing--separator:after{transform:scaleY(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiSpacing--separator:after{transform:scaleY(.32)}}

package/dist/cssm/components/Spinner/Spinner.css

@@ -1 +1 @@
-.vkuiSpinner{align-items:center;color:#99a2ad;color:var(--icon_outline_secondary,var(--vkui--color_icon_medium));display:flex;height:100%;justify-content:center;width:100%}.vkuiSpinner__self{-webkit-animation:vkui-rotator .7s linear infinite;animation:vkui-rotator .7s linear infinite;-webkit-animation:vkui-rotator var(--duration) linear infinite;animation:vkui-rotator var(--duration) linear infinite;-webkit-transform-origin:center;transform-origin:center}.vkuiSpinner__self svg{-webkit-transform:scale(1);transform:scale(1)}.vkuiButton .vkuiSpinner,.vkuiPanelHeader .vkuiSpinner{color:currentColor}
+.vkuiSpinner{align-items:center;color:var(--vkui--color_icon_medium);display:flex;height:100%;justify-content:center;width:100%}.vkuiSpinner__self{animation:vkui-rotator .7s linear infinite;animation:vkui-rotator var(--duration) linear infinite;transform-origin:center}.vkuiSpinner__self svg{transform:scale(1)}.vkuiButton .vkuiSpinner,.vkuiPanelHeader .vkuiSpinner{color:currentColor}

package/dist/cssm/components/SplitCol/SplitCol.css

@@ -1 +1 @@
-.vkuiSplitCol{flex-grow:1;flex-shrink:1;height:100%;position:relative;width:1px}.vkuiSplitCol--spaced{margin:0 16px;margin:0 var(--vkui--size_split_col_padding_horizontal--regular,16px)}.vkuiSplitCol--fixed{flex-grow:1;flex-shrink:1;height:100%;width:1px}.vkuiSplitCol__fixedInner{height:inherit;max-width:inherit;min-width:inherit;overflow:hidden;position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);width:inherit}
+.vkuiSplitCol{flex-grow:1;flex-shrink:1;height:100%;position:relative;width:1px}.vkuiSplitCol--sizeX-regular.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto,.vkuiSplitCol--spaced{margin:0 var(--vkui--size_split_col_padding_horizontal--regular)}@media (min-width:768px){.vkuiSplitCol--sizeX-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto{margin:0 var(--vkui--size_split_col_padding_horizontal--regular)}}.vkuiSplitCol--viewWidth-mobile.vkuiSplitCol--stretched-on-mobile,.vkuiSplitCol--viewWidth-smallMobile.vkuiSplitCol--stretched-on-mobile,.vkuiSplitCol--viewWidth-smallTablet.vkuiSplitCol--stretched-on-mobile{max-width:100%!important;width:100%!important}@media (max-width:767px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--stretched-on-mobile{max-width:100%!important;width:100%!important}}.vkuiSplitCol--fixed{flex-grow:1;flex-shrink:1;height:100%;width:1px}.vkuiSplitCol__fixedInner{height:inherit;max-width:inherit;min-width:inherit;overflow:hidden;position:fixed;top:0;transform:translateZ(0);width:inherit}

package/dist/cssm/components/SplitCol/SplitCol.d.ts

@@ -18,9 +18,17 @@ export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
      * Если true, то добавляются боковые отступы фиксированной величины
      */
     spaced?: boolean;
+    /**
+     * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`
+     */
+    autoSpaced?: boolean;
     fixed?: boolean;
+    /**
+     * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`
+     */
+    stretchedOnMobile?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitCol
  */
-export declare const SplitCol: ({ children, width, maxWidth, minWidth, spaced, animate, fixed, style, ...restProps }: SplitColProps) => JSX.Element;
+export declare const SplitCol: (props: SplitColProps) => JSX.Element;

package/dist/cssm/components/SplitCol/SplitCol.js

@@ -1,12 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "width", "maxWidth", "minWidth", "spaced", "animate", "fixed", "style"];
+var _excluded = ["children", "width", "maxWidth", "minWidth", "spaced", "animate", "fixed", "style", "autoSpaced", "stretchedOnMobile"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
-import { useScrollLockEffect } from "../AppRoot/ScrollContext";
 import { classNames } from "../../lib/classNames";
-import { noop } from "../../lib/utils";
+import { getSizeXClassName } from "../../helpers/getSizeXClassName";
+import { getViewWidthClassName } from "../../helpers/getViewWidthClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { BREAKPOINTS, ViewWidth } from "../../lib/adaptivity";
+import { useDOM } from "../../lib/dom";
 import "./SplitCol.css";
 export var SplitColContext = /*#__PURE__*/React.createContext({
   colRef: null,
@@ -19,38 +23,46 @@ export var useSplitCol = function useSplitCol() {
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitCol
  */
-export var SplitCol = function SplitCol(_ref) {
-  var children = _ref.children,
-      width = _ref.width,
-      maxWidth = _ref.maxWidth,
-      minWidth = _ref.minWidth,
-      spaced = _ref.spaced,
-      _ref$animate = _ref.animate,
-      animate = _ref$animate === void 0 ? false : _ref$animate,
-      fixed = _ref.fixed,
-      style = _ref.style,
-      restProps = _objectWithoutProperties(_ref, _excluded);
+export var SplitCol = function SplitCol(props) {
+  var children = props.children,
+      width = props.width,
+      maxWidth = props.maxWidth,
+      minWidth = props.minWidth,
+      spaced = props.spaced,
+      _animate = props.animate,
+      fixed = props.fixed,
+      style = props.style,
+      autoSpaced = props.autoSpaced,
+      stretchedOnMobile = props.stretchedOnMobile,
+      restProps = _objectWithoutProperties(props, _excluded);
 
   var baseRef = React.useRef(null);
-  var fixedInnerRef = React.useRef(null);
+
+  var _useAdaptivity = useAdaptivity(),
+      viewWidth = _useAdaptivity.viewWidth,
+      sizeX = _useAdaptivity.sizeX;
+
+  var _React$useState = React.useState(Boolean(_animate)),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      animate = _React$useState2[0],
+      setAnimate = _React$useState2[1];
+
+  var _useDOM = useDOM(),
+      window = _useDOM.window;
+
+  React.useEffect(function () {
+    if (_animate === undefined) {
+      setAnimate(viewWidth !== undefined ? viewWidth < ViewWidth.TABLET : window.innerWidth < BREAKPOINTS.SMALL_TABLET);
+    } else {
+      setAnimate(_animate);
+    }
+  }, [_animate, viewWidth, window]);
   var contextValue = React.useMemo(function () {
     return {
       colRef: baseRef,
       animate: animate
     };
   }, [baseRef, animate]);
-  useScrollLockEffect(function () {
-    var fixedInner = fixedInnerRef.current;
-
-    if (!fixedInner) {
-      return noop;
-    }
-
-    fixedInner.style.top = "".concat(fixedInner.offsetTop, "px");
-    return function () {
-      fixedInner.style.top = "";
-    };
-  }, [fixedInnerRef.current]);
   return createScopedElement("div", _extends({}, restProps, {
     style: _objectSpread(_objectSpread({}, style), {}, {
       width: width,
@@ -58,11 +70,10 @@ export var SplitCol = function SplitCol(_ref) {
       minWidth: minWidth
     }),
     ref: baseRef,
-    vkuiClass: classNames("SplitCol", spaced && "SplitCol--spaced", fixed && "SplitCol--fixed")
+    vkuiClass: classNames("SplitCol", getSizeXClassName("SplitCol", sizeX), getViewWidthClassName("SplitCol", viewWidth), spaced && "SplitCol--spaced", spaced === undefined && "SplitCol--spaced-none", autoSpaced && "SplitCol--spaced-auto", fixed && "SplitCol--fixed", stretchedOnMobile && "SplitCol--stretched-on-mobile")
   }), createScopedElement(SplitColContext.Provider, {
     value: contextValue
   }, fixed ? createScopedElement("div", {
-    ref: fixedInnerRef,
     vkuiClass: "SplitCol__fixedInner"
   }, children) : children));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SplitCol.js","names":["React","useScrollLockEffect","classNames","noop","SplitColContext","createContext","colRef","animate","useSplitCol","useContext","SplitCol","children","width","maxWidth","minWidth","spaced","fixed","style","restProps","baseRef","useRef","fixedInnerRef","contextValue","useMemo","fixedInner","current","top","offsetTop"],"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useScrollLockEffect } from \"../AppRoot/ScrollContext\";\nimport { classNames } from \"../../lib/classNames\";\nimport { noop } from \"../../lib/utils\";\nimport \"./SplitCol.css\";\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   */\n  spaced?: boolean;\n  fixed?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = ({\n  children,\n  width,\n  maxWidth,\n  minWidth,\n  spaced,\n  animate = false,\n  fixed,\n  style,\n  ...restProps\n}: SplitColProps) => {\n  const baseRef = React.useRef<HTMLDivElement>(null);\n\n  const fixedInnerRef = React.useRef<HTMLDivElement>(null);\n\n  const contextValue = React.useMemo(() => {\n    return {\n      colRef: baseRef,\n      animate,\n    };\n  }, [baseRef, animate]);\n\n  useScrollLockEffect(() => {\n    const fixedInner = fixedInnerRef.current;\n    if (!fixedInner) {\n      return noop;\n    }\n\n    fixedInner.style.top = `${fixedInner.offsetTop}px`;\n\n    return () => {\n      fixedInner.style.top = \"\";\n    };\n  }, [fixedInnerRef.current]);\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      vkuiClass={classNames(\n        \"SplitCol\",\n        spaced && \"SplitCol--spaced\",\n        fixed && \"SplitCol--fixed\"\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? (\n          <div ref={fixedInnerRef} vkuiClass=\"SplitCol__fixedInner\">\n            {children}\n          </div>\n        ) : (\n          children\n        )}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,mBAAT;AACA,SAASC,UAAT;AACA,SAASC,IAAT;AACA;AAOA,OAAO,IAAMC,eAAe,gBAAGJ,KAAK,CAACK,aAAN,CAA0C;EACvEC,MAAM,EAAE,IAD+D;EAEvEC,OAAO,EAAE;AAF8D,CAA1C,CAAxB;AAKP,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc;EAAA,OAAMR,KAAK,CAACS,UAAN,CAAiBL,eAAjB,CAAN;AAAA,CAApB;;AAiBP;AACA;AACA;AACA,OAAO,IAAMM,QAAQ,GAAG,SAAXA,QAAW,OAUH;EAAA,IATnBC,QASmB,QATnBA,QASmB;EAAA,IARnBC,KAQmB,QARnBA,KAQmB;EAAA,IAPnBC,QAOmB,QAPnBA,QAOmB;EAAA,IANnBC,QAMmB,QANnBA,QAMmB;EAAA,IALnBC,MAKmB,QALnBA,MAKmB;EAAA,wBAJnBR,OAImB;EAAA,IAJnBA,OAImB,6BAJT,KAIS;EAAA,IAHnBS,KAGmB,QAHnBA,KAGmB;EAAA,IAFnBC,KAEmB,QAFnBA,KAEmB;EAAA,IADhBC,SACgB;;EACnB,IAAMC,OAAO,GAAGnB,KAAK,CAACoB,MAAN,CAA6B,IAA7B,CAAhB;EAEA,IAAMC,aAAa,GAAGrB,KAAK,CAACoB,MAAN,CAA6B,IAA7B,CAAtB;EAEA,IAAME,YAAY,GAAGtB,KAAK,CAACuB,OAAN,CAAc,YAAM;IACvC,OAAO;MACLjB,MAAM,EAAEa,OADH;MAELZ,OAAO,EAAPA;IAFK,CAAP;EAID,CALoB,EAKlB,CAACY,OAAD,EAAUZ,OAAV,CALkB,CAArB;EAOAN,mBAAmB,CAAC,YAAM;IACxB,IAAMuB,UAAU,GAAGH,aAAa,CAACI,OAAjC;;IACA,IAAI,CAACD,UAAL,EAAiB;MACf,OAAOrB,IAAP;IACD;;IAEDqB,UAAU,CAACP,KAAX,CAAiBS,GAAjB,aAA0BF,UAAU,CAACG,SAArC;IAEA,OAAO,YAAM;MACXH,UAAU,CAACP,KAAX,CAAiBS,GAAjB,GAAuB,EAAvB;IACD,CAFD;EAGD,CAXkB,EAWhB,CAACL,aAAa,CAACI,OAAf,CAXgB,CAAnB;EAaA,OACE,wCACMP,SADN;IAEE,KAAK,kCACAD,KADA;MAEHL,KAAK,EAAEA,KAFJ;MAGHC,QAAQ,EAAEA,QAHP;MAIHC,QAAQ,EAAEA;IAJP,EAFP;IAQE,GAAG,EAAEK,OARP;IASE,SAAS,EAAEjB,UAAU,CACnB,UADmB,EAEnBa,MAAM,IAAI,kBAFS,EAGnBC,KAAK,IAAI,iBAHU;EATvB,IAeE,oBAAC,eAAD,CAAiB,QAAjB;IAA0B,KAAK,EAAEM;EAAjC,GACGN,KAAK,GACJ;IAAK,GAAG,EAAEK,aAAV;IAAyB,SAAS,EAAC;EAAnC,GACGV,QADH,CADI,GAKJA,QANJ,CAfF,CADF;AA2BD,CA9DM"}
+{"version":3,"file":"SplitCol.js","names":["React","classNames","getSizeXClassName","getViewWidthClassName","useAdaptivity","BREAKPOINTS","ViewWidth","useDOM","SplitColContext","createContext","colRef","animate","useSplitCol","useContext","SplitCol","props","children","width","maxWidth","minWidth","spaced","_animate","fixed","style","autoSpaced","stretchedOnMobile","restProps","baseRef","useRef","viewWidth","sizeX","useState","Boolean","setAnimate","window","useEffect","undefined","TABLET","innerWidth","SMALL_TABLET","contextValue","useMemo"],"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { getViewWidthClassName } from \"../../helpers/getViewWidthClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { BREAKPOINTS, ViewWidth } from \"../../lib/adaptivity\";\nimport { useDOM } from \"../../lib/dom\";\nimport \"./SplitCol.css\";\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: _animate,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth, sizeX } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(_animate));\n  const { window } = useDOM();\n\n  React.useEffect(() => {\n    if (_animate === undefined) {\n      setAnimate(\n        viewWidth !== undefined\n          ? viewWidth < ViewWidth.TABLET\n          : window!.innerWidth < BREAKPOINTS.SMALL_TABLET\n      );\n    } else {\n      setAnimate(_animate);\n    }\n  }, [_animate, viewWidth, window]);\n\n  const contextValue = React.useMemo(() => {\n    return {\n      colRef: baseRef,\n      animate,\n    };\n  }, [baseRef, animate]);\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      vkuiClass={classNames(\n        \"SplitCol\",\n        getSizeXClassName(\"SplitCol\", sizeX),\n        getViewWidthClassName(\"SplitCol\", viewWidth),\n        spaced && \"SplitCol--spaced\",\n        spaced === undefined && \"SplitCol--spaced-none\",\n        autoSpaced && \"SplitCol--spaced-auto\",\n        fixed && \"SplitCol--fixed\",\n        stretchedOnMobile && \"SplitCol--stretched-on-mobile\"\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? (\n          <div vkuiClass=\"SplitCol__fixedInner\">{children}</div>\n        ) : (\n          children\n        )}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/cssm/components/SplitLayout/SplitLayout.css

@@ -1,7 +1 @@
-.vkuiSplitLayout{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-common);height:100%;position:relative;width:100%}.vkuiSplitLayout__inner{display:flex;height:100%;width:100%}.vkuiSplitLayout__inner--header{margin-top:calc(-1 * (56px + 0px));margin-top:calc(-1 * (var(
-            --panelheader_height,
-            var(--vkui--size_panel_header_height--regular)
-          ) + var(--safe-area-inset-top)));position:relative;z-index:11}.vkuiSplitLayout--ios .vkuiSplitLayout__inner--header{margin-top:calc(-1 * (52px + 0px));margin-top:calc(-1 * (var(
-            --panelheader_height_ios,
-            var(--vkui--size_panel_header_height--regular)
-          ) + var(--safe-area-inset-top)))}.vkuiSplitLayout__popout{z-index:100}.vkuiSplitLayout__modal,.vkuiSplitLayout__popout{height:100%;left:0;position:fixed;top:0;width:100%}.vkuiSplitLayout__modal{z-index:99}.vkuiSplitLayout__modal:empty{display:none}
+.vkuiSplitLayout{font-family:var(--vkui--font_family_base);font-family:var(--font-common);height:100%;position:relative;width:100%}.vkuiSplitLayout__inner{display:flex;height:100%;width:100%}.vkuiSplitLayout__inner--header{position:relative;z-index:11}.vkuiSplitLayout--ios .vkuiSplitLayout__inner--header,.vkuiSplitLayout__inner--header{margin-top:calc(-1 * (var(--vkui--size_panel_header_height--regular) + var(--safe-area-inset-top)))}.vkuiSplitLayout__popout{z-index:100}.vkuiSplitLayout__modal,.vkuiSplitLayout__popout{height:100%;left:0;position:fixed;top:0;width:100%}.vkuiSplitLayout__modal{z-index:99}.vkuiSplitLayout__modal:empty{display:none}

package/dist/cssm/components/SplitLayout/SplitLayout.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["popout", "modal", "header", "children", "getRootRef", "getRef"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { classNames } from "../../lib/classNames";
-import { IOS } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { PopoutRoot } from "../PopoutRoot/PopoutRoot";
 import { usePlatform } from "../../hooks/usePlatform";
 import "./SplitLayout.css";
@@ -22,7 +22,7 @@ export var SplitLayout = function SplitLayout(_ref) {
 
   var platform = usePlatform();
   return createScopedElement(PopoutRoot, {
-    vkuiClass: classNames("SplitLayout", platform === IOS && "SplitLayout--ios"),
+    vkuiClass: classNames("SplitLayout", platform === Platform.IOS && "SplitLayout--ios"),
     popout: popout,
     modal: modal,
     getRootRef: getRootRef

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

@@ -1 +1 @@
-{"version":3,"file":"SplitLayout.js","names":["classNames","IOS","PopoutRoot","usePlatform","SplitLayout","popout","modal","header","children","getRootRef","getRef","restProps","platform"],"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { PopoutRoot } from \"../PopoutRoot/PopoutRoot\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./SplitLayout.css\";\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      vkuiClass={classNames(\n        \"SplitLayout\",\n        platform === IOS && \"SplitLayout--ios\"\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        vkuiClass={classNames(\n          \"SplitLayout__inner\",\n          !!header && \"SplitLayout__inner--header\"\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,GAAT;AAEA,SAASC,UAAT;AACA,SAASC,WAAT;AACA;;AAiBA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAQH;EAAA,IAPtBC,MAOsB,QAPtBA,MAOsB;EAAA,IANtBC,KAMsB,QANtBA,KAMsB;EAAA,IALtBC,MAKsB,QALtBA,MAKsB;EAAA,IAJtBC,QAIsB,QAJtBA,QAIsB;EAAA,IAHtBC,UAGsB,QAHtBA,UAGsB;EAAA,IAFtBC,MAEsB,QAFtBA,MAEsB;EAAA,IADnBC,SACmB;;EACtB,IAAMC,QAAQ,GAAGT,WAAW,EAA5B;EAEA,OACE,oBAAC,UAAD;IACE,SAAS,EAAEH,UAAU,CACnB,aADmB,EAEnBY,QAAQ,KAAKX,GAAb,IAAoB,kBAFD,CADvB;IAKE,MAAM,EAAEI,MALV;IAME,KAAK,EAAEC,KANT;IAOE,UAAU,EAAEG;EAPd,GASGF,MATH,EAUE,wCACMI,SADN;IAEE,GAAG,EAAED,MAFP;IAGE,SAAS,EAAEV,UAAU,CACnB,oBADmB,EAEnB,CAAC,CAACO,MAAF,IAAY,4BAFO;EAHvB,IAQGC,QARH,CAVF,CADF;AAuBD,CAlCM"}
+{"version":3,"file":"SplitLayout.js","names":["classNames","Platform","PopoutRoot","usePlatform","SplitLayout","popout","modal","header","children","getRootRef","getRef","restProps","platform","IOS"],"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { PopoutRoot } from \"../PopoutRoot/PopoutRoot\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./SplitLayout.css\";\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      vkuiClass={classNames(\n        \"SplitLayout\",\n        platform === Platform.IOS && \"SplitLayout--ios\"\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        vkuiClass={classNames(\n          \"SplitLayout__inner\",\n          !!header && \"SplitLayout__inner--header\"\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,QAAT;AAEA,SAASC,UAAT;AACA,SAASC,WAAT;AACA;;AAiBA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAQH;EAAA,IAPtBC,MAOsB,QAPtBA,MAOsB;EAAA,IANtBC,KAMsB,QANtBA,KAMsB;EAAA,IALtBC,MAKsB,QALtBA,MAKsB;EAAA,IAJtBC,QAIsB,QAJtBA,QAIsB;EAAA,IAHtBC,UAGsB,QAHtBA,UAGsB;EAAA,IAFtBC,MAEsB,QAFtBA,MAEsB;EAAA,IADnBC,SACmB;;EACtB,IAAMC,QAAQ,GAAGT,WAAW,EAA5B;EAEA,OACE,oBAAC,UAAD;IACE,SAAS,EAAEH,UAAU,CACnB,aADmB,EAEnBY,QAAQ,KAAKX,QAAQ,CAACY,GAAtB,IAA6B,kBAFV,CADvB;IAKE,MAAM,EAAER,MALV;IAME,KAAK,EAAEC,KANT;IAOE,UAAU,EAAEG;EAPd,GASGF,MATH,EAUE,wCACMI,SADN;IAEE,GAAG,EAAED,MAFP;IAGE,SAAS,EAAEV,UAAU,CACnB,oBADmB,EAEnB,CAAC,CAACO,MAAF,IAAY,4BAFO;EAHvB,IAQGC,QARH,CAVF,CADF;AAuBD,CAlCM"}

package/dist/cssm/components/SubnavigationBar/SubnavigationBar.css

@@ -1 +1 @@
-.vkuiSubnavigationBar__in{margin:-8px 0}.vkuiSubnavigationBar__scrollIn{display:flex;padding-bottom:calc(12px + 8px);padding-bottom:calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular,12px) + 8px);padding-top:calc(12px + 8px);padding-top:calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular,12px) + 8px)}.vkuiSubnavigationBar__scrollIn:after,.vkuiSubnavigationBar__scrollIn:before{content:"";min-width:16px;min-width:var(--vkui--size_base_padding_horizontal--regular,16px)}
+.vkuiSubnavigationBar__in{margin:-8px 0}.vkuiSubnavigationBar__scrollIn{display:flex;padding-bottom:calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px);padding-top:calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px)}.vkuiSubnavigationBar__scrollIn:after,.vkuiSubnavigationBar__scrollIn:before{content:"";min-width:var(--vkui--size_base_padding_horizontal--regular)}

package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js

@@ -47,7 +47,7 @@ export var SubnavigationBar = function SubnavigationBar(_ref) {
   }
 
   return createScopedElement("div", _extends({}, restProps, {
-    vkuiClass: classNames("SubnavigationBar", "SubnavigationBar--".concat(mode))
+    vkuiClass: classNames("SubnavigationBar", "SubnavigationBar--mode-".concat(mode))
   }), createScopedElement(ScrollWrapper, _extends({
     vkuiClass: "SubnavigationBar__in"
   }, scrollWrapperProps), createScopedElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"SubnavigationBar.js","names":["classNames","HorizontalScroll","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps"],"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from \"../HorizontalScroll/HorizontalScroll\";\nimport \"./SubnavigationBar.css\";\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      | \"showArrows\"\n      | \"getScrollToLeft\"\n      | \"getScrollToRight\"\n      | \"scrollAnimationDuration\"\n    > {\n  mode?: \"fixed\" | \"overflow\";\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = \"overflow\",\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === \"fixed\") {\n    ScrollWrapper = \"div\";\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\"SubnavigationBar\", `SubnavigationBar--${mode}`)}\n    >\n      <ScrollWrapper vkuiClass=\"SubnavigationBar__in\" {...scrollWrapperProps}>\n        <div vkuiClass=\"SubnavigationBar__scrollIn\">{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SACEC,gBADF;AAKA;;AAcA,IAAMC,mBAA0C,GAAG,SAA7CA,mBAA6C,CAACC,CAAD;EAAA,OAAOA,CAAC,GAAG,GAAX;AAAA,CAAnD;;AAEA,IAAMC,oBAA2C,GAAG,SAA9CA,oBAA8C,CAACD,CAAD;EAAA,OAAOA,CAAC,GAAG,GAAX;AAAA,CAApD;AAEA;AACA;AACA;;;AACA,OAAO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAmB,OAQH;EAAA,qBAP3BC,IAO2B;EAAA,IAP3BA,IAO2B,0BAPpB,UAOoB;EAAA,IAN3BC,QAM2B,QAN3BA,QAM2B;EAAA,2BAL3BC,UAK2B;EAAA,IAL3BA,UAK2B,gCALd,IAKc;EAAA,gCAJ3BC,eAI2B;EAAA,IAJ3BA,eAI2B,qCAJTP,mBAIS;EAAA,iCAH3BQ,gBAG2B;EAAA,IAH3BA,gBAG2B,sCAHRN,oBAGQ;EAAA,IAF3BO,uBAE2B,QAF3BA,uBAE2B;EAAA,IADxBC,SACwB;;EAC3B,IAAIC,aAAJ;EACA,IAAIC,kBAAkB,GAAG,EAAzB;;EAEA,IAAIR,IAAI,KAAK,OAAb,EAAsB;IACpBO,aAAa,GAAG,KAAhB;EACD,CAFD,MAEO;IACLA,aAAa,GAAGZ,gBAAhB;IACAa,kBAAkB,GAAG;MACnBN,UAAU,EAAVA,UADmB;MAEnBC,eAAe,EAAfA,eAFmB;MAGnBC,gBAAgB,EAAhBA,gBAHmB;MAInBC,uBAAuB,EAAvBA;IAJmB,CAArB;EAMD;;EAED,OACE,wCACMC,SADN;IAEE,SAAS,EAAEZ,UAAU,CAAC,kBAAD,8BAA0CM,IAA1C;EAFvB,IAIE,oBAAC,aAAD;IAAe,SAAS,EAAC;EAAzB,GAAoDQ,kBAApD,GACE;IAAK,SAAS,EAAC;EAAf,GAA6CP,QAA7C,CADF,CAJF,CADF;AAUD,CAlCM"}
+{"version":3,"file":"SubnavigationBar.js","names":["classNames","HorizontalScroll","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps"],"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from \"../HorizontalScroll/HorizontalScroll\";\nimport \"./SubnavigationBar.css\";\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      | \"showArrows\"\n      | \"getScrollToLeft\"\n      | \"getScrollToRight\"\n      | \"scrollAnimationDuration\"\n    > {\n  mode?: \"fixed\" | \"overflow\";\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = \"overflow\",\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === \"fixed\") {\n    ScrollWrapper = \"div\";\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        \"SubnavigationBar\",\n        `SubnavigationBar--mode-${mode}`\n      )}\n    >\n      <ScrollWrapper vkuiClass=\"SubnavigationBar__in\" {...scrollWrapperProps}>\n        <div vkuiClass=\"SubnavigationBar__scrollIn\">{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SACEC,gBADF;AAKA;;AAcA,IAAMC,mBAA0C,GAAG,SAA7CA,mBAA6C,CAACC,CAAD;EAAA,OAAOA,CAAC,GAAG,GAAX;AAAA,CAAnD;;AAEA,IAAMC,oBAA2C,GAAG,SAA9CA,oBAA8C,CAACD,CAAD;EAAA,OAAOA,CAAC,GAAG,GAAX;AAAA,CAApD;AAEA;AACA;AACA;;;AACA,OAAO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAmB,OAQH;EAAA,qBAP3BC,IAO2B;EAAA,IAP3BA,IAO2B,0BAPpB,UAOoB;EAAA,IAN3BC,QAM2B,QAN3BA,QAM2B;EAAA,2BAL3BC,UAK2B;EAAA,IAL3BA,UAK2B,gCALd,IAKc;EAAA,gCAJ3BC,eAI2B;EAAA,IAJ3BA,eAI2B,qCAJTP,mBAIS;EAAA,iCAH3BQ,gBAG2B;EAAA,IAH3BA,gBAG2B,sCAHRN,oBAGQ;EAAA,IAF3BO,uBAE2B,QAF3BA,uBAE2B;EAAA,IADxBC,SACwB;;EAC3B,IAAIC,aAAJ;EACA,IAAIC,kBAAkB,GAAG,EAAzB;;EAEA,IAAIR,IAAI,KAAK,OAAb,EAAsB;IACpBO,aAAa,GAAG,KAAhB;EACD,CAFD,MAEO;IACLA,aAAa,GAAGZ,gBAAhB;IACAa,kBAAkB,GAAG;MACnBN,UAAU,EAAVA,UADmB;MAEnBC,eAAe,EAAfA,eAFmB;MAGnBC,gBAAgB,EAAhBA,gBAHmB;MAInBC,uBAAuB,EAAvBA;IAJmB,CAArB;EAMD;;EAED,OACE,wCACMC,SADN;IAEE,SAAS,EAAEZ,UAAU,CACnB,kBADmB,mCAEOM,IAFP;EAFvB,IAOE,oBAAC,aAAD;IAAe,SAAS,EAAC;EAAzB,GAAoDQ,kBAApD,GACE;IAAK,SAAS,EAAC;EAAf,GAA6CP,QAA7C,CADF,CAPF,CADF;AAaD,CArCM"}

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.css

@@ -1,9 +1,5 @@
-.vkuiSubnavigationButton{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSubnavigationButton__in{align-items:center;display:flex;justify-content:center}.vkuiSubnavigationButton--s .vkuiSubnavigationButton__in{height:30px;height:var(--vkui--size_button_small_height--regular,30px)}.vkuiSubnavigationButton--m .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_medium_height--regular,36px)}.vkuiSubnavigationButton--l .vkuiSubnavigationButton__in{height:44px;height:var(--vkui--size_button_large_height--regular,44px)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--s .vkuiSubnavigationButton__in{height:28px;height:var(--vkui--size_button_small_height--compact,28px)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--m .vkuiSubnavigationButton__in{height:32px;height:var(--vkui--size_button_medium_height--compact,32px)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--l .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_large_height--compact,36px)}.vkuiSubnavigationButton__before{color:#2688eb;color:var(--accent,var(--vkui--color_icon_accent));margin-right:8px}.vkuiSubnavigationButton__label{flex-grow:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSubnavigationButton__after{margin-left:8px}.vkuiSubnavigationButton__expandableIcon{color:#99a2ad;color:var(--icon_secondary,var(--vkui--color_icon_secondary));margin-left:8px;margin-top:1px}.vkuiSubnavigationButton__before:first-child,.vkuiSubnavigationButton__label:first-child{padding-left:12px;padding-left:var(
-    --vkui--size_button_base_small_padding_horizontal_icon--regular,12px
-  )}.vkuiSubnavigationButton__after:last-child,.vkuiSubnavigationButton__expandableIcon,.vkuiSubnavigationButton__label:last-child{padding-right:12px;padding-right:var(
-    --vkui--size_button_base_small_padding_horizontal_icon--regular,12px
-  )}.vkuiSubnavigationButton--mode-primary{background-color:#fff;background-color:var(
-    --modal_card_background,var(--vkui--color_background_modal)
-  );box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08))}.vkuiSubnavigationButton--mode-outline{box-shadow:inset 0 0 0 1px var(--vkui--color_field_border_alpha,rgba(0,0,0,.12));box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:inset 0 0 0 var(--thin-border) var(--vkui--color_field_border_alpha,rgba(0,0,0,.12))}.vkuiSubnavigationButton--selected{background-color:#2d81e0;background-color:var(
-    --button_primary_background,var(--vkui--color_background_accent)
-  );border:none;box-shadow:none;color:#fff;color:var(--button_primary_foreground,var(--vkui--color_text_contrast))}.vkuiSubnavigationButton--selected.vkuiSubnavigationButton--mode-tertiary{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active,rgba(0,16,61,.08));color:#000;color:var(--vkui--color_text_primary,#000)}.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__before,.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__expandableIcon{color:inherit}.vkuiSubnavigationBar .vkuiSubnavigationButton+.vkuiSubnavigationButton{margin-left:8px;margin-left:var(--vkui--size_subnavigation_bar_gap--regular,8px)}.vkuiSubnavigationBar--fixed .vkuiSubnavigationButton{flex:1;min-width:0}
+.vkuiSubnavigationButton{border-radius:var(--vkui--size_border_radius--regular);display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSubnavigationButton__in{align-items:center;display:flex;justify-content:center}.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:var(--vkui--size_button_small_height--regular)}.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:var(--vkui--size_button_medium_height--regular)}.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:var(--vkui--size_button_large_height--regular)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:var(--vkui--size_button_large_height--compact)}.vkuiSubnavigationButton__before{color:var(--vkui--color_icon_accent);margin-right:8px}.vkuiSubnavigationButton__label{flex-grow:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSubnavigationButton__after{margin-left:8px}.vkuiSubnavigationButton__expandableIcon{color:var(--vkui--color_icon_secondary);margin-left:8px;margin-top:1px}.vkuiSubnavigationButton__before:first-child,.vkuiSubnavigationButton__label:first-child{padding-left:var(
+    --vkui--size_button_base_small_padding_horizontal_icon--regular
+  )}.vkuiSubnavigationButton__after:last-child,.vkuiSubnavigationButton__expandableIcon,.vkuiSubnavigationButton__label:last-child{padding-right:var(
+    --vkui--size_button_base_small_padding_horizontal_icon--regular
+  )}.vkuiSubnavigationButton--mode-primary{background-color:var(--vkui--color_background_modal);box-shadow:var(--vkui--elevation3)}.vkuiSubnavigationButton--mode-outline{box-shadow:inset 0 0 0 1px var(--vkui--color_field_border_alpha);box-shadow:inset 0 0 0 var(--thin-border) var(--vkui--color_field_border_alpha)}.vkuiSubnavigationButton--selected{background-color:var(--vkui--color_background_accent_themed);border:none;box-shadow:none;color:var(--vkui--color_text_contrast)}.vkuiSubnavigationButton--selected.vkuiSubnavigationButton--mode-tertiary{background-color:var(--vkui--color_transparent--active);color:var(--vkui--color_text_primary)}.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__before,.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__expandableIcon{color:inherit}.vkuiSubnavigationBar .vkuiSubnavigationButton+.vkuiSubnavigationButton{margin-left:var(--vkui--size_subnavigation_bar_gap--regular)}.vkuiSubnavigationBar--mode-fixed .vkuiSubnavigationButton{flex:1;min-width:0}

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.d.ts

@@ -8,7 +8,7 @@ export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
     /**
      * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode="fixed" />`
      */
-    textLevel?: 1 | 2 | 3;
+    textLevel?: "1" | "2" | "3";
     /**
      * Рекомендуется использовать только иконки с размером 24
      */

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js

@@ -16,12 +16,12 @@ var SubnavigationButtonTypography = function SubnavigationButtonTypography(_ref)
   var textLevel = _ref.textLevel,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  if (textLevel === 1) {
+  if (textLevel === "1") {
     return createScopedElement(Subhead, restProps);
   }
 
   return createScopedElement(Caption, _extends({
-    level: textLevel === 2 ? "2" : "3"
+    level: textLevel === "2" ? "1" : "2"
   }, restProps));
 };
 /**
@@ -36,7 +36,7 @@ export var SubnavigationButton = function SubnavigationButton(_ref2) {
       size = _ref2$size === void 0 ? "m" : _ref2$size,
       selected = _ref2.selected,
       _ref2$textLevel = _ref2.textLevel,
-      textLevel = _ref2$textLevel === void 0 ? 1 : _ref2$textLevel,
+      textLevel = _ref2$textLevel === void 0 ? "1" : _ref2$textLevel,
       before = _ref2.before,
       after = _ref2.after,
       expandable = _ref2.expandable,
@@ -49,7 +49,7 @@ export var SubnavigationButton = function SubnavigationButton(_ref2) {
   return createScopedElement(Tappable, _extends({}, restProps, {
     hasActive: false,
     focusVisibleMode: "outside",
-    vkuiClass: classNames("SubnavigationButton", "SubnavigationButton--".concat(size), "SubnavigationButton--mode-".concat(mode), selected && "SubnavigationButton--selected", "SubnavigationButton--sizeY-".concat(sizeY)),
+    vkuiClass: classNames("SubnavigationButton", "SubnavigationButton--size-".concat(size), "SubnavigationButton--mode-".concat(mode), selected && "SubnavigationButton--selected", "SubnavigationButton--sizeY-".concat(sizeY)),
     "aria-label": getTitleFromChildren(children)
   }), createScopedElement("span", {
     vkuiClass: "SubnavigationButton__in"

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

@@ -1 +1 @@
-{"version":3,"file":"SubnavigationButton.js","names":["classNames","getTitleFromChildren","useAdaptivity","Tappable","Icon16Dropdown","Caption","Subhead","SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","mode","size","selected","before","after","expandable","children","sizeY"],"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasComponent, HasChildren } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getTitleFromChildren } from \"../../lib/utils\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { Icon16Dropdown } from \"@vkontakte/icons\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport \"./SubnavigationButton.css\";\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, \"size\"> {\n  mode?: \"primary\" | \"outline\" | \"tertiary\";\n  size?: \"s\" | \"m\" | \"l\";\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: 1 | 2 | 3;\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  \"textLevel\"\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === 1) {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === 2 ? \"2\" : \"3\"} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = \"primary\",\n  size = \"m\",\n  selected,\n  textLevel = 1,\n  before,\n  after,\n  expandable,\n  children,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      vkuiClass={classNames(\n        \"SubnavigationButton\",\n        `SubnavigationButton--${size}`,\n        `SubnavigationButton--mode-${mode}`,\n        selected && \"SubnavigationButton--selected\",\n        `SubnavigationButton--sizeY-${sizeY}`\n      )}\n      aria-label={getTitleFromChildren(children)}\n    >\n      <span vkuiClass=\"SubnavigationButton__in\">\n        {before && (\n          <span vkuiClass=\"SubnavigationButton__before\">{before}</span>\n        )}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          vkuiClass=\"SubnavigationButton__label\"\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span vkuiClass=\"SubnavigationButton__after\">{after}</span>}\n        {expandable && (\n          <Icon16Dropdown\n            vkuiClass=\"SubnavigationButton__expandableIcon\"\n            aria-hidden\n          />\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;AAEA,SAASA,UAAT;AACA,SAASC,oBAAT;AACA,SAASC,aAAT;AACA,SAAwBC,QAAxB;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,OAAT;AACA,SAASC,OAAT;AACA;;AA4BA,IAAMC,6BAA6B,GAAG,SAAhCA,6BAAgC,OAGI;EAAA,IAFxCC,SAEwC,QAFxCA,SAEwC;EAAA,IADrCC,SACqC;;EACxC,IAAID,SAAS,KAAK,CAAlB,EAAqB;IACnB,OAAO,oBAAC,OAAD,EAAaC,SAAb,CAAP;EACD;;EAED,OAAO,oBAAC,OAAD;IAAS,KAAK,EAAED,SAAS,KAAK,CAAd,GAAkB,GAAlB,GAAwB;EAAxC,GAAiDC,SAAjD,EAAP;AACD,CATD;AAWA;AACA;AACA;;;AACA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,QAUH;EAAA,uBAT9BC,IAS8B;EAAA,IAT9BA,IAS8B,2BATvB,SASuB;EAAA,uBAR9BC,IAQ8B;EAAA,IAR9BA,IAQ8B,2BARvB,GAQuB;EAAA,IAP9BC,QAO8B,SAP9BA,QAO8B;EAAA,4BAN9BL,SAM8B;EAAA,IAN9BA,SAM8B,gCANlB,CAMkB;EAAA,IAL9BM,MAK8B,SAL9BA,MAK8B;EAAA,IAJ9BC,KAI8B,SAJ9BA,KAI8B;EAAA,IAH9BC,UAG8B,SAH9BA,UAG8B;EAAA,IAF9BC,QAE8B,SAF9BA,QAE8B;EAAA,IAD3BR,SAC2B;;EAC9B,qBAAkBP,aAAa,EAA/B;EAAA,IAAQgB,KAAR,kBAAQA,KAAR;;EAEA,OACE,oBAAC,QAAD,eACMT,SADN;IAEE,SAAS,EAAE,KAFb;IAGE,gBAAgB,EAAC,SAHnB;IAIE,SAAS,EAAET,UAAU,CACnB,qBADmB,iCAEKY,IAFL,uCAGUD,IAHV,GAInBE,QAAQ,IAAI,+BAJO,uCAKWK,KALX,EAJvB;IAWE,cAAYjB,oBAAoB,CAACgB,QAAD;EAXlC,IAaE;IAAM,SAAS,EAAC;EAAhB,GACGH,MAAM,IACL;IAAM,SAAS,EAAC;EAAhB,GAA+CA,MAA/C,CAFJ,EAIE,oBAAC,6BAAD;IACE,SAAS,EAAEN,SADb;IAEE,SAAS,EAAC,4BAFZ;IAGE,SAAS,EAAC;EAHZ,GAKGS,QALH,CAJF,EAWGF,KAAK,IAAI;IAAM,SAAS,EAAC;EAAhB,GAA8CA,KAA9C,CAXZ,EAYGC,UAAU,IACT,oBAAC,cAAD;IACE,SAAS,EAAC,qCADZ;IAEE;EAFF,EAbJ,CAbF,CADF;AAmCD,CAhDM"}
+{"version":3,"file":"SubnavigationButton.js","names":["classNames","getTitleFromChildren","useAdaptivity","Tappable","Icon16Dropdown","Caption","Subhead","SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","mode","size","selected","before","after","expandable","children","sizeY"],"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasComponent, HasChildren } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getTitleFromChildren } from \"../../lib/utils\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { Icon16Dropdown } from \"@vkontakte/icons\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport \"./SubnavigationButton.css\";\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, \"size\"> {\n  mode?: \"primary\" | \"outline\" | \"tertiary\";\n  size?: \"s\" | \"m\" | \"l\";\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: \"1\" | \"2\" | \"3\";\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  \"textLevel\"\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === \"1\") {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === \"2\" ? \"1\" : \"2\"} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = \"primary\",\n  size = \"m\",\n  selected,\n  textLevel = \"1\",\n  before,\n  after,\n  expandable,\n  children,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      vkuiClass={classNames(\n        \"SubnavigationButton\",\n        `SubnavigationButton--size-${size}`,\n        `SubnavigationButton--mode-${mode}`,\n        selected && \"SubnavigationButton--selected\",\n        `SubnavigationButton--sizeY-${sizeY}`\n      )}\n      aria-label={getTitleFromChildren(children)}\n    >\n      <span vkuiClass=\"SubnavigationButton__in\">\n        {before && (\n          <span vkuiClass=\"SubnavigationButton__before\">{before}</span>\n        )}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          vkuiClass=\"SubnavigationButton__label\"\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span vkuiClass=\"SubnavigationButton__after\">{after}</span>}\n        {expandable && (\n          <Icon16Dropdown\n            vkuiClass=\"SubnavigationButton__expandableIcon\"\n            aria-hidden\n          />\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;AAEA,SAASA,UAAT;AACA,SAASC,oBAAT;AACA,SAASC,aAAT;AACA,SAAwBC,QAAxB;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,OAAT;AACA,SAASC,OAAT;AACA;;AA4BA,IAAMC,6BAA6B,GAAG,SAAhCA,6BAAgC,OAGI;EAAA,IAFxCC,SAEwC,QAFxCA,SAEwC;EAAA,IADrCC,SACqC;;EACxC,IAAID,SAAS,KAAK,GAAlB,EAAuB;IACrB,OAAO,oBAAC,OAAD,EAAaC,SAAb,CAAP;EACD;;EAED,OAAO,oBAAC,OAAD;IAAS,KAAK,EAAED,SAAS,KAAK,GAAd,GAAoB,GAApB,GAA0B;EAA1C,GAAmDC,SAAnD,EAAP;AACD,CATD;AAWA;AACA;AACA;;;AACA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,QAUH;EAAA,uBAT9BC,IAS8B;EAAA,IAT9BA,IAS8B,2BATvB,SASuB;EAAA,uBAR9BC,IAQ8B;EAAA,IAR9BA,IAQ8B,2BARvB,GAQuB;EAAA,IAP9BC,QAO8B,SAP9BA,QAO8B;EAAA,4BAN9BL,SAM8B;EAAA,IAN9BA,SAM8B,gCANlB,GAMkB;EAAA,IAL9BM,MAK8B,SAL9BA,MAK8B;EAAA,IAJ9BC,KAI8B,SAJ9BA,KAI8B;EAAA,IAH9BC,UAG8B,SAH9BA,UAG8B;EAAA,IAF9BC,QAE8B,SAF9BA,QAE8B;EAAA,IAD3BR,SAC2B;;EAC9B,qBAAkBP,aAAa,EAA/B;EAAA,IAAQgB,KAAR,kBAAQA,KAAR;;EAEA,OACE,oBAAC,QAAD,eACMT,SADN;IAEE,SAAS,EAAE,KAFb;IAGE,gBAAgB,EAAC,SAHnB;IAIE,SAAS,EAAET,UAAU,CACnB,qBADmB,sCAEUY,IAFV,uCAGUD,IAHV,GAInBE,QAAQ,IAAI,+BAJO,uCAKWK,KALX,EAJvB;IAWE,cAAYjB,oBAAoB,CAACgB,QAAD;EAXlC,IAaE;IAAM,SAAS,EAAC;EAAhB,GACGH,MAAM,IACL;IAAM,SAAS,EAAC;EAAhB,GAA+CA,MAA/C,CAFJ,EAIE,oBAAC,6BAAD;IACE,SAAS,EAAEN,SADb;IAEE,SAAS,EAAC,4BAFZ;IAGE,SAAS,EAAC;EAHZ,GAKGS,QALH,CAJF,EAWGF,KAAK,IAAI;IAAM,SAAS,EAAC;EAAhB,GAA8CA,KAA9C,CAXZ,EAYGC,UAAU,IACT,oBAAC,cAAD;IACE,SAAS,EAAC,qCADZ;IAEE;EAFF,EAbJ,CAbF,CADF;AAmCD,CAhDM"}

package/dist/cssm/components/Switch/Switch.css

@@ -1,3 +1 @@
-.vkuiSwitch{cursor:pointer;display:block;padding:calc((20px - 14px) / 2);padding:calc((var(--vkui--size_switch_pin--regular,20px) - var(--vkui--size_switch_height--regular,14px)) / 2);position:relative}.vkuiSwitch--sizeY-compact{padding:calc((18px - 12px) / 2);padding:calc((var(--vkui--size_switch_pin--compact,18px) - var(--vkui--size_switch_height--compact,12px)) / 2)}.vkuiSwitch--disabled{cursor:default}.vkuiSwitch__pseudo{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box;display:block;position:relative}.vkuiSwitch__pseudo:before{background:#f2f3f5;background:var(--vkui--color_icon_contrast_secondary,#f2f3f5);border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);box-sizing:border-box;content:"";height:20px;height:var(--vkui--size_switch_pin--regular,20px);left:calc((14px - 20px) / 2);left:calc((var(--vkui--size_switch_height--regular,14px) - var(--vkui--size_switch_pin--regular,20px)) / 2);position:absolute;top:calc((14px - 20px) / 2);top:calc((var(--vkui--size_switch_height--regular,14px) - var(--vkui--size_switch_pin--regular,20px)) / 2);width:20px;width:var(--vkui--size_switch_pin--regular,20px)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:before{height:18px;height:var(--vkui--size_switch_pin--compact,18px);left:calc((12px - 18px) / 2);left:calc((var(--vkui--size_switch_height--compact,12px) - var(--vkui--size_switch_pin--compact,18px)) / 2);top:calc((12px - 18px) / 2);top:calc((var(--vkui--size_switch_height--compact,12px) - var(--vkui--size_switch_pin--compact,18px)) / 2);width:18px;width:var(--vkui--size_switch_pin--compact,18px)}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:#2688eb;background:var(--accent,var(--vkui--color_icon_accent));-webkit-transform:translateX(calc(34px - 14px));transform:translateX(calc(34px - 14px));-webkit-transform:translateX(calc(var(--vkui--size_switch_width--regular,34px) - var(--vkui--size_switch_height--regular,14px)));transform:translateX(calc(var(--vkui--size_switch_width--regular,34px) - var(--vkui--size_switch_height--regular,14px)))}.vkuiSwitch__pseudo:after{background:rgba(0,0,0,.24);background:var(--vkui--color_icon_tertiary_alpha,rgba(0,0,0,.24));border-radius:calc(34px / 2);border-radius:calc(var(--vkui--size_switch_width--regular,34px) / 2);content:"";display:block;height:14px;height:var(--vkui--size_switch_height--regular,14px);width:34px;width:var(--vkui--size_switch_width--regular,34px)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:after{border-radius:calc(32px / 2);border-radius:calc(var(--vkui--size_switch_width--compact,32px) / 2);height:12px;height:var(--vkui--size_switch_height--compact,12px);width:32px;width:var(--vkui--size_switch_width--compact,32px)}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{background:#2688eb;background:var(--accent,var(--vkui--color_icon_accent));opacity:.48}.vkuiSwitch--sizeY-compact .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{-webkit-transform:translateX(calc(32px - 12px));transform:translateX(calc(32px - 12px));-webkit-transform:translateX(calc(var(--vkui--size_switch_width--compact,32px) - var(--vkui--size_switch_height--compact,12px)));transform:translateX(calc(var(--vkui--size_switch_width--compact,32px) - var(--vkui--size_switch_height--compact,12px)))}.vkuiSwitch__self[disabled]+.vkuiSwitch__pseudo{opacity:.4;opacity:var(--vkui--opacity_disable,.4)}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{background:#fff;background:var(--white);box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06),inset 0 0 0 .5px rgba(0,0,0,.04)}.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:#fff;background:var(--white)}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{background:rgba(0,28,61,.08);background:var(
-    --placeholder_icon_background,var(--vkui--color_track_background)
-  )}.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{opacity:1}@media (prefers-reduced-motion:no-preference){.vkuiSwitch__pseudo:after{transition:background-color .1s ease}.vkuiSwitch__pseudo:before{transition:-webkit-transform .1s ease;transition:transform .1s ease;transition:transform .1s ease,-webkit-transform .1s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{transition:background-color .2s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{transition:-webkit-transform .2s cubic-bezier(.36,-.24,.26,1.32);transition:transform .2s cubic-bezier(.36,-.24,.26,1.32);transition:transform .2s cubic-bezier(.36,-.24,.26,1.32),-webkit-transform .2s cubic-bezier(.36,-.24,.26,1.32)}}.vkuiSimpleCell__after>.vkuiSwitch{margin-left:12px}.vkuiSimpleCell>.vkuiSwitch:first-child{margin-right:12px}
+.vkuiSwitch{cursor:pointer;display:block;padding:calc((var(--vkui--size_switch_pin--regular) - var(--vkui--size_switch_height--regular)) / 2);position:relative}.vkuiSwitch--sizeY-compact{padding:calc((var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none{padding:calc((var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2)}}.vkuiSwitch--disabled{cursor:default}.vkuiSwitch__pseudo{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box;display:block;position:relative}.vkuiSwitch__pseudo:before{background:var(--vkui--color_icon_contrast_secondary);border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);box-sizing:border-box;content:"";height:var(--vkui--size_switch_pin--regular);left:calc((var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2);position:absolute;top:calc((var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2);width:var(--vkui--size_switch_pin--regular)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:before{height:var(--vkui--size_switch_pin--compact);left:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);top:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);width:var(--vkui--size_switch_pin--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none .vkuiSwitch__pseudo:before{height:var(--vkui--size_switch_pin--compact);left:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);top:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);width:var(--vkui--size_switch_pin--compact)}}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:var(--vkui--color_icon_accent);transform:translateX(calc(var(--vkui--size_switch_width--regular) - var(--vkui--size_switch_height--regular)))}.vkuiSwitch__pseudo:after{background:var(--vkui--color_icon_tertiary_alpha);border-radius:calc(var(--vkui--size_switch_width--regular) / 2);content:"";display:block;height:var(--vkui--size_switch_height--regular);width:var(--vkui--size_switch_width--regular)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:after{border-radius:calc(var(--vkui--size_switch_width--compact) / 2);height:var(--vkui--size_switch_height--compact);width:var(--vkui--size_switch_width--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none .vkuiSwitch__pseudo:after{border-radius:calc(var(--vkui--size_switch_width--compact) / 2);height:var(--vkui--size_switch_height--compact);width:var(--vkui--size_switch_width--compact)}}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{background:var(--vkui--color_icon_accent);opacity:.48}.vkuiSwitch--sizeY-compact .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{transform:translateX(calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact)))}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{transform:translateX(calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact)))}}.vkuiSwitch__self[disabled]+.vkuiSwitch__pseudo{opacity:var(--vkui--opacity_disable)}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{background:#fff;background:var(--white);box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06),inset 0 0 0 .5px rgba(0,0,0,.04)}.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:#fff;background:var(--white)}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{background:var(--vkui--color_track_background)}.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{opacity:1}@media (prefers-reduced-motion:no-preference){.vkuiSwitch__pseudo:after{transition:background-color .1s ease}.vkuiSwitch__pseudo:before{transition:transform .1s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{transition:background-color .2s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{transition:transform .2s cubic-bezier(.36,-.24,.26,1.32)}}.vkuiSimpleCell__after>.vkuiSwitch{margin-left:12px}.vkuiSimpleCell>.vkuiSwitch:first-child{margin-right:12px}

package/dist/cssm/components/Switch/Switch.js

@@ -10,6 +10,7 @@ import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
 import { useFocusVisible } from "../../hooks/useFocusVisible";
 import { FocusVisible } from "../FocusVisible/FocusVisible";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
 import "./Switch.css";
 
 /**
@@ -32,7 +33,7 @@ export var Switch = function Switch(_ref) {
       onFocus = _useFocusVisible.onFocus;
 
   return createScopedElement("label", {
-    vkuiClass: classNames(getClassName("Switch", platform), "Switch--sizeY-".concat(sizeY), restProps.disabled && "Switch--disabled", focusVisible && "Switch--focus-visible"),
+    vkuiClass: classNames(getClassName("Switch", platform), getSizeYClassName("Switch", sizeY), restProps.disabled && "Switch--disabled", focusVisible && "Switch--focus-visible"),
     className: className,
     style: style,
     ref: getRootRef,

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["getClassName","classNames","callMultiple","usePlatform","useAdaptivity","VisuallyHiddenInput","useFocusVisible","FocusVisible","Switch","style","className","getRootRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","disabled"],"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { useFocusVisible } from \"../../hooks/useFocusVisible\";\nimport { FocusVisible } from \"../FocusVisible/FocusVisible\";\nimport \"./Switch.css\";\n\nexport interface SwitchProps\n  extends VisuallyHiddenInputProps,\n    HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      vkuiClass={classNames(\n        getClassName(\"Switch\", platform),\n        `Switch--sizeY-${sizeY}`,\n        restProps.disabled && \"Switch--disabled\",\n        focusVisible && \"Switch--focus-visible\"\n      )}\n      className={className}\n      style={style}\n      ref={getRootRef}\n      role=\"presentation\"\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        vkuiClass=\"Switch__self\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span role=\"presentation\" vkuiClass=\"Switch__pseudo\" />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"mappings":";;;;AAAA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AAEA,SAASC,aAAT;AACA,SACEC,mBADF;AAIA,SAASC,eAAT;AACA,SAASC,YAAT;AACA;;AAMA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAS,OAKH;EAAA,IAJjBC,KAIiB,QAJjBA,KAIiB;EAAA,IAHjBC,SAGiB,QAHjBA,SAGiB;EAAA,IAFjBC,UAEiB,QAFjBA,UAEiB;EAAA,IADdC,SACc;;EACjB,IAAMC,QAAQ,GAAGV,WAAW,EAA5B;;EACA,qBAAkBC,aAAa,EAA/B;EAAA,IAAQU,KAAR,kBAAQA,KAAR;;EACA,uBAA0CR,eAAe,EAAzD;EAAA,IAAQS,YAAR,oBAAQA,YAAR;EAAA,IAAsBC,MAAtB,oBAAsBA,MAAtB;EAAA,IAA8BC,OAA9B,oBAA8BA,OAA9B;;EAEA,OACE;IACE,SAAS,EAAEhB,UAAU,CACnBD,YAAY,CAAC,QAAD,EAAWa,QAAX,CADO,0BAEFC,KAFE,GAGnBF,SAAS,CAACM,QAAV,IAAsB,kBAHH,EAInBH,YAAY,IAAI,uBAJG,CADvB;IAOE,SAAS,EAAEL,SAPb;IAQE,KAAK,EAAED,KART;IASE,GAAG,EAAEE,UATP;IAUE,IAAI,EAAC;EAVP,GAYE,oBAAC,mBAAD,eACMC,SADN;IAEE,IAAI,EAAC,UAFP;IAGE,SAAS,EAAC,cAHZ;IAIE,MAAM,EAAEV,YAAY,CAACc,MAAD,EAASJ,SAAS,CAACI,MAAnB,CAJtB;IAKE,OAAO,EAAEd,YAAY,CAACe,OAAD,EAAUL,SAAS,CAACK,OAApB;EALvB,GAZF,EAmBE;IAAM,IAAI,EAAC,cAAX;IAA0B,SAAS,EAAC;EAApC,EAnBF,EAoBE,oBAAC,YAAD;IAAc,IAAI,EAAC;EAAnB,EApBF,CADF;AAwBD,CAlCM"}
+{"version":3,"file":"Switch.js","names":["getClassName","classNames","callMultiple","usePlatform","useAdaptivity","VisuallyHiddenInput","useFocusVisible","FocusVisible","getSizeYClassName","Switch","style","className","getRootRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","disabled"],"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { useFocusVisible } from \"../../hooks/useFocusVisible\";\nimport { FocusVisible } from \"../FocusVisible/FocusVisible\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport \"./Switch.css\";\n\nexport interface SwitchProps\n  extends VisuallyHiddenInputProps,\n    HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      vkuiClass={classNames(\n        getClassName(\"Switch\", platform),\n        getSizeYClassName(\"Switch\", sizeY),\n        restProps.disabled && \"Switch--disabled\",\n        focusVisible && \"Switch--focus-visible\"\n      )}\n      className={className}\n      style={style}\n      ref={getRootRef}\n      role=\"presentation\"\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        vkuiClass=\"Switch__self\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span role=\"presentation\" vkuiClass=\"Switch__pseudo\" />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"mappings":";;;;AAAA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AAEA,SAASC,aAAT;AACA,SACEC,mBADF;AAIA,SAASC,eAAT;AACA,SAASC,YAAT;AACA,SAASC,iBAAT;AACA;;AAMA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAS,OAKH;EAAA,IAJjBC,KAIiB,QAJjBA,KAIiB;EAAA,IAHjBC,SAGiB,QAHjBA,SAGiB;EAAA,IAFjBC,UAEiB,QAFjBA,UAEiB;EAAA,IADdC,SACc;;EACjB,IAAMC,QAAQ,GAAGX,WAAW,EAA5B;;EACA,qBAAkBC,aAAa,EAA/B;EAAA,IAAQW,KAAR,kBAAQA,KAAR;;EACA,uBAA0CT,eAAe,EAAzD;EAAA,IAAQU,YAAR,oBAAQA,YAAR;EAAA,IAAsBC,MAAtB,oBAAsBA,MAAtB;EAAA,IAA8BC,OAA9B,oBAA8BA,OAA9B;;EAEA,OACE;IACE,SAAS,EAAEjB,UAAU,CACnBD,YAAY,CAAC,QAAD,EAAWc,QAAX,CADO,EAEnBN,iBAAiB,CAAC,QAAD,EAAWO,KAAX,CAFE,EAGnBF,SAAS,CAACM,QAAV,IAAsB,kBAHH,EAInBH,YAAY,IAAI,uBAJG,CADvB;IAOE,SAAS,EAAEL,SAPb;IAQE,KAAK,EAAED,KART;IASE,GAAG,EAAEE,UATP;IAUE,IAAI,EAAC;EAVP,GAYE,oBAAC,mBAAD,eACMC,SADN;IAEE,IAAI,EAAC,UAFP;IAGE,SAAS,EAAC,cAHZ;IAIE,MAAM,EAAEX,YAAY,CAACe,MAAD,EAASJ,SAAS,CAACI,MAAnB,CAJtB;IAKE,OAAO,EAAEf,YAAY,CAACgB,OAAD,EAAUL,SAAS,CAACK,OAApB;EALvB,GAZF,EAmBE;IAAM,IAAI,EAAC,cAAX;IAA0B,SAAS,EAAC;EAApC,EAnBF,EAoBE,oBAAC,YAAD;IAAc,IAAI,EAAC;EAAnB,EApBF,CADF;AAwBD,CAlCM"}

package/dist/cssm/components/Tabbar/Tabbar.css

@@ -1,5 +1 @@
-.vkuiTabbar{background:#fff;background:var(
-    --header_alternate_background,var(--vkui--color_background_tertiary)
-  );bottom:0;box-sizing:initial;height:48px;height:var(--tabbar_height);left:0;padding-bottom:0;padding-bottom:var(--safe-area-inset-bottom);position:fixed;width:100%;z-index:2}.vkuiTabbar__in{display:flex;justify-content:center;overflow:hidden}.vkuiTabbar--shadow{box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08))}.vkuiTabbar--ios.vkuiTabbar--shadow{box-shadow:none}.vkuiTabbar--ios.vkuiTabbar--shadow:before{background:#d7d8d9;background:var(
-    --separator_common,var(--vkui--color_separator_primary_alpha)
-  );bottom:100%;content:"";height:1px;left:0;position:absolute;-webkit-transform-origin:center bottom;transform-origin:center bottom;width:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiTabbar--ios:before{-webkit-transform:scaleY(.5);transform:scaleY(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiTabbar--ios:before{-webkit-transform:scaleY(.33);transform:scaleY(.33)}}
+.vkuiTabbar{background:var(--vkui--color_background_tertiary);bottom:0;box-sizing:initial;height:48px;height:var(--tabbar_height);left:0;padding-bottom:0;padding-bottom:var(--safe-area-inset-bottom);position:fixed;width:100%;z-index:2}.vkuiTabbar__in{display:flex;justify-content:center;overflow:hidden}.vkuiTabbar--shadow{box-shadow:var(--vkui--elevation3)}.vkuiTabbar--ios.vkuiTabbar--shadow{box-shadow:none}.vkuiTabbar--ios.vkuiTabbar--shadow:before{background:var(--vkui--color_separator_primary_alpha);bottom:100%;content:"";height:1px;left:0;position:absolute;transform-origin:center bottom;width:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiTabbar--ios:before{transform:scaleY(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiTabbar--ios:before{transform:scaleY(.33)}}

package/dist/cssm/components/Tabbar/Tabbar.d.ts

@@ -5,10 +5,6 @@ export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
      * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)
      */
     shadow?: boolean;
-    /**
-     * @deprecated будет удалено в 5.0.0. Используйте `mode`
-     */
-    itemsLayout?: "vertical" | "horizontal" | "auto";
     /**
      * Задает расположение элементов (вертикальное/горизонтальное)
      */
@@ -17,4 +13,4 @@ export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar
  */
-export declare const Tabbar: ({ children, shadow, itemsLayout, mode, ...restProps }: TabbarProps) => JSX.Element;
+export declare const Tabbar: ({ children, shadow, mode, ...restProps }: TabbarProps) => JSX.Element;

package/dist/cssm/components/Tabbar/Tabbar.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "shadow", "itemsLayout", "mode"];
+var _excluded = ["children", "shadow", "mode"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
@@ -27,13 +27,12 @@ export var Tabbar = function Tabbar(_ref) {
   var children = _ref.children,
       _ref$shadow = _ref.shadow,
       shadow = _ref$shadow === void 0 ? true : _ref$shadow,
-      itemsLayout = _ref.itemsLayout,
       mode = _ref.mode,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var platform = usePlatform();
   return createScopedElement("div", _extends({
-    vkuiClass: classNames("Tabbar", platform === Platform.IOS && "Tabbar--ios", "Tabbar--l-".concat(getItemsLayout(itemsLayout !== null && itemsLayout !== void 0 ? itemsLayout : mode, children)), shadow && "Tabbar--shadow")
+    vkuiClass: classNames("Tabbar", platform === Platform.IOS && "Tabbar--ios", "Tabbar-layout-".concat(getItemsLayout(mode, children)), shadow && "Tabbar--shadow")
   }, restProps), createScopedElement("div", {
     vkuiClass: "Tabbar__in"
   }, children));

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

@@ -1 +1 @@
-{"version":3,"file":"Tabbar.js","names":["React","classNames","usePlatform","Platform","getItemsLayout","itemsLayout","children","Children","count","Tabbar","shadow","mode","restProps","platform","IOS"],"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport \"./Tabbar.css\";\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * @deprecated будет удалено в 5.0.0. Используйте `mode`\n   */\n  itemsLayout?: \"vertical\" | \"horizontal\" | \"auto\"; // TODO v5.0.0 удалить, будет использоваться mode\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: \"vertical\" | \"horizontal\" | \"auto\";\n}\n\nconst getItemsLayout = (\n  itemsLayout: TabbarProps[\"mode\"],\n  children: TabbarProps[\"children\"]\n) => {\n  switch (itemsLayout) {\n    case \"horizontal\":\n    case \"vertical\":\n      return itemsLayout;\n    default:\n      return React.Children.count(children) > 2 ? \"vertical\" : \"horizontal\";\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({\n  children,\n  shadow = true,\n  itemsLayout,\n  mode,\n  ...restProps\n}: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      vkuiClass={classNames(\n        \"Tabbar\",\n        platform === Platform.IOS && \"Tabbar--ios\",\n        `Tabbar--l-${getItemsLayout(itemsLayout ?? mode, children)}`,\n        shadow && \"Tabbar--shadow\"\n      )}\n      {...restProps}\n    >\n      <div vkuiClass=\"Tabbar__in\">{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,QAAT;AACA;;AAiBA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CACrBC,WADqB,EAErBC,QAFqB,EAGlB;EACH,QAAQD,WAAR;IACE,KAAK,YAAL;IACA,KAAK,UAAL;MACE,OAAOA,WAAP;;IACF;MACE,OAAOL,KAAK,CAACO,QAAN,CAAeC,KAAf,CAAqBF,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;EALJ;AAOD,CAXD;AAaA;AACA;AACA;;;AACA,OAAO,IAAMG,MAAM,GAAG,SAATA,MAAS,OAMH;EAAA,IALjBH,QAKiB,QALjBA,QAKiB;EAAA,uBAJjBI,MAIiB;EAAA,IAJjBA,MAIiB,4BAJR,IAIQ;EAAA,IAHjBL,WAGiB,QAHjBA,WAGiB;EAAA,IAFjBM,IAEiB,QAFjBA,IAEiB;EAAA,IADdC,SACc;;EACjB,IAAMC,QAAQ,GAAGX,WAAW,EAA5B;EAEA,OACE;IACE,SAAS,EAAED,UAAU,CACnB,QADmB,EAEnBY,QAAQ,KAAKV,QAAQ,CAACW,GAAtB,IAA6B,aAFV,sBAGNV,cAAc,CAACC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgBM,IAAhB,EAAsBL,QAAtB,CAHR,GAInBI,MAAM,IAAI,gBAJS;EADvB,GAOME,SAPN,GASE;IAAK,SAAS,EAAC;EAAf,GAA6BN,QAA7B,CATF,CADF;AAaD,CAtBM"}
+{"version":3,"file":"Tabbar.js","names":["React","classNames","usePlatform","Platform","getItemsLayout","itemsLayout","children","Children","count","Tabbar","shadow","mode","restProps","platform","IOS"],"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport \"./Tabbar.css\";\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: \"vertical\" | \"horizontal\" | \"auto\";\n}\n\nconst getItemsLayout = (\n  itemsLayout: TabbarProps[\"mode\"],\n  children: TabbarProps[\"children\"]\n) => {\n  switch (itemsLayout) {\n    case \"horizontal\":\n    case \"vertical\":\n      return itemsLayout;\n    default:\n      return React.Children.count(children) > 2 ? \"vertical\" : \"horizontal\";\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({\n  children,\n  shadow = true,\n  mode,\n  ...restProps\n}: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      vkuiClass={classNames(\n        \"Tabbar\",\n        platform === Platform.IOS && \"Tabbar--ios\",\n        `Tabbar-layout-${getItemsLayout(mode, children)}`,\n        shadow && \"Tabbar--shadow\"\n      )}\n      {...restProps}\n    >\n      <div vkuiClass=\"Tabbar__in\">{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,QAAT;AACA;;AAaA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CACrBC,WADqB,EAErBC,QAFqB,EAGlB;EACH,QAAQD,WAAR;IACE,KAAK,YAAL;IACA,KAAK,UAAL;MACE,OAAOA,WAAP;;IACF;MACE,OAAOL,KAAK,CAACO,QAAN,CAAeC,KAAf,CAAqBF,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;EALJ;AAOD,CAXD;AAaA;AACA;AACA;;;AACA,OAAO,IAAMG,MAAM,GAAG,SAATA,MAAS,OAKH;EAAA,IAJjBH,QAIiB,QAJjBA,QAIiB;EAAA,uBAHjBI,MAGiB;EAAA,IAHjBA,MAGiB,4BAHR,IAGQ;EAAA,IAFjBC,IAEiB,QAFjBA,IAEiB;EAAA,IADdC,SACc;;EACjB,IAAMC,QAAQ,GAAGX,WAAW,EAA5B;EAEA,OACE;IACE,SAAS,EAAED,UAAU,CACnB,QADmB,EAEnBY,QAAQ,KAAKV,QAAQ,CAACW,GAAtB,IAA6B,aAFV,0BAGFV,cAAc,CAACO,IAAD,EAAOL,QAAP,CAHZ,GAInBI,MAAM,IAAI,gBAJS;EADvB,GAOME,SAPN,GASE;IAAK,SAAS,EAAC;EAAf,GAA6BN,QAA7B,CATF,CADF;AAaD,CArBM"}