@sproutsocial/racine 12.19.0 → 12.21.0

package/commonjs/Link/styles.js

@@ -2,19 +2,12 @@
 
 exports.__esModule = true;
 exports.default = void 0;
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _mixins = require("../utils/mixins");
-
 var _Text = _interopRequireDefault(require("../Text"));
-
 var _systemProps = require("../utils/system-props");
-
 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; }
 
 var Container = (0, _styledComponents.default)(_Text.default).withConfig({
@@ -23,7 +16,7 @@ var Container = (0, _styledComponents.default)(_Text.default).withConfig({
 })(["border:0;font-family:", ";text-decoration:", ";appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", " ", ""], function (props) {
   return props.theme.fontFamily;
 }, function (props) {
-  return props.underline ? "underline" : "none";
+  return props.underline ? 'underline' : 'none';
 }, function (props) {
   return props.disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {

package/commonjs/Listbox/index.js

@@ -2,48 +2,33 @@
 
 exports.__esModule = true;
 exports.default = exports.ListboxButtonContainer = exports.ListboxButton = exports.Listbox = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _Menu = _interopRequireWildcard(require("../Menu"));
-
 var _styles = require("../Select/styles");
-
 var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _constants = require("../Menu/constants");
-
 var _excluded = ["role", "children"],
-    _excluded2 = ["children"];
-
+  _excluded2 = ["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 || 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 _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 _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 Listbox = function Listbox(_ref) {
   var _ref$role = _ref.role,
-      role = _ref$role === void 0 ? _constants.MENU_ROLES.LISTBOX : _ref$role,
-      children = _ref.children,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    role = _ref$role === void 0 ? _constants.MENU_ROLES.LISTBOX : _ref$role,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_Menu.default, _extends({}, rest, {
     role: role
   }), children);
 };
+
 /**
  * These styles are copied from @sproutsocial/racine/commonjs/Select/styles and applied at the root element since
  * the Listbox component doesn't render a select.
  */
-
-
 exports.Listbox = Listbox;
 var ListboxButtonContainer = (0, _styledComponents.default)(_Menu.MenuButton).withConfig({
   displayName: "Listbox__ListboxButtonContainer",
@@ -57,7 +42,7 @@ var ListboxButtonContainer = (0, _styledComponents.default)(_Menu.MenuButton).wi
 }, function (props) {
   return props.theme.colors.text.body;
 }, function (props) {
-  return props.disabled ? "not-allowed" : "pointer";
+  return props.disabled ? 'not-allowed' : 'pointer';
 }, function (props) {
   return props.theme.duration.fast;
 }, function (props) {
@@ -72,23 +57,20 @@ var ListboxButtonContainer = (0, _styledComponents.default)(_Menu.MenuButton).wi
   return props.theme.fontWeights.normal;
 }, function (props) {
   switch (props.size) {
-    case "large":
+    case 'large':
       return props.theme.space[400] + " " + props.theme.space[600] + " " + props.theme.space[400] + " " + props.theme.space[400];
-
-    case "small":
+    case 'small':
       return props.theme.space[200] + " " + props.theme.space[500] + " " + props.theme.space[200] + " " + props.theme.space[200];
-
-    case "default":
+    case 'default':
     default:
       return props.theme.space[300] + " " + props.theme.space[500] + " " + props.theme.space[300] + " " + props.theme.space[300];
   }
 }, function (props) {
   switch (props.size) {
-    case "large":
+    case 'large':
       return props.theme.typography[300].fontSize;
-
-    case "small":
-    case "default":
+    case 'small':
+    case 'default':
     default:
       return props.theme.typography[200].fontSize;
   }
@@ -100,14 +82,12 @@ var ListboxButtonContainer = (0, _styledComponents.default)(_Menu.MenuButton).wi
   });
 });
 exports.ListboxButtonContainer = ListboxButtonContainer;
-
 var ListboxButton = function ListboxButton(_ref2) {
   var children = _ref2.children,
-      restProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
+    restProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   return /*#__PURE__*/React.createElement(ListboxButtonContainer, _extends({}, restProps, {
     popoutProps: _extends({
-      placement: "bottom-start"
+      placement: 'bottom-start'
     }, restProps.popoutProps || {})
   }), children, /*#__PURE__*/React.createElement(_styles.Arrow, {
     size: restProps.size
@@ -116,7 +96,6 @@ var ListboxButton = function ListboxButton(_ref2) {
     fixedWidth: true
   })));
 };
-
 exports.ListboxButton = ListboxButton;
 Listbox.Option = Listbox.Item = _Menu.default.Item;
 Listbox.Checkbox = _Menu.default.Checkbox;

package/commonjs/Loader/index.js

@@ -2,61 +2,45 @@
 
 exports.__esModule = true;
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styles = _interopRequireWildcard(require("./styles"));
-
 var _excluded = ["text", "size", "delay", "color", "qa"];
-
 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 || 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 _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 _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; }
-
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 var Loader = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Loader, _React$Component);
-
   function Loader() {
     return _React$Component.apply(this, arguments) || this;
   }
-
   var _proto = Loader.prototype;
-
   _proto.render = function render() {
     var _this$props = this.props,
-        text = _this$props.text,
-        size = _this$props.size,
-        delay = _this$props.delay,
-        color = _this$props.color,
-        qa = _this$props.qa,
-        rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
+      text = _this$props.text,
+      size = _this$props.size,
+      delay = _this$props.delay,
+      color = _this$props.color,
+      qa = _this$props.qa,
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
     return /*#__PURE__*/React.createElement(_styles.default, _extends({
-      small: size === "small",
-      dark: color === "dark",
+      small: size === 'small',
+      dark: color === 'dark',
       delay: delay,
-      "data-qa-loader": ""
+      "data-qa-loader": ''
     }, qa, rest), /*#__PURE__*/React.createElement(_styles.Text, {
       as: "div",
       fontSize: 200
-    }, text || "Loading"));
+    }, text || 'Loading'));
   };
-
   return Loader;
 }(React.Component);
-
 exports.default = Loader;
 Loader.defaultProps = {
-  size: "large",
-  text: "",
+  size: 'large',
+  text: '',
   delay: true,
-  color: "dark"
+  color: 'dark'
 };

package/commonjs/Loader/styles.js

@@ -2,17 +2,11 @@
 
 exports.__esModule = true;
 exports.default = exports.Text = void 0;
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _systemProps = require("../utils/system-props");
-
 var _mixins = require("../utils/mixins");
-
 var _polished = require("polished");
-
 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; }
 
 var getSize = function getSize(size) {
@@ -20,32 +14,27 @@ var getSize = function getSize(size) {
   var borderWidth = Math.ceil(size * 0.1);
   return (0, _styledComponents.css)(["width:", "px;height:", "px;&:after{width:", "px;height:", "px;box-sizing:border-box;border-width:", "px;}.no-cssanimations &::after{background-size:", "px;}"], size, size, spinnerSize, spinnerSize, borderWidth, spinnerSize);
 };
-
 var getColor = function getColor(color) {
   return (0, _styledComponents.css)(["&:after{border-color:", " ", " ", " ", ";}"], (0, _polished.rgba)(color, 0.3), (0, _polished.rgba)(color, 0.3), (0, _polished.rgba)(color, 0.7), (0, _polished.rgba)(color, 0.7));
 };
-
 var spin = (0, _styledComponents.keyframes)(["from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}"]);
 var delay = (0, _styledComponents.keyframes)(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
-
 var Container = _styledComponents.default.div.attrs({
-  className: "Loader"
+  className: 'Loader'
 }).withConfig({
   displayName: "styles__Container",
   componentId: "sc-zj8x0q-0"
-})(["position:relative;margin:0 auto;overflow:hidden;&:after{position:absolute;top:50%;left:50%;border-style:solid;border-radius:50%;content:\"\";transition:opacity 250ms;animation:", ";}", " ", " ", ""], function (props) {
+})(["position:relative;margin:0 auto;overflow:hidden;&:after{position:absolute;top:50%;left:50%;border-style:solid;border-radius:50%;content:'';transition:opacity 250ms;animation:", ";}", " ", " ", ""], function (props) {
   return props.delay ? (0, _styledComponents.css)(["", " 2.25s infinite linear,", " 2s 1"], spin, delay) : (0, _styledComponents.css)(["", " 2.25s infinite linear"], spin);
 }, function (props) {
   return props.small ? getSize(20) : getSize(40);
 }, function (props) {
   return props.dark ? getColor(props.theme.colors.neutral[400]) : getColor(props.theme.colors.neutral[0]);
 }, _systemProps.COMMON);
-
 var Text = _styledComponents.default.div.withConfig({
   displayName: "styles__Text",
   componentId: "sc-zj8x0q-1"
 })(["", ""], _mixins.visuallyHidden);
-
 exports.Text = Text;
 var _default = Container;
 exports.default = _default;

package/commonjs/LoaderButton/index.js

@@ -2,72 +2,71 @@
 
 exports.__esModule = true;
 exports.default = exports.LoaderButton = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _Box = _interopRequireDefault(require("../Box"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _Loader = _interopRequireDefault(require("../Loader"));
-
 var _polished = require("polished");
-
 var _seedsColor = require("@sproutsocial/seeds-color");
-
 var _excluded = ["appearance", "isLoading", "disabled", "loaderLabel", "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 || 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 _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 _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 getColor = function getColor(appearance) {
+// TODO: This is a temporary solution to get the loader button to work with dark mode
+var getColor = function getColor(appearance, themeColorMode) {
+  var selectColorBasedOnMode = themeColorMode === 'dark' ? 'light' : 'dark';
   switch (appearance) {
     /** "default" is @deprecated in favour of unstyled */
-    case "default":
-    case "unstyled":
-    case "outline":
-    case "secondary":
-      return "dark";
-
+    case 'default':
+      return selectColorBasedOnMode;
+    case 'unstyled':
+      return selectColorBasedOnMode;
+    case 'primary':
+      return 'light';
+    case 'secondary':
+      return selectColorBasedOnMode;
+    case 'destructive':
+      return 'light';
+    case 'placeholder':
+      return selectColorBasedOnMode;
+    case 'pill':
+      return selectColorBasedOnMode;
+    case 'outline':
+      // This case doesn't even make sense.... There's no outline button
+      // TODO: investigate if this is even used anywhere
+      return 'light';
     default:
-      return "light";
+      return 'light';
   }
 };
-
 var CustomLoader = (0, _styledComponents.default)(_Loader.default).withConfig({
   displayName: "LoaderButton__CustomLoader",
   componentId: "sc-11i6dru-0"
 })(["&:after{", " ", "}"], function (p) {
-  return p.color === "light" && (0, _styledComponents.css)(["border-color:", " ", " ", " ", ";"], (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_0, 0.5), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_0, 0.5), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_0, 1), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_0, 1.0));
+  return p.color === 'light' && (0, _styledComponents.css)(["border-color:", " ", " ", " ", ";"], (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_0, 0.5), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_0, 0.5), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_0, 1), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_0, 1.0));
 }, function (p) {
-  return p.color === "dark" && (0, _styledComponents.css)(["border-color:", " ", " ", " ", ";"], (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_1000, 0.5), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_1000, 0.5), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_1000, 1), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_1000, 1.0));
+  return p.color === 'dark' && (0, _styledComponents.css)(["border-color:", " ", " ", " ", ";"], (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_1000, 0.5), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_1000, 0.5), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_1000, 1), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_1000, 1.0));
 });
-
 var LoaderButton = function LoaderButton(_ref) {
   var _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? "unstyled" : _ref$appearance,
-      _ref$isLoading = _ref.isLoading,
-      _isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-      disabled = _ref.disabled,
-      loaderLabel = _ref.loaderLabel,
-      children = _ref.children,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    appearance = _ref$appearance === void 0 ? 'unstyled' : _ref$appearance,
+    _ref$isLoading = _ref.isLoading,
+    _isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    disabled = _ref.disabled,
+    loaderLabel = _ref.loaderLabel,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var isLoading = Boolean(_isLoading);
+  var _useTheme = (0, _styledComponents.useTheme)(),
+    themeColorMode = _useTheme.mode;
   return /*#__PURE__*/React.createElement(_Button.default, _extends({
     disabled: disabled || isLoading,
     appearance: appearance,
-    "data-qa-button-isloading": isLoading === true // $FlowIssue - upgrade v0.112.0
-
+    "data-qa-button-isloading": isLoading === true
+    // $FlowIssue - upgrade v0.112.0
   }, rest), /*#__PURE__*/React.createElement(_Box.default, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(_Box.default, {
@@ -83,10 +82,9 @@ var LoaderButton = function LoaderButton(_ref) {
     text: loaderLabel,
     size: "small",
     delay: false,
-    color: getColor(appearance)
+    color: getColor(appearance, themeColorMode)
   }))));
 };
-
 exports.LoaderButton = LoaderButton;
 var _default = LoaderButton;
 exports.default = _default;

package/commonjs/Menu/constants.js

@@ -2,17 +2,18 @@
 
 exports.__esModule = true;
 exports.MENU_ROLES = exports.MENU_ITEM_ROLES = void 0;
+
 var MENU_ROLES = Object.freeze({
-  MENU: "menu",
-  LIST: "list",
-  LISTBOX: "listbox"
+  MENU: 'menu',
+  LIST: 'list',
+  LISTBOX: 'listbox'
 });
 exports.MENU_ROLES = MENU_ROLES;
 var MENU_ITEM_ROLES = Object.freeze({
-  MENUITEM: "menuitem",
-  LISTITEM: "listitem",
-  OPTION: "option",
-  RADIO: "menuitemradio",
-  CHECKBOX: "menuitemcheckbox"
+  MENUITEM: 'menuitem',
+  LISTITEM: 'listitem',
+  OPTION: 'option',
+  RADIO: 'menuitemradio',
+  CHECKBOX: 'menuitemcheckbox'
 });
 exports.MENU_ITEM_ROLES = MENU_ITEM_ROLES;