@sproutsocial/racine 13.8.0 → 14.0.0

package/lib/Checkbox/index.js

@@ -1,143 +1,4 @@
-var _excluded = ["id", "value", "name", "label", "labelProps", "checked", "disabled", "indeterminate", "onChange", "ariaLabel", "appearance", "qa", "tabIndex", "inputProps"];
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-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 _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"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import * as React from 'react';
-import Container, { CheckboxBox, CheckIcon, PillInput, InputWrapper, LabelText, CheckboxContainer } from "./styles";
-var Checkbox = /*#__PURE__*/function (_React$Component) {
-  _inherits(Checkbox, _React$Component);
-  var _super = _createSuper(Checkbox);
-  function Checkbox() {
-    var _this;
-    _classCallCheck(this, Checkbox);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "handleChange", function (event) {
-      _this.props.onChange(event);
-    });
-    return _this;
-  }
-  _createClass(Checkbox, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {
-        this.el.indeterminate = !!this.props.indeterminate;
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.el) {
-        this.el.indeterminate = !!this.props.indeterminate;
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        id = _this$props.id,
-        value = _this$props.value,
-        name = _this$props.name,
-        label = _this$props.label,
-        labelProps = _this$props.labelProps,
-        checked = _this$props.checked,
-        disabled = _this$props.disabled,
-        indeterminate = _this$props.indeterminate,
-        onChange = _this$props.onChange,
-        ariaLabel = _this$props.ariaLabel,
-        _this$props$appearanc = _this$props.appearance,
-        appearance = _this$props$appearanc === void 0 ? 'default' : _this$props$appearanc,
-        _this$props$qa = _this$props.qa,
-        qa = _this$props$qa === void 0 ? {} : _this$props$qa,
-        tabIndex = _this$props.tabIndex,
-        _this$props$inputProp = _this$props.inputProps,
-        inputProps = _this$props$inputProp === void 0 ? {} : _this$props$inputProp,
-        rest = _objectWithoutProperties(_this$props, _excluded);
-      var isPill = appearance === 'pill';
-
-      // TODO: Refactor pill checkboxes to use fewer elements for performance gains
-      if (!isPill) {
-        return (
-          /*#__PURE__*/
-          // $FlowIssue - upgrade v0.112.0
-          React.createElement(CheckboxContainer, _extends({
-            as: label && 'label',
-            disabled: disabled,
-            indeterminate: indeterminate,
-            checked: checked
-          }, rest), /*#__PURE__*/React.createElement("input", _extends({
-            type: "checkbox",
-            id: id,
-            "aria-label": ariaLabel,
-            value: value,
-            name: name,
-            checked: checked,
-            ref: function ref(el) {
-              return _this2.el = el;
-            },
-            disabled: disabled,
-            onChange: this.handleChange,
-            "data-qa-checkbox": id,
-            "data-qa-checkbox-ischecked": indeterminate ? 'indeterminate' : checked === true,
-            "data-qa-checkbox-isdisabled": disabled === true,
-            tabIndex: tabIndex
-          }, qa, inputProps)), label && /*#__PURE__*/React.createElement(LabelText, _extends({}, labelProps, {
-            disabled: disabled
-          }), label))
-        );
-      }
-      return (
-        /*#__PURE__*/
-        // $FlowIssue - upgrade v0.112.0
-        React.createElement(Container, _extends({
-          as: label && 'label'
-        }, rest), /*#__PURE__*/React.createElement(InputWrapper, {
-          appearance: appearance
-        }, /*#__PURE__*/React.createElement(PillInput, _extends({
-          type: "checkbox",
-          id: id,
-          "aria-label": ariaLabel,
-          value: value,
-          name: name,
-          checked: checked,
-          ref: function ref(el) {
-            return _this2.el = el;
-          },
-          disabled: disabled,
-          onChange: this.handleChange,
-          "data-qa-checkbox": id,
-          "data-qa-checkbox-ischecked": indeterminate ? 'indeterminate' : checked === true,
-          "data-qa-checkbox-isdisabled": disabled === true,
-          tabIndex: tabIndex
-        }, qa, inputProps)), /*#__PURE__*/React.createElement(CheckboxBox, null, /*#__PURE__*/React.createElement(CheckIcon, {
-          name: indeterminate ? 'minus' : 'check',
-          size: "mini",
-          fixedWidth: true
-        }))))
-      );
-    }
-  }]);
-  return Checkbox;
-}(React.Component);
-_defineProperty(Checkbox, "defaultProps", {
-  indeterminate: false,
-  disabled: false
-});
-export { Checkbox as default };
+import Checkbox from "./Checkbox";
+export default Checkbox;
+export { Checkbox };
+export * from "./CheckboxTypes";

package/lib/Checkbox/styles.js

@@ -8,12 +8,12 @@ import Icon from "../Icon";
 import Text from "../Text";
 var Container = styled.span.withConfig({
   displayName: "styles__Container",
-  componentId: "sc-59uw8o-0"
+  componentId: "sc-1hcgibh-0"
 })(["display:inline-flex;align-items:center;box-sizing:border-box;", ""], COMMON);
 Container.displayName = 'Checkbox';
 export var InputWrapper = styled(Box).withConfig({
   displayName: "styles__InputWrapper",
-  componentId: "sc-59uw8o-1"
+  componentId: "sc-1hcgibh-1"
 })(["box-sizing:border-box;position:relative;width:", ";height:", ";display:inline-flex;align-items:center;justify-content:center;", ""], function (props) {
   return props.theme.space[400];
 }, function (props) {
@@ -28,7 +28,7 @@ export var InputWrapper = styled(Box).withConfig({
 InputWrapper.displayName = 'InputWrapper';
 export var CheckboxBox = styled.div.withConfig({
   displayName: "styles__CheckboxBox",
-  componentId: "sc-59uw8o-2"
+  componentId: "sc-1hcgibh-2"
 })(["box-sizing:border-box;position:relative;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:border-color ", " ", ",background-color ", " ", ";pointer-events:none;"], function (props) {
   return props.theme.space[400];
 }, function (props) {
@@ -49,7 +49,7 @@ export var CheckboxBox = styled.div.withConfig({
 CheckboxBox.displayName = 'CheckboxBox';
 export var CheckIcon = styled(Icon).withConfig({
   displayName: "styles__CheckIcon",
-  componentId: "sc-59uw8o-3"
+  componentId: "sc-1hcgibh-3"
 })(["position:absolute;display:inline-flex;align-items:center;justify-content:center;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:all ", " ", ";&,& .Icon-svg{width:10px;height:10px;line-height:10px;}"], function (props) {
   return props.theme.duration.fast;
 }, function (props) {
@@ -58,13 +58,11 @@ export var CheckIcon = styled(Icon).withConfig({
 CheckIcon.displayName = 'CheckIcon';
 export var PillInput = styled.input.withConfig({
   displayName: "styles__PillInput",
-  componentId: "sc-59uw8o-4"
+  componentId: "sc-1hcgibh-4"
 })(["position:absolute;top:0;left:0;width:100%;height:100%;margin:0;appearance:none;cursor:", ";border-radius:4px;&::-ms-check{display:none;}&:focus{", "}", " ", " ", ""], function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 }, focusRing, function (props) {
-  return !props.checked && css(["&:hover,&:focus{~ ", " ", "{opacity:", ";color:", ";}}"], CheckboxBox, CheckIcon, function (props) {
-    return props.disabled ? 0 : 1;
-  }, props.theme.colors.form.border.base);
+  return !props.checked && css(["&:hover,&:focus{~ ", " ", "{opacity:", ";color:", ";}}"], CheckboxBox, CheckIcon, props.disabled ? 0 : 1, props.theme.colors.form.border.base);
 }, function (props) {
   return props.checked && css(["~ ", "{border-color:", ";background-color:", ";}~ ", " ", "{opacity:1;color:", ";}"], CheckboxBox, props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, CheckboxBox, CheckIcon, props.theme.colors.icon.inverse);
 }, function (props) {
@@ -73,7 +71,7 @@ export var PillInput = styled.input.withConfig({
 PillInput.displayName = 'PillInput';
 export var LabelText = styled(Text).withConfig({
   displayName: "styles__LabelText",
-  componentId: "sc-59uw8o-5"
+  componentId: "sc-1hcgibh-5"
 })(["margin-left:", ";font-size:", ";line-height:1;cursor:", ";color:", ";", ""], function (props) {
   return props.theme.space[300];
 }, function (props) {
@@ -118,7 +116,7 @@ var getIcon = function getIcon(type, color) {
 };
 export var CheckboxContainer = styled.span.withConfig({
   displayName: "styles__CheckboxContainer",
-  componentId: "sc-59uw8o-6"
+  componentId: "sc-1hcgibh-6"
 })(function (props) {
   return css(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url('data:image/svg+xml;utf8,", "');opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, renderToStaticMarkup(getIcon(props.indeterminate ? 'indeterminate' : 'check', props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base)), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && css(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? 'not-allowed' : 'pointer', !props.indeterminate && css(["border-color:", " !important;background-color:", ";"], props.theme.colors.neutral[300], props.theme.colors.form.background.base), props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.indeterminate && props.checked && css(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), focusRing, COMMON);
 });

package/lib/Collapsible/Collapsible.flow.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/Collapsible/Collapsible.js

@@ -0,0 +1,128 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children"],
+  _excluded2 = ["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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from 'react';
+import { useState, useRef, useContext, useEffect } from 'react';
+import useMeasure from 'use-measure';
+import Box from "../Box";
+import { CollapsingBox } from "./styles";
+var idCounter = 0;
+var CollapsibleContext = /*#__PURE__*/React.createContext({});
+var Collapsible = function Collapsible(_ref) {
+  var children = _ref.children,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 0 : _ref$offset,
+    _ref$collapsedHeight = _ref.collapsedHeight,
+    collapsedHeight = _ref$collapsedHeight === void 0 ? 0 : _ref$collapsedHeight,
+    openHeight = _ref.openHeight;
+  var _useState = useState("Racine-collapsible-".concat(idCounter++)),
+    _useState2 = _slicedToArray(_useState, 1),
+    id = _useState2[0];
+  return /*#__PURE__*/React.createElement(CollapsibleContext.Provider, {
+    value: {
+      isOpen: isOpen,
+      id: id,
+      offset: offset,
+      collapsedHeight: collapsedHeight,
+      openHeight: openHeight
+    }
+  }, children);
+};
+var determineMaxHeight = function determineMaxHeight(isHidden, openHeight, computedHeight) {
+  // If isHidden is undefined this is the first render.  Return undefined so the max-height prop is not added
+  // This is a hack to prevent css from animating if it begins in the open state
+  // css animates when attribute values change (IE from 0 to another number)
+  // css does not animate when simply adding an attribute to an HTML element
+  if (isHidden === undefined) return undefined;
+  // If the user has defined an explicit open height, return that as the max height
+  if (openHeight) return openHeight;
+  // Otherwise, fallback to the computed height
+  return computedHeight;
+};
+var Trigger = function Trigger(_ref2) {
+  var children = _ref2.children,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useContext = useContext(CollapsibleContext),
+    isOpen = _useContext.isOpen,
+    id = _useContext.id;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, _objectSpread({
+    'aria-controls': id,
+    'aria-expanded': !!isOpen
+  }, rest)));
+};
+Trigger.displayName = 'Collapsible.Trigger';
+var Panel = function Panel(_ref3) {
+  var children = _ref3.children,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  var _useContext2 = useContext(CollapsibleContext),
+    isOpen = _useContext2.isOpen,
+    id = _useContext2.id,
+    _useContext2$offset = _useContext2.offset,
+    offset = _useContext2$offset === void 0 ? 0 : _useContext2$offset,
+    collapsedHeight = _useContext2.collapsedHeight,
+    openHeight = _useContext2.openHeight;
+  var ref = useRef(null);
+  var measurement = useMeasure(ref);
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isHidden = _useState4[0],
+    setIsHidden = _useState4[1];
+  var maxHeight = determineMaxHeight(isHidden, openHeight, measurement.height + offset);
+
+  /* We use the "hidden" attribute to remove the contents of the panel from the tab order of the page, but it interferes with the animation. This logic sets a slight timeout on setting the prop so that the animation has time to complete before the attribute is set. */
+  useEffect(function () {
+    if (!isOpen) {
+      var timeoutID = setTimeout(function () {
+        return setIsHidden(!isOpen);
+      }, 300);
+      return function () {
+        return clearTimeout(timeoutID);
+      };
+    } else {
+      // Similar to the close animation, we need to delay setting hidden to run slightly async.
+      // An issue occurs with the initial render isHidden logic that causes the animation to occur sporadically.
+      // using this 0 second timeout just allows this component to initially render with an undefined max height,
+      // Then go directly from undefined to the full max height, without a brief 0 value that triggers an animation
+      var _timeoutID = setTimeout(function () {
+        return setIsHidden(!isOpen);
+      }, 0);
+      return function () {
+        return clearTimeout(_timeoutID);
+      };
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/React.createElement(CollapsingBox, _extends({
+    hasShadow: Boolean(collapsedHeight || openHeight && openHeight > 0),
+    scrollable: isOpen,
+    maxHeight: isOpen ? maxHeight : collapsedHeight,
+    minHeight: collapsedHeight,
+    "data-qa-collapsible": "",
+    "data-qa-collapsible-isopen": isOpen === true
+  }, rest), /*#__PURE__*/React.createElement(Box, {
+    width: "100%",
+    hidden: isHidden && collapsedHeight === 0,
+    "aria-hidden": !isOpen,
+    id: id,
+    ref: ref
+  }, children));
+};
+Panel.displayName = 'Collapsible.Panel';
+Collapsible.Trigger = Trigger;
+Collapsible.Panel = Panel;
+export default Collapsible;

package/lib/Collapsible/CollapsibleTypes.js

@@ -0,0 +1 @@
+export {};

package/lib/Collapsible/index.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+export * from "./Collapsible.flow";

package/lib/Collapsible/index.js

@@ -1,129 +1,4 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["children"],
-  _excluded2 = ["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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import * as React from 'react';
-import { useState, useRef, useContext, useEffect } from 'react';
-import useMeasure from 'use-measure';
-import Box from "../Box";
-import { CollapsingBox } from "./styles";
-var idCounter = 0;
-var CollapsibleContext = /*#__PURE__*/React.createContext({});
-var Collapsible = function Collapsible(_ref) {
-  var children = _ref.children,
-    _ref$isOpen = _ref.isOpen,
-    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
-    _ref$offset = _ref.offset,
-    offset = _ref$offset === void 0 ? 0 : _ref$offset,
-    _ref$collapsedHeight = _ref.collapsedHeight,
-    collapsedHeight = _ref$collapsedHeight === void 0 ? 0 : _ref$collapsedHeight,
-    openHeight = _ref.openHeight;
-  var _useState = useState("Racine-collapsible-".concat(idCounter++)),
-    _useState2 = _slicedToArray(_useState, 1),
-    id = _useState2[0];
-  return /*#__PURE__*/React.createElement(CollapsibleContext.Provider, {
-    value: {
-      isOpen: isOpen,
-      id: id,
-      offset: offset,
-      collapsedHeight: collapsedHeight,
-      openHeight: openHeight
-    }
-  }, children);
-};
-var determineMaxHeight = function determineMaxHeight(isHidden, openHeight, computedHeight) {
-  // If isHidden is undefined this is the first render.  Return undefined so the max-height prop is not added
-  // This is a hack to prevent css from animating if it begins in the open state
-  // css animates when attribute values change (IE from 0 to another number)
-  // css does not animate when simply adding an attribute to an HTML element
-  if (isHidden === undefined) return undefined;
-
-  // If the user has defined an explicit open height, return that as the max height
-  if (openHeight) return openHeight;
-
-  // Otherwise, fallback to the computed height
-  return computedHeight;
-};
-var Trigger = function Trigger(_ref2) {
-  var children = _ref2.children,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var _useContext = useContext(CollapsibleContext),
-    isOpen = _useContext.isOpen,
-    id = _useContext.id;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, _objectSpread({
-    'aria-controls': id,
-    'aria-expanded': !!isOpen
-  }, rest)));
-};
-var Panel = function Panel(_ref3) {
-  var children = _ref3.children,
-    rest = _objectWithoutProperties(_ref3, _excluded2);
-  var _useContext2 = useContext(CollapsibleContext),
-    isOpen = _useContext2.isOpen,
-    id = _useContext2.id,
-    offset = _useContext2.offset,
-    collapsedHeight = _useContext2.collapsedHeight,
-    openHeight = _useContext2.openHeight;
-  var ref = useRef();
-  var measurement = useMeasure(ref);
-  var _useState3 = useState(undefined),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isHidden = _useState4[0],
-    setIsHidden = _useState4[1];
-  var maxHeight = determineMaxHeight(isHidden, openHeight, measurement.height + offset);
-
-  /* We use the "hidden" attribute to remove the contents of the panel from the tab order of the page, but it interferes with the animation. This logic sets a slight timeout on setting the prop so that the animation has time to complete before the attribute is set. */
-  useEffect(function () {
-    if (!isOpen) {
-      var timeoutID = setTimeout(function () {
-        return setIsHidden(!isOpen);
-      }, 300);
-      return function () {
-        return clearTimeout(timeoutID);
-      };
-    } else {
-      // Similar to the close animation, we need to delay setting hidden to run slightly async.
-      // An issue occurs with the initial render isHidden logic that causes the animation to occur sporadically.
-      // using this 0 second timeout just allows this component to initially render with an undefined max height,
-      // Then go directly from undefined to the full max height, without a brief 0 value that triggers an animation
-      var _timeoutID = setTimeout(function () {
-        return setIsHidden(!isOpen);
-      }, 0);
-      return function () {
-        return clearTimeout(_timeoutID);
-      };
-    }
-  }, [isOpen]);
-  return /*#__PURE__*/React.createElement(CollapsingBox, _extends({
-    hasShadow: collapsedHeight || openHeight > 0,
-    scrollable: isOpen,
-    maxHeight: isOpen ? maxHeight : collapsedHeight,
-    minHeight: collapsedHeight,
-    "data-qa-collapsible": "",
-    "data-qa-collapsible-isopen": isOpen === true
-  }, rest), /*#__PURE__*/React.createElement(Box, {
-    width: "100%",
-    hidden: isHidden && collapsedHeight === 0,
-    "aria-hidden": !isOpen,
-    id: id,
-    ref: ref
-  }, children));
-};
-Collapsible.Trigger = Trigger;
-Collapsible.Panel = Panel;
-Collapsible.Trigger.displayName = 'Collapsible.Trigger';
-Collapsible.Panel.displayName = 'Collapsible.Panel';
-export default Collapsible;
+import Collapsible from "./Collapsible";
+export default Collapsible;
+export { Collapsible };
+export * from "./CollapsibleTypes";

package/lib/Collapsible/styles.js

@@ -2,14 +2,13 @@ import styled from 'styled-components';
 import Box from "../Box";
 export var CollapsingBox = styled(Box).withConfig({
   displayName: "styles__CollapsingBox",
-  componentId: "sc-1xvfbl7-0"
+  componentId: "sc-1wvva09-0"
 })(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;", ""], function (p) {
   return p.theme.duration.medium;
 }, function (p) {
   return p.theme.easing.ease_inout;
 }, function (_ref) {
   var hasShadow = _ref.hasShadow,
-    theme = _ref.theme,
     scrollable = _ref.scrollable;
   return hasShadow ? "background:  /* Shadow covers */ linear-gradient(\n        transparent 30%,\n        rgba(255, 255, 255, 0)\n      ),\n      linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,\n      /* Shadows */\n        radial-gradient(\n          farthest-side at 50% 0,\n          rgb(39 51 51 / 5%),\n          rgba(0, 0, 0, 0)\n        ),\n      radial-gradient(\n          farthest-side at 50% 100%,\n          rgb(39 51 51 / 5%),\n          rgba(0, 0, 0, 0)\n        )\n        0 100%;\n    background-repeat: no-repeat;\n    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;\n    background-attachment: local, local, scroll, scroll;\n    ".concat(scrollable ? "overflow: auto" : "overflow: hidden", ";") : '';
 });

package/lib/DatePicker/DateRangePicker/DateRangePicker.flow.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/DatePicker/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,24 @@
+var _excluded = ["startDate", "endDate", "onDatesChange"];
+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 _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 React, { Fragment } from 'react';
+import DayPickerRangeController from 'react-dates/lib/components/DayPickerRangeController';
+import { ReactDatesCssOverrides } from "../styles";
+import { commonDatePickerProps } from "../common";
+var DateRangePicker = function DateRangePicker(_ref) {
+  var _ref$startDate = _ref.startDate,
+    startDate = _ref$startDate === void 0 ? null : _ref$startDate,
+    _ref$endDate = _ref.endDate,
+    endDate = _ref$endDate === void 0 ? null : _ref$endDate,
+    onDatesChange = _ref.onDatesChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ReactDatesCssOverrides, null), /*#__PURE__*/React.createElement(DayPickerRangeController, _extends({}, commonDatePickerProps, {
+    startDate: startDate,
+    endDate: endDate,
+    onDatesChange: onDatesChange,
+    numberOfMonths: 2,
+    initialVisibleMonth: null
+  }, rest)));
+};
+export default DateRangePicker;

package/lib/DatePicker/DateRangePicker/DateRangePickerTypes.js

@@ -0,0 +1 @@
+export {};

package/lib/DatePicker/DateRangePicker/StatefulDateRangePicker.flow.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/DatePicker/DateRangePicker/StatefulDateRangePicker.js

@@ -0,0 +1,50 @@
+var _excluded = ["startDate", "endDate", "onDatesChange", "onFocusChange"];
+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(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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 React, { useState } from 'react';
+import { START_DATE } from 'react-dates/constants';
+import DateRangePicker from "./DateRangePicker";
+export var StatefulDateRangePicker = function StatefulDateRangePicker(_ref) {
+  var startDate = _ref.startDate,
+    endDate = _ref.endDate,
+    onDatesChange = _ref.onDatesChange,
+    onFocusChange = _ref.onFocusChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState({
+      startDate: startDate,
+      endDate: endDate
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    dates = _useState2[0],
+    setDate = _useState2[1];
+  var _React$useState = React.useState(START_DATE),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedInput = _React$useState2[0],
+    setFocusedInput = _React$useState2[1];
+  var handleDatesChange = function handleDatesChange(nextDates) {
+    onDatesChange && onDatesChange(nextDates);
+    setDate(nextDates);
+  };
+  var handleFocusChange = function handleFocusChange(nextFocusedInput) {
+    onFocusChange && onFocusChange(nextFocusedInput);
+    setFocusedInput(
+    // null means that we've selected an end date. we want to go back to START_DATE
+    // so the user can modify their selection. if focusedInput === null then it won't
+    // respond to click or keyboard events
+    nextFocusedInput === null ? START_DATE : nextFocusedInput);
+  };
+  return /*#__PURE__*/React.createElement(DateRangePicker, _extends({
+    startDate: dates.startDate,
+    endDate: dates.endDate,
+    focusedInput: focusedInput,
+    onDatesChange: handleDatesChange,
+    onFocusChange: handleFocusChange
+  }, rest));
+};

package/lib/DatePicker/DateRangePicker/index.flow.js

@@ -0,0 +1,2 @@
+export * from "./DateRangePicker.flow";
+export * from "./StatefulDateRangePicker.flow";

package/lib/DatePicker/DateRangePicker/index.js

@@ -0,0 +1,5 @@
+import DateRangePicker from "./DateRangePicker";
+export default DateRangePicker;
+export { DateRangePicker };
+export * from "./StatefulDateRangePicker";
+export * from "./DateRangePickerTypes";

package/lib/DatePicker/SingleDatePicker/SingleDatePicker.flow.js

@@ -0,0 +1 @@
+import * as React from 'react';