@zohodesk/components 1.0.0-alpha-272 → 1.0.0-alpha-274

package/lib/Layout/Container.js

@@ -18,7 +18,11 @@ var _LayoutModule = _interopRequireDefault(require("./Layout.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-/* eslint css-modules/no-unused-class: 0 */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /* eslint-disable  react/no-unused-prop-types*/
 function getContainerClassNames(props) {
@@ -126,16 +130,16 @@ function getContainerProps(props) {
 }
 
 function Container(props) {
-  var childProps = getContainerProps(props);
   var tagName = props.tagName;
-  (0, _utils.setProps)(childProps, props, {
+  var componentProps = (0, _utils.setProps)(_objectSpread({}, getContainerProps(props)), props, {
     isScrollAttribute: 'data-scroll',
     eleRef: 'ref',
     dataId: 'data-id',
+    testId: 'data-test-id',
     tourId: 'data-tour',
     dataSelectorId: 'data-selector-id'
   });
-  return /*#__PURE__*/_react["default"].createElement(tagName, childProps);
+  return /*#__PURE__*/_react["default"].createElement(tagName, componentProps);
 }
 
 Container.propTypes = _propTypes.ContainerProps;

package/lib/Layout/Layout.module.css

@@ -11,8 +11,8 @@
 }
 
 .cover {
-  width: 100%;
-  height: 100%;
+  width: 100% ;
+  height: 100% ;
 }
 
 /* .flex {
@@ -67,8 +67,8 @@
   -webkit-box-flex: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-  min-height: 0;
-  min-width: 0;
+  min-height: 0 ;
+  min-width: 0 ;
 }
 
 .shrinkOff {
@@ -83,18 +83,18 @@
   -moz-flex-shrink: 1;
   -webkit-flex-shrink: 1;
   -ms-flex-shrink: 1;
-  min-width: 0;
+  min-width: 0 ;
 }
 
 .basis {
-  flex-basis: 0%;
+  flex-basis: 0% ;
   -webkit-flex-basis: 0%;
   -moz-flex-basis: 0%;
   -ms-flex-basis: 0%;
 }
 
 .basisAuto {
-  flex-basis: auto;
+  flex-basis: auto ;
   -webkit-flex-basis: auto;
   -moz-flex-basis: auto;
   -ms-flex-basis: auto;
@@ -146,8 +146,8 @@
 
 .col-3 {
   -ms-flex-preferred-size: 25%;
-  flex-basis: 25%;
-  max-width: 25%;
+  flex-basis: 25% ;
+  max-width: 25% ;
 }
 
 .col-4 {
@@ -164,8 +164,8 @@
 
 .col-6 {
   -ms-flex-preferred-size: 50%;
-  flex-basis: 50%;
-  max-width: 50%;
+  flex-basis: 50% ;
+  max-width: 50% ;
 }
 
 .col-7 {
@@ -182,8 +182,8 @@
 
 .col-9 {
   -ms-flex-preferred-size: 75%;
-  flex-basis: 75%;
-  max-width: 75%;
+  flex-basis: 75% ;
+  max-width: 75% ;
 }
 
 .col-10 {
@@ -200,8 +200,8 @@
 
 .col-12 {
   -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
-  max-width: 100%;
+  flex-basis: 100% ;
+  max-width: 100% ;
 }
 
 .hCenter {

package/lib/Layout/props/defaultProps.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ContainerDefaultProps = exports.BoxDefaultProps = void 0;
 var BoxDefaultProps = {
   dataId: 'boxComponent',
+  testId: '',
   isScrollAttribute: false,
   tagName: 'div',
   dataSelectorId: 'box'
@@ -13,6 +14,7 @@ var BoxDefaultProps = {
 exports.BoxDefaultProps = BoxDefaultProps;
 var ContainerDefaultProps = {
   dataId: 'containerComponent',
+  testId: '',
   isScrollAttribute: false,
   isCover: true,
   alignBox: 'column',

package/lib/Layout/props/propTypes.js

@@ -16,6 +16,7 @@ var BoxProps = {
   className: _propTypes["default"].string,
   column: _propTypes["default"].oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']),
   dataId: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
   dataSelectorId: _propTypes["default"].string,
   eleRef: _propTypes["default"].func,
   flexible: _propTypes["default"].bool,
@@ -41,6 +42,7 @@ var ContainerProps = {
   children: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].string]),
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
   dataSelectorId: _propTypes["default"].string,
   eleRef: _propTypes["default"].func,
   hidden: _propTypes["default"].array,

package/lib/Layout/utils.js

@@ -46,8 +46,12 @@ function isInteger(value) {
 
 function setProps(childProps, props) {
   var values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  Object.keys(values).map(function (value) {
+  Object.keys(values).forEach(function (value) {
     if (props[value]) {
+      if (value === 'dataId') {
+        childProps['data-test-id'] = props[value];
+      }
+
       childProps[values[value]] = props[value];
     }
   });

package/lib/ListItem/ListItem.module.css

@@ -1,7 +1,7 @@
 .varClass {
   /* listitem default variables */
   --listitem_text_color: var(--zdt_listitem_default_text);
-  --listitem_padding: 9px 20px;
+  --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
   --listitem_bg_color: var(--zdt_listitem_default_bg);
@@ -15,17 +15,17 @@
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }[dir=ltr] .varClass {
-  --listitem_avatar_margin: 0 15px 0 0
-    /*rtl: 0 0 0 15px*/;
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
+    ;
 }[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 0 0 15px;
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
   composes: varClass;
   position: relative;
   list-style: none;
   color: var(--listitem_text_color);
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;
@@ -48,27 +48,27 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: 7px 3px 7px
-    5px
-    /*rtl: 7px 5px 7px 3px*/;
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7
+)    var(--zd_size5
+)    ;
 }
 [dir=rtl] .small {
-  --listitem_padding: 7px 5px 7px 3px;
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
 .medium {
-  --listitem_padding: 7px 20px;
-  --listitem_min_height: 35px;
+  --listitem_padding: var(--zd_size7) var(--zd_size20);
+  --listitem_min_height: var(--zd_size35);
 }
 .large {
-  --listitem_height: 48px;
+  --listitem_height: var(--zd_size48);
 }
 [dir=ltr] .large {
-  --listitem_padding: 10px 3px 10px
-    25px
-    /*rtl: 10px 25px 10px 3px*/;
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10
+)    var(--zd_size25
+)    ;
 }
 [dir=rtl] .large {
-  --listitem_padding: 10px 25px 10px 3px;
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
 .value,
 .children {
@@ -82,18 +82,18 @@
   composes: clamp from '../common/common.module.css'
 }
 .iconBox {
-  width: 20px;
+  width: var(--zd_size20) ;
   text-align: center;
 }
 [dir=ltr] .iconBox {
-  margin-right: 10px;
+  margin-right: var(--zd_size10) ;
 }
 [dir=rtl] .iconBox {
-  margin-left: 10px;
+  margin-left: var(--zd_size10) ;
 }
 .iconBox,
 .leftAvatar {
-  font-size: 0;
+  font-size: 0 ;
 }
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
@@ -169,11 +169,11 @@
 }
 
 [dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
-  right: 20px;
+  right: var(--zd_size20) ;
 }
 
 [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
-  left: 20px;
+  left: var(--zd_size20) ;
 }
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
@@ -185,32 +185,32 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: 7px 39px 7px
-    5px
-    /*rtl: 7px 5px 7px 39px*/;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7
+)    var(--zd_size5
+)    ;
 }
 [dir=rtl] .smallwithTick {
-  --listitem_padding: 7px 5px 7px 39px;
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: 7px 39px 7px
-    20px
-    /*rtl: 7px 20px 7px 39px*/;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7
+)    var(--zd_size20
+)    ;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: 7px 20px 7px 39px;
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
-  --listitem_padding: 10px 39px 10px
-    25px
-    /*rtl: 10px 25px 10px 39px*/;
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10
+)    var(--zd_size25
+)    ;
 }
 [dir=rtl] .largewithTick {
-  --listitem_padding: 10px 25px 10px 39px;
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
 .responsiveHeight {
-  --listitem_min_height: 45px;
-  font-size: 15px;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  --listitem_min_height: var(--zd_size45);
+  font-size: var(--zd_font_size15) ;
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
 }

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -991,6 +991,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus,
         "data-selector-id": dataSelectorId

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -475,6 +475,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": dataIdMultiSelectComp,
+        "data-test-id": dataIdMultiSelectComp,
         "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus,
         "data-selector-id": dataSelectorId

package/lib/MultiSelect/EmptyState.js

@@ -79,21 +79,25 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
         "data-id": "".concat(dataId, "_Loading"),
+        "data-test-id": "".concat(dataId, "_Loading"),
         role: role,
         id: htmlId
       }, loadingText) : searchString.length && suggestions.length === 0 ? getCustomEmptyState ? getCustomEmptyState() : /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
         "data-id": "".concat(dataId, "_srchEmptyMsg"),
+        "data-test-id": "".concat(dataId, "_srchEmptyMsg"),
         role: role,
         id: htmlId
       }, searchEmptyText || emptyText) : options.length === 0 ? /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
         "data-id": "".concat(dataId, "_noOptnsMsg"),
+        "data-test-id": "".concat(dataId, "_noOptnsMsg"),
         role: role,
         id: htmlId
       }, emptyText) : /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
         "data-id": "".concat(dataId, "_NoMoreOptionMsg"),
+        "data-test-id": "".concat(dataId, "_NoMoreOptionMsg"),
         role: role,
         id: htmlId
       }, noMoreText || emptyText));

package/lib/MultiSelect/MultiSelect.js

@@ -1012,6 +1012,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus,
         "data-selector-id": dataSelectorId

package/lib/MultiSelect/MultiSelect.module.css

@@ -5,7 +5,7 @@
   cursor: not-allowed;
 }
 .container {
-  max-height: 120px;
+  max-height: var(--zd_size120) ;
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
@@ -42,17 +42,17 @@
 }
 
 .container.medium {
-  padding-bottom: 8px;
+  padding-bottom: var(--zd_size8) ;
 }
 
 .container.xmedium {
-  min-height: 30px;
-  padding-bottom: 3px;
+  min-height: var(--zd_size30) ;
+  padding-bottom: var(--zd_size3) ;
 }
 
 .delete {
   font: inherit;
-  padding: 2px 6px;
+  padding: var(--zd_size2) var(--zd_size6) ;
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
@@ -82,26 +82,26 @@
 }
 
 .tag {
-  max-width: 100%;
+  max-width: 100% ;
 }
 
 [dir=ltr] .container.xmedium .tag {
-  margin: 2px 10px 0 0;
+  margin: var(--zd_size2) var(--zd_size10) 0 0 ;
 }
 
 [dir=rtl] .container.xmedium .tag {
-  margin: 2px 0 0 10px;
+  margin: var(--zd_size2) 0 0 var(--zd_size10) ;
 }
 
 [dir=ltr] .container.medium .tag {
-  margin: 5px 10px 0 0;
+  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
 }
 
 [dir=rtl] .container.medium .tag {
-  margin: 5px 0 0 10px;
+  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
 }
 .responsiveParent{
-  width: 100%;
+  width: 100% ;
 }
 .box {
   background: var(--zdt_multiselect_box_bg);
@@ -112,21 +112,21 @@
 }
 
 .small {
-  max-height: 200px;
+  max-height: var(--zd_size200) ;
 }
 
 .medium {
-  max-height: 350px;
+  max-height: var(--zd_size350) ;
 }
 
 .large {
-  max-height: 400px;
+  max-height: var(--zd_size400) ;
 }
 
 .commonMessage {
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
   composes: semibold from '../common/common.module.css';
-  padding: 12px 15px;
+  padding: var(--zd_size12) var(--zd_size15) ;
 }
 .default,
 .dark {
@@ -154,54 +154,54 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%;
+  max-width: 100% ;
   visibility: hidden;
 }
 .custmSpanMedium {
-  height: 35px;
+  height: var(--zd_size35) ;
 }
 .custmSpanXmedium {
-  height: 28px;
+  height: var(--zd_size28) ;
 }
 .custmInputWrapper {
   position: absolute;
-  top: 0;
-  width: 100%;
+  top: 0 ;
+  width: 100% ;
 }
 [dir=ltr] .custmInputWrapper {
-  left: 0;
+  left: 0 ;
 }
 [dir=rtl] .custmInputWrapper {
-  right: 0;
+  right: 0 ;
 }
 .title {
-  margin-bottom: 6px;
+  margin-bottom: var(--zd_size6) ;
 }
 .groupTitle {
-  margin: 6px 0;
+  margin: var(--zd_size6) 0 ;
 }
 .loader {
-  padding: 10px;
+  padding: var(--zd_size10) ;
 }
 .iconContainer {
-  padding-top: 3px
+  padding-top: var(--zd_size3) 
 }
 [dir=ltr] .clearIconSpace {
-  padding-right: 37px
+  padding-right: var(--zd_size37) 
 }
 [dir=rtl] .clearIconSpace {
-  padding-left: 37px
+  padding-left: var(--zd_size37) 
 }
 .search{
   /*  Variable:Ignore  */
   padding: 0px 20px;
 }
 .more {
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
   font-family: inherit;
   cursor: pointer;
-  margin-top: 5px;
+  margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0;
 }

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -197,6 +197,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: " ".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus,
         "data-selector-id": dataSelectorId

package/lib/MultiSelect/SelectedOptions.module.css

@@ -1,15 +1,15 @@
 .tag {
-  max-width: 100%;
+  max-width: 100% ;
 }
 [dir=ltr] .xmedium {
-  margin: 0 10px 2px 0;
+  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
 }
 [dir=rtl] .xmedium {
-  margin: 0 0 2px 10px;
+  margin: 0 0 var(--zd_size2) var(--zd_size10) ;
 }
 [dir=ltr] .medium {
-  margin: 5px 10px 0 0;
+  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
 }
 [dir=rtl] .medium {
-  margin: 5px 0 0 10px;
+  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
 }

package/lib/Popup/Popup.js

@@ -406,10 +406,7 @@ var Popup = function Popup(Component) {
                 dropElement = _openedPopup.dropElement,
                 placeHolderElement = _openedPopup.placeHolderElement;
             var isDropBoxChild = (0, _Common.isDescendant)(dropElement, target);
-            var isTargetChild = (0, _Common.isDescendant)(placeHolderElement, target); // const massUpdateParent = document.querySelector(
-            //   '[data-id=massUpdatePopup]'
-            // );
-            // const isPopupMassUpdateChild = isDescendant(
+            var isTargetChild = (0, _Common.isDescendant)(placeHolderElement, target); // const isPopupMassUpdateChild = isDescendant(
             //   massUpdateParent,
             //   dropElement
             // );

package/lib/Radio/Radio.module.css

@@ -1,16 +1,16 @@
 .varClass {
   /* radio default variables */
-  --radio_width: 16px;
-  --radio_height: 16px;
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
   --radio_bg_color: none;
   --radio_stroke_width: 2px;
   --radio_stroke_color: var(--zdt_radio_default_stroke);
   --radio_fill: none;
   --radio_inner_stroke_width: 0;
 }[dir=ltr] .varClass {
-  --radio_label_margin: 0 0 0 6px/*rtl: 0 6px 0 0*/;
+  --radio_label_margin: 0 0 0 var(--zd_size6);
 }[dir=rtl] .varClass {
-  --radio_label_margin: 0 6px 0 0;
+  --radio_label_margin: 0 var(--zd_size6) 0 0;
 }
 .container {
   composes: varClass;
@@ -38,15 +38,15 @@
 }
 
 .medium {
-  --radio_width: 16px;
-  --radio_height: 16px;
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
 }
 .small {
-  --radio_width: 13px;
-  --radio_height: 13px;
+  --radio_width: var(--zd_size13);
+  --radio_height: var(--zd_size13);
 }
 .radioLabel {
-  font-size: 0;
+  font-size: 0 ;
   display: block;
 }
 .rdBox {

package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css

@@ -1,6 +1,6 @@
 .dropBoxContainer {
-  max-height: 70vh;
+  max-height: 70vh ;
 }
 .boxPadding{
-  padding-bottom: 10px;
+  padding-bottom: var(--zd_size10) ;
 }

package/lib/Ribbon/Ribbon.js

@@ -63,6 +63,7 @@ var Ribbon = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_RibbonModule["default"].basic, " ").concat(customClass, " ").concat(type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? "".concat(_RibbonModule["default"]["plain_".concat(palette)], " \n                 ").concat(type === 'box' ? _RibbonModule["default"]["box_".concat(palette)] : '', " ").concat(type === 'stamp' ? _RibbonModule["default"]["stamp_".concat(palette)] : '') : "".concat(_RibbonModule["default"]["palette_".concat(palette)], " ").concat(type === 'default' ? _RibbonModule["default"]["default_".concat(palette)] : '') : '', " ").concat(_RibbonModule["default"][size], " ").concat(_RibbonModule["default"][type]),
         "data-id": dataId,
+        "data-test-id": dataId,
         "data-selector-id": dataSelectorId
       }, type === 'sticker' ? /*#__PURE__*/_react["default"].createElement("span", {
         className: _RibbonModule["default"].after