@sproutsocial/racine 22.1.1 → 22.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 22.2.0
+
+### Minor Changes
+
+- 3dce611: Added a disabled prop to the Segmented Control Item component
+
+### Patch Changes
+
+- 24dc525: Attached document-level event handlers in capture phase to fix issues with React 17
+- be826e8: Racine and Seeds React now share the same systemProps to avoid any current/future discrepancies regarding which components or props are being exported. Duplicate Racine systemProps have been deleted.
+- Updated dependencies [24dc525]
+  - @sproutsocial/seeds-react-popout@1.0.2
+
 ## 22.1.1
 
 ### Patch Changes

package/README.md

@@ -104,9 +104,9 @@ And you can interact with Racine via the command line with these commands:
 
 ### **✅ Step 3: Make your changes**
 
-Cut a feature branch off `racine-dev` and start coding! As updates are merged into `racine-dev` by other developers over time you'll want to pull those updates into your branch, ideally via rebase, to avoid any conflicts when you open a pull request.
+Cut a feature branch off `dev` and start coding! As updates are merged into `dev` by other developers over time you'll want to pull those updates into your branch, ideally via rebase, to avoid any conflicts when you open a pull request.
 
-_Need to make an urgent update? Branch off `main` instead of `racine-dev`, and open your PR later against `main`. We consider this a hotfix and only support it for critical time-sensitive updates, so check with the Design Systems team prior to making this kind of contribution._
+_Need to make an urgent update? Branch off `main` instead of `dev`, and open your PR later against `main`. We consider this a hotfix and only support it for critical time-sensitive updates, so check with the Design Systems team prior to making this kind of contribution._
 
 We use a [visual regression testing](https://racine.netlify.app/?path=/story/welcome-visual-regression-testing--page) suite to capture any unintended changes during development. After running `yarn build` you can run the suite locally with `yarn backstop-test`, which will open a report in your browser to show you what passed and what failed. If any fails are actually intentional visual changes you can run `yarn backstop-approve` to approve those changes as new reference images and include them in your PR.
 
@@ -128,7 +128,7 @@ The changeset CLI will also ask you to input a message detailing your changes. T
 
 ### **🗣 Step 4: Create a pull request**
 
-Once you're ready to submit your changes for review, open a PR against the `racine-dev` branch (it's not the default branch, so you'll have to go find it). A few things will happen:
+Once you're ready to submit your changes for review, open a PR against the `dev` branch (it's not the default branch, so you'll have to go find it). A few things will happen:
 
 - The Design Systems team will be tagged to review your code. Feel free to additionally tag any specific individuals who you think should take a look.
 - Visual regression testing will run against your PR, and the results can be found in the "Report" artifact on the summary page for the associated Github Action run. `html_report/index.html` in `Report.zip` will show you what passed and what failed.

package/__flow__/SegmentedControl/SegmentedControl.flow.js

@@ -5,6 +5,8 @@ export type TypeSegmentedControlItemProps = {
   /** The value of this item. Should be unique among sibling items. */
   value: string,
   children: React.Node,
+  /** Disables user action and applies a disabled style on the component */
+  disabled?: boolean,
   ...
 };
 export type TypeSegmentedControlProps = {

package/commonjs/Drawer/Drawer.js

@@ -121,21 +121,36 @@ var Drawer = function Drawer(_ref3) {
         onClose();
       }
     };
-    documentBody && documentBody.addEventListener("keydown", onEsc, false);
+    documentBody === null || documentBody === void 0 || documentBody.addEventListener("keydown", onEsc, {
+      capture: true
+    });
     if (closeTargets) {
       closeTargets.forEach(function (targetElement) {
-        return targetElement && targetElement.addEventListener("click", bodyClick, false);
+        return targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener("click", bodyClick, {
+          capture: true
+        });
       });
     } else {
-      documentBody.firstElementChild && documentBody.firstElementChild.addEventListener("click", bodyClick, false);
+      var _documentBody$firstEl;
+      (_documentBody$firstEl = documentBody.firstElementChild) === null || _documentBody$firstEl === void 0 || _documentBody$firstEl.addEventListener("click", bodyClick, {
+        capture: true
+      });
     }
     return function () {
+      documentBody === null || documentBody === void 0 || documentBody.removeEventListener("keydown", onEsc, {
+        capture: true
+      });
       if (closeTargets) {
         closeTargets.forEach(function (targetElement) {
-          return targetElement && targetElement.removeEventListener("click", bodyClick, false);
+          return targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener("click", bodyClick, {
+            capture: true
+          });
         });
       } else {
-        documentBody.firstElementChild && documentBody.firstElementChild.removeEventListener("click", bodyClick, false);
+        var _documentBody$firstEl2;
+        (_documentBody$firstEl2 = documentBody.firstElementChild) === null || _documentBody$firstEl2 === void 0 || _documentBody$firstEl2.removeEventListener("click", bodyClick, {
+          capture: true
+        });
       }
     };
   }, [onClose, disableCloseOnClickOutside, closeTargets]);

package/commonjs/Popout/Popout.js

@@ -165,11 +165,19 @@ function Popout(_ref) {
           setIsShown(false, e);
         }
       };
-      documentBody.addEventListener("click", bodyClick, false);
-      documentBody.addEventListener("keydown", onEsc, false);
+      documentBody.addEventListener("click", bodyClick, {
+        capture: true
+      });
+      documentBody.addEventListener("keydown", onEsc, {
+        capture: true
+      });
       return function () {
-        documentBody.removeEventListener("click", bodyClick, false);
-        documentBody.removeEventListener("keydown", onEsc, false);
+        documentBody.removeEventListener("click", bodyClick, {
+          capture: true
+        });
+        documentBody.removeEventListener("keydown", onEsc, {
+          capture: true
+        });
       };
     }
   }, [isShown, setIsShown]);

package/commonjs/SegmentedControl/SegmentedControl.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _Box = _interopRequireDefault(require("../Box"));
 var _styles = require("./styles");
-var _excluded = ["value", "children"],
+var _excluded = ["value", "children", "disabled"],
   _excluded2 = ["selectedValue", "label", "onChange", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -29,6 +29,7 @@ var SegmentedControlContext = /*#__PURE__*/React.createContext(null);
 var SegmentedControlItem = function SegmentedControlItem(_ref) {
   var value = _ref.value,
     children = _ref.children,
+    disabled = _ref.disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
   var context = (0, _react.useContext)(SegmentedControlContext);
   if (!context) {
@@ -46,14 +47,16 @@ var SegmentedControlItem = function SegmentedControlItem(_ref) {
   return /*#__PURE__*/React.createElement(_styles.SegmentedControlItemContainer, _extends({
     "data-segmentedcontrol-isactive": isChecked,
     "data-qa-segmentedcontrol-item": value,
-    "data-qa-segmentedcontrol-ischecked": isChecked === true
+    "data-qa-segmentedcontrol-ischecked": isChecked === true,
+    disabled: disabled
   }, rest), /*#__PURE__*/React.createElement("input", {
     type: "radio",
     id: id,
     name: name,
     value: value,
     checked: isChecked,
-    onChange: onChange
+    onChange: onChange,
+    disabled: disabled
   }), /*#__PURE__*/React.createElement(_styles.SegmentedControlLabel, {
     as: "label",
     htmlFor: id,

package/commonjs/SegmentedControl/styles.js

@@ -27,9 +27,11 @@ var SegmentedControlContainer = exports.SegmentedControlContainer = (0, _styledC
 var SegmentedControlItemContainer = exports.SegmentedControlItemContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__SegmentedControlItemContainer",
   componentId: "sc-kx0lgh-1"
-})(["flex:1 1 auto;display:flex;cursor:pointer;& + &{margin-left:", ";}&:focus-within label{", "}input{", "}"], function (props) {
+})(["flex:1 1 auto;display:flex;cursor:pointer;& + &{margin-left:", ";}&:focus-within label{", "}input{", "}", ""], function (props) {
   return props.theme.space[100];
-}, _seedsReactMixins.focusRing, _seedsReactMixins.visuallyHidden);
+}, _seedsReactMixins.focusRing, _seedsReactMixins.visuallyHidden, function (props) {
+  return props.disabled && _seedsReactMixins.disabled;
+});
 var SegmentedControlLabel = exports.SegmentedControlLabel = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "styles__SegmentedControlLabel",
   componentId: "sc-kx0lgh-2"

package/commonjs/Tooltip/Tooltip.js

@@ -132,10 +132,14 @@ var Tooltip = function Tooltip(_ref2) {
 
     // We only want listeners from the tooltip if its open in the first place
     if (isOpen) {
-      documentBody.addEventListener("keydown", onEsc, false);
+      documentBody.addEventListener("keydown", onEsc, {
+        capture: true
+      });
     }
     return function () {
-      documentBody.removeEventListener("keydown", onEsc, false);
+      documentBody.removeEventListener("keydown", onEsc, {
+        capture: true
+      });
       clearTimeout(timeout);
     };
   }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);

package/commonjs/utils/system-props/index.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _systemProps = require("./system-props");
-Object.keys(_systemProps).forEach(function (key) {
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
+Object.keys(_seedsReactSystemProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _systemProps[key]) return;
+  if (key in exports && exports[key] === _seedsReactSystemProps[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _systemProps[key];
+      return _seedsReactSystemProps[key];
     }
   });
 });

package/dist/types/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAEV,0BAA0B,EAC1B,qBAAqB,EACrB,eAAe,EAEf,sBAAsB,EACvB,MAAM,eAAe,CAAC;AAsLvB,QAAA,MAAM,eAAe;+IAalB,eAAe;;mDAvJf,qBAAqB;;;;gCAmCsB,sBAAsB;;;;gBAjElC,0BAA0B;;;CA4N3D,CAAC;AAUF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAEV,0BAA0B,EAC1B,qBAAqB,EACrB,eAAe,EAEf,sBAAsB,EACvB,MAAM,eAAe,CAAC;AAkLvB,QAAA,MAAM,eAAe;+IAalB,eAAe;;mDAnJf,qBAAqB;;;;gCAmCsB,sBAAsB;;;;gBAjElC,0BAA0B;;;CAwN3D,CAAC;AAUF,eAAe,eAAe,CAAC"}

package/dist/types/SegmentedControl/SegmentedControl.d.ts

@@ -3,7 +3,7 @@ import type { TypeSegmentedControlProps, TypeSegmentedControlItemProps } from ".
 declare const SegmentedControl: {
     ({ selectedValue, label, onChange, children, ...rest }: TypeSegmentedControlProps): JSX.Element;
     Item: {
-        ({ value, children, ...rest }: TypeSegmentedControlItemProps): JSX.Element | null;
+        ({ value, children, disabled, ...rest }: TypeSegmentedControlItemProps): JSX.Element | null;
         displayName: string;
     };
 };

package/dist/types/SegmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EACV,yBAAyB,EACzB,6BAA6B,EAC9B,MAAM,yBAAyB,CAAC;AAsDjC,QAAA,MAAM,gBAAgB;4DAMnB,yBAAyB;;uCAzCzB,6BAA6B;;;CA+D/B,CAAC;AAKF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EACV,yBAAyB,EACzB,6BAA6B,EAC9B,MAAM,yBAAyB,CAAC;AAyDjC,QAAA,MAAM,gBAAgB;4DAMnB,yBAAyB;;iDA3CzB,6BAA6B;;;CAiE/B,CAAC;AAKF,eAAe,gBAAgB,CAAC"}

package/dist/types/SegmentedControl/SegmentedControlTypes.d.ts

@@ -4,6 +4,8 @@ export interface TypeSegmentedControlItemProps {
     /** The value of this item. Should be unique among sibling items. */
     value: string;
     children: React.ReactNode;
+    /** Disables user action and applies a disabled style on the component */
+    disabled?: boolean;
 }
 export interface TypeSegmentedControlProps extends TypeContainerProps {
     /** The value of the currently selected item. Should match the value prop of one of the child items */

package/dist/types/SegmentedControl/SegmentedControlTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlTypes.d.ts","sourceRoot":"","sources":["../../../src/SegmentedControl/SegmentedControlTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,6BAA6B;IAC5C,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,sGAAsG;IACtG,aAAa,EAAE,MAAM,CAAC;IAEtB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IAEd,8HAA8H;IAC9H,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE9D,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
+{"version":3,"file":"SegmentedControlTypes.d.ts","sourceRoot":"","sources":["../../../src/SegmentedControl/SegmentedControlTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,6BAA6B;IAC5C,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,sGAAsG;IACtG,aAAa,EAAE,MAAM,CAAC;IAEtB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IAEd,8HAA8H;IAC9H,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE9D,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

package/dist/types/SegmentedControl/styles.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { TypeSegmentedControlProps } from "./SegmentedControlTypes";
+import { TypeSegmentedControlProps, TypeSegmentedControlItemProps } from "./SegmentedControlTypes";
 export declare const SegmentedControlContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Box").TypeBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, Pick<TypeSegmentedControlProps, "disabled">, never>;
-export declare const SegmentedControlItemContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Box").TypeBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const SegmentedControlItemContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Box").TypeBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, Pick<TypeSegmentedControlItemProps, "disabled">, never>;
 interface TypeSegmentedControlState {
     isActive: boolean;
 }

package/dist/types/SegmentedControl/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/SegmentedControl/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,eAAO,MAAM,yBAAyB,oRAarC,CAAC;AAEF,eAAO,MAAM,6BAA6B,2OAgBzC,CAAC;AAEF,UAAU,yBAAyB;IACjC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;8EAsCjC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/SegmentedControl/styles.ts"],"names":[],"mappings":";AAQA,OAAO,EACL,yBAAyB,EACzB,6BAA6B,EAC9B,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,yBAAyB,oRAarC,CAAC;AAEF,eAAO,MAAM,6BAA6B,wRAoBzC,CAAC;AAEF,UAAU,yBAAyB;IACjC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;8EAsCjC,CAAC"}

package/dist/types/utils/system-props/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./system-props";
+export * from "@sproutsocial/seeds-react-system-props";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/utils/system-props/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/system-props/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/system-props/index.ts"],"names":[],"mappings":"AAAA,cAAc,wCAAwC,CAAC"}

package/lib/Drawer/Drawer.js

@@ -113,21 +113,36 @@ var Drawer = function Drawer(_ref3) {
         onClose();
       }
     };
-    documentBody && documentBody.addEventListener("keydown", onEsc, false);
+    documentBody === null || documentBody === void 0 || documentBody.addEventListener("keydown", onEsc, {
+      capture: true
+    });
     if (closeTargets) {
       closeTargets.forEach(function (targetElement) {
-        return targetElement && targetElement.addEventListener("click", bodyClick, false);
+        return targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener("click", bodyClick, {
+          capture: true
+        });
       });
     } else {
-      documentBody.firstElementChild && documentBody.firstElementChild.addEventListener("click", bodyClick, false);
+      var _documentBody$firstEl;
+      (_documentBody$firstEl = documentBody.firstElementChild) === null || _documentBody$firstEl === void 0 || _documentBody$firstEl.addEventListener("click", bodyClick, {
+        capture: true
+      });
     }
     return function () {
+      documentBody === null || documentBody === void 0 || documentBody.removeEventListener("keydown", onEsc, {
+        capture: true
+      });
       if (closeTargets) {
         closeTargets.forEach(function (targetElement) {
-          return targetElement && targetElement.removeEventListener("click", bodyClick, false);
+          return targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener("click", bodyClick, {
+            capture: true
+          });
         });
       } else {
-        documentBody.firstElementChild && documentBody.firstElementChild.removeEventListener("click", bodyClick, false);
+        var _documentBody$firstEl2;
+        (_documentBody$firstEl2 = documentBody.firstElementChild) === null || _documentBody$firstEl2 === void 0 || _documentBody$firstEl2.removeEventListener("click", bodyClick, {
+          capture: true
+        });
       }
     };
   }, [onClose, disableCloseOnClickOutside, closeTargets]);

package/lib/Popout/Popout.js

@@ -155,11 +155,19 @@ export function Popout(_ref) {
           setIsShown(false, e);
         }
       };
-      documentBody.addEventListener("click", bodyClick, false);
-      documentBody.addEventListener("keydown", onEsc, false);
+      documentBody.addEventListener("click", bodyClick, {
+        capture: true
+      });
+      documentBody.addEventListener("keydown", onEsc, {
+        capture: true
+      });
       return function () {
-        documentBody.removeEventListener("click", bodyClick, false);
-        documentBody.removeEventListener("keydown", onEsc, false);
+        documentBody.removeEventListener("click", bodyClick, {
+          capture: true
+        });
+        documentBody.removeEventListener("keydown", onEsc, {
+          capture: true
+        });
       };
     }
   }, [isShown, setIsShown]);

package/lib/SegmentedControl/SegmentedControl.js

@@ -1,4 +1,4 @@
-var _excluded = ["value", "children"],
+var _excluded = ["value", "children", "disabled"],
   _excluded2 = ["selectedValue", "label", "onChange", "children"];
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -19,6 +19,7 @@ var SegmentedControlContext = /*#__PURE__*/React.createContext(null);
 var SegmentedControlItem = function SegmentedControlItem(_ref) {
   var value = _ref.value,
     children = _ref.children,
+    disabled = _ref.disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
   var context = useContext(SegmentedControlContext);
   if (!context) {
@@ -36,14 +37,16 @@ var SegmentedControlItem = function SegmentedControlItem(_ref) {
   return /*#__PURE__*/React.createElement(SegmentedControlItemContainer, _extends({
     "data-segmentedcontrol-isactive": isChecked,
     "data-qa-segmentedcontrol-item": value,
-    "data-qa-segmentedcontrol-ischecked": isChecked === true
+    "data-qa-segmentedcontrol-ischecked": isChecked === true,
+    disabled: disabled
   }, rest), /*#__PURE__*/React.createElement("input", {
     type: "radio",
     id: id,
     name: name,
     value: value,
     checked: isChecked,
-    onChange: onChange
+    onChange: onChange,
+    disabled: disabled
   }), /*#__PURE__*/React.createElement(SegmentedControlLabel, {
     as: "label",
     htmlFor: id,

package/lib/SegmentedControl/styles.js

@@ -17,9 +17,11 @@ export var SegmentedControlContainer = styled(Box).withConfig({
 export var SegmentedControlItemContainer = styled(Box).withConfig({
   displayName: "styles__SegmentedControlItemContainer",
   componentId: "sc-kx0lgh-1"
-})(["flex:1 1 auto;display:flex;cursor:pointer;& + &{margin-left:", ";}&:focus-within label{", "}input{", "}"], function (props) {
+})(["flex:1 1 auto;display:flex;cursor:pointer;& + &{margin-left:", ";}&:focus-within label{", "}input{", "}", ""], function (props) {
   return props.theme.space[100];
-}, focusRing, visuallyHidden);
+}, focusRing, visuallyHidden, function (props) {
+  return props.disabled && disabled;
+});
 export var SegmentedControlLabel = styled(Text).withConfig({
   displayName: "styles__SegmentedControlLabel",
   componentId: "sc-kx0lgh-2"

package/lib/Tooltip/Tooltip.js

@@ -123,10 +123,14 @@ var Tooltip = function Tooltip(_ref2) {
 
     // We only want listeners from the tooltip if its open in the first place
     if (isOpen) {
-      documentBody.addEventListener("keydown", onEsc, false);
+      documentBody.addEventListener("keydown", onEsc, {
+        capture: true
+      });
     }
     return function () {
-      documentBody.removeEventListener("keydown", onEsc, false);
+      documentBody.removeEventListener("keydown", onEsc, {
+        capture: true
+      });
       clearTimeout(timeout);
     };
   }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);

package/lib/utils/system-props/index.js

@@ -1 +1 @@
-export * from "./system-props";
+export * from "@sproutsocial/seeds-react-system-props";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "22.1.1",
+  "version": "22.2.0",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -191,7 +191,7 @@
     "typescript": "^5.1.6",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
+    "webpack-dev-server": "^5.0.4",
     "ws": "^8.13.0"
   },
   "peerDependencies": {

package/commonjs/utils/system-props/gap.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.gap = void 0;
-var _styledSystem = require("styled-system");
-var gap = exports.gap = (0, _styledSystem.system)({
-  gap: {
-    property: "gap",
-    scale: "space"
-  },
-  rowGap: {
-    property: "rowGap",
-    scale: "space"
-  },
-  columnGap: {
-    property: "columnGap",
-    scale: "space"
-  }
-});

package/commonjs/utils/system-props/system-props.js

@@ -1,33 +0,0 @@
-"use strict";
-
-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); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TYPOGRAPHY = exports.POSITION = exports.LAYOUT = exports.GRID = exports.FLEXBOX = exports.COMMON = exports.BORDER = void 0;
-var styles = _interopRequireWildcard(require("styled-system"));
-var _gap = require("./gap");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// eslint-disable-next-line no-restricted-syntax
-
-var typeScale = styles.variant({
-  key: "typography",
-  prop: "typeScale"
-});
-var COMMON = exports.COMMON = styles.compose(styles.color, styles.space, styles.system({
-  cursor: true,
-  whiteSpace: true
-}));
-var BORDER = exports.BORDER = styles.compose(styles.border, styles.borderTop, styles.borderRight, styles.borderBottom, styles.borderLeft, styles.borderWidth, styles.borderStyle, styles.borderColor, styles.borderRadius,
-// After reading the docs, these seem duplicate to styles.border
-// styles.border.borderBottomLeftRadius,
-// styles.border.borderBottomRightRadius,
-// styles.border.borderTopLeftRadius,
-// styles.border.borderTopRightRadius,
-styles.boxShadow);
-var TYPOGRAPHY = exports.TYPOGRAPHY = styles.compose(typeScale, styles.fontFamily, styles.fontStyle, styles.fontWeight, styles.lineHeight, styles.textAlign);
-var LAYOUT = exports.LAYOUT = styles.compose(styles.display, styles.size, styles.width, styles.height, styles.minWidth, styles.minHeight, styles.maxWidth, styles.maxHeight, styles.overflow, styles.verticalAlign);
-var POSITION = exports.POSITION = styles.compose(styles.position, styles.zIndex, styles.top, styles.right, styles.bottom, styles.left);
-var FLEXBOX = exports.FLEXBOX = styles.compose(styles.flexBasis, styles.flexDirection, styles.flexWrap, styles.alignContent, styles.alignItems, styles.justifyContent, styles.justifyItems, styles.order, styles.flex, styles.flexShrink, styles.flexGrow, styles.justifySelf, styles.alignSelf, _gap.gap);
-var GRID = exports.GRID = styles.grid;

package/dist/types/utils/system-props/gap.d.ts

@@ -1,2 +0,0 @@
-export declare const gap: import("styled-system").styleFn;
-//# sourceMappingURL=gap.d.ts.map

package/dist/types/utils/system-props/gap.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"gap.d.ts","sourceRoot":"","sources":["../../../../src/utils/system-props/gap.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,iCAad,CAAC"}

package/dist/types/utils/system-props/system-props.d.ts

@@ -1,9 +0,0 @@
-import * as styles from "styled-system";
-export declare const COMMON: styles.styleFn;
-export declare const BORDER: styles.styleFn;
-export declare const TYPOGRAPHY: styles.styleFn;
-export declare const LAYOUT: styles.styleFn;
-export declare const POSITION: styles.styleFn;
-export declare const FLEXBOX: styles.styleFn;
-export declare const GRID: styles.styleFn;
-//# sourceMappingURL=system-props.d.ts.map

package/dist/types/utils/system-props/system-props.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"system-props.d.ts","sourceRoot":"","sources":["../../../../src/utils/system-props/system-props.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAQxC,eAAO,MAAM,MAAM,gBAOlB,CAAC;AAEF,eAAO,MAAM,MAAM,gBAgBlB,CAAC;AAEF,eAAO,MAAM,UAAU,gBAOtB,CAAC;AAEF,eAAO,MAAM,MAAM,gBAWlB,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAOpB,CAAC;AAEF,eAAO,MAAM,OAAO,gBAenB,CAAC;AAEF,eAAO,MAAM,IAAI,gBAAc,CAAC"}

package/lib/utils/system-props/gap.js

@@ -1,15 +0,0 @@
-import { system } from "styled-system";
-export var gap = system({
-  gap: {
-    property: "gap",
-    scale: "space"
-  },
-  rowGap: {
-    property: "rowGap",
-    scale: "space"
-  },
-  columnGap: {
-    property: "columnGap",
-    scale: "space"
-  }
-});

package/lib/utils/system-props/system-props.js

@@ -1,23 +0,0 @@
-// eslint-disable-next-line no-restricted-syntax
-import * as styles from "styled-system";
-import { gap } from "./gap";
-var typeScale = styles.variant({
-  key: "typography",
-  prop: "typeScale"
-});
-export var COMMON = styles.compose(styles.color, styles.space, styles.system({
-  cursor: true,
-  whiteSpace: true
-}));
-export var BORDER = styles.compose(styles.border, styles.borderTop, styles.borderRight, styles.borderBottom, styles.borderLeft, styles.borderWidth, styles.borderStyle, styles.borderColor, styles.borderRadius,
-// After reading the docs, these seem duplicate to styles.border
-// styles.border.borderBottomLeftRadius,
-// styles.border.borderBottomRightRadius,
-// styles.border.borderTopLeftRadius,
-// styles.border.borderTopRightRadius,
-styles.boxShadow);
-export var TYPOGRAPHY = styles.compose(typeScale, styles.fontFamily, styles.fontStyle, styles.fontWeight, styles.lineHeight, styles.textAlign);
-export var LAYOUT = styles.compose(styles.display, styles.size, styles.width, styles.height, styles.minWidth, styles.minHeight, styles.maxWidth, styles.maxHeight, styles.overflow, styles.verticalAlign);
-export var POSITION = styles.compose(styles.position, styles.zIndex, styles.top, styles.right, styles.bottom, styles.left);
-export var FLEXBOX = styles.compose(styles.flexBasis, styles.flexDirection, styles.flexWrap, styles.alignContent, styles.alignItems, styles.justifyContent, styles.justifyItems, styles.order, styles.flex, styles.flexShrink, styles.flexGrow, styles.justifySelf, styles.alignSelf, gap);
-export var GRID = styles.grid;