@zohodesk/components 1.6.1 → 1.6.2

package/lib/ListItem/ListItem.module.css

@@ -1,8 +1,8 @@
 .varClass {
   /* listitem default variables */
-  --listitem_font_size: var(--zd_font_size13);
+  --listitem_font_size: 13px;
   --listitem_text_color: var(--zdt_listitem_default_text);
-  --listitem_padding: var(--zd_size9) var(--zd_size20);
+  --listitem_padding: 9px 20px;
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
   --listitem_bg_color: var(--zdt_listitem_default_bg);
@@ -16,9 +16,10 @@
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }[dir=ltr] .varClass {
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
+  --listitem_avatar_margin: 0 15px 0 0
+    /*rtl: 0 0 0 15px*/;
 }[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
+  --listitem_avatar_margin: 0 0 0 15px;
 }
 .list {
   composes: varClass;
@@ -48,23 +49,27 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
+  --listitem_padding: 7px 3px 7px
+    5px
+    /*rtl: 7px 5px 7px 3px*/;
 }
 [dir=rtl] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
+  --listitem_padding: 7px 5px 7px 3px;
 }
 .medium {
-  --listitem_padding: var(--zd_size7) var(--zd_size20);
-  --listitem_min_height: var(--zd_size35);
+  --listitem_padding: 7px 20px;
+  --listitem_min_height: 35px;
 }
 .large {
-  --listitem_min_height: var(--zd_size48);
+  --listitem_min_height: 48px;
 }
 [dir=ltr] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
+  --listitem_padding: 10px 3px 10px
+    25px
+    /*rtl: 10px 25px 10px 3px*/;
 }
 [dir=rtl] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+  --listitem_padding: 10px 25px 10px 3px;
 }
 .value,
 .children,.secondaryValue {
@@ -244,26 +249,32 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
+  --listitem_padding: 7px 39px 7px
+    5px
+    /*rtl: 7px 5px 7px 39px*/;
 }
 [dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
+  --listitem_padding: 7px 5px 7px 39px;
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
+  --listitem_padding: 7px 39px 7px
+    20px
+    /*rtl: 7px 20px 7px 39px*/;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
+  --listitem_padding: 7px 20px 7px 39px;
 }
 [dir=ltr] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
+  --listitem_padding: 10px 39px 10px
+    25px
+    /*rtl: 10px 25px 10px 39px*/;
 }
 [dir=rtl] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
+  --listitem_padding: 10px 25px 10px 39px;
 }
 .responsiveHeight {
-  --listitem_min_height: var(--zd_size45);
-  --listitem_font_size: var(--zd_font_size15);
+  --listitem_min_height: 45px;
+  --listitem_font_size: 15px;
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -960,6 +960,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           isRestrictScroll = _this$props9.isRestrictScroll,
           emptyMessage = _this$props9.emptyMessage,
           searchEmptyMessage = _this$props9.searchEmptyMessage,
+          renderCustomEmptyState = _this$props9.renderCustomEmptyState,
           title = _this$props9.title,
           variant = _this$props9.variant,
           children = _this$props9.children,
@@ -1165,6 +1166,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           options: revampedGroups,
           searchString: searchStr,
           suggestions: suggestionGroups,
+          renderCustomEmptyState: renderCustomEmptyState,
           dataId: dataId,
           isLoading: isFetchingOptions,
           i18nKeys: i18nKeys,

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -418,6 +418,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           searchEmptyMessage = _this$props6.searchEmptyMessage,
           emptyMessage = _this$props6.emptyMessage,
           noMoreOptionsMessage = _this$props6.noMoreOptionsMessage,
+          renderCustomEmptyState = _this$props6.renderCustomEmptyState,
           dropBoxSize = _this$props6.dropBoxSize,
           placeHolder = _this$props6.placeHolder,
           isPopupOpen = _this$props6.isPopupOpen,
@@ -640,6 +641,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           options: options,
           searchString: searchStr,
           suggestions: suggestions,
+          renderCustomEmptyState: renderCustomEmptyState,
           dataId: dataIdLoading,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId

package/lib/MultiSelect/EmptyState.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _utils = require("@zohodesk/utils");
+
 var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
@@ -62,6 +64,7 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
           searchString = _this$props.searchString,
           suggestions = _this$props.suggestions,
           dataId = _this$props.dataId,
+          renderCustomEmptyState = _this$props.renderCustomEmptyState,
           getCustomEmptyState = _this$props.getCustomEmptyState,
           palette = _this$props.palette,
           i18nKeys = _this$props.i18nKeys,
@@ -90,13 +93,25 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
         "data-test-id": "".concat(dataId, "_srchEmptyMsg"),
         role: role,
         id: htmlId
-      }, searchEmptyText || emptyText) : options.length === 0 ? /*#__PURE__*/_react["default"].createElement("div", {
+      }, searchEmptyText || emptyText) : options.length === 0 ? (0, _utils.isRenderable)(renderCustomEmptyState) ? (0, _utils.renderNode)(renderCustomEmptyState, {
+        title: emptyText,
+        dataId: dataId,
+        role: role,
+        htmlId: htmlId,
+        className: className
+      }) : /*#__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", {
+      }, emptyText) : (0, _utils.isRenderable)(renderCustomEmptyState) ? (0, _utils.renderNode)(renderCustomEmptyState, {
+        title: noMoreText || emptyText,
+        dataId: dataId,
+        role: role,
+        htmlId: htmlId,
+        className: className
+      }) : /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
         "data-id": "".concat(dataId, "_NoMoreOptionMsg"),
         "data-test-id": "".concat(dataId, "_NoMoreOptionMsg"),

package/lib/MultiSelect/MultiSelect.js

@@ -1141,6 +1141,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           searchEmptyMessage = _this$props15.searchEmptyMessage,
           emptyMessage = _this$props15.emptyMessage,
           noMoreOptionsMessage = _this$props15.noMoreOptionsMessage,
+          renderCustomEmptyState = _this$props15.renderCustomEmptyState,
           dropBoxSize = _this$props15.dropBoxSize,
           isPopupOpen = _this$props15.isPopupOpen,
           isPopupReady = _this$props15.isPopupReady,
@@ -1276,6 +1277,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         options: options,
         searchString: searchStr,
         suggestions: suggestions,
+        renderCustomEmptyState: renderCustomEmptyState,
         dataId: dataId,
         palette: palette,
         i18nKeys: i18nKeys,

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -126,6 +126,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           searchEmptyMessage = _this$props.searchEmptyMessage,
           emptyMessage = _this$props.emptyMessage,
           noMoreOptionsMessage = _this$props.noMoreOptionsMessage,
+          renderCustomEmptyState = _this$props.renderCustomEmptyState,
           dropBoxSize = _this$props.dropBoxSize,
           isPopupOpen = _this$props.isPopupOpen,
           isPopupReady = _this$props.isPopupReady,
@@ -252,6 +253,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         options: options,
         searchString: searchStr,
         suggestions: suggestions,
+        renderCustomEmptyState: renderCustomEmptyState,
         dataId: dataId,
         palette: palette,
         i18nKeys: i18nKeys,

package/lib/MultiSelect/props/propTypes.js

@@ -21,6 +21,7 @@ var EmptyState_propTypes = {
   dataId: _propTypes["default"].string,
   emptyMessage: _propTypes["default"].string,
   getCustomEmptyState: _propTypes["default"].func,
+  renderCustomEmptyState: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   i18nKeys: _propTypes["default"].shape({
     loadingText: _propTypes["default"].string,
     emptyText: _propTypes["default"].string,
@@ -102,6 +103,7 @@ var MultiSelect_propTypes = {
   position: _propTypes["default"].string,
   prefixText: _propTypes["default"].string,
   removeClose: _propTypes["default"].func,
+  renderCustomEmptyState: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   searchDebounceTime: _propTypes["default"].number,
   searchEmptyMessage: _propTypes["default"].string,
   selectedOptions: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])).isRequired,
@@ -265,6 +267,7 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   placeHolder: _propTypes["default"].string,
   position: _propTypes["default"].string,
   removeClose: _propTypes["default"].func,
+  renderCustomEmptyState: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   searchDebounceTime: _propTypes["default"].number,
   searchEmptyMessage: _propTypes["default"].string,
   selectAllText: _propTypes["default"].string,

package/lib/Radio/Radio.module.css

@@ -1,16 +1,17 @@
 .varClass {
   /* radio default variables */
-  --radio_width: var(--zd_size16);
-  --radio_height: var(--zd_size16);
+  --radio_width: 16px;
+  --radio_height: 16px;
   --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 var(--zd_size6);
+  --radio_label_margin: 0 0 0 6px /*rtl: 0 6px 0 0*/
+  ;
 }[dir=rtl] .varClass {
-  --radio_label_margin: 0 0 0 var(--zd_size6);
+  --radio_label_margin: 0 6px 0 0;
 }
 
 .container {
@@ -48,13 +49,13 @@
 }
 
 .medium {
-  --radio_width: var(--zd_size16);
-  --radio_height: var(--zd_size16);
+  --radio_width: 16px;
+  --radio_height: 16px;
 }
 
 .small {
-  --radio_width: var(--zd_size13);
-  --radio_height: var(--zd_size13);
+  --radio_width: 13px;
+  --radio_height: 13px;
 }
 
 .medium.withSecondaryText {

package/lib/Ribbon/Ribbon.module.css

@@ -3,7 +3,7 @@
   --ribbon_padding: 0;
   --ribbon_text_color: var(--zdt_ribbon_default_text);
   --ribbon_text_transform: none;
-  --ribbon_font_size: var(--zd_font_size13);
+  --ribbon_font_size: 13px;
   --ribbon_bg_color: var(--zdt_ribbon_default_bg);
   --ribbon_box_shadow: none;
   --ribbon_border_width: 0;
@@ -13,12 +13,12 @@
   /* flag ribbon default variable */
 
   /* tag ribbon default variables */
-  --ribbon_tag_before_top: var(--zd_size3);
+  --ribbon_tag_before_top: 3px;
   --ribbon_tag_before_border_style: solid;
   --ribbon_tag_before_border_color: var(--zdt_ribbon_default_tag_border);
-  --ribbon_tag_before_width: var(--zd_size20);
-  --ribbon_tag_before_height: var(--zd_size20);
-  --ribbon_tag_before_left: calc( var(--zd_size10) * -1 );
+  --ribbon_tag_before_width: 20px;
+  --ribbon_tag_before_height: 20px;
+  --ribbon_tag_before_left: -10px;
   --ribbon_tag_before_border_radius: 3px 0 0 0;
 }[dir=ltr] .varClass {
   --ribbon_flag_border_width: 14px 12px 14px 0
@@ -28,8 +28,8 @@
     /*rtl: 1px 1px 0 0*/
   ;
 }[dir=rtl] .varClass {
-  --ribbon_flag_border_width: 14px 12px 14px 0  ;
-  --ribbon_tag_before_border_width: 1px 0 0 1px  ;
+  --ribbon_flag_border_width: 14px 0 14px 12px;
+  --ribbon_tag_before_border_width: 1px 1px 0 0;
 }
 
 /* css:lineheight-validation:ignore */
@@ -61,26 +61,26 @@
 .default {
   composes: semibold from '../common/common.module.css';
   display: block;
-  --ribbon_padding: var(--zd_size5) var(--zd_size20);
+  --ribbon_padding: 5px 20px;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;
 }
 
 .small {
-  --ribbon_font_size: var(--zd_font_size9);
+  --ribbon_font_size: 9px;
 }
 
 .medium {
-  --ribbon_font_size: var(--zd_font_size11);
+  --ribbon_font_size: 11px;
 }
 
 .large {
-  --ribbon_font_size: var(--zd_font_size13);
+  --ribbon_font_size: 13px;
 }
 
 .xlarge {
-  --ribbon_font_size: var(--zd_font_size14);
+  --ribbon_font_size: 14px;
 }
 
 .palette_default {
@@ -217,11 +217,13 @@
 }
 
 [dir=ltr] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
+  --ribbon_padding: 4px 24px 4px 6px
+    /*rtl: 4px 6px 4px 24px*/
+  ;
 }
 
 [dir=rtl] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
+  --ribbon_padding: 4px 6px 4px 24px;
 }
 
 .flag.small {
@@ -274,7 +276,7 @@
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
-  --ribbon_padding: var(--zd_size6) var(--zd_size10);
+  --ribbon_padding: 6px 10px;
   text-align: center;
 }
 
@@ -355,10 +357,13 @@
 }
 
 [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: 6px 5px 6px 8px
+;
 }
 
 .tag::before {
@@ -387,13 +392,13 @@
 .box {
   display: inline-block;
   --ribbon_bg_color: var(--zdt_ribbon_white_bg);
-  --ribbon_padding: var(--zd_size5) var(--zd_size8);
+  --ribbon_padding: 5px 8px;
   border-radius: 3px;
 }
 
 .stamp {
   display: inline-block;
-  --ribbon_padding: var(--zd_size3) var(--zd_size5);
+  --ribbon_padding: 3px 5px;
   --ribbon_text_transform: uppercase;
 }
 

package/lib/Select/GroupSelect.js

@@ -637,6 +637,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           defaultDropBoxPosition = _this$props9.defaultDropBoxPosition,
           searchBoxPlaceHolder = _this$props9.searchBoxPlaceHolder,
           searchEmptyMessage = _this$props9.searchEmptyMessage,
+          renderCustomEmptyState = _this$props9.renderCustomEmptyState,
           dataId = _this$props9.dataId,
           dataIdSlctComp = _this$props9.dataIdSlctComp,
           dataIdDownIcon = _this$props9.dataIdDownIcon,
@@ -868,6 +869,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           options: revampedGroups,
           searchString: searchStr,
           suggestions: suggestionGroups,
+          renderCustomEmptyState: renderCustomEmptyState,
           dataId: dataIdSrchEmptyMsg,
           isLoading: isFetchingOptions,
           i18nKeys: i18nKeys,

package/lib/Select/Select.js

@@ -839,6 +839,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           getFooter = _this$props11.getFooter,
           getChildren = _this$props11.getChildren,
           getCustomEmptyState = _this$props11.getCustomEmptyState,
+          renderCustomEmptyState = _this$props11.renderCustomEmptyState,
           isParentBased = _this$props11.isParentBased,
           i18nKeys = _this$props11.i18nKeys,
           htmlId = _this$props11.htmlId,
@@ -1120,6 +1121,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           searchString: searchStr,
           suggestions: suggestions,
           dataId: dataId,
+          renderCustomEmptyState: renderCustomEmptyState,
           getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId

package/lib/Select/SelectWithAvatar.js

@@ -184,6 +184,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           dropBoxSize = _this$props.dropBoxSize,
           emptyMessage = _this$props.emptyMessage,
           searchEmptyMessage = _this$props.searchEmptyMessage,
+          renderCustomEmptyState = _this$props.renderCustomEmptyState,
           needBorder = _this$props.needBorder,
           position = _this$props.position,
           defaultDropBoxPosition = _this$props.defaultDropBoxPosition,
@@ -386,6 +387,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           options: options,
           searchString: searchStr,
           suggestions: suggestions,
+          renderCustomEmptyState: renderCustomEmptyState,
           dataId: dataId,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId

package/lib/Select/SelectWithIcon.js

@@ -423,6 +423,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           boxSize = _this$props7.boxSize,
           dropBoxSize = _this$props7.dropBoxSize,
           emptyMessage = _this$props7.emptyMessage,
+          renderCustomEmptyState = _this$props7.renderCustomEmptyState,
           needIcon = _this$props7.needIcon,
           iconName = _this$props7.iconName,
           iconSize = _this$props7.iconSize,
@@ -613,6 +614,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           options: options,
           searchString: searchValue,
           suggestions: options,
+          renderCustomEmptyState: renderCustomEmptyState,
           dataId: dataId,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId

package/lib/Select/props/propTypes.js

@@ -77,6 +77,7 @@ var Select_propTypes = {
   placeHolder: _propTypes["default"].string,
   position: _propTypes["default"].string,
   removeClose: _propTypes["default"].func,
+  renderCustomEmptyState: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   searchBoxPlaceHolder: _propTypes["default"].string,
   searchBoxSize: _propTypes["default"].string,
   searchDebounceTime: _propTypes["default"].number,
@@ -144,6 +145,7 @@ var GroupSelect_propTypes = {
   searchBoxPlaceHolder: _propTypes["default"].string,
   needSearch: _propTypes["default"].bool,
   searchEmptyMessage: _propTypes["default"].string,
+  renderCustomEmptyState: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   getRef: _propTypes["default"].func,
   isDisabled: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
@@ -328,6 +330,7 @@ var SelectWithIcon_propTypes = {
   needResponsive: _propTypes["default"].bool,
   boxSize: _propTypes["default"].string,
   emptyMessage: _propTypes["default"].string,
+  renderCustomEmptyState: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   isAbsolutePositioningNeeded: _propTypes["default"].bool,
   isRestrictScroll: _propTypes["default"].bool,
   positionsOffset: _propTypes["default"].object,

package/lib/Stencils/Stencils.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* stencils default variables */
-  --stencil_height: var(--zd_size9);
+  --stencil_height: 9px;
   --stencil_width: 100%;
   --stencil_border_radius: 5px;
 }
@@ -48,7 +48,7 @@
 
 .rect {
   composes: stencil;
-  --stencil_height: var(--zd_size9);
+  --stencil_height: 9px;
   --stencil_border_radius: 5px;
 }
 .primary {
@@ -65,16 +65,16 @@
 }
 
 .small {
-  --stencil_width: var(--zd_size110);
+  --stencil_width: 110px;
 }
 .default {
   --stencil_width: 100%;
 }
 .medium {
-  --stencil_width: var(--zd_size170);
+  --stencil_width: 170px;
 }
 .large {
-  --stencil_width: var(--zd_size220);
+  --stencil_width: 220px;
 }
 
 .circle {
@@ -86,15 +86,15 @@
   --stencil_border_radius: 4px;
 }
 .size_large {
-  --stencil_width: var(--zd_size42);
-  --stencil_height: var(--zd_size42);
+  --stencil_width: 42px;
+  --stencil_height: 42px;
 }
 .size_medium,
 .size_default {
-  --stencil_width: var(--zd_size30);
-  --stencil_height: var(--zd_size30);
+  --stencil_width: 30px;
+  --stencil_height: 30px;
 }
 .size_small {
-  --stencil_width: var(--zd_size20);
-  --stencil_height: var(--zd_size20);
+  --stencil_width: 20px;
+  --stencil_height: 20px;
 }

package/lib/Tag/Tag.module.css

@@ -1,7 +1,7 @@
 .varClass {
   /* tag default variables */
   --tag_text_color: var(--zdt_tag_default_text);
-  --tag_font_size: var(--zd_font_size13);
+  --tag_font_size: 13px;
   --tag_letter_spacing: normal;
   --tag_bg_color: var(--zdt_tag_default_bg);
   --tag_border_radius: 25px;
@@ -9,8 +9,8 @@
   --tag_border_width: 0;
   --tag_border_style: dashed;
   --tag_border_color: var(--zdt_tag_default_border);
-  --tag_padding: var(--zd_size2);
-  --tag_inner_text_padding: 0 var(--zd_size6);
+  --tag_padding: 2px;
+  --tag_inner_text_padding: 0 6px;
   --tag_cursor: default;
 
   /* tag close icon default variables */
@@ -22,12 +22,13 @@
   --tag_icon_bg_color: var(--zdt_tag_icon_bg);
 }[dir=ltr] .varClass {
   --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
-  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6);
-  --tag_icon_margin: 0 0 0 var(--zd_size5);
+  --tag_closeicon_padding: 0 7px 0 6px
+    /*rtl: 0 6px 0 7px*/;
+  --tag_icon_margin: 0 0 0 5px /*rtl: 0 5px 0 0*/;
 }[dir=rtl] .varClass {
   --tag_closeicon_border_radius: 12px 0 0 12px;
-  --tag_closeicon_padding: 0 var(--zd_size6) 0 var(--zd_size7);
-  --tag_icon_margin: 0 var(--zd_size5) 0 0;
+  --tag_closeicon_padding: 0 6px 0 7px;
+  --tag_icon_margin: 0 5px 0 0;
 }
 .container {
   composes: varClass;
@@ -75,9 +76,9 @@
   padding: var(--tag_inner_text_padding);
 }
 .small {
-  --tag_height: var(--zd_size20);
-  --tag_padding: var(--zd_size1);
-  --tag_inner_text_padding: 0 var(--zd_size7);
+  --tag_height: 20px;
+  --tag_padding: 1px;
+  --tag_inner_text_padding: 0 7px;
 }
 [dir=ltr] .small .avatar {
   transform: scale(0.8) translateX(-2px);
@@ -88,22 +89,22 @@
   margin-left: calc( var(--zd_size8) * -1 ) ;
 }
 .smalltext {
-  --tag_font_size: var(--zd_font_size12);
+  --tag_font_size: 12px;
 }
 .activesmallEffect {
-  --tag_inner_text_padding: 0 var(--zd_size25) 0 var(--zd_size7);
+  --tag_inner_text_padding: 0 25px 0 7px;
 }
 
 .medium {
-  --tag_height: var(--zd_size26);
-  --tag_padding: var(--zd_size2);
-  --tag_inner_text_padding: 0 var(--zd_size6);
+  --tag_height: 26px;
+  --tag_padding: 2px;
+  --tag_inner_text_padding: 0 6px;
 }
 .mediumtext {
-  --tag_font_size: var(--zd_font_size13);
+  --tag_font_size: 13px;
 }
 .activemediumEffect {
-  --tag_inner_text_padding: 0 var(--zd_size25) 0 var(--zd_size6);
+  --tag_inner_text_padding: 0 25px 0 6px;
 }
 
 .selected .close {