@zohodesk/dot 1.0.0-test.239 → 1.0.0

package/es/index.js

@@ -1,7 +1,51 @@
-// export { default as React } from 'react';
-// export { default as ReactDOM } from 'react-dom';
-// export { renderToStaticMarkup } from 'react-dom/server';
-export * from './docs/generalDocs.js';
-export * from './docs/lookupDocs.js';
-export * from './docs/setupDocs.js';
-export * from './docs/formDocs.js';
+export { default as ActionButton } from './ActionButton/ActionButton';
+export { default as AutoClose } from './actions/AutoClose';
+export * from './alert';
+export { default as AlphabeticList } from './AlphabeticList/AlphabeticList';
+export { default as Attachment } from './Attachment/Attachment';
+export { default as AttachmentViewer } from './AttachmentViewer/AttachmentViewer';
+export * from './avatar';
+export { default as ChannelIcon } from './ChannelIcon/ChannelIcon';
+import * as _Drawer from './Drawer/Drawer';
+export { _Drawer as Drawer };
+export { default as ToggleDropDown } from './dropdown/ToggleDropDown/ToggleDropDown';
+export { default as CommonEmptyState } from './emptystate/CommonEmptyState/CommonEmptyState';
+export { default as EditionPage } from './emptystate/EditionPage/EditionPage';
+import * as _errorstate from './errorstate';
+export { _errorstate as errorstate };
+export { default as ExternalLink } from './ExternalLink/ExternalLink';
+export { default as FlipCard } from './FlipCard/FlipCard';
+import * as _fields from './form/fields';
+export { _fields as fields };
+import * as _fields_layout from './form/layout/';
+export { _fields_layout as fields_layout };
+export { default as FormAction } from './FormAction/FormAction';
+export { default as FreezeLayer } from './FreezeLayer/FreezeLayer';
+export { default as IconButton } from './IconButton/IconButton';
+export { default as Image } from './Image/Image';
+export { default as ImportantNotes } from './ImportantNotes/ImportantNotes';
+import * as _SetupDetailLayout from './layout/SetupDetailLayout';
+export { _SetupDetailLayout as SetupDetailLayout };
+import * as _SubtabLayout from './layout/SubtabLayout';
+export { _SubtabLayout as SubtabLayout };
+export { default as Link } from './Link/Link';
+import * as _list from './list';
+export { _list as list };
+export { default as Loader } from './Loader/Loader';
+export { default as Message, MessageUI, MessageNew } from './Message/Message';
+export { default as MessageBanner } from './MessageBanner/MessageBanner';
+export { default as NewStar } from './NewStar/NewStar';
+export { default as PlusIcon } from './PlusIcon/PlusIcon';
+import * as _Provider from './Provider/Config';
+export { _Provider as Provider };
+import * as _lookup from './lookup';
+export { _lookup as lookup };
+export { default as Separator } from './Separator/Separator';
+import * as _setup from './setup';
+export { _setup as setup };
+import * as _svg from './svg';
+export { _svg as svg };
+export { default as ToastMessage } from './ToastMessage/ToastMessage';
+export { default as Upload } from './Upload/Upload';
+import * as _version from './version2';
+export { _version as version2 };

package/es/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { SetupDetailLayout_defaultProps, SetupHeader_defaultProps, SetupContent_defaultProps, SetupFooter_defaultProps } from './props/defaultProps';
 import { SetupDetailLayout_propTypes, SetupHeader_propTypes, SetupContent_propTypes, SetupFooter_propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import style from './SetupDetailLayout.module.css';
 export default class SetupDetailLayout extends React.Component {
   constructor(props) {
@@ -12,6 +12,7 @@ export default class SetupDetailLayout extends React.Component {
     };
     this.toggleHelpInfo = this.toggleHelpInfo.bind(this);
   }
+
   toggleHelpInfo() {
     let {
       isHelpInfoOpen
@@ -20,6 +21,7 @@ export default class SetupDetailLayout extends React.Component {
       isHelpInfoOpen: !isHelpInfoOpen
     });
   }
+
   render() {
     let {
       isHelpInfoOpen
@@ -29,8 +31,12 @@ export default class SetupDetailLayout extends React.Component {
       needHelpInfo,
       getHelpInfo,
       helpInfoTitle,
-      dataId
+      dataId,
+      i18nKeys
     } = this.props;
+    const {
+      closeText = 'Close'
+    } = i18nKeys;
     return /*#__PURE__*/React.createElement(Container, {
       isScrollAttribute: true,
       dataId: dataId
@@ -41,6 +47,7 @@ export default class SetupDetailLayout extends React.Component {
           needHelpInfo: needHelpInfo
         });
       }
+
       return child;
     }), getHelpInfo ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.popup} ${isHelpInfoOpen ? style.open : style.close}`,
@@ -59,7 +66,9 @@ export default class SetupDetailLayout extends React.Component {
     }, helpInfoTitle), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("span", {
       onClick: this.toggleHelpInfo,
       className: style.infoClose,
-      "data-id": `${dataId}_close`
+      "data-title": closeText,
+      "data-id": `${dataId}_close`,
+      "data-test-id": `${dataId}_close`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-close"
     }))))), /*#__PURE__*/React.createElement(Box, {
@@ -68,18 +77,20 @@ export default class SetupDetailLayout extends React.Component {
       className: style.infoFooter
     }, getHelpInfo()))) : null);
   }
+
 }
 SetupDetailLayout.propTypes = SetupDetailLayout_propTypes;
-SetupDetailLayout.defaultProps = SetupDetailLayout_defaultProps;
-if (false) {
-  SetupDetailLayout.docs = {
-    componentGroup: 'Template'
-  };
-}
+SetupDetailLayout.defaultProps = SetupDetailLayout_defaultProps; // if (__DOCS__) {
+//   SetupDetailLayout.docs = {
+//     componentGroup: 'Template'
+//   };
+// }
+
 export class SetupHeader extends Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       title,
@@ -94,8 +105,13 @@ export class SetupHeader extends Component {
       rightClassName,
       isCustomizedHeader,
       headerCustomStyle,
-      dataId
+      dataId,
+      i18nKeys
     } = this.props;
+    const {
+      infoText = 'Help',
+      backText = 'Back'
+    } = i18nKeys;
     return /*#__PURE__*/React.createElement(Box, {
       className: isCustomizedHeader === true ? headerCustomStyle : style.header,
       dataId: dataId
@@ -107,7 +123,9 @@ export class SetupHeader extends Component {
     }, needBack ? /*#__PURE__*/React.createElement("span", {
       className: style.backIcon,
       onClick: onBackClick,
-      "data-id": `${dataId}_back`
+      "data-title": backText,
+      "data-id": `${dataId}_back`,
+      "data-test-id": `${dataId}_back`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-back"
     })) : null), /*#__PURE__*/React.createElement(Box, {
@@ -136,17 +154,22 @@ export class SetupHeader extends Component {
     }, /*#__PURE__*/React.createElement("span", {
       className: style.helpInfo,
       onClick: openHelpInfo,
-      "data-id": `${dataId}_info`
+      "data-title": infoText,
+      "data-id": `${dataId}_info`,
+      "data-test-id": `${dataId}_info`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-info31"
     }))) : /*#__PURE__*/React.createElement("span", {
       className: `${style.helpInfo} ${style.mr15}`,
       onClick: openHelpInfo,
-      "data-id": `${dataId}_info`
+      "data-title": infoText,
+      "data-id": `${dataId}_info`,
+      "data-test-id": `${dataId}_info`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-info31"
     }))) : null));
   }
+
 }
 SetupHeader.propTypes = SetupHeader_propTypes;
 SetupHeader.defaultProps = SetupHeader_defaultProps;
@@ -154,6 +177,7 @@ export class SetupContent extends Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       children,
@@ -169,6 +193,7 @@ export class SetupContent extends Component {
       dataId: dataId
     }, children);
   }
+
 }
 SetupContent.propTypes = SetupContent_propTypes;
 SetupContent.defaultProps = SetupContent_defaultProps;
@@ -176,6 +201,7 @@ export class SetupFooter extends Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       children,
@@ -185,6 +211,7 @@ export class SetupFooter extends Component {
       dataId: dataId
     }, children);
   }
+
 }
 SetupFooter.propTypes = SetupFooter_propTypes;
 SetupFooter.defaultProps = SetupFooter_defaultProps;

package/es/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -1,15 +1,15 @@
 .header {
-  height: var(--zd_size50);
+  height: var(--zd_size50) ;
   z-index: 2;
   border-bottom: 1px solid var(--zdt_setupdetail_header_border);
 }
 .back {
-  width: var(--zd_size60);
+  width: var(--zd_size60) ;
 }
 .backIcon {
-  height: var(--zd_size30);
-  width: var(--zd_size30);
-  font-size: var(--zd_font_size12);
+  height: var(--zd_size30) ;
+  width: var(--zd_size30) ;
+  font-size: var(--zd_font_size12) ;
   display: inline-block;
   color: var(--zdt_setupdetail_backicon);
   line-height: var(--zd_size30);
@@ -18,27 +18,27 @@
   cursor: pointer;
 }
 [dir=ltr] .backIcon {
-  margin-left: var(--zd_size19);
+  margin-left: var(--zd_size19) ;
 }
 [dir=rtl] .backIcon {
-  margin-right: var(--zd_size19);
+  margin-right: var(--zd_size19) ;
 }
 
 .backIcon:hover {
   background-color: var(--zdt_setupdetail_hover_backicon_bg);
 }
 .title {
-  font-size: var(--zd_font_size16);
+  font-size: var(--zd_font_size16) ;
   line-height: var(--zd_size16);
   font-family: var(--zd_semibold);
   color: var(--zdt_setupdetail_backicon);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .title {
-  padding-right: var(--zd_size12);
+  padding-right: var(--zd_size12) ;
 }
 [dir=rtl] .title {
-  padding-left: var(--zd_size12);
+  padding-left: var(--zd_size12) ;
 }
 
 .rightPanel {
@@ -49,19 +49,19 @@
   z-index: 10;
 }
 [dir=ltr] .helpInfoCont {
-  right: 0;
-  padding: var(--zd_size12) var(--zd_size15) 0 0;
+  right: 0 ;
+  padding: var(--zd_size12) var(--zd_size15) 0 0 ;
 }
 [dir=rtl] .helpInfoCont {
-  left: 0;
-  padding: var(--zd_size12) 0 0 var(--zd_size15);
+  left: 0 ;
+  padding: var(--zd_size12) 0 0 var(--zd_size15) ;
 }
 .helpInfo {
   line-height: var(--zd_size26);
-  height: var(--zd_size28);
-  width: var(--zd_size28);
+  height: var(--zd_size28) ;
+  width: var(--zd_size28) ;
   color: var(--zdt_setupdetail_helpinfo_text);
-  font-size: var(--zd_font_size11);
+  font-size: var(--zd_font_size11) ;
   display: inline-block;
   border: 1px solid var(--zdt_setupdetail_helpinfo);
   border-radius: 2px;
@@ -69,37 +69,37 @@
   cursor: pointer;
 }
 [dir=ltr] .mr15 {
-  margin-right: var(--zd_size15);
+  margin-right: var(--zd_size15) ;
 }
 [dir=rtl] .mr15 {
-  margin-left: var(--zd_size15);
+  margin-left: var(--zd_size15) ;
 }
 
 .content {
   z-index: 1;
 }
 [dir=ltr] .padding {
-  padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size60);
+  padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size60) ;
 }
 [dir=rtl] .padding {
-  padding: var(--zd_size10) var(--zd_size60) var(--zd_size10) var(--zd_size25);
+  padding: var(--zd_size10) var(--zd_size60) var(--zd_size10) var(--zd_size25) ;
 }
 .popup {
   z-index: 3;
   position: absolute;
-  top: 0;
-  bottom: 0;
-  width: var(--zd_size330);
+  top: 0 ;
+  bottom: 0 ;
+  width: var(--zd_size330) ;
   transition: transform var(--zd_transition3);
   border: 1px solid var(--zdt_setupdetail_popup_border);
   background-color: var(--zdt_setupdetail_popup_bg);
 }
 [dir=ltr] .popup {
-  right: 0;
+  right: 0 ;
   transform: translateX(100%);
 }
 [dir=rtl] .popup {
-  left: 0;
+  left: 0 ;
   transform: translateX(-100%);
 }
 .popup.open {
@@ -111,15 +111,15 @@
 
 .infoHeader {
   color: var(--zdt_setupdetail_infoheader_text);
-  padding: var(--zd_size10) var(--zd_size20) var(--zd_size11);
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size11) ;
   border-bottom: 1px solid var(--zdt_setupdetail_popup_border);
   background-color: var(--zdt_setupdetail_infoheader_bg);
 }
 
 .infoIcon {
-  height: var(--zd_size26);
-  width: var(--zd_size26);
-  font-size: var(--zd_font_size12);
+  height: var(--zd_size26) ;
+  width: var(--zd_size26) ;
+  font-size: var(--zd_font_size12) ;
   line-height: var(--zd_size24);
   text-align: center;
   border: 1px solid var(--zdt_setupdetail_infoicon_border);
@@ -128,25 +128,25 @@
 
 .infoText {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  font-size: var(--zd_font_size13);
+  font-size: var(--zd_font_size13) ;
 }
 
 [dir=ltr] .infoText {
-  margin-left: var(--zd_size8);
-  margin-right: var(--zd_size8);
+  margin-left: var(--zd_size8) ;
+  margin-right: var(--zd_size8) ;
 }
 
 [dir=rtl] .infoText {
-  margin-right: var(--zd_size8);
-  margin-left: var(--zd_size8);
+  margin-right: var(--zd_size8) ;
+  margin-left: var(--zd_size8) ;
 }
 
 .infoClose {
-  font-size: var(--zd_font_size28);
+  font-size: var(--zd_font_size28) ;
   color: var(--zdt_setupdetail_infoclose);
   cursor: pointer;
 }
 
 .infoFooter {
-  padding: var(--zd_size10) var(--zd_size20);
+  padding: var(--zd_size10) var(--zd_size20) ;
 }

package/es/layout/SetupDetailLayout/props/defaultProps.js

@@ -1,13 +1,15 @@
 export const SetupDetailLayout_defaultProps = {
   helpInfoTitle: 'Page Tips',
   needHelpInfo: false,
-  dataId: 'SetupDetailLayout'
+  dataId: 'SetupDetailLayout',
+  i18nKeys: {}
 };
 export const SetupHeader_defaultProps = {
   needBack: false,
   needHelpInfo: false,
   needHelpInfoWrapper: false,
-  dataId: 'SetupHeader'
+  dataId: 'SetupHeader',
+  i18nKeys: {}
 };
 export const SetupContent_defaultProps = {
   needPadding: true,

package/es/layout/SetupDetailLayout/props/propTypes.js

@@ -4,7 +4,10 @@ export const SetupDetailLayout_propTypes = {
   dataId: PropTypes.string,
   getHelpInfo: PropTypes.func,
   helpInfoTitle: PropTypes.string,
-  needHelpInfo: PropTypes.bool
+  needHelpInfo: PropTypes.bool,
+  i18nKeys: PropTypes.shape({
+    closeText: PropTypes.string
+  })
 };
 export const SetupHeader_propTypes = {
   dataId: PropTypes.string,
@@ -19,7 +22,11 @@ export const SetupHeader_propTypes = {
   onBackClick: PropTypes.func,
   openHelpInfo: PropTypes.func,
   rightClassName: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    infoText: PropTypes.string,
+    backText: PropTypes.string
+  })
 };
 export const SetupContent_propTypes = {
   children: PropTypes.element,

package/es/layout/SubtabLayout/SubtabLayout.js

@@ -1,4 +1,5 @@
 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 { SubtabHeader_propTypes, SubtabFooter_propTypes, SubtabContent_propTypes, SubtabLayout_propTypes } from './props/propTypes';
 import { SubtabHeader_defaultProps, SubtabFooter_defaultProps, SubtabContent_defaultProps, SubtabLayout_defaultProps } from './props/defaultProps';
@@ -57,6 +58,7 @@ export class SubtabHeader extends React.Component {
       className: style.aside
     }, getRightPlaceHolder))));
   }
+
 }
 SubtabHeader.propTypes = SubtabHeader_propTypes;
 SubtabHeader.defaultProps = SubtabHeader_defaultProps;
@@ -89,6 +91,7 @@ export class SubtabFooter extends React.Component {
       className: rightClassName
     }, getRightFooterPlaceHolder) : null);
   }
+
 }
 SubtabFooter.propTypes = SubtabFooter_propTypes;
 SubtabFooter.defaultProps = SubtabFooter_defaultProps;
@@ -111,6 +114,7 @@ export class SubtabContent extends React.Component {
       dataId: dataId
     }, children);
   }
+
 }
 SubtabContent.propTypes = SubtabContent_propTypes;
 SubtabContent.defaultProps = SubtabContent_defaultProps;
@@ -130,11 +134,11 @@ export default class SubtabLayout extends React.Component {
       }
     }), children);
   }
+
 }
 SubtabLayout.defaultProps = SubtabLayout_defaultProps;
-SubtabLayout.propTypes = SubtabLayout_propTypes;
-if (false) {
-  SubtabLayout.docs = {
-    componentGroup: 'Template'
-  };
-}
+SubtabLayout.propTypes = SubtabLayout_propTypes; // if (__DOCS__) {
+//   SubtabLayout.docs = {
+//     componentGroup: 'Template'
+//   };
+// }

package/es/layout/SubtabLayout/SubtabLayout.module.css

@@ -1,21 +1,23 @@
 .varClass {
   --borderColor: var(--zdt_subtablayout_border);
 }
+
 .tabHead,
 .shadowStyle {
   position: relative;
   composes: varClass;
 }
+
 .tabHead, .shadowStyle {
   background: var(--zdt_subtablayout_tabhead_bg);
 }
 
 [dir=ltr] .left {
-  margin-right: var(--zd_size15);
+  margin-right: var(--zd_size15) ;
 }
 
 [dir=rtl] .left {
-  margin-left: var(--zd_size15);
+  margin-left: var(--zd_size15) ;
 }
 
 .plusIconLine {
@@ -26,46 +28,47 @@
 .plusIconLine::before {
   position: absolute;
   content: '';
-  width: var(--zd_size1);
-  height: var(--zd_size28);
-  top: var(--zd_size38);
+  width: var(--zd_size1) ;
+  height: var(--zd_size28) ;
+  top: var(--zd_size38) ;
   z-index: -1;
   background: var(--zdt_subtablayout_plusicon_bg);
 }
 
 [dir=ltr] .plusIconLine::before {
-  left: var(--zd_size20);
+  left: var(--zd_size20) ;
 }
 
 [dir=rtl] .plusIconLine::before {
-  right: var(--zd_size20);
+  right: var(--zd_size20) ;
 }
 
 .primary_borderStyle, .secondary_borderStyle {
   border-bottom: 1px solid var(--zdt_subtablayout_primary_border);
 }
+
 .tertiary_borderStyle {
   border-bottom: 1px solid var(--borderColor);
 }
 
 .shadowStyle::before {
-  bottom: 0;
+  bottom: 0 ;
   content: '';
   position: absolute;
-  top: var(--zd_size20);
+  top: var(--zd_size20) ;
   z-index: -1;
-  box-shadow: 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow);
+  box-shadow: var(--zd_bs_subtablayout_shadow);
   border-radius: 100px/10px;
 }
 
 [dir=ltr] .shadowStyle::before {
-  left: var(--zd_size50);
-  right: var(--zd_size50);
+  left: var(--zd_size50) ;
+  right: var(--zd_size50) ;
 }
 
 [dir=rtl] .shadowStyle::before {
-  right: var(--zd_size50);
-  left: var(--zd_size50);
+  right: var(--zd_size50) ;
+  left: var(--zd_size50) ;
 }
 
 .aside {
@@ -74,73 +77,89 @@
 
 .title {
   color: var(--zdt_subtablayout_title_text);
-  font-size: var(--zd_font_size15);
+  font-size: var(--zd_font_size15) ;
 }
 
 .label {
-  font-size: var(--zd_font_size12);
+  font-size: var(--zd_font_size12) ;
   color: var(--zdt_subtablayout_label_text);
 }
 
 .primary, .primary_peek, .secondary, .secondary_peek, .primary_detailFooter, .primary_peekFooter, .secondary_detailFooter, .secondary_peekFooter {
-  padding-top: var(--zd_size27);
-  padding-bottom: var(--zd_size26);
+  padding-top: var(--zd_size27) ;
+  padding-bottom: var(--zd_size26) ;
 }
 
 [dir=ltr] .primary, [dir=ltr] .primary_peek, [dir=ltr] .secondary, [dir=ltr] .secondary_peek, [dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter, [dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
-  padding-left: var(--zd_size25);
+  padding-left: var(--zd_size25) ;
 }
 
 [dir=rtl] .primary, [dir=rtl] .primary_peek, [dir=rtl] .secondary, [dir=rtl] .secondary_peek, [dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter, [dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
-  padding-right: var(--zd_size25);
+  padding-right: var(--zd_size25) ;
 }
+
 [dir=ltr] .primary, [dir=ltr] .primary_peek {
-  padding-right: var(--zd_size25);
+  padding-right: var(--zd_size25) ;
 }
+
 [dir=rtl] .primary, [dir=rtl] .primary_peek {
-  padding-left: var(--zd_size25);
+  padding-left: var(--zd_size25) ;
 }
+
 [dir=ltr] .secondary, [dir=ltr] .secondary_peek {
-  padding-right: var(--zd_size115);
+  padding-right: var(--zd_size115) ;
 }
+
 [dir=rtl] .secondary, [dir=rtl] .secondary_peek {
-  padding-left: var(--zd_size115);
+  padding-left: var(--zd_size115) ;
 }
+
 [dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter {
-  padding-right: var(--zd_size25);
+  padding-right: var(--zd_size25) ;
 }
+
 [dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter {
-  padding-left: var(--zd_size25);
+  padding-left: var(--zd_size25) ;
 }
+
 [dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
-  padding-right: var(--zd_size115);
+  padding-right: var(--zd_size115) ;
 }
+
 [dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
-  padding-left: var(--zd_size115);
+  padding-left: var(--zd_size115) ;
 }
+
 .tertiary,
 .tertiary_peek {
-  height: var(--zd_size50);
+  height: var(--zd_size50) ;
 }
+
 .tertiary, .tertiary_detailFooter {
-  padding: 0 var(--zd_size65);
+  padding: 0 var(--zd_size65) ;
 }
+
 .tertiary_peek, .tertiary_peekFooter {
-  padding: 0 var(--zd_size42);
+  padding: 0 var(--zd_size42) ;
 }
+
 .cursor {
   cursor: pointer;
 }
+
 .footer {
   composes: varClass;
   border-top: 1px solid var(--borderColor);
 }
+
 .medium {
-  height: var(--zd_size40);
+  height: var(--zd_size40) ;
 }
+
 .large {
-  height: var(--zd_size45);
+  height: var(--zd_size45) ;
 }
+
 .xlarge {
-  height: var(--zd_size50);
-}
+  height: var(--zd_size50) ;
+}