@nutui/nutui-react-taro 3.0.19-cpp.2 → 3.0.19-cpp.20

package/dist/cjs/packages/noticebar/style-jrkf/style.css

@@ -32,11 +32,15 @@
   justify-content: center;
 }
 .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap {
+  /* #ifndef dynamic*/
   flex: initial;
+  /* #endif */
 }
 .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content {
   position: relative;
+  /* #ifndef dynamic*/
   display: initial;
+  /* #endif */
 }
 .nut-noticebar .nut-noticebar-box-left-icon {
   display: flex;

package/dist/cjs/packages/notify/style/notify.scss

@@ -75,7 +75,12 @@
 
   &-left-icon,
   &-right-icon {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
   }
 
   &-left-icon {

package/dist/cjs/packages/notify/style/style.css

@@ -76,7 +76,12 @@
   text-align: left;
 }
 .nut-notify-left-icon, .nut-notify-right-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
 }
 .nut-notify-left-icon {
   margin-right: 6px;

package/dist/cjs/packages/notify/style/style.harmony.css

@@ -76,7 +76,12 @@
   text-align: left;
 }
 .nut-notify-left-icon, .nut-notify-right-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
 }
 .nut-notify-left-icon {
   margin-right: 6px;

package/dist/cjs/packages/notify/style-jmapp/notify.scss

@@ -75,7 +75,12 @@
 
   &-left-icon,
   &-right-icon {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
   }
 
   &-left-icon {

package/dist/cjs/packages/notify/style-jmapp/style.css

@@ -76,7 +76,12 @@
   text-align: left;
 }
 .nut-notify-left-icon, .nut-notify-right-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
 }
 .nut-notify-left-icon {
   margin-right: 6px;

package/dist/cjs/packages/notify/style-jrkf/notify.scss

@@ -75,7 +75,12 @@
 
   &-left-icon,
   &-right-icon {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
   }
 
   &-left-icon {

package/dist/cjs/packages/notify/style-jrkf/style.css

@@ -76,7 +76,12 @@
   text-align: left;
 }
 .nut-notify-left-icon, .nut-notify-right-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
 }
 .nut-notify-left-icon {
   margin-right: 6px;

package/dist/cjs/packages/numberkeyboard/style/numberkeyboard.scss

@@ -9,7 +9,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    /* #ifndef dynamic*/
     box-sizing: content-box;
+    /* #endif */
     padding: $popup-title-padding;
     color: $color-title;
     font-size: $popup-title-font-size;

package/dist/cjs/packages/numberkeyboard/style/style.css

@@ -13,7 +13,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  /* #ifndef dynamic*/
   box-sizing: content-box;
+  /* #endif */
   padding: var(--nutui-popup-title-padding, 16px);
   color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));

package/dist/cjs/packages/numberkeyboard/style/style.harmony.css

@@ -393,7 +393,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  /* #ifndef dynamic*/
   box-sizing: content-box;
+  /* #endif */
   padding: var(--nutui-popup-title-padding, 16px);
   color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));

package/dist/cjs/packages/numberkeyboard/style-jmapp/numberkeyboard.scss

@@ -9,7 +9,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    /* #ifndef dynamic*/
     box-sizing: content-box;
+    /* #endif */
     padding: $popup-title-padding;
     color: $color-title;
     font-size: $popup-title-font-size;

package/dist/cjs/packages/numberkeyboard/style-jmapp/style.css

@@ -13,7 +13,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  /* #ifndef dynamic*/
   box-sizing: content-box;
+  /* #endif */
   padding: var(--nutui-popup-title-padding, 12px);
   color: var(--nutui-color-title);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-h1));

package/dist/cjs/packages/numberkeyboard/style-jrkf/numberkeyboard.scss

@@ -9,7 +9,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    /* #ifndef dynamic*/
     box-sizing: content-box;
+    /* #endif */
     padding: $popup-title-padding;
     color: $color-title;
     font-size: $popup-title-font-size;

package/dist/cjs/packages/numberkeyboard/style-jrkf/style.css

@@ -13,7 +13,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  /* #ifndef dynamic*/
   box-sizing: content-box;
+  /* #endif */
   padding: var(--nutui-popup-title-padding, 12px);
   color: var(--nutui-color-title);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-h1));

package/dist/cjs/packages/popover/style/popover.scss

@@ -73,8 +73,10 @@
     font-size: $popover-font-size;
     color: $popover-text-color;
     line-height: 28px;
+    /* #ifndef dynamic*/
     max-height: initial;
     overflow-y: initial;
+    /* #endif */
 
     &-group {
       padding: 0 $popover-padding;

package/dist/cjs/packages/popover/style/style.css

@@ -66,8 +66,10 @@
   font-size: var(--nutui-popover-font-size, var(--nutui-font-size-s, 12px));
   color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   line-height: 28px;
+  /* #ifndef dynamic*/
   max-height: initial;
   overflow-y: initial;
+  /* #endif */
 }
 .nut-popover .nut-popover-content-group {
   padding: 0 var(--nutui-popover-padding, 8px);

package/dist/cjs/packages/popover/style/style.harmony.css

@@ -446,8 +446,10 @@
   font-size: var(--nutui-popover-font-size, var(--nutui-font-size-s, 12px));
   color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   line-height: 28px;
+  /* #ifndef dynamic*/
   max-height: initial;
   overflow-y: initial;
+  /* #endif */
 }
 .nut-popover .nut-popover-content-group {
   padding: 0 var(--nutui-popover-padding, 8px);

package/dist/cjs/packages/popover/style-jmapp/popover.scss

@@ -73,8 +73,10 @@
     font-size: $popover-font-size;
     color: $popover-text-color;
     line-height: 28px;
+    /* #ifndef dynamic*/
     max-height: initial;
     overflow-y: initial;
+    /* #endif */
 
     &-group {
       padding: 0 $popover-padding;

package/dist/cjs/packages/popover/style-jmapp/style.css

@@ -66,8 +66,10 @@
   font-size: var(--nutui-popover-font-size, var(--nutui-font-text));
   color: var(--nutui-popover-text-color, var(--nutui-color-text));
   line-height: 28px;
+  /* #ifndef dynamic*/
   max-height: initial;
   overflow-y: initial;
+  /* #endif */
 }
 .nut-popover .nut-popover-content-group {
   padding: 0 var(--nutui-popover-padding, var(--nutui-spacing-xl));

package/dist/cjs/packages/popover/style-jrkf/popover.scss

@@ -73,8 +73,10 @@
     font-size: $popover-font-size;
     color: $popover-text-color;
     line-height: 28px;
+    /* #ifndef dynamic*/
     max-height: initial;
     overflow-y: initial;
+    /* #endif */
 
     &-group {
       padding: 0 $popover-padding;

package/dist/cjs/packages/popover/style-jrkf/style.css

@@ -66,8 +66,10 @@
   font-size: var(--nutui-popover-font-size, var(--nutui-font-text));
   color: var(--nutui-popover-text-color, var(--nutui-color-text));
   line-height: 28px;
+  /* #ifndef dynamic*/
   max-height: initial;
   overflow-y: initial;
+  /* #endif */
 }
 .nut-popover .nut-popover-content-group {
   padding: 0 var(--nutui-popover-padding, var(--nutui-spacing-xl));

package/dist/cjs/packages/popup/popup.js

@@ -28,6 +28,7 @@ var _index = /*#__PURE__*/ _interop_require_default._(require("../overlay/index"
 var _uselockscoll = require("../../hooks/taro/use-lock-scoll");
 var _platform = require("../../utils/taro/platform");
 var _pxtransform = require("../../utils/taro/px-transform");
+var _configprovider = require("../configprovider/configprovider");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overlay.defaultOverlayProps), {
     position: 'center',
     transition: '',
@@ -57,7 +58,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overla
 // 默认1000，参看variables
 var _zIndex = 1100;
 var Popup = function Popup(props) {
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, visible = _$_object_spread.visible, overlay = _$_object_spread.overlay, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, overlayStyle = _$_object_spread.overlayStyle, overlayClassName = _$_object_spread.overlayClassName, zIndex = _$_object_spread.zIndex, lockScroll = _$_object_spread.lockScroll, duration = _$_object_spread.duration, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, left = _$_object_spread.left, title = _$_object_spread.title, top = _$_object_spread.top, description = _$_object_spread.description, style = _$_object_spread.style, transition = _$_object_spread.transition, round = _$_object_spread.round, position = _$_object_spread.position, className = _$_object_spread.className, destroyOnClose = _$_object_spread.destroyOnClose, portal = _$_object_spread.portal, resizable = _$_object_spread.resizable, minHeight = _$_object_spread.minHeight, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, afterShow = _$_object_spread.afterShow, afterClose = _$_object_spread.afterClose, onClick = _$_object_spread.onClick, onTouchStart = _$_object_spread.onTouchStart, onTouchMove = _$_object_spread.onTouchMove, onTouchEnd = _$_object_spread.onTouchEnd;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, visible = _$_object_spread.visible, overlay = _$_object_spread.overlay, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, overlayStyle = _$_object_spread.overlayStyle, overlayClassName = _$_object_spread.overlayClassName, zIndex = _$_object_spread.zIndex, lockScroll = _$_object_spread.lockScroll, duration = _$_object_spread.duration, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, left = _$_object_spread.left, title = _$_object_spread.title, top = _$_object_spread.top, description = _$_object_spread.description, style = _$_object_spread.style, transition = _$_object_spread.transition, round = _$_object_spread.round, position = _$_object_spread.position, className = _$_object_spread.className, destroyOnClose = _$_object_spread.destroyOnClose, portal = _$_object_spread.portal, resizable = _$_object_spread.resizable, minHeight = _$_object_spread.minHeight, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, afterShow = _$_object_spread.afterShow, afterClose = _$_object_spread.afterClose, onClick = _$_object_spread.onClick, onTouchStart = _$_object_spread.onTouchStart, onTouchMove = _$_object_spread.onTouchMove, onTouchEnd = _$_object_spread.onTouchEnd, closeAriaLabel = _$_object_spread.closeAriaLabel;
     var innerIndex = zIndex || _zIndex;
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(innerIndex), 2), index = _useState[0], setIndex = _useState[1];
     var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(visible), 2), innerVisible = _useState1[0], setInnerVisible = _useState1[1];
@@ -71,6 +72,7 @@ var Popup = function Popup(props) {
     var heightRef = (0, _react.useRef)(0);
     var defaultHeightRef = (0, _react.useRef)(0);
     var isTouching = (0, _react.useRef)(false);
+    var locale = (0, _configprovider.useConfig)().locale;
     var classPrefix = 'nut-popup';
     var overlayStyles = (0, _object_spread._)({}, overlayStyle);
     var contentZIndex = (0, _platform.harmony)() ? index + 1 : index // 解决harmony层级问题
@@ -160,7 +162,9 @@ var Popup = function Popup(props) {
         var closeClasses = (0, _classnames.default)("".concat(classPrefix, "-title-right"), "".concat(classPrefix, "-title-right-").concat(closeIconPosition));
         return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, closeable && /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: closeClasses,
-            onClick: handleCloseIconClick
+            onClick: handleCloseIconClick,
+            ariaRole: "button",
+            ariaLabel: closeAriaLabel || locale.close
         }, /*#__PURE__*/ _react.default.isValidElement(closeIcon) ? closeIcon : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, null)));
     };
     var renderTop = function renderTop() {

package/dist/cjs/packages/price/price.js

@@ -118,7 +118,7 @@ var Price = function Price(props) {
             style: priceColorStyle
         }, formatDecimal(price))) : null, symbol && position === 'after' ? renderSymbol() : null);
     };
-    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (0, _platform.harmony)() ? /*#__PURE__*/ _react.default.createElement(_components.Text, {
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (0, _platform.harmony)() || process.env.TARO_ENV === 'dynamic' ? /*#__PURE__*/ _react.default.createElement(_components.Text, {
         className: "".concat(classPrefix, " ").concat(classPrefix, "-").concat(color, " ").concat(className),
         style: style
     }, renderInner()) : /*#__PURE__*/ _react.default.createElement(_components.View, {

package/dist/cjs/packages/radio/radio.js

@@ -33,7 +33,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var Radio = function Radio(props) {
     var classPrefix = 'nut-radio';
-    var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, className = _ref.className, style = _ref.style, checked = _ref.checked, defaultChecked = _ref.defaultChecked, shape = _ref.shape, value = _ref.value, icon = _ref.icon, activeIcon = _ref.activeIcon, onChange = _ref.onChange, others = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, className = _ref.className, style = _ref.style, checked = _ref.checked, defaultChecked = _ref.defaultChecked, shape = _ref.shape, value = _ref.value, icon = _ref.icon, activeIcon = _ref.activeIcon, onChange = _ref.onChange, ariaLabel = _ref.ariaLabel, others = (0, _object_without_properties._)(_ref, [
         "children",
         "className",
         "style",
@@ -43,7 +43,8 @@ var Radio = function Radio(props) {
         "value",
         "icon",
         "activeIcon",
-        "onChange"
+        "onChange",
+        "ariaLabel"
     ]);
     // eslint-disable-next-line prefer-const
     var labelPosition = others.labelPosition, disabled = others.disabled;
@@ -122,7 +123,12 @@ var Radio = function Radio(props) {
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: cls,
         style: style,
-        onClick: handleClick
+        onClick: handleClick,
+        ariaRole: "radio",
+        ariaLabel: ariaLabel,
+        // @ts-ignore
+        ariaChecked: checkedStatement,
+        ariaDisabled: disabled
     }, renderRadioItem());
 };
 Radio.displayName = 'NutRadio';

package/dist/cjs/packages/radio/style/radio.scss

@@ -47,7 +47,12 @@
   }
 
   &-button {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     align-items: center;
     min-height: 30px;
     padding: $radio-button-padding;

package/dist/cjs/packages/radio/style/style.css

@@ -41,7 +41,12 @@
   color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-radio-button {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   min-height: 30px;
   padding: var(--nutui-radio-button-padding, 5px 18px);

package/dist/cjs/packages/radio/style/style.harmony.css

@@ -89,7 +89,12 @@
   color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-radio-button {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   min-height: 30px;
   padding: var(--nutui-radio-button-padding, 5px 18px);

package/dist/cjs/packages/radio/style-jmapp/radio.scss

@@ -47,7 +47,12 @@
   }
 
   &-button {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     align-items: center;
     min-height: 30px;
     padding: $radio-button-padding;

package/dist/cjs/packages/radio/style-jmapp/style.css

@@ -41,7 +41,12 @@
   color: var(--nutui-color-text-disabled);
 }
 .nut-radio-button {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   min-height: 30px;
   padding: var(--nutui-radio-button-padding, 5px 18px);

package/dist/cjs/packages/radio/style-jrkf/radio.scss

@@ -47,7 +47,12 @@
   }
 
   &-button {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     align-items: center;
     min-height: 30px;
     padding: $radio-button-padding;

package/dist/cjs/packages/radio/style-jrkf/style.css

@@ -41,7 +41,12 @@
   color: var(--nutui-color-text-disabled);
 }
 .nut-radio-button {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   min-height: 30px;
   padding: var(--nutui-radio-button-padding, 5px 18px);

package/dist/cjs/packages/range/style/range.scss

@@ -182,17 +182,21 @@
     &-wrapper,
     &-wrapper-right {
       position: absolute;
+      /* #ifndef dynamic*/
       top: initial;
+      right: initial;
+      /* #endif */
       top: 100%;
       left: 50%;
-      right: initial;
       // transform: translate3d(-50%, -50%, 0);
     }
 
     &-wrapper-left {
       top: 0px;
       left: 50%;
+      /* #ifndef dynamic*/
       right: initial;
+      /* #endif */
       // transform: translate3d(-50%, -50%, 0);
     }
 
@@ -207,7 +211,6 @@
     position: absolute;
     width: 36px;
     height: 100%;
-    // top: initial;
     top: 0px;
     right: 50%;
     overflow: visible;
@@ -257,19 +260,25 @@
     &-wrapper,
     &-wrapper-right {
       left: 0;
+      /* #ifndef dynamic*/
       right: initial;
+      /* #endif */
       // transform: translate3d(-50%, -50%, 0);
     }
     &-wrapper-left {
       right: 0;
+      /* #ifndef dynamic*/
       left: initial;
+      /* #endif */
       // transform: translate3d(50%, -50%, 0);
     }
   }
 
   &-tick {
     right: 0px;
+    /* #ifndef dynamic*/
     left: initial;
+    /* #endif */
   }
 
   &-mark-text {
@@ -281,13 +290,17 @@
       &-wrapper,
       &-wrapper-right {
         right: 50%;
+        /* #ifndef dynamic*/
         left: initial;
+        /* #endif */
         // transform: translate3d(50%, 50%, 0);
       }
 
       &-wrapper-left {
         right: 50%;
+        /* #ifndef dynamic*/
         left: initial;
+        /* #endif */
         // transform: translate3d(50%, -50%, 0);
       }
 

package/dist/cjs/packages/range/style/style.css

@@ -157,15 +157,19 @@
 }
 .nut-range-vertical-button-wrapper, .nut-range-vertical-button-wrapper-right {
   position: absolute;
+  /* #ifndef dynamic*/
   top: initial;
+  right: initial;
+  /* #endif */
   top: 100%;
   left: 50%;
-  right: initial;
 }
 .nut-range-vertical-button-wrapper-left {
   top: 0px;
   left: 50%;
+  /* #ifndef dynamic*/
   right: initial;
+  /* #endif */
 }
 .nut-range-vertical-button-number {
   left: 0px;
@@ -215,17 +219,23 @@
 .rtl-nut-range-button-wrapper,
 .rtl-nut-range-button-wrapper-right {
   left: 0;
+  /* #ifndef dynamic*/
   right: initial;
+  /* #endif */
 }
 [dir=rtl] .nut-range-button-wrapper-left,
 .rtl-nut-range-button-wrapper-left {
   right: 0;
+  /* #ifndef dynamic*/
   left: initial;
+  /* #endif */
 }
 [dir=rtl] .nut-range-tick,
 .rtl-nut-range-tick {
   right: 0px;
+  /* #ifndef dynamic*/
   left: initial;
+  /* #endif */
 }
 [dir=rtl] .nut-range-mark-text,
 .rtl-nut-range-mark-text {
@@ -235,12 +245,16 @@
 .rtl-nut-range-vertical-button-wrapper,
 .rtl-nut-range-vertical-button-wrapper-right {
   right: 50%;
+  /* #ifndef dynamic*/
   left: initial;
+  /* #endif */
 }
 [dir=rtl] .nut-range-vertical-button-wrapper-left,
 .rtl-nut-range-vertical-button-wrapper-left {
   right: 50%;
+  /* #ifndef dynamic*/
   left: initial;
+  /* #endif */
 }
 [dir=rtl] .nut-range-vertical-mark,
 .rtl-nut-range-vertical-mark {

package/dist/cjs/packages/range/style/style.harmony.css

@@ -157,15 +157,19 @@
 }
 .nut-range-vertical-button-wrapper, .nut-range-vertical-button-wrapper-right {
   position: absolute;
+  /* #ifndef dynamic*/
   top: initial;
+  right: initial;
+  /* #endif */
   top: 100%;
   left: 50%;
-  right: initial;
 }
 .nut-range-vertical-button-wrapper-left {
   top: 0px;
   left: 50%;
+  /* #ifndef dynamic*/
   right: initial;
+  /* #endif */
 }
 .nut-range-vertical-button-number {
   left: 0px;
@@ -215,17 +219,23 @@
 .rtl-nut-range-button-wrapper,
 .rtl-nut-range-button-wrapper-right {
   left: 0;
+  /* #ifndef dynamic*/
   right: initial;
+  /* #endif */
 }
 [dir=rtl] .nut-range-button-wrapper-left,
 .rtl-nut-range-button-wrapper-left {
   right: 0;
+  /* #ifndef dynamic*/
   left: initial;
+  /* #endif */
 }
 [dir=rtl] .nut-range-tick,
 .rtl-nut-range-tick {
   right: 0px;
+  /* #ifndef dynamic*/
   left: initial;
+  /* #endif */
 }
 [dir=rtl] .nut-range-mark-text,
 .rtl-nut-range-mark-text {
@@ -235,12 +245,16 @@
 .rtl-nut-range-vertical-button-wrapper,
 .rtl-nut-range-vertical-button-wrapper-right {
   right: 50%;
+  /* #ifndef dynamic*/
   left: initial;
+  /* #endif */
 }
 [dir=rtl] .nut-range-vertical-button-wrapper-left,
 .rtl-nut-range-vertical-button-wrapper-left {
   right: 50%;
+  /* #ifndef dynamic*/
   left: initial;
+  /* #endif */
 }
 [dir=rtl] .nut-range-vertical-mark,
 .rtl-nut-range-vertical-mark {