@zohodesk/dot 1.0.0-temp-195.2 → 1.0.0-temp-198

package/lib/list/Thread/Thread.module.css

@@ -1,43 +1,43 @@
-.varClass {
-  --icon_color: var(--zdt_thread_iconText);
-}
-.container {
-  composes: varClass;
-  position: relative;
-  color: var(--icon_color);
-  cursor: pointer;
-}
-.container:hover {
-  --icon_color: var(--zdt_thread_hover_iconText);
-}
-.count {
-  font-size: var(--zd_font_size9) ;
-}
-.align_left .count {
-  position: absolute;
-  line-height: normal;
-  top: var(--zd_size3) ;
-}
-[dir=ltr] .align_left .count {
-  text-align: left;
-  left: var(--zd_size8) ;
-}
-[dir=rtl] .align_left .count {
-  text-align: right;
-  right: var(--zd_size8) ;
-}
-.align_right {
-  composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
-}
-.align_right .count {
-  position: relative;
-  bottom: var(--zd_size2) ;
-}
-[dir=ltr] .align_right .count {
-  right: var(--zd_size5) ;
-  float: right;
-}
-[dir=rtl] .align_right .count {
-  left: var(--zd_size5) ;
-  float: left;
+.varClass {
+  --icon_color: var(--zdt_thread_iconText);
+}
+.container {
+  composes: varClass;
+  position: relative;
+  color: var(--icon_color);
+  cursor: pointer;
+}
+.container:hover {
+  --icon_color: var(--zdt_thread_hover_iconText);
+}
+.count {
+  font-size: var(--zd_font_size9) ;
+}
+.align_left .count {
+  position: absolute;
+  line-height: normal;
+  top: var(--zd_size3) ;
+}
+[dir=ltr] .align_left .count {
+  text-align: left;
+  left: var(--zd_size8) ;
+}
+[dir=rtl] .align_left .count {
+  text-align: right;
+  right: var(--zd_size8) ;
+}
+.align_right {
+  composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
+}
+.align_right .count {
+  position: relative;
+  bottom: var(--zd_size2) ;
+}
+[dir=ltr] .align_right .count {
+  right: var(--zd_size5) ;
+  float: right;
+}
+[dir=rtl] .align_right .count {
+  left: var(--zd_size5) ;
+  float: left;
 }

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -240,6 +240,10 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           needMultiLineText = _this$props4.needMultiLineText,
           isFetchingOptions = _this$props4.isFetchingOptions,
           getNextOptions = _this$props4.getNextOptions,
+          isAbsolutePositioningNeeded = _this$props4.isAbsolutePositioningNeeded,
+          isRestrictScroll = _this$props4.isRestrictScroll,
+          positionsOffset = _this$props4.positionsOffset,
+          targetOffset = _this$props4.targetOffset,
           _this$props4$a11y = _this$props4.a11y,
           a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y;
       var _a11y$tabIndex = a11y.tabIndex,
@@ -307,6 +311,10 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           needFocusScope: true,
           onClose: _this2.handleTogglePopup,
           dataId: "".concat(dataId, "_dropbox"),
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          isRestrictScroll: isRestrictScroll,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset,
           customProps: {
             focusScopeProps: {
               loadNextOptions: getNextOptions,

package/lib/list/status/StatusDropdown/props/defaultProps.js

@@ -22,6 +22,8 @@ var defaultProps = {
   needExternalPopupState: false,
   statusColor: 'statusColor',
   needMultiLineText: false,
-  isFetchingOptions: false
+  isFetchingOptions: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false
 };
 exports.defaultProps = defaultProps;

package/lib/list/status/StatusDropdown/props/propTypes.js

@@ -30,5 +30,5 @@ var propTypes = (_propTypes = {
   idName: _propTypes2["default"].string,
   isArrow: _propTypes2["default"].bool,
   isDataLoaded: _propTypes2["default"].bool
-}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _propTypes);
+}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _defineProperty(_propTypes, "isAbsolutePositioningNeeded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isRestrictScroll", _propTypes2["default"].bool), _defineProperty(_propTypes, "positionsOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "targetOffset", _propTypes2["default"].object), _propTypes);
 exports.propTypes = propTypes;

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

@@ -118,7 +118,11 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           searchBoxVariant = _this$props.searchBoxVariant,
           searchBoxPlaceHolder = _this$props.searchBoxPlaceHolder,
           maxLength = _this$props.maxLength,
-          dataId = _this$props.dataId;
+          dataId = _this$props.dataId,
+          isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
+          isRestrictScroll = _this$props.isRestrictScroll,
+          positionsOffset = _this$props.positionsOffset,
+          targetOffset = _this$props.targetOffset;
       var _this$state = this.state,
           hoverIndex = _this$state.hoverIndex,
           selected = _this$state.selected,
@@ -161,7 +165,11 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           size: "large",
           alignBox: "row",
           isResponsivePadding: true,
-          dataId: "".concat(dataId, "_dropbox")
+          dataId: "".concat(dataId, "_dropbox"),
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          isRestrictScroll: isRestrictScroll,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Card.Card, null, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_DropDownSearch["default"], {

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

@@ -10,6 +10,8 @@ var defaultProps = {
   needSearch: true,
   textField: 'text',
   valueField: 'id',
-  dataId: 'ViewDropDown'
+  dataId: 'ViewDropDown',
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false
 };
 exports.defaultProps = defaultProps;

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

@@ -29,6 +29,10 @@ var propTypes = {
   animationStyle: _propTypes["default"].string,
   searchBoxSize: _propTypes["default"].string,
   searchBoxVariant: _propTypes["default"].string,
-  maxLength: _propTypes["default"].string
+  maxLength: _propTypes["default"].string,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object
 };
 exports.propTypes = propTypes;

package/lib/v1/ActionButton/ActionButton.js

@@ -59,7 +59,11 @@ function ActionButton(props) {
       popupGroup = props.popupGroup,
       togglePopup = props.togglePopup,
       defaultPosition = props.defaultPosition,
-      openPopupOnly = props.openPopupOnly;
+      openPopupOnly = props.openPopupOnly,
+      isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
+      isRestrictScroll = props.isRestrictScroll,
+      positionsOffset = props.positionsOffset,
+      targetOffset = props.targetOffset;
 
   var handleTogglePopup = function handleTogglePopup(e) {
     togglePopup(e, defaultPosition);
@@ -145,7 +149,11 @@ function ActionButton(props) {
     popupGroup: popupGroup,
     needFocusScope: true,
     onClose: handleTogglePopup,
-    dataId: "".concat(dataId, "_dropbox")
+    dataId: "".concat(dataId, "_dropbox"),
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    isRestrictScroll: isRestrictScroll,
+    positionsOffset: positionsOffset,
+    targetOffset: targetOffset
   }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     flexible: true,
     shrink: true,

package/lib/v1/ActionButton/props/defaultProps.js

@@ -19,6 +19,8 @@ var defaultProps = {
   isBoxPaddingNeed: true,
   palette: 'primaryFilled',
   removeChildrenTooltip: false,
-  innerClassName: ''
+  innerClassName: '',
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false
 };
 exports.defaultProps = defaultProps;

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

@@ -39,6 +39,10 @@ var propTypes = {
   innerClassName: _propTypes["default"].string,
   popupGroup: _propTypes["default"].string,
   togglePopup: _propTypes["default"].func,
-  openPopupOnly: _propTypes["default"].func
+  openPopupOnly: _propTypes["default"].func,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object
 };
 exports.propTypes = propTypes;

package/lib/v1/DotProvider/DotProvider.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+var _useDotProvider = _interopRequireDefault(require("./hooks/useDotProvider"));
+
+var _excluded = ["tag", "themeAppearance", "themeColor", "baseZoomUnit", "baseFontUnit", "zoomUnitVariable", "fontUnitVariable", "themeAppearanceAttr", "themeColorAttr", "providerRef", "onAssetsDownloadSuccess", "getAssetsPromises", "children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var DotProvider = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$tag = props.tag,
+      Element = _props$tag === void 0 ? 'div' : _props$tag,
+      themeAppearance = props.themeAppearance,
+      themeColor = props.themeColor,
+      baseZoomUnit = props.baseZoomUnit,
+      baseFontUnit = props.baseFontUnit,
+      zoomUnitVariable = props.zoomUnitVariable,
+      fontUnitVariable = props.fontUnitVariable,
+      themeAppearanceAttr = props.themeAppearanceAttr,
+      themeColorAttr = props.themeColorAttr,
+      providerRef = props.providerRef,
+      onAssetsDownloadSuccess = props.onAssetsDownloadSuccess,
+      getAssetsPromises = props.getAssetsPromises,
+      children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var wrapperElementRef = (0, _react.useRef)(null);
+  var getProviderElement = (0, _react.useCallback)(function () {
+    if (typeof providerRef === 'function') {
+      return providerRef();
+    } else if (Element !== _react["default"].Fragment) {
+      return wrapperElementRef.current;
+    } else {
+      return document.documentElement;
+    }
+  }, [providerRef, Element]);
+  var getEleRef = (0, _react.useCallback)(function (ele) {
+    wrapperElementRef.current = ele;
+
+    if (ref && typeof ref === 'function') {
+      ref(ele);
+    } else if (ref && _typeof(ref) === 'object') {
+      ref.current = ele;
+    }
+  }, [ref]);
+  (0, _useDotProvider["default"])({
+    themeAppearance: themeAppearance,
+    themeColor: themeColor,
+    themeAppearanceAttr: themeAppearanceAttr,
+    themeColorAttr: themeColorAttr,
+    baseZoomUnit: baseZoomUnit,
+    baseFontUnit: baseFontUnit,
+    zoomUnitVariable: zoomUnitVariable,
+    fontUnitVariable: fontUnitVariable,
+    getProviderElement: getProviderElement,
+    onAssetsDownloadSuccess: onAssetsDownloadSuccess,
+    getAssetsPromises: getAssetsPromises
+  });
+  return /*#__PURE__*/_react["default"].createElement(Element, _extends({}, rest, {
+    ref: getEleRef
+  }), children);
+});
+DotProvider.propTypes = _propTypes.propTypes;
+DotProvider.defaultProps = _defaultProps.defaultProps;
+var _default = DotProvider;
+exports["default"] = _default;

package/lib/v1/DotProvider/hooks/useDotProvider.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _useDownloadAssetsAndSetAttr = _interopRequireDefault(require("./useDownloadAssetsAndSetAttr"));
+
+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");
+
+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");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function useDotProvider(_ref) {
+  var themeAppearance = _ref.themeAppearance,
+      themeColor = _ref.themeColor,
+      baseZoomUnit = _ref.baseZoomUnit,
+      baseFontUnit = _ref.baseFontUnit,
+      getProviderElement = _ref.getProviderElement,
+      zoomUnitVariable = _ref.zoomUnitVariable,
+      fontUnitVariable = _ref.fontUnitVariable,
+      themeAppearanceAttr = _ref.themeAppearanceAttr,
+      themeColorAttr = _ref.themeColorAttr,
+      onAssetsDownloadSuccess = _ref.onAssetsDownloadSuccess,
+      getAssetsPromises = _ref.getAssetsPromises;
+  var assetsPromises = (0, _useDownloadAssetsAndSetAttr["default"])({
+    themeAppearance: themeAppearance,
+    themeColor: themeColor,
+    baseZoomUnit: baseZoomUnit,
+    baseFontUnit: baseFontUnit,
+    getProviderElement: getProviderElement,
+    zoomUnitVariable: zoomUnitVariable,
+    fontUnitVariable: fontUnitVariable,
+    themeAppearanceAttr: themeAppearanceAttr,
+    themeColorAttr: themeColorAttr
+  });
+  var themeAppearancePromise = assetsPromises.themeAppearancePromise,
+      themeColorPromise = assetsPromises.themeColorPromise,
+      zoomSizePromise = assetsPromises.zoomSizePromise,
+      fontSizePromise = assetsPromises.fontSizePromise;
+  var allPromises = [].concat(_toConsumableArray(themeAppearancePromise), _toConsumableArray(themeColorPromise), [zoomSizePromise, fontSizePromise]);
+  (0, _react.useLayoutEffect)(function () {
+    Promise.all(allPromises).then(function () {
+      typeof onAssetsDownloadSuccess === 'function' && onAssetsDownloadSuccess();
+    })["catch"](function (error) {
+      console.error('Error loading assets:', error);
+    });
+    typeof getAssetsPromises === 'function' && getAssetsPromises(assetsPromises);
+  }, _toConsumableArray(allPromises));
+}
+
+var _default = useDotProvider;
+exports["default"] = _default;

package/lib/v1/DotProvider/hooks/useDownloadAssetsAndSetAttr.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = useDownloadAssetsAndSetAttr;
+
+var _react = require("react");
+
+var _assetPromiseHandlers = require("../utils/assetPromiseHandlers");
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function useDownloadAssetsAndSetAttr(_ref) {
+  var themeAppearance = _ref.themeAppearance,
+      themeColor = _ref.themeColor,
+      baseZoomUnit = _ref.baseZoomUnit,
+      baseFontUnit = _ref.baseFontUnit,
+      getProviderElement = _ref.getProviderElement,
+      zoomUnitVariable = _ref.zoomUnitVariable,
+      fontUnitVariable = _ref.fontUnitVariable,
+      themeAppearanceAttr = _ref.themeAppearanceAttr,
+      themeColorAttr = _ref.themeColorAttr;
+  var themeAppearancePromise = (0, _react.useMemo)(function () {
+    var themeAppearanceAssetPromise = (0, _assetPromiseHandlers.getThemeAppearanceAssetPromise)({
+      themeAppearance: themeAppearance
+    });
+    return themeAppearanceAssetPromise;
+  }, [themeAppearance]);
+  var themeColorPromise = (0, _react.useMemo)(function () {
+    var themeColorAssetPromise = (0, _assetPromiseHandlers.getThemeColorAssetPromise)({
+      themeAppearance: themeAppearance,
+      themeColor: themeColor
+    });
+    return themeColorAssetPromise;
+  }, [themeAppearance, themeColor]);
+  var modifiedZoomUnitWithSuffix = (0, _react.useMemo)(function () {
+    return !isNaN(Number(baseZoomUnit)) ? "".concat(Number(baseZoomUnit), "px") : baseZoomUnit;
+  }, [baseZoomUnit]);
+  var zoomSizePromise = (0, _react.useMemo)(function () {
+    var assetPromise = (0, _assetPromiseHandlers.getZoomSizeAssetPromise)();
+    return assetPromise;
+  }, []);
+  var fontSizePromise = (0, _react.useMemo)(function () {
+    var assetPromise = (0, _assetPromiseHandlers.getFontSizeAssetPromise)();
+    return assetPromise;
+  }, []);
+  var combinedPromise = {
+    themeAppearancePromise: themeAppearancePromise,
+    themeColorPromise: themeColorPromise,
+    zoomSizePromise: zoomSizePromise,
+    fontSizePromise: fontSizePromise
+  };
+
+  function setThemeAttribute() {
+    var themePromise = [].concat(_toConsumableArray(themeAppearancePromise), _toConsumableArray(themeColorPromise));
+    Promise.all(themePromise).then(function () {
+      var providerElement = getProviderElement();
+
+      if (providerElement) {
+        providerElement.setAttribute(themeAppearanceAttr, themeAppearance);
+        providerElement.setAttribute(themeColorAttr, themeColor);
+      }
+    })["catch"](function (error) {
+      console.error('Error on setting theme appearance and color attributes:', error);
+    });
+  }
+
+  function setZoomSizeAttribute() {
+    zoomSizePromise.then(function () {
+      var providerElement = getProviderElement();
+
+      if (providerElement) {
+        providerElement.style.setProperty(zoomUnitVariable, modifiedZoomUnitWithSuffix);
+      }
+    })["catch"](function (error) {
+      console.error('Error on setting zoom-size property', error);
+    });
+  }
+
+  function setFontSizeAttribute() {
+    fontSizePromise.then(function () {
+      var providerElement = getProviderElement();
+
+      if (providerElement) {
+        providerElement.style.setProperty(fontUnitVariable, baseFontUnit);
+      }
+    })["catch"](function (error) {
+      console.error('Error on setting font-size property', error);
+    });
+  }
+
+  (0, _react.useLayoutEffect)(function () {
+    setThemeAttribute();
+  }, [themeAppearanceAttr, themeColorAttr, themeAppearance, themeColor, getProviderElement]);
+  (0, _react.useLayoutEffect)(function () {
+    setZoomSizeAttribute();
+  }, [zoomUnitVariable, modifiedZoomUnitWithSuffix, getProviderElement]);
+  (0, _react.useLayoutEffect)(function () {
+    setFontSizeAttribute();
+  }, [fontUnitVariable, baseFontUnit, getProviderElement]);
+  return combinedPromise;
+}

package/lib/v1/DotProvider/libraryChunks/themes/component/blue/Blue_Dark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css");

package/lib/v1/DotProvider/libraryChunks/themes/component/blue/Blue_Light_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css");

package/lib/v1/DotProvider/libraryChunks/themes/component/blue/Blue_PureDark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css");

package/lib/v1/DotProvider/libraryChunks/themes/component/green/Green_Dark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css");

package/lib/v1/DotProvider/libraryChunks/themes/component/green/Green_Light_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css");

package/lib/v1/DotProvider/libraryChunks/themes/component/green/Green_PureDark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css");

package/lib/v1/DotProvider/libraryChunks/themes/component/orange/Orange_Dark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css");

package/lib/v1/DotProvider/libraryChunks/themes/component/orange/Orange_Light_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css");

package/lib/v1/DotProvider/libraryChunks/themes/component/orange/Orange_PureDark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css");

package/lib/v1/DotProvider/libraryChunks/themes/component/red/Red_Dark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css");

package/lib/v1/DotProvider/libraryChunks/themes/component/red/Red_Light_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css");

package/lib/v1/DotProvider/libraryChunks/themes/component/red/Red_PureDark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css");