@zohodesk/dot 1.9.17 → 1.9.19

package/es/form/layout/Field/Field.module.css

@@ -1,5 +1,5 @@
 .container {
-  min-width: 0 ;
+  composes: d-min-w-0 from global;
 }
 .half {
   flex: 1 1 50% ;
@@ -9,14 +9,11 @@
   flex: 1 1 100% ;
 }
 .fieldContaier {
-  display: inline-block;
-  width: 100% ;
-  vertical-align: middle;
+  composes: d-inline-block d-w-full d-align-middle from global;
 }
 .rowBreak {
-  display: block;
-  width: 100% ;
+  composes: d-block d-w-full from global;
 }
 .singleColumn {
-  width: 100% ;
+  composes: d-w-full from global;
 }

package/es/form/layout/Field/__tests__/__snapshots__/Field.spec.js.snap

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

package/es/form/layout/Section/Section.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./ModuleFormSection.module.css";
 export default class Section extends Component {
   constructor(props) {
@@ -19,19 +20,15 @@ export default class Section extends Component {
     return /*#__PURE__*/React.createElement("div", {
       "data-id": dataId,
       "data-test-id": dataId,
-      className: containerClass ? containerClass : ''
+      className: cn(containerClass ? containerClass : '')
     }, title && /*#__PURE__*/React.createElement("div", {
-      className: titleClass ? titleClass : ''
+      className: cn(titleClass ? titleClass : '')
     }, title), /*#__PURE__*/React.createElement("div", {
-      className: ` ${column == 'single' ? style.singleColumn : ''} ${className ? className : ''}`,
+      className: cn(` ${column == 'single' ? style.singleColumn : ''} ${className ? className : ''}`),
       "data-id": formName && formName,
       "data-test-id": formName && formName
     }, this.props.children));
   }
 
 }
-Section.propTypes = propTypes; // if (__DOCS__) {
-//   Section.docs = {
-//     componentGroup: 'ModuleAddForm'
-//   };
-// }
+Section.propTypes = propTypes;

package/es/form/layout/Section/__tests__/__snapshots__/Section.spec.js.snap

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

package/es/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -3,6 +3,7 @@ import { SetupDetailLayout_defaultProps, SetupHeader_defaultProps, SetupContent_
 import { SetupDetailLayout_propTypes, SetupHeader_propTypes, SetupContent_propTypes, SetupFooter_propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./SetupDetailLayout.module.css";
 export default class SetupDetailLayout extends React.Component {
   constructor(props) {
@@ -65,7 +66,7 @@ export default class SetupDetailLayout extends React.Component {
       className: style.infoText
     }, helpInfoTitle), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("span", {
       onClick: this.toggleHelpInfo,
-      className: style.infoClose,
+      className: cn(style.infoClose),
       "data-title": closeText,
       "data-id": `${dataId}_close`,
       "data-test-id": `${dataId}_close`
@@ -80,12 +81,7 @@ export default class SetupDetailLayout extends React.Component {
 
 }
 SetupDetailLayout.propTypes = SetupDetailLayout_propTypes;
-SetupDetailLayout.defaultProps = SetupDetailLayout_defaultProps; // if (__DOCS__) {
-//   SetupDetailLayout.docs = {
-//     componentGroup: 'Template'
-//   };
-// }
-
+SetupDetailLayout.defaultProps = SetupDetailLayout_defaultProps;
 export class SetupHeader extends Component {
   constructor(props) {
     super(props);
@@ -121,7 +117,7 @@ export class SetupHeader extends Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.back
     }, needBack ? /*#__PURE__*/React.createElement("span", {
-      className: style.backIcon,
+      className: cn(style.backIcon),
       onClick: onBackClick,
       "data-title": backText,
       "data-id": `${dataId}_back`,
@@ -150,9 +146,9 @@ export class SetupHeader extends Component {
       alignBox: "row",
       className: style.rightPanel
     }, getRightPlaceHolder())) : null, needHelpInfo ? /*#__PURE__*/React.createElement(Box, null, needHelpInfoWrapper ? /*#__PURE__*/React.createElement("span", {
-      className: style.helpInfoCont
+      className: cn(style.helpInfoCont)
     }, /*#__PURE__*/React.createElement("span", {
-      className: style.helpInfo,
+      className: cn(style.helpInfo),
       onClick: openHelpInfo,
       "data-title": infoText,
       "data-id": `${dataId}_info`,
@@ -160,7 +156,7 @@ export class SetupHeader extends Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-info31"
     }))) : /*#__PURE__*/React.createElement("span", {
-      className: `${style.helpInfo} ${style.mr15}`,
+      className: cn(`${style.helpInfo} ${style.mr15}`),
       onClick: openHelpInfo,
       "data-title": infoText,
       "data-id": `${dataId}_info`,

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

@@ -7,16 +7,14 @@
   width: var(--zd_size60) ;
 }
 .backIcon {
+  composes: d-inline-block d-text-center d-cursor-pointer from global;
   height: var(--zd_size30) ;
   width: var(--zd_size30) ;
   font-size: var(--zd_font_size12) ;
-  display: inline-block;
   color: var(--zdt_setupdetail_backicon);
   margin-inline-start: var(--zd_size19) ;
   line-height: 2.5;
-  text-align: center;
   border-radius: 50%;
-  cursor: pointer;
 }
 
 .backIcon:hover {
@@ -35,7 +33,7 @@
   composes: justifyFend from '~@zohodesk/components/es/common/common.module.css';
 }
 .helpInfoCont {
-  position: absolute;
+  composes: d-absolute from global;
   z-index: 10;
   padding-block: var(--zd_size12) 0 ;
   padding-inline: 0 var(--zd_size15) ;
@@ -47,16 +45,14 @@
   left: 0 ;
 }
 .helpInfo {
+  composes: d-inline-block d-text-center d-cursor-pointer from global;
   line-height: 2.3636;
   height: var(--zd_size28) ;
   width: var(--zd_size28) ;
   color: var(--zdt_setupdetail_helpinfo_text);
   font-size: var(--zd_font_size11) ;
-  display: inline-block;
   border: 1px solid var(--zdt_setupdetail_helpinfo);
   border-radius: 2px;
-  text-align: center;
-  cursor: pointer;
 }
 .mr15 {
   margin-inline-end: var(--zd_size15) ;
@@ -70,8 +66,8 @@
   padding-inline: var(--zd_size60) var(--zd_size25) ;
 }
 .popup {
+  composes: d-absolute from global;
   z-index: 3;
-  position: absolute;
   top: 0 ;
   bottom: 0 ;
   width: var(--zd_size330) ;
@@ -103,11 +99,11 @@
 }
 
 .infoIcon {
+  composes: d-text-center from global;
   height: var(--zd_size26) ;
   width: var(--zd_size26) ;
   font-size: var(--zd_font_size12) ;
   line-height: 2;
-  text-align: center;
   border: 1px solid var(--zdt_setupdetail_infoicon_border);
   border-radius: 2px;
 }
@@ -119,9 +115,9 @@
 }
 
 .infoClose {
+  composes: d-cursor-pointer from global;
   font-size: var(--zd_font_size28) ;
   color: var(--zdt_setupdetail_infoclose);
-  cursor: pointer;
 }
 
 .infoFooter {

package/es/layout/SetupDetailLayout/__tests__/__snapshots__/SetupDetailLayout.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SetupDetailLayout rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="SetupDetailLayout"
     data-scroll="true"
     data-selector-id="container"

package/es/layout/SubtabLayout/SubtabLayout.js

@@ -6,6 +6,7 @@ import { SubtabHeader_defaultProps, SubtabFooter_defaultProps, SubtabContent_def
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/es/Card';
 import PlusIcon from "../../PlusIcon/PlusIcon";
+import { cn } from "@dot-system/css-utility";
 import style from "./SubtabLayout.module.css";
 export class SubtabHeader extends React.Component {
   render() {
@@ -46,7 +47,7 @@ export class SubtabHeader extends React.Component {
       adjust: getRightPlaceHolder ? true : false,
       className: leftClassName
     }, label ? /*#__PURE__*/React.createElement("div", {
-      className: style.label
+      className: cn(style.label)
     }, label) : null, getLeftPlaceHolder), getRightPlaceHolder && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,
@@ -137,8 +138,4 @@ export default class SubtabLayout extends React.Component {
 
 }
 SubtabLayout.defaultProps = SubtabLayout_defaultProps;
-SubtabLayout.propTypes = SubtabLayout_propTypes; // if (__DOCS__) {
-//   SubtabLayout.docs = {
-//     componentGroup: 'Template'
-//   };
-// }
+SubtabLayout.propTypes = SubtabLayout_propTypes;

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

@@ -4,8 +4,8 @@
 
 .tabHead,
 .shadowStyle {
-  position: relative;
   composes: varClass;
+  composes: d-relative from global;
 }
 
 .tabHead, .shadowStyle {
@@ -17,7 +17,7 @@
 }
 
 .plusIconLine {
-  position: relative;
+  composes: d-relative from global;
   z-index: 2;
 }
 
@@ -131,7 +131,7 @@
 }
 
 .cursor {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
 .footer {

package/es/layout/SubtabLayout/__tests__/__snapshots__/SubtabLayout.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SubtabLayout rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="subTabLayout"
     data-scroll="true"
     data-selector-id="container"

package/es/list/AvatarFlip/AvatarFlip.js

@@ -68,9 +68,4 @@ export default class AvatarFlip extends Component {
 
 }
 AvatarFlip.propTypes = propTypes;
-AvatarFlip.defaultProps = defaultProps; // if (__DOCS__) {
-//   AvatarFlip.docs = {
-//     folderName: 'List',
-//     componentGroup: 'AvatarFlip'
-//   };
-// }
+AvatarFlip.defaultProps = defaultProps;

package/es/list/AvatarFlip/__tests__/__snapshots__/AvatarFlip.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AvatarFlip rendering the defult props 1`] = `
 <DocumentFragment>
@@ -13,14 +13,14 @@ exports[`AvatarFlip rendering the defult props 1`] = `
       data-test-id="tic-list-filp"
     >
       <div
-        class="flex fullSize column alignItems_center justifyContent_center front"
+        class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center front"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
           aria-checked="false"
-          class="inlineFlex row alignItems_center container pointer primary"
+          class="d-inline-flex d-flex-row d-items-center container pointer primary"
           data-id="listViewCheckBox_undefined"
           data-selector-id="checkbox_undefined"
           data-test-id="listViewCheckBox_undefined"
@@ -28,7 +28,7 @@ exports[`AvatarFlip rendering the defult props 1`] = `
           tabindex="0"
         >
           <div
-            class="noShrink boxContainer medium filled"
+            class="d-flex-shrink-0 boxContainer medium filled"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -59,7 +59,7 @@ exports[`AvatarFlip rendering the defult props 1`] = `
         </div>
       </div>
       <div
-        class="flex fullSize column alignItems_center justifyContent_center back"
+        class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center back"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"

package/es/list/BluePrintStatus/BluePrintStatus.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./BluePrintStatus.module.css";
 import { Icon } from '@zohodesk/icons';
 export default class BluePrintStatus extends React.Component {
@@ -12,7 +13,7 @@ export default class BluePrintStatus extends React.Component {
       title
     } = this.props;
     return /*#__PURE__*/React.createElement("span", {
-      className: `${style.container}`
+      className: cn(`${style.container}`)
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-blueprint",
       title: title,
@@ -21,8 +22,4 @@ export default class BluePrintStatus extends React.Component {
   }
 
 }
-BluePrintStatus.propTypes = propTypes; // if (__DOCS__) {
-//   BluePrintStatus.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+BluePrintStatus.propTypes = propTypes;

package/es/list/BluePrintStatus/BluePrintStatus.module.css

@@ -9,6 +9,6 @@
   color: var(--dot_shuttleGrey);
 } */
 .iconStyle {
-  display: block;
+  composes: d-block from global;
   font-size: var(--zd_font_size10) ;
 }

package/es/list/BluePrintStatus/__tests__/__snapshots__/BluePrintStatus.spec.js.snap

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

package/es/list/Comment/Comment.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import Button from '@zohodesk/components/es/semantic/Button/Button';
+import { cn } from "@dot-system/css-utility";
 import style from "./Comment.module.css";
 export default class Comment extends Component {
   constructor(props) {
@@ -28,15 +29,10 @@ export default class Comment extends Component {
       name: "ZD-TK-commentLine",
       iconClass: style.commentIcon
     }), count && /*#__PURE__*/React.createElement("span", {
-      className: style.count
+      className: cn(style.count)
     }, count));
   }
 
 }
 Comment.defaultProps = defaultProps;
-Comment.propTypes = propTypes; // if (__DOCS__) {
-//   Comment.docs = {
-//     folderName: 'List',
-//     componentGroup: 'Comment'
-//   };
-// }
+Comment.propTypes = propTypes;

package/es/list/Comment/Comment.module.css

@@ -4,20 +4,18 @@
 .container {
   composes: varClass;
   composes: inlineBlockMiddle from '../listCommon.module.css';
-  position: relative;
+  composes: d-relative d-cursor-pointer from global;
   color: var(--icon_color);
   padding-inline: var(--zd_size2) ;
   padding-block:0 ;
-  cursor: pointer;
 }
 .container:hover {
   --icon_color: var(--zdt_comment_hover_iconText);
 }
 .count {
-  position: absolute;
+  composes: d-absolute d-text-center from global;
   top: var(--zd_size1) ;
   font-size: var(--zd_font_size9) ;
-  text-align: center;
 }
 [dir=ltr] .count {
   left: 100% ;

package/es/list/Comment/__tests__/__snapshots__/Comment.spec.js.snap

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

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -100,9 +100,4 @@ class DepartmentDropDown extends Component {
 
 DepartmentDropDown.defaultProps = defaultProps;
 DepartmentDropDown.propTypes = propTypes;
-export default DepartmentDropDown; // if (__DOCS__) {
-//   DepartmentDropDown.docs = {
-//     folderName: 'List',
-//     componentGroup: 'DepartmentDropDown'
-//   };
-// }
+export default DepartmentDropDown;

package/es/list/DepartmentDropDown/DepartmentDropDown.module.css

@@ -1,5 +1,5 @@
 .departmentBox {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 .departmentBox :global .toggleDropIcon {
   color: var(--zdt_departmentdropdown_default_text);

package/es/list/DepartmentDropDown/__tests__/__snapshots__/DepartmentDropDown.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DepartmentDropDown rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`DepartmentDropDown rendering the defult props 1`] = `
     data-selector-id="toggleDropdown"
   >
     <div
-      class="flex row alignItems_center"
+      class="d-flex d-flex-row d-items-center"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -16,14 +16,14 @@ exports[`DepartmentDropDown rendering the defult props 1`] = `
         aria-expanded="false"
         aria-haspopup="true"
         aria-labelledby="1"
-        class="flex row alignItems_center buttonReset cursor departmentBox"
+        class="d-flex d-flex-row d-items-center buttonReset cursor departmentBox"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <span
           aria-hidden="true"
-          class="shrink value toggleDropText"
+          class="d-min-w-0 d-flex-shrink value toggleDropText"
           data-id="undefined_value"
           data-selector-id="box"
           data-test-id="undefined_value"
@@ -35,7 +35,7 @@ exports[`DepartmentDropDown rendering the defult props 1`] = `
         </span>
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-down toggleDropIcon arrow default_arrow"
+          class="zd_font_icons ff icon-down basic d-inline-block d-align-middle toggleDropIcon arrow default_arrow"
           data-id="statusdownarrow"
           data-selector-id="fontIcon"
           data-test-id="statusdownarrow"

package/es/list/Dot/Dot.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./Dot.module.css";
 export default class Dot extends Component {
   constructor(props) {
@@ -13,7 +14,7 @@ export default class Dot extends Component {
       spacingType
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.dot} ${style[spacingType]} ${className}`
+      className: cn(`${style.dot} ${style[spacingType]} ${className}`)
     }, ".");
   }
 

package/es/list/Dot/__tests__/__snapshots__/Dot.spec.js.snap

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

package/es/list/DotNew/DotNew.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./DotNew.module.css";
 export default class DotNew extends Component {
   constructor(props) {
@@ -14,16 +15,11 @@ export default class DotNew extends Component {
       size
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[size]} ${className ? className : ''}`,
+      className: cn(`${style.container} ${style[size]} ${className ? className : ''}`),
       "data-title": dataTitle
     });
   }
 
 }
 DotNew.propTypes = propTypes;
-DotNew.defaultProps = defaultProps; // if (__DOCS__) {
-//   DotNew.docs = {
-//     folderName: 'List',
-//     componentGroup: 'DotNew'
-//   };
-// }
+DotNew.defaultProps = defaultProps;

package/es/list/DotNew/__tests__/__snapshots__/DotNew.spec.js.snap

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

package/es/list/GridStencils/GridStencils.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./GridStencils.module.css";
 export default class GridStencils extends React.Component {
   render() {
@@ -11,24 +12,19 @@ export default class GridStencils extends React.Component {
       order
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: from == 'leftPanel' && isThreeLayout ? `${style.stenLoading} ${style.threeLayout}` : from == 'leftPanel' ? `${style.stenLoading} ${style.leftCont}` : style.stenLoading,
+      className: cn(from == 'leftPanel' && isThreeLayout ? `${style.stenLoading} ${style.threeLayout}` : from == 'leftPanel' ? `${style.stenLoading} ${style.leftCont}` : style.stenLoading),
       style: styles,
       order: order
     }, lineBar ? /*#__PURE__*/React.createElement("div", {
-      className: style.stenLoadbody
+      className: cn(style.stenLoadbody)
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.lineBar} ${style.stenListBAr}`
+      className: cn(`${style.lineBar} ${style.stenListBAr}`)
     }), /*#__PURE__*/React.createElement("div", {
-      className: `${style.lineBar2} ${style.stenListBAr}`
+      className: cn(`${style.lineBar2} ${style.stenListBAr}`)
     }), /*#__PURE__*/React.createElement("div", {
-      className: `${style.lineBar3} ${style.stenListBAr}`
+      className: cn(`${style.lineBar3} ${style.stenListBAr}`)
     })) : '');
   }
 
 }
-GridStencils.propTypes = propTypes; // if (__DOCS__) {
-//   GridStencils.docs = {
-//     folderName: 'List',
-//     componentGroup: 'GridStencils'
-//   };
-// }
+GridStencils.propTypes = propTypes;

package/es/list/GridStencils/GridStencils.module.css

@@ -1,7 +1,7 @@
 .stenLoading {
+  composes: d-relative from global;
   padding-block: var(--zd_size13) var(--zd_size11) ;
   padding-inline:var(--zd_size15) ;
-  position: relative;
   margin-block-end: var(--zd_size10) ;
   background-color: var(--zdt_gridstencils_default_bg);
   border-bottom: 1px solid var(--zdt_gridstencils_default_border);
@@ -54,10 +54,9 @@
   border-radius: 5px;
 }
 .stenListBAr {
-  position: relative;
+  composes: d-relative d-bg-no-repeat from global;
   background: var(--zdt_gridstencils_listbar_bg);
   background-image: var(--zdt_gridstencils_listbar_gradient_bg);
-  background-repeat: no-repeat;
 }
 [dir=ltr] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);
@@ -74,9 +73,9 @@
   -webkit-animation-timing-function: linear;
 }
 .stenListBAr {
+  composes: d-bg-no-repeat from global;
   background: var(--zdt_gridstencils_listbar_bg);
   background-image: var(--zdt_gridstencils_listbar_gradient_bg);
-  background-repeat: no-repeat;
 }
 [dir=ltr] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);

package/es/list/GridStencils/__tests__/__snapshots__/GridStencils.spec.js.snap

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