@alfalab/core-components 36.3.0 → 36.4.0

package/radio-group/index.css

@@ -25,68 +25,68 @@
     --radio-group-hint-color: var(--color-light-text-secondary);
     --radio-group-label-color: var(--color-light-text-primary);
 }
-.radio-group__component_11v6l {
+.radio-group__component_t7tew {
     display: flex;
     flex-direction: column;
 }
-.radio-group__error_11v6l {
+.radio-group__error_t7tew {
     padding-left: var(--gap-xs);
     border-left: 1px solid var(--radio-group-error-color);
 }
-.radio-group__radioList_11v6l {
+.radio-group__radioList_t7tew {
     display: flex;
 }
-.radio-group__vertical_11v6l .radio-group__radioList_11v6l {
+.radio-group__vertical_t7tew .radio-group__radioList_t7tew {
     flex-direction: column;
     align-items: flex-start;
 }
-.radio-group__vertical_11v6l .radio-group__radio_11v6l {
+.radio-group__vertical_t7tew .radio-group__radio_t7tew {
     margin-bottom: var(--gap-m)
 }
-.radio-group__vertical_11v6l .radio-group__radio_11v6l:last-child {
+.radio-group__vertical_t7tew .radio-group__radio_t7tew:last-child {
         margin-bottom: 0;
     }
-.radio-group__horizontal_11v6l .radio-group__radioList_11v6l {
+.radio-group__horizontal_t7tew .radio-group__radioList_t7tew {
     flex-wrap: wrap;
     margin-right: var(--gap-xl-neg);
     margin-bottom: var(--gap-xs-neg);
 }
-.radio-group__tag_11v6l.radio-group__horizontal_11v6l .radio-group__radioList_11v6l {
+.radio-group__tag_t7tew.radio-group__horizontal_t7tew .radio-group__radioList_t7tew {
     margin-right: var(--gap-xs-neg);
 }
-.radio-group__horizontal_11v6l .radio-group__radio_11v6l {
+.radio-group__horizontal_t7tew .radio-group__radio_t7tew {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
 }
-.radio-group__horizontal_11v6l .radio-group__tagLabel_11v6l {
+.radio-group__horizontal_t7tew .radio-group__tagLabel_t7tew {
     margin-right: var(--gap-xs);
 }
-.radio-group__label_11v6l {
+.radio-group__label_t7tew {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-bottom: var(--gap-s);
     color: var(--radio-group-label-color);
 }
-.radio-group__sub_11v6l {
+.radio-group__sub_t7tew {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
 }
-.radio-group__errorMessage_11v6l {
+.radio-group__errorMessage_t7tew {
     color: var(--radio-group-error-color);
 }
-.radio-group__hint_11v6l {
+.radio-group__hint_t7tew {
     color: var(--radio-group-hint-color);
 }
-.radio-group__hiddenInput_11v6l {
+.radio-group__hiddenInput_t7tew {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0;
 }
-.radio-group__tagLabel_11v6l {
+.radio-group__tagLabel_t7tew {
     position: relative;
 }

package/radio-group/index.js

@@ -1,5 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var Component = require('./Component.js');
 require('react');
 require('classnames');

package/radio-group/modern/Component.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"radio-group__component_11v6l","error":"radio-group__error_11v6l","radioList":"radio-group__radioList_11v6l","vertical":"radio-group__vertical_11v6l","radio":"radio-group__radio_11v6l","horizontal":"radio-group__horizontal_11v6l","tag":"radio-group__tag_11v6l","tagLabel":"radio-group__tagLabel_11v6l","label":"radio-group__label_11v6l","sub":"radio-group__sub_11v6l","errorMessage":"radio-group__errorMessage_11v6l","hint":"radio-group__hint_11v6l","hiddenInput":"radio-group__hiddenInput_11v6l"};
+const styles = {"component":"radio-group__component_t7tew","error":"radio-group__error_t7tew","radioList":"radio-group__radioList_t7tew","vertical":"radio-group__vertical_t7tew","radio":"radio-group__radio_t7tew","horizontal":"radio-group__horizontal_t7tew","tag":"radio-group__tag_t7tew","tagLabel":"radio-group__tagLabel_t7tew","label":"radio-group__label_t7tew","sub":"radio-group__sub_t7tew","errorMessage":"radio-group__errorMessage_t7tew","hint":"radio-group__hint_t7tew","hiddenInput":"radio-group__hiddenInput_t7tew"};
 require('./index.css');
 
 const RadioGroup = forwardRef(({ children, className, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, }, ref) => {

package/radio-group/modern/index.css

@@ -25,68 +25,68 @@
     --radio-group-hint-color: var(--color-light-text-secondary);
     --radio-group-label-color: var(--color-light-text-primary);
 }
-.radio-group__component_11v6l {
+.radio-group__component_t7tew {
     display: flex;
     flex-direction: column;
 }
-.radio-group__error_11v6l {
+.radio-group__error_t7tew {
     padding-left: var(--gap-xs);
     border-left: 1px solid var(--radio-group-error-color);
 }
-.radio-group__radioList_11v6l {
+.radio-group__radioList_t7tew {
     display: flex;
 }
-.radio-group__vertical_11v6l .radio-group__radioList_11v6l {
+.radio-group__vertical_t7tew .radio-group__radioList_t7tew {
     flex-direction: column;
     align-items: flex-start;
 }
-.radio-group__vertical_11v6l .radio-group__radio_11v6l {
+.radio-group__vertical_t7tew .radio-group__radio_t7tew {
     margin-bottom: var(--gap-m)
 }
-.radio-group__vertical_11v6l .radio-group__radio_11v6l:last-child {
+.radio-group__vertical_t7tew .radio-group__radio_t7tew:last-child {
         margin-bottom: 0;
     }
-.radio-group__horizontal_11v6l .radio-group__radioList_11v6l {
+.radio-group__horizontal_t7tew .radio-group__radioList_t7tew {
     flex-wrap: wrap;
     margin-right: var(--gap-xl-neg);
     margin-bottom: var(--gap-xs-neg);
 }
-.radio-group__tag_11v6l.radio-group__horizontal_11v6l .radio-group__radioList_11v6l {
+.radio-group__tag_t7tew.radio-group__horizontal_t7tew .radio-group__radioList_t7tew {
     margin-right: var(--gap-xs-neg);
 }
-.radio-group__horizontal_11v6l .radio-group__radio_11v6l {
+.radio-group__horizontal_t7tew .radio-group__radio_t7tew {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
 }
-.radio-group__horizontal_11v6l .radio-group__tagLabel_11v6l {
+.radio-group__horizontal_t7tew .radio-group__tagLabel_t7tew {
     margin-right: var(--gap-xs);
 }
-.radio-group__label_11v6l {
+.radio-group__label_t7tew {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-bottom: var(--gap-s);
     color: var(--radio-group-label-color);
 }
-.radio-group__sub_11v6l {
+.radio-group__sub_t7tew {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
 }
-.radio-group__errorMessage_11v6l {
+.radio-group__errorMessage_t7tew {
     color: var(--radio-group-error-color);
 }
-.radio-group__hint_11v6l {
+.radio-group__hint_t7tew {
     color: var(--radio-group-hint-color);
 }
-.radio-group__hiddenInput_11v6l {
+.radio-group__hiddenInput_t7tew {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0;
 }
-.radio-group__tagLabel_11v6l {
+.radio-group__tagLabel_t7tew {
     position: relative;
 }

package/radio-group/modern/index.js

@@ -1,3 +1,3 @@
+export { RadioGroup } from './Component.js';
 import 'react';
 import 'classnames';
-export { RadioGroup } from './Component.js';

package/scrollbar/Component.js

@@ -1,5 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
@@ -9,16 +7,6 @@ var memoize = require('lodash.memoize');
 var resizeObserver = require('@juggle/resize-observer');
 var canUseDOM = require('can-use-dom');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
-var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
-var canUseDOM__default = /*#__PURE__*/_interopDefaultLegacy(canUseDOM);
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -87,7 +75,7 @@ function getElementDocument(element) {
 
 var cachedScrollbarWidth = null;
 var cachedDevicePixelRatio = null;
-if (canUseDOM__default['default']) {
+if (canUseDOM) {
     window.addEventListener('resize', function () {
         if (cachedDevicePixelRatio !== window.devicePixelRatio) {
             cachedDevicePixelRatio = window.devicePixelRatio;
@@ -332,13 +320,13 @@ var SimpleBar = /** @class */ (function () {
         if (SimpleBar.instances.has(this.el)) {
             return;
         }
-        this.recalculate = throttle__default['default'](this.recalculate.bind(this), 64);
-        this.onMouseMove = throttle__default['default'](this.onMouseMove.bind(this), 64);
-        this.hideScrollbars = debounce__default['default'](this.hideScrollbars.bind(this), this.options.timeout);
-        this.onWindowResize = debounce__default['default'](this.onWindowResize.bind(this), 64, {
+        this.recalculate = throttle(this.recalculate.bind(this), 64);
+        this.onMouseMove = throttle(this.onMouseMove.bind(this), 64);
+        this.hideScrollbars = debounce(this.hideScrollbars.bind(this), this.options.timeout);
+        this.onWindowResize = debounce(this.onWindowResize.bind(this), 64, {
             leading: true
         });
-        SimpleBar.getRtlHelpers = memoize__default['default'](SimpleBar.getRtlHelpers);
+        SimpleBar.getRtlHelpers = memoize(SimpleBar.getRtlHelpers);
         this.init();
     }
     /**
@@ -387,7 +375,7 @@ var SimpleBar = /** @class */ (function () {
         // Save a reference to the instance, so we know this DOM node has already been instancied
         SimpleBar.instances.set(this.el, this);
         // We stop here on server-side
-        if (canUseDOM__default['default']) {
+        if (canUseDOM) {
             this.initDOM();
             this.setAccessibilityAttributes();
             this.scrollbarWidth = this.getScrollbarWidth();
@@ -402,20 +390,20 @@ var SimpleBar = /** @class */ (function () {
             return child.classList.contains(_this.classNames.wrapper);
         }).length) {
             // assume that element has his DOM already initiated
-            this.wrapperEl = this.el.querySelector("." + this.classNames.wrapper);
+            this.wrapperEl = this.el.querySelector(".".concat(this.classNames.wrapper));
             this.contentWrapperEl =
                 this.options.scrollableNode ||
-                    this.el.querySelector("." + this.classNames.contentWrapper);
+                    this.el.querySelector(".".concat(this.classNames.contentWrapper));
             this.contentEl =
                 this.options.contentNode ||
-                    this.el.querySelector("." + this.classNames.contentEl);
-            this.offsetEl = this.el.querySelector("." + this.classNames.offset);
-            this.maskEl = this.el.querySelector("." + this.classNames.mask);
-            this.placeholderEl = this.findChild(this.wrapperEl, "." + this.classNames.placeholder);
-            this.heightAutoObserverWrapperEl = this.el.querySelector("." + this.classNames.heightAutoObserverWrapperEl);
-            this.heightAutoObserverEl = this.el.querySelector("." + this.classNames.heightAutoObserverEl);
-            this.axis.x.track.el = this.findChild(this.el, "." + this.classNames.track + "." + this.classNames.horizontal);
-            this.axis.y.track.el = this.findChild(this.el, "." + this.classNames.track + "." + this.classNames.vertical);
+                    this.el.querySelector(".".concat(this.classNames.contentEl));
+            this.offsetEl = this.el.querySelector(".".concat(this.classNames.offset));
+            this.maskEl = this.el.querySelector(".".concat(this.classNames.mask));
+            this.placeholderEl = this.findChild(this.wrapperEl, ".".concat(this.classNames.placeholder));
+            this.heightAutoObserverWrapperEl = this.el.querySelector(".".concat(this.classNames.heightAutoObserverWrapperEl));
+            this.heightAutoObserverEl = this.el.querySelector(".".concat(this.classNames.heightAutoObserverEl));
+            this.axis.x.track.el = this.findChild(this.el, ".".concat(this.classNames.track, ".").concat(this.classNames.horizontal));
+            this.axis.y.track.el = this.findChild(this.el, ".".concat(this.classNames.track, ".").concat(this.classNames.vertical));
         }
         else {
             // Prepare DOM
@@ -460,8 +448,8 @@ var SimpleBar = /** @class */ (function () {
             this.el.appendChild(this.axis.x.track.el);
             this.el.appendChild(this.axis.y.track.el);
         }
-        this.axis.x.scrollbar.el = this.axis.x.track.el.querySelector("." + this.classNames.scrollbar);
-        this.axis.y.scrollbar.el = this.axis.y.track.el.querySelector("." + this.classNames.scrollbar);
+        this.axis.x.scrollbar.el = this.axis.x.track.el.querySelector(".".concat(this.classNames.scrollbar));
+        this.axis.y.scrollbar.el = this.axis.y.track.el.querySelector(".".concat(this.classNames.scrollbar));
         if (!this.options.autoHide) {
             this.axis.x.scrollbar.el.classList.add(this.classNames.visible);
             this.axis.y.scrollbar.el.classList.add(this.classNames.visible);
@@ -526,16 +514,16 @@ var SimpleBar = /** @class */ (function () {
         var contentWrapperElOffsetWidth = this.contentWrapperEl.offsetWidth;
         var elOverflowX = this.elStyles.overflowX;
         var elOverflowY = this.elStyles.overflowY;
-        this.contentEl.style.padding = this.elStyles.paddingTop + " " + this.elStyles.paddingRight + " " + this.elStyles.paddingBottom + " " + this.elStyles.paddingLeft;
-        this.wrapperEl.style.margin = "-" + this.elStyles.paddingTop + " -" + this.elStyles.paddingRight + " -" + this.elStyles.paddingBottom + " -" + this.elStyles.paddingLeft;
+        this.contentEl.style.padding = "".concat(this.elStyles.paddingTop, " ").concat(this.elStyles.paddingRight, " ").concat(this.elStyles.paddingBottom, " ").concat(this.elStyles.paddingLeft);
+        this.wrapperEl.style.margin = "-".concat(this.elStyles.paddingTop, " -").concat(this.elStyles.paddingRight, " -").concat(this.elStyles.paddingBottom, " -").concat(this.elStyles.paddingLeft);
         var contentElScrollHeight = this.contentEl.scrollHeight;
         var contentElScrollWidth = this.contentEl.scrollWidth;
         this.contentWrapperEl.style.height = isHeightAuto ? 'auto' : '100%';
         // Determine placeholder size
         this.placeholderEl.style.width = isWidthAuto
-            ? contentElOffsetWidth + "px"
+            ? "".concat(contentElOffsetWidth, "px")
             : 'auto';
-        this.placeholderEl.style.height = contentElScrollHeight + "px";
+        this.placeholderEl.style.height = "".concat(contentElScrollHeight, "px");
         var contentWrapperElOffsetHeight = this.contentWrapperEl.offsetHeight;
         this.axis.x.isOverflowing = contentElScrollWidth > contentElOffsetWidth;
         this.axis.y.isOverflowing =
@@ -566,8 +554,8 @@ var SimpleBar = /** @class */ (function () {
                     contentWrapperElOffsetHeight - offsetForXScrollbar;
         this.axis.x.scrollbar.size = this.getScrollbarSize('x');
         this.axis.y.scrollbar.size = this.getScrollbarSize('y');
-        this.axis.x.scrollbar.el.style.width = this.axis.x.scrollbar.size + "px";
-        this.axis.y.scrollbar.el.style.height = this.axis.y.scrollbar.size + "px";
+        this.axis.x.scrollbar.el.style.width = "".concat(this.axis.x.scrollbar.size, "px");
+        this.axis.y.scrollbar.el.style.height = "".concat(this.axis.y.scrollbar.size, "px");
         this.positionScrollbar('x');
         this.positionScrollbar('y');
         this.toggleTrackVisibility('x');
@@ -618,8 +606,8 @@ var SimpleBar = /** @class */ (function () {
                 : handleOffset;
         scrollbar.el.style.transform =
             axis === 'x'
-                ? "translate3d(" + handleOffset + "px, 0, 0)"
-                : "translate3d(0, " + handleOffset + "px, 0)";
+                ? "translate3d(".concat(handleOffset, "px, 0, 0)")
+                : "translate3d(0, ".concat(handleOffset, "px, 0)");
     };
     SimpleBar.prototype.toggleTrackVisibility = function (axis) {
         if (axis === void 0) { axis = 'y'; }
@@ -644,11 +632,11 @@ var SimpleBar = /** @class */ (function () {
     SimpleBar.prototype.hideNativeScrollbar = function () {
         this.offsetEl.style[this.isRtl ? 'left' : 'right'] =
             this.axis.y.isOverflowing || this.axis.y.forceVisible
-                ? "-" + this.scrollbarWidth + "px"
+                ? "-".concat(this.scrollbarWidth, "px")
                 : 0;
         this.offsetEl.style.bottom =
             this.axis.x.isOverflowing || this.axis.x.forceVisible
-                ? "-" + this.scrollbarWidth + "px"
+                ? "-".concat(this.scrollbarWidth, "px")
                 : 0;
     };
     SimpleBar.prototype.onMouseMoveForAxis = function (axis) {
@@ -875,13 +863,13 @@ var SimpleBar = /** @class */ (function () {
     return SimpleBar;
 }());
 
-var defaultColors = {"component":"scrollbar__component_1e3ee"};
+var defaultColors = {"component":"scrollbar__component_bybgs"};
 require('./default.css');
 
-var styles = {"component":"scrollbar__component_o69r0","wrapper":"scrollbar__wrapper_o69r0","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_o69r0","heightAutoObserver":"scrollbar__heightAutoObserver_o69r0","-webkit-mask":"scrollbar__mask_o69r0","mask":"scrollbar__mask_o69r0","offset":"scrollbar__offset_o69r0","contentWrapper":"scrollbar__contentWrapper_o69r0","placeholder":"scrollbar__placeholder_o69r0","vertical":"scrollbar__vertical_o69r0","hover":"scrollbar__hover_o69r0","horizontal":"scrollbar__horizontal_o69r0","content":"scrollbar__content_o69r0"};
+var styles = {"component":"scrollbar__component_byvun","wrapper":"scrollbar__wrapper_byvun","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_byvun","heightAutoObserver":"scrollbar__heightAutoObserver_byvun","-webkit-mask":"scrollbar__mask_byvun","mask":"scrollbar__mask_byvun","offset":"scrollbar__offset_byvun","contentWrapper":"scrollbar__contentWrapper_byvun","placeholder":"scrollbar__placeholder_byvun","vertical":"scrollbar__vertical_byvun","hover":"scrollbar__hover_byvun","horizontal":"scrollbar__horizontal_byvun","content":"scrollbar__content_byvun"};
 require('./index.css');
 
-var invertedColors = {"component":"scrollbar__component_x4oiq"};
+var invertedColors = {"component":"scrollbar__component_1u0pn"};
 require('./inverted.css');
 
 var colorStylesMap = {
@@ -905,7 +893,7 @@ var classNames = {
     dragging: 'dragging',
     visible: 'visible',
 };
-var Scrollbar = React__default['default'].forwardRef(function (_a, ref) {
+var Scrollbar = React.forwardRef(function (_a, ref) {
     var _b = _a.colors, colors = _b === void 0 ? 'default' : _b, className = _a.className, children = _a.children, _c = _a.scrollableNodeProps, scrollableNodeProps = _c === void 0 ? { ref: null } : _c, _d = _a.contentNodeProps, contentNodeProps = _d === void 0 ? { ref: null } : _d, _e = _a.autoHide, autoHide = _e === void 0 ? true : _e, _f = _a.forceVisible, forceVisible = _f === void 0 ? false : _f, _g = _a.autoHideTimeout, autoHideTimeout = _g === void 0 ? 1000 : _g, _h = _a.clickOnTrack, clickOnTrack = _h === void 0 ? true : _h, _j = _a.horizontalAutoStretch, horizontalAutoStretch = _j === void 0 ? false : _j, _k = _a.widthPropName, widthPropName = _k === void 0 ? 'minWidth' : _k, htmlAttributes = __rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName"]);
     var elRef = React.useRef(null);
     var scrollableNodeRef = React.useRef(null);
@@ -941,7 +929,7 @@ var Scrollbar = React__default['default'].forwardRef(function (_a, ref) {
         var rootNode = elRef.current;
         var scrollableNode = scrollableNodeRef.current;
         var maskNode = maskNodeRef.current;
-        var setMinWidth = throttle__default['default'](function () {
+        var setMinWidth = throttle(function () {
             if (contentNode && rootNode && scrollableNode && maskNode) {
                 /*
                  * Устанавливаем min-width, чтобы максимально растянуть абсолютно позиционированный элемент.
@@ -950,7 +938,7 @@ var Scrollbar = React__default['default'].forwardRef(function (_a, ref) {
                 maskNode.style.minWidth = '4000px';
                 contentNode.style.display = 'inline-block';
                 var contentRect = contentNode.getBoundingClientRect();
-                var newWidth = Math.ceil(contentRect.width) + "px";
+                var newWidth = "".concat(Math.ceil(contentRect.width), "px");
                 var prevWidth = rootNode.style[widthPropName];
                 if (newWidth !== prevWidth) {
                     rootNode.style[widthPropName] = newWidth;
@@ -975,23 +963,23 @@ var Scrollbar = React__default['default'].forwardRef(function (_a, ref) {
             }
         };
     }, [widthPropName, horizontalAutoStretch]);
-    return (React__default['default'].createElement("div", __assign({}, htmlAttributes, { ref: mergeRefs__default['default']([elRef, ref]), "data-simplebar": true, className: cn__default['default'](styles.component, colorStyles.component, className) }),
-        React__default['default'].createElement("div", { className: classNames.wrapper },
-            React__default['default'].createElement("div", { className: classNames.heightAutoObserverWrapperEl },
-                React__default['default'].createElement("div", { className: classNames.heightAutoObserverEl })),
-            React__default['default'].createElement("div", { className: classNames.mask, ref: maskNodeRef },
-                React__default['default'].createElement("div", { className: classNames.offset },
-                    React__default['default'].createElement("div", __assign({}, scrollableNodeProps, { ref: mergeRefs__default['default'](__spreadArray([
+    return (React.createElement("div", __assign({}, htmlAttributes, { ref: mergeRefs([elRef, ref]), "data-simplebar": true, className: cn(styles.component, colorStyles.component, className) }),
+        React.createElement("div", { className: classNames.wrapper },
+            React.createElement("div", { className: classNames.heightAutoObserverWrapperEl },
+                React.createElement("div", { className: classNames.heightAutoObserverEl })),
+            React.createElement("div", { className: classNames.mask, ref: maskNodeRef },
+                React.createElement("div", { className: classNames.offset },
+                    React.createElement("div", __assign({}, scrollableNodeProps, { ref: mergeRefs(__spreadArray([
                             scrollableNodeRef
-                        ], (scrollableNodeProps.ref ? [scrollableNodeProps.ref] : []), true)), className: cn__default['default'](classNames.contentWrapper, scrollableNodeProps === null || scrollableNodeProps === void 0 ? void 0 : scrollableNodeProps.className) }),
-                        React__default['default'].createElement("div", __assign({}, contentNodeProps, { ref: mergeRefs__default['default'](__spreadArray([
+                        ], (scrollableNodeProps.ref ? [scrollableNodeProps.ref] : []), true)), className: cn(classNames.contentWrapper, scrollableNodeProps === null || scrollableNodeProps === void 0 ? void 0 : scrollableNodeProps.className) }),
+                        React.createElement("div", __assign({}, contentNodeProps, { ref: mergeRefs(__spreadArray([
                                 contentNodeRef
-                            ], (contentNodeProps.ref ? [contentNodeProps.ref] : []), true)), className: cn__default['default'](classNames.contentEl, contentNodeProps === null || contentNodeProps === void 0 ? void 0 : contentNodeProps.className) }), children)))),
-            React__default['default'].createElement("div", { className: classNames.placeholder })),
-        React__default['default'].createElement("div", { className: cn__default['default'](classNames.track, classNames.horizontal) },
-            React__default['default'].createElement("div", { className: classNames.scrollbar })),
-        React__default['default'].createElement("div", { className: cn__default['default'](classNames.track, classNames.vertical) },
-            React__default['default'].createElement("div", { className: classNames.scrollbar }))));
+                            ], (contentNodeProps.ref ? [contentNodeProps.ref] : []), true)), className: cn(classNames.contentEl, contentNodeProps === null || contentNodeProps === void 0 ? void 0 : contentNodeProps.className) }), children)))),
+            React.createElement("div", { className: classNames.placeholder })),
+        React.createElement("div", { className: cn(classNames.track, classNames.horizontal) },
+            React.createElement("div", { className: classNames.scrollbar })),
+        React.createElement("div", { className: cn(classNames.track, classNames.vertical) },
+            React.createElement("div", { className: classNames.scrollbar }))));
 });
 
 exports.Scrollbar = Scrollbar;