@zohodesk/dot 1.9.17 → 1.9.19

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

@@ -1,25 +1,25 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Search rendering the customized style search 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center wrapper searchWrapperClass borderType"
+    class="d-flex d-flex-row d-items-center wrapper searchWrapperClass borderType"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row varClass customContainer effect container"
+        class="d-flex d-flex-row varClass customContainer effect container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -36,13 +36,13 @@ exports[`Search rendering the customized style search 1`] = `
           />
         </div>
         <div
-          class="noShrink iconContainer"
+          class="d-flex-shrink-0 iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize row"
+            class="d-flex d-h-full d-w-full d-flex-row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
@@ -57,23 +57,23 @@ exports[`Search rendering the customized style search 1`] = `
 exports[`Search rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center wrapper borderType"
+    class="d-flex d-flex-row d-items-center wrapper borderType"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row varClass customContainer effect container"
+        class="d-flex d-flex-row varClass customContainer effect container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -90,13 +90,13 @@ exports[`Search rendering the defult props 1`] = `
           />
         </div>
         <div
-          class="noShrink iconContainer"
+          class="d-flex-shrink-0 iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize row"
+            class="d-flex d-h-full d-w-full d-flex-row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
@@ -111,23 +111,23 @@ exports[`Search rendering the defult props 1`] = `
 exports[`Search rendering the prop hasSeparator is false 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center wrapper borderType"
+    class="d-flex d-flex-row d-items-center wrapper borderType"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row varClass customContainer effect container"
+        class="d-flex d-flex-row varClass customContainer effect container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -144,13 +144,13 @@ exports[`Search rendering the prop hasSeparator is false 1`] = `
           />
         </div>
         <div
-          class="noShrink iconContainer"
+          class="d-flex-shrink-0 iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize row"
+            class="d-flex d-h-full d-w-full d-flex-row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
@@ -165,7 +165,7 @@ exports[`Search rendering the prop hasSeparator is false 1`] = `
 exports[`Search rendering the prop hasSeparator is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center wrapper borderType"
+    class="d-flex d-flex-row d-items-center wrapper borderType"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -174,17 +174,17 @@ exports[`Search rendering the prop hasSeparator is true 1`] = `
       class="separator"
     />
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row varClass customContainer effect container"
+        class="d-flex d-flex-row varClass customContainer effect container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -201,13 +201,13 @@ exports[`Search rendering the prop hasSeparator is true 1`] = `
           />
         </div>
         <div
-          class="noShrink iconContainer"
+          class="d-flex-shrink-0 iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize row"
+            class="d-flex d-h-full d-w-full d-flex-row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
@@ -226,13 +226,13 @@ exports[`Search rendering the renderChildren props via function 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"
     >
       <div
-        class="flex row alignItems_center wrapper borderType"
+        class="d-flex d-flex-row d-items-center wrapper borderType"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -241,17 +241,17 @@ exports[`Search rendering the renderChildren props via function 1`] = `
           All Fields
         </div>
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex row varClass customContainer effect container"
+            class="d-flex d-flex-row varClass customContainer effect container"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -268,13 +268,13 @@ exports[`Search rendering the renderChildren props via function 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
@@ -291,23 +291,23 @@ exports[`Search rendering the renderChildren props via function 1`] = `
 exports[`Search rendering the search active 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center wrapper borderType focusWidth active"
+    class="d-flex d-flex-row d-items-center wrapper borderType focusWidth active"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row varClass customContainer effect active container"
+        class="d-flex d-flex-row varClass customContainer effect active container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -324,13 +324,13 @@ exports[`Search rendering the search active 1`] = `
           />
         </div>
         <div
-          class="noShrink iconContainer"
+          class="d-flex-shrink-0 iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize row"
+            class="d-flex d-h-full d-w-full d-flex-row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"

package/lib/lookup/header/TicketHeader/TicketHeader.js

@@ -25,6 +25,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _useDragger = _interopRequireDefault(require("../../../Hooks/Dragger/useDragger"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _lookupHeaderCommonModule = _interopRequireDefault(require("../lookupHeaderCommon.module.css"));
 
 var _lookupHeaderCommonResponsiveModule = _interopRequireDefault(require("../lookupHeaderCommonResponsive.module.css"));
@@ -95,7 +97,7 @@ function TicketHeader(props) {
     className: "".concat(_TicketHeaderModule["default"].dropdown),
     dataId: "filterIdselected"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _TicketHeaderModule["default"].menuWrapper
+    className: (0, _cssUtility.cn)(_TicketHeaderModule["default"].menuWrapper)
   }, /*#__PURE__*/_react["default"].createElement(_ViewDropDown["default"], {
     dropBoxSize: "small",
     emptyMessage: menuEmptyMessage,
@@ -116,7 +118,7 @@ function TicketHeader(props) {
     needOnTypeSearch: needOnTypeSearch,
     getRef: getSearchBoxRef
   })) : null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _lookupHeaderCommonModule["default"].closeContainer
+    className: (0, _cssUtility.cn)(_lookupHeaderCommonModule["default"].closeContainer)
   }, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
     onClose: onLookupClose,
     dataId: "close"
@@ -129,10 +131,5 @@ var MemoizedTicketHeader = /*#__PURE__*/(0, _react.memo)(TicketHeader);
 MemoizedTicketHeader.propTypes = _propTypes.propTypes;
 MemoizedTicketHeader.defaultProps = _defaultProps.defaultProps;
 MemoizedTicketHeader.displayName = 'TicketHeader';
-var _default = MemoizedTicketHeader; // if (__DOCS__) {
-//   TicketHeader.docs = {
-//     componentGroup: 'Lookup'
-//   };
-// }
-
+var _default = MemoizedTicketHeader;
 exports["default"] = _default;

package/lib/lookup/header/TicketHeader/TicketHeader.module.css

@@ -21,4 +21,6 @@
 .extraSmall .container {
   flex-direction: column;
 }
-.menuWrapper{display: inline-block;}
+.menuWrapper{
+  composes: d-inline-block from global;
+}

package/lib/lookup/header/TicketHeader/__tests__/__snapshots__/TicketHeader.spec.js.snap

@@ -1,28 +1,28 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TicketHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default container"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default container"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex column wrap innerContainer"
+        class="d-flex d-flex-col d-flex-wrap innerContainer"
         data-id="lookupView"
         data-selector-id="container"
         data-test-id="lookupView"
       >
         <div
-          class="noShrink title"
+          class="d-flex-shrink-0 title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -38,7 +38,7 @@ exports[`TicketHeader rendering the defult props 1`] = `
     >
       <button
         aria-pressed="false"
-        class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+        class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
         data-id="close"
         data-ishtml="false"
         data-selector-id="iconButton"
@@ -46,7 +46,7 @@ exports[`TicketHeader rendering the defult props 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross icon_button_center"
+          class="zd_font_icons ff icon-cross basic d-inline-block d-align-middle icon_button_center"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

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

@@ -2,8 +2,7 @@
   font-size: var(--zd_font_size16) ;
   font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
-  vertical-align: middle;
-  word-break: break-all;
+  composes: d-align-middle d-break-all from global;
   cursor: initial;
 }
 

package/lib/lookup/header/Title/Title.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LookupTitleModule = _interopRequireDefault(require("./LookupTitle.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -62,7 +64,7 @@ var Title = /*#__PURE__*/function (_PureComponent) {
           htmlId = _this$props.htmlId;
       return /*#__PURE__*/_react["default"].createElement("span", {
         id: htmlId,
-        className: "".concat(_LookupTitleModule["default"].title, " ").concat(_LookupTitleModule["default"][palette], " ").concat(isBold ? _LookupTitleModule["default"].bold : ''),
+        className: (0, _cssUtility.cn)("".concat(_LookupTitleModule["default"].title, " ").concat(_LookupTitleModule["default"][palette], " ").concat(isBold ? _LookupTitleModule["default"].bold : '')),
         "data-title": text
       }, text);
     }
@@ -73,8 +75,4 @@ var Title = /*#__PURE__*/function (_PureComponent) {
 
 exports["default"] = Title;
 Title.propTypes = _propTypes.propTypes;
-Title.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Title.docs = {
-//     componentGroup: 'Lookup'
-//   };
-// }
+Title.defaultProps = _defaultProps.defaultProps;

package/lib/lookup/header/Title/__tests__/__snapshots__/Titles.spec.js.snap

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

package/lib/lookup/header/ViewDropDown/ViewDropDown.js

@@ -33,6 +33,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/es/Loader/Loader"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ViewDropDownModule = _interopRequireDefault(require("./ViewDropDown.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -131,16 +133,16 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           selectedId = _this$state.selectedId;
       var suggestions = this.handleFilterSuggestions();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _ViewDropDownModule["default"].container,
+        className: (0, _cssUtility.cn)(_ViewDropDownModule["default"].container),
         "data-id": dataId,
         "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         onClick: this.togglePopup,
         ref: getTargetRef
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ViewDropDownModule["default"].labelCnt, " ").concat(isPopupOpen ? _ViewDropDownModule["default"].focused : '')
+        className: (0, _cssUtility.cn)("".concat(_ViewDropDownModule["default"].labelCnt, " ").concat(isPopupOpen ? _ViewDropDownModule["default"].focused : ''))
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _ViewDropDownModule["default"].labelText,
+        className: (0, _cssUtility.cn)(_ViewDropDownModule["default"].labelText),
         "data-title": selected,
         "data-id": "".concat(dataId, "_selectedValue"),
         "data-test-id": "".concat(dataId, "_selectedValue")
@@ -187,7 +189,7 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           eleRef: _this2.suggestionContainerRef,
           customClass: !tabletMode && dropBoxSize ? _ViewDropDownModule["default"][dropBoxSize] : ''
         }, suggestions.length ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ViewDropDownModule["default"].listItemContainer,
+          className: (0, _cssUtility.cn)(_ViewDropDownModule["default"].listItemContainer),
           "data-id": "".concat(dataId, "_Options")
         }, suggestions.map(function () {
           var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -212,9 +214,9 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           align: "both",
           className: _ViewDropDownModule["default"].loader
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : searchStr ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ViewDropDownModule["default"].emptyState
+          className: (0, _cssUtility.cn)(_ViewDropDownModule["default"].emptyState)
         }, searchEmptyMessage || emptyMessage) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ViewDropDownModule["default"].emptyState
+          className: (0, _cssUtility.cn)(_ViewDropDownModule["default"].emptyState)
         }, emptyMessage)))));
       }) : null);
     }
@@ -227,13 +229,6 @@ DropDown.propTypes = _propTypes.propTypes;
 DropDown.defaultProps = _defaultProps.defaultProps;
 var ViewDropDown = (0, _Popup["default"])(DropDown);
 ViewDropDown.defaultProps = DropDown.defaultProps;
-ViewDropDown.propTypes = DropDown.propTypes; // if (__DOCS__) {
-//   DropDown.docs = {
-//     componentGroup: 'Lookup'
-//   };
-//   // eslint-disable-next-line react/forbid-foreign-prop-types
-//   ViewDropDown.propTypes = DropDown.propTypes;
-// }
-
+ViewDropDown.propTypes = DropDown.propTypes;
 var _default = ViewDropDown;
 exports["default"] = _default;

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

@@ -24,7 +24,7 @@
 }
 
 .container {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .listItemContainer {
@@ -35,9 +35,9 @@
 /* Label Style */
 .labelCnt {
   composes: dInflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-cursor-pointer from global;
   line-height: 1.6667;
   color: var(--zdt_viewdropdown_label_text);
-  cursor: pointer;
 }
 
 .labelText {

package/lib/lookup/header/ViewDropDown/__test__/__snapshots__/ViewDropDown.spec.js.snap

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

package/lib/lookup/header/lookupHeaderCommon.module.css

@@ -1,6 +1,6 @@
 .container {
+  composes: d-relative from global;
   min-height: var(--zd_size51) ;
-  position: relative;
   padding-inline:var(--zd_size10) var(--zd_size30) ;
   padding-block:0 ;
 }
@@ -17,11 +17,8 @@
   margin-inline: var(--zd_size20) ;
   margin-block:0 ;
 }
-[dir=ltr] .searchContainer {
-  text-align: right;
-}
-[dir=rtl] .searchContainer {
-  text-align: left;
+.searchContainer {
+  composes: d-text-right from global;
 }
 .closeContainer {
   /* position: absolute;

package/lib/lookup/header/lookupHeaderCommonResponsive.module.css

@@ -1,10 +1,8 @@
 /* Responsive */
 .extraSmall {
+  composes: d-flex-col d-justify-normal d-items-start from global;
   padding-block: var(--zd_size12) ;
   padding-inline:0 var(--zd_size45) ;
-  justify-content: normal;
-  flex-direction: column;
-  align-items: flex-start;
 }
 
 [dir=ltr] .extraSmall .searchContainer {

package/lib/setup/header/Button/Button.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Button = _interopRequireDefault(require("@zohodesk/components/es/Button/Button"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _HeaderButtonModule = _interopRequireDefault(require("./HeaderButton.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -59,7 +61,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
           onClick = _this$props.onClick,
           id = _this$props.id;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _HeaderButtonModule["default"].container
+        className: (0, _cssUtility.cn)(_HeaderButtonModule["default"].container)
       }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         id: id,
         onClick: onClick,
@@ -75,9 +77,4 @@ var Button = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Button;
 Button.defaultProps = _defaultProps.defaultProps;
-Button.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   Button.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Button.propTypes = _propTypes.propTypes;

package/lib/setup/header/Button/__tests__/__snapshots__/Button.spec.js.snap

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

package/lib/setup/header/Link/Link.js

@@ -85,9 +85,4 @@ var Link = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Link;
 Link.defaultProps = _defaultProps.defaultProps;
-Link.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   Link.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Link.propTypes = _propTypes.propTypes;

package/lib/setup/header/Link/__tests__/__snapshots__/Link.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Link rendering the defult props 1`] = `
 <DocumentFragment>
@@ -9,14 +9,14 @@ exports[`Link rendering the defult props 1`] = `
     target="_blank"
   >
     <div
-      class="noShrink icon"
+      class="d-flex-shrink-0 icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-newtab fbold"
+        class="zd_font_icons ff icon-newtab basic d-inline-block d-align-middle d-font-bold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -24,7 +24,7 @@ exports[`Link rendering the defult props 1`] = `
       />
     </div>
     <div
-      class="flexible basis_zero noShrink text"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 text"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"