@orfium/ictinus 4.23.0 → 4.25.1

package/dist/components/Button/Button.js

@@ -11,7 +11,7 @@ var _ButtonBase = _interopRequireDefault(require("../ButtonBase/ButtonBase"));
 
 var _Button = require("./Button.style");
 
-var _Loader = _interopRequireDefault(require("../Loader"));
+var _ButtonLoader = _interopRequireDefault(require("./ButtonLoader"));
 
 var _react2 = require("@emotion/react");
 
@@ -73,11 +73,11 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       disabled: disabled,
       hasChildren: Boolean(_react["default"].Children.count(children))
     })
-  }, loading ? (0, _react2.jsx)("div", {
-    css: (0, _Button.centralizedLoader)(innerButtonWidth)
-  }, (0, _react2.jsx)(_Loader["default"], {
-    type: 'spinner'
-  })) : children), iconRight && (0, _react2.jsx)("span", {
+  }, loading ? (0, _react2.jsx)(_ButtonLoader["default"], {
+    innerButtonWidth: innerButtonWidth,
+    color: color,
+    type: type
+  }) : children), iconRight && (0, _react2.jsx)("span", {
     css: (0, _Button.iconStyle)()
   }, iconRight)));
 });

package/dist/components/Button/Button.style.d.ts

@@ -1,4 +1,3 @@
-import { SerializedStyles } from '@emotion/react';
 import { Theme } from 'theme';
 import { RequiredProperties } from 'utils/common';
 import { Props } from './Button';
@@ -16,4 +15,3 @@ export declare const childrenWrapperStyle: ({ iconLeft, iconRight, hasChildren,
     marginLeft: number | "8";
     marginRight: number | "8";
 };
-export declare const centralizedLoader: (clientWidth?: number) => SerializedStyles;

package/dist/components/Button/Button.style.js

@@ -1,13 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.centralizedLoader = exports.childrenWrapperStyle = exports.iconStyle = exports.buttonSpanStyle = void 0;
-
-var _react = require("@emotion/react");
-
-var _functions = require("../../theme/functions");
-
-var _utils = require("../../theme/utils");
+exports.childrenWrapperStyle = exports.iconStyle = exports.buttonSpanStyle = void 0;
 
 var buttonSpanStyle = function buttonSpanStyle() {
   return function () {
@@ -45,15 +39,4 @@ var childrenWrapperStyle = function childrenWrapperStyle(_ref) {
   };
 };
 
-exports.childrenWrapperStyle = childrenWrapperStyle;
-
-var centralizedLoader = function centralizedLoader(clientWidth) {
-  return (
-    /*#__PURE__*/
-
-    /*#__PURE__*/
-    (0, _react.css)("width:", clientWidth ? (0, _utils.rem)(clientWidth) : 'auto', ";", _functions.flex, ";justify-content:center;" + (process.env.NODE_ENV === "production" ? "" : ";label:centralizedLoader;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24uc3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0MrRiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9CdXR0b24vQnV0dG9uLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5pbXBvcnQgeyBmbGV4IH0gZnJvbSAndGhlbWUvZnVuY3Rpb25zJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3RoZW1lL3V0aWxzJztcbmltcG9ydCB7IFJlcXVpcmVkUHJvcGVydGllcyB9IGZyb20gJ3V0aWxzL2NvbW1vbic7XG5cbmltcG9ydCB7IFByb3BzIH0gZnJvbSAnLi9CdXR0b24nO1xuXG5leHBvcnQgY29uc3QgYnV0dG9uU3BhblN0eWxlID0gKCkgPT4gKCkgPT4ge1xuICByZXR1cm4ge1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBqdXN0aWZ5Q29udGVudDogJ2NlbnRlcicsXG4gIH07XG59O1xuXG5leHBvcnQgY29uc3QgaWNvblN0eWxlID0gKCkgPT4gKCkgPT4gKHtcbiAgZGlzcGxheTogJ2lubGluZS1mbGV4Jyxcbn0pO1xuXG5leHBvcnQgY29uc3QgY2hpbGRyZW5XcmFwcGVyU3R5bGUgPSAoe1xuICBpY29uTGVmdCxcbiAgaWNvblJpZ2h0LFxuICBoYXNDaGlsZHJlbixcbn06IFJlcXVpcmVkUHJvcGVydGllczxcbiAgT21pdDxQcm9wcywgJ2Jsb2NrJyB8ICdpc0ljb25CdXR0b24nIHwgJ2J1dHRvblR5cGUnIHwgJ2RhdGFUZXN0SWQnIHwgJ29uQ2xpY2snPiAmIHtcbiAgICBoYXNDaGlsZHJlbjogYm9vbGVhbjtcbiAgfVxuPikgPT4gKHRoZW1lOiBUaGVtZSkgPT4ge1xuICBjb25zdCByaWdodEljb25FeGlzdHMgPSBoYXNDaGlsZHJlbiAmJiBpY29uUmlnaHQ7XG4gIGNvbnN0IGxlZnRJY29uRXhpc3RzID0gaGFzQ2hpbGRyZW4gJiYgaWNvbkxlZnQ7XG5cbiAgcmV0dXJuIHtcbiAgICBtYXJnaW5MZWZ0OiBsZWZ0SWNvbkV4aXN0cyA/IHRoZW1lLnNwYWNpbmcuc20gOiAwLFxuICAgIG1hcmdpblJpZ2h0OiByaWdodEljb25FeGlzdHMgPyB0aGVtZS5zcGFjaW5nLnNtIDogMCxcbiAgfTtcbn07XG5cbmV4cG9ydCBjb25zdCBjZW50cmFsaXplZExvYWRlcjogKGNsaWVudFdpZHRoPzogbnVtYmVyKSA9PiBTZXJpYWxpemVkU3R5bGVzID0gY2xpZW50V2lkdGggPT4gY3NzYFxuICB3aWR0aDogJHtjbGllbnRXaWR0aCA/IHJlbShjbGllbnRXaWR0aCkgOiAnYXV0byd9O1xuICAke2ZsZXh9O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:centralizedLoader;")
-  );
-};
-
-exports.centralizedLoader = centralizedLoader;
+exports.childrenWrapperStyle = childrenWrapperStyle;

package/dist/components/Button/ButtonLoader/ButtonLoader.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Props as ButtonBaseProps } from '../../ButtonBase/ButtonBase';
+export declare type Props = {
+    innerButtonWidth?: number;
+} & Pick<ButtonBaseProps, 'type' | 'color'>;
+declare const ButtonLoader: React.FC<Props>;
+export default ButtonLoader;

package/dist/components/Button/ButtonLoader/ButtonLoader.js

@@ -0,0 +1,43 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTypeColorToColorMatch = require("../../../hooks/useTypeColorToColorMatch");
+
+var _index = require("../../../index");
+
+var _ButtonLoader = require("./ButtonLoader.style");
+
+var _Loader = _interopRequireDefault(require("../../Loader"));
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var ButtonLoader = function ButtonLoader(_ref) {
+  var innerButtonWidth = _ref.innerButtonWidth,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'primary' : _ref$type,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '' : _ref$color;
+  var theme = (0, _index.useTheme)();
+
+  var _useTypeColorToColorM = (0, _useTypeColorToColorMatch.useTypeColorToColorMatch)(),
+      calculateColorBetweenColorAndType = _useTypeColorToColorM.calculateColorBetweenColorAndType;
+
+  var calculatedColor = calculateColorBetweenColorAndType(color, type);
+  var spinnerColor = theme.utils.getAAColorFromSwatches(calculatedColor.color, calculatedColor.shade);
+  return (0, _react2.jsx)("div", {
+    css: (0, _ButtonLoader.centralizedLoader)(innerButtonWidth)
+  }, (0, _react2.jsx)(_Loader["default"], {
+    type: 'spinner',
+    color: spinnerColor
+  }));
+};
+
+ButtonLoader.displayName = 'Button';
+var _default = ButtonLoader;
+exports["default"] = _default;

package/dist/components/Button/ButtonLoader/ButtonLoader.style.d.ts

@@ -0,0 +1,2 @@
+import { SerializedStyles } from '@emotion/react';
+export declare const centralizedLoader: (clientWidth?: number) => SerializedStyles;

package/dist/components/Button/ButtonLoader/ButtonLoader.style.js

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.centralizedLoader = void 0;
+
+var _react = require("@emotion/react");
+
+var _functions = require("../../../theme/functions");
+
+var _utils = require("../../../theme/utils");
+
+var centralizedLoader = function centralizedLoader(clientWidth) {
+  return (
+    /*#__PURE__*/
+
+    /*#__PURE__*/
+    (0, _react.css)("width:", clientWidth ? (0, _utils.rem)(clientWidth) : 'auto', ";", _functions.flex, ";justify-content:center;" + (process.env.NODE_ENV === "production" ? "" : ";label:centralizedLoader;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b25Mb2FkZXIvQnV0dG9uTG9hZGVyLnN0eWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkrRiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9CdXR0b24vQnV0dG9uTG9hZGVyL0J1dHRvbkxvYWRlci5zdHlsZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGZsZXggfSBmcm9tICd0aGVtZS9mdW5jdGlvbnMnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgY2VudHJhbGl6ZWRMb2FkZXI6IChjbGllbnRXaWR0aD86IG51bWJlcikgPT4gU2VyaWFsaXplZFN0eWxlcyA9IGNsaWVudFdpZHRoID0+IGNzc2BcbiAgd2lkdGg6ICR7Y2xpZW50V2lkdGggPyByZW0oY2xpZW50V2lkdGgpIDogJ2F1dG8nfTtcbiAgJHtmbGV4fTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:centralizedLoader;")
+  );
+};
+
+exports.centralizedLoader = centralizedLoader;

package/dist/components/Button/ButtonLoader/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ButtonLoader';

package/dist/components/Button/ButtonLoader/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _ButtonLoader = _interopRequireDefault(require("./ButtonLoader"));
+
+exports["default"] = _ButtonLoader["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/dist/components/ButtonBase/ButtonBase.style.js

@@ -59,7 +59,7 @@ var buttonBaseStyle = function buttonBaseStyle(_ref) {
       color: calculateButtonColor(),
       width: block ? '100%' : undefined,
       backgroundColor: isOutlined || transparent ? 'transparent' : backGroundColor,
-      padding: size === 'lg' ? theme.spacing.md : theme.spacing.sm + " " + theme.spacing.md,
+      padding: size === 'lg' ? theme.spacing.md : "0 " + theme.spacing.md,
       height: heightBasedOnSize(size),
       borderRadius: theme.spacing.xsm,
       border: isOutlined ? "solid " + (0, _utils.rem)(borderWidth) + " " + backGroundColor : 'none',

package/dist/components/Icon/assets/iconSelector.js

@@ -1101,6 +1101,21 @@ IncomeIcon.defaultProps = {
   viewBox: "0 0 24 24"
 };
 
+var InfoFilledIcon = function InfoFilledIcon(props) {
+  return (0, _react2.jsx)("svg", props, (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18zm1.5-13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zm0 9V7.5h-3V14h3z",
+    fill: "#0E0E17"
+  }));
+};
+
+InfoFilledIcon.defaultProps = {
+  viewBox: "0 0 18 18",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
 var InfoIcon = function InfoIcon(props) {
   return (0, _react2.jsx)("svg", props, (0, _react2.jsx)("g", {
     fill: "#000"
@@ -2333,6 +2348,7 @@ var iconSelector = {
   help: HelpIcon,
   hourglass: HourglassIcon,
   income: IncomeIcon,
+  infoFilled: InfoFilledIcon,
   info: InfoIcon,
   issues: IssuesIcon,
   keyword: KeywordIcon,

package/dist/components/Icon/types.d.ts

@@ -1 +1 @@
-export declare type AcceptedIconNames = 'account' | 'actions' | 'add' | 'alert' | 'analytics' | 'analyticsVideos' | 'ancient' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowToLeft' | 'arrowToRight' | 'artist' | 'asset' | 'assetMatching' | 'auto' | 'calendarEmpty' | 'calendarFilled' | 'catalog' | 'catalogOverview' | 'catalogFiles' | 'chatBubble' | 'check' | 'checkedList' | 'checkmark' | 'chevronExtraSmallDown' | 'chevronExtraSmallLeft' | 'chevronExtraSmallRight' | 'chevronExtraSmallUp' | 'chevronLargeDown' | 'chevronLargeLeft' | 'chevronLargeRight' | 'chevronLargeUp' | 'chevronSmallDown' | 'chevronSmallLeft' | 'chevronSmallRight' | 'chevronSmallUp' | 'claimList' | 'clock' | 'close' | 'closeTag' | 'cmsProcess' | 'composition' | 'compositionV2' | 'confirmedMatches' | 'conflicts' | 'concert' | 'dashboard' | 'dataset' | 'delete' | 'delivery' | 'details' | 'digitalUse' | 'distribution' | 'dotsVertical' | 'download' | 'duplicate' | 'duplicate2' | 'earnings' | 'earnings2' | 'edit' | 'entities' | 'error' | 'expenses' | 'externalLink' | 'externalLinkV2' | 'fatArrowDown' | 'fatArrowLeft' | 'fatArrowRight' | 'fatArrowUp' | 'file' | 'financialChart' | 'generatedReports' | 'genericFile' | 'genericOrdering' | 'globalItem' | 'heartFill' | 'heartStroke' | 'help' | 'hourglass' | 'income' | 'info' | 'issues' | 'keyword' | 'legalFiles' | 'linked' | 'lock' | 'mail' | 'manual' | 'menu' | 'microphone' | 'minus' | 'moreOptionsHorizontal' | 'moreOptionsVertical' | 'musicNote' | 'myEarnings' | 'notifications' | 'notifications2' | 'oneWay' | 'others' | 'ownershipValidation' | 'pageFirst' | 'pageLast' | 'percentage' | 'plus' | 'policies' | 'process' | 'processManagement' | 'publicPerformance' | 'publisher' | 'recordLabel' | 'recordLabelV2' | 'referenceFile' | 'relations' | 'restore' | 'result' | 'royaltyShares' | 'search' | 'searchMusic' | 'searchThunder' | 'settings' | 'sight' | 'sortAscending' | 'sortDescending' | 'stamp' | 'statements' | 'success' | 'television' | 'thunder' | 'ticTacToeArrow' | 'timeOut' | 'training' | 'triangleDown' | 'triangleLeft' | 'triangleRight' | 'triangleUp' | 'trophy' | 'TVCinema' | 'TVRadio' | 'update' | 'upload' | 'user' | 'userAvatar' | 'users' | 'users2' | 'videoConfirmation' | 'view' | 'warning' | 'works' | 'writer' | 'youtube' | 'refresh' | 'star' | 'pause' | 'resume' | 'restart' | 'entity' | 'playCount' | 'processedLogs' | 'proposed' | 'unpaired' | 'unpairedV2' | 'clockOutlined' | 'userCheck';
+export declare type AcceptedIconNames = 'account' | 'actions' | 'add' | 'alert' | 'analytics' | 'analyticsVideos' | 'ancient' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowToLeft' | 'arrowToRight' | 'artist' | 'asset' | 'assetMatching' | 'auto' | 'calendarEmpty' | 'calendarFilled' | 'catalog' | 'catalogOverview' | 'catalogFiles' | 'chatBubble' | 'check' | 'checkedList' | 'checkmark' | 'chevronExtraSmallDown' | 'chevronExtraSmallLeft' | 'chevronExtraSmallRight' | 'chevronExtraSmallUp' | 'chevronLargeDown' | 'chevronLargeLeft' | 'chevronLargeRight' | 'chevronLargeUp' | 'chevronSmallDown' | 'chevronSmallLeft' | 'chevronSmallRight' | 'chevronSmallUp' | 'claimList' | 'clock' | 'close' | 'closeTag' | 'cmsProcess' | 'composition' | 'compositionV2' | 'confirmedMatches' | 'conflicts' | 'concert' | 'dashboard' | 'dataset' | 'delete' | 'delivery' | 'details' | 'digitalUse' | 'distribution' | 'dotsVertical' | 'download' | 'duplicate' | 'duplicate2' | 'earnings' | 'earnings2' | 'edit' | 'entities' | 'error' | 'expenses' | 'externalLink' | 'externalLinkV2' | 'fatArrowDown' | 'fatArrowLeft' | 'fatArrowRight' | 'fatArrowUp' | 'file' | 'financialChart' | 'generatedReports' | 'genericFile' | 'genericOrdering' | 'globalItem' | 'heartFill' | 'heartStroke' | 'help' | 'hourglass' | 'income' | 'infoFilled' | 'info' | 'issues' | 'keyword' | 'legalFiles' | 'linked' | 'lock' | 'mail' | 'manual' | 'menu' | 'microphone' | 'minus' | 'moreOptionsHorizontal' | 'moreOptionsVertical' | 'musicNote' | 'myEarnings' | 'notifications' | 'notifications2' | 'oneWay' | 'others' | 'ownershipValidation' | 'pageFirst' | 'pageLast' | 'percentage' | 'plus' | 'policies' | 'process' | 'processManagement' | 'publicPerformance' | 'publisher' | 'recordLabel' | 'recordLabelV2' | 'referenceFile' | 'relations' | 'restore' | 'result' | 'royaltyShares' | 'search' | 'searchMusic' | 'searchThunder' | 'settings' | 'sight' | 'sortAscending' | 'sortDescending' | 'stamp' | 'statements' | 'success' | 'television' | 'thunder' | 'ticTacToeArrow' | 'timeOut' | 'training' | 'triangleDown' | 'triangleLeft' | 'triangleRight' | 'triangleUp' | 'trophy' | 'TVCinema' | 'TVRadio' | 'update' | 'upload' | 'user' | 'userAvatar' | 'users' | 'users2' | 'videoConfirmation' | 'view' | 'warning' | 'works' | 'writer' | 'youtube' | 'refresh' | 'star' | 'pause' | 'resume' | 'restart' | 'entity' | 'playCount' | 'processedLogs' | 'proposed' | 'unpaired' | 'unpairedV2' | 'clockOutlined' | 'userCheck';

package/dist/components/List/ListItemGroup/ListGroupTitle/ListGroupTitle.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TestProps } from 'utils/types';
 import { ListItemType, ListRowSize } from 'components/List/types';
-declare const ListGroupTitle: React.ForwardRefExoticComponent<{
+declare type Props = {
     /** Size of the ListGroupTitle (translates to height) */
     size: ListRowSize;
     /** Content of the ListItem */
@@ -9,6 +9,7 @@ declare const ListGroupTitle: React.ForwardRefExoticComponent<{
     /** Index, for test-id calculation */
     index: number;
     /** Search Term to be highlighted in list items */
-    searchTerm?: string | undefined;
-} & TestProps & React.RefAttributes<HTMLDivElement>>;
+    searchTerm?: string;
+} & TestProps;
+declare const ListGroupTitle: React.FC<Props>;
 export default ListGroupTitle;

package/dist/components/List/ListItemGroup/ListGroupTitle/ListGroupTitle.js

@@ -13,7 +13,7 @@ var _react2 = require("@emotion/react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var ListGroupTitle = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+var ListGroupTitle = function ListGroupTitle(_ref) {
   var size = _ref.size,
       content = _ref.content,
       index = _ref.index,
@@ -24,12 +24,11 @@ var ListGroupTitle = /*#__PURE__*/_react["default"].forwardRef(function (_ref, r
       size: size,
       disabled: content.isDisabled
     }),
-    ref: ref,
     "data-testid": dataTestId != null ? dataTestId : 'ictinus_list' + ('_group_title_' + index)
   }, (0, _react2.jsx)("div", {
     css: (0, _ListGroupTitle.contentStyle)()
   }, (0, _utils.renderContent)(content, searchTerm)));
-});
+};
 
 ListGroupTitle.displayName = 'ListGroupTitle';
 var _default = ListGroupTitle;

package/dist/components/List/ListItemGroup/ListItemGroup.js

@@ -33,7 +33,6 @@ var ListItemGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     content: content,
     size: size,
     index: groupIndex,
-    ref: ref,
     searchTerm: searchTerm,
     dataTestId: dataTestId
   }), (0, _react2.jsx)("ul", {

package/dist/components/List/NormalList/NormalList.js

@@ -43,6 +43,7 @@ var NormalList = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     })
   }, newItems.map(function (item, index) {
     return item != null && item.options ? (0, _react2.jsx)(_ListItemGroup["default"], {
+      key: (0, _helpers.generateUniqueID)('list_item_group_' + index),
       content: item,
       size: rowSize,
       groupIndex: index,

package/dist/components/Loader/Loader.d.ts

@@ -2,8 +2,12 @@ import React from 'react';
 import { loaderTypes } from './Loader.utils';
 export declare type LoaderType = typeof loaderTypes[number];
 declare type Props = {
+    /** Loader type. Defaults to dots **/
     type?: LoaderType;
+    /** The data test id if needed */
     dataTestId?: string;
+    /** Color of the loader. Define AA color otherwise it gets Primary be default */
+    color?: string;
 };
 declare const Loader: React.FC<Props>;
 export default Loader;

package/dist/components/Loader/Loader.js

@@ -16,10 +16,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var Loader = function Loader(_ref) {
   var _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'dots' : _ref$type,
-      dataTestId = _ref.dataTestId;
+      dataTestId = _ref.dataTestId,
+      color = _ref.color;
   return (0, _react2.jsx)("div", {
     css: (0, _Loader.loaderContainer)()
-  }, (0, _Loader2.getLoader)(type, dataTestId));
+  }, (0, _Loader2.getLoader)(type, dataTestId, color));
 };
 
 var _default = Loader;

package/dist/components/Loader/Loader.utils.d.ts

@@ -1,2 +1,2 @@
 export declare const loaderTypes: readonly ["dots", "indeterminate", "spinner"];
-export declare const getLoader: (type?: "spinner" | "dots" | "indeterminate" | undefined, dataTestId?: string | undefined) => JSX.Element | null;
+export declare const getLoader: (type?: "spinner" | "dots" | "indeterminate" | undefined, dataTestId?: string | undefined, color?: string | undefined) => JSX.Element | null;

package/dist/components/Loader/Loader.utils.js

@@ -18,26 +18,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var loaderTypes = ['dots', 'indeterminate', 'spinner'];
 exports.loaderTypes = loaderTypes;
 
-var loadersConfig = function loadersConfig(dataTestId) {
+var loadersConfig = function loadersConfig(dataTestId, color) {
   return {
     dots: (0, _react2.jsx)(_DotsLoader["default"], {
-      dataTestId: dataTestId
+      dataTestId: dataTestId,
+      color: color
     }),
     indeterminate: (0, _react2.jsx)(_IndeterminateLoader["default"], {
-      dataTestId: dataTestId
+      dataTestId: dataTestId,
+      color: color
     }),
     spinner: (0, _react2.jsx)(_Spinner.Spinner, {
-      dataTestId: dataTestId
+      dataTestId: dataTestId,
+      color: color
     })
   };
 };
 
-var getLoader = function getLoader(type, dataTestId) {
+var getLoader = function getLoader(type, dataTestId, color) {
   if (!type) {
     return null;
   }
 
-  return loadersConfig(dataTestId)[type];
+  return loadersConfig(dataTestId, color)[type];
 };
 
 exports.getLoader = getLoader;

package/dist/components/Loader/components/DotsLoader/DotsLoader.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 declare type Props = {
     dataTestId?: string;
+    color?: string;
 };
 declare const DotsLoader: React.FC<Props>;
 export default DotsLoader;

package/dist/components/Loader/components/DotsLoader/DotsLoader.js

@@ -14,12 +14,13 @@ var _react2 = require("@emotion/react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var DotsLoader = function DotsLoader(_ref) {
-  var dataTestId = _ref.dataTestId;
+  var dataTestId = _ref.dataTestId,
+      color = _ref.color;
   return (0, _react2.jsx)("div", {
     css: _DotsLoader.dotsWrapper,
     "data-testid": (0, _helpers.generateTestDataId)('dots-loading', dataTestId)
   }, (0, _react2.jsx)("div", {
-    css: (0, _DotsLoader.dotsContainer)()
+    css: (0, _DotsLoader.dotsContainer)(color)
   }));
 };
 

package/dist/components/Loader/components/DotsLoader/DotsLoader.style.d.ts

@@ -1,5 +1,6 @@
 import { SerializedStyles } from '@emotion/react';
 import { Theme } from 'theme';
-export declare const getDotsLayout: (delay: number, animation: string, theme: Theme, left?: number | undefined) => SerializedStyles;
+export declare const getColorForDots: (theme: Theme, step?: number, color?: string | undefined) => string;
+export declare const getDotsLayout: (delay: number, animation: string, theme: Theme, left?: number | undefined, color?: string | undefined) => SerializedStyles;
 export declare const dotsWrapper: SerializedStyles;
-export declare const dotsContainer: () => (theme: Theme) => SerializedStyles;
+export declare const dotsContainer: (color?: string | undefined) => (theme: Theme) => SerializedStyles;

package/dist/components/Loader/components/DotsLoader/DotsLoader.style.js

@@ -1,18 +1,30 @@
 "use strict";
 
 exports.__esModule = true;
-exports.dotsContainer = exports.dotsWrapper = exports.getDotsLayout = void 0;
+exports.dotsContainer = exports.dotsWrapper = exports.getDotsLayout = exports.getColorForDots = void 0;
 
 var _react = require("@emotion/react");
 
+var _polished = require("polished");
+
 var _utils = require("../../../../theme/utils");
 
-var getDotsLayout = function getDotsLayout(delay, animation, theme, left) {
+var getColorForDots = function getColorForDots(theme, step, color) {
+  if (step === void 0) {
+    step = 0;
+  }
+
+  return (0, _polished.darken)(step, color || theme.utils.getColor('lightGrey', 150));
+};
+
+exports.getColorForDots = getColorForDots;
+
+var getDotsLayout = function getDotsLayout(delay, animation, theme, left, color) {
   return (
     /*#__PURE__*/
 
     /*#__PURE__*/
-    (0, _react.css)("left:", left && (0, _utils.rem)(left), ";width:", (0, _utils.rem)(6), ";height:", (0, _utils.rem)(6), ";border-radius:", (0, _utils.rem)(5), ";background-color:", theme.utils.getColor('lightGrey', 350), ";color:", theme.utils.getColor('lightGrey', 350), ";animation:", animation, ";animation-delay:", delay, "s;" + (process.env.NODE_ENV === "production" ? "" : ";label:getDotsLayout;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xvYWRlci9jb21wb25lbnRzL0RvdHNMb2FkZXIvRG90c0xvYWRlci5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSW1HIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xvYWRlci9jb21wb25lbnRzL0RvdHNMb2FkZXIvRG90c0xvYWRlci5zdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJ3RoZW1lJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3RoZW1lL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IGdldERvdHNMYXlvdXQgPSAoZGVsYXk6IG51bWJlciwgYW5pbWF0aW9uOiBzdHJpbmcsIHRoZW1lOiBUaGVtZSwgbGVmdD86IG51bWJlcikgPT4gY3NzYFxuICBsZWZ0OiAke2xlZnQgJiYgcmVtKGxlZnQpfTtcbiAgd2lkdGg6ICR7cmVtKDYpfTtcbiAgaGVpZ2h0OiAke3JlbSg2KX07XG4gIGJvcmRlci1yYWRpdXM6ICR7cmVtKDUpfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgMzUwKX07XG4gIGNvbG9yOiAke3RoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCAzNTApfTtcbiAgYW5pbWF0aW9uOiAke2FuaW1hdGlvbn07XG4gIGFuaW1hdGlvbi1kZWxheTogJHtkZWxheX1zO1xuYDtcblxuZXhwb3J0IGNvbnN0IGRvdHNXcmFwcGVyID0gY3NzYFxuICB3aWR0aDogJHtyZW0oMjYpfTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6ICR7cmVtKDYpfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBkb3RzQ29udGFpbmVyID0gKCkgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGxlZnQ6ICR7cmVtKDEwKX07XG4gICR7Z2V0RG90c0xheW91dCgwLjUsICdkb3RGbGFzaGluZyAwLjdzIGluZmluaXRlIGxpbmVhciBhbHRlcm5hdGUnLCB0aGVtZSl9O1xuXG4gICY6OmFmdGVyLFxuICAmOjpiZWZvcmUge1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICB9XG5cbiAgJjo6YmVmb3JlIHtcbiAgICAke2dldERvdHNMYXlvdXQoMCwgJ2RvdEZsYXNoaW5nIDAuN3MgaW5maW5pdGUgYWx0ZXJuYXRlJywgdGhlbWUsIC0xMCl9O1xuICB9XG5cbiAgJjo6YWZ0ZXIge1xuICAgICR7Z2V0RG90c0xheW91dCgwLjcsICdkb3RGbGFzaGluZyAwLjdzIGluZmluaXRlIGFsdGVybmF0ZScsIHRoZW1lLCAxMCl9O1xuICB9XG5cbiAgQGtleWZyYW1lcyBkb3RGbGFzaGluZyB7XG4gICAgMCUge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgMTUwKX07XG4gICAgfVxuICAgIDUwJSB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCAyNTApfTtcbiAgICB9XG4gICAgMTAwJSB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCAzNTApfTtcbiAgICB9XG4gIH1cbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:getDotsLayout;")
+    (0, _react.css)("left:", left && (0, _utils.rem)(left), ";width:", (0, _utils.rem)(6), ";height:", (0, _utils.rem)(6), ";border-radius:", (0, _utils.rem)(5), ";background-color:", getColorForDots(theme, 0.1, color), ";color:", getColorForDots(theme, 0.1, color), ";animation:", animation, ";animation-delay:", delay, "s;" + (process.env.NODE_ENV === "production" ? "" : ";label:getDotsLayout;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xvYWRlci9jb21wb25lbnRzL0RvdHNMb2FkZXIvRG90c0xvYWRlci5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY1EiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTG9hZGVyL2NvbXBvbmVudHMvRG90c0xvYWRlci9Eb3RzTG9hZGVyLnN0eWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRhcmtlbiB9IGZyb20gJ3BvbGlzaGVkJztcbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAndGhlbWUnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgZ2V0Q29sb3JGb3JEb3RzID0gKHRoZW1lOiBUaGVtZSwgc3RlcCA9IDAsIGNvbG9yPzogc3RyaW5nKSA9PlxuICBkYXJrZW4oc3RlcCwgY29sb3IgfHwgdGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIDE1MCkpO1xuXG5leHBvcnQgY29uc3QgZ2V0RG90c0xheW91dCA9IChcbiAgZGVsYXk6IG51bWJlcixcbiAgYW5pbWF0aW9uOiBzdHJpbmcsXG4gIHRoZW1lOiBUaGVtZSxcbiAgbGVmdD86IG51bWJlcixcbiAgY29sb3I/OiBzdHJpbmdcbikgPT4gY3NzYFxuICBsZWZ0OiAke2xlZnQgJiYgcmVtKGxlZnQpfTtcbiAgd2lkdGg6ICR7cmVtKDYpfTtcbiAgaGVpZ2h0OiAke3JlbSg2KX07XG4gIGJvcmRlci1yYWRpdXM6ICR7cmVtKDUpfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRDb2xvckZvckRvdHModGhlbWUsIDAuMSwgY29sb3IpfTtcbiAgY29sb3I6ICR7Z2V0Q29sb3JGb3JEb3RzKHRoZW1lLCAwLjEsIGNvbG9yKX07XG4gIGFuaW1hdGlvbjogJHthbmltYXRpb259O1xuICBhbmltYXRpb24tZGVsYXk6ICR7ZGVsYXl9cztcbmA7XG5cbmV4cG9ydCBjb25zdCBkb3RzV3JhcHBlciA9IGNzc2BcbiAgd2lkdGg6ICR7cmVtKDI2KX07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgaGVpZ2h0OiAke3JlbSg2KX07XG5gO1xuXG5leHBvcnQgY29uc3QgZG90c0NvbnRhaW5lciA9IChjb2xvcj86IHN0cmluZykgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGxlZnQ6ICR7cmVtKDEwKX07XG4gICR7Z2V0RG90c0xheW91dCgwLjUsICdkb3RGbGFzaGluZyAwLjdzIGluZmluaXRlIGxpbmVhciBhbHRlcm5hdGUnLCB0aGVtZSwgMCwgY29sb3IpfTtcblxuICAmOjphZnRlcixcbiAgJjo6YmVmb3JlIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgfVxuXG4gICY6OmJlZm9yZSB7XG4gICAgJHtnZXREb3RzTGF5b3V0KDAsICdkb3RGbGFzaGluZyAwLjdzIGluZmluaXRlIGFsdGVybmF0ZScsIHRoZW1lLCAtMTAsIGNvbG9yKX07XG4gIH1cblxuICAmOjphZnRlciB7XG4gICAgJHtnZXREb3RzTGF5b3V0KDAuNywgJ2RvdEZsYXNoaW5nIDAuN3MgaW5maW5pdGUgYWx0ZXJuYXRlJywgdGhlbWUsIDEwLCBjb2xvcil9O1xuICB9XG5cbiAgQGtleWZyYW1lcyBkb3RGbGFzaGluZyB7XG4gICAgMCUge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRDb2xvckZvckRvdHModGhlbWUsIDAsIGNvbG9yKX07XG4gICAgfVxuICAgIDUwJSB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yRm9yRG90cyh0aGVtZSwgMC4wNSwgY29sb3IpfTtcbiAgICB9XG4gICAgMTAwJSB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yRm9yRG90cyh0aGVtZSwgMC4xLCBjb2xvcil9O1xuICAgIH1cbiAgfVxuYDtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:getDotsLayout;")
   );
 };
 
@@ -21,16 +33,16 @@ var dotsWrapper =
 /*#__PURE__*/
 
 /*#__PURE__*/
-(0, _react.css)("width:", (0, _utils.rem)(26), ";position:relative;height:", (0, _utils.rem)(6), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:dotsWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xvYWRlci9jb21wb25lbnRzL0RvdHNMb2FkZXIvRG90c0xvYWRlci5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZThCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xvYWRlci9jb21wb25lbnRzL0RvdHNMb2FkZXIvRG90c0xvYWRlci5zdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJ3RoZW1lJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3RoZW1lL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IGdldERvdHNMYXlvdXQgPSAoZGVsYXk6IG51bWJlciwgYW5pbWF0aW9uOiBzdHJpbmcsIHRoZW1lOiBUaGVtZSwgbGVmdD86IG51bWJlcikgPT4gY3NzYFxuICBsZWZ0OiAke2xlZnQgJiYgcmVtKGxlZnQpfTtcbiAgd2lkdGg6ICR7cmVtKDYpfTtcbiAgaGVpZ2h0OiAke3JlbSg2KX07XG4gIGJvcmRlci1yYWRpdXM6ICR7cmVtKDUpfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgMzUwKX07XG4gIGNvbG9yOiAke3RoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCAzNTApfTtcbiAgYW5pbWF0aW9uOiAke2FuaW1hdGlvbn07XG4gIGFuaW1hdGlvbi1kZWxheTogJHtkZWxheX1zO1xuYDtcblxuZXhwb3J0IGNvbnN0IGRvdHNXcmFwcGVyID0gY3NzYFxuICB3aWR0aDogJHtyZW0oMjYpfTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6ICR7cmVtKDYpfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBkb3RzQ29udGFpbmVyID0gKCkgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGxlZnQ6ICR7cmVtKDEwKX07XG4gICR7Z2V0RG90c0xheW91dCgwLjUsICdkb3RGbGFzaGluZyAwLjdzIGluZmluaXRlIGxpbmVhciBhbHRlcm5hdGUnLCB0aGVtZSl9O1xuXG4gICY6OmFmdGVyLFxuICAmOjpiZWZvcmUge1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICB9XG5cbiAgJjo6YmVmb3JlIHtcbiAgICAke2dldERvdHNMYXlvdXQoMCwgJ2RvdEZsYXNoaW5nIDAuN3MgaW5maW5pdGUgYWx0ZXJuYXRlJywgdGhlbWUsIC0xMCl9O1xuICB9XG5cbiAgJjo6YWZ0ZXIge1xuICAgICR7Z2V0RG90c0xheW91dCgwLjcsICdkb3RGbGFzaGluZyAwLjdzIGluZmluaXRlIGFsdGVybmF0ZScsIHRoZW1lLCAxMCl9O1xuICB9XG5cbiAgQGtleWZyYW1lcyBkb3RGbGFzaGluZyB7XG4gICAgMCUge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgMTUwKX07XG4gICAgfVxuICAgIDUwJSB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCAyNTApfTtcbiAgICB9XG4gICAgMTAwJSB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCAzNTApfTtcbiAgICB9XG4gIH1cbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:dotsWrapper;");
+(0, _react.css)("width:", (0, _utils.rem)(26), ";position:relative;height:", (0, _utils.rem)(6), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:dotsWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xvYWRlci9jb21wb25lbnRzL0RvdHNMb2FkZXIvRG90c0xvYWRlci5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUI4QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Mb2FkZXIvY29tcG9uZW50cy9Eb3RzTG9hZGVyL0RvdHNMb2FkZXIuc3R5bGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGFya2VuIH0gZnJvbSAncG9saXNoZWQnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICd0aGVtZS91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBnZXRDb2xvckZvckRvdHMgPSAodGhlbWU6IFRoZW1lLCBzdGVwID0gMCwgY29sb3I/OiBzdHJpbmcpID0+XG4gIGRhcmtlbihzdGVwLCBjb2xvciB8fCB0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgMTUwKSk7XG5cbmV4cG9ydCBjb25zdCBnZXREb3RzTGF5b3V0ID0gKFxuICBkZWxheTogbnVtYmVyLFxuICBhbmltYXRpb246IHN0cmluZyxcbiAgdGhlbWU6IFRoZW1lLFxuICBsZWZ0PzogbnVtYmVyLFxuICBjb2xvcj86IHN0cmluZ1xuKSA9PiBjc3NgXG4gIGxlZnQ6ICR7bGVmdCAmJiByZW0obGVmdCl9O1xuICB3aWR0aDogJHtyZW0oNil9O1xuICBoZWlnaHQ6ICR7cmVtKDYpfTtcbiAgYm9yZGVyLXJhZGl1czogJHtyZW0oNSl9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yRm9yRG90cyh0aGVtZSwgMC4xLCBjb2xvcil9O1xuICBjb2xvcjogJHtnZXRDb2xvckZvckRvdHModGhlbWUsIDAuMSwgY29sb3IpfTtcbiAgYW5pbWF0aW9uOiAke2FuaW1hdGlvbn07XG4gIGFuaW1hdGlvbi1kZWxheTogJHtkZWxheX1zO1xuYDtcblxuZXhwb3J0IGNvbnN0IGRvdHNXcmFwcGVyID0gY3NzYFxuICB3aWR0aDogJHtyZW0oMjYpfTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6ICR7cmVtKDYpfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBkb3RzQ29udGFpbmVyID0gKGNvbG9yPzogc3RyaW5nKSA9PiAodGhlbWU6IFRoZW1lKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgbGVmdDogJHtyZW0oMTApfTtcbiAgJHtnZXREb3RzTGF5b3V0KDAuNSwgJ2RvdEZsYXNoaW5nIDAuN3MgaW5maW5pdGUgbGluZWFyIGFsdGVybmF0ZScsIHRoZW1lLCAwLCBjb2xvcil9O1xuXG4gICY6OmFmdGVyLFxuICAmOjpiZWZvcmUge1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICB9XG5cbiAgJjo6YmVmb3JlIHtcbiAgICAke2dldERvdHNMYXlvdXQoMCwgJ2RvdEZsYXNoaW5nIDAuN3MgaW5maW5pdGUgYWx0ZXJuYXRlJywgdGhlbWUsIC0xMCwgY29sb3IpfTtcbiAgfVxuXG4gICY6OmFmdGVyIHtcbiAgICAke2dldERvdHNMYXlvdXQoMC43LCAnZG90Rmxhc2hpbmcgMC43cyBpbmZpbml0ZSBhbHRlcm5hdGUnLCB0aGVtZSwgMTAsIGNvbG9yKX07XG4gIH1cblxuICBAa2V5ZnJhbWVzIGRvdEZsYXNoaW5nIHtcbiAgICAwJSB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yRm9yRG90cyh0aGVtZSwgMCwgY29sb3IpfTtcbiAgICB9XG4gICAgNTAlIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3JGb3JEb3RzKHRoZW1lLCAwLjA1LCBjb2xvcil9O1xuICAgIH1cbiAgICAxMDAlIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3JGb3JEb3RzKHRoZW1lLCAwLjEsIGNvbG9yKX07XG4gICAgfVxuICB9XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:dotsWrapper;");
 exports.dotsWrapper = dotsWrapper;
 
-var dotsContainer = function dotsContainer() {
+var dotsContainer = function dotsContainer(color) {
   return function (theme) {
     return (
       /*#__PURE__*/
 
       /*#__PURE__*/
-      (0, _react.css)("position:absolute;left:", (0, _utils.rem)(10), ";", getDotsLayout(0.5, 'dotFlashing 0.7s infinite linear alternate', theme), ";&::after,&::before{content:'';display:inline-block;position:absolute;top:0;}&::before{", getDotsLayout(0, 'dotFlashing 0.7s infinite alternate', theme, -10), ";}&::after{", getDotsLayout(0.7, 'dotFlashing 0.7s infinite alternate', theme, 10), ";}@keyframes dotFlashing{0%{background-color:", theme.utils.getColor('lightGrey', 150), ";}50%{background-color:", theme.utils.getColor('lightGrey', 250), ";}100%{background-color:", theme.utils.getColor('lightGrey', 350), ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:dotsContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xvYWRlci9jb21wb25lbnRzL0RvdHNMb2FkZXIvRG90c0xvYWRlci5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUIwRSIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Mb2FkZXIvY29tcG9uZW50cy9Eb3RzTG9hZGVyL0RvdHNMb2FkZXIuc3R5bGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICd0aGVtZS91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBnZXREb3RzTGF5b3V0ID0gKGRlbGF5OiBudW1iZXIsIGFuaW1hdGlvbjogc3RyaW5nLCB0aGVtZTogVGhlbWUsIGxlZnQ/OiBudW1iZXIpID0+IGNzc2BcbiAgbGVmdDogJHtsZWZ0ICYmIHJlbShsZWZ0KX07XG4gIHdpZHRoOiAke3JlbSg2KX07XG4gIGhlaWdodDogJHtyZW0oNil9O1xuICBib3JkZXItcmFkaXVzOiAke3JlbSg1KX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIDM1MCl9O1xuICBjb2xvcjogJHt0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgMzUwKX07XG4gIGFuaW1hdGlvbjogJHthbmltYXRpb259O1xuICBhbmltYXRpb24tZGVsYXk6ICR7ZGVsYXl9cztcbmA7XG5cbmV4cG9ydCBjb25zdCBkb3RzV3JhcHBlciA9IGNzc2BcbiAgd2lkdGg6ICR7cmVtKDI2KX07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgaGVpZ2h0OiAke3JlbSg2KX07XG5gO1xuXG5leHBvcnQgY29uc3QgZG90c0NvbnRhaW5lciA9ICgpID0+ICh0aGVtZTogVGhlbWUpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBsZWZ0OiAke3JlbSgxMCl9O1xuICAke2dldERvdHNMYXlvdXQoMC41LCAnZG90Rmxhc2hpbmcgMC43cyBpbmZpbml0ZSBsaW5lYXIgYWx0ZXJuYXRlJywgdGhlbWUpfTtcblxuICAmOjphZnRlcixcbiAgJjo6YmVmb3JlIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgfVxuXG4gICY6OmJlZm9yZSB7XG4gICAgJHtnZXREb3RzTGF5b3V0KDAsICdkb3RGbGFzaGluZyAwLjdzIGluZmluaXRlIGFsdGVybmF0ZScsIHRoZW1lLCAtMTApfTtcbiAgfVxuXG4gICY6OmFmdGVyIHtcbiAgICAke2dldERvdHNMYXlvdXQoMC43LCAnZG90Rmxhc2hpbmcgMC43cyBpbmZpbml0ZSBhbHRlcm5hdGUnLCB0aGVtZSwgMTApfTtcbiAgfVxuXG4gIEBrZXlmcmFtZXMgZG90Rmxhc2hpbmcge1xuICAgIDAlIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIDE1MCl9O1xuICAgIH1cbiAgICA1MCUge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgMjUwKX07XG4gICAgfVxuICAgIDEwMCUge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgMzUwKX07XG4gICAgfVxuICB9XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:dotsContainer;")
+      (0, _react.css)("position:absolute;left:", (0, _utils.rem)(10), ";", getDotsLayout(0.5, 'dotFlashing 0.7s infinite linear alternate', theme, 0, color), ";&::after,&::before{content:'';display:inline-block;position:absolute;top:0;}&::before{", getDotsLayout(0, 'dotFlashing 0.7s infinite alternate', theme, -10, color), ";}&::after{", getDotsLayout(0.7, 'dotFlashing 0.7s infinite alternate', theme, 10, color), ";}@keyframes dotFlashing{0%{background-color:", getColorForDots(theme, 0, color), ";}50%{background-color:", getColorForDots(theme, 0.05, color), ";}100%{background-color:", getColorForDots(theme, 0.1, color), ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:dotsContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xvYWRlci9jb21wb25lbnRzL0RvdHNMb2FkZXIvRG90c0xvYWRlci5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0J3RiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Mb2FkZXIvY29tcG9uZW50cy9Eb3RzTG9hZGVyL0RvdHNMb2FkZXIuc3R5bGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGFya2VuIH0gZnJvbSAncG9saXNoZWQnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICd0aGVtZS91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBnZXRDb2xvckZvckRvdHMgPSAodGhlbWU6IFRoZW1lLCBzdGVwID0gMCwgY29sb3I/OiBzdHJpbmcpID0+XG4gIGRhcmtlbihzdGVwLCBjb2xvciB8fCB0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgMTUwKSk7XG5cbmV4cG9ydCBjb25zdCBnZXREb3RzTGF5b3V0ID0gKFxuICBkZWxheTogbnVtYmVyLFxuICBhbmltYXRpb246IHN0cmluZyxcbiAgdGhlbWU6IFRoZW1lLFxuICBsZWZ0PzogbnVtYmVyLFxuICBjb2xvcj86IHN0cmluZ1xuKSA9PiBjc3NgXG4gIGxlZnQ6ICR7bGVmdCAmJiByZW0obGVmdCl9O1xuICB3aWR0aDogJHtyZW0oNil9O1xuICBoZWlnaHQ6ICR7cmVtKDYpfTtcbiAgYm9yZGVyLXJhZGl1czogJHtyZW0oNSl9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yRm9yRG90cyh0aGVtZSwgMC4xLCBjb2xvcil9O1xuICBjb2xvcjogJHtnZXRDb2xvckZvckRvdHModGhlbWUsIDAuMSwgY29sb3IpfTtcbiAgYW5pbWF0aW9uOiAke2FuaW1hdGlvbn07XG4gIGFuaW1hdGlvbi1kZWxheTogJHtkZWxheX1zO1xuYDtcblxuZXhwb3J0IGNvbnN0IGRvdHNXcmFwcGVyID0gY3NzYFxuICB3aWR0aDogJHtyZW0oMjYpfTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6ICR7cmVtKDYpfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBkb3RzQ29udGFpbmVyID0gKGNvbG9yPzogc3RyaW5nKSA9PiAodGhlbWU6IFRoZW1lKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgbGVmdDogJHtyZW0oMTApfTtcbiAgJHtnZXREb3RzTGF5b3V0KDAuNSwgJ2RvdEZsYXNoaW5nIDAuN3MgaW5maW5pdGUgbGluZWFyIGFsdGVybmF0ZScsIHRoZW1lLCAwLCBjb2xvcil9O1xuXG4gICY6OmFmdGVyLFxuICAmOjpiZWZvcmUge1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICB9XG5cbiAgJjo6YmVmb3JlIHtcbiAgICAke2dldERvdHNMYXlvdXQoMCwgJ2RvdEZsYXNoaW5nIDAuN3MgaW5maW5pdGUgYWx0ZXJuYXRlJywgdGhlbWUsIC0xMCwgY29sb3IpfTtcbiAgfVxuXG4gICY6OmFmdGVyIHtcbiAgICAke2dldERvdHNMYXlvdXQoMC43LCAnZG90Rmxhc2hpbmcgMC43cyBpbmZpbml0ZSBhbHRlcm5hdGUnLCB0aGVtZSwgMTAsIGNvbG9yKX07XG4gIH1cblxuICBAa2V5ZnJhbWVzIGRvdEZsYXNoaW5nIHtcbiAgICAwJSB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yRm9yRG90cyh0aGVtZSwgMCwgY29sb3IpfTtcbiAgICB9XG4gICAgNTAlIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3JGb3JEb3RzKHRoZW1lLCAwLjA1LCBjb2xvcil9O1xuICAgIH1cbiAgICAxMDAlIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3JGb3JEb3RzKHRoZW1lLCAwLjEsIGNvbG9yKX07XG4gICAgfVxuICB9XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:dotsContainer;")
     );
   };
 };

package/dist/components/Loader/components/IndeterminateLoader/IndeterminateLoader.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 declare type Props = {
     dataTestId?: string;
+    color?: string;
 };
 declare const IndeterminateLoader: React.FC<Props>;
 export default IndeterminateLoader;

package/dist/components/Loader/components/IndeterminateLoader/IndeterminateLoader.js

@@ -14,16 +14,17 @@ var _react2 = require("@emotion/react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var IndeterminateLoader = function IndeterminateLoader(_ref) {
-  var dataTestId = _ref.dataTestId;
+  var dataTestId = _ref.dataTestId,
+      color = _ref.color;
   return (0, _react2.jsx)("div", {
     css: (0, _IndeterminateLoader.LoaderContainer)(),
     "data-testid": (0, _helpers.generateTestDataId)('dots-loading', dataTestId)
   }, (0, _react2.jsx)("div", {
     css: (0, _IndeterminateLoader.LoaderLine)()
   }), (0, _react2.jsx)("div", {
-    css: (0, _IndeterminateLoader.LoaderDecLine)()
+    css: (0, _IndeterminateLoader.LoaderDecLine)(color)
   }), (0, _react2.jsx)("div", {
-    css: (0, _IndeterminateLoader.LoaderIncLine)()
+    css: (0, _IndeterminateLoader.LoaderIncLine)(color)
   }));
 };
 

package/dist/components/Loader/components/IndeterminateLoader/IndeterminateLoader.style.d.ts

@@ -2,6 +2,6 @@ import { SerializedStyles } from '@emotion/react';
 import { Theme } from 'theme';
 export declare const LoaderLine: () => (theme: Theme) => SerializedStyles;
 export declare const LoaderSubLine: (color: string) => SerializedStyles;
-export declare const LoaderDecLine: () => (theme: Theme) => SerializedStyles;
-export declare const LoaderIncLine: () => (theme: Theme) => SerializedStyles;
+export declare const LoaderDecLine: (color?: string | undefined) => (theme: Theme) => SerializedStyles;
+export declare const LoaderIncLine: (color?: string | undefined) => (theme: Theme) => SerializedStyles;
 export declare const LoaderContainer: () => () => SerializedStyles;