@zohodesk/components 1.0.0-alpha-265 → 1.0.0-alpha-267

package/lib/Buttongroup/Buttongroup.module.css

@@ -7,6 +7,7 @@
   --buttongroup_border_style: solid;
   --buttongroup_border_color: var(--zdt_buttongroup_default_border);
 }
+
 .buttonGroup {
   composes: varClass;
   composes: cboth from '../common/common.module.css';
@@ -19,71 +20,88 @@
 }
 
 .footer {
-  --buttongroup_box_shadow: 0 -4px 5px -3px var(--zdt_buttongroup_footer_box_shadow);
+  --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
 }
 
 [dir=ltr] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)/*rtl: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0*/;
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)
+    /*rtl: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0*/
+  ;
 }
 
 [dir=rtl] .footer {
-  --buttongroup_padding: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0;
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)  ;
 }
+
 .header {
   --buttongroup_padding: var(--zd_size12) var(--zd_size20);
   --buttongroup_border_width: 0 0 1px 0;
 }
-[dir=ltr] .tab > div button:first-child {
+
+[dir=ltr] .tab>div button:first-child {
   border-radius: 5px 0 0 5px;
 }
-[dir=rtl] .tab > div button:first-child {
+
+[dir=rtl] .tab>div button:first-child {
   border-radius: 0 5px 5px 0;
 }
-[dir=ltr] .tab > div button:last-child {
+
+[dir=ltr] .tab>div button:last-child {
   border-radius: 0 5px 5px 0;
 }
-[dir=rtl] .tab > div button:last-child {
+
+[dir=rtl] .tab>div button:last-child {
   border-radius: 5px 0 0 5px;
 }
 
 .alignleft {
   composes: fleft from '../common/common.module.css';
 }
+
 .alignright {
   composes: fright from '../common/common.module.css';
 }
+
 .aligncenter {
   composes: tcenter from '../common/common.module.css';
 }
-[dir=ltr] .alignleft > button:first-child {
+
+[dir=ltr] .alignleft>button:first-child {
   margin-left: 0;
 }
-[dir=rtl] .alignleft > button:first-child {
+
+[dir=rtl] .alignleft>button:first-child {
   margin-right: 0;
 }
-[dir=ltr] .alignleft > button {
+
+[dir=ltr] .alignleft>button {
   margin-left: var(--zd_size15);
 }
-[dir=rtl] .alignleft > button {
+
+[dir=rtl] .alignleft>button {
   margin-right: var(--zd_size15);
 }
 
-[dir=ltr] .alignright > button:last-child {
+[dir=ltr] .alignright>button:last-child {
   margin-right: 0;
 }
 
-[dir=rtl] .alignright > button:last-child {
+[dir=rtl] .alignright>button:last-child {
   margin-left: 0;
 }
-[dir=ltr] .alignright > button {
+
+[dir=ltr] .alignright>button {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .alignright > button {
+
+[dir=rtl] .alignright>button {
   margin-left: var(--zd_size15);
 }
-[dir=ltr] .aligncenter > button {
+
+[dir=ltr] .aligncenter>button {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .aligncenter > button {
+
+[dir=rtl] .aligncenter>button {
   margin-left: var(--zd_size15);
-}
+}

package/lib/DateTime/DateTime.module.css

@@ -231,6 +231,6 @@
 .dropBox {
   width: 100%;
   border-radius: 3px;
-  box-shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+  box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);
 }

package/lib/DropBox/DropBox.js

@@ -65,13 +65,13 @@ function DropBox(props) {
   }));
   return isModel && isActive ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
     portalId: portalId
-  }, /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze),
     style: zIndexStyle,
     onClick: _Common.cancelBubblingEffect
   }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
     portalId: portalId
-  }, /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
     className: _DropBoxModule["default"].freezeLayer,
     style: zIndexStyle,
     onClick: _Common.cancelBubblingEffect

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -33,6 +33,7 @@ function DropBoxElement(props) {
     palette = props.palette,
     subContainerRef = props.subContainerRef,
     customStyle = props.customStyle;
+  var isAbsolute = isAbsolutePositioningNeeded;
   var FireOnAnimationEnd = function FireOnAnimationEnd() {
     var element = subContainerRef && subContainerRef.current.classList;
     (isAnimate ? _DropBoxElementModule["default"].fadeIn : _DropBoxElementModule["default"].bounce).split(' ').map(function (rmStyle) {
@@ -50,14 +51,14 @@ function DropBoxElement(props) {
     }
   };
   if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
-    isAbsolutePositioningNeeded = true;
+    isAbsolute = true;
   }
   var role = a11y.role,
     ariaMultiselectable = a11y.ariaMultiselectable,
     ariaLabelledby = a11y.ariaLabelledby;
   boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
   var boxDirection = _DropBoxPositionMapping.positionMapping[boxPosition].direction;
-  if (isAbsolutePositioningNeeded) {
+  if (isAbsolute) {
     arrowPosition = arrowPosition ? arrowPosition : _DropBoxPositionMapping.positionMapping[boxPosition].arrowPosition;
     boxPosition = _DropBoxPositionMapping.positionMapping[boxPosition].positionStyle;
   } else {
@@ -75,7 +76,8 @@ function DropBoxElement(props) {
         boxPosition: boxPosition,
         boxDirection: boxDirection,
         boxstyle: boxstyle,
-        needBoxStyle: needBoxStyle
+        needBoxStyle: needBoxStyle,
+        isAbsolute: isAbsolute
       }
     }),
     boxClassName = _cssJSLogic.boxClassName,

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -74,27 +74,23 @@
 
 /* shadow */
 .top_shadow {
-    --dropbox_box_shadow: 0 -3px 30px var(--zdt_dropbox_default_box_shadow);
+    --dropbox_box_shadow: var(--zd_bs_dropbox_top);
 }
 
 .left_shadow {
-    --dropbox_box_shadow: -4px 0 30px var(--zdt_dropbox_default_box_shadow);
+    --dropbox_box_shadow: var(--zd_bs_dropbox_left);
 }
 
 .right_shadow {
-    --dropbox_box_shadow: 4px 0 30px var(--zdt_dropbox_default_box_shadow);
+    --dropbox_box_shadow: var(--zd_bs_dropbox_right);
 }
 
 .bottom_shadow {
-    --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+    --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
 }
 
-[dir=ltr] .defaultShadow {
-    box-shadow: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
-}
-
-[dir=rtl] .defaultShadow {
-    box-shadow: -4px 3px 30px var(--zdt_dropbox_default_box_shadow);
+.defaultShadow {
+    box-shadow: var(--zd_bs_dropbox_default);
 }
 
 /* box direction styles */

package/lib/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -21,7 +21,8 @@ function cssJSLogic(_ref) {
   var boxPosition = customState.boxPosition,
     boxDirection = customState.boxDirection,
     boxstyle = customState.boxstyle,
-    needBoxStyle = customState.needBoxStyle;
+    needBoxStyle = customState.needBoxStyle,
+    isAbsolute = customState.isAbsolute;
   var _ref2 = DropBoxElementContext || {},
     isReducedMotion = _ref2.isReducedMotion;
   var isAnimate = props.isAnimate,
@@ -31,7 +32,6 @@ function cssJSLogic(_ref) {
     animationStyle = props.animationStyle,
     isActive = props.isActive,
     isModel = props.isModel,
-    isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
     isBoxPaddingNeed = props.isBoxPaddingNeed,
     isPadding = props.isPadding,
     customClass = props.customClass,
@@ -50,13 +50,13 @@ function cssJSLogic(_ref) {
 
   // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
 
-  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolutePositioningNeeded && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolutePositioningNeeded && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolutePositioningNeeded && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style[boxDirection], !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style["arrow".concat(boxDirection)], !isModel && isActive && isArrow && isAbsolutePositioningNeeded), _defineProperty(_compileClassNames, style["paddingSpace_".concat(boxDirection)], !isModel && isActive && !isArrow && isPadding), _compileClassNames));
+  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style[boxDirection], !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style["arrow".concat(boxDirection)], !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style["paddingSpace_".concat(boxDirection)], !isModel && isActive && !isArrow && isPadding), _compileClassNames));
   var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, customDropBox, !isModel), _defineProperty(_compileClassNames2, style["".concat(boxDirection, "_shadow")], !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style.fadeIn, !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'default'), _defineProperty(_compileClassNames2, style.bounce, !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'bounce'), _compileClassNames2));
-  var inlineStyle = !isModel ? isAbsolutePositioningNeeded ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
+  var inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
   if (zIndexStyle) {
     inlineStyle = Object.assign({}, inlineStyle, zIndexStyle);
   }
-  if (!isModel && !isAbsolutePositioningNeeded && size === 'default' && targetOffset && isActive) {
+  if (!isModel && !isAbsolute && size === 'default' && targetOffset && isActive) {
     inlineStyle = Object.assign({}, inlineStyle, {
       width: targetOffset.width
     });

package/lib/DropBox/css/DropBox.module.css

@@ -3,7 +3,7 @@
   --dropbox_bg_color: var(--zdt_dropbox_default_bg);
   --dropbox_border_radius: 0;
   --dropbox_padding: 0;
-  --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+  --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
 
   /* dropbox arrow default variables */
   --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);

package/lib/Ribbon/Ribbon.module.css

@@ -21,12 +21,17 @@
   --ribbon_tag_before_left: calc(var(--zd_size10) * -1);
   --ribbon_tag_before_border_radius: 3px 0 0 0;
 }[dir=ltr] .varClass {
-  --ribbon_flag_border_width: var(--zd_size14) var(--zd_size12) var(--zd_size14) 0/*rtl: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12)*/;
-  --ribbon_tag_before_border_width: 1px 0 0 1px/*rtl: 1px 1px 0 0*/;
+  --ribbon_flag_border_width: var(--zd_size14) var(--zd_size12) var(--zd_size14) 0
+    /*rtl: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12)*/
+  ;
+  --ribbon_tag_before_border_width: 1px 0 0 1px
+    /*rtl: 1px 1px 0 0*/
+  ;
 }[dir=rtl] .varClass {
-  --ribbon_flag_border_width: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12);
-  --ribbon_tag_before_border_width: 1px 1px 0 0;
+  --ribbon_flag_border_width: var(--zd_size14) var(--zd_size12) var(--zd_size14) 0  ;
+  --ribbon_tag_before_border_width: 1px 0 0 1px  ;
 }
+
 .basic {
   composes: varClass;
   position: relative;
@@ -41,6 +46,7 @@
   border-style: solid;
   border-color: var(--ribbon_border_color);
 }
+
 .default,
 .flag,
 .plain,
@@ -59,15 +65,19 @@
   --ribbon_text_transform: uppercase;
   text-align: center;
 }
+
 .small {
   --ribbon_font_size: var(--zd_font_size9);
 }
+
 .medium {
   --ribbon_font_size: var(--zd_font_size11);
 }
+
 .large {
   --ribbon_font_size: var(--zd_font_size13);
 }
+
 .xlarge {
   --ribbon_font_size: var(--zd_font_size14);
 }
@@ -75,96 +85,125 @@
 .palette_default {
   --ribbon_bg_color: var(--zdt_ribbon_palette_bg);
 }
+
 .palette_danger {
   --ribbon_bg_color: var(--zdt_ribbon_danger_bg);
 }
+
 .palette_primary {
   --ribbon_bg_color: var(--zdt_ribbon_primary_bg);
 }
+
 .palette_secondary {
   --ribbon_bg_color: var(--zdt_ribbon_secondary_bg);
 }
+
 .palette_info {
   --ribbon_bg_color: var(--zdt_ribbon_info_bg);
 }
+
 .palette_dark {
   --ribbon_bg_color: var(--zdt_ribbon_dark_bg);
 }
+
 .plain_default {
   --ribbon_text_color: var(--zdt_ribbon_plain_text);
 }
+
 .plain_danger {
   --ribbon_text_color: var(--zdt_ribbon_danger_text);
 }
+
 .plain_primary {
   --ribbon_text_color: var(--zdt_ribbon_primary_text);
 }
+
 .plain_secondary {
   --ribbon_text_color: var(--zdt_ribbon_secondary_text);
 }
+
 .plain_info {
   --ribbon_text_color: var(--zdt_ribbon_info_text);
 }
+
 .plain_dark {
   --ribbon_text_color: var(--zdt_ribbon_default_text);
 }
+
 .default_default {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_default_shadow);
+  --ribbon_box_shadow: var(--zd_bs_ribbon_default);
 }
+
 .default_danger {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_danger_shadow);
+  --ribbon_box_shadow: var(--zd_bs_ribbon_danger);
 }
+
 .default_primary {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_primary_shadow);
+  --ribbon_box_shadow: var(--zd_bs_ribbon_primary);
 }
+
 .default_secondary {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_secondary_shadow);
+  --ribbon_box_shadow: var(--zd_bs_ribbon_secondary);
 }
+
 .default_info {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_info_shadow);
+  --ribbon_box_shadow: var(--zd_bs_ribbon_info);
 }
+
 .default_dark {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_dark_shadow);
+  --ribbon_box_shadow: var(--zd_bs_ribbon_dark);
 }
+
 .box_default {
   --ribbon_border_width: 1px;
   --ribbon_border_color: var(--zdt_ribbon_default_border);
 }
+
 .box_danger {
   --ribbon_border_width: 1px;
   --ribbon_border_color: var(--zdt_ribbon_danger_border);
 }
+
 .box_primary {
   --ribbon_border_width: 1px;
   --ribbon_border_color: var(--zdt_ribbon_primary_border);
 }
+
 .box_secondary {
   --ribbon_border_width: 1px;
   --ribbon_border_color: var(--zdt_ribbon_secondary_border);
 }
+
 .box_info {
   --ribbon_border_width: 1px;
   --ribbon_border_color: var(--zdt_ribbon_info_border);
 }
+
 .box_dark {
   --ribbon_border_width: 1px;
   --ribbon_border_color: var(--zdt_ribbon_dark_border);
 }
+
 .stamp_default {
   --ribbon_bg_color: var(--zdt_ribbon_default_stamp_bg);
 }
+
 .stamp_danger {
   --ribbon_bg_color: var(--zdt_ribbon_danger_stamp_bg);
 }
+
 .stamp_primary {
   --ribbon_bg_color: var(--zdt_ribbon_primary_stamp_bg);
 }
+
 .stamp_secondary {
   --ribbon_bg_color: var(--zdt_ribbon_secondary_stamp_bg);
 }
+
 .stamp_info {
   --ribbon_bg_color: var(--zdt_ribbon_info_stamp_bg);
 }
+
 .stamp_dark {
   --ribbon_bg_color: var(--zdt_ribbon_dark_stamp_bg);
 }
@@ -178,12 +217,15 @@
 }
 
 [dir=ltr] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6)/*rtl: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24)*/;
+  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6)
+    /*rtl: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24)*/
+  ;
 }
 
 [dir=rtl] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24);
+  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6)  ;
 }
+
 .flag::after {
   position: absolute;
   top: -1px;
@@ -194,19 +236,22 @@
   transform: translateZ(0);
   border-width: var(--ribbon_flag_border_width);
 }
+
 [dir=ltr] .flag::after {
   right: -1px;
-  border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border)
-    var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border);
+  border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border);
 }
+
 [dir=rtl] .flag::after {
   left: -1px;
-  border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border)    var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border);
+  border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border);
 }
+
 .plain {
   display: inline-block;
   composes: semibold from '../common/common.module.css';
 }
+
 .ribbon {
   composes: semibold from '../common/common.module.css';
   display: block;
@@ -216,6 +261,7 @@
   --ribbon_line_height: var(--zd_size20);
   text-align: center;
 }
+
 .ribbon::after,
 .ribbon::before {
   position: absolute;
@@ -224,28 +270,34 @@
   height: var(--zd_size10);
   width: var(--zd_size10);
 }
+
 .ribbon::after, .ribbon::before {
   border-style: solid;
   border-width: 5px;
   background-color: inherit;
 }
+
 [dir=ltr] .ribbon::after, [dir=ltr] .ribbon::before {
-  border-color: transparent transparent var(--zdt_ribbon_flag_white_border)
-    var(--zdt_ribbon_flag_white_border);
+  border-color: transparent transparent var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_white_border);
 }
+
 [dir=rtl] .ribbon::after, [dir=rtl] .ribbon::before {
-  border-color: transparent var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_white_border)    transparent;
+  border-color: transparent var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_white_border) transparent;
 }
+
 [dir=ltr] .ribbon::after {
   right: 0;
 }
+
 [dir=rtl] .ribbon::after {
   left: 0;
 }
+
 [dir=ltr] .ribbon::before {
   left: 0;
   transform: rotateY(180deg);
 }
+
 [dir=rtl] .ribbon::before {
   right: 0;
   transform: rotateY(-180deg);
@@ -260,18 +312,25 @@
 }
 
 [dir=ltr] .tag {
-  border-width: 1px 1px 1px 0/*rtl: 1px 0 1px 1px*/;
-  border-radius: 0 3px 3px 0/*rtl: 3px 0 0 3px*/;
+  border-width: 1px 1px 1px 0
+    /*rtl: 1px 0 1px 1px*/
+  ;
+  border-radius: 0 3px 3px 0
+    /*rtl: 3px 0 0 3px*/
+  ;
   margin-left: var(--zd_size13);
-  padding: var(--zd_size6) var(--zd_size8) var(--zd_size6) var(--zd_size5)/*rtl: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8)*/;
+  padding: var(--zd_size6) var(--zd_size8) var(--zd_size6) var(--zd_size5)
+    /*rtl: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8)*/
+  ;
 }
 
 [dir=rtl] .tag {
-  border-width: 1px 0 1px 1px;
-  border-radius: 3px 0 0 3px;
+  border-width: 1px 0 1px 1px  ;
+  border-radius: 3px 0 0 3px  ;
   margin-right: var(--zd_size13);
-  padding: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8);
+  padding: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8)  ;
 }
+
 .tag::before {
   position: absolute;
   content: '';
@@ -284,10 +343,12 @@
   border-width: var(--ribbon_tag_before_border_width);
   border-radius: var(--ribbon_tag_before_border_radius);
 }
+
 [dir=ltr] .tag::before {
   transform: rotate(-45deg);
   left: var(--ribbon_tag_before_left);
 }
+
 [dir=rtl] .tag::before {
   transform: rotate(45deg);
   right: var(--ribbon_tag_before_left);
@@ -299,11 +360,13 @@
   --ribbon_padding: var(--zd_size5) var(--zd_size8);
   border-radius: 3px;
 }
+
 .stamp {
   display: inline-block;
   --ribbon_padding: var(--zd_size3) var(--zd_size5);
   --ribbon_text_transform: uppercase;
 }
+
 .sticker {
   display: block;
   height: var(--zd_size18);
@@ -316,6 +379,7 @@
   border-color: var(--zdt_ribbon_flag_white_border);
   padding: var(--zd_size3) var(--zd_size10);
 }
+
 .after,
 .before {
   position: absolute;
@@ -323,18 +387,23 @@
   bottom: 0;
   width: var(--zd_size10);
 }
+
 [dir=ltr] .after {
   right: calc(var(--zd_size2) * -1);
 }
+
 [dir=rtl] .after {
   left: calc(var(--zd_size2) * -1);
 }
+
 [dir=ltr] .before {
   left: calc(var(--zd_size8) * -1);
 }
+
 [dir=rtl] .before {
   right: calc(var(--zd_size8) * -1);
 }
+
 .after::after,
 .after::before,
 .before::after,
@@ -344,34 +413,43 @@
   width: var(--zd_size7);
   content: '';
 }
+
 .after::after, .after::before, .before::after, .before::before {
   background-color: var(--zdt_ribbon_white_bg);
 }
+
 [dir=ltr] .after::after, [dir=ltr] .after::before, [dir=ltr] .before::after, [dir=ltr] .before::before {
   transform: rotate(45deg);
 }
+
 [dir=rtl] .after::after, [dir=rtl] .after::before, [dir=rtl] .before::after, [dir=rtl] .before::before {
   transform: rotate(-45deg);
 }
+
 .after::after,
 .before::after {
   top: 0;
 }
+
 .after::before,
 .before::before {
   bottom: 0;
 }
+
 .children {
   display: inline-block;
   vertical-align: top;
   line-height: 0;
 }
+
 [dir=ltr] .children {
   margin-right: var(--zd_size4);
 }
+
 [dir=rtl] .children {
   margin-left: var(--zd_size4);
 }
+
 .childText {
   position: relative;
 }

package/lib/Select/Select.js

@@ -687,7 +687,12 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         autoComplete = _this$props11.autoComplete,
         ariaLabelledby = _this$props11.ariaLabelledby,
         isLoading = _this$props11.isLoading,
-        dataSelectorId = _this$props11.dataSelectorId;
+        dataSelectorId = _this$props11.dataSelectorId,
+        isAbsolutePositioningNeeded = _this$props11.isAbsolutePositioningNeeded,
+        positionsOffset = _this$props11.positionsOffset,
+        targetOffset = _this$props11.targetOffset,
+        isRestrictScroll = _this$props11.isRestrictScroll,
+        dropBoxPortalId = _this$props11.dropBoxPortalId;
       var _i18nKeys = i18nKeys,
         TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
         _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -825,7 +830,12 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           size: boxSize,
           isPadding: false,
           isResponsivePadding: getFooter ? false : true,
-          alignBox: "row"
+          alignBox: "row",
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset,
+          isRestrictScroll: isRestrictScroll,
+          portalId: dropBoxPortalId
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader