@zohodesk/dot 1.9.10 → 1.9.11

package/lib/DotProvider/__tests__/DotProvider.spec.js

@@ -464,5 +464,221 @@ describe('DotProvider Unit-Test', function () {
       }
     }, _callee16);
   })));
+  test('should not set zoom CSS variable when zoom is excluded', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
+    var _render12, container, el;
+
+    return _regeneratorRuntime().wrap(function _callee17$(_context17) {
+      while (1) {
+        switch (_context17.prev = _context17.next) {
+          case 0:
+            _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DotProvider["default"], {
+              id: "dot-provider",
+              excludeFeatures: ['zoom'],
+              baseZoomUnit: "2px"
+            }, "This is a DotProvider component")), container = _render12.container;
+            _context17.next = 3;
+            return (0, _react2.waitFor)(function () {});
+
+          case 3:
+            el = container.querySelector('#dot-provider');
+            expect(el.style.getPropertyValue('--zd_baseUnit')).toBe('');
+
+          case 5:
+          case "end":
+            return _context17.stop();
+        }
+      }
+    }, _callee17);
+  })));
+  test('should still set font CSS variable when zoom is excluded', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
+    var _render13, container;
+
+    return _regeneratorRuntime().wrap(function _callee18$(_context18) {
+      while (1) {
+        switch (_context18.prev = _context18.next) {
+          case 0:
+            _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DotProvider["default"], {
+              id: "dot-provider",
+              excludeFeatures: ['zoom'],
+              baseFontUnit: "18px"
+            }, "This is a DotProvider component")), container = _render13.container;
+            _context18.next = 3;
+            return (0, _react2.waitFor)(function () {
+              var el = container.querySelector('#dot-provider');
+              expect(el.style.getPropertyValue('--zd_baseFontUnit')).toBe('18px');
+            });
+
+          case 3:
+          case "end":
+            return _context18.stop();
+        }
+      }
+    }, _callee18);
+  })));
+  test('should not set font CSS variable when font is excluded', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
+    var _render14, container, el;
+
+    return _regeneratorRuntime().wrap(function _callee19$(_context19) {
+      while (1) {
+        switch (_context19.prev = _context19.next) {
+          case 0:
+            _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DotProvider["default"], {
+              id: "dot-provider",
+              excludeFeatures: ['font'],
+              baseFontUnit: "18px"
+            }, "This is a DotProvider component")), container = _render14.container;
+            _context19.next = 3;
+            return (0, _react2.waitFor)(function () {});
+
+          case 3:
+            el = container.querySelector('#dot-provider');
+            expect(el.style.getPropertyValue('--zd_baseFontUnit')).toBe('');
+
+          case 5:
+          case "end":
+            return _context19.stop();
+        }
+      }
+    }, _callee19);
+  })));
+  test('should still set zoom CSS variable when font is excluded', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
+    var _render15, container;
+
+    return _regeneratorRuntime().wrap(function _callee20$(_context20) {
+      while (1) {
+        switch (_context20.prev = _context20.next) {
+          case 0:
+            _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DotProvider["default"], {
+              id: "dot-provider",
+              excludeFeatures: ['font'],
+              baseZoomUnit: "2px"
+            }, "This is a DotProvider component")), container = _render15.container;
+            _context20.next = 3;
+            return (0, _react2.waitFor)(function () {
+              var el = container.querySelector('#dot-provider');
+              expect(el.style.getPropertyValue('--zd_baseUnit')).toBe('2px');
+            });
+
+          case 3:
+          case "end":
+            return _context20.stop();
+        }
+      }
+    }, _callee20);
+  })));
+  test('should not set zoom or font CSS variables when both are excluded', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
+    var _render16, container, el;
+
+    return _regeneratorRuntime().wrap(function _callee21$(_context21) {
+      while (1) {
+        switch (_context21.prev = _context21.next) {
+          case 0:
+            _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DotProvider["default"], {
+              id: "dot-provider",
+              excludeFeatures: ['font', 'zoom'],
+              baseZoomUnit: "2px",
+              baseFontUnit: "18px"
+            }, "This is a DotProvider component")), container = _render16.container;
+            _context21.next = 3;
+            return (0, _react2.waitFor)(function () {});
+
+          case 3:
+            el = container.querySelector('#dot-provider');
+            expect(el.style.getPropertyValue('--zd_baseUnit')).toBe('');
+            expect(el.style.getPropertyValue('--zd_baseFontUnit')).toBe('');
+
+          case 6:
+          case "end":
+            return _context21.stop();
+        }
+      }
+    }, _callee21);
+  })));
+  test('getAssetsPromises should expose resolved promises when features are excluded', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
+    var mockFunc, _mockFunc$mock$calls$, zoomSizePromise, fontSizePromise;
+
+    return _regeneratorRuntime().wrap(function _callee22$(_context22) {
+      while (1) {
+        switch (_context22.prev = _context22.next) {
+          case 0:
+            mockFunc = jest.fn();
+            (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DotProvider["default"], {
+              excludeFeatures: ['font', 'zoom'],
+              getAssetsPromises: mockFunc
+            }, "This is a DotProvider component"));
+            _context22.next = 4;
+            return (0, _react2.waitFor)(function () {});
+
+          case 4:
+            expect(mockFunc).toHaveBeenCalledWith(expect.objectContaining({
+              zoomSizePromise: expect.any(Promise),
+              fontSizePromise: expect.any(Promise)
+            }));
+            _mockFunc$mock$calls$ = mockFunc.mock.calls[0][0], zoomSizePromise = _mockFunc$mock$calls$.zoomSizePromise, fontSizePromise = _mockFunc$mock$calls$.fontSizePromise;
+            _context22.next = 8;
+            return expect(zoomSizePromise).resolves.toBeUndefined();
+
+          case 8:
+            _context22.next = 10;
+            return expect(fontSizePromise).resolves.toBeUndefined();
+
+          case 10:
+          case "end":
+            return _context22.stop();
+        }
+      }
+    }, _callee22);
+  })));
+  test('onAssetsDownloadSuccess should still fire when font and zoom are excluded', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
+    var mockFunc;
+    return _regeneratorRuntime().wrap(function _callee23$(_context23) {
+      while (1) {
+        switch (_context23.prev = _context23.next) {
+          case 0:
+            mockFunc = jest.fn();
+            (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DotProvider["default"], {
+              excludeFeatures: ['font', 'zoom'],
+              onAssetsDownloadSuccess: mockFunc
+            }, "This is a DotProvider component"));
+            _context23.next = 4;
+            return (0, _react2.waitFor)(function () {
+              expect(mockFunc).toHaveBeenCalled();
+            });
+
+          case 4:
+          case "end":
+            return _context23.stop();
+        }
+      }
+    }, _callee23);
+  })));
+  test('should not set theme attributes when theme is excluded', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
+    var _render17, container, el;
+
+    return _regeneratorRuntime().wrap(function _callee24$(_context24) {
+      while (1) {
+        switch (_context24.prev = _context24.next) {
+          case 0:
+            _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DotProvider["default"], {
+              id: "dot-provider",
+              excludeFeatures: ['theme'],
+              themeAppearance: "dark",
+              themeColor: "orange"
+            }, "This is a DotProvider component")), container = _render17.container;
+            _context24.next = 3;
+            return (0, _react2.waitFor)(function () {});
+
+          case 3:
+            el = container.querySelector('#dot-provider');
+            expect(el.getAttribute('data-mode')).toBeNull();
+            expect(el.getAttribute('data-theme')).toBeNull();
+
+          case 6:
+          case "end":
+            return _context24.stop();
+        }
+      }
+    }, _callee24);
+  })));
 }); // need to check error handling cases
 // onAssetsDownloadSuccess not called verification

package/lib/DotProvider/hooks/useDotProvider.js

@@ -51,6 +51,7 @@ function useDotProvider(_ref) {
       getProviderElement = _ref.getProviderElement,
       zoomUnitVariable = _ref.zoomUnitVariable,
       fontUnitVariable = _ref.fontUnitVariable,
+      excludeFeatures = _ref.excludeFeatures,
       themeAppearanceAttr = _ref.themeAppearanceAttr,
       themeColorAttr = _ref.themeColorAttr,
       onAssetsDownloadSuccess = _ref.onAssetsDownloadSuccess,
@@ -63,6 +64,7 @@ function useDotProvider(_ref) {
     getProviderElement: getProviderElement,
     zoomUnitVariable: zoomUnitVariable,
     fontUnitVariable: fontUnitVariable,
+    excludeFeatures: excludeFeatures,
     themeAppearanceAttr: themeAppearanceAttr,
     themeColorAttr: themeColorAttr
   });
@@ -70,15 +72,15 @@ function useDotProvider(_ref) {
       themeColorPromise = assetsPromises.themeColorPromise,
       zoomSizePromise = assetsPromises.zoomSizePromise,
       fontSizePromise = assetsPromises.fontSizePromise;
-  var allPromises = [].concat(_toConsumableArray(themeAppearancePromise), _toConsumableArray(themeColorPromise), [zoomSizePromise, fontSizePromise]);
   (0, _react.useLayoutEffect)(function () {
+    var allPromises = [].concat(_toConsumableArray(themeAppearancePromise), _toConsumableArray(themeColorPromise), [zoomSizePromise, fontSizePromise]);
     Promise.all(allPromises).then(function () {
       typeof onAssetsDownloadSuccess === 'function' && onAssetsDownloadSuccess();
     })["catch"](function (error) {
       console.error('Error loading assets:', error);
     });
     typeof getAssetsPromises === 'function' && getAssetsPromises(assetsPromises);
-  }, _toConsumableArray(allPromises));
+  }, [themeAppearancePromise, themeColorPromise, zoomSizePromise, fontSizePromise]);
 }
 
 var _default = useDotProvider;

package/lib/DotProvider/hooks/useDownloadAssetsAndSetAttr.js

@@ -35,32 +35,51 @@ function useDownloadAssetsAndSetAttr(_ref) {
       getProviderElement = _ref.getProviderElement,
       zoomUnitVariable = _ref.zoomUnitVariable,
       fontUnitVariable = _ref.fontUnitVariable,
+      excludeFeatures = _ref.excludeFeatures,
       themeAppearanceAttr = _ref.themeAppearanceAttr,
       themeColorAttr = _ref.themeColorAttr;
+  var excluded = (0, _react.useMemo)(function () {
+    return new Set(excludeFeatures);
+  }, [excludeFeatures]);
+  var needTheme = !excluded.has('theme');
+  var needZoom = !excluded.has('zoom');
+  var needFont = !excluded.has('font');
   var themeAppearancePromise = (0, _react.useMemo)(function () {
-    var themeAppearanceAssetPromise = (0, _themeAppearanceAssetPromise.getThemeAppearanceAssetPromise)({
+    if (!needTheme) {
+      return [Promise.resolve()];
+    }
+
+    return (0, _themeAppearanceAssetPromise.getThemeAppearanceAssetPromise)({
       themeAppearance: themeAppearance
     });
-    return themeAppearanceAssetPromise;
-  }, [themeAppearance]);
+  }, [themeAppearance, needTheme]);
   var themeColorPromise = (0, _react.useMemo)(function () {
-    var themeColorAssetPromise = (0, _themeColorAssetPromise.getThemeColorAssetPromise)({
+    if (!needTheme) {
+      return [Promise.resolve()];
+    }
+
+    return (0, _themeColorAssetPromise.getThemeColorAssetPromise)({
       themeAppearance: themeAppearance,
       themeColor: themeColor
     });
-    return themeColorAssetPromise;
-  }, [themeAppearance, themeColor]);
+  }, [themeAppearance, themeColor, needTheme]);
   var modifiedZoomUnitWithSuffix = (0, _react.useMemo)(function () {
     return !isNaN(Number(baseZoomUnit)) ? "".concat(Number(baseZoomUnit), "px") : baseZoomUnit;
   }, [baseZoomUnit]);
   var zoomSizePromise = (0, _react.useMemo)(function () {
-    var assetPromise = (0, _zoomSizeAssetPromise.getZoomSizeAssetPromise)();
-    return assetPromise;
-  }, []);
+    if (!needZoom) {
+      return Promise.resolve();
+    }
+
+    return (0, _zoomSizeAssetPromise.getZoomSizeAssetPromise)();
+  }, [needZoom]);
   var fontSizePromise = (0, _react.useMemo)(function () {
-    var assetPromise = (0, _fontSizeAssetPromise.getFontSizeAssetPromise)();
-    return assetPromise;
-  }, []);
+    if (!needFont) {
+      return Promise.resolve();
+    }
+
+    return (0, _fontSizeAssetPromise.getFontSizeAssetPromise)();
+  }, [needFont]);
   var combinedPromise = {
     themeAppearancePromise: themeAppearancePromise,
     themeColorPromise: themeColorPromise,
@@ -69,6 +88,10 @@ function useDownloadAssetsAndSetAttr(_ref) {
   };
 
   function setThemeAttribute() {
+    if (!needTheme) {
+      return;
+    }
+
     var themePromise = [].concat(_toConsumableArray(themeAppearancePromise), _toConsumableArray(themeColorPromise));
     Promise.all(themePromise).then(function () {
       var providerElement = getProviderElement();
@@ -83,6 +106,10 @@ function useDownloadAssetsAndSetAttr(_ref) {
   }
 
   function setZoomSizeAttribute() {
+    if (!needZoom) {
+      return;
+    }
+
     zoomSizePromise.then(function () {
       var providerElement = getProviderElement();
 
@@ -95,6 +122,10 @@ function useDownloadAssetsAndSetAttr(_ref) {
   }
 
   function setFontSizeAttribute() {
+    if (!needFont) {
+      return;
+    }
+
     fontSizePromise.then(function () {
       var providerElement = getProviderElement();
 
@@ -108,12 +139,12 @@ function useDownloadAssetsAndSetAttr(_ref) {
 
   (0, _react.useLayoutEffect)(function () {
     setThemeAttribute();
-  }, [themeAppearanceAttr, themeColorAttr, themeAppearance, themeColor, getProviderElement]);
+  }, [themeAppearanceAttr, themeColorAttr, themeAppearance, themeColor, getProviderElement, needTheme]);
   (0, _react.useLayoutEffect)(function () {
     setZoomSizeAttribute();
-  }, [zoomUnitVariable, modifiedZoomUnitWithSuffix, getProviderElement]);
+  }, [zoomUnitVariable, modifiedZoomUnitWithSuffix, zoomSizePromise, getProviderElement, needZoom]);
   (0, _react.useLayoutEffect)(function () {
     setFontSizeAttribute();
-  }, [fontUnitVariable, baseFontUnit, getProviderElement]);
+  }, [fontUnitVariable, baseFontUnit, fontSizePromise, getProviderElement, needFont]);
   return combinedPromise;
 }

package/lib/DotProvider/props/defaultProps.js

@@ -7,6 +7,8 @@ exports.defaultProps = void 0;
 
 var _constants = require("../utils/constants");
 
+var _utils = require("@zohodesk/utils");
+
 var defaultProps = {
   themeAppearance: _constants.THEME_APPEARANCE_LIGHT,
   themeColor: _constants.THEME_COLOR_BLUE,
@@ -14,6 +16,7 @@ var defaultProps = {
   baseFontUnit: '16px',
   zoomUnitVariable: '--zd_baseUnit',
   fontUnitVariable: '--zd_baseFontUnit',
+  excludeFeatures: _utils.DUMMY_ARRAY,
   themeAppearanceAttr: 'data-mode',
   themeColorAttr: 'data-theme'
 };

package/lib/DotProvider/props/propTypes.js

@@ -18,6 +18,7 @@ var propTypes = {
   baseFontUnit: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
   zoomUnitVariable: _propTypes["default"].string,
   fontUnitVariable: _propTypes["default"].string,
+  excludeFeatures: _propTypes["default"].arrayOf(_propTypes["default"].string),
   themeAppearanceAttr: _propTypes["default"].string,
   themeColorAttr: _propTypes["default"].string,
   providerRef: _propTypes["default"].func,

package/lib/Drawer/Drawer.module.css

@@ -97,10 +97,9 @@
 
 .header {
   min-height: var(--zd_size50) ;
+  padding-block: var(--zd_size10) ;
   background-color: var(--zdt_drawer_header_bg);
   border-bottom: solid 1px var(--zdt_drawer_header_border);
-  padding-top: var(--zd_size10) ;
-  padding-bottom: var(--zd_size10) ;
 }
 
 .subheader {
@@ -111,81 +110,35 @@
   color: var(--zdt_drawer_title_text);
   font-weight: var(--zd-fw-semibold);
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
+  padding-block:0 ;
+  padding-inline:0 var(--zd_size10) ;
   font-size: var(--zd_font_size16) ;
 }
 
-[dir=ltr] .title {
-  padding: 0 var(--zd_size10) 0 0 ;
+.smallHeaderPadding {
+  padding-inline:var(--zd_size30) var(--zd_size11) ;
 }
 
-[dir=rtl] .title {
-  padding: 0 0 0 var(--zd_size10) ;
+.smallContentPadding {
+  padding-inline:var(--zd_size30) ;
 }
 
-[dir=ltr] .smallHeaderPadding {
-  padding-right: var(--zd_size11) ;
-  padding-left: var(--zd_size30) ;
+.mediumHeaderPadding {
+  padding-inline:var(--zd_size30) var(--zd_size15) ;
 }
 
-[dir=rtl] .smallHeaderPadding {
-  padding-left: var(--zd_size11) ;
-  padding-right: var(--zd_size30) ;
+.mediumContentPadding {
+  padding-inline:var(--zd_size30) ;
 }
 
-[dir=ltr] .smallContentPadding {
-  padding-left: var(--zd_size30) ;
-  padding-right: var(--zd_size30) ;
+.largeHeaderPadding {
+  padding-inline:var(--zd_size50) var(--zd_size15) ;
 }
 
-[dir=rtl] .smallContentPadding {
-  padding-right: var(--zd_size30) ;
-  padding-left: var(--zd_size30) ;
+.largeContentPadding {
+  padding-inline:var(--zd_size50) ;
 }
 
-[dir=ltr] .mediumHeaderPadding {
-  padding-right: var(--zd_size15) ;
-  padding-left: var(--zd_size30) ;
+.iconWrapper {
+  margin-inline-end: var(--zd_size10) ;
 }
-
-[dir=rtl] .mediumHeaderPadding {
-  padding-left: var(--zd_size15) ;
-  padding-right: var(--zd_size30) ;
-}
-
-[dir=ltr] .mediumContentPadding {
-  padding-left: var(--zd_size30) ;
-  padding-right: var(--zd_size30) ;
-}
-
-[dir=rtl] .mediumContentPadding {
-  padding-right: var(--zd_size30) ;
-  padding-left: var(--zd_size30) ;
-}
-
-[dir=ltr] .largeHeaderPadding {
-  padding-right: var(--zd_size15) ;
-  padding-left: var(--zd_size50) ;
-}
-
-[dir=rtl] .largeHeaderPadding {
-  padding-left: var(--zd_size15) ;
-  padding-right: var(--zd_size50) ;
-}
-
-[dir=ltr] .largeContentPadding {
-  padding-left: var(--zd_size50) ;
-  padding-right: var(--zd_size50) ;
-}
-
-[dir=rtl] .largeContentPadding {
-  padding-right: var(--zd_size50) ;
-  padding-left: var(--zd_size50) ;
-}
-
-[dir=ltr] .iconWrapper {
-  margin-right: var(--zd_size10) ;
-}
-
-[dir=rtl] .iconWrapper {
-  margin-left: var(--zd_size10) ;
-}

package/lib/FormAction/FormAction.module.css

@@ -18,84 +18,50 @@
 }
 
 .largeFooter {
-  padding-top: var(--zd_size24) ;
-  padding-bottom: var(--zd_size24) ;
+  padding-block: var(--zd_size24) ;
 }
 
 .mediumFooter {
-  padding-top: var(--zd_size20) ;
-  padding-bottom: var(--zd_size20) ;
+  padding-block: var(--zd_size20) ;
 }
 
 .smallFooter {
-  padding-top: var(--zd_size10) ;
-  padding-bottom: var(--zd_size10) ;
+  padding-block: var(--zd_size10) ;
 }
 
-[dir=ltr] .largePadding {
-  padding-left: var(--zd_size60) ;
+.largePadding {
+  padding-inline-start: var(--zd_size60) ;
 }
 
-[dir=rtl] .largePadding {
-  padding-right: var(--zd_size60) ;
+.mediumPadding {
+  padding-inline-start: var(--zd_size50) ;
 }
 
-[dir=ltr] .mediumPadding {
-  padding-left: var(--zd_size50) ;
+.xmediumPadding {
+  padding-inline-start: var(--zd_size30) ;
 }
 
-[dir=rtl] .mediumPadding {
-  padding-right: var(--zd_size50) ;
+.smallPadding {
+  padding-inline-start: var(--zd_size25) ;
 }
 
-[dir=ltr] .xmediumPadding {
-  padding-left: var(--zd_size30) ;
-}
-
-[dir=rtl] .xmediumPadding {
-  padding-right: var(--zd_size30) ;
-}
-
-[dir=ltr] .smallPadding {
-  padding-left: var(--zd_size25) ;
-}
-
-[dir=rtl] .smallPadding {
-  padding-right: var(--zd_size25) ;
-}
-
-[dir=ltr] .xsmallPadding {
-  padding-left: var(--zd_size20) ;
-}
-
-[dir=rtl] .xsmallPadding {
-  padding-right: var(--zd_size20) ;
+.xsmallPadding {
+  padding-inline-start: var(--zd_size20) ;
 }
 
 .marginRight {
   composes: dinblk from '~@zohodesk/components/es/common/common.module.css';
 }
 
-[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: var(--zd_size15) ;
+.largeFooter .marginRight,
+.mediumFooter .marginRight {
+  margin-inline-end: var(--zd_size15) ;
 }
 
-[dir=ltr] .smallFooter .marginRight {
-  margin-right: var(--zd_size12) ;
+.smallFooter .marginRight {
+  margin-inline-end: var(--zd_size12) ;
 }
 
-[dir=rtl] .smallFooter .marginRight {
-  margin-left: var(--zd_size12) ;
+.marginRight:last-child {
+  margin-inline-end: 0 ;
 }
-
-[dir=ltr] .marginRight:last-child {
-  margin-right: 0 ;
-}
-
-[dir=rtl] .marginRight:last-child {
-  margin-left: 0 ;
-}

package/lib/ImportantNotes/ImportantNotes.module.css

@@ -10,15 +10,8 @@
 }
 
 .icon {
+  margin-block-start: var(--zd_size1) ;
+  margin-inline-end: var(--zd_size5) ;
   color: var(--zdt_importantnotes_icon);
   font-size: 0 ;
-  margin-top: var(--zd_size1) ;
 }
-
-[dir=ltr] .icon {
-  margin-right: var(--zd_size5) ;
-}
-
-[dir=rtl] .icon {
-  margin-left: var(--zd_size5) ;
-}

package/lib/Message/Message.module.css

@@ -14,6 +14,8 @@
 }
 
 .container {
+  padding-block: var(--zd_size13) ;
+  padding-inline:var(--zd_size50) var(--zd_size10) ;
   position: relative;
   display: inline-block;
   pointer-events: initial;
@@ -22,14 +24,6 @@
   background: var(--zdt_message_default_bg);
 }
 
-[dir=ltr] .container {
-  padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50) ;
-}
-
-[dir=rtl] .container {
-  padding: var(--zd_size13) var(--zd_size50) var(--zd_size13) var(--zd_size10) ;
-}
-
 .text {
   max-width: var(--zd_size480) ;
   display: inline-block;
@@ -91,13 +85,6 @@
   font-size: var(--zd_font_size16) ;
   display: inline-block;
   vertical-align: middle;
+  margin-inline-start: var(--zd_size10) ;
   cursor: pointer;
 }
-
-[dir=ltr] .close {
-  margin-left: var(--zd_size10) ;
-}
-
-[dir=rtl] .close {
-  margin-right: var(--zd_size10) ;
-}