@sproutsocial/racine 22.5.1 → 23.0.0

package/lib/TableRowAccordion/TableRowAccordion.js

@@ -1,6 +1,7 @@
 var _excluded = ["id", "cells", "detail", "onToggle", "isExpanded", "color"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -20,6 +21,9 @@ import * as React from "react";
 import Icon from "../Icon";
 import TableCell from "../TableCell";
 import Container, { Detail, Trigger } from "./styles";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * The table row accordion component allows for rendering a row of tabular data along with a addtional content to be rendered inside of an accordion drawer. This component is meant to be used with the table components rowRender mentod.
  */
@@ -54,7 +58,7 @@ var TableRowAccordion = /*#__PURE__*/function (_React$Component) {
         isExpanded = _this$props2.isExpanded,
         color = _this$props2.color,
         rest = _objectWithoutProperties(_this$props2, _excluded);
-      return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
+      return /*#__PURE__*/_createElement(Container, _objectSpread(_objectSpread({}, rest), {}, {
         "data-qa-table-row-accordion": isExpanded,
         key: id
         // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
@@ -62,34 +66,37 @@ var TableRowAccordion = /*#__PURE__*/function (_React$Component) {
         // @ts-ignore
         ,
         color: color
-      }), /*#__PURE__*/React.createElement("tr", {
+      }), /*#__PURE__*/_jsxs("tr", {
         "data-tablerowaccordion-summary": true,
-        onClick: this.handleToggle
-      }, cells.map(function (td) {
-        return /*#__PURE__*/React.createElement(TableCell, _extends({}, td, {
-          key: td.id
-        }));
-      }), /*#__PURE__*/React.createElement(TableCell, {
-        id: "tableRowAccordion_trigger",
-        content:
-        /*#__PURE__*/
-        // TODO: This trigger needs an accessible label passed in via props
-        React.createElement(Trigger, {
-          "data-tablerowaccordion-trigger": true,
-          onClick: this.handleToggle,
-          role: "button"
-        }, /*#__PURE__*/React.createElement(Icon, {
-          name: isExpanded ? "chevron-up-outline" : "chevron-down-outline",
-          "aria-hidden": true
-        }))
-      })), /*#__PURE__*/React.createElement(Detail, {
+        onClick: this.handleToggle,
+        children: [cells.map(function (td) {
+          return /*#__PURE__*/_createElement(TableCell, _objectSpread(_objectSpread({}, td), {}, {
+            key: td.id
+          }));
+        }), /*#__PURE__*/_jsx(TableCell, {
+          id: "tableRowAccordion_trigger",
+          content:
+          /*#__PURE__*/
+          // TODO: This trigger needs an accessible label passed in via props
+          _jsx(Trigger, {
+            "data-tablerowaccordion-trigger": true,
+            onClick: this.handleToggle,
+            role: "button",
+            children: /*#__PURE__*/_jsx(Icon, {
+              name: isExpanded ? "chevron-up-outline" : "chevron-down-outline",
+              "aria-hidden": true
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Detail, {
         isExpanded: isExpanded,
-        "data-tablerowaccordion-detail": true
-      }, /*#__PURE__*/React.createElement(TableCell, {
-        id: "tableRowAccordion_detail",
-        colSpan: 100,
-        content: detail
-      })));
+        "data-tablerowaccordion-detail": true,
+        children: /*#__PURE__*/_jsx(TableCell, {
+          id: "tableRowAccordion_detail",
+          colSpan: 100,
+          content: detail
+        })
+      }));
     }
   }]);
   return TableRowAccordion;

package/lib/Tabs/Tabs.js

@@ -1,7 +1,8 @@
 var _excluded = ["children", "id"],
   _excluded2 = ["children", "qa", "onSelect"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -19,6 +20,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from "react";
 import Container, { TabItem, TabButton } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
 var TabButtonContext = /*#__PURE__*/React.createContext({});
 var TabItemButton = /*#__PURE__*/function (_React$Component) {
   _inherits(TabItemButton, _React$Component);
@@ -64,26 +66,28 @@ var TabItemButton = /*#__PURE__*/function (_React$Component) {
         onActivate = _this$context4.onActivate,
         fullWidth = _this$context4.fullWidth;
       var isSelected = selectedId === id;
-      return /*#__PURE__*/React.createElement(TabItem, {
-        key: id,
+      return /*#__PURE__*/_jsx(TabItem, {
         fullWidth: fullWidth,
-        isSelected: isSelected
-      }, /*#__PURE__*/React.createElement(TabButton, _extends({
-        innerRef: this.buttonRef,
-        id: id,
-        onClick: function onClick() {
-          return onActivate === null || onActivate === void 0 ? void 0 : onActivate(id);
-        },
         isSelected: isSelected,
-        tabIndex: isSelected ? 0 : -1,
-        fullWidth: fullWidth,
-        "data-qa-tab-button": id,
-        "data-qa-tab-button-state": isSelected,
-        "aria-selected": isSelected,
-        role: "tab"
-        // TODO: Add a TabPanel subcomponent for use with tabs
-        // aria-controls={tabPanelId}
-      }, rest), children));
+        children: /*#__PURE__*/_jsx(TabButton, _objectSpread(_objectSpread({
+          innerRef: this.buttonRef,
+          id: id,
+          onClick: function onClick() {
+            return onActivate === null || onActivate === void 0 ? void 0 : onActivate(id);
+          },
+          isSelected: isSelected,
+          tabIndex: isSelected ? 0 : -1,
+          fullWidth: fullWidth,
+          "data-qa-tab-button": id,
+          "data-qa-tab-button-state": isSelected,
+          "aria-selected": isSelected,
+          role: "tab"
+          // TODO: Add a TabPanel subcomponent for use with tabs
+          // aria-controls={tabPanelId}
+        }, rest), {}, {
+          children: children
+        }))
+      }, id);
     }
   }]);
   return TabItemButton;
@@ -177,21 +181,24 @@ var Tabs = /*#__PURE__*/function (_React$Component2) {
         qa = _this$props2.qa,
         onSelect = _this$props2.onSelect,
         rest = _objectWithoutProperties(_this$props2, _excluded2);
-      return /*#__PURE__*/React.createElement(Container, _extends({
+      return /*#__PURE__*/_jsx(Container, _objectSpread(_objectSpread(_objectSpread({
         "data-qa-tabs": "",
         onKeyUp: this.keyHandler,
         onSelect: onSelect,
         role: "tablist"
-      }, qa, rest), /*#__PURE__*/React.createElement(TabButtonContext.Provider, {
-        value: {
-          selectedId: this.getSelectedId(),
-          fullWidth: this.props.fullWidth,
-          onActivate: this.onActivate,
-          onTabMount: this.onTabMount,
-          onTabUpdate: this.onTabUpdate,
-          onTabUnmount: this.onTabUnmount
-        }
-      }, children));
+      }, qa), rest), {}, {
+        children: /*#__PURE__*/_jsx(TabButtonContext.Provider, {
+          value: {
+            selectedId: this.getSelectedId(),
+            fullWidth: this.props.fullWidth,
+            onActivate: this.onActivate,
+            onTabMount: this.onTabMount,
+            onTabUpdate: this.onTabUpdate,
+            onTabUnmount: this.onTabUnmount
+          },
+          children: children
+        })
+      }));
     }
   }]);
   return Tabs;

package/lib/Text/Text.js

@@ -1,10 +1,16 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["fontSize", "children", "qa", "color"];
-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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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; }
 import * as React from "react";
 import styled from "styled-components";
 import Container from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
 var Headline = styled(Container).withConfig({
   displayName: "Text__Headline",
   componentId: "sc-slxrr0-0"
@@ -74,7 +80,7 @@ var Text = function Text(_ref) {
     color = _ref.color,
     rest = _objectWithoutProperties(_ref, _excluded);
   var qaText = typeof children === "string" ? children : undefined;
-  return /*#__PURE__*/React.createElement(Container, _extends({
+  return /*#__PURE__*/_jsx(Container, _objectSpread(_objectSpread(_objectSpread({
     typeScale: fontSize,
     "data-qa-text": qaText
     // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
@@ -82,7 +88,9 @@ var Text = function Text(_ref) {
     // @ts-ignore
     ,
     color: color
-  }, qa, rest), children);
+  }, qa), rest), {}, {
+    children: children
+  }));
 };
 Headline.displayName = "Text.Headline";
 SubHeadline.displayName = "Text.SubHeadline";

package/lib/Textarea/Textarea.js

@@ -1,6 +1,7 @@
 var _excluded = ["autoFocus", "disabled", "readOnly", "isInvalid", "id", "name", "placeholder", "value", "enableSpellcheck", "enableResize", "required", "rows", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "innerRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "color", "qa", "inputProps"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -23,6 +24,8 @@ import Container, { Accessory } from "./styles";
 /**
  * @deprecated Use TypeTextareaProps from root instead
  */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var Textarea = /*#__PURE__*/function (_React$Component) {
   _inherits(Textarea, _React$Component);
   function Textarea() {
@@ -92,7 +95,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         _this$props$inputProp = _this$props.inputProps,
         inputProps = _this$props$inputProp === void 0 ? {} : _this$props$inputProp,
         rest = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/React.createElement(Container, _extends({
+      return /*#__PURE__*/_jsxs(Container, _objectSpread(_objectSpread(_objectSpread({
         hasBeforeElement: !!elemBefore,
         hasAfterElement: !!elemAfter,
         disabled: disabled,
@@ -107,34 +110,38 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         "data-qa-textarea-isdisabled": disabled === true,
         "data-qa-textarea-isrequired": required === true,
         "data-qa-textarea-isinvalid": isInvalid === true
-      }, qa, rest), elemBefore && /*#__PURE__*/React.createElement(Accessory, {
-        before: true
-      }, elemBefore), /*#__PURE__*/React.createElement("textarea", _extends({
-        id: id,
-        "aria-label": ariaLabel,
-        "aria-describedby": ariaDescribedby,
-        "aria-invalid": isInvalid,
-        value: value,
-        name: name,
-        placeholder: placeholder,
-        rows: rows,
-        disabled: disabled,
-        readOnly: Boolean(readOnly),
-        autoFocus: autoFocus,
-        spellCheck: enableSpellcheck,
-        required: required,
-        maxLength: maxLength,
-        onChange: this.handleChange,
-        onKeyUp: this.handleKeyUp,
-        onKeyDown: this.handleKeyDown,
-        onBlur: this.handleBlur,
-        onFocus: this.handleFocus,
-        ref: innerRef,
-        "data-qa-textarea-input": "",
-        "data-qa-input": name
-      }, inputProps)), elemAfter && /*#__PURE__*/React.createElement(Accessory, {
-        after: true
-      }, elemAfter));
+      }, qa), rest), {}, {
+        children: [elemBefore && /*#__PURE__*/_jsx(Accessory, {
+          before: true,
+          children: elemBefore
+        }), /*#__PURE__*/_jsx("textarea", _objectSpread({
+          id: id,
+          "aria-label": ariaLabel,
+          "aria-describedby": ariaDescribedby,
+          "aria-invalid": isInvalid,
+          value: value,
+          name: name,
+          placeholder: placeholder,
+          rows: rows,
+          disabled: disabled,
+          readOnly: Boolean(readOnly),
+          autoFocus: autoFocus,
+          spellCheck: enableSpellcheck,
+          required: required,
+          maxLength: maxLength,
+          onChange: this.handleChange,
+          onKeyUp: this.handleKeyUp,
+          onKeyDown: this.handleKeyDown,
+          onBlur: this.handleBlur,
+          onFocus: this.handleFocus,
+          ref: innerRef,
+          "data-qa-textarea-input": "",
+          "data-qa-input": name
+        }, inputProps)), elemAfter && /*#__PURE__*/_jsx(Accessory, {
+          after: true,
+          children: elemAfter
+        })]
+      }));
     }
   }]);
   return Textarea;

package/lib/ThemeProvider/index.js

@@ -1,12 +1,17 @@
-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(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from "react";
 import { ThemeProvider as BaseThemeProvider } from "styled-components";
 import { theme } from "@sproutsocial/seeds-react-theme";
 
 // We can append additional themes types here
-
+import { jsx as _jsx } from "react/jsx-runtime";
 var ThemeProvider = function ThemeProvider(props) {
-  return /*#__PURE__*/React.createElement(BaseThemeProvider, _extends({}, props, {
+  return /*#__PURE__*/_jsx(BaseThemeProvider, _objectSpread(_objectSpread({}, props), {}, {
     theme: props.theme || theme
   }));
 };

package/lib/Toast/Toast.js

@@ -1,32 +1,41 @@
 import _styled2 from "styled-components";
 import _styled from "styled-components";
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import * as React from "react";
-import { toast as toastifyToast, ToastContainer as BaseToastContainer, cssTransition } from "react-toastify";
-import { MOTION_DURATION_MEDIUM, MOTION_DURATION_SLOW } from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
+var _excluded = ["closeOnClick", "content", "onClose", "persist", "toastId", "useTransition", "position", "autoClose", "transition"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { toast as toastifyToast, cssTransition } from "react-toastify";
 import Box from "../Box";
 import Icon from "../Icon";
 import Text from "../Text";
-import Container, { GlobalToastStyles, CustomIcon } from "./styles";
+import { Container, ToastRoot } from "./styles";
+import styled from "styled-components";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var toastDismiss = function toastDismiss() {
+  return toastifyToast.dismiss.apply(toastifyToast, arguments);
+};
+export var toastIsActive = function toastIsActive() {
+  return toastifyToast.isActive.apply(toastifyToast, arguments);
+};
+export var toastUpdate = function toastUpdate() {
+  return toastifyToast.update.apply(toastifyToast, arguments);
+};
 var NoTransition = cssTransition({
-  enter: "",
-  exit: "",
-  duration: [0, 0],
-  collapseDuration: 0
+  enter: "SproutToast__none-in",
+  exit: "SproutToast__none-out"
 });
-var Zoom = cssTransition({
-  enter: "Toastify__zoom-enter",
-  exit: "Toastify__zoom-exit",
-  duration: [MOTION_DURATION_MEDIUM * 1000, MOTION_DURATION_SLOW * 1000]
+var SproutZoomTransition = cssTransition({
+  enter: "SproutToast__zoom-in",
+  exit: "SproutToast__zoom-out"
 });
-var ToastContainer = function ToastContainer() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalToastStyles, null), /*#__PURE__*/React.createElement(BaseToastContainer, {
-    className: "Toastify-container-overrides",
-    toastClassName: "Toastify-toast-overrides",
-    hideProgressBar: true,
-    closeButton: false,
-    position: toastifyToast.POSITION.BOTTOM_RIGHT
-  }));
+export var ToastContainer = function ToastContainer(props) {
+  return /*#__PURE__*/_jsx(ToastRoot, _objectSpread({}, props));
 };
 var themeIcon = {
   success: "circle-check-outline",
@@ -35,86 +44,117 @@ var themeIcon = {
   error: "triangle-exclamation-outline"
 };
 export function toast(options) {
-  var props = {
-    theme: options.theme,
-    content: options.content,
-    color: options.color,
-    icon: options.icon
-  };
-  var autoClose = options.persist ? false : 6000;
-  var content = options.content,
+  var _options$closeOnClick = options.closeOnClick,
+    closeOnClick = _options$closeOnClick === void 0 ? true : _options$closeOnClick,
+    content = options.content,
     onClose = options.onClose,
+    persist = options.persist,
+    inputToastId = options.toastId,
     _options$useTransitio = options.useTransition,
-    useTransition = _options$useTransitio === void 0 ? true : _options$useTransitio;
-  var toastId = options.toastId;
+    useTransition = _options$useTransitio === void 0 ? true : _options$useTransitio,
+    _options$position = options.position,
+    position = _options$position === void 0 ? "bottom-right" : _options$position,
+    _options$autoClose = options.autoClose,
+    autoClose = _options$autoClose === void 0 ? persist ? false : 6000 : _options$autoClose,
+    _options$transition = options.transition,
+    transition = _options$transition === void 0 ? useTransition ? SproutZoomTransition : NoTransition : _options$transition,
+    rest = _objectWithoutProperties(options, _excluded);
+  var toastId = inputToastId;
   if (!toastId && typeof content === "string") {
     toastId = content;
   }
-  var transition = useTransition ? Zoom : NoTransition;
-  toastifyToast( /*#__PURE__*/React.createElement(Toast, props), {
+  var renderToast = function renderToast(toastInput) {
+    var renderedContent = typeof content === "function" ? content(toastInput) : content;
+    if (options.theme === "custom") {
+      return renderedContent;
+    }
+    var theme = options.theme || "info";
+    var iconName = options.icon || themeIcon[theme];
+    var containerColor = options.color || {
+      success: "container.border.success",
+      error: "container.border.error",
+      info: "container.border.info",
+      warning: "container.border.warning"
+    }[theme];
+    var iconColor = options.color || {
+      success: "icon.success",
+      error: "icon.error",
+      info: "icon.info",
+      warning: "icon.warning"
+    }[theme];
+    return (
+      /*#__PURE__*/
+      // TODO: if this closes when clicked, there should be a label saying "Click to close" that can be overridden
+      _jsx(ToastContentContainer, {
+        icon: /*#__PURE__*/_jsx(Icon, {
+          name: iconName,
+          color: iconColor
+        }),
+        close: /*#__PURE__*/_jsx(Icon, {
+          name: "x-outline",
+          color: "icon.base",
+          "aria-hidden": true
+        }),
+        highlightColor: containerColor,
+        children: renderedContent
+      })
+    );
+  };
+  var toastOptions = _objectSpread(_objectSpread({
     autoClose: autoClose,
+    closeOnClick: closeOnClick,
     onClose: onClose,
-    toastId: toastId,
-    transition: transition
+    toastId: toastId || undefined,
+    transition: transition,
+    position: position
+  }, rest), {}, {
+    icon: undefined,
+    color: undefined
   });
+  if (toastId && toastIsActive(toastId)) {
+    toastifyToast.update(toastId, _objectSpread(_objectSpread({}, toastOptions), {}, {
+      render: renderToast
+    }));
+  } else {
+    toastId = toastifyToast(renderToast, toastOptions);
+  }
+  return toastId;
 }
-var IconBox = function IconBox(props) {
-  return /*#__PURE__*/React.createElement(_StyledBox, _extends({
-    display: "inline-block"
-  }, props));
-};
-var Toast = function Toast(_ref) {
-  var content = _ref.content,
-    theme = _ref.theme,
-    color = _ref.color,
-    icon = _ref.icon;
-  return (
-    /*#__PURE__*/
-    // TODO: if this closes when clicked, there should be a label saying "Click to close" that can be overriden
-    React.createElement(Container, {
-      type: theme || "info",
-      customColor: color,
-      borderLeft: "2px solid",
-      "data-qa-toast": ""
-    }, /*#__PURE__*/React.createElement(Box, {
-      display: "flex",
-      minHeight: "48px",
-      maxHeight: "800px",
-      p: 350,
-      alignItems: "flex-start",
-      m: "auto",
-      width: 1
-    }, /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(CustomIcon, {
-      type: theme || "info"
-      // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      ,
-      color: color,
-      customColor: color,
-      name: theme ? themeIcon[theme] : icon || themeIcon["info"],
-      fixedWidth: true,
-      "aria-hidden": true
-    })), /*#__PURE__*/React.createElement(_StyledBox2, {
-      flex: 1
-    }, /*#__PURE__*/React.createElement(Text, {
-      as: "div",
-      color: "text.body",
-      "data-qa-toast-content": ""
-    }, content)), /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(Icon, {
-      name: "x-outline",
-      ml: 400,
-      color: "icon.base",
+export default ToastContainer;
+export var ToastContentContainer = function ToastContentContainer(_ref) {
+  var children = _ref.children,
+    icon = _ref.icon,
+    close = _ref.close,
+    highlightColor = _ref.highlightColor;
+  return /*#__PURE__*/_jsxs(Container, {
+    "data-qa-toast": "",
+    children: [highlightColor ? /*#__PURE__*/_jsx(ToastHighlight, {
+      bg: highlightColor,
       "aria-hidden": true
-    }))))
-  );
+    }) : null, /*#__PURE__*/_jsx(_StyledBox, {
+      children: icon
+    }), /*#__PURE__*/_jsx(Box, {
+      flex: 1,
+      children: /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        color: "text.body",
+        "data-qa-toast-content": "",
+        children: children
+      })
+    }), /*#__PURE__*/_jsx(_StyledBox2, {
+      children: close
+    })]
+  });
 };
-export default ToastContainer;
-var _StyledBox = _styled(Box).withConfig({
-  displayName: "Toast___StyledBox",
+export var ToastHighlight = styled(Box).withConfig({
+  displayName: "Toast__ToastHighlight",
   componentId: "sc-1k2tvgq-0"
+})(["position:absolute;top:0;bottom:0;left:0;width:2px;"]);
+var _StyledBox = styled(Box).withConfig({
+  displayName: "Toast___StyledBox",
+  componentId: "sc-1k2tvgq-1"
 })(["line-height:1;"]);
-var _StyledBox2 = _styled(Box).withConfig({
+var _StyledBox2 = styled(Box).withConfig({
   displayName: "Toast___StyledBox2",
-  componentId: "sc-1k2tvgq-1"
-})(["transform:translateY(1px);"]);
+  componentId: "sc-1k2tvgq-2"
+})(["line-height:1;"]);

package/lib/Toast/index.js

@@ -1,5 +1,3 @@
-import ToastContainer from "./Toast";
-export default ToastContainer;
-export { ToastContainer };
-export { toast } from "./Toast";
-export * from "./ToastTypes";
+export * from "./Toast";
+export * from "./ToastTypes";
+export { TOAST_Z_INDEX } from "./styles";