@zohodesk/dot 1.0.0-beta.242 → 1.0.0-beta.244

package/README.md

@@ -2,6 +2,22 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.244
+
+- **ActionButton** - button element margin issue fix(safari browser).
+
+# 1.0.0-beta.243
+
+- **NewStar** - Position and Font Size Increase Issue Solved.
+
+- **MessageBanner** - `Night` and `Dark` mode issue fix. 
+
+- **IconButton** - customProps support.
+
+- **ToggleDropdDown** - Screen Reader fix.
+
+- **ListLayout** - Focus Indication fix.
+
 # 1.0.0-beta.242
 
 - `Accesssility`- Screen Reader fix.

package/assets/Appearance/dark/mode/dotDarkMode.module.css

@@ -328,7 +328,7 @@
 	--zdt_message_close_text: var(--zd_dark6);
 	
 	/* message banner */
-	--zdt_messagebanner_text: var(--dot_platinum);
+	--zdt_messagebanner_text: var(--dot_black);
 	--zdt_messagebanner_link_text: var(--zdt_cta_primary_text);
 	--zdt_messagebanner_close_text: var(--zd_smoke18);
 	--zdt_messagebanner_close_hover_bg: #ececc6;

package/assets/Appearance/pureDark/mode/dotPureDarkMode.module.css

@@ -328,7 +328,7 @@
 	--zdt_message_close_text: var(--zd_dark6);
 	
 	/* message banner */
-	--zdt_messagebanner_text: var(--dot_platinum);
+	--zdt_messagebanner_text: var(--dot_black);
 	--zdt_messagebanner_link_text: var(--zdt_cta_primary_text);
 	--zdt_messagebanner_close_text: var(--zd_smoke18);
 	--zdt_messagebanner_close_hover_bg: #ececc6;

package/es/ActionButton/ActionButton.module.css

@@ -31,6 +31,9 @@
 .arrowWrapper {
   transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
 }
+.contentBox, .arrowWrapper {
+  margin: 0;
+}
 .clickable {
   cursor: pointer;
 }

package/es/IconButton/IconButton.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -79,7 +80,8 @@ export default class IconButton extends React.Component {
       isNeedEffect,
       needButtonTag,
       a11y,
-      dataIsHtml
+      dataIsHtml,
+      customProps
     } = this.props;
     let {
       isPressed
@@ -97,7 +99,7 @@ export default class IconButton extends React.Component {
       hoverType: hoverType,
       isDisabled: isDisabled,
       isNeedEffect: isNeedEffect
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, /*#__PURE__*/React.createElement(Container, _extends({
       "aria-label": ariaLabel,
       "aria-haspopup": ariaHaspopup,
       "aria-expanded": ariaExpanded,
@@ -121,7 +123,7 @@ export default class IconButton extends React.Component {
       onFocus: this.triggerMouseOver,
       onBlur: this.onBlur,
       disabled: isDisabled
-    }, iconName ? /*#__PURE__*/React.createElement(Icon, {
+    }, customProps), iconName ? /*#__PURE__*/React.createElement(Icon, {
       isBold: isBold,
       size: iconSize,
       name: iconName,

package/es/IconButton/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   isNeedEffect: true,
   needButtonTag: true,
   a11y: {},
-  dataIsHtml: false
+  dataIsHtml: false,
+  customProps: {}
 };

package/es/IconButton/props/propTypes.js

@@ -27,5 +27,6 @@ export const propTypes = {
     ariaControls: PropTypes.string,
     ariaLabelledby: PropTypes.string
   }),
-  dataIsHtml: PropTypes.bool
+  dataIsHtml: PropTypes.bool,
+  customProps: PropTypes.object
 };

package/es/NewStar/NewStar.js

@@ -13,36 +13,38 @@ export default class NewStar extends React.Component {
     } = this.props;
     let alignPosition = {
       topRight: {
-        className: style.topRight,
-        align: 'right',
-        alignBox: 'row',
-        reverse: 'wrap'
+        className: style.topRight
+        // align: 'right',
+        // alignBox: 'row',
+        // reverse: 'wrap'
       },
+
       topLeft: {
-        className: style.topLeft,
-        align: 'left',
-        alignBox: 'row',
-        reverse: 'wrap'
+        className: style.topLeft
+        // align: 'left',
+        // alignBox: 'row',
+        // reverse: 'wrap'
       },
+
       bottomLeft: {
-        className: style.bottomLeft,
-        align: 'left',
-        alignBox: 'column-reverse',
-        reverse: 'wrap'
+        className: style.bottomLeft
+        // align: 'left',
+        // alignBox: 'column-reverse',
+        // reverse: 'wrap'
       },
+
       bottomRight: {
-        className: style.bottomRight,
-        align: 'right',
-        alignBox: 'column',
-        reverse: 'wrap-reverse'
+        className: style.bottomRight
+        // align: 'right',
+        // alignBox: 'column',
+        // reverse: 'wrap-reverse'
       }
     };
+
     return /*#__PURE__*/React.createElement(Container, {
-      alignBox: alignPosition[position].alignBox,
+      alignBox: "row",
       isCover: false,
-      className: `${style.star} ${alignPosition[position].className} ${customClass}`,
-      wrap: alignPosition[position].reverse,
-      align: alignPosition[position].align
+      className: `${style.star} ${alignPosition[position].className} ${customClass}`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-snippetStar",
       iconClass: `${style[palette]} ${style.starOne}`,

package/es/NewStar/NewStar.module.css

@@ -1,6 +1,5 @@
 .star {
   position: absolute;
-
   height: var(--zd_size20);
   width: var(--zd_size21);
 }
@@ -48,9 +47,15 @@
   transform: translate(-45%, 45%);
   left: 0;
 }
+
+.stars {
+  position: absolute;
+}
+
 [dir=ltr] .stars {
   animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
 }
+
 [dir=rtl] .stars {
   animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
 }
@@ -85,6 +90,66 @@
   animation-delay: 1s;
 }
 
+.topLeft .starOne{top:0}
+
+[dir=ltr] .topLeft .starOne{
+  left:0}
+
+[dir=rtl] .topLeft .starOne{right:0}
+.topLeft .starTwo{top:0}
+[dir=ltr] .topLeft .starTwo{
+  left:10px}
+[dir=rtl] .topLeft .starTwo{right:10px}
+.topLeft .starThree{top:10px}
+[dir=ltr] .topLeft .starThree{
+  left:0}
+[dir=rtl] .topLeft .starThree{right:0}
+
+.topRight .starOne{top:0}
+
+[dir=ltr] .topRight .starOne{
+  right:0}
+
+[dir=rtl] .topRight .starOne{left:0}
+.topRight .starTwo{top:0}
+[dir=ltr] .topRight .starTwo{
+  right:10px}
+[dir=rtl] .topRight .starTwo{left:10px}
+.topRight .starThree{top:10px}
+[dir=ltr] .topRight .starThree{
+  right:0}
+[dir=rtl] .topRight .starThree{left:0}
+
+.bottomLeft .starOne{bottom:0}
+
+[dir=ltr] .bottomLeft .starOne{
+  left:0}
+
+[dir=rtl] .bottomLeft .starOne{right:0}
+.bottomLeft .starTwo{bottom:0}
+[dir=ltr] .bottomLeft .starTwo{
+  left:10px}
+[dir=rtl] .bottomLeft .starTwo{right:10px}
+.bottomLeft .starThree{bottom:10px}
+[dir=ltr] .bottomLeft .starThree{
+  left:0}
+[dir=rtl] .bottomLeft .starThree{right:0}
+
+.bottomRight .starOne{bottom:0}
+
+[dir=ltr] .bottomRight .starOne{
+  right:0}
+
+[dir=rtl] .bottomRight .starOne{left:0}
+.bottomRight .starTwo{bottom:0}
+[dir=ltr] .bottomRight .starTwo{
+  right:10px}
+[dir=rtl] .bottomRight .starTwo{left:10px}
+.bottomRight .starThree{bottom:10px}
+[dir=ltr] .bottomRight .starThree{
+  right:0}
+[dir=rtl] .bottomRight .starThree{left:0}
+
 @keyframes twinkle {
   0% {
     opacity: 0.5;

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -711,7 +711,8 @@ export class ToggleDropDown extends Component {
             palette: palette,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: selectedId === item[idName]
+              ariaSelected: selectedId === item[idName],
+              ariaLabel: item[keyName]
             }
           }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
             key: listIndex,
@@ -732,7 +733,8 @@ export class ToggleDropDown extends Component {
             palette: palette,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: selectedId === item[idName]
+              ariaSelected: selectedId === item[idName],
+              ariaLabel: item[keyName]
             }
           }, ListItemProps));
         }));
@@ -778,7 +780,8 @@ export class ToggleDropDown extends Component {
           palette: palette,
           a11y: {
             role: isSearch ? 'option' : 'menuitem',
-            ariaSelected: selectedId === item[idName]
+            ariaSelected: selectedId === item[idName],
+            ariaLabel: item[keyName]
           }
         }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
           key: listIndex,
@@ -799,7 +802,8 @@ export class ToggleDropDown extends Component {
           palette: palette,
           a11y: {
             role: isSearch ? 'option' : 'menuitem',
-            ariaSelected: selectedId === item[idName]
+            ariaSelected: selectedId === item[idName],
+            ariaLabel: item[keyName]
           }
         }, ListItemProps)));
       }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {

package/es/list/ListLayout/ListLayout.js

@@ -42,6 +42,7 @@ export default class ListLayout extends Component {
       "data-title": dataTitle,
       tabIndex: "0",
       role: role,
+      "data-a11y-inside-focus": true,
       "aria-label": ariaLabel,
       "aria-setsize": ariaSetsize,
       "aria-posinset": ariaPosinset

package/lib/ActionButton/ActionButton.module.css

@@ -31,6 +31,9 @@
 .arrowWrapper {
   transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
 }
+.contentBox, .arrowWrapper {
+  margin: 0;
+}
 .clickable {
   cursor: pointer;
 }

package/lib/IconButton/IconButton.js

@@ -14,6 +14,7 @@ var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components
 var _RippleEffect = _interopRequireDefault(require("@zohodesk/components/lib/RippleEffect/RippleEffect"));
 var _IconButtonModule = _interopRequireDefault(require("./IconButton.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -109,7 +110,8 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         isNeedEffect = _this$props4.isNeedEffect,
         needButtonTag = _this$props4.needButtonTag,
         a11y = _this$props4.a11y,
-        dataIsHtml = _this$props4.dataIsHtml;
+        dataIsHtml = _this$props4.dataIsHtml,
+        customProps = _this$props4.customProps;
       var isPressed = this.state.isPressed;
       var ariaHaspopup = a11y.ariaHaspopup,
         ariaExpanded = a11y.ariaExpanded,
@@ -122,7 +124,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         hoverType: hoverType,
         isDisabled: isDisabled,
         isNeedEffect: isNeedEffect
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         "aria-label": ariaLabel,
         "aria-haspopup": ariaHaspopup,
         "aria-expanded": ariaExpanded,
@@ -146,7 +148,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         onFocus: this.triggerMouseOver,
         onBlur: this.onBlur,
         disabled: isDisabled
-      }, iconName ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, customProps), iconName ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         isBold: isBold,
         size: iconSize,
         name: iconName,

package/lib/IconButton/props/defaultProps.js

@@ -17,6 +17,7 @@ var defaultProps = {
   isNeedEffect: true,
   needButtonTag: true,
   a11y: {},
-  dataIsHtml: false
+  dataIsHtml: false,
+  customProps: {}
 };
 exports.defaultProps = defaultProps;

package/lib/IconButton/props/propTypes.js

@@ -33,5 +33,5 @@ var propTypes = (_propTypes = {
   ariaLabel: _propTypes2["default"].string,
   ariaControls: _propTypes2["default"].string,
   ariaLabelledby: _propTypes2["default"].string
-})), _defineProperty(_propTypes, "dataIsHtml", _propTypes2["default"].bool), _propTypes);
+})), _defineProperty(_propTypes, "dataIsHtml", _propTypes2["default"].bool), _defineProperty(_propTypes, "customProps", _propTypes2["default"].object), _propTypes);
 exports.propTypes = propTypes;

package/lib/NewStar/NewStar.js

@@ -38,36 +38,38 @@ var NewStar = /*#__PURE__*/function (_React$Component) {
         position = _this$props.position;
       var alignPosition = {
         topRight: {
-          className: _NewStarModule["default"].topRight,
-          align: 'right',
-          alignBox: 'row',
-          reverse: 'wrap'
+          className: _NewStarModule["default"].topRight
+          // align: 'right',
+          // alignBox: 'row',
+          // reverse: 'wrap'
         },
+
         topLeft: {
-          className: _NewStarModule["default"].topLeft,
-          align: 'left',
-          alignBox: 'row',
-          reverse: 'wrap'
+          className: _NewStarModule["default"].topLeft
+          // align: 'left',
+          // alignBox: 'row',
+          // reverse: 'wrap'
         },
+
         bottomLeft: {
-          className: _NewStarModule["default"].bottomLeft,
-          align: 'left',
-          alignBox: 'column-reverse',
-          reverse: 'wrap'
+          className: _NewStarModule["default"].bottomLeft
+          // align: 'left',
+          // alignBox: 'column-reverse',
+          // reverse: 'wrap'
         },
+
         bottomRight: {
-          className: _NewStarModule["default"].bottomRight,
-          align: 'right',
-          alignBox: 'column',
-          reverse: 'wrap-reverse'
+          className: _NewStarModule["default"].bottomRight
+          // align: 'right',
+          // alignBox: 'column',
+          // reverse: 'wrap-reverse'
         }
       };
+
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: alignPosition[position].alignBox,
+        alignBox: "row",
         isCover: false,
-        className: "".concat(_NewStarModule["default"].star, " ").concat(alignPosition[position].className, " ").concat(customClass),
-        wrap: alignPosition[position].reverse,
-        align: alignPosition[position].align
+        className: "".concat(_NewStarModule["default"].star, " ").concat(alignPosition[position].className, " ").concat(customClass)
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-snippetStar",
         iconClass: "".concat(_NewStarModule["default"][palette], " ").concat(_NewStarModule["default"].starOne),

package/lib/NewStar/NewStar.module.css

@@ -1,6 +1,5 @@
 .star {
   position: absolute;
-
   height: var(--zd_size20);
   width: var(--zd_size21);
 }
@@ -48,9 +47,15 @@
   transform: translate(-45%, 45%);
   left: 0;
 }
+
+.stars {
+  position: absolute;
+}
+
 [dir=ltr] .stars {
   animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
 }
+
 [dir=rtl] .stars {
   animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
 }
@@ -85,6 +90,66 @@
   animation-delay: 1s;
 }
 
+.topLeft .starOne{top:0}
+
+[dir=ltr] .topLeft .starOne{
+  left:0}
+
+[dir=rtl] .topLeft .starOne{right:0}
+.topLeft .starTwo{top:0}
+[dir=ltr] .topLeft .starTwo{
+  left:10px}
+[dir=rtl] .topLeft .starTwo{right:10px}
+.topLeft .starThree{top:10px}
+[dir=ltr] .topLeft .starThree{
+  left:0}
+[dir=rtl] .topLeft .starThree{right:0}
+
+.topRight .starOne{top:0}
+
+[dir=ltr] .topRight .starOne{
+  right:0}
+
+[dir=rtl] .topRight .starOne{left:0}
+.topRight .starTwo{top:0}
+[dir=ltr] .topRight .starTwo{
+  right:10px}
+[dir=rtl] .topRight .starTwo{left:10px}
+.topRight .starThree{top:10px}
+[dir=ltr] .topRight .starThree{
+  right:0}
+[dir=rtl] .topRight .starThree{left:0}
+
+.bottomLeft .starOne{bottom:0}
+
+[dir=ltr] .bottomLeft .starOne{
+  left:0}
+
+[dir=rtl] .bottomLeft .starOne{right:0}
+.bottomLeft .starTwo{bottom:0}
+[dir=ltr] .bottomLeft .starTwo{
+  left:10px}
+[dir=rtl] .bottomLeft .starTwo{right:10px}
+.bottomLeft .starThree{bottom:10px}
+[dir=ltr] .bottomLeft .starThree{
+  left:0}
+[dir=rtl] .bottomLeft .starThree{right:0}
+
+.bottomRight .starOne{bottom:0}
+
+[dir=ltr] .bottomRight .starOne{
+  right:0}
+
+[dir=rtl] .bottomRight .starOne{left:0}
+.bottomRight .starTwo{bottom:0}
+[dir=ltr] .bottomRight .starTwo{
+  right:10px}
+[dir=rtl] .bottomRight .starTwo{left:10px}
+.bottomRight .starThree{bottom:10px}
+[dir=ltr] .bottomRight .starThree{
+  right:0}
+[dir=rtl] .bottomRight .starThree{left:0}
+
 @keyframes twinkle {
   0% {
     opacity: 0.5;

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -755,7 +755,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               palette: palette,
               a11y: {
                 role: isSearch ? 'option' : 'menuitem',
-                ariaSelected: selectedId === item[idName]
+                ariaSelected: selectedId === item[idName],
+                ariaLabel: item[keyName]
               }
             }, ListItemWithIconProps)) : /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
               key: listIndex,
@@ -776,7 +777,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               palette: palette,
               a11y: {
                 role: isSearch ? 'option' : 'menuitem',
-                ariaSelected: selectedId === item[idName]
+                ariaSelected: selectedId === item[idName],
+                ariaLabel: item[keyName]
               }
             }, ListItemProps));
           }));
@@ -822,7 +824,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
             palette: palette,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: selectedId === item[idName]
+              ariaSelected: selectedId === item[idName],
+              ariaLabel: item[keyName]
             }
           }, ListItemWithIconProps)) : /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
             key: listIndex,
@@ -843,7 +846,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
             palette: palette,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: selectedId === item[idName]
+              ariaSelected: selectedId === item[idName],
+              ariaLabel: item[keyName]
             }
           }, ListItemProps)));
         }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/list/ListLayout/ListLayout.js

@@ -65,6 +65,7 @@ var ListLayout = /*#__PURE__*/function (_Component) {
         "data-title": dataTitle,
         tabIndex: "0",
         role: role,
+        "data-a11y-inside-focus": true,
         "aria-label": ariaLabel,
         "aria-setsize": ariaSetsize,
         "aria-posinset": ariaPosinset

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-beta.242",
+  "version": "1.0.0-beta.244",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -44,42 +44,54 @@
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-255",
+    "@zohodesk/components": "1.0.0-alpha-256",
     "@zohodesk/icons": "1.0.0-beta.109",
     "@zohodesk/svg": "1.0.0-beta.49",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/a11y": "1.3.4"
+    "@zohodesk/a11y": "1.3.7"
   },
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-255",
+    "@zohodesk/components": "1.0.0-alpha-256",
     "@zohodesk/icons": "1.0.0-beta.109",
     "@zohodesk/svg": "1.0.0-beta.48",
-    "@zohodesk/a11y": "1.3.4"
+    "@zohodesk/a11y": "1.3.7"
   },
   "react-cli": {
     "preprocess": {
       "runner": "./preprocess/index.js"
     },
-    "app": {
-      "removePropTypes": {
-        "removeImport": true
+    "css": {
+      "plugins": {
+        "hasRTL": true
+      },
+      "exclude": {
+        "rtl": [
+          "@zohodesk/icons",
+          "@zohodesk/variables",
+          "@zohodesk/components",
+          "/jsapps/components/lib"
+        ]
       }
     },
     "docs": {
       "disableES5Transpile": true,
       "componentFolder": "./src",
       "cssUniqueness": "false",
-      "rtlExclude": [
-        "@zohodesk/icons",
-        "@zohodesk/variables",
-        "@zohodesk/components",
-        "/jsapps/components/lib"
-      ],
-      "hasRTL": true,
+      "plugins": {
+        "hasRTL": true
+      },
+      "exclude": {
+        "rtl": [
+          "@zohodesk/icons",
+          "@zohodesk/variables",
+          "@zohodesk/components",
+          "/jsapps/components/lib"
+        ]
+      },
       "selectorReplace": {
         "before": [
           "data-mode"