@zohodesk/dot 1.0.0-temp-184.2 → 1.0.0-temp-185

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

@@ -77,20 +77,20 @@
   background-color: transparent;
 }
 
-.small :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
-.small :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
-.large :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
-.large :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel {
+.small :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
+.small :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel {
   color: var(--zdt_texteditor_default_text);
 }
 
-.small :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .small :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .medium :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .medium :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .large :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .large :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel {
+.small :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .small :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .medium :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .medium :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .large :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .large :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .default :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .default :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel {
   background-color: var(--zdt_texteditor_menu_li_bg);
 }
 
@@ -101,10 +101,10 @@
 /* large type editor - ticket add form editor */
 .large :global .KB_Editor,
 .large :global .KB_Editor_menus .KB_Editor_MultiTools,
-.large :global .KB_Editor_menus .KB_Editor_MultiTools > li,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools>li,
 .default :global .KB_Editor,
 .default :global .KB_Editor_menus .KB_Editor_MultiTools,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -160,24 +160,24 @@
   min-height: inherit ;
 }
 
-.large :global .KB_Editor_menus .KB_Editor_MultiTools > li,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.large :global .KB_Editor_menus .KB_Editor_MultiTools>li,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
 }
 
-.large :global .KB_Editor_menus .KB_Editor_MultiTools > li, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.large :global .KB_Editor_menus .KB_Editor_MultiTools>li, .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   padding: 0 ;
   float: unset;
 }
 
-[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   margin-right: 0 ;
 }
 
-[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   margin-left: 0 ;
 }
 
@@ -190,14 +190,14 @@
   float: unset !important;
 }
 
-.large :global .KB_Editor_menus > ul > li > span > svg,
-.default :global .KB_Editor_menus > ul > li > span > svg {
+.large :global .KB_Editor_menus>ul>li>span>svg,
+.default :global .KB_Editor_menus>ul>li>span>svg {
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
 }
 
-.large :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg,
-.default :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
+.large :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg,
+.default :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
@@ -241,18 +241,18 @@
   left: 0 ;
 }
 
-[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   margin-right: var(--zd_size2) ;
 }
 
-[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   margin-left: var(--zd_size2) ;
 }
 
 /* xlarge type editor - reply area, blue print cases - full height hover style */
 .xlarge :global .KB_Editor,
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools,
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -293,7 +293,7 @@
   min-height: inherit ;
 }
 
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -302,11 +302,11 @@
   float: unset;
 }
 
-[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   margin-right: 0 ;
 }
 
-[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   margin-left: 0 ;
 }
 
@@ -324,12 +324,12 @@
   padding: var(--zd_size6) ;
 }
 
-.xlarge :global .KB_Editor_menus > ul > li > span > svg {
+.xlarge :global .KB_Editor_menus>ul>li>span>svg {
   width: var(--zd_size22) ;
   height: var(--zd_size22) ;
 }
 
-.xlarge :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
+.xlarge :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
@@ -354,13 +354,13 @@
   left: 0 ;
 }
 
-.xlarge :global .KB_Editor_menus > ul > li > span.SnippetIcon svg {
+.xlarge :global .KB_Editor_menus>ul>li>span.SnippetIcon svg {
   width: var(--zd_size17) ;
   height: var(--zd_size21) ;
   padding: 0 var(--zd_size7) ;
 }
 
-.xlarge :global .KB_Editor_menus > ul > li > span.TemplateIcon svg {
+.xlarge :global .KB_Editor_menus>ul>li>span.TemplateIcon svg {
   width: var(--zd_size16) ;
   height: var(--zd_size16) ;
   padding: 0 var(--zd_size9) ;
@@ -393,31 +393,16 @@
   padding: 0 var(--zd_size7) ;
 }
 
-.xlarge :global .KB_Editor_MultiTools li .Kbeditor_more_icon > svg {
+.xlarge :global .KB_Editor_MultiTools li .Kbeditor_more_icon>svg {
   width: var(--zd_size12) ;
   height: var(--zd_size12) ;
 }
 
-.xlarge
-  :global
-  .KB_Editor_menus
-  > ul
-  > li
-  > span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(
-    .TemplateIcon
-  ):not(.KB_Editor_Richtext):not(.KB_Editor_PlainText) {
+.xlarge :global .KB_Editor_menus>ul>li>span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(.TemplateIcon):not(.KB_Editor_Richtext):not(.KB_Editor_PlainText) {
   height: var(--zd_size21) ;
 }
 
-.xlarge
-  :global
-  .KB_Editor_menus
-  > ul
-  > li
-  > span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(
-    .TemplateIcon
-  )
-  > svg {
+.xlarge :global .KB_Editor_menus>ul>li>span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(.TemplateIcon)>svg {
   width: var(--zd_size21) ;
   height: var(--zd_size21) ;
   padding: 0 var(--zd_size4) ;
@@ -442,7 +427,7 @@
 /* medium type editor - snippet, bug tracker cases */
 .medium :global .KB_Editor,
 .medium :global .KB_Editor_menus .KB_Editor_MultiTools,
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -483,7 +468,7 @@
   min-height: inherit ;
 }
 
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -496,21 +481,21 @@
   line-height: 0;
 }
 
-.medium :global .KB_Editor_menus > ul > li > span > svg {
+.medium :global .KB_Editor_menus>ul>li>span>svg {
   width: var(--zd_size22) ;
   height: var(--zd_size22) ;
 }
 
-.medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
+.medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
 
-[dir=ltr] .medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
+[dir=ltr] .medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   padding: 0 0 0 var(--zd_size2) ;
 }
 
-[dir=rtl] .medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
+[dir=rtl] .medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   padding: 0 var(--zd_size2) 0 0 ;
 }
 
@@ -547,7 +532,7 @@
   padding: 0 var(--zd_size3) ;
 }
 
-.medium :global .KB_Editor_MultiTools li .Kbeditor_more_icon > svg {
+.medium :global .KB_Editor_MultiTools li .Kbeditor_more_icon>svg {
   width: var(--zd_size12) ;
   height: var(--zd_size12) ;
 }
@@ -627,13 +612,13 @@
   line-height: 0;
 }
 
-.small :global .KB_Editor_menus > ul > li > span > svg,
-.mini :global .KB_Editor_menus > ul > li > span > svg {
+.small :global .KB_Editor_menus>ul>li>span>svg,
+.mini :global .KB_Editor_menus>ul>li>span>svg {
   width: var(--zd_size25) ;
   height: var(--zd_size25) ;
 }
 
-.small :global .KB_Editor_menus > ul > li > span > svg, .mini :global .KB_Editor_menus > ul > li > span > svg {
+.small :global .KB_Editor_menus>ul>li>span>svg, .mini :global .KB_Editor_menus>ul>li>span>svg {
   padding: 0 var(--zd_size6) ;
 }
 
@@ -644,7 +629,7 @@
   height: var(--zd_size10) ;
   width: var(--zd_size10) ;
   z-index: -1;
-  box-shadow: var(--zd_bs_texteditor_menu);
+  box-shadow: var(--zd_bs_contrast_outline, -1px 1px 2px 0 var(--zdt_texteditor_menu_after_box_shadow));
   background-color: var(--zdt_texteditor_menu_after_bg);
 }
 
@@ -669,6 +654,7 @@
 :global .hideTools .KB_Editor_menus {
   height: 0 ;
   overflow: hidden;
+  /* css:validation:ignore */
   opacity: 0;
   box-shadow: 0 0 0 transparent;
   border: 0;
@@ -723,7 +709,7 @@
   /*  Variable:Ignore  */
   max-height: 210px;
   overflow: auto;
-  box-shadow: var(--zd_bs_texteditor_ul);
+  box-shadow: var(--zd_bs_contrast_outline, 0 1px 32px 0 var(--zdt_texteditor_dropdown_box_shadow));
   padding: 0 ;
 }
 
@@ -784,4 +770,4 @@
 
 [dir=rtl] .editorHide :global .KB_Editor {
   right: 0 ;
-}
+}

package/es/form/fields/TextEditorField/TextEditorField.js

@@ -1,5 +1,3 @@
-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); }
-
 /**** Libraries ****/
 import React, { PureComponent } from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -121,17 +119,18 @@ export default class TextEditorField extends PureComponent {
       renderProps: {
         end: this.renderEnd
       }
-    }, /*#__PURE__*/React.createElement(Label, _extends({
+    }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       htmlFor: !isReadOnly && !isDisabled ? id : undefined,
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
       onClick: this.handleLabelClick,
       customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
-    }, LabelProps))), /*#__PURE__*/React.createElement("div", {
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      ...LabelProps
+    })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
-    }, /*#__PURE__*/React.createElement(TextEditorWrapper, _extends({
+    }, /*#__PURE__*/React.createElement(TextEditorWrapper, {
       needEditor: needEditor,
       onChange: this.handleChange,
       id: id,
@@ -160,13 +159,15 @@ export default class TextEditorField extends PureComponent {
       shouldEditorUpdateContent: shouldEditorUpdateContent,
       setInlineAttachmentInProgress: setInlineAttachmentInProgress,
       handleEditorDropUpload: handleEditorDropUpload,
-      needInlineAttachment: needInlineAttachment
-    }, TextEditorWrapperProps))), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+      needInlineAttachment: needInlineAttachment,
+      ...TextEditorWrapperProps
+    })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
       text: validationMessage,
       palette: validationPalette,
       type: errorType,
-      dataId: `${dataId}_ValidationMessage`
-    }, ValidationMessageProps)));
+      dataId: `${dataId}_ValidationMessage`,
+      ...ValidationMessageProps
+    }));
   }
 
 }

package/es/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -1,5 +1,3 @@
-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, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -132,7 +130,7 @@ export default class TextEditorWrapper extends Component {
     return /*#__PURE__*/React.createElement("div", {
       className: style.container,
       "data-selector-id": dataSelectorId
-    }, !isEditorShow ? /*#__PURE__*/React.createElement(Textarea, _extends({
+    }, !isEditorShow ? /*#__PURE__*/React.createElement(Textarea, {
       onFocus: this.handleTextareaFocus,
       text: value,
       animated: !needEditor,
@@ -144,8 +142,9 @@ export default class TextEditorWrapper extends Component {
       getRef: getRef,
       size: textBoxSize,
       variant: textBoxVariant,
-      customClass: style.textBox
-    }, Textarea1Props)) : null, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      customClass: style.textBox,
+      ...Textarea1Props
+    }) : null, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
       name: "slideDown",
       runOnMount: true,
       enterDuration: '300',
@@ -154,7 +153,7 @@ export default class TextEditorWrapper extends Component {
       component: "div"
     }, /*#__PURE__*/React.createElement("div", {
       className: style.textEditor
-    }, isEditorShow && needEditor ? /*#__PURE__*/React.createElement(TextEditor, _extends({
+    }, isEditorShow && needEditor ? /*#__PURE__*/React.createElement(TextEditor, {
       id: id,
       value: value,
       onChange: !isReadOnly && !isDisabled ? onChange : null,
@@ -182,8 +181,9 @@ export default class TextEditorWrapper extends Component {
       setInlineAttachmentInProgress: setInlineAttachmentInProgress,
       handleDropUpload: handleEditorDropUpload,
       onFocus: this.focusCallback,
-      needInlineAttachment: needInlineAttachment
-    }, TextEditorProps)) : /*#__PURE__*/React.createElement(Textarea, _extends({
+      needInlineAttachment: needInlineAttachment,
+      ...TextEditorProps
+    }) : /*#__PURE__*/React.createElement(Textarea, {
       onFocus: this.handleTextareaFocus,
       text: value,
       animated: !needEditor,
@@ -194,8 +194,9 @@ export default class TextEditorWrapper extends Component {
       needEffect: !(isReadOnly || isDisabled),
       getRef: getRef,
       size: textBoxSize,
-      variant: textBoxVariant
-    }, Textarea2Props)))));
+      variant: textBoxVariant,
+      ...Textarea2Props
+    }))));
   }
 
 }

package/es/form/fields/TextareaField/TextareaField.js

@@ -1,5 +1,3 @@
-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); }
-
 /**** Libraries ****/
 import React, { PureComponent } from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -105,17 +103,18 @@ export default class TextareaField extends PureComponent {
       isLocked: isLocked,
       lockedInfoText: lockedInfoText,
       renderProps: renderLabelProps
-    }, /*#__PURE__*/React.createElement(Label, _extends({
+    }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
       id: id,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
       customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
-    }, LabelProps))), /*#__PURE__*/React.createElement("div", {
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      ...LabelProps
+    })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
-    }, /*#__PURE__*/React.createElement(Textarea, _extends({
+    }, /*#__PURE__*/React.createElement(Textarea, {
       onChange: this.handleChange,
       animated: animated,
       size: fieldSize === 'medium' ? textBoxSize : 'xmedium',
@@ -133,24 +132,26 @@ export default class TextareaField extends PureComponent {
       needEffect: isReadOnly || isDisabled ? false : true,
       resize: "vertical" // onKeyDown={onKeyDown}
       ,
-      htmlId: uniqueId
-    }, TextareaProps, {
+      htmlId: uniqueId,
+      ...TextareaProps,
       a11y: {
         ariaLabelledby: labelName
       }
-    })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    }), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
       text: validationMessage,
       palette: validationPalette,
       type: errorType,
       htmlFor: uniqueId,
-      dataId: `${dataId}_ValidationMessage`
-    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+      dataId: `${dataId}_ValidationMessage`,
+      ...ValidationMessageProps1
+    }), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
       text: validationRuleMessage,
       palette: validationRulePalette,
       type: errorType,
       htmlFor: uniqueId,
-      dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2))));
+      dataId: `${dataId}_ValidationRuleMessage`,
+      ...ValidationMessageProps2
+    })));
   }
 
 }

package/es/layout/SubtabLayout/SubtabLayout.js

@@ -1,5 +1,3 @@
-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';
@@ -124,15 +122,15 @@ export default class SubtabLayout extends React.Component {
       children,
       dataId
     } = this.props;
-    return /*#__PURE__*/React.createElement(Card, _extends({
+    return /*#__PURE__*/React.createElement(Card, {
       isScrollAttribute: true,
-      dataId: dataId
-    }, this.props, {
+      dataId: dataId,
+      ...this.props,
       childTypes: {
         cardHeader: SubtabHeader,
         cardContent: SubtabContent
       }
-    }), children);
+    }, children);
   }
 
 }

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

@@ -57,7 +57,7 @@
   position: absolute;
   top: var(--zd_size20) ;
   z-index: -1;
-  box-shadow: var(--zd_bs_subtablayout_shadow);
+  box-shadow: var(--zd_bs_contrast_outline, 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow));
   border-radius: 100px/10px;
 }
 

package/es/list/DotNew/DotNew.module.css

@@ -15,11 +15,12 @@
     0 0 0 0 rgba(10, 115, 235, 0.6); */
   border-radius: 50%;
   background-color: var(--zdt_dotnew_default_bg);
-  box-shadow: var(--zd_bs_dotnew_shadow);
+  box-shadow: var(--zd_bs_contrast_outline, 0 0 15px 1px var(--zdt_dotnew_default_box_shadow));
 }
 
 @keyframes dotAnimation {
   to {
+    /*css:validation:ignore*/
     box-shadow: 0 0 0 12px var(--zdt_dotnew_animate_box_shadow), 0 0 0 8px var(--zdt_dotnew_animate_to_box_shadow);
   }
 }

package/es/list/ListLayout/ListLayout.js

@@ -1,5 +1,3 @@
-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, { Component } from 'react';
 import { ListLayout_defaultProps } from './props/defaultProps';
 import { ListLayout_propTypes, Column_propTypes } from './props/propTypes';
@@ -69,9 +67,10 @@ export class Column extends Component {
       children,
       className
     } = this.props;
-    return /*#__PURE__*/React.createElement(Box, _extends({
-      className: `${className ? className : ''}`
-    }, this.props), children);
+    return /*#__PURE__*/React.createElement(Box, {
+      className: `${className ? className : ''}`,
+      ...this.props
+    }, children);
   }
 
 }

package/es/list/SecondaryText/AccountName.js

@@ -1,5 +1,3 @@
-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); }
-
 /* eslint-disable react/forbid-component-props */
 
 /**** Libraries ****/
@@ -53,26 +51,28 @@ export default class AccountName extends Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.primaryAccountName,
       shrink: true
-    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
+    }, isLink ? /*#__PURE__*/React.createElement(Link, {
       href: href,
       urlName: urlName,
       urlData: urlData,
       onClick: onClick,
       dataId: `${dataId}_link`,
-      className: style.link
-    }, LinkProps, {
+      className: style.link,
+      ...LinkProps,
       ariaLabel: `Account Name ${text}`
-    }), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`
-    }, TextProps), text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
+    }, text)) : /*#__PURE__*/React.createElement("div", {
+      className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
+      ...TextProps
+    }, text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
       href: secondaryAccountHref,
       onClick: secondaryAccountClick,
       className: style.link
-    }, /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, SecondaryTextProps), secondaryAccountText))))));
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
+      ...SecondaryTextProps
+    }, secondaryAccountText))))));
   }
 
 }

package/es/list/SecondaryText/ContactName.js

@@ -1,5 +1,3 @@
-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, { Component } from 'react';
 import { ContactName_defaultProps } from './props/defaultProps';
 import { ContactName_propTypes } from './props/propTypes';
@@ -54,22 +52,23 @@ export default class ContactName extends Component {
       iconClass: style.icon
     })), /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
+    }, isLink ? /*#__PURE__*/React.createElement(Link, {
       urlName: urlName,
       href: href,
       urlData: urlData,
       onClick: onClick,
       title: dataTitle,
       dataId: `${dataId}_link`,
-      className: style.link
-    }, LinkProps, {
+      className: style.link,
+      ...LinkProps,
       ariaLabel: `Contact Name ${text}`
-    }), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", _extends({
+    }, text)) : /*#__PURE__*/React.createElement("div", {
       className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
-      "data-title": dataTitle
-    }, TextProps), text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
+      "data-title": dataTitle,
+      ...TextProps
+    }, text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
       type: sentimentType,
       dataTitle: sentimentDataTitle
     })));