@sproutsocial/racine 14.3.0 → 15.0.0

package/commonjs/Card/styles.js

@@ -3,28 +3,108 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Container = exports.ClickableArea = void 0;
+exports.StyledSelectedIcon = exports.StyledCardHeader = exports.StyledCardFooter = exports.StyledCardContent = exports.StyledCard = exports.SelectedIconWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _Box = _interopRequireDefault(require("../Box"));
-var _Button = _interopRequireDefault(require("../Button"));
+var _styledSystem = require("styled-system");
+var _mixins = require("../utils/mixins");
+var _Icon = _interopRequireDefault(require("../Icon"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var Container = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "styles__Container",
-  componentId: "sc-1t1hrf6-0"
-})(["width:100%;border-radius:", ";position:relative;z-index:0;::after{content:'';top:0;left:0;position:absolute;border-radius:", ";z-index:-1;width:100%;height:100%;opacity:0;box-shadow:", ";transition:opacity ", " ", ";}&:hover{&::after{opacity:1;}}[role='button'],[type='button'],a{position:relative;}"], function (props) {
-  return props.theme.radii.outer;
-}, function (props) {
-  return props.theme.radii[500];
-}, function (props) {
-  return props.theme.shadows.low;
-}, function (props) {
-  return props.theme.duration.medium;
-}, function (props) {
-  return props.theme.easing.ease_inout;
+// TODO: Would be really cool to cherry pick specific props from style functions. For example,
+// removing the css prop 'color' from the color function or importing just the specific
+// props the component needs. It appears to be possible with some and not others.
+// https://github.com/styled-system/styled-system/issues/1569
+
+var StyledCardContent = _styledComponents.default.div.withConfig({
+  displayName: "styles__StyledCardContent",
+  componentId: "sc-9tyqu4-0"
+})(["display:flex;flex-direction:column;padding:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", ""], function (_ref) {
+  var theme = _ref.theme;
+  return theme.space[400];
+}, _styledSystem.border, _styledSystem.color, _styledSystem.flexbox, _styledSystem.grid, _styledSystem.layout, _styledSystem.space);
+exports.StyledCardContent = StyledCardContent;
+var StyledCardHeader = (0, _styledComponents.default)(StyledCardContent).withConfig({
+  displayName: "styles__StyledCardHeader",
+  componentId: "sc-9tyqu4-1"
+})(["flex-direction:row;border-bottom:", ";border-top-left-radius:", ";border-top-right-radius:", ";", " ", " ", " ", " ", " ", ""], function (_ref2) {
+  var theme = _ref2.theme;
+  return "".concat(theme.borderWidths[500], " solid\n  ").concat(theme.colors.container.border.base);
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.radii.inner;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.radii.inner;
+}, _styledSystem.border, _styledSystem.color, _styledSystem.flexbox, _styledSystem.grid, _styledSystem.layout, _styledSystem.space);
+exports.StyledCardHeader = StyledCardHeader;
+var StyledCardFooter = (0, _styledComponents.default)(StyledCardContent).withConfig({
+  displayName: "styles__StyledCardFooter",
+  componentId: "sc-9tyqu4-2"
+})(["flex-direction:row;border-top:", ";border-bottom-left-radius:", ";border-bottom-right-radius:", ";", " ", " ", " ", " ", " ", ""], function (_ref5) {
+  var theme = _ref5.theme;
+  return "".concat(theme.borderWidths[500], " solid\n  ").concat(theme.colors.container.border.base);
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.radii.inner;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.radii.inner;
+}, _styledSystem.border, _styledSystem.color, _styledSystem.flexbox, _styledSystem.grid, _styledSystem.layout, _styledSystem.space);
+exports.StyledCardFooter = StyledCardFooter;
+var SelectedIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "styles__SelectedIconWrapper",
+  componentId: "sc-9tyqu4-3"
+})(["display:flex;align-items:center;justify-content:center;position:absolute;top:-8px;right:-8px;"]);
+exports.SelectedIconWrapper = SelectedIconWrapper;
+var StyledSelectedIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
+  displayName: "styles__StyledSelectedIcon",
+  componentId: "sc-9tyqu4-4"
+})(["border-radius:50%;background:", ";opacity:0;transition:opacity ", ";", ""], function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.colors.container.background.base;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.duration.medium;
+}, function (_ref10) {
+  var $selected = _ref10.$selected;
+  return $selected && "\n    opacity: 1;\n  ";
 });
-exports.Container = Container;
-var ClickableArea = (0, _styledComponents.default)(_Button.default).withConfig({
-  displayName: "styles__ClickableArea",
-  componentId: "sc-1t1hrf6-1"
-})(["position:absolute !important;top:0;bottom:0;left:0;right:0;width:100%;"]);
-exports.ClickableArea = ClickableArea;
+exports.StyledSelectedIcon = StyledSelectedIcon;
+var StyledCard = _styledComponents.default.div.withConfig({
+  displayName: "styles__StyledCard",
+  componentId: "sc-9tyqu4-5"
+})(["position:relative;display:flex;flex-direction:column;box-sizing:border-box;margin:0;background:", ";border:", " solid ", ";padding:", ";border-radius:", ";transition:box-shadow ", ",border ", ";&[role='link'],&[role='button'],&[role='checkbox']{cursor:pointer;}&:hover{box-shadow:", ";}&:focus{", "}", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.colors.container.background.base;
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.borderWidths[500];
+}, function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.colors.container.border.base;
+}, function (_ref14) {
+  var theme = _ref14.theme,
+    $compositionalComponents = _ref14.$compositionalComponents;
+  return $compositionalComponents ? 0 : theme.space[400];
+}, function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.radii.outer;
+}, function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.duration.medium;
+}, function (_ref17) {
+  var theme = _ref17.theme;
+  return theme.duration.medium;
+}, function (_ref18) {
+  var theme = _ref18.theme,
+    _ref18$$elevation = _ref18.$elevation,
+    $elevation = _ref18$$elevation === void 0 ? 'low' : _ref18$$elevation;
+  return theme.shadows[$elevation];
+}, _mixins.focusRing, function (_ref19) {
+  var $disabled = _ref19.$disabled;
+  return $disabled && "\n    ".concat(_mixins.disabled, "\n  ");
+}, function (_ref20) {
+  var $selected = _ref20.$selected,
+    theme = _ref20.theme;
+  return $selected && "\n    border: ".concat(theme.borderWidths[500], " solid ").concat(theme.colors.container.border.selected, ";  \n  ");
+}, _styledSystem.border, _styledSystem.color, _styledSystem.flexbox, _styledSystem.grid, _styledSystem.layout, _styledSystem.position, _styledSystem.space);
+exports.StyledCard = StyledCard;

package/commonjs/Card/subComponents.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectedIcon = exports.CardHeader = exports.CardFooter = exports.CardContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("./utils");
+var _styles = require("./styles");
+var _excluded = ["children"],
+  _excluded2 = ["children"],
+  _excluded3 = ["children"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 CardContent = function CardContent(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  // TODO: It could be cool to possibly adjust the context to include an array of names of child components.
+  // Then, if CardHeader or CardFooter aren't used with CardContent throw an error.
+  (0, _utils.useChildContext)();
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledCardContent, rest, children);
+};
+exports.CardContent = CardContent;
+var CardHeader = function CardHeader(_ref2) {
+  var children = _ref2.children,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  (0, _utils.useChildContext)();
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledCardHeader, rest, children);
+};
+exports.CardHeader = CardHeader;
+var CardFooter = function CardFooter(_ref3) {
+  var children = _ref3.children,
+    rest = _objectWithoutProperties(_ref3, _excluded3);
+  (0, _utils.useChildContext)();
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledCardFooter, rest, children);
+};
+exports.CardFooter = CardFooter;
+var SelectedIcon = function SelectedIcon(_ref4) {
+  var $selected = _ref4.$selected;
+  return /*#__PURE__*/_react.default.createElement(_styles.SelectedIconWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.StyledSelectedIcon, {
+    "aria-hidden": true,
+    color: "icon.base",
+    name: "circle-check",
+    $selected: $selected
+  }));
+};
+exports.SelectedIcon = SelectedIcon;

package/commonjs/Card/utils.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onKeyDown = exports.navigateTo = exports.SubComponentContext = void 0;
+exports.useChildContext = useChildContext;
+var _react = require("react");
+var _utils = require("../utils");
+var SubComponentContext = /*#__PURE__*/(0, _react.createContext)(
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function () {});
+exports.SubComponentContext = SubComponentContext;
+function useChildContext() {
+  var setHasSubComponent = (0, _react.useContext)(SubComponentContext);
+  setHasSubComponent(true);
+}
+var navigateTo = function navigateTo(_ref) {
+  var _ref$current, _window$open;
+  var e = _ref.e,
+    href = _ref.href,
+    ref = _ref.ref;
+  var target = e.target;
+
+  // asserts that target is an element so `contains` accepts it
+  (0, _utils.assertIsElement)(target);
+  if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) {
+    if (target.getAttribute('onclick') !== null || target.getAttribute('href') !== null) {
+      e.stopPropagation();
+      return;
+    }
+  }
+  (_window$open = window.open(href, '_blank')) === null || _window$open === void 0 ? void 0 : _window$open.focus();
+};
+exports.navigateTo = navigateTo;
+var onKeyDown = function onKeyDown(_ref2) {
+  var e = _ref2.e,
+    href = _ref2.href,
+    onClick = _ref2.onClick,
+    ref = _ref2.ref,
+    role = _ref2.role;
+  if ((e === null || e === void 0 ? void 0 : e.key) === 'Enter') {
+    if (role === 'link') {
+      return navigateTo({
+        e: e,
+        href: href,
+        ref: ref
+      });
+    }
+    if (role === 'presentation') {
+      return;
+    }
+    return onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  }
+};
+exports.onKeyDown = onKeyDown;

package/commonjs/Icon/Icon.js

@@ -110,6 +110,7 @@ IconToggle.displayName = 'Icon.Toggle';
 /**
  * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.
  *
+ * @link https://www.w3.org/TR/wai-aria-practices-1.1/#button
  * @example
  * const [toggleState, setToggleState] = useState(false);
  * <Button  // Wrap Icon.Toggle with Button

package/commonjs/IconViewBoxes.js

@@ -176,6 +176,8 @@ module.exports = {
   "h3": "0 0 16 16",
   "h4": "0 0 16 16",
   "hamburger": "0 0 16 18",
+  "hand-sparkle-outline": "0 0 18 18",
+  "hand-sparkle": "0 0 18 18",
   "hashtag": "0 0 16 16",
   "headset": "0 0 16 16",
   "heart-outline": "0 0 16 16",

package/commonjs/Loader/styles.js

@@ -5,33 +5,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Text = void 0;
-var _polished = require("polished");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _mixins = require("../utils/mixins");
 var _systemProps = require("../utils/system-props");
 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) {
-  var spinnerSize = Math.ceil(size * 0.9);
-  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 spinnerSize = Math.round(size * 1);
+  var borderWidth = Math.round(size * 0.1);
+  return (0, _styledComponents.css)(["width:", "px;height:", "px;&:after{width:", "px;height:", "px;box-sizing:border-box;border-width:", "px;box-shadow:", ";}.no-cssanimations &::after{background-size:", "px;}"], size, size, spinnerSize, spinnerSize, borderWidth, function (_ref) {
+    var theme = _ref.theme;
+    return "inset 0 0 0 2px ".concat(theme.colors.neutral[600]);
+  }, spinnerSize);
 };
 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 delayAnimation = (0, _styledComponents.keyframes)(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
 var Container = _styledComponents.default.div.attrs({
   className: 'Loader'
 }).withConfig({
   displayName: "styles__Container",
   componentId: "sc-1edimrk-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) {
-  return props.delay ? (0, _styledComponents.css)(["", " 2.25s infinite linear,", " 2s 1"], spin, delay) : (0, _styledComponents.css)(["", " 2.25s infinite linear"], spin);
+})(["position:relative;margin:0 auto;padding:0;overflow:hidden;border-radius:100%;box-shadow:", ";animation:", ";&:after{position:absolute;top:50%;left:50%;background:transparent;border-style:solid;border-radius:100%;content:'';transition:opacity 250ms;border-color:", ";animation:", ";}", " ", ""], function (_ref2) {
+  var theme = _ref2.theme;
+  return "0 0 0 2px ".concat(theme.colors.neutral[600]);
 }, function (props) {
-  return props.small ? getSize(20) : getSize(40);
+  return props.delay ? (0, _styledComponents.css)(["", " 2s 1;"], delayAnimation) : 'none';
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return "".concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[600], " ").concat(theme.colors.neutral[600]);
 }, function (props) {
-  return props.dark ? getColor(props.theme.colors.neutral[400]) : getColor(props.theme.colors.neutral[0]);
+  return props.delay ? (0, _styledComponents.css)(["", " 2.25s infinite linear,", " 2s 1"], spin, delayAnimation) : (0, _styledComponents.css)(["", " 2.25s infinite linear"], spin);
+}, function (props) {
+  return props.small ? getSize(20) : getSize(40);
 }, _systemProps.COMMON);
 var Text = _styledComponents.default.div.withConfig({
   displayName: "styles__Text",