@zohodesk/components 1.0.0-temp-153 → 1.0.0-temp-155

package/lib/DateTime/DateTime.module.css

@@ -3,24 +3,24 @@
 }
 
 [dir=ltr] .boxPadding {
-  padding-right: var(--zd_size19);
-  padding-left: var(--zd_size19);
+  padding-right: 19px;
+  padding-left: 19px;
 }
 
 [dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19);
-  padding-right: var(--zd_size19);
+  padding-left: 19px;
+  padding-right: 19px;
 }
 
 .container {
-  font-size: var(--zd_font_size16);
+  font-size: 16px;
   composes: offSelection from '../common/common.module.css';
   border-radius: 3px;
   background-color: var(--zdt_datetime_default_bg);
 }
 
 .header {
-  min-height: var(--zd_size36);
+  min-height: 36px;
   composes: boxPadding;
   text-align: center;
   background-color: var(--zdt_datetime_header_bg);
@@ -33,18 +33,18 @@
 }
 
 .grid {
-  width: var(--zd_size28);
-  height: var(--zd_size28);
+  width: 28px;
+  height: 28px;
   line-height: var(--zd_size18);
   text-align: center;
-  padding: var(--zd_size4) 0;
+  padding: 4px 0;
   border-radius: 50%;
   border: 1px solid transparent;
 }
 
 .thArrow,
 .datesStr {
-  font-size: var(--zd_font_size13);
+  font-size: 13px;
   color: var(--zdt_datetime_datestr_text);
 }
 
@@ -62,15 +62,15 @@
 }
 
 [dir=ltr] .navigation {
-  margin-left: var(--zd_size2);
+  margin-left: 2px;
 }
 
 [dir=rtl] .navigation {
-  margin-right: var(--zd_size2);
+  margin-right: 2px;
 }
 
 .thMonYear {
-  font-size: var(--zd_font_size13);
+  font-size: 13px;
   line-height: var(--zd_size24);
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
@@ -78,8 +78,8 @@
 }
 
 .dateContainer {
-  margin: 0 var(--zd_size19) 0 var(--zd_size19);
-  padding: var(--zd_size6) 0 var(--zd_size10) 0;
+  margin: 0 19px 0 19px;
+  padding: 6px 0 10px 0;
 }
 
 .separator {
@@ -87,23 +87,23 @@
 }
 
 .days {
-  min-height: var(--zd_size36);
+  min-height: 36px;
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
-  padding-top: var(--zd_size7);
+  padding-top: 7px;
 }
 
 .daysStr {
-  font-size: var(--zd_font_size10);
+  font-size: 10px;
   color: var(--zdt_datetime_daystr_text);
   text-transform: uppercase;
   composes: semibold;
 }
 
 .dateRow {
-  height: var(--zd_size28);
+  height: 28px;
   composes: alignBetween from '../common/common.module.css';
-  margin: var(--zd_size1) 0 var(--zd_size5);
+  margin: 1px 0 5px;
 }
 
 .dateRow:last-child {
@@ -149,24 +149,24 @@
 
 
 .timesection {
-  padding-top: var(--zd_size5);
-  padding-bottom: var(--zd_size10);
+  padding-top: 5px;
+  padding-bottom: 10px;
 }
 
 .dropDownContainer {
-  padding: 0 var(--zd_size5);
+  padding: 0 5px;
 }
 
 .dropDown {
-  width: var(--zd_size60);
+  width: 60px;
   display: inline-block;
   position: relative;
-  margin: 0 var(--zd_size4);
+  margin: 0 4px;
 }
 
 .footer {
-  margin-top: var(--zd_size10);
-  padding-bottom: var(--zd_size12);
+  margin-top: 10px;
+  padding-bottom: 12px;
 }
 
 .timesection,
@@ -176,7 +176,7 @@
 
 .space {
   display: inline-block;
-  width: var(--zd_size15);
+  width: 15px;
 }
 
 .downArrow {
@@ -184,11 +184,11 @@
 }
 
 [dir=ltr] .downArrow {
-  margin-left: var(--zd_size2);
+  margin-left: 2px;
 }
 
 [dir=rtl] .downArrow {
-  margin-right: var(--zd_size2);
+  margin-right: 2px;
 }
 
 .dateText {
@@ -201,12 +201,12 @@
 
 .text {
   composes: boxPadding;
-  font-size: var(--zd_font_size11);
+  font-size: 11px;
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
   composes: semibold;
   display: block;
-  margin-top: var(--zd_size14);
+  margin-top: 14px;
 }
 
 .yearContainer {

package/lib/DateTime/DateTimePopupFooter.js

@@ -23,7 +23,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } /* eslint-disable react/forbid-component-props */ /** ** Libraries *** */ /** ** Components *** */ /** ** CSS *** */
 var DateTimePopupFooter = /*#__PURE__*/function (_PureComponent) {
   _inherits(DateTimePopupFooter, _PureComponent);
   var _super = _createSuper(DateTimePopupFooter);

package/lib/DateTime/DateTimePopupHeader.js

@@ -24,7 +24,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } /* eslint-disable react/forbid-component-props */ /** ** Libraries *** */ /** ** Components *** */ /** ** CSS *** */
 var Span = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Span, _React$PureComponent);
   var _super = _createSuper(Span);

package/lib/DateTime/DateWidget.js

@@ -37,7 +37,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } /**** Libraries ****/ /**** Components ****/ /**** CSS ****/ /**** Methods ****/ /** * Constants ** */
 /* eslint-disable react/no-unused-prop-types */
 /* eslint css-modules/no-unused-class: [0, { markAsUsed: 'inputLine'] }] */
 var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {

package/lib/DateTime/DaysRow.js

@@ -22,7 +22,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } /* eslint-disable react/forbid-component-props */ /** ** Libraries *** */ /** ** CSS *** */ /** ** Components *** */
 var DaysRow = /*#__PURE__*/function (_PureComponent) {
   _inherits(DaysRow, _PureComponent);
   var _super = _createSuper(DaysRow);

package/lib/DateTime/Time.js

@@ -23,7 +23,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } /* eslint-disable react/forbid-component-props */ /** ** Libraries *** */ /**** Components ****/ /** ** CSS *** */
 var Time = /*#__PURE__*/function (_PureComponent) {
   _inherits(Time, _PureComponent);
   var _super = _createSuper(Time);

package/lib/DateTime/YearView.js

@@ -26,7 +26,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } /**** Libraries ****/ /**** Components ****/ /**** CSS ****/ /**** Methods ****/
 var monthNamesData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 function getYears() {
   var years = [];

package/lib/DateTime/YearView.module.css

@@ -1,19 +1,19 @@
 [dir=ltr] .boxPadding {
-  padding-right: var(--zd_size19);
-  padding-left: var(--zd_size19);
+  padding-right: 19px;
+  padding-left: 19px;
 }[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19);
-  padding-right: var(--zd_size19);
+  padding-left: 19px;
+  padding-right: 19px;
 }
 
 .month {
   width: 30.333%;
-  font-size: var(--zd_font_size12);
+  font-size: 12px;
   line-height: var(--zd_size26);
-  height: var(--zd_size26);
+  height: 26px;
   color: var(--zdt_yearview_month_text);
   text-align: center;
-  margin: 0 0 var(--zd_size1);
+  margin: 0 0 1px;
   cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
@@ -37,7 +37,7 @@
 }
 
 .year {
-  padding: var(--zd_size7) 0;
+  padding: 7px 0;
   cursor: pointer;
 }
 
@@ -48,7 +48,7 @@
 
 .yearText {
   color: var(--zdt_yearview_yeartext_text);
-  font-size: var(--zd_font_size11);
+  font-size: 11px;
 }
 
 .arrow {
@@ -63,7 +63,7 @@
 .isActive .yearText {
   font-family: var(--zd_semibold);
   color: var(--zdt_yearview_year_hover_text);
-  font-size: var(--zd_font_size11);
+  font-size: 11px;
 }
 
 .arrowActive {
@@ -87,10 +87,10 @@
 }
 
 .yearContainer {
-  height: var(--zd_size135);
+  height: 135px;
   overflow: hidden;
   transition: height var(--zd_transition1);
-  padding-bottom: var(--zd_size5);
+  padding-bottom: 5px;
 }
 
 .toggleYear {

package/lib/DateTime/dateFormatUtils/timeChange.js

@@ -13,7 +13,7 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /** * Methods ** */
 function getChangedHour(values, event, focusOrders, keyActions) {
   var _ref = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {},
     _ref$is24Hour = _ref.is24Hour,

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

@@ -28,44 +28,44 @@
 
 .mobRadius {
     --dropbox_border_radius: 30px 30px 0 0;
-    --dropbox_padding: var(--zd_size10) 0 0 0;
+    --dropbox_padding: 10px 0 0 0;
 }
 
 /* sizes */
 .mini {
-    width: var(--zd_size140);
+    width: 140px;
 }
 
 .xmini {
-    width: var(--zd_size160);
+    width: 160px;
 }
 
 .xsmall {
-    width: var(--zd_size180);
+    width: 180px;
 }
 
 .small {
-    width: var(--zd_size200);
+    width: 200px;
 }
 
 .medium {
-    width: var(--zd_size220);
+    width: 220px;
 }
 
 .large {
-    width: var(--zd_size260);
+    width: 260px;
 }
 
 .mlarge {
-    width: var(--zd_size280);
+    width: 280px;
 }
 
 .xlarge {
-    width: var(--zd_size304);
+    width: 304px;
 }
 
 .xxlarge {
-    width: var(--zd_size364);
+    width: 364px;
 }
 
 .default {
@@ -160,55 +160,55 @@
 
 /* space for arrow */
 .arrowtop {
-    padding-bottom: var(--zd_size10);
+    padding-bottom: 10px;
 }
 
 .arrowright {
-    padding-left: var(--zd_size10);
+    padding-left: 10px;
 }
 
 .arrowleft {
-    padding-right: var(--zd_size10);
+    padding-right: 10px;
 }
 
 .arrowbottom {
-    padding-top: var(--zd_size10);
+    padding-top: 10px;
 }
 
 /* space from target */
 .paddingSpace_top {
-    padding-bottom: var(--zd_size5);
+    padding-bottom: 5px;
 }
 
 .paddingSpace_right {
-    padding-left: var(--zd_size5);
+    padding-left: 5px;
 }
 
 .paddingSpace_left {
-    padding-right: var(--zd_size5);
+    padding-right: 5px;
 }
 
 .paddingSpace_bottom {
-    padding-top: var(--zd_size5);
+    padding-top: 5px;
 }
 
 .arrow {
     position: absolute;
-    height: var(--zd_size34);
-    width: var(--zd_size34);
-    clip: rect(var(--zd_size3),
-            var(--zd_size29),
-            var(--zd_size17),
-            var(--zd_size8));
-    padding: var(--zd_size4);
+    height: 34px;
+    width: 34px;
+    clip: rect(3px,
+            29px,
+            17px,
+            8px);
+    padding: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .arrowShape {
-    height: var(--zd_size10);
-    width: var(--zd_size10);
+    height: 10px;
+    width: 10px;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
@@ -225,15 +225,15 @@
 .top .start,
 .top .end,
 .top .mid {
-    bottom: calc(var(--zd_size17) * -1);
+    bottom: -17px;
 }
 
 .top .start {
-    left: var(--zd_size28);
+    left: 28px;
 }
 
 .top .end {
-    right: var(--zd_size28);
+    right: 28px;
     transform: rotate(180deg) translateX(-50%);
 }
 
@@ -249,11 +249,11 @@
 .bottom .start,
 .bottom .end,
 .bottom .mid {
-    top: calc(var(--zd_size17) * -1);
+    top: -17px;
 }
 
 .bottom .start {
-    left: var(--zd_size28);
+    left: 28px;
 }
 
 .bottom .mid {
@@ -261,7 +261,7 @@
 }
 
 .bottom .end {
-    right: var(--zd_size28);
+    right: 28px;
     transform: translateX(50%);
 }
 
@@ -273,16 +273,16 @@
 .left .start,
 .left .mid,
 .left .end {
-    right: calc(var(--zd_size17) * -1);
+    right: -17px;
 }
 
 .left .start {
-    top: var(--zd_size28);
+    top: 28px;
 }
 
 .left .end {
     transform: rotate(90deg) translateX(50%);
-    bottom: var(--zd_size28);
+    bottom: 28px;
 }
 
 .left .mid {
@@ -297,11 +297,11 @@
 .right .start,
 .right .mid,
 .right .end {
-    left: calc(var(--zd_size17) * -1);
+    left: -17px;
 }
 
 .right .start {
-    top: var(--zd_size28);
+    top: 28px;
 }
 
 .right .mid {
@@ -314,7 +314,7 @@
 }
 
 .right .end {
-    bottom: var(--zd_size28);
+    bottom: 28px;
     transform: rotate(-90deg) translateX(-50%);
 }
 .hidden {
@@ -411,16 +411,17 @@
 }
 
 .closeBar {
+  /*  Variable:Ignore  */
     height: 6px;
     width: 20%;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);
     cursor: pointer;
-    margin: 0 auto var(--zd_size10);
+    margin: 0 auto 10px;
 }
 
 .boxPadding {
-    --dropbox_padding: var(--zd_size10) 0;
+    --dropbox_padding: 10px 0;
 }
 
 .darkPalette {

package/lib/DropDown/DropDown.module.css

@@ -1,5 +1,5 @@
 .listGroup {
-  max-height: var(--zd_size220);
+  max-height: 220px;
   composes: oflowy from '../common/common.module.css';
-  margin: var(--zd_size8) 0 var(--zd_size4);
+  margin: 8px 0 4px;
 }

package/lib/DropDown/DropDownHeading.module.css

@@ -2,20 +2,20 @@
   /* dropdownheading default variables */
   --dropdownheading_text_color: var(--zdt_dropdown_default_text);
   --dropdownheading_text_transform: uppercase;
-  --dropdownheading_padding: var(--zd_size10) var(--zd_size20);
+  --dropdownheading_padding: 10px 20px;
   --dropdownheading_bg_color: none;
 
   /* dropdownheading underline default variables */
-  --dropdownheading_underline_width: var(--zd_size20);
+  --dropdownheading_underline_width: 20px;
   --dropdownheading_underline_height: 1px;
   --dropdownheading_underline_bg_color: var(--zdt_dropdown_default_bg);
-  --dropdownheading_underline_left: var(--zd_size20);
+  --dropdownheading_underline_left: 20px;
 }
 .default {
   composes: dotted semibold from '../common/common.module.css';
   composes: varClass;
   position: relative;
-  font-size: var(--zd_font_size11);
+  font-size: 11px;
   letter-spacing: 0.6px;
   text-transform: var(--dropdownheading_text_transform);
   color: var(--dropdownheading_text_color);
@@ -25,7 +25,7 @@
 .default::after {
   position: absolute;
   content: '';
-  bottom: var(--zd_size2);
+  bottom: 2px;
   width: var(--dropdownheading_underline_width);
   height: var(--dropdownheading_underline_height);
 }

package/lib/DropDown/DropDownItem.module.css

@@ -1,11 +1,11 @@
 .varClass {
   /* dropdownitem default variables */
-  --dropdownitem-padding: var(--zd_size9) var(--zd_size19);
+  --dropdownitem-padding: 9px 19px;
   --dropdownitem-border-color: var(--zdt_dropdown_default_border);
   --dropdownitem-bg-color: var(--zdt_dropdown_mirror_bg);
 
   /* dropdownitem user default variables */
-  --dropdownitem-user-width: var(--zd_size42);
+  --dropdownitem-user-width: 42px;
   --dropdownitem-user-border-style: solid;
   --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
   --dropdownitem-user-cursor: pointer;
@@ -19,7 +19,7 @@
   composes: dflex alignVertical from '../common/common.module.css';
   position: relative;
   color: var(--zdt_dropdown_default_text);
-  font-size: var(--zd_font_size13);
+  font-size: 13px;
   padding: var(--dropdownitem-padding);
   border-style: solid;
   border-color: var(--dropdownitem-border-color);
@@ -42,11 +42,11 @@
 }
 
 [dir=ltr] .padding {
-  --dropdownitem-padding: 0 var(--zd_size50) 0 0/*rtl: 0 0 0 var(--zd_size50)*/;
+  --dropdownitem-padding: 0 50px 0 0/*rtl: 0 0 0 50px*/;
 }
 
 [dir=rtl] .padding {
-  --dropdownitem-padding: 0 0 0 var(--zd_size50);
+  --dropdownitem-padding: 0 0 0 50px;
 }
 
 .children {
@@ -55,11 +55,11 @@
 }
 
 [dir=ltr] .children {
-  margin-right: var(--zd_size10);
+  margin-right: 10px;
 }
 
 [dir=rtl] .children {
-  margin-left: var(--zd_size10);
+  margin-left: 10px;
 }
 
 .value {

package/lib/DropDown/DropDownSearch.module.css

@@ -1,14 +1,14 @@
 .varClass {
   /* dropdownsearch default variables */
-  --dropdownsearch-padding: 0 var(--zd_size15) 0;
+  --dropdownsearch-padding: 0 15px 0;
 }
 .search {
   composes: varClass;
   padding: var(--dropdownsearch-padding);
 }
 .smallSearch {
-  --dropdownsearch-padding: 0 var(--zd_size5) 0;
+  --dropdownsearch-padding: 0 5px 0;
 }
 .mediumSearch {
-  --dropdownsearch-padding: 0 var(--zd_size15) 0;
+  --dropdownsearch-padding: 0 15px 0;
 }

package/lib/DropDown/DropDownSeparator.module.css

@@ -1,7 +1,7 @@
 .separator {
-  height: var(--zd_size1);
+  height: 1px;
   border-width: 0 0 1px 0;
   border-style: solid;
   border-color: var(--zdt_dropdown_user_default_border);
-  margin: var(--zd_size5) 0;
+  margin: 5px 0;
 }