baseui 12.2.0 → 13.0.0

package/select/types.d.ts

@@ -2,10 +2,10 @@ import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { STATE_CHANGE_TYPE, SIZE, TYPE } from './constants';
 import type { OnItemSelectFn } from '../menu';
-export declare type ChangeAction = keyof typeof STATE_CHANGE_TYPE;
-export declare type Size = keyof typeof SIZE;
-export declare type Type = keyof typeof TYPE;
-export declare type Option = Readonly<{
+export type ChangeAction = keyof typeof STATE_CHANGE_TYPE;
+export type Size = keyof typeof SIZE;
+export type Type = keyof typeof TYPE;
+export type Option = Readonly<{
     id?: string | number;
     label?: React.ReactNode;
     disabled?: boolean;
@@ -14,18 +14,18 @@ export declare type Option = Readonly<{
     __optgroup?: string;
     [x: string]: any;
 }>;
-export declare type Value = ReadonlyArray<Option>;
-export declare type Optgroups = {
+export type Value = ReadonlyArray<Option>;
+export type Optgroups = {
     __ungrouped?: Value;
     [x: string]: Value;
 };
-export declare type Options = Value | undefined | null | Optgroups;
-export declare type OnChangeParams = {
+export type Options = Value | undefined | null | Optgroups;
+export type OnChangeParams = {
     value: Value;
     option: Option | undefined | null;
     type: ChangeAction;
 };
-export declare type SelectOverrides = {
+export type SelectOverrides = {
     Root?: Override;
     ControlContainer?: Override;
     Placeholder?: Override;
@@ -50,7 +50,7 @@ export declare type SelectOverrides = {
     StatefulMenu?: Override;
     StyledClearIcon?: Override;
 };
-export declare type OverridesDropdown = {
+export type OverridesDropdown = {
     DropdownContainer?: Override;
     Dropdown?: Override;
     DropdownOption?: Override;
@@ -58,7 +58,7 @@ export declare type OverridesDropdown = {
     OptionContent?: Override;
     StatefulMenu?: Override;
 };
-export declare type ImperativeMethods = {
+export type ImperativeMethods = {
     setDropdownOpen: (a: boolean) => unknown;
     setInputValue: (a: string) => void;
     setInputFocus: () => void;
@@ -66,10 +66,10 @@ export declare type ImperativeMethods = {
     focus: () => void;
     blur: () => void;
 };
-export declare type ControlRef = {
+export type ControlRef = {
     current: ImperativeMethods | null;
 };
-export declare type SelectProps = {
+export type SelectProps = {
     'aria-label'?: string | null;
     'aria-describedby'?: string | null;
     'aria-errormessage'?: string | null;
@@ -182,18 +182,18 @@ export declare type SelectProps = {
     /** Where to mount the popover */
     mountNode?: HTMLElement;
 };
-export declare type SelectState = {
+export type SelectState = {
     activeDescendant: string | undefined | null;
     inputValue: string;
     isFocused: boolean;
     isOpen: boolean;
     isPseudoFocused: boolean;
 };
-export declare type State = {
+export type State = {
     value: Value;
 };
-export declare type StateReducer = (stateType: string, nextState: State, currentState: State) => State;
-export declare type StatefulContainerProps = {
+export type StateReducer = (stateType: string, nextState: State, currentState: State) => State;
+export type StatefulContainerProps = {
     overrides: SelectOverrides;
     children: (a: SelectProps) => React.ReactNode;
     initialState: State;
@@ -206,7 +206,7 @@ export declare type StatefulSelectProps = Omit<SelectProps, 'onChange' | 'overri
     stateReducer?: StateReducer;
     onChange?: (params: OnChangeParams) => unknown;
 };
-export declare type DropdownProps = {
+export type DropdownProps = {
     error: boolean;
     getOptionLabel: (a: {
         option: Option;
@@ -236,20 +236,20 @@ export declare type DropdownProps = {
     width: number | undefined | null;
     keyboardControlNode?: React.Ref<HTMLElement>;
 };
-export declare type AutosizeInputOverrides = {
+export type AutosizeInputOverrides = {
     Input?: Override;
 };
-export declare type AutosizeInputProps = {
+export type AutosizeInputProps = {
     value: string;
     defaultValue?: string;
     inputRef: (ref: any) => any;
     overrides: AutosizeInputOverrides;
     $size: Size;
 };
-export declare type AutosizeInputState = {
+export type AutosizeInputState = {
     inputWidth: number;
 };
-export declare type SharedStylePropsArg = {
+export type SharedStylePropsArg = {
     $clearable?: boolean;
     $creatable?: boolean;
     $disabled?: boolean;

package/select/utils/default-filter-options.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { Option, Value } from '../types';
-declare type defaultProps = {
+type defaultProps = {
     filterOption: ((option: Option, filterValue: string) => boolean) | undefined | null;
     ignoreCase: boolean;
     labelKey: string;

package/select/utils/default-filter-options.js

@@ -17,9 +17,11 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
+// @ts-ignore
 var escapeRegExp = function escapeRegExp(str) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-};
+}; // @ts-ignore
+
 
 var isValid = function isValid(value) {
   return typeof value !== 'undefined' && value !== null && value !== '';

package/select/utils/index.js

@@ -21,7 +21,8 @@ LICENSE file in the root directory of this source tree.
 function groupedOptionsToArray(groupedOptions) {
   return Object.keys(groupedOptions).reduce(function (arr, optgroup) {
     var optgroupOptions = groupedOptions[optgroup];
-    return arr.concat(optgroupOptions.map(function (option) {
+    return arr.concat( // @ts-ignore
+    optgroupOptions.map(function (option) {
       return _objectSpread(_objectSpread({}, option), {}, {
         __optgroup: optgroup
       });
@@ -46,6 +47,7 @@ var expandValue = function expandValue(value, props) {
   var normalizedOptions = normalizeOptions(props.options);
 
   for (var i = 0; i < normalizedOptions.length; i++) {
+    // @ts-ignore
     if (String(normalizedOptions[i][props.valueKey]) === String(value[props.valueKey])) {
       return normalizedOptions[i];
     }

package/sheet/action-button.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function ActionButton({ children, size, ...restProps }: {
+    [x: string]: any;
+    children: any;
+    size: any;
+}): JSX.Element;

package/sheet/action-button.js

@@ -0,0 +1,63 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionButton = ActionButton;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _button = require("../button");
+
+var _excluded = ["children", "size"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ActionButton(_ref) {
+  var children = _ref.children,
+      size = _ref.size,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var iconButtonStyle = {
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0
+  }; // compact buttons need a pseudo-element to acheive a 48px tap target
+
+  var compactButtonStyle = {
+    position: 'relative',
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      height: '48px',
+      width: '48px'
+    }
+  };
+  return /*#__PURE__*/React.createElement(_button.Button, _extends({
+    kind: _button.KIND.tertiary,
+    shape: _button.SHAPE.square,
+    size: size,
+    overrides: {
+      BaseButton: {
+        style: _objectSpread(_objectSpread({}, size === _button.SIZE.compact ? compactButtonStyle : {}), typeof children !== 'string' ? iconButtonStyle : {})
+      }
+    }
+  }, restProps), children);
+}

package/sheet/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Sheet } from './sheet';
+export * from './styled-components';
+export * from './types';

package/sheet/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Sheet: true
+};
+Object.defineProperty(exports, "Sheet", {
+  enumerable: true,
+  get: function get() {
+    return _sheet.default;
+  }
+});
+
+var _sheet = _interopRequireDefault(require("./sheet"));
+
+var _styledComponents = require("./styled-components");
+
+Object.keys(_styledComponents).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _styledComponents[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _styledComponents[key];
+    }
+  });
+});
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/sheet/index.js.flow

@@ -0,0 +1,76 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import * as React from 'react';
+import type { OverrideT } from '../helpers/overrides.js';
+import type { ProgressBarPropsT } from '../progress-bar';
+import { type StyletronComponent } from 'styletron-react';
+
+export type SheetOverridesT = {
+  Root?: OverrideT,
+  TopContainer?: OverrideT,
+  Header?: OverrideT,
+  Grabber?: OverrideT,
+  HeaderGrid?: OverrideT,
+  ActionButton?: OverrideT,
+  EmptyDiv?: OverrideT,
+  HeaderTextContainer?: OverrideT,
+  Title?: OverrideT,
+  Description?: OverrideT,
+  Divider?: OverrideT,
+  BottomContainer?: OverrideT,
+  Body?: OverrideT,
+};
+
+export type IconButtonT = {
+  renderIcon?: React.AbstractComponent<{| size: number |}>,
+  onClick: () => void,
+  label: string,
+};
+
+export type SheetPropsT = {
+  draggable?: boolean,
+  topPosition?: string,
+  title?: string,
+  description?: string,
+  content?: React.Node,
+  progressBar?: ProgressBarPropsT,
+  leadingAction?: IconButtonT,
+  trailingAction?: IconButtonT,
+  children?: React.Node,
+  overrides?: SheetOverridesT,
+};
+
+declare export var StyledRoot: StyletronComponent<'div', { $draggable: boolean }>;
+declare export var StyledTopContainer: StyletronComponent<
+  'div',
+  { $draggable: boolean, $topPosition: boolean }
+>;
+declare export var StyledBottomContainer: StyletronComponent<
+  'div',
+  { $draggable: boolean, $topPosition: string }
+>;
+declare export var StyledHeader: StyletronComponent<'div', {}>;
+declare export var StyledHeaderGrid: StyletronComponent<
+  'div',
+  { $hasLeadingAction: boolean, $hasTrailingAction: boolean }
+>;
+declare export var StyledHeaderTextContainer: StyletronComponent<
+  'div',
+  { $draggable: boolean, $hasTitle: boolean, $hasDescription: boolean }
+>;
+declare export var StyledTitle: StyletronComponent<'div', {}>;
+declare export var StyledDescription: StyletronComponent<'div', {}>;
+declare export var StyledGrabber: StyletronComponent<'div', {}>;
+declare export var StyledEmptyDiv: StyletronComponent<'div', {}>;
+declare export var StyledContent: StyletronComponent<'div', {}>;
+
+declare export var Sheet: React.ComponentType<SheetPropsT>;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/sheet/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/sheet/index.js"
+}

package/sheet/sheet.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { SheetProps } from './types';
+export declare const Sheet: ({ children, content, description, draggable, leadingAction, overrides, progressBar, title, topPosition, trailingAction, }: SheetProps) => JSX.Element;
+export default Sheet;

package/sheet/sheet.js

@@ -0,0 +1,182 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Sheet = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _overrides = require("../helpers/overrides");
+
+var _progressBar = require("../progress-bar");
+
+var _button = require("../button");
+
+var _divider = require("../divider");
+
+var _actionButton = require("./action-button");
+
+var _styledComponents = require("./styled-components");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? 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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function renderBodyContent(content) {
+  return typeof content === 'function' ? content() : content;
+}
+
+function renderActionButtonContent(content, buttonSize) {
+  if (typeof content === 'string') {
+    return content;
+  }
+
+  var Icon = content;
+  return /*#__PURE__*/React.createElement(Icon, {
+    size: buttonSize === _button.SIZE.compact ? 22 : 26
+  });
+}
+
+var Sheet = function Sheet(_ref) {
+  var children = _ref.children,
+      content = _ref.content,
+      description = _ref.description,
+      _ref$draggable = _ref.draggable,
+      draggable = _ref$draggable === void 0 ? false : _ref$draggable,
+      leadingAction = _ref.leadingAction,
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
+      progressBar = _ref.progressBar,
+      title = _ref.title,
+      topPosition = _ref.topPosition,
+      trailingAction = _ref.trailingAction;
+
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      Root = _getOverrides2[0],
+      rootProps = _getOverrides2[1];
+
+  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.TopContainer, _styledComponents.StyledTopContainer),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      TopContainer = _getOverrides4[0],
+      topContainerProps = _getOverrides4[1];
+
+  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.BottomContainer, _styledComponents.StyledBottomContainer),
+      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
+      BottomContainer = _getOverrides6[0],
+      bottomContainerProps = _getOverrides6[1];
+
+  var _getOverrides7 = (0, _overrides.getOverrides)(overrides.Header, _styledComponents.StyledHeader),
+      _getOverrides8 = _slicedToArray(_getOverrides7, 2),
+      Header = _getOverrides8[0],
+      headerProps = _getOverrides8[1];
+
+  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.Grabber, _styledComponents.StyledGrabber),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      Grabber = _getOverrides10[0],
+      grabberProps = _getOverrides10[1];
+
+  var _getOverrides11 = (0, _overrides.getOverrides)(overrides.HeaderGrid, _styledComponents.StyledHeaderGrid),
+      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+      HeaderGrid = _getOverrides12[0],
+      headerGridProps = _getOverrides12[1];
+
+  var _getOverrides13 = (0, _overrides.getOverrides)(overrides.ActionButton, _actionButton.ActionButton),
+      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
+      ActionButton = _getOverrides14[0],
+      actionButtonProps = _getOverrides14[1];
+
+  var _getOverrides15 = (0, _overrides.getOverrides)(overrides.EmptyDiv, _styledComponents.StyledEmptyDiv),
+      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
+      EmptyDiv = _getOverrides16[0],
+      emptyDivProps = _getOverrides16[1];
+
+  var _getOverrides17 = (0, _overrides.getOverrides)(overrides.HeaderTextContainer, _styledComponents.StyledHeaderTextContainer),
+      _getOverrides18 = _slicedToArray(_getOverrides17, 2),
+      HeaderTextContainer = _getOverrides18[0],
+      HeaderTextContainerProps = _getOverrides18[1];
+
+  var _getOverrides19 = (0, _overrides.getOverrides)(overrides.Title, _styledComponents.StyledTitle),
+      _getOverrides20 = _slicedToArray(_getOverrides19, 2),
+      Title = _getOverrides20[0],
+      titleProps = _getOverrides20[1];
+
+  var _getOverrides21 = (0, _overrides.getOverrides)(overrides.Description, _styledComponents.StyledDescription),
+      _getOverrides22 = _slicedToArray(_getOverrides21, 2),
+      Description = _getOverrides22[0],
+      descriptionProps = _getOverrides22[1];
+
+  var _getOverrides23 = (0, _overrides.getOverrides)(overrides.Divider, _styledComponents.StyledDivider),
+      _getOverrides24 = _slicedToArray(_getOverrides23, 2),
+      Divider = _getOverrides24[0],
+      dividerProps = _getOverrides24[1];
+
+  var _getOverrides25 = (0, _overrides.getOverrides)(overrides.Body, _styledComponents.StyledBody),
+      _getOverrides26 = _slicedToArray(_getOverrides25, 2),
+      Body = _getOverrides26[0],
+      bodyProps = _getOverrides26[1];
+
+  var hasTitle = Boolean(title);
+  var hasDescription = Boolean(description);
+  var hasLeadingAction = Boolean(leadingAction);
+  var hasTrailingAction = Boolean(trailingAction);
+  var buttonSize = hasTitle ? _button.SIZE.default : _button.SIZE.compact;
+  var shouldDisplayHeader = draggable || hasTitle || hasDescription || hasLeadingAction || hasTrailingAction;
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    $draggable: draggable
+  }, rootProps), /*#__PURE__*/React.createElement(TopContainer, _extends({
+    $draggable: draggable,
+    $topPosition: topPosition
+  }, topContainerProps), children), /*#__PURE__*/React.createElement(BottomContainer, _extends({
+    $draggable: draggable,
+    $topPosition: topPosition
+  }, bottomContainerProps), shouldDisplayHeader && /*#__PURE__*/React.createElement(Header, headerProps, draggable && /*#__PURE__*/React.createElement(Grabber, grabberProps), /*#__PURE__*/React.createElement(HeaderGrid, _extends({
+    $hasLeadingAction: hasLeadingAction,
+    $hasTrailingAction: hasTrailingAction
+  }, headerGridProps), leadingAction && /*#__PURE__*/React.createElement(ActionButton, _extends({
+    onClick: leadingAction.onClick,
+    "aria-label": leadingAction.label,
+    size: buttonSize
+  }, actionButtonProps), renderActionButtonContent(leadingAction.renderIcon || leadingAction.label, buttonSize)), trailingAction && !leadingAction && /*#__PURE__*/React.createElement(EmptyDiv, emptyDivProps), (hasTitle || hasDescription) && /*#__PURE__*/React.createElement(HeaderTextContainer, _extends({
+    $draggable: draggable,
+    $hasTitle: hasTitle,
+    $hasDescription: hasDescription
+  }, HeaderTextContainerProps), title && /*#__PURE__*/React.createElement(Title, titleProps, title), description && /*#__PURE__*/React.createElement(Description, descriptionProps, description)), trailingAction && /*#__PURE__*/React.createElement(ActionButton, _extends({
+    onClick: trailingAction.onClick,
+    "aria-label": trailingAction.label,
+    size: buttonSize
+  }, actionButtonProps), renderActionButtonContent(trailingAction.renderIcon || trailingAction.label, buttonSize)), !trailingAction && leadingAction && /*#__PURE__*/React.createElement(EmptyDiv, emptyDivProps)), progressBar ? /*#__PURE__*/React.createElement(_progressBar.ProgressBar, _extends({
+    size: _progressBar.SIZE.small,
+    overrides: {
+      BarContainer: {
+        style: {
+          marginTop: 0,
+          marginBottom: 0
+        }
+      }
+    }
+  }, progressBar)) : /*#__PURE__*/React.createElement(Divider, _extends({
+    $size: _divider.SIZE.section
+  }, dividerProps))), /*#__PURE__*/React.createElement(Body, bodyProps, renderBodyContent(content))));
+};
+
+exports.Sheet = Sheet;
+var _default = Sheet;
+exports.default = _default;

package/sheet/styled-components.d.ts

@@ -0,0 +1,27 @@
+export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", {
+    $draggable: boolean;
+}>;
+export declare const StyledTopContainer: import("styletron-react").StyletronComponent<"div", {
+    $draggable: boolean;
+    $topPosition: string;
+}>;
+export declare const StyledBottomContainer: import("styletron-react").StyletronComponent<"div", {
+    $draggable: boolean;
+    $topPosition: string;
+}>;
+export declare const StyledHeader: import("styletron-react").StyletronComponent<"div", {}>;
+export declare const StyledGrabber: import("styletron-react").StyletronComponent<"div", {}>;
+export declare const StyledHeaderGrid: import("styletron-react").StyletronComponent<"div", {
+    $hasLeadingAction: boolean;
+    $hasTrailingAction: boolean;
+}>;
+export declare const StyledEmptyDiv: import("styletron-react").StyletronComponent<"div", {}>;
+export declare const StyledHeaderTextContainer: import("styletron-react").StyletronComponent<"div", {
+    $draggable: boolean;
+    $hasTitle: boolean;
+    $hasDescription: boolean;
+}>;
+export declare const StyledTitle: import("styletron-react").StyletronComponent<"div", {}>;
+export declare const StyledDescription: import("styletron-react").StyletronComponent<"div", {}>;
+export declare const StyledDivider: import("styletron-react").StyletronComponent<"hr", import("../divider/types").DividerProps>;
+export declare const StyledBody: import("styletron-react").StyletronComponent<"div", {}>;