@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/components/Radio/Radio.js

@@ -1,7 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "description", "style", "className", "getRootRef"];
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -11,64 +7,59 @@ import { Platform } from '../../lib/platform';
 import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
-import "./Radio.module.css";
-var sizeYClassNames = _defineProperty({
-  none: "vkuiRadio--sizeY-none"
-}, SizeType.COMPACT, "vkuiRadio--sizeY-compact");
-var RadioIcon = function RadioIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    "aria-hidden": true
-  }, props), /*#__PURE__*/React.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "11",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    fill: "none"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "7.5",
-    className: "vkuiRadio__pin",
-    fill: "currentColor"
-  }));
+import styles from './Radio.module.css';
+const sizeYClassNames = {
+    none: styles['Radio--sizeY-none'],
+    [SizeType.COMPACT]: styles['Radio--sizeY-compact']
+};
+const RadioIcon = (props)=>{
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        "aria-hidden": true,
+        ...props
+    }, /*#__PURE__*/ React.createElement("circle", {
+        cx: "12",
+        cy: "12",
+        r: "11",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        fill: "none"
+    }), /*#__PURE__*/ React.createElement("circle", {
+        cx: "12",
+        cy: "12",
+        r: "7.5",
+        className: styles['Radio__pin'],
+        fill: "currentColor"
+    }));
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Radio
- */
-export var Radio = function Radio(_ref) {
-  var children = _ref.children,
-    description = _ref.description,
-    style = _ref.style,
-    className = _ref.className,
-    getRootRef = _ref.getRootRef,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  return /*#__PURE__*/React.createElement(Tappable, {
-    Component: "label",
-    style: style,
-    className: classNames("vkuiRadio", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
-    activeEffectDelay: platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY,
-    disabled: restProps.disabled,
-    getRootRef: getRootRef
-  }, /*#__PURE__*/React.createElement(VisuallyHiddenInput, _extends({}, restProps, {
-    className: "vkuiRadio__input",
-    type: "radio"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRadio__container"
-  }, /*#__PURE__*/React.createElement(RadioIcon, {
-    className: "vkuiRadio__icon"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRadio__content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRadio__children"
-  }, children), hasReactNode(description) && /*#__PURE__*/React.createElement(Footnote, {
-    className: "vkuiRadio__description"
-  }, description))));
+ */ export const Radio = ({ children , description , style , className , getRootRef , ...restProps })=>{
+    const platform = usePlatform();
+    const { sizeY ='none'  } = useAdaptivity();
+    return /*#__PURE__*/ React.createElement(Tappable, {
+        Component: "label",
+        style: style,
+        className: classNames(styles['Radio'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
+        activeEffectDelay: platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY,
+        disabled: restProps.disabled,
+        getRootRef: getRootRef
+    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, {
+        ...restProps,
+        className: styles['Radio__input'],
+        type: "radio"
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: styles['Radio__container']
+    }, /*#__PURE__*/ React.createElement(RadioIcon, {
+        className: styles['Radio__icon']
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: styles['Radio__content']
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['Radio__children']
+    }, children), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
+        className: styles['Radio__description']
+    }, description))));
 };
+
 //# sourceMappingURL=Radio.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHiddenInput","sizeYClassNames","none","COMPACT","RadioIcon","props","Radio","children","description","style","className","getRootRef","restProps","platform","sizeY","REGULAR","IOS","disabled"],"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Radio--sizeY-none'],\n  [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(\n        styles['Radio'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput {...restProps} className={styles['Radio__input']} type=\"radio\" />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__children']}>{children}</div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,sBAAsB;AACpE,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,mBAAmB,QAAQ,4CAA4C;AAAC;AAGjF,IAAMC,eAAe;EACnBC,IAAI;AAA6B,GAChCP,QAAQ,CAACQ,OAAO,6BAClB;AAED,IAAMC,SAAS,GAAG,SAAZA,SAAS,CAAIC,KAAoC,EAAK;EAC1D,oBACE;IAAK,KAAK,EAAC,4BAA4B;IAAC,OAAO,EAAC,WAAW;IAAC;EAAW,GAAKA,KAAK,gBAC/E;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,IAAI;IAAC,MAAM,EAAC,cAAc;IAAC,WAAW,EAAC,GAAG;IAAC,IAAI,EAAC;EAAM,EAAG,eACnF;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,KAAK;IAAC,SAAS,kBAAuB;IAAC,IAAI,EAAC;EAAc,EAAG,CACnF;AAEV,CAAC;AASD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,IANhBC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,SAAS;EAEZ,IAAMC,QAAQ,GAAGnB,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlCqB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,QAAQ;IACP,SAAS,EAAC,OAAO;IACjB,KAAK,EAAEL,KAAM;IACb,SAAS,EAAElB,UAAU,cAEnBuB,KAAK,KAAKnB,QAAQ,CAACoB,OAAO,IAAId,eAAe,CAACa,KAAK,CAAC,EACpDJ,SAAS,CACT;IACF,iBAAiB,EAAEG,QAAQ,KAAKjB,QAAQ,CAACoB,GAAG,GAAG,GAAG,GAAGnB,mBAAoB;IACzE,QAAQ,EAAEe,SAAS,CAACK,QAAS;IAC7B,UAAU,EAAEN;EAAW,gBAEvB,oBAAC,mBAAmB,eAAKC,SAAS;IAAE,SAAS,oBAAyB;IAAC,IAAI,EAAC;EAAO,GAAG,eACtF;IAAK,SAAS;EAA6B,gBACzC,oBAAC,SAAS;IAAC,SAAS;EAAwB,EAAG,eAC/C;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA4B,GAAEL,QAAQ,CAAO,EAC1Df,YAAY,CAACgB,WAAW,CAAC,iBACxB,oBAAC,QAAQ;IAAC,SAAS;EAA+B,GAAEA,WAAW,CAChE,CACG,CACF,CACG;AAEf,CAAC"}
+{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Radio--sizeY-none'],\n  [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(\n        styles['Radio'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput {...restProps} className={styles['Radio__input']} type=\"radio\" />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__children']}>{children}</div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHiddenInput","styles","sizeYClassNames","none","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","Radio","children","description","style","getRootRef","restProps","platform","sizeY","Component","REGULAR","activeEffectDelay","IOS","disabled","type","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,uBAAuB;AACrE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,mBAAmB,QAAQ,6CAA6C;AACjF,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACN,SAASS,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;AACpD;AAEA,MAAMI,YAAY,CAACC,QAAyC;IAC1D,qBACE,oBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA,IAAW;QAAE,GAAGJ,KAAK;qBAC/E,oBAACK;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAKC,QAAO;QAAeC,aAAY;QAAIC,MAAK;sBAC1E,oBAACN;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAMI,WAAWjB,MAAM,CAAC,aAAa;QAAEgB,MAAK;;AAG5E;AASA;;CAEC,GACD,OAAO,MAAME,QAAQ,CAAC,EACpBC,SAAQ,EACRC,YAAW,EACXC,MAAK,EACLJ,UAAS,EACTK,WAAU,EACV,GAAGC,WACQ,GAAK;IAChB,MAAMC,WAAW/B;IACjB,MAAM,EAAEgC,OAAQ,OAAM,EAAE,GAAGjC;IAE3B,qBACE,oBAACK;QACC6B,WAAU;QACVL,OAAOA;QACPJ,WAAW3B,WACTU,MAAM,CAAC,QAAQ,EACfyB,UAAU/B,SAASiC,OAAO,IAAI1B,eAAe,CAACwB,MAAM,EACpDR;QAEFW,mBAAmBJ,aAAa7B,SAASkC,GAAG,GAAG,MAAMjC,mBAAmB;QACxEkC,UAAUP,UAAUO,QAAQ;QAC5BR,YAAYA;qBAEZ,oBAACvB;QAAqB,GAAGwB,SAAS;QAAEN,WAAWjB,MAAM,CAAC,eAAe;QAAE+B,MAAK;sBAC5E,oBAACC;QAAIf,WAAWjB,MAAM,CAAC,mBAAmB;qBACxC,oBAACI;QAAUa,WAAWjB,MAAM,CAAC,cAAc;sBAC3C,oBAACgC;QAAIf,WAAWjB,MAAM,CAAC,iBAAiB;qBACtC,oBAACgC;QAAIf,WAAWjB,MAAM,CAAC,kBAAkB;OAAGmB,WAC3C5B,aAAa6B,8BACZ,oBAACtB;QAASmB,WAAWjB,MAAM,CAAC,qBAAqB;OAAGoB;AAMhE,EAAE"}

package/dist/cssm/components/Radio/Radio.module.css

@@ -1 +1 @@
-.vkuiRadio{display:block;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);padding:0 16px;padding:0 var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem .vkuiRadio{box-sizing:initial;margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));width:100%}.vkuiRadio__container{align-items:center;display:flex;justify-content:flex-start}.vkuiRadio__input:disabled~.vkuiRadio__container{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiRadio__icon{color:#b8c1cc;color:var(--vkui--color_icon_tertiary);flex-shrink:0;height:22px;margin-right:14px;transition:color .15s cubic-bezier(.4,0,.2,1);transition:color .15s var(--vkui--animation_easing_platform);width:22px}.vkuiRadio__input:checked~.vkuiRadio__container .vkuiRadio__icon{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiRadio__icon .vkuiRadio__pin{transform:scale(0);transform-origin:12px 12px;transition:transform .15s cubic-bezier(.4,0,.2,1);transition:transform .15s var(--vkui--animation_easing_platform)}.vkuiRadio__input:checked~.vkuiRadio__container .vkuiRadio__icon .vkuiRadio__pin{transform:none}.vkuiRadio__content{color:#000;color:var(--vkui--color_text_primary);display:block;flex-grow:1;max-width:100%}.vkuiRadio__description{color:#818c99;color:var(--vkui--color_text_secondary);display:block;margin-bottom:12px;margin-top:2px}.vkuiRadio__children{margin-top:12px}.vkuiRadio__children:last-child{margin-bottom:12px}.vkuiRadio--sizeY-compact .vkuiRadio__children{margin-top:8px}.vkuiRadio--sizeY-compact .vkuiRadio__children:last-child{margin-bottom:8px}.vkuiRadio--sizeY-compact .vkuiRadio__description{margin-bottom:7px}.vkuiRadio--sizeY-compact .vkuiRadio__icon{height:18px;width:18px}.vkuiRadio--sizeY-compact .vkuiRadio__icon:after{height:12px;width:12px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRadio--sizeY-none .vkuiRadio__children{margin-top:8px}.vkuiRadio--sizeY-none .vkuiRadio__children:last-child{margin-bottom:8px}.vkuiRadio--sizeY-none .vkuiRadio__description{margin-bottom:7px}.vkuiRadio--sizeY-none .vkuiRadio__icon{height:18px;width:18px}.vkuiRadio--sizeY-none .vkuiRadio__icon:after{height:12px;width:12px}}.vkuiRadioGroup .vkuiRadio{box-sizing:border-box;flex:1;margin:0}
+.vkuiRadio{display:block;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);padding:0 16px;padding:0 var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem .vkuiRadio{box-sizing:initial;margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));width:100%}.vkuiRadio__container{align-items:center;display:flex;justify-content:flex-start}.vkuiRadio__input:disabled~.vkuiRadio__container{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiRadio__icon{color:#b8c1cc;color:var(--vkui--color_icon_tertiary);flex-shrink:0;height:22px;margin-right:14px;transition:color .15s cubic-bezier(.4,0,.2,1);transition:color .15s var(--vkui--animation_easing_platform);width:22px}.vkuiRadio__input:checked~.vkuiRadio__container .vkuiRadio__icon{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiRadio__icon .vkuiRadio__pin{transform:scale(0);transform-origin:12px 12px;transition:transform .15s cubic-bezier(.4,0,.2,1);transition:transform .15s var(--vkui--animation_easing_platform)}.vkuiRadio__input:checked~.vkuiRadio__container .vkuiRadio__icon .vkuiRadio__pin{transform:none}.vkuiRadio__content{color:#000;color:var(--vkui--color_text_primary);display:block;flex-grow:1;max-width:100%}.vkuiRadio__description{color:#818c99;color:var(--vkui--color_text_secondary);display:block;margin-bottom:12px;margin-top:2px}.vkuiRadio__children{margin-top:12px}.vkuiRadio__children:last-child{margin-bottom:12px}.vkuiRadio--sizeY-compact .vkuiRadio__children{margin-top:8px}.vkuiRadio--sizeY-compact .vkuiRadio__children:last-child{margin-bottom:8px}.vkuiRadio--sizeY-compact .vkuiRadio__description{margin-bottom:7px}.vkuiRadio--sizeY-compact .vkuiRadio__icon{height:18px;width:18px}.vkuiRadio--sizeY-compact .vkuiRadio__icon:after{height:12px;width:12px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRadio--sizeY-none .vkuiRadio__children{margin-top:8px}.vkuiRadio--sizeY-none .vkuiRadio__children:last-child{margin-bottom:8px}.vkuiRadio--sizeY-none .vkuiRadio__description{margin-bottom:7px}.vkuiRadio--sizeY-none .vkuiRadio__icon{height:18px;width:18px}.vkuiRadio--sizeY-none .vkuiRadio__icon:after{height:12px;width:12px}}.vkuiInternalRadioGroup .vkuiRadio{box-sizing:border-box;flex:1;margin:0}

package/dist/cssm/components/RadioGroup/RadioGroup.js

@@ -1,24 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["mode", "children", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import "./RadioGroup.module.css";
+import styles from './RadioGroup.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup
- */
-export var RadioGroup = function RadioGroup(_ref) {
-  var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'vertical' : _ref$mode,
-    children = _ref.children,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames("vkuiRadioGroup", styles["RadioGroup--mode-".concat(mode)], className)
-  }, restProps), children);
-};
-var styles = {
-  "RadioGroup--mode-horizontal": "vkuiRadioGroup--mode-horizontal",
-  "RadioGroup--mode-vertical": "vkuiRadioGroup--mode-vertical"
-};
+ */ export const RadioGroup = ({ mode ='vertical' , children , className , ...restProps })=>/*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['RadioGroup'], 'vkuiInternalRadioGroup', mode === 'horizontal' && styles['RadioGroup--mode-horizontal'], className),
+        ...restProps
+    }, children);
+
 //# sourceMappingURL=RadioGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["React","classNames","RadioGroup","mode","children","className","restProps","styles"],"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n  mode = 'vertical',\n  children,\n  className,\n  ...restProps\n}: RadioGroupProps) => (\n  <div\n    className={classNames(styles['RadioGroup'], styles[`RadioGroup--mode-${mode}`], className)}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAO7C;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU;EAAA,qBACrBC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ;IACE,SAAS,EAAEL,UAAU,mBAAuBM,MAAM,4BAAqBJ,IAAI,EAAG,EAAEE,SAAS;EAAE,GACvFC,SAAS,GAEZF,QAAQ,CACL;AAAA,CACP;AAAC;EAAA;EAAA;AAAA"}
+{"version":3,"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n  mode = 'vertical',\n  children,\n  className,\n  ...restProps\n}: RadioGroupProps) => (\n  <div\n    className={classNames(\n      styles['RadioGroup'],\n      'vkuiInternalRadioGroup',\n      mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n      className,\n    )}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n"],"names":["React","classNames","styles","RadioGroup","mode","children","className","restProps","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,0BAA0B;AAM7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,MAAO,WAAU,EACjBC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACa,iBAChB,oBAACC;QACCF,WAAWL,WACTC,MAAM,CAAC,aAAa,EACpB,0BACAE,SAAS,gBAAgBF,MAAM,CAAC,8BAA8B,EAC9DI;QAED,GAAGC,SAAS;OAEZF,UAEH"}

package/dist/cssm/components/RadioGroup/RadioGroup.module.css

@@ -1 +1 @@
-.vkuiRadioGroup--mode-horizontal{display:flex}.vkuiFormItem .vkuiRadioGroup{box-sizing:initial;margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}
+.vkuiRadioGroup--mode-horizontal{display:flex}.vkuiInternalFormItem .vkuiRadioGroup{box-sizing:initial;margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { UniversalSliderProps } from './UniversalSlider';
-export declare type Value = [number, number];
-export declare type RangeSliderProps = UniversalSliderProps<Value>;
+export type Value = [number, number];
+export type RangeSliderProps = UniversalSliderProps<Value>;
 /**
  * @see https://vkcom.github.io/VKUI/#/RangeSlider
  */

package/dist/cssm/components/RangeSlider/RangeSlider.js

@@ -1,49 +1,44 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onChange", "min", "max", "defaultValue", "step"];
 import * as React from 'react';
 import { clamp } from '../../helpers/math';
 import { UniversalSlider } from './UniversalSlider';
 /**
  * @see https://vkcom.github.io/VKUI/#/RangeSlider
- */
-export var RangeSlider = function RangeSlider(_ref) {
-  var onChange = _ref.onChange,
-    _ref$min = _ref.min,
-    min = _ref$min === void 0 ? 0 : _ref$min,
-    _ref$max = _ref.max,
-    max = _ref$max === void 0 ? 100 : _ref$max,
-    _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? [min, max] : _ref$defaultValue,
-    _ref$step = _ref.step,
-    step = _ref$step === void 0 ? 0 : _ref$step,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var isControlled = props.value !== undefined;
-  var _React$useState = React.useState(defaultValue),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    localValue = _React$useState2[0],
-    setValue = _React$useState2[1];
-  var _ref2 = props.value || localValue,
-    _ref3 = _slicedToArray(_ref2, 2),
-    start = _ref3[0],
-    end = _ref3[1];
-  var value = React.useMemo(function () {
-    return [clamp(start, min, max), clamp(end, min, max)];
-  }, [end, max, min, start]);
-  var handleChange = React.useCallback(function (nextValue, event) {
-    if (props.disabled || value[0] === nextValue[0] && value[1] === nextValue[1]) {
-      return;
-    }
-    !isControlled && setValue(nextValue);
-    onChange && onChange(nextValue, event);
-  }, [props.disabled, value, isControlled, onChange]);
-  return /*#__PURE__*/React.createElement(UniversalSlider, _extends({}, props, {
-    value: value,
-    onChange: handleChange,
-    min: min,
-    max: max,
-    step: step
-  }));
+ */ export const RangeSlider = ({ onChange , min =0 , max =100 , defaultValue =[
+    min,
+    max
+] , step =0 , ...props })=>{
+    const isControlled = props.value !== undefined;
+    const [localValue, setValue] = React.useState(defaultValue);
+    const [start, end] = props.value || localValue;
+    const value = React.useMemo(()=>[
+            clamp(start, min, max),
+            clamp(end, min, max)
+        ], [
+        end,
+        max,
+        min,
+        start
+    ]);
+    const handleChange = React.useCallback((nextValue, event)=>{
+        if (props.disabled || value[0] === nextValue[0] && value[1] === nextValue[1]) {
+            return;
+        }
+        !isControlled && setValue(nextValue);
+        onChange && onChange(nextValue, event);
+    }, [
+        props.disabled,
+        value,
+        isControlled,
+        onChange
+    ]);
+    return /*#__PURE__*/ React.createElement(UniversalSlider, {
+        ...props,
+        value: value,
+        onChange: handleChange,
+        min: min,
+        max: max,
+        step: step
+    });
 };
+
 //# sourceMappingURL=RangeSlider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","names":["React","clamp","UniversalSlider","RangeSlider","onChange","min","max","defaultValue","step","props","isControlled","value","undefined","useState","localValue","setValue","start","end","useMemo","handleChange","useCallback","nextValue","event","disabled"],"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { TouchEvent } from '../Touch/Touch';\nimport { UniversalSlider, UniversalSliderProps } from './UniversalSlider';\n\nexport type Value = [number, number];\nexport type RangeSliderProps = UniversalSliderProps<Value>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RangeSlider\n */\nexport const RangeSlider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = [min, max],\n  step = 0,\n  ...props\n}: RangeSliderProps) => {\n  const isControlled = props.value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const [start, end] = props.value || localValue;\n  const value = React.useMemo(\n    () => [clamp(start, min, max), clamp(end, min, max)] as Value,\n    [end, max, min, start],\n  );\n\n  const handleChange: RangeSliderProps['onChange'] = React.useCallback(\n    (nextValue: Value, event: TouchEvent) => {\n      if (props.disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n        return;\n      }\n      !isControlled && setValue(nextValue);\n      onChange && onChange(nextValue, event);\n    },\n    [props.disabled, value, isControlled, onChange],\n  );\n\n  return (\n    <UniversalSlider\n      {...props}\n      value={value}\n      onChange={handleChange}\n      min={min}\n      max={max}\n      step={step}\n    />\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,SAASC,eAAe,QAA8B,mBAAmB;AAKzE;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,yBACTC,YAAY;IAAZA,YAAY,kCAAG,CAACF,GAAG,EAAEC,GAAG,CAAC;IAAA,iBACzBE,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACLC,KAAK;EAER,IAAMC,YAAY,GAAGD,KAAK,CAACE,KAAK,KAAKC,SAAS;EAE9C,sBAA+BZ,KAAK,CAACa,QAAQ,CAACN,YAAY,CAAC;IAAA;IAApDO,UAAU;IAAEC,QAAQ;EAC3B,YAAqBN,KAAK,CAACE,KAAK,IAAIG,UAAU;IAAA;IAAvCE,KAAK;IAAEC,GAAG;EACjB,IAAMN,KAAK,GAAGX,KAAK,CAACkB,OAAO,CACzB;IAAA,OAAM,CAACjB,KAAK,CAACe,KAAK,EAAEX,GAAG,EAAEC,GAAG,CAAC,EAAEL,KAAK,CAACgB,GAAG,EAAEZ,GAAG,EAAEC,GAAG,CAAC,CAAC;EAAA,CAAS,EAC7D,CAACW,GAAG,EAAEX,GAAG,EAAED,GAAG,EAAEW,KAAK,CAAC,CACvB;EAED,IAAMG,YAA0C,GAAGnB,KAAK,CAACoB,WAAW,CAClE,UAACC,SAAgB,EAAEC,KAAiB,EAAK;IACvC,IAAIb,KAAK,CAACc,QAAQ,IAAKZ,KAAK,CAAC,CAAC,CAAC,KAAKU,SAAS,CAAC,CAAC,CAAC,IAAIV,KAAK,CAAC,CAAC,CAAC,KAAKU,SAAS,CAAC,CAAC,CAAE,EAAE;MAC9E;IACF;IACA,CAACX,YAAY,IAAIK,QAAQ,CAACM,SAAS,CAAC;IACpCjB,QAAQ,IAAIA,QAAQ,CAACiB,SAAS,EAAEC,KAAK,CAAC;EACxC,CAAC,EACD,CAACb,KAAK,CAACc,QAAQ,EAAEZ,KAAK,EAAED,YAAY,EAAEN,QAAQ,CAAC,CAChD;EAED,oBACE,oBAAC,eAAe,eACVK,KAAK;IACT,KAAK,EAAEE,KAAM;IACb,QAAQ,EAAEQ,YAAa;IACvB,GAAG,EAAEd,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,IAAI,EAAEE;EAAK,GACX;AAEN,CAAC"}
+{"version":3,"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { TouchEvent } from '../Touch/Touch';\nimport { UniversalSlider, UniversalSliderProps } from './UniversalSlider';\n\nexport type Value = [number, number];\nexport type RangeSliderProps = UniversalSliderProps<Value>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RangeSlider\n */\nexport const RangeSlider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = [min, max],\n  step = 0,\n  ...props\n}: RangeSliderProps) => {\n  const isControlled = props.value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const [start, end] = props.value || localValue;\n  const value = React.useMemo(\n    () => [clamp(start, min, max), clamp(end, min, max)] as Value,\n    [end, max, min, start],\n  );\n\n  const handleChange: RangeSliderProps['onChange'] = React.useCallback(\n    (nextValue: Value, event: TouchEvent) => {\n      if (props.disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n        return;\n      }\n      !isControlled && setValue(nextValue);\n      onChange && onChange(nextValue, event);\n    },\n    [props.disabled, value, isControlled, onChange],\n  );\n\n  return (\n    <UniversalSlider\n      {...props}\n      value={value}\n      onChange={handleChange}\n      min={min}\n      max={max}\n      step={step}\n    />\n  );\n};\n"],"names":["React","clamp","UniversalSlider","RangeSlider","onChange","min","max","defaultValue","step","props","isControlled","value","undefined","localValue","setValue","useState","start","end","useMemo","handleChange","useCallback","nextValue","event","disabled"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAE3C,SAASC,eAAe,QAA8B,oBAAoB;AAK1E;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,KAAM,EAAC,EACPC,KAAM,IAAG,EACTC,cAAe;IAACF;IAAKC;CAAI,CAAA,EACzBE,MAAO,EAAC,EACR,GAAGC,OACc,GAAK;IACtB,MAAMC,eAAeD,MAAME,KAAK,KAAKC;IAErC,MAAM,CAACC,YAAYC,SAAS,GAAGd,MAAMe,QAAQ,CAACR;IAC9C,MAAM,CAACS,OAAOC,IAAI,GAAGR,MAAME,KAAK,IAAIE;IACpC,MAAMF,QAAQX,MAAMkB,OAAO,CACzB,IAAM;YAACjB,MAAMe,OAAOX,KAAKC;YAAML,MAAMgB,KAAKZ,KAAKC;SAAK,EACpD;QAACW;QAAKX;QAAKD;QAAKW;KAAM;IAGxB,MAAMG,eAA6CnB,MAAMoB,WAAW,CAClE,CAACC,WAAkBC,QAAsB;QACvC,IAAIb,MAAMc,QAAQ,IAAKZ,KAAK,CAAC,EAAE,KAAKU,SAAS,CAAC,EAAE,IAAIV,KAAK,CAAC,EAAE,KAAKU,SAAS,CAAC,EAAE,EAAG;YAC9E;QACF,CAAC;QACD,CAACX,gBAAgBI,SAASO;QAC1BjB,YAAYA,SAASiB,WAAWC;IAClC,GACA;QAACb,MAAMc,QAAQ;QAAEZ;QAAOD;QAAcN;KAAS;IAGjD,qBACE,oBAACF;QACE,GAAGO,KAAK;QACTE,OAAOA;QACPP,UAAUe;QACVd,KAAKA;QACLC,KAAKA;QACLE,MAAMA;;AAGZ,EAAE"}

package/dist/cssm/components/RangeSlider/UniversalSlider.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { HasRootRef } from '../../types';
 import { TouchEvent } from '../Touch/Touch';
-export declare type UniversalValue = [number | null, number];
+export type UniversalValue = [number | null, number];
 export interface UniversalSliderProps<Value> extends HasRootRef<HTMLDivElement>, Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {
     min?: number;
     max?: number;

package/dist/cssm/components/RangeSlider/UniversalSlider.js

@@ -1,8 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["min", "max", "step", "value", "defaultValue", "onChange", "getRootRef", "disabled", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { rescale } from '../../helpers/math';
@@ -10,125 +5,132 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { SizeType } from '../../lib/adaptivity';
 import { Touch } from '../Touch/Touch';
-import "../Slider/Slider.module.css";
-var sizeYClassNames = _defineProperty({
-  none: "vkuiSlider--sizeY-none"
-}, SizeType.COMPACT, "vkuiSlider--sizeY-compact");
-export var UniversalSlider = function UniversalSlider(_ref) {
-  var _ref$min = _ref.min,
-    min = _ref$min === void 0 ? 0 : _ref$min,
-    _ref$max = _ref.max,
-    max = _ref$max === void 0 ? 100 : _ref$max,
-    step = _ref.step,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? [0, 0] : _ref$value,
-    defaultValue = _ref.defaultValue,
-    onChange = _ref.onChange,
-    getRootRef = _ref.getRootRef,
-    disabled = _ref.disabled,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var _value = _slicedToArray(value, 2),
-    start = _value[0],
-    end = _value[1];
-  var isRange = start != null;
-  var gesture = React.useRef({
-    dragging: false,
-    startX: 0,
-    containerWidth: 0
-  }).current;
-  var container = useExternRef(getRootRef);
-  var thumbStart = React.useRef(null);
-  var thumbEnd = React.useRef(null);
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var offsetToValue = function offsetToValue(absolute) {
-    return rescale(absolute, [0, gesture.containerWidth], [min, max], {
-      step: step
-    });
-  };
-  var updateRange = function updateRange(nextValue) {
-    if (start == null) {
-      return [null, nextValue];
-    }
-    var dragging = gesture.dragging;
-    if (dragging === 'start') {
-      if (nextValue > end) {
-        // "перехватиться", если перетянули за конец
-        gesture.dragging = 'end';
-        return [end, nextValue];
-      }
-      return [nextValue, end];
-    }
-    if (dragging === 'end') {
-      if (nextValue < start) {
-        // "перехватиться", если перетянули за начало
-        gesture.dragging = 'start';
-        return [nextValue, start];
-      }
-      return [start, nextValue];
-    }
-    return value;
-  };
-  var snapDirection = function snapDirection(pos, target) {
-    if (target === thumbStart.current) {
-      return 'start';
-    }
-    if (target === thumbEnd.current) {
-      return 'end';
-    }
-    return Math.abs((start !== null && start !== void 0 ? start : 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';
-  };
-  var onStart = function onStart(e) {
-    var _container$current, _boundingRect$width, _boundingRect$left;
-    var boundingRect = (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.getBoundingClientRect();
-    gesture.containerWidth = (_boundingRect$width = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.width) !== null && _boundingRect$width !== void 0 ? _boundingRect$width : 0;
-    var absolutePosition = e.startX - ((_boundingRect$left = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.left) !== null && _boundingRect$left !== void 0 ? _boundingRect$left : 0);
-    var pos = offsetToValue(absolutePosition);
-    gesture.dragging = snapDirection(pos, e.originalEvent.target);
-    gesture.startX = absolutePosition;
-    onChange === null || onChange === void 0 ? void 0 : onChange(updateRange(pos), e);
-    e.originalEvent.stopPropagation();
-  };
-  var onMove = function onMove(e) {
-    onChange === null || onChange === void 0 ? void 0 : onChange(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);
-    e.originalEvent.stopPropagation();
-    e.originalEvent.preventDefault();
-  };
-  var onEnd = function onEnd(e) {
-    gesture.dragging = false;
-    e.originalEvent.stopPropagation();
-  };
-  var toPercent = function toPercent(v) {
-    return (v - min) / (max - min) * 100;
-  };
-  var draggerStyle = isRange ? {
-    width: "".concat(toPercent(end) - toPercent(start !== null && start !== void 0 ? start : 0), "%"),
-    left: "".concat(toPercent(start !== null && start !== void 0 ? start : 0), "%")
-  } : {
-    width: "".concat(toPercent(end), "%")
-  };
-  return /*#__PURE__*/React.createElement(Touch, _extends({
-    "data-value": isRange ? value.join(',') : value
-  }, restProps, disabled ? {} : {
-    onStart: onStart,
-    onMove: onMove,
-    onEnd: onEnd
-  }, {
-    className: classNames("vkuiSlider", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], disabled && "vkuiSlider--disabled", className)
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: container,
-    className: "vkuiSlider__in"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSlider__dragger",
-    style: draggerStyle
-  }, isRange && /*#__PURE__*/React.createElement("span", {
-    className: classNames("vkuiSlider__thumb", "vkuiSlider__thumb--start"),
-    ref: thumbStart
-  }), /*#__PURE__*/React.createElement("span", {
-    className: classNames("vkuiSlider__thumb", "vkuiSlider__thumb--end"),
-    ref: thumbEnd
-  }))));
+import styles from '../Slider/Slider.module.css';
+const sizeYClassNames = {
+    none: styles['Slider--sizeY-none'],
+    [SizeType.COMPACT]: styles['Slider--sizeY-compact']
 };
+export const UniversalSlider = ({ min =0 , max =100 , step , value =[
+    0,
+    0
+] , defaultValue , onChange , getRootRef , disabled , className , ...restProps })=>{
+    const [start, end] = value;
+    const isRange = start != null;
+    const gesture = React.useRef({
+        dragging: false,
+        startX: 0,
+        containerWidth: 0
+    }).current;
+    const container = useExternRef(getRootRef);
+    const thumbStart = React.useRef(null);
+    const thumbEnd = React.useRef(null);
+    const { sizeY ='none'  } = useAdaptivity();
+    const offsetToValue = (absolute)=>{
+        return rescale(absolute, [
+            0,
+            gesture.containerWidth
+        ], [
+            min,
+            max
+        ], {
+            step
+        });
+    };
+    const updateRange = (nextValue)=>{
+        if (start == null) {
+            return [
+                null,
+                nextValue
+            ];
+        }
+        const { dragging  } = gesture;
+        if (dragging === 'start') {
+            if (nextValue > end) {
+                // "перехватиться", если перетянули за конец
+                gesture.dragging = 'end';
+                return [
+                    end,
+                    nextValue
+                ];
+            }
+            return [
+                nextValue,
+                end
+            ];
+        }
+        if (dragging === 'end') {
+            if (nextValue < start) {
+                // "перехватиться", если перетянули за начало
+                gesture.dragging = 'start';
+                return [
+                    nextValue,
+                    start
+                ];
+            }
+            return [
+                start,
+                nextValue
+            ];
+        }
+        return value;
+    };
+    const snapDirection = (pos, target)=>{
+        if (target === thumbStart.current) {
+            return 'start';
+        }
+        if (target === thumbEnd.current) {
+            return 'end';
+        }
+        return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';
+    };
+    const onStart = (e)=>{
+        const boundingRect = container.current?.getBoundingClientRect();
+        gesture.containerWidth = boundingRect?.width ?? 0;
+        const absolutePosition = e.startX - (boundingRect?.left ?? 0);
+        const pos = offsetToValue(absolutePosition);
+        gesture.dragging = snapDirection(pos, e.originalEvent.target);
+        gesture.startX = absolutePosition;
+        onChange?.(updateRange(pos), e);
+        e.originalEvent.stopPropagation();
+    };
+    const onMove = (e)=>{
+        onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);
+        e.originalEvent.stopPropagation();
+        e.originalEvent.preventDefault();
+    };
+    const onEnd = (e)=>{
+        gesture.dragging = false;
+        e.originalEvent.stopPropagation();
+    };
+    const toPercent = (v)=>(v - min) / (max - min) * 100;
+    const draggerStyle = isRange ? {
+        width: `${toPercent(end) - toPercent(start ?? 0)}%`,
+        left: `${toPercent(start ?? 0)}%`
+    } : {
+        width: `${toPercent(end)}%`
+    };
+    return /*#__PURE__*/ React.createElement(Touch, {
+        "data-value": isRange ? value.join(',') : value,
+        ...restProps,
+        ...disabled ? {} : {
+            onStart,
+            onMove,
+            onEnd
+        },
+        className: classNames(styles['Slider'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], disabled && styles['Slider--disabled'], className)
+    }, /*#__PURE__*/ React.createElement("div", {
+        ref: container,
+        className: styles['Slider__in']
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['Slider__dragger'],
+        style: draggerStyle
+    }, isRange && /*#__PURE__*/ React.createElement("span", {
+        className: classNames(styles['Slider__thumb'], styles['Slider__thumb--start']),
+        ref: thumbStart
+    }), /*#__PURE__*/ React.createElement("span", {
+        className: classNames(styles['Slider__thumb'], styles['Slider__thumb--end']),
+        ref: thumbEnd
+    }))));
+};
+
 //# sourceMappingURL=UniversalSlider.js.map