@zohodesk/components 1.6.6 → 1.6.7-exp-0

package/lib/Typography/css/Typography.module.css

@@ -177,6 +177,10 @@
   white-space: pre-wrap
 }
 
+.whiteSpace_breakSpaces {
+  white-space: break-spaces;
+}
+
 
 
 /*...............Font Size Start.........*/

package/lib/Typography/css/cssJSLogic.js

@@ -17,31 +17,63 @@ function cssJSLogic(_ref) {
   var props = _ref.props,
       style = _ref.style;
   var $flag_reset = props.$flag_reset,
+      shouldReset = props.shouldReset,
       $flag_dotted = props.$flag_dotted,
+      isDotted = props.isDotted,
       $ui_size = props.$ui_size,
+      size = props.size,
       $ui_lineClamp = props.$ui_lineClamp,
+      lineClamp = props.lineClamp,
       $ui_lineHeight = props.$ui_lineHeight,
+      lineHeight = props.lineHeight,
       $ui_display = props.$ui_display,
+      display = props.display,
       $ui_weight = props.$ui_weight,
+      weight = props.weight,
       $ui_typeFace = props.$ui_typeFace,
+      typeFace = props.typeFace,
       $ui_textAlign = props.$ui_textAlign,
+      textAlign = props.textAlign,
       $ui_letterSpacing = props.$ui_letterSpacing,
+      letterSpacing = props.letterSpacing,
       $ui_transform = props.$ui_transform,
+      transform = props.transform,
       $ui_decoration = props.$ui_decoration,
+      decoration = props.decoration,
       $ui_className = props.$ui_className,
+      customClass = props.customClass,
       $ui_wordBreak = props.$ui_wordBreak,
+      wordBreak = props.wordBreak,
       $ui_wordWrap = props.$ui_wordWrap,
-      $ui_whiteSpace = props.$ui_whiteSpace;
+      wordWrap = props.wordWrap,
+      $ui_whiteSpace = props.$ui_whiteSpace,
+      whiteSpace = props.whiteSpace;
+  var finalReset = shouldReset !== undefined ? shouldReset : $flag_reset;
+  var finalDotted = isDotted !== undefined ? isDotted : $flag_dotted;
+  var finalSize = size !== undefined ? size : $ui_size;
+  var finalLineClamp = lineClamp !== undefined ? lineClamp : $ui_lineClamp;
+  var finalDisplay = display !== undefined ? display : $ui_display;
+  var finalWeight = weight !== undefined ? weight : $ui_weight;
+  var finalTypeFace = typeFace !== undefined ? typeFace : $ui_typeFace;
+  var finalTextAlign = textAlign !== undefined ? textAlign : $ui_textAlign;
+  var finalTransform = transform !== undefined ? transform : $ui_transform;
+  var finalDecoration = decoration !== undefined ? decoration : $ui_decoration;
+  var finalClassName = customClass !== undefined ? customClass : $ui_className;
+  var finalWordBreak = wordBreak !== undefined ? wordBreak : $ui_wordBreak;
+  var finalWordWrap = wordWrap !== undefined ? wordWrap : $ui_wordWrap;
+  var finalWhiteSpace = whiteSpace !== undefined ? whiteSpace : $ui_whiteSpace;
+  var finalLineHeight = lineHeight !== undefined ? lineHeight : $ui_lineHeight;
+  var finalLetterSpacing = letterSpacing !== undefined ? letterSpacing : $ui_letterSpacing;
 
-  if ($ui_letterSpacing) {
-    $ui_letterSpacing = _utils2.letterspacingMapping[$ui_letterSpacing];
+  if (finalLetterSpacing) {
+    finalLetterSpacing = _utils2.letterspacingMapping[finalLetterSpacing];
   }
 
-  if ($ui_lineHeight) {
-    $ui_lineHeight = _utils2.lineheightMapping[$ui_lineHeight];
+  if (finalLineHeight) {
+    finalLineHeight = _utils2.lineheightMapping[finalLineHeight];
   }
 
-  var typographyClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.reset, $flag_reset), _defineProperty(_compileClassNames, style.dotted, $flag_dotted), _defineProperty(_compileClassNames, style["size".concat($ui_size)], !!$ui_size), _defineProperty(_compileClassNames, style["lineclamp_".concat($ui_lineClamp)], !!$ui_lineClamp), _defineProperty(_compileClassNames, style["lineheight_".concat($ui_lineHeight)], !!$ui_lineHeight), _defineProperty(_compileClassNames, style["display_".concat($ui_display)], !!$ui_display), _defineProperty(_compileClassNames, style["font_".concat($ui_weight)], !!$ui_weight), _defineProperty(_compileClassNames, style["fontStyles_".concat($ui_typeFace)], !!$ui_typeFace), _defineProperty(_compileClassNames, style["textalign_".concat($ui_textAlign)], !!$ui_textAlign), _defineProperty(_compileClassNames, style["letterspacing_".concat($ui_letterSpacing)], !!$ui_letterSpacing), _defineProperty(_compileClassNames, style["transform_".concat($ui_transform)], !!$ui_transform), _defineProperty(_compileClassNames, style["decoration_".concat($ui_decoration)], !!$ui_decoration), _defineProperty(_compileClassNames, $ui_className, !!$ui_className), _defineProperty(_compileClassNames, style["wordBreak_".concat($ui_wordBreak)], !!$ui_wordBreak), _defineProperty(_compileClassNames, style["wordWrap_".concat($ui_wordWrap)], !!$ui_wordWrap), _defineProperty(_compileClassNames, style["whiteSpace_".concat($ui_whiteSpace)], !!$ui_whiteSpace), _compileClassNames));
+  var typographyClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.reset, finalReset), _defineProperty(_compileClassNames, style.dotted, finalDotted), _defineProperty(_compileClassNames, style["size".concat(finalSize)], !!finalSize), _defineProperty(_compileClassNames, style["lineclamp_".concat(finalLineClamp)], !!finalLineClamp), _defineProperty(_compileClassNames, style["lineheight_".concat(finalLineHeight)], !!finalLineHeight), _defineProperty(_compileClassNames, style["display_".concat(finalDisplay)], !!finalDisplay), _defineProperty(_compileClassNames, style["font_".concat(finalWeight)], !!finalWeight), _defineProperty(_compileClassNames, style["fontStyles_".concat(finalTypeFace)], !!finalTypeFace), _defineProperty(_compileClassNames, style["textalign_".concat(finalTextAlign)], !!finalTextAlign), _defineProperty(_compileClassNames, style["letterspacing_".concat(finalLetterSpacing)], !!finalLetterSpacing), _defineProperty(_compileClassNames, style["transform_".concat(finalTransform)], !!finalTransform), _defineProperty(_compileClassNames, style["decoration_".concat(finalDecoration)], !!finalDecoration), _defineProperty(_compileClassNames, finalClassName, !!finalClassName), _defineProperty(_compileClassNames, style["wordBreak_".concat(finalWordBreak)], !!finalWordBreak), _defineProperty(_compileClassNames, style["wordWrap_".concat(finalWordWrap)], !!finalWordWrap), _defineProperty(_compileClassNames, style["whiteSpace_".concat(finalWhiteSpace)], !!finalWhiteSpace), _compileClassNames));
   return {
     typographyClass: typographyClass
   };

package/lib/Typography/props/defaultProps.js

@@ -4,13 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultProps = void 0;
+
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
 var defaultProps = {
   $ui_className: '',
   $ui_tagName: 'div',
   $flag_reset: false,
   $flag_dotted: false,
-  $tagAttributes_text: {},
-  $a11yAttributes_text: {},
-  $ui_highlightConfig: {}
+  $tagAttributes_text: _constants.DUMMY_OBJECT,
+  $a11yAttributes_text: _constants.DUMMY_OBJECT,
+  $ui_highlightConfig: _constants.DUMMY_OBJECT
 };
 exports.defaultProps = defaultProps;

package/lib/Typography/props/propTypes.js

@@ -15,49 +15,93 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+// Define prop types once to avoid duplication
+var propTypeDefinitions = {
+  shouldReset: _propTypes["default"].bool,
+  display: _propTypes["default"].oneOf(['block', 'inlineBlock', 'inline', 'initial']),
+  weight: _propTypes["default"].oneOf(['regular', 'light', 'semibold', 'bold']),
+  isDotted: _propTypes["default"].bool,
+  textAlign: _propTypes["default"].oneOf(['left', 'right', 'center', 'justify']),
+  transform: _propTypes["default"].oneOf(['default', 'upper', 'lower', 'capital']),
+  lineClamp: _propTypes["default"].oneOf(['1', '2', '3', '4', '5']),
+  typeFace: _propTypes["default"].oneOf(['normal', 'italic']),
+  decoration: _propTypes["default"].oneOf(['default', 'underline', 'strike', 'overline']),
+  size: _propTypes["default"].oneOf(['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit']),
+  lineHeight: _propTypes["default"].oneOf(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit']),
+  letterSpacing: _propTypes["default"].oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit']),
+  wordBreak: _propTypes["default"].oneOf(['breakAll', 'keepAll', 'breakWord']),
+  wordWrap: _propTypes["default"].oneOf(['normal', 'break']),
+  whiteSpace: _propTypes["default"].oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap', 'breakSpaces']),
+  customClass: _propTypes["default"].string
+};
 var typoStyleProps = {
-  $flag_reset: _propTypes["default"].bool,
-  $flag_dotted: _propTypes["default"].bool,
-  $ui_display: _propTypes["default"].oneOf(['block', 'inlineBlock', 'inline', 'initial']),
-  $ui_weight: _propTypes["default"].oneOf(['regular', 'light', 'semibold', 'bold']),
-  $ui_textAlign: _propTypes["default"].oneOf(['left', 'right', 'center', 'justify']),
-  $ui_transform: _propTypes["default"].oneOf(['default', 'upper', 'lower', 'capital']),
-  $ui_lineClamp: _propTypes["default"].oneOf(['1', '2', '3', '4', '5']),
-  $ui_typeFace: _propTypes["default"].oneOf(['normal', 'italic']),
-  $ui_decoration: _propTypes["default"].oneOf(['default', 'underline', 'strike', 'overline']),
-  $ui_size: _propTypes["default"].oneOf(['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit']),
-  $ui_lineHeight: _propTypes["default"].oneOf(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit']),
-  $ui_letterSpacing: _propTypes["default"].oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit']),
-  $ui_wordBreak: _propTypes["default"].oneOf(['breakAll', 'keepAll', 'breakWord']),
-  $ui_wordWrap: _propTypes["default"].oneOf(['normal', 'break']),
-  $ui_whiteSpace: _propTypes["default"].oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap']),
-  $ui_className: _propTypes["default"].string
+  $flag_reset: propTypeDefinitions.shouldReset,
+  shouldReset: propTypeDefinitions.shouldReset,
+  $flag_dotted: propTypeDefinitions.isDotted,
+  isDotted: propTypeDefinitions.isDotted,
+  $ui_display: propTypeDefinitions.display,
+  display: propTypeDefinitions.display,
+  $ui_weight: propTypeDefinitions.weight,
+  weight: propTypeDefinitions.weight,
+  $ui_textAlign: propTypeDefinitions.textAlign,
+  textAlign: propTypeDefinitions.textAlign,
+  $ui_transform: propTypeDefinitions.transform,
+  transform: propTypeDefinitions.transform,
+  $ui_lineClamp: propTypeDefinitions.lineClamp,
+  lineClamp: propTypeDefinitions.lineClamp,
+  $ui_typeFace: propTypeDefinitions.typeFace,
+  typeFace: propTypeDefinitions.typeFace,
+  $ui_decoration: propTypeDefinitions.decoration,
+  decoration: propTypeDefinitions.decoration,
+  $ui_size: propTypeDefinitions.size,
+  size: propTypeDefinitions.size,
+  $ui_lineHeight: propTypeDefinitions.lineHeight,
+  lineHeight: propTypeDefinitions.lineHeight,
+  $ui_letterSpacing: propTypeDefinitions.letterSpacing,
+  letterSpacing: propTypeDefinitions.letterSpacing,
+  $ui_wordBreak: propTypeDefinitions.wordBreak,
+  wordBreak: propTypeDefinitions.wordBreak,
+  $ui_wordWrap: propTypeDefinitions.wordWrap,
+  wordWrap: propTypeDefinitions.wordWrap,
+  $ui_whiteSpace: propTypeDefinitions.whiteSpace,
+  whiteSpace: propTypeDefinitions.whiteSpace,
+  $ui_className: propTypeDefinitions.customClass,
+  customClass: propTypeDefinitions.customClass
 };
 var highlightProps = {
   customStyle: _propTypes["default"].object,
   shouldExcludeIndices: _propTypes["default"].bool,
   isCaseSensitive: _propTypes["default"].bool,
   isWholeWord: _propTypes["default"].bool,
-  tagName: _propTypes["default"].string,
+  as: _propTypes["default"].string,
   renderHighlight: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   styleConfiguration: _propTypes["default"].shape(typoStyleProps)
 };
 
+var highlightDataItemShape = _propTypes["default"].shape(_objectSpread({
+  text: _propTypes["default"].string,
+  index: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].number), _propTypes["default"].number])
+}, highlightProps));
+
+var highlightConfigShape = _propTypes["default"].shape(_objectSpread({
+  data: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, highlightDataItemShape]))
+}, highlightProps));
+
 var propTypes = _objectSpread(_objectSpread({}, typoStyleProps), {}, {
   children: _propTypes["default"].node,
   $ui_tagName: _propTypes["default"].string,
+  as: _propTypes["default"].string,
   $i18n_dataTitle: _propTypes["default"].string,
+  dataTitle: _propTypes["default"].string,
   testId: _propTypes["default"].string,
   customId: _propTypes["default"].string,
   customStyle: _propTypes["default"].object,
   $a11yAttributes_text: _propTypes["default"].object,
+  a11yAttributes: _propTypes["default"].object,
   $tagAttributes_text: _propTypes["default"].object,
-  $ui_highlightConfig: _propTypes["default"].shape(_objectSpread({
-    data: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].shape(_objectSpread({
-      text: _propTypes["default"].string,
-      index: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].number), _propTypes["default"].number])
-    }, highlightProps))]))
-  }, highlightProps))
+  tagAttributes: _propTypes["default"].object,
+  $ui_highlightConfig: highlightConfigShape,
+  highlightConfig: highlightConfigShape
 });
 
 exports.propTypes = propTypes;

package/lib/Typography/utils/textHighlighter.js

@@ -34,8 +34,8 @@ function highlightText(config) {
       enableCaseSensitiveMatch = _config$isCaseSensiti === void 0 ? false : _config$isCaseSensiti,
       _config$isWholeWord = config.isWholeWord,
       matchWholeWordOnly = _config$isWholeWord === void 0 ? false : _config$isWholeWord,
-      _config$tagName = config.tagName,
-      wrapperTagName = _config$tagName === void 0 ? 'span' : _config$tagName,
+      _config$as = config.as,
+      wrapperTagName = _config$as === void 0 ? 'span' : _config$as,
       customRenderer = config.renderHighlight;
 
   if (!sourceText || !(highlightData !== null && highlightData !== void 0 && highlightData.length)) {
@@ -78,7 +78,7 @@ function highlightText(config) {
       shouldExcludeIndices: itemConfiguration.shouldExcludeIndices !== undefined ? itemConfiguration.shouldExcludeIndices : shouldExcludeIndices,
       isCaseSensitive: itemConfiguration.isCaseSensitive !== undefined ? itemConfiguration.isCaseSensitive : enableCaseSensitiveMatch,
       matchWholeWordOnly: itemConfiguration.isWholeWord !== undefined ? itemConfiguration.isWholeWord : matchWholeWordOnly,
-      wrapperTagName: itemConfiguration.tagName !== undefined ? itemConfiguration.tagName : wrapperTagName,
+      wrapperTagName: itemConfiguration.as !== undefined ? itemConfiguration.as : wrapperTagName,
       customStyle: customStyle,
       customRenderer: itemConfiguration.renderHighlight !== undefined ? itemConfiguration.renderHighlight : customRenderer,
       highlightClasses: typographyClass,

package/lib/common/avatarsizes.module.css

@@ -1,8 +1,8 @@
 /*Avatar common Sizes*/
 .varClass {
   /* avatar size default variables */
-  --avatar_width: 34px;
-  --avatar_height: 34px;
+  --avatar_width: var(--zd_size34);
+  --avatar_height: var(--zd_size34);
 }
 .small,
 .xsmall,
@@ -16,34 +16,34 @@
   height: var(--avatar_height);
 }
 .small {
-  --avatar_height: 22px;
-  --avatar_width: 22px;
+  --avatar_height: var(--zd_size22);
+  --avatar_width: var(--zd_size22);
 }
 .xxsmall {
-  --avatar_height: 18px;
-  --avatar_width: 18px;
+  --avatar_height: var(--zd_size18);
+  --avatar_width: var(--zd_size18);
 }
 .xsmall {
-  --avatar_height: 30px;
-  --avatar_width: 30px;
+  --avatar_height: var(--zd_size30);
+  --avatar_width: var(--zd_size30);
 }
 
 .medium {
-  --avatar_height: 34px;
-  --avatar_width: 34px;
+  --avatar_height: var(--zd_size34);
+  --avatar_width: var(--zd_size34);
 }
 
 .xmedium {
-  --avatar_height: 40px;
-  --avatar_width: 40px;
+  --avatar_height: var(--zd_size40);
+  --avatar_width: var(--zd_size40);
 }
 
 .large {
-  --avatar_height: 60px;
-  --avatar_width: 60px;
+  --avatar_height: var(--zd_size60);
+  --avatar_width: var(--zd_size60);
 }
 
 .xlarge {
-  --avatar_height: 80px;
-  --avatar_width: 80px;
+  --avatar_height: var(--zd_size80);
+  --avatar_width: var(--zd_size80);
 }

package/lib/shared/InputFieldLine/InputFieldLine.module.css

@@ -59,12 +59,12 @@
 
 .padding_small,
 .padding_xmedium {
-    --local_padding: 3px;
+    --local_padding: var(--zd_size3);
 }
 
 .padding_medium,
 .padding_large {
-    --local_padding: 8px;
+    --local_padding: var(--zd_size8);
 }
 
 .xmedium {

package/lib/v1/Switch/css/Switch_v1.module.css

@@ -4,47 +4,47 @@
     gap: var(--zd_size6) ;
 }
 .small {
-    --local-switch-track-width: 22px;
-    --local-switch-track-height: 12px;
+    --local-switch-track-width: var(--zd_size22);
+    --local-switch-track-height: var(--zd_size12);
     --local-switch-track-border-radius: 8px;
-    --local-switch-thumb-size: 10px;
-    --local-switch-onLabel-height: 6px;
-    --local-switch-onLabel-left: 5px;
-    --local-switch-offLabel-size: 7px;
-    --local-switch-offLabel-right: 2px;
+    --local-switch-thumb-size: var(--zd_size10);
+    --local-switch-onLabel-height: var(--zd_size6);
+    --local-switch-onLabel-left: var(--zd_size5);
+    --local-switch-offLabel-size: var(--zd_size7);
+    --local-switch-offLabel-right: var(--zd_size2);
     --local-switch-onLabel-scaleX: 1.2;
 }
 .medium {
-    --local-switch-track-width: 28px;
-    --local-switch-track-height: 16px;
+    --local-switch-track-width: var(--zd_size28);
+    --local-switch-track-height: var(--zd_size16);
     --local-switch-track-border-radius: 16px;
-    --local-switch-thumb-size: 14px;
-    --local-switch-onLabel-height: 8px;
-    --local-switch-onLabel-left: 6px;
-    --local-switch-offLabel-size: 8px;
-    --local-switch-offLabel-right: 3px;
+    --local-switch-thumb-size: var(--zd_size14);
+    --local-switch-onLabel-height: var(--zd_size8);
+    --local-switch-onLabel-left: var(--zd_size6);
+    --local-switch-offLabel-size: var(--zd_size8);
+    --local-switch-offLabel-right: var(--zd_size3);
     --local-switch-onLabel-scaleX: 1.4;
 }
 .large {
-    --local-switch-track-width: 34px;
-    --local-switch-track-height: 20px;
+    --local-switch-track-width: var(--zd_size34);
+    --local-switch-track-height: var(--zd_size20);
     --local-switch-track-border-radius: 10px;
-    --local-switch-thumb-size: 18px;
-    --local-switch-onLabel-height: 10px;
-    --local-switch-onLabel-left: 7px;
-    --local-switch-offLabel-size: 9px;
-    --local-switch-offLabel-right: 4px;
+    --local-switch-thumb-size: var(--zd_size18);
+    --local-switch-onLabel-height: var(--zd_size10);
+    --local-switch-onLabel-left: var(--zd_size7);
+    --local-switch-offLabel-size: var(--zd_size9);
+    --local-switch-offLabel-right: var(--zd_size4);
     --local-switch-onLabel-scaleX: 1.6;
 }
 .xlarge {
-    --local-switch-track-width: 40px;
-    --local-switch-track-height: 24px;
+    --local-switch-track-width: var(--zd_size40);
+    --local-switch-track-height: var(--zd_size24);
     --local-switch-track-border-radius: 12px;
-    --local-switch-thumb-size: 22px;
-    --local-switch-onLabel-height: 12px;
-    --local-switch-onLabel-left: 8px;
-    --local-switch-offLabel-size: 10px;
-    --local-switch-offLabel-right: 5px;
+    --local-switch-thumb-size: var(--zd_size22);
+    --local-switch-onLabel-height: var(--zd_size12);
+    --local-switch-onLabel-left: var(--zd_size8);
+    --local-switch-offLabel-size: var(--zd_size10);
+    --local-switch-offLabel-right: var(--zd_size5);
     --local-switch-onLabel-scaleX: 1.8;
 }
 .disabled, .readonly {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.6",
+  "version": "1.6.7-exp-0",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -28,13 +28,13 @@
     "build:lib": "cbt build:lib src,assets lib,assets",
     "build:es": "cbt build:es src,assets es,assets",
     "build:es:watch": "cbt build:es src es",
-    "build": "npm run theme:validate && npm run build:lib && npm run build:es",
+    "build": "npm run theme:validate && npm run build:lib && npm run build:es && npm run cssVariableConvert ",
     "build:local": "npm run build",
     "build:watch": "npm run build:es:watch --module:mode=dev -- -w",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
-    "postpublish": "node postPublish.js",
+    "prepublishOnly": "node ../prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
+    "postpublish": "node ../postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
     "customTest": "node ./__testUtils__/runTest.js",
@@ -44,7 +44,7 @@
     "build:external": "npm run clean &&  npm run init  && npm run docsjs:build && npm run build:externalDocCopy  && npm run externalDocHTMLChange",
     "download": "npm run download_only && cd ../ && npm run download",
     "download_only": "react-cli clean ./node_modules ./package-lock.json && npm install  --legacy-peer-deps",
-    "expublish": "npm publish --tag experimental-version",
+    "expublish": "node ../publish.js -- exp",
     "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
     "variable:addignore": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
     "variable:convert": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
@@ -61,7 +61,10 @@
     "css:layer_config_validate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/validate.js  css_layer_config.json ./src/ ./assets",
     "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build",
     "css:layer_remove": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/remove_layer.js ./es ./assets css_layer_config.json --rewrite=src=es  --rewrite=assets=assets",
-    "css:audit": "npx css-audit  --common-css=common/common.module.css --dir src  --port 8085  --report "
+    "css:audit": "npx css-audit  --common-css=common/common.module.css --dir src  --port 8085  --report ",
+    "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
+    "publish": "node ../publish.js",
+    "check_package": "node ../check_dependencies.js"
   },
   "devDependencies": {
     "postcss-discard-comments": "^7.0.5",
@@ -80,9 +83,9 @@
     "@zohodesk/hooks": "2.0.8",
     "@zohodesk/icons": "1.2.8",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/svg": "1.3.3",
+    "@zohodesk/svg": "1.3.4",
     "@zohodesk/utils": "1.3.16",
-    "@zohodesk/variables": "1.3.0",
+    "@zohodesk/variables": "1.3.1",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
@@ -98,8 +101,8 @@
   },
   "peerDependencies": {
     "@zohodesk/icons": "1.2.8",
-    "@zohodesk/variables": "1.3.0",
-    "@zohodesk/svg": "1.3.3",
+    "@zohodesk/variables": "1.3.1",
+    "@zohodesk/svg": "1.3.4",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",

package/_react-cli.config.js

@@ -1,24 +0,0 @@
-exports.config = {
-  "preprocess": {
-    "runner": "./preprocess/index.js"
-  },
-  "css": {
-    "plugins": {
-      "hasRTL": true,
-      "cssVariableReplacement": true
-    },
-    "patterns": {
-      "cssVariableReplacement": [
-        "**/src/**",
-        "**/lib/**",
-        "**/es/**",
-        "!**/node_modules/**"
-      ],
-      "hasRTL": [
-        "**/src/**",
-        "!**/node_modules/**"
-      ]
-    },
-    "cssVariableReplacementConfig": "./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
-  }
-}