@zohodesk/dot 1.0.0-temp-181.1 → 1.0.0-temp-181.3

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

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -11,6 +13,7 @@ import DropDownSeparator from '@zohodesk/components/es/v1/DropDown/DropDownSepar
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
+import MultiSelectHeader from '@zohodesk/components/es/v1/MultiSelect/MultiSelectHeader';
 import { stopBubbling } from '../../../../utils/General';
 import { scrollTo, findScrollEnd } from '@zohodesk/components/es/utils/Common.js';
 import style from '../../../../form/fields/TagsMultiSelect/TagsMultiSelect.module.css';
@@ -140,14 +143,29 @@ export default class TagsMultiSelect extends React.Component {
       boxSize,
       onSelectTag,
       clickableTag,
-      dataSelectorId
+      dataSelectorId,
+      handleSelectAll,
+      selectAllText,
+      needSelectAll,
+      customClass,
+      customProps
     } = this.props;
     let {
       showAll
     } = this.state;
     let chipLimit = !isPopupReady ? showAll ? tagsList.length : chipNeedToShow : tagsList.length;
+    let {
+      tagCustomClass = '',
+      listItemClass = '',
+      textBoxIconWrapperClass = ''
+    } = customClass;
+    const {
+      TextBoxIconProps = {},
+      TagWrapperProps = {},
+      TagProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
-      className: ` ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
+      className: `${style.container} ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
               ${needBorder ? style[`borderColor_${borderColor}`] : style.borderColor_transparent} ${isPopupReady && needBorder ? style.active : ''}` : ''} ${className}`,
       onClick: stopBubbling,
       "data-id": `${dataId}_tagsContainer`,
@@ -157,7 +175,7 @@ export default class TagsMultiSelect extends React.Component {
       alignBox: "row",
       align: "vertical",
       isCover: false,
-      className: style.tagDiv,
+      className: `${style.tagDiv} ${textBoxIconWrapperClass}`,
       wrap: "wrap",
       eleRef: getTargetRef,
       scroll: "vertical"
@@ -165,20 +183,23 @@ export default class TagsMultiSelect extends React.Component {
       let {
         name,
         tagType,
-        id
+        id,
+        boxCustomProps,
+        tagCustomProps
       } = tag;
-      return index < chipLimit ? /*#__PURE__*/React.createElement(Box, {
+      return index < chipLimit ? /*#__PURE__*/React.createElement(Box, _extends({
         className: style.tag,
         key: index
-      }, /*#__PURE__*/React.createElement(Tag, {
+      }, TagWrapperProps, boxCustomProps), /*#__PURE__*/React.createElement(Tag, _extends({
         id: id,
         text: name,
         onRemove: isReadOnly ? null : deleteTag.bind(this, name),
         closeTitle: i18nKeys.deleteText,
         palette: clickableTag ? 'defaultLink' : tagType === 'SYSTEM' ? 'primary' : 'default',
         isReadOnly: isReadOnly,
-        onSelectTag: onSelectTag ? onSelectTag : undefined
-      })) : null;
+        onSelectTag: onSelectTag ? onSelectTag : undefined,
+        customClass: tagCustomClass
+      }, TagProps, tagCustomProps))) : null;
     }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/React.createElement(Box, {
       className: style.moreLess,
       dataId: `${dataId}_tagsMore`,
@@ -190,7 +211,7 @@ export default class TagsMultiSelect extends React.Component {
       className: style.inputWrapper
     }, /*#__PURE__*/React.createElement("span", {
       className: style.custmSpan
-    }, name), /*#__PURE__*/React.createElement(TextBoxIcon, {
+    }, name), /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       htmlId: htmlId,
       dataId: `${dataId}_tagInp`,
       value: name,
@@ -207,7 +228,7 @@ export default class TagsMultiSelect extends React.Component {
       },
       size: "xsmall",
       inputRef: this.textInputRef
-    }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }, TextBoxIconProps), getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {
@@ -231,7 +252,12 @@ export default class TagsMultiSelect extends React.Component {
         alignBox: "row"
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
-      }, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
+      }, needSelectAll ? /*#__PURE__*/React.createElement(MultiSelectHeader, {
+        onSelect: handleSelectAll,
+        selectAllText: selectAllText,
+        suggestions: searchList,
+        dataId: `${dataId}_selectAll`
+      }) : null, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: `${tabletMode ? '' : style.viewpopNew}`
       }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
@@ -245,7 +271,8 @@ export default class TagsMultiSelect extends React.Component {
       }, searchList.map((item, index) => {
         let {
           name,
-          isNew
+          isNew,
+          listItemProps
         } = item;
         return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
           key: index,
@@ -257,7 +284,9 @@ export default class TagsMultiSelect extends React.Component {
           needTick: true,
           highlight: selectSearchIndex === index,
           getRef: this.getSelectedItemRef,
-          isDisabled: listDisabled
+          isDisabled: listDisabled,
+          customProps: listItemProps,
+          customClass: listItemClass
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

package/es/v1/form/fields/TagsMultiSelect/props/defaultProps.js

@@ -7,5 +7,8 @@ export const defaultProps = {
   dataId: '',
   boxSize: 'default',
   clickableTag: false,
-  dataSelectorId: 'tagsMultiSelectField'
+  dataSelectorId: 'tagsMultiSelectField',
+  needSelectAll: false,
+  customClass: {},
+  customProps: {}
 };

package/es/v1/form/fields/TagsMultiSelect/props/propTypes.js

@@ -40,5 +40,14 @@ export const propTypes = {
   boxSize: PropTypes.string,
   onSelectTag: PropTypes.func,
   clickableTag: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  handleSelectAll: PropTypes.func,
+  selectAllText: PropTypes.string,
+  needSelectAll: PropTypes.bool,
+  customClass: PropTypes.object,
+  customProps: PropTypes.shape({
+    TextBoxIconProps: PropTypes.object,
+    TagWrapperProps: PropTypes.object,
+    TagProps: PropTypes.object
+  })
 };

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

@@ -75,7 +75,11 @@ const TagsMultiSelectField = props => {
     value,
     selectedValueCount,
     validationMessage,
-    options
+    options,
+    infoText,
+    isLocked,
+    lockedInfoText,
+    alignField
   } = fieldProperties;
   options = options || [];
 
@@ -191,7 +195,10 @@ const TagsMultiSelectField = props => {
     "data-selector-id": dataSelectorId
   }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
     ePhiData: ePhiData,
-    alignContainer: "baseline",
+    alignContainer: alignField,
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
     renderProps: {
       end: renderEnd
     }

package/es/v1/form/fields/TagsMultiSelectField/props/defaultProps.js

@@ -2,7 +2,9 @@ import { FieldCommonDefaultProps } from '../../props/FieldCommonDefaultProps';
 export const defaultProps = {
   fieldProperties: {
     isDisabled: false,
-    isMandatory: false
+    isMandatory: false,
+    isLocked: false,
+    alignField: 'baseline'
   },
   styleProperties: {
     containerClass: '',

package/es/v1/form/fields/TagsMultiSelectField/props/propTypes.js

@@ -11,7 +11,11 @@ export const propTypes = {
     selectedValueCount: PropTypes.string,
     validationMessage: PropTypes.string,
     options: PropTypes.array,
-    clickableTag: PropTypes.bool
+    clickableTag: PropTypes.bool,
+    infoText: PropTypes.string,
+    isLocked: PropTypes.bool,
+    lockedInfoText: PropTypes.string,
+    alignField: PropTypes.oneOf(['vertical', 'baseline'])
   }),
   styleProperties: PropTypes.shape({
     labelSize: PropTypes.string,

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

@@ -10,7 +10,8 @@ const Section = props => {
     titleClass,
     className,
     column,
-    formName
+    formName,
+    children
   } = props;
   return /*#__PURE__*/React.createElement("div", {
     "data-id": dataId,
@@ -22,7 +23,7 @@ const Section = props => {
     className: `${className ? className : ''} ${column == 'single' ? style.singleColumn : ''}`,
     "data-id": formName && formName,
     "data-test-id": formName && formName
-  }, this.props.children));
+  }, children));
 };
 
 export default Section;

package/lib/common/dot_boxShadow.module.css

@@ -35,6 +35,4 @@
 
     /* desktop notification */
     --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
-
-
 }

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -33,12 +33,12 @@ var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/li
 
 var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
 
+var _MultiSelectHeader = _interopRequireDefault(require("@zohodesk/components/lib/MultiSelect/MultiSelectHeader"));
+
 var _General = require("../../../utils/General");
 
 var _Common = require("@zohodesk/components/lib/utils/Common.js");
 
-var _MultiSelectHeader = _interopRequireDefault(require("@zohodesk/components/lib/MultiSelect/MultiSelectHeader"));
-
 var _TagsMultiSelectModule = _interopRequireDefault(require("./TagsMultiSelect.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -225,7 +225,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           _customProps$TagProps = customProps.TagProps,
           TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: " ".concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
+        className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
         onClick: _General.stopBubbling,
         "data-id": "".concat(dataId, "_tagsContainer"),
         "data-test-id": "".concat(dataId, "_tagsContainer"),
@@ -247,7 +247,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         return index < chipLimit ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
           className: _TagsMultiSelectModule["default"].tag,
           key: index
-        }, boxCustomProps, TagWrapperProps), /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({
+        }, TagWrapperProps, boxCustomProps), /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({
           id: id,
           text: name,
           onRemove: isReadOnly ? null : deleteTag.bind(_this3, name),
@@ -256,7 +256,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           isReadOnly: isReadOnly,
           onSelectTag: onSelectTag ? onSelectTag : undefined,
           customClass: tagCustomClass
-        }, tagCustomProps, TagProps))) : null;
+        }, TagProps, tagCustomProps))) : null;
       }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _TagsMultiSelectModule["default"].moreLess,
         dataId: "".concat(dataId, "_tagsMore"),

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -1,3 +1,6 @@
+.container {
+  position: relative;
+}
 .tag {
   max-width: 100% ;
 }
@@ -91,6 +94,12 @@
   max-width: 100% ;
   visibility: hidden;
 }
+[dir=ltr] .custmSpan {
+  padding-right: var(--zd_size28) ;
+}
+[dir=rtl] .custmSpan {
+  padding-left: var(--zd_size28) ;
+}
 .custmInp {
   position: absolute;
   top: 0 ;

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -117,7 +117,11 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
       value = fieldProperties.value,
       selectedValueCount = fieldProperties.selectedValueCount,
       validationMessage = fieldProperties.validationMessage,
-      options = fieldProperties.options;
+      options = fieldProperties.options,
+      infoText = fieldProperties.infoText,
+      isLocked = fieldProperties.isLocked,
+      lockedInfoText = fieldProperties.lockedInfoText,
+      alignField = fieldProperties.alignField;
   options = options || [];
 
   var handleKeyUp = function handleKeyUp(event) {
@@ -230,7 +234,10 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     "data-selector-id": dataSelectorId
   }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
     ePhiData: ePhiData,
-    alignContainer: "baseline",
+    alignContainer: alignField,
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
     renderProps: {
       end: renderEnd
     }

package/lib/form/fields/TagsMultiSelectField/props/defaultProps.js

@@ -16,7 +16,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var defaultProps = _objectSpread({
   fieldProperties: {
     isDisabled: false,
-    isMandatory: false
+    isMandatory: false,
+    isLocked: false,
+    alignField: 'baseline'
   },
   styleProperties: {
     containerClass: '',

package/lib/form/fields/TagsMultiSelectField/props/propTypes.js

@@ -22,7 +22,11 @@ var propTypes = {
     selectedValueCount: _propTypes["default"].string,
     validationMessage: _propTypes["default"].string,
     options: _propTypes["default"].array,
-    clickableTag: _propTypes["default"].bool
+    clickableTag: _propTypes["default"].bool,
+    infoText: _propTypes["default"].string,
+    isLocked: _propTypes["default"].bool,
+    lockedInfoText: _propTypes["default"].string,
+    alignField: _propTypes["default"].oneOf(['vertical', 'baseline'])
   }),
   styleProperties: _propTypes["default"].shape({
     labelSize: _propTypes["default"].string,

package/lib/v1/DotWrapper/DotWrapper.js

@@ -9,6 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _dynamicImports = require("./libraryChunks/dynamicImports");
 
+require("@zohodesk/components/assets/Contrast/lightContrastLightness.module.css");
+
+require("@zohodesk/components/assets/Contrast/darkContrastLightness.module.css");
+
+require("@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css");
+
 require("@zohodesk/variables/assets/colorVariables.module.css");
 
 require("@zohodesk/variables/assets/dotVariables.module.css");
@@ -17,6 +23,12 @@ require("@zohodesk/components/es/common/basic.module.css");
 
 require("@zohodesk/variables/lib/fontFamilyVariables.module.css");
 
+require("@zohodesk/components/lib/common/boxShadow.module.css");
+
+require("../../common/dot_boxShadow.module.css");
+
+require("@zohodesk-private/desk-components/es/common/Dc_boxShadow.module.css");
+
 var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
@@ -30,7 +42,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function DotWrapper(props) {
-  var appearance = props.appearance,
+  var children = props.children,
+      appearance = props.appearance,
       theme = props.theme,
       library = props.library,
       baseZoomSize = props.baseZoomSize,
@@ -50,9 +63,9 @@ function DotWrapper(props) {
   var combinedStyles = _objectSpread(_objectSpread({}, baseZoom), baseFont);
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(className, " rootWrapper"),
+    className: "rootWrapper ".concat(className),
     style: combinedStyles
-  }, "Dot Wrapper");
+  }, children);
 }
 
 DotWrapper.propTypes = _propTypes.propTypes;

package/lib/v1/DotWrapper/libraryChunks/appearance/desk-components/DarkMode_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/dark/mode/deskComponents_DarkMode.module.css");

package/lib/v1/DotWrapper/libraryChunks/appearance/desk-components/LightMode_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/light/mode/deskComponents_LightMode.module.css");

package/lib/v1/DotWrapper/libraryChunks/appearance/desk-components/PureDarkMode_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/pureDark/mode/deskComponents_PureDarkMode.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/blue/Blue_Dark_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/dark/themes/blue/blue_deskComponentsTheme_DarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/blue/Blue_Light_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/light/themes/blue/blue_deskComponentsTheme_LightTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/blue/Blue_PureDark_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/pureDark/themes/blue/blue_deskComponentsTheme_PureDarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/green/Green_Dark_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/dark/themes/green/green_deskComponentsTheme_DarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/green/Green_Light_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/light/themes/green/green_deskComponentsTheme_LightTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/green/Green_PureDark_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/pureDark/themes/green/green_deskComponentsTheme_PureDarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/orange/Orange_Dark_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/dark/themes/orange/orange_deskComponentsTheme_DarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/orange/Orange_Light_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/light/themes/orange/orange_deskComponentsTheme_LightTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/orange/Orange_PureDark_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/pureDark/themes/orange/orange_deskComponentsTheme_PureDarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/red/Red_Dark_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/dark/themes/red/red_deskComponentsTheme_DarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/red/Red_Light_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/light/themes/red/red_deskComponentsTheme_LightTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/red/Red_PureDark_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/pureDark/themes/red/red_deskComponentsTheme_PureDarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/yellow/Yellow_Dark_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/dark/themes/yellow/yellow_deskComponentsTheme_DarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/yellow/Yellow_Light_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/light/themes/yellow/yellow_deskComponentsTheme_LightTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/desk-components/yellow/Yellow_PureDark_DeskComponent.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk-private/desk-components/assets/Appearance/pureDark/themes/yellow/yellow_deskComponentsTheme_PureDarkTheme.module.css");

package/lib/v1/DotWrapper/props/propTypes.js

@@ -10,9 +10,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
+  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element)]),
   appearance: _propTypes["default"].oneOf(['light', 'dark', 'pureDark']),
   theme: _propTypes["default"].oneOf(['blue', 'green', 'orange', 'red', 'yellow']),
-  library: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(['component', 'dot', 'svg'])),
+  library: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(['component', 'dot', 'svg', 'deskComponents'])),
   baseZoomSize: _propTypes["default"].number,
   baseFontSize: _propTypes["default"].number,
   className: _propTypes["default"].string

package/lib/v1/DotWrapper/utils/appearanceProperties.js

@@ -56,6 +56,21 @@ var appearanceImports = {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('../libraryChunks/appearance/svg/PureDarkMode_SVG'));
     });
+  },
+  Lib_LightMode_DeskComponent: function Lib_LightMode_DeskComponent() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('../libraryChunks/appearance/desk-components/LightMode_DeskComponent'));
+    });
+  },
+  Lib_DarkMode_DeskComponent: function Lib_DarkMode_DeskComponent() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('../libraryChunks/appearance/desk-components/DarkMode_DeskComponent'));
+    });
+  },
+  Lib_PureDarkMode_DeskComponent: function Lib_PureDarkMode_DeskComponent() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('../libraryChunks/appearance/desk-components/PureDarkMode_DeskComponent'));
+    });
   }
 };
 exports.appearanceImports = appearanceImports;
@@ -74,6 +89,11 @@ var appearanceMapping = {
     light: 'Lib_LightMode_SVG',
     dark: 'Lib_DarkMode_SVG',
     pureDark: 'Lib_PureDarkMode_SVG'
+  },
+  deskComponents: {
+    light: 'Lib_LightMode_DeskComponent',
+    dark: 'Lib_DarkMode_DeskComponent',
+    pureDark: 'Lib_PureDarkMode_DeskComponent'
   }
 };
 exports.appearanceMapping = appearanceMapping;