baseui 0.0.0-next-9a27fb2 → 0.0.0-next-9ca78d5

package/dialog/constants.d.ts

@@ -0,0 +1,20 @@
+export declare const SIZE: Readonly<{
+    readonly xSmall: "xSmall";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+}>;
+export declare const PLACEMENT: Readonly<{
+    readonly center: "center";
+    readonly topLeft: "topLeft";
+    readonly topCenter: "topCenter";
+    readonly topRight: "topRight";
+    readonly bottomLeft: "bottomLeft";
+    readonly bottomCenter: "bottomCenter";
+    readonly bottomRight: "bottomRight";
+}>;
+export declare const CLOSE_KIND: Readonly<{
+    readonly notCloseable: "notCloseable";
+    readonly closeable: "closeable";
+    readonly closeableWithButton: "closeableWithButton";
+}>;

package/dialog/constants.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZE = exports.PLACEMENT = exports.CLOSE_KIND = void 0;
+
+/*
+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.
+*/
+var SIZE = Object.freeze({
+  xSmall: 'xSmall',
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
+});
+exports.SIZE = SIZE;
+var PLACEMENT = Object.freeze({
+  center: 'center',
+  topLeft: 'topLeft',
+  topCenter: 'topCenter',
+  topRight: 'topRight',
+  bottomLeft: 'bottomLeft',
+  bottomCenter: 'bottomCenter',
+  bottomRight: 'bottomRight'
+});
+exports.PLACEMENT = PLACEMENT;
+var CLOSE_KIND = Object.freeze({
+  notCloseable: 'notCloseable',
+  closeable: 'closeable',
+  closeableWithButton: 'closeableWithButton'
+});
+exports.CLOSE_KIND = CLOSE_KIND;

package/dialog/dialog.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { DialogProps } from './types';
+declare const Dialog: ({ artwork, buttonDock, children, closeKind, handleClose, hasOverlay, heading, isOpen, overrides, placement, numHeadingLines, size, }: DialogProps) => JSX.Element;
+export default Dialog;

package/dialog/dialog.js

@@ -0,0 +1,208 @@
+"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 = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = require("../styles/index");
+
+var _overrides = require("../helpers/overrides");
+
+var _buttonDock = require("../button-dock");
+
+var _button = require("../button");
+
+var _icon = require("../icon");
+
+var _styledComponents = require("./styled-components");
+
+var _constants = require("./constants");
+
+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 _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 _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 renderArtwork(artwork) {
+  if ( /*#__PURE__*/(0, _react.isValidElement)(artwork)) {
+    return artwork;
+  } else if (typeof artwork === 'function') {
+    var ArtworkComponent = artwork;
+    return /*#__PURE__*/_react.default.createElement(ArtworkComponent, null);
+  }
+
+  return null;
+}
+
+var DefaultCloseButton = function DefaultCloseButton(props) {
+  var overrides = {
+    BaseButton: {
+      style: {
+        position: 'absolute',
+        top: '16px',
+        right: '8px',
+        // this will be tokenized in the future
+        backgroundColor: 'rgba(255, 255, 255, 0.6)',
+        zIndex: 1
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_button.Button, _extends({
+    kind: _button.KIND.secondary,
+    shape: _button.SHAPE.circle,
+    overrides: overrides
+  }, props), /*#__PURE__*/_react.default.createElement(_icon.Delete, {
+    size: 36
+  }));
+};
+
+var DefaultButtonDock = function DefaultButtonDock(props) {
+  var _useStyletron = (0, _index.useStyletron)(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 2),
+      theme = _useStyletron2[1];
+
+  var overrides = {
+    Root: {
+      style: {
+        paddingRight: theme.sizing.scale800,
+        paddingLeft: theme.sizing.scale800,
+        marginBottom: theme.sizing.scale800
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_buttonDock.ButtonDock, _extends({
+    overrides: overrides
+  }, props));
+};
+
+var Dialog = function Dialog(_ref) {
+  var artwork = _ref.artwork,
+      buttonDock = _ref.buttonDock,
+      children = _ref.children,
+      _ref$closeKind = _ref.closeKind,
+      closeKind = _ref$closeKind === void 0 ? _constants.CLOSE_KIND.closeableWithButton : _ref$closeKind,
+      handleClose = _ref.handleClose,
+      _ref$hasOverlay = _ref.hasOverlay,
+      hasOverlay = _ref$hasOverlay === void 0 ? true : _ref$hasOverlay,
+      heading = _ref.heading,
+      isOpen = _ref.isOpen,
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? _constants.PLACEMENT.center : _ref$placement,
+      _ref$numHeadingLines = _ref.numHeadingLines,
+      numHeadingLines = _ref$numHeadingLines === void 0 ? 2 : _ref$numHeadingLines,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.SIZE.xSmall : _ref$size;
+
+  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.ScrollContainer, _styledComponents.StyledScrollContainer),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      ScrollContainer = _getOverrides4[0],
+      scrollContainerProps = _getOverrides4[1];
+
+  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.Heading, _styledComponents.StyledHeading),
+      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
+      Heading = _getOverrides6[0],
+      headingProps = _getOverrides6[1];
+
+  var _getOverrides7 = (0, _overrides.getOverrides)(overrides.Body, _styledComponents.StyledBody),
+      _getOverrides8 = _slicedToArray(_getOverrides7, 2),
+      Body = _getOverrides8[0],
+      bodyProps = _getOverrides8[1];
+
+  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.ButtonDock, DefaultButtonDock),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      ButtonDock = _getOverrides10[0],
+      buttonDockProps = _getOverrides10[1];
+
+  var _getOverrides11 = (0, _overrides.getOverrides)(overrides.CloseButton, DefaultCloseButton),
+      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+      CloseButton = _getOverrides12[0],
+      closeButtonProps = _getOverrides12[1];
+
+  var dialogRef = _react.default.useRef(null);
+
+  _react.default.useEffect(function () {
+    if (isOpen) {
+      if (hasOverlay) {
+        dialogRef.current.showModal();
+      } else {
+        dialogRef.current.show();
+      }
+    } else {
+      dialogRef.current.close();
+    }
+  }, [isOpen, hasOverlay]);
+
+  function handleOutsideClick(e) {
+    if (!dialogRef.current.contains(e.target) || e.target.nodeName === 'DIALOG') {
+      handleClose();
+    }
+  }
+
+  function handleEscapeKey(e) {
+    if (e.key === 'Escape') {
+      handleClose();
+    }
+  }
+
+  _react.default.useEffect(function () {
+    if (isOpen) {
+      // No delay, just pushing it to the end of the call stack so that the
+      // Dialog doesn't close immediately after opening via click event
+      var timer = setTimeout(function () {
+        document.addEventListener('click', handleOutsideClick);
+      }, 0);
+      document.addEventListener('keydown', handleEscapeKey);
+      return function () {
+        clearTimeout(timer);
+        document.removeEventListener('click', handleOutsideClick);
+        document.removeEventListener('keydown', handleEscapeKey);
+      };
+    } else {
+      document.removeEventListener('click', handleOutsideClick);
+      document.removeEventListener('keydown', handleEscapeKey);
+    }
+  }, [isOpen]);
+
+  return /*#__PURE__*/_react.default.createElement(Root, _extends({
+    ref: dialogRef,
+    $isOpen: isOpen,
+    $size: size,
+    $placement: placement
+  }, rootProps), closeKind === _constants.CLOSE_KIND.closeableWithButton && /*#__PURE__*/_react.default.createElement(CloseButton, _extends({
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, closeButtonProps)), /*#__PURE__*/_react.default.createElement(ScrollContainer, _extends({}, scrollContainerProps, {
+    tabIndex: 0
+  }), renderArtwork(artwork), /*#__PURE__*/_react.default.createElement(Heading, _extends({
+    $numHeadingLines: numHeadingLines
+  }, headingProps), heading), /*#__PURE__*/_react.default.createElement(Body, bodyProps, children)), buttonDock && /*#__PURE__*/_react.default.createElement(ButtonDock, _extends({}, buttonDock, buttonDockProps)));
+};
+
+var _default = Dialog;
+exports.default = _default;

package/dialog/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Dialog } from './dialog';
+export * from './constants';
+export * from './styled-components';
+export * from './types';

package/dialog/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Dialog: true
+};
+Object.defineProperty(exports, "Dialog", {
+  enumerable: true,
+  get: function get() {
+    return _dialog.default;
+  }
+});
+
+var _dialog = _interopRequireDefault(require("./dialog"));
+
+var _constants = require("./constants");
+
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _constants[key];
+    }
+  });
+});
+
+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/dialog/index.js.flow

@@ -0,0 +1,82 @@
+/*
+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 { ButtonDockPropsT } from '../button-dock';
+import { type StyletronComponent } from 'styletron-react';
+
+declare export var SIZE: {
+  xSmall: 'xSmall',
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+};
+
+declare export var PLACEMENT: {
+  center: 'center',
+  topLeft: 'topLeft',
+  topCenter: 'topCenter',
+  topRight: 'topRight',
+  bottomLeft: 'bottomLeft',
+  bottomCenter: 'bottomCenter',
+  bottomRight: 'bottomRight',
+};
+
+declare export var CLOSE_KIND: {
+  notCloseable: 'notCloseable',
+  closeable: 'closeable',
+  closeableWithButton: 'closeableWithButton',
+};
+
+export type DialogOverridesT = {
+  Root?: OverrideT,
+  ScrollContainer?: OverrideT,
+  Heading?: OverrideT,
+  Body?: OverrideT,
+  ButtonDock?: OverrideT,
+  CloseButton?: OverrideT,
+};
+
+export type SizeT = $Values<typeof SIZE>;
+export type PlacementT = $Values<typeof PLACEMENT>;
+export type CloseKindT = $Values<typeof CLOSE_KIND>;
+//flowlint-next-line unclear-type:off
+export type ArtworkT = React.Element<any> | React.ComponentType<{}>;
+
+export type DialogPropsT = {
+  artwork?: ArtworkT,
+  buttonDock?: ButtonDockPropsT,
+  children?: React.Node,
+  closeKind?: CloseKindT,
+  handleClose?: () => void,
+  hasOverlay?: boolean,
+  heading: string,
+  isOpen: boolean,
+  numHeadingLines?: number,
+  overrides?: DialogOverridesT,
+  placement?: PlacementT,
+  size?: SizeT,
+};
+
+declare export var StyledRoot: StyletronComponent<
+  'dialog',
+  {
+    $size: SizeT,
+    $placement: PlacementT,
+    $isOpen: boolean,
+  }
+>;
+declare export var StyledScrollContainer: StyletronComponent<'div', {}>;
+declare export var StyledHeading: StyletronComponent<'div', { $numHeadingLines: number }>;
+declare export var StyledBody: StyletronComponent<'div', {}>;
+
+declare export var Dialog: React.ComponentType<DialogPropsT>;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/dialog/package.json

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

package/dialog/styled-components.d.ts

@@ -0,0 +1,11 @@
+import type { Size, Placement } from './types';
+export declare const StyledRoot: import("styletron-react").StyletronComponent<"dialog", {
+    $size: Size;
+    $placement: Placement;
+    $isOpen: boolean;
+}>;
+export declare const StyledScrollContainer: import("styletron-react").StyletronComponent<"div", {}>;
+export declare const StyledHeading: import("styletron-react").StyletronComponent<"div", {
+    $numHeadingLines: number;
+}>;
+export declare const StyledBody: import("styletron-react").StyletronComponent<"div", {}>;

package/dialog/styled-components.js

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledScrollContainer = exports.StyledRoot = exports.StyledHeading = exports.StyledBody = void 0;
+
+var _styles = require("../styles");
+
+var _constants = require("./constants");
+
+var _DIALOG_WIDTHS;
+
+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; }
+
+var getPlacementStyles = function getPlacementStyles(placement, gutter) {
+  var defaultStyles = {
+    top: 'auto',
+    right: 'auto',
+    bottom: 'auto',
+    left: 'auto'
+  };
+
+  switch (placement) {
+    case _constants.PLACEMENT.topLeft:
+      return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+        top: gutter,
+        left: gutter
+      });
+
+    case _constants.PLACEMENT.topCenter:
+      return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+        top: gutter,
+        left: '50%',
+        transform: 'translateX(-50%)'
+      });
+
+    case _constants.PLACEMENT.topRight:
+      return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+        top: gutter,
+        right: gutter
+      });
+
+    case _constants.PLACEMENT.bottomLeft:
+      return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+        bottom: gutter,
+        left: gutter
+      });
+
+    case _constants.PLACEMENT.bottomCenter:
+      return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+        bottom: gutter,
+        left: '50%',
+        transform: 'translateX(-50%)'
+      });
+
+    case _constants.PLACEMENT.bottomRight:
+      return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+        bottom: gutter,
+        right: gutter
+      });
+
+    case _constants.PLACEMENT.center:
+      return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)'
+      });
+
+    default:
+      return defaultStyles;
+  }
+};
+
+var DIALOG_WIDTHS = (_DIALOG_WIDTHS = {}, _defineProperty(_DIALOG_WIDTHS, _constants.SIZE.xSmall, '480px'), _defineProperty(_DIALOG_WIDTHS, _constants.SIZE.small, '640px'), _defineProperty(_DIALOG_WIDTHS, _constants.SIZE.medium, '800px'), _defineProperty(_DIALOG_WIDTHS, _constants.SIZE.large, '100%'), _DIALOG_WIDTHS);
+var StyledRoot = (0, _styles.styled)('dialog', function (_ref) {
+  var $theme = _ref.$theme,
+      $size = _ref.$size,
+      _ref$$placement = _ref.$placement,
+      $placement = _ref$$placement === void 0 ? _constants.PLACEMENT.center : _ref$$placement,
+      $isOpen = _ref.$isOpen;
+  var narrowViewportGutter = '16px';
+  var wideViewportGutter = '40px';
+  return _objectSpread(_objectSpread({
+    position: 'fixed',
+    maxHeight: "calc(100vh - 2 * ".concat(wideViewportGutter, ")"),
+    maxWidth: "calc(100% - 2 * ".concat(wideViewportGutter, ")"),
+    borderRadius: $theme.borders.radius500,
+    boxShadow: $theme.lighting.shallowBelow,
+    overflow: 'hidden',
+    border: 'none',
+    width: DIALOG_WIDTHS[$size]
+  }, getPlacementStyles($placement, wideViewportGutter)), {}, {
+    '@media (max-width: 599px)': _objectSpread({
+      width: "calc(100% - 2 * ".concat(narrowViewportGutter, ")")
+    }, getPlacementStyles(_constants.PLACEMENT.bottomCenter, narrowViewportGutter)),
+    '::backdrop': {
+      backgroundColor: $theme.colors.backgroundOverlay
+    },
+    // Dialog style resets
+    marginTop: '0px',
+    marginRight: '0px',
+    marginBottom: '0px',
+    marginLeft: '0px',
+    paddingTop: '0px',
+    paddingRight: '0px',
+    paddingBottom: '0px',
+    paddingLeft: '0px'
+  }, $isOpen ? {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  } : {});
+});
+exports.StyledRoot = StyledRoot;
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+var StyledScrollContainer = (0, _styles.styled)('div', function () {
+  return {
+    flex: 1,
+    overflowY: 'auto',
+    position: 'relative',
+    width: '100%'
+  };
+});
+exports.StyledScrollContainer = StyledScrollContainer;
+StyledScrollContainer.displayName = "StyledScrollContainer";
+
+function getLineWrapStyle(numHeadingLines) {
+  if (numHeadingLines === 1) {
+    return {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    };
+  }
+
+  return {
+    overflow: 'hidden',
+    display: '-webkit-box',
+    WebkitLineClamp: "".concat(numHeadingLines),
+    WebkitBoxOrient: 'vertical'
+  };
+}
+
+var StyledHeading = (0, _styles.styled)('div', // @ts-ignore-next-line - TODO: StyledObject does not support whiteSpace property?
+function (_ref2) {
+  var $theme = _ref2.$theme,
+      _ref2$$numHeadingLine = _ref2.$numHeadingLines,
+      $numHeadingLines = _ref2$$numHeadingLine === void 0 ? 2 : _ref2$$numHeadingLine;
+  return _objectSpread(_objectSpread({
+    position: 'sticky',
+    top: 0,
+    paddingTop: $theme.sizing.scale800,
+    paddingLeft: $theme.sizing.scale800,
+    paddingRight: $theme.sizing.scale800,
+    '@media (max-width: 599px)': {
+      paddingLeft: $theme.sizing.scale600,
+      paddingRight: $theme.sizing.scale600
+    },
+    backgroundColor: $theme.colors.backgroundPrimary
+  }, getLineWrapStyle($numHeadingLines)), $theme.typography.HeadingMedium);
+});
+exports.StyledHeading = StyledHeading;
+StyledHeading.displayName = "StyledHeading";
+StyledHeading.displayName = 'StyledHeading';
+var StyledBody = (0, _styles.styled)('div', function (_ref3) {
+  var $theme = _ref3.$theme;
+  return _objectSpread({
+    marginTop: $theme.sizing.scale300,
+    marginBottom: $theme.sizing.scale800,
+    paddingLeft: $theme.sizing.scale800,
+    paddingRight: $theme.sizing.scale800,
+    '@media (max-width: 599px)': {
+      paddingLeft: $theme.sizing.scale600,
+      paddingRight: $theme.sizing.scale600
+    }
+  }, $theme.typography.ParagraphLarge);
+});
+exports.StyledBody = StyledBody;
+StyledBody.displayName = "StyledBody";
+StyledBody.displayName = 'StyledBody';

package/dialog/types.d.ts

@@ -0,0 +1,31 @@
+import type * as React from 'react';
+import type { ComponentType, ReactElement } from 'react';
+import type { Override } from '../helpers/overrides';
+import type { ButtonDockProps } from '../button-dock';
+import type { SIZE, PLACEMENT, CLOSE_KIND } from './constants';
+export type DialogOverrides = {
+    Root?: Override;
+    ScrollContainer?: Override;
+    Heading?: Override;
+    Body?: Override;
+    ButtonDock?: Override;
+    CloseButton?: Override;
+};
+export type Size = (typeof SIZE)[keyof typeof SIZE];
+export type Placement = (typeof PLACEMENT)[keyof typeof PLACEMENT];
+export type CloseKind = (typeof CLOSE_KIND)[keyof typeof CLOSE_KIND];
+export type Artwork<P = {}> = ReactElement | ComponentType<P>;
+export type DialogProps = {
+    artwork?: Artwork;
+    buttonDock?: ButtonDockProps;
+    children?: React.ReactNode | (() => React.ReactNode);
+    closeKind?: CloseKind;
+    handleClose?: () => void;
+    hasOverlay?: boolean;
+    heading: string;
+    isOpen: boolean;
+    numHeadingLines?: number;
+    overrides?: DialogOverrides;
+    placement?: Placement;
+    size?: Size;
+};

package/dialog/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});