@zohodesk/dot 1.9.18 → 1.9.20

package/lib/list/SecondaryText/SecondaryText.module.css

@@ -1,17 +1,16 @@
 .paidUserIcon {
+  composes: d-relative d-align-middle from global;
   margin-inline-end: var(--zd_size5) ;
-  vertical-align: middle;
   bottom: var(--zd_size1) ;
-  position: relative;
   font-size: var(--zd_font_size8) ;
 }
 
 .icon {
-  display: block;
+  composes: d-block from global;
 }
 
 .disable {
-  cursor: not-allowed;
+  composes: d-cursor-not-allowed from global;
 }
 
 .textBold {
@@ -20,7 +19,7 @@
 }
 
 .link {
-  display: block
+  composes: d-block from global;
 }
 
 .ticketId,
@@ -37,9 +36,8 @@
 }
 
 .linkWithText {
+  composes: d-max-w-full d-cursor-pointer from global;
   color: var(--zdt_secondaryText_secondaryText_text);
-  max-width: 100% ;
-  cursor: pointer;
 }
 
 .linkWithText:hover {
@@ -48,11 +46,7 @@
 
 .secondaryText,
 .phoneNumber {
-  max-width: 100% ;
-}
-
-.secondaryText, .phoneNumber {
-  cursor: pointer;
+  composes: d-max-w-full d-cursor-pointer from global;
 }
 
 .ticketIdLink,
@@ -65,7 +59,7 @@
   color: var(--zdt_secondaryText_blue_text);
 } */
 .ticketIdLink {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
 .ticketIdLink:hover,
@@ -74,7 +68,7 @@
 }
 
 .primaryAccountNameCnt {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 
 /* status */
@@ -97,12 +91,12 @@
 }
 
 .priorityText {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 
 .departmentText {
+  composes: d-max-w-full from global;
   color: var(--zdt_secondaryText_secondaryText_text);
-  max-width: 100% ;
 }
 
 /* HappinessRating Style */
@@ -111,10 +105,10 @@
 }
 
 .happinessImg {
+  composes: d-align-middle from global;
   width: var(--zd_size13) ;
   margin-block:0 ;
   margin-inline:0 var(--zd_size4) ;
-  vertical-align: middle;
 }
 
 /* colors */

package/lib/list/SecondaryText/StatusText.js

@@ -85,9 +85,4 @@ var StatusText = /*#__PURE__*/function (_Component) {
 
 exports["default"] = StatusText;
 StatusText.propTypes = _propTypes.StatusText_propTypes;
-StatusText.defaultProps = _defaultProps.StatusText_defaultProps; // if (__DOCS__) {
-//   StatusText.docs = {
-//     folderName: 'List',
-//     componentGroup: 'StatusText'
-//   };
-// }
+StatusText.defaultProps = _defaultProps.StatusText_defaultProps;

package/lib/list/SecondaryText/TicketId.js

@@ -19,6 +19,8 @@ var _Common = require("@zohodesk/components/es/utils/Common");
 
 var _Link = _interopRequireDefault(require("../../Link/Link"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SecondaryTextModule = _interopRequireDefault(require("./SecondaryText.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -82,7 +84,7 @@ var TicketId = /*#__PURE__*/function (_Component) {
           _customProps$TicketId = customProps.TicketIdProps,
           TicketIdProps = _customProps$TicketId === void 0 ? {} : _customProps$TicketId;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_SecondaryTextModule["default"].ticketId, " ").concat(isLink ? _SecondaryTextModule["default"].ticketIdLink : '', " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(_SecondaryTextModule["default"].ticketId, " ").concat(isLink ? _SecondaryTextModule["default"].ticketIdLink : '', " ").concat(className ? className : '')),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle,
@@ -104,9 +106,4 @@ var TicketId = /*#__PURE__*/function (_Component) {
 
 exports["default"] = TicketId;
 TicketId.propTypes = _propTypes.TicketId_propTypes;
-TicketId.defaultProps = _defaultProps.TicketId_defaultProps; // if (__DOCS__) {
-//   TicketId.docs = {
-//     folderName: 'List',
-//     componentGroup: 'TicketId'
-//   };
-// }
+TicketId.defaultProps = _defaultProps.TicketId_defaultProps;

package/lib/list/SecondaryText/Website.js

@@ -96,9 +96,4 @@ var Website = /*#__PURE__*/function (_Component) {
 
 exports["default"] = Website;
 Website.propTypes = _propTypes.Website_propTypes;
-Website.defaultProps = _defaultProps.Website_defaultProps; // if (__DOCS__) {
-//   Website.docs = {
-//     folderName: 'List',
-//     componentGroup: 'WebsiteText'
-//   };
-// }
+Website.defaultProps = _defaultProps.Website_defaultProps;

package/lib/list/SecondaryText/__tests__/__snapshots__/AccountName.spec.js.snap

@@ -1,27 +1,27 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AccountName rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_baseline"
+    class="d-flex d-flex-row d-items-baseline"
     data-id="accountName"
     data-selector-id="container"
     data-test-id="accountName"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_baseline primaryAccountNameCnt"
+        class="d-flex d-flex-row d-items-baseline primaryAccountNameCnt"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink"
+          class="d-min-w-0 d-flex-shrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/lib/list/SecondaryText/__tests__/__snapshots__/ContactName.spec.js.snap

@@ -1,15 +1,15 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ContactName rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_baseline"
+    class="d-flex d-flex-row d-items-baseline"
     data-id="contactName"
     data-selector-id="container"
     data-test-id="contactName"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/lib/list/SecondaryText/__tests__/__snapshots__/DepartmentText.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DepartmentText rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/list/SecondaryText/__tests__/__snapshots__/Email.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Email rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/list/SecondaryText/__tests__/__snapshots__/HappinessRating.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`HappinessRating rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/list/SecondaryText/__tests__/__snapshots__/PhoneNumber.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PhoneNumber rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/list/SecondaryText/__tests__/__snapshots__/PriorityText.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PriorityText rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/list/SecondaryText/__tests__/__snapshots__/SecondaryText.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SecondaryText rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/list/SecondaryText/__tests__/__snapshots__/StatusText.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`StatusText rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/list/SecondaryText/__tests__/__snapshots__/TicketId.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TicketId rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/list/SecondaryText/__tests__/__snapshots__/Website.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Website rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/list/SecondryPanel/SecondryPanel.js

@@ -19,6 +19,8 @@ var _Dot = _interopRequireDefault(require("../Dot/Dot"));
 
 var _Container = _interopRequireDefault(require("@zohodesk/components/es/Layout/Container"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SecondryPanelModule = _interopRequireDefault(require("./SecondryPanel.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -65,7 +67,7 @@ var SecondryPanel = /*#__PURE__*/function (_Component) {
           children = _this$props.children,
           className = _this$props.className;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className
+        className: (0, _cssUtility.cn)(className)
       }, children);
     }
   }]);
@@ -197,9 +199,4 @@ var SecondryPanelItem = /*#__PURE__*/function (_Component4) {
 
 exports.SecondryPanelItem = SecondryPanelItem;
 SecondryPanelItem.propTypes = _propTypes.SecondryPanelItem_propTypes;
-SecondryPanelItem.defaultProps = _defaultProps.SecondryPanelItem_defaultProps; // if (__DOCS__) {
-//   SecondryPanel.docs = {
-//     folderName: 'List',
-//     componentGroup: 'SecondaryLayout'
-//   };
-// }
+SecondryPanelItem.defaultProps = _defaultProps.SecondryPanelItem_defaultProps;

package/lib/list/SecondryPanel/SecondryPanel.module.css

@@ -1,5 +1,5 @@
 .listItemContainer {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 .dottedStyle {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';

package/lib/list/SecondryPanel/__tests__/__snapshots__/SecondryPanel.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SecondryPanel rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/list/SentimentStatus/SentimentStatus.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SentimentStatusModule = _interopRequireDefault(require("./SentimentStatus.module.css"));
 
 var _icons = require("@zohodesk/icons");
@@ -60,7 +62,7 @@ var SentimentStatus = /*#__PURE__*/function (_React$Component) {
         positive: 'ZD-botPositive'
       };
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _SentimentStatusModule["default"].container,
+        className: (0, _cssUtility.cn)(_SentimentStatusModule["default"].container),
         "data-title": dataTitle
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: icons[type],
@@ -73,8 +75,4 @@ var SentimentStatus = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = SentimentStatus;
-SentimentStatus.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   SentimentStatus.docs = {
-//     componentGroup: ''
-//   };
-// }
+SentimentStatus.propTypes = _propTypes.propTypes;

package/lib/list/SentimentStatus/SentimentStatus.module.css

@@ -1,10 +1,10 @@
 .container {
+  composes: d-align-middle from global;
   margin-inline: var(--zd_size5) 0 ;
   margin-block:0 ;
-  vertical-align: middle;
   font-size: var(--zd_font_size10) ;
 }
 
 .sentimentIcon {
-  display: block;
+  composes: d-block from global;
 }

package/lib/list/SentimentStatus/__tests__/__snapshots__/SentimentStatus.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SentimentStatus rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/list/Subject/Subject.js

@@ -132,9 +132,4 @@ var Subject = /*#__PURE__*/function (_Component) {
 
 exports["default"] = Subject;
 Subject.propTypes = _propTypes.propTypes;
-Subject.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Subject.docs = {
-//     folderName: 'List',
-//     componentGroup: 'Subject'
-//   };
-// }
+Subject.defaultProps = _defaultProps.defaultProps;

package/lib/list/Subject/Subject.module.css

@@ -4,9 +4,9 @@
 
 .subject {
   composes: varClass;
+  composes: d-block from global;
   /* css:theme-validation:ignore */
   color: var(--subject_text);
-  display: block;
 }
 
 .dotted {
@@ -31,5 +31,5 @@
 }
 
 .cursorPointer {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }

package/lib/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Subject applies fontWeight prop 1`] = `
 <DocumentFragment>

package/lib/list/TagNew/TagNew.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TagNewModule = _interopRequireDefault(require("./TagNew.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -62,7 +64,7 @@ var TagNew = /*#__PURE__*/function (_Component) {
           onClick = _this$props.onClick,
           dataId = _this$props.dataId;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagNewModule["default"].tagStyle, " ").concat(animate ? _TagNewModule["default"].bounceIn : '', " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(_TagNewModule["default"].tagStyle, " ").concat(animate ? _TagNewModule["default"].bounceIn : '', " ").concat(className ? className : '')),
         onClick: onClick,
         "data-id": dataId,
         "data-test-id": dataId
@@ -75,9 +77,4 @@ var TagNew = /*#__PURE__*/function (_Component) {
 
 exports["default"] = TagNew;
 TagNew.propTypes = _propTypes.propTypes;
-TagNew.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   TagNew.docs = {
-//     folderName: 'List',
-//     componentGroup: 'TagNew'
-//   };
-// }
+TagNew.defaultProps = _defaultProps.defaultProps;

package/lib/list/TagNew/TagNew.module.css

@@ -7,19 +7,16 @@
   padding-block:0 ;
   composes: inlineFlex from '../listCommon.module.css';
   composes: alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-invisible d-cursor-pointer d-opacity-0 from global;
   transition: all var(--zd_transition2) ease 0s;
-  opacity: 0;
-  visibility: hidden;
   border-radius: 14px;
   background-color: var(--zdt_tagnew_default_bg);
   box-shadow: var(--zd_bs_tagnew_shadow);
   transform: scale(0);
-  cursor: pointer;
 }
 
 .bounceIn {
-  visibility: visible;
-  opacity: 1;
+  composes: d-visible d-opacity-100 from global;
   transform: scale(1);
 }
 

package/lib/list/TagNew/__tests__/__snapshots__/TagNew.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TagNew rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/list/Thread/Thread.js

@@ -17,6 +17,8 @@ var _icons = require("@zohodesk/icons");
 
 var _Button = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/Button"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ThreadModule = _interopRequireDefault(require("./Thread.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -76,7 +78,7 @@ var Thread = /*#__PURE__*/function (_Component) {
         name: "ZD-TK-thread",
         size: "9"
       }), /*#__PURE__*/_react["default"].createElement("span", {
-        className: _ThreadModule["default"].count
+        className: (0, _cssUtility.cn)(_ThreadModule["default"].count)
       }, count));
     }
   }]);
@@ -86,9 +88,4 @@ var Thread = /*#__PURE__*/function (_Component) {
 
 exports["default"] = Thread;
 Thread.propTypes = _propTypes.propTypes;
-Thread.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Thread.docs = {
-//     folderName: 'List',
-//     componentGroup: 'Thread'
-//   };
-// }
+Thread.defaultProps = _defaultProps.defaultProps;

package/lib/list/Thread/Thread.module.css

@@ -3,9 +3,8 @@
 }
 .container {
   composes: varClass;
-  position: relative;
+  composes: d-relative d-cursor-pointer from global;
   color: var(--icon_color);
-  cursor: pointer;
 }
 .container:hover {
   --icon_color: var(--zdt_thread_hover_iconText);

package/lib/list/Thread/__tests__/__snapshots__/Thread.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Thread rendering the defult props 1`] = `
 <DocumentFragment>
@@ -11,7 +11,7 @@ exports[`Thread rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons rtl basic icon-thread"
+      class="zd_font_icons ff icon-thread basic d-inline-block d-align-middle rtl"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/list/listCommon.module.css

@@ -1,6 +1,5 @@
 .inlineBlockMiddle {
-  display: inline-block;
-  vertical-align: middle;
+  composes: d-inline-block d-align-middle from global;
 }
 
 .inlineFlex {
@@ -24,14 +23,7 @@
 
 .statusColumn {
   composes: inlineBlockMiddle;
-}
-
-[dir=ltr] .statusColumn {
-  text-align: right;
-}
-
-[dir=rtl] .statusColumn {
-  text-align: left;
+  composes: d-text-right from global;
 }
 
 .classic .floatingIconContainer {
@@ -62,7 +54,7 @@
 
 .listContainer,
 .listLayoutContainer {
-  position: relative;
+  composes: d-relative from global;
   transition: var(--zd_transition3) all ease;
 }
 /*Active:ignore*/

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -31,6 +31,8 @@ var _CommonEmptyState = _interopRequireDefault(require("../../../emptystate/Comm
 
 var _StatusListItem = _interopRequireDefault(require("../StatusListItem/StatusListItem"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _commonModule = _interopRequireDefault(require("@zohodesk/components/es/common/common.module.css"));
 
 var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox"));
@@ -260,7 +262,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
       var containerClass = "".concat(isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? _StatusDropdownModule["default"].hoverIcon : '', " ").concat(isDisabled ? _commonModule["default"].disabled : isReadOnly ? _StatusDropdownModule["default"].readOnly : !isEditable ? _StatusDropdownModule["default"].cursorDefault : !showOnHover ? "".concat(_StatusDropdownModule["default"].cursor, " ").concat(hoverStyle ? hoverStyle : '') : "".concat(hoverStyle ? hoverStyle : '', " ").concat(_StatusDropdownModule["default"].cursorDefault), " ").concat(className ? className : '');
       var ariaTitleId = this.getAriaId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _StatusDropdownModule["default"].posRel,
+        className: (0, _cssUtility.cn)(_StatusDropdownModule["default"].posRel),
         onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
         onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
       }, renderTargetElement ? renderTargetElement({
@@ -405,19 +407,14 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           size: "small",
           getEmptyState: _this2.emptySearchSVG
         }) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _StatusDropdownModule["default"].loader
+          className: (0, _cssUtility.cn)(_StatusDropdownModule["default"].loader)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), renderFooterElement ? renderFooterElement : null));
       }) : null);
     }
   }]);
 
   return StatusDropdown;
-}(_react["default"].Component); // if (__DOCS__) {
-//   StatusDropdown.docs = {
-//     componentGroup: 'Molecule'
-//   };
-// }
-
+}(_react["default"].Component);
 
 exports.StatusDropdown = StatusDropdown;
 StatusDropdown.defaultProps = _defaultProps.defaultProps;

package/lib/list/status/StatusDropdown/StatusDropdown.module.css

@@ -1,8 +1,8 @@
 .container {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 .posRel {
-  position: relative;
+  composes: d-relative from global;
 }
 .maxHgt {
   max-height: var(--zd_size265) ;
@@ -22,7 +22,7 @@
   padding-block:0 ;
 }
 .overlay_arrow {
-  position: absolute;
+  composes: d-absolute from global;
   top: 50% ;
   transform: translateY(-50%) perspective(1px);
 }
@@ -51,19 +51,16 @@
   padding-block-end: var(--zd_size25) ;
 }
 .readOnly {
-  cursor: no-drop;
+  composes: d-cursor-no-drop from global;
 }
 .cursorDefault {
-  cursor: default;
+  composes: d-cursor-default from global;
 }
 .cursor {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
-[dir=ltr] .dropBoxContainer {
-  text-align: left;
-}
-[dir=rtl] .dropBoxContainer {
-  text-align: right;
+.dropBoxContainer {
+  composes: d-text-left from global;
 }
 .iconBox {
   margin-inline-end: var(--zd_size4) ;
@@ -76,7 +73,7 @@
   margin: 0 auto ;
 }
 .seperatedLine {
-  height: var(--zd_size1) ;
+  composes: d-h-px from global;
   margin-block: var(--zd_size9) var(--zd_size10) ;
   margin-inline:0 ;
   border-bottom: 1px solid var(--zdt_statusdropdown_line_border);