@zohodesk/dot 1.7.25 → 1.8.1

package/README.md

@@ -2,6 +2,15 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.8.1
+
+- Font Family Migrated to Font-weight across all css  (Impacted)
+
+# 1.7.26
+
+- `list/SecondaryText/PhoneNumber.js`
+  - RTL unicode-bidi issue fixed
+
 # 1.7.25
 
 - Added rtl:as:property comment for linear-gradient usages to ensure support in PostCSS

package/es/ActionButton/ActionButton.module.css

@@ -98,7 +98,7 @@
 
 .txt {
   font-size: var(--zd_font_size13) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   text-transform: capitalize;
 }
 

package/es/AlphabeticList/AlphabeticList.module.css

@@ -53,5 +53,5 @@
 }
 .title {
   font-size: var(--zd_font_size11) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }

package/es/AudioPlayer/AudioPlayer.module.css

@@ -74,7 +74,7 @@
 .line {
     color: var(--zdt_audioplayer_line_text);
     font-size: var(--zd_font_size13) ;
-    font-family: var(--zd_semibold);
+    font-weight: var(--zd-fw-semibold);
 }
 
 .disable {

package/es/DotProvider/hooks/useDotProvider.js

@@ -7,6 +7,7 @@ import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/components/es/common/basic.module.css';
 import '@zohodesk/variables/es/fontFamilyVariables.module.css';
+import '@zohodesk/variables/es/fontWeightVariables.module.css';
 import '@zohodesk/components/es/common/boxShadow.module.css';
 import "../../common/dot_boxShadow.module.css";
 

package/es/Drawer/Drawer.module.css

@@ -109,7 +109,7 @@
 
 .title {
   color: var(--zdt_drawer_title_text);
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
   font-size: var(--zd_font_size16) ;
 }

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -20,7 +20,7 @@
   max-width: var(--zd_size430) ;
 }
 .title {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   color: var(--titleColor);
   word-wrap: break-word;
 }

package/es/emptystate/EditionPage/EditionPage.css

@@ -6,12 +6,12 @@
 }
 .header {
   font-size: var(--zd_font_size20) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   margin-top: var(--zd_size16) ;
 }
 .description {
   font-size: var(--zd_font_size15) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   margin: var(--zd_size20) 0 ;
 }
 .content {

package/es/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -1,5 +1,5 @@
 .headtingText {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   font-size: var(--zd_font_size50) ;
   letter-spacing: var(--zd_size1);
   margin-bottom: var(--zd_size5) ;

package/es/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap

@@ -10,10 +10,8 @@ exports[`CurrencyField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="container effect    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -45,9 +43,6 @@ exports[`CurrencyField rendering the defult props 1`] = `
             data-test-id="containerComponent"
           />
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>

package/es/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap

@@ -18,10 +18,8 @@ exports[`DateField rendering the defult props 1`] = `
           data-test-id="dateField(formatted_undefined)_widget"
         >
           <div
-            class="container effect  placeHolder  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -77,9 +75,6 @@ exports[`DateField rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/es/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap

@@ -29,10 +29,8 @@ exports[`MultiSelectField rendering the defult props 1`] = `
           "
           />
           <div
-            class="container effect  custmInputWrapper  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"

package/es/form/fields/PhoneField/__tests__/__snapshots__/PhoneField.spec.js.snap

@@ -22,10 +22,8 @@ exports[`PhoneField rendering the defult props 1`] = `
           class="fieldContainer "
         >
           <div
-            class="container effect    flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -57,9 +55,6 @@ exports[`PhoneField rendering the defult props 1`] = `
                 data-test-id="containerComponent"
               />
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/es/form/fields/SelectField/__tests__/__snapshots__/SelectField.spec.js.snap

@@ -19,10 +19,8 @@ exports[`SelectField rendering the defult props 1`] = `
           data-test-id="selectComponent"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -96,9 +94,6 @@ exports[`SelectField rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/es/form/fields/TagsMultiSelect/__tests__/__snapshots__/TagsMultiSelect.spec.js.snap

@@ -25,10 +25,8 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
           class="custmSpan"
         />
         <div
-          class="container effect  custmInp  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInp  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"

package/es/form/fields/TagsMultiSelectField/__tests__/__snapshots__/TagsMultiSelectField.spec.js.snap

@@ -31,10 +31,8 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
             class="custmSpan"
           />
           <div
-            class="container effect  custmInp  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer   effect     container custmInp  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"

package/es/form/fields/TextBoxField/__tests__/__snapshots__/TextBoxField.spec.js.snap

@@ -10,10 +10,8 @@ exports[`TextBoxField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="container effect    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -45,9 +43,6 @@ exports[`TextBoxField rendering the defult props 1`] = `
             data-test-id="containerComponent"
           />
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>

package/es/form/fields/TextEditor/TextEditor.js

@@ -243,7 +243,8 @@ export default class TextEditor extends Component {
       let customStyleTag = document.createElement('style');
       customStyleTag.type = 'text/css';
       const customizedCSS = `pre {white-space: pre-wrap} ${customCSS}`;
-      const fontCSS = `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`;
+      const fontCSS = `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}
+      @font-face {font-family: 'ZohoPuvi';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: ZDLato;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'Roboto';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`;
       customStyleTag.textContent = `${customizedCSS} ${fontCSS}`;
       iframeHead.appendChild(customStyleTag);
     }

package/es/form/fields/TextEditor/TextEditor.module.css

@@ -32,7 +32,7 @@
 .textEditor * {
   box-sizing: initial;
   line-height: initial;
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .textEditor {
@@ -717,7 +717,7 @@
 }
 
 :global .KB_Editor textarea.ze_area {
-  font-family: var(--zd_regular) !important;
+  font-weight: var(--zd-fw-normal) !important;
   font-size: var(--zd_font_size14)  !important;
   padding: var(--zd_size15) var(--zd_size20)  !important;
 }

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

@@ -30,7 +30,7 @@
 .title {
   font-size: var(--zd_font_size16) ;
   line-height: 1;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   color: var(--zdt_setupdetail_backicon);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }

package/es/list/SecondaryText/PhoneNumber.js

@@ -41,9 +41,9 @@ export default class PhoneNumber extends Component {
       className: style.link,
       ...LinkProps
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.phoneNumber} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
+      className: `${style.phoneNumber} ${style.phonetxt} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
     }, text)) : /*#__PURE__*/React.createElement("div", {
-      className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
+      className: `${style.secondaryText} ${style.phonetxt} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
       "data-title": title,
       ...TextProps
     }, text));

package/es/list/SecondaryText/SecondaryText.module.css

@@ -15,14 +15,14 @@
   cursor: not-allowed;
 }
 .textBold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   color: var(--zdt_secondaryText_black_text);
 }
 .textStyle, .link{
-display: block
+  display: block
 }
 .textStyle.textBold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   color: var(--zdt_secondaryText_black_text);
 }
 .ticketId,
@@ -64,7 +64,7 @@ display: block
 .ticketIdLink {
   cursor: pointer;
 }
-.ticketIdLink:hover, .ticketIdLink:focus {
+.ticketIdLink:hover,.ticketIdLink:focus {
   color: var(--zdt_secondaryText_blue_hover_text);
 }
 .primaryAccountNameCnt {
@@ -72,13 +72,13 @@ display: block
 }
 /* status */
 .font_regular {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 .font_semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }
 .font_bold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
 }
 .font_semibold,
 .font_bold,
@@ -134,3 +134,7 @@ display: block
 .black {
   color: var(--zdt_secondaryText_black_text);
 }
+
+.phonetxt {
+  composes: ltr-dir from '~@zohodesk/components/es/common/common.module.css';
+}

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

@@ -8,7 +8,7 @@ exports[`PhoneNumber rendering the defult props 1`] = `
     rel="noopener noreferrer"
   >
     <div
-      class="phoneNumber font_regular "
+      class="phoneNumber phonetxt font_regular "
     />
   </a>
 </DocumentFragment>

package/es/list/Subject/Subject.module.css

@@ -14,15 +14,15 @@
 }
 
 .font_regular {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .font_semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }
 
 .font_bold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
 }
 
 .font_semibold,

package/es/lookup/EmptyPage/LookupEmptyPage.module.css

@@ -1,12 +1,14 @@
 .container {
   text-align: center;
 }
+
 .image {
   margin: var(--zd_size20) auto ;
 }
+
 .contentDiv {
   font-size: var(--zd_font_size20) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
   margin-top: var(--zd_size15) ;
-}
+}

package/es/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap

@@ -18,10 +18,8 @@ exports[`Search rendering the customized style search 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container effect    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer   effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -77,10 +75,8 @@ exports[`Search rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container effect    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer   effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -136,10 +132,8 @@ exports[`Search rendering the prop hasSeparator is false 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container effect    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer   effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -198,10 +192,8 @@ exports[`Search rendering the prop hasSeparator is true 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container effect    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer   effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -270,10 +262,8 @@ exports[`Search rendering the renderChildren props via function 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="container effect    flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer   effect     container   flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -331,10 +321,8 @@ exports[`Search rendering the search active 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container effect effectFocused   flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer   effect  active   container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"

package/es/lookup/header/Title/LookupTitle.module.css

@@ -1,21 +1,25 @@
 .title {
   font-size: var(--zd_font_size16) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
   word-break: break-all;
   cursor: initial;
 }
+
 .bold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }
+
 /* Palette */
 .default {
   color: var(--zdt_lookuptitle_default_text);
 }
+
 .primary {
   color: var(--zdt_lookuptitle_primary_text);
 }
+
 .danger {
   color: var(--zdt_lookuptitle_danger_text);
-}
+}

package/es/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -1,28 +1,35 @@
 .small {
   max-height: var(--zd_size200) ;
 }
+
 .medium {
   max-height: var(--zd_size348) ;
 }
+
 .large {
   max-height: var(--zd_size400) ;
 }
+
 .emptyState {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_viewdropdown_empty_text);
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
   padding: var(--zd_size12) var(--zd_size15) ;
 }
+
 .hide {
   composes: vishidden from '~@zohodesk/components/es/common/common.module.css';
 }
+
 .container {
   position: relative;
 }
+
 .listItemContainer {
   padding: var(--zd_size10) 0 ;
 }
+
 /* Label Style */
 .labelCnt {
   composes: dInflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
@@ -30,21 +37,25 @@
   color: var(--zdt_viewdropdown_label_text);
   cursor: pointer;
 }
+
 .labelText {
   font-size: var(--zd_font_size12) ;
   max-width: var(--zd_size180) ;
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
+
 [dir=ltr] .labelText {
   margin-right: var(--zd_size5) ;
 }
+
 [dir=rtl] .labelText {
   margin-left: var(--zd_size5) ;
 }
+
 .labelCnt:hover .arrowIcon {
   color: var(--zdt_viewdropdown_hover_label_text);
 }
 
 .loader {
   padding: var(--zd_size12) var(--zd_size15) ;
-}
+}

package/es/setup/header/Search/Search.module.css

@@ -38,7 +38,7 @@
   letter-spacing: 0.2px;
   transition: all var(--zd_transition3) ease;
   color: var(--zdt_search_input_text);
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;

package/es/v1/form/fields/TextEditor/TextEditor.js

@@ -243,7 +243,8 @@ export default class TextEditor extends Component {
       let customStyleTag = document.createElement('style');
       customStyleTag.type = 'text/css';
       const customizedCSS = `pre {white-space: pre-wrap} ${customCSS}`;
-      const fontCSS = `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`;
+      const fontCSS = `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}
+      @font-face {font-family: 'ZohoPuvi';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: ZDLato;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'Roboto';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`;
       customStyleTag.textContent = `${customizedCSS} ${fontCSS}`;
       iframeHead.appendChild(customStyleTag);
     }

package/es/version2/GlobalNotification/GlobalNotification.module.css

@@ -126,7 +126,8 @@
   --globalnotification_text_color: var(--zdt_globalnotification_info_text);
 }
 
-.danger,.error {
+.danger,
+.error {
   --commonalert_border_color: var(--zdt_commonalert_danger_border);
   --globalnotification_bg_color: var(--zdt_globalnotification_danger_bg);
   --globalnotification_text_color: var(--zdt_globalnotification_danger_text);
@@ -148,7 +149,7 @@
 
 .text {
   font-size: var(--zd_font_size14) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
   line-height: 1.4286;
   overflow: hidden;

package/es/version2/errorstate/V2_ErrorStates.module.css

@@ -5,7 +5,7 @@
   margin-top: var(--zd_size15) ;
 }
 .title {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
 }
 .desc {
   line-height: 1.5714;