@planningcenter/tapestry-react 2.10.0-rc.9 → 2.10.0

package/dist/cjs/FilterLayout/FilterLayout.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.FilterLayout = FilterLayout;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _mousetrap = _interopRequireDefault(require("mousetrap"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Card = _interopRequireDefault(require("../Card"));
+
+var _Divider = _interopRequireDefault(require("../Divider"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+function FilterLayout(props) {
+  var header = props.header,
+      _props$sidebarWidth = props.sidebarWidth,
+      sidebarWidth = _props$sidebarWidth === void 0 ? 400 : _props$sidebarWidth,
+      sidebar = props.sidebar,
+      table = props.table,
+      toolbar = props.toolbar,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["header", "sidebarWidth", "sidebar", "table", "toolbar"]);
+  var fill = sidebarWidth === 'fill';
+
+  var _React$useState = React.useState(false),
+      sidebarOpen = _React$useState[0],
+      setSidebarOpen = _React$useState[1];
+
+  var toggleSidebar = React.useCallback(function () {
+    setSidebarOpen(function (sidebarOpen) {
+      return !sidebarOpen;
+    });
+  }, []);
+  React.useEffect(function () {
+    _mousetrap["default"].bind('f', toggleSidebar);
+
+    return function () {
+      _mousetrap["default"].unbind('f');
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(_Card["default"], (0, _extends2["default"])({
+    minHeight: 50,
+    overflow: undefined
+  }, restProps), /*#__PURE__*/React.createElement(_StackView["default"], {
+    axis: "horizontal",
+    minHeight: 6
+  }, /*#__PURE__*/React.createElement(_Button["default"], {
+    grow: 0,
+    shrink: 0,
+    basis: sidebarOpen ? fill ? '100%' : sidebarWidth + 'px' : '100px',
+    distribution: sidebarOpen ? 'space-between' : undefined,
+    width: "100%",
+    paddingHorizontal: 2,
+    borderRightWidth: 1,
+    borderRightColor: "separatorTertiary",
+    radius: 0,
+    title: "Filter",
+    "aria-label": sidebarOpen ? 'close filter' : 'open filter',
+    iconRight: {
+      name: sidebarOpen ? 'general.leftChevron' : 'general.threeReducingHorizontalBars',
+      size: sidebarOpen ? 'xs' : 'md'
+    },
+    onClick: toggleSidebar
+  }), /*#__PURE__*/React.createElement(_Box["default"], {
+    visible: !(sidebarOpen && fill),
+    grow: 1,
+    shrink: 1
+  }, header)), /*#__PURE__*/React.createElement(_Divider["default"], null), /*#__PURE__*/React.createElement(_StackView["default"], {
+    axis: "horizontal",
+    grow: 1
+  }, /*#__PURE__*/React.createElement(_StackView["default"], {
+    visible: sidebarOpen,
+    basis: fill ? '100%' : sidebarWidth + 'px',
+    borderRightWidth: 1,
+    borderRightColor: "separatorTertiary",
+    backgroundColor: "surfaceSecondary"
+  }, sidebar), /*#__PURE__*/React.createElement(_StackView["default"], {
+    visibility: sidebarOpen && fill ? 'hidden' : 'visible',
+    maxHeight: sidebarOpen && fill ? 0 : 'initial',
+    grow: 1,
+    shrink: 1,
+    basis: "100%"
+  }, /*#__PURE__*/React.createElement(_Box["default"], {
+    overflow: "hidden"
+  }, toolbar), /*#__PURE__*/React.createElement(_Divider["default"], null), table)));
+}

package/dist/cjs/FilterLayout/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _FilterLayout = require("./FilterLayout");
+
+exports["default"] = _FilterLayout.FilterLayout;
+Object.keys(_FilterLayout).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _FilterLayout[key]) return;
+  exports[key] = _FilterLayout[key];
+});

package/dist/cjs/FocusGroup/FocusGroup.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("../utils");
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } it = o[Symbol.iterator](); return it.next.bind(it); }
+
+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; }
+
+var SetRefContext = /*#__PURE__*/(0, _react.createContext)();
+
+var FocusGroup = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(FocusGroup, _Component);
+
+  function FocusGroup() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "nodes", {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setRef", function (id) {
+      return function (node) {
+        if (_this.context) {
+          _this.context(id)(node);
+        }
+
+        if (node) {
+          _this.nodes[id] = node;
+        } else {
+          delete _this.nodes[id];
+        }
+      };
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isElementOutside", function (target) {
+      return Object.values(_this.nodes).every(function (node) {
+        return node !== target && !node.contains(target);
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "maybeRestoreFocus", function (nextFocusedElement, event) {
+      var focusableElement = nextFocusedElement ? (0, _utils.getClosestFocusableElement)(nextFocusedElement.parentNode) : null;
+
+      if (focusableElement) {
+        var observer = new MutationObserver(function (mutationsList) {
+          for (var _iterator = _createForOfIteratorHelperLoose(mutationsList), _step; !(_step = _iterator()).done;) {
+            var mutation = _step.value;
+
+            if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
+              var removedElement = mutation.removedNodes[0];
+
+              if (removedElement === nextFocusedElement && focusableElement.focus) {
+                (function () {
+                  var previousScrollY = window.pageYOffset;
+                  focusableElement.focus();
+
+                  if (_this.isElementOutside(focusableElement)) {
+                    _this.props.onBlur(event);
+                  }
+
+                  setTimeout(function () {
+                    window.scroll(0, previousScrollY);
+                  });
+                })();
+              }
+            }
+          }
+        });
+        observer.observe(nextFocusedElement.parentNode, {
+          childList: true
+        });
+        setTimeout(function () {
+          observer.disconnect();
+        }, 800);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "requestBlur", function (event) {
+      var nextFocusedElement = event.relatedTarget || document.activeElement;
+
+      _this.maybeRestoreFocus(nextFocusedElement, event);
+
+      if (_this.isElementOutside(nextFocusedElement)) {
+        _this.props.onBlur(event);
+      }
+    });
+    return _this;
+  }
+
+  var _proto = FocusGroup.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/_react["default"].createElement(SetRefContext.Provider, {
+      value: this.setRef
+    }, this.props.children({
+      setRef: this.setRef,
+      requestBlur: this.requestBlur
+    }));
+  };
+
+  return FocusGroup;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(FocusGroup, "defaultProps", {
+  onBlur: function onBlur() {
+    return null;
+  }
+});
+(0, _defineProperty2["default"])(FocusGroup, "contextType", SetRefContext);
+var _default = FocusGroup;
+exports["default"] = _default;

package/dist/cjs/FocusGroup/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _FocusGroup = _interopRequireDefault(require("./FocusGroup"));
+
+var _default = _FocusGroup["default"];
+exports["default"] = _default;

package/dist/cjs/Form/Form.js

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _utils = require("../utils");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var Form = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2["default"])(Form, _React$Component);
+
+  function Form() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      isEditing: false,
+      isSubmitting: false,
+      payload: _this.props.initialPayload
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "submitTimeoutId", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startSubmitTimeout", function () {
+      _this.submitTimeoutId = setTimeout(_this.handleSubmit);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clearSubmitTimeout", function () {
+      clearTimeout(_this.submitTimeoutId);
+      _this.submitTimeoutId = null;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleEditing", function () {
+      _this.setState({
+        isEditing: true
+      });
+
+      if (_this.focusable) {
+        _this.focusable.focus();
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleReset", function () {
+      _this.setState({
+        isEditing: false,
+        payload: _this.props.initialPayload
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSubmit", function () {
+      if (JSON.stringify(_this.props.initialPayload) === JSON.stringify(_this.state.payload)) {
+        _this.setState({
+          isEditing: false
+        }, _this.clearSubmitTimeout);
+      } else {
+        var timeoutId = setTimeout(function () {
+          _this.setState({
+            isEditing: false,
+            isSubmitting: true
+          });
+        });
+
+        _this.props.onSubmit(_this.state.payload, function () {
+          clearTimeout(timeoutId);
+
+          _this.clearSubmitTimeout();
+
+          _this.setState({
+            isSubmitting: false
+          });
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "storeFocusRef", function (node) {
+      if (!_this.focusable) {
+        _this.focusable = node;
+      }
+    });
+    return _this;
+  }
+
+  var _proto = Form.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (!(0, _utils.shallowEqual)(lastProps.initialPayload, this.props.initialPayload)) {
+      this.setState({
+        payload: this.props.initialPayload
+      });
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$state = this.state,
+        isEditing = _this$state.isEditing,
+        isSubmitting = _this$state.isSubmitting,
+        payload = _this$state.payload;
+    return this.props.children(_objectSpread(_objectSpread({}, this.state), {}, {
+      editButtonProps: {
+        disabled: isSubmitting,
+        icon: isEditing ? undefined : {
+          name: 'general.pencil'
+        },
+        onClick: function onClick() {
+          // bail out if we've already triggered a submit in onBlur
+          if (_this2.submitTimeoutId === null) {
+            if (isEditing) {
+              _this2.handleSubmit();
+            } else {
+              _this2.handleEditing();
+            }
+          }
+        },
+        spinner: isSubmitting,
+        title: isEditing ? 'Save' : 'Edit',
+        tooltip: isEditing ? isSubmitting ? {
+          title: 'Saving'
+        } : undefined : {
+          title: 'Edit'
+        }
+      },
+      getFieldProps: function getFieldProps(key, getChangeValue) {
+        if (getChangeValue === void 0) {
+          getChangeValue = function getChangeValue(event) {
+            return event.target.value;
+          };
+        }
+
+        return {
+          innerRef: _this2.storeFocusRef,
+          disabled: isSubmitting,
+          hover: isEditing,
+          value: payload[key],
+          onFocus: function onFocus() {
+            _this2.clearSubmitTimeout();
+
+            _this2.setState({
+              isEditing: true
+            });
+          },
+          onBlur: function onBlur() {
+            _this2.startSubmitTimeout();
+          },
+          onChange: function onChange(event) {
+            var nextValue = getChangeValue(event);
+
+            _this2.setState(function (state) {
+              var _objectSpread2;
+
+              return {
+                payload: _objectSpread(_objectSpread({}, state.payload), {}, (_objectSpread2 = {}, _objectSpread2[key] = nextValue, _objectSpread2))
+              };
+            });
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === 'Enter' || event.key === 'Escape') {
+              event.preventDefault();
+              event.target.blur();
+
+              if (event.key === 'Escape') {
+                _this2.handleReset();
+              }
+            }
+          }
+        };
+      }
+    }));
+  };
+
+  return Form;
+}(React.Component);
+
+var _default = Form;
+exports["default"] = _default;

package/dist/cjs/Form/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Form = _interopRequireDefault(require("./Form"));
+
+var _default = _Form["default"];
+exports["default"] = _default;

package/dist/cjs/GridView/GridView.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.GridView = GridView;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = require("@emotion/react");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _splitStyles = _interopRequireDefault(require("../system/split-styles"));
+
+var _system = require("../system");
+
+var _VariantProvider = require("../VariantProvider");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsxRuntime classic */ /** @jsx jsx */
+
+function getTemplateValue(value) {
+  return value ? value.constructor === Array ? value.map(function (v) {
+    return typeof v === 'number' ? v * 8 + "px" : v;
+  }).join(' ') : value : undefined;
+}
+
+var gridViewPlugin = {
+  styleProps: ['autoFlow', 'autoColumns', 'autoRows', 'columns', 'rows', 'alignment', 'distribution', 'columnSpacing', 'rowSpacing', 'spacing'],
+  getStyles: function getStyles(_ref) {
+    var autoFlow = _ref.autoFlow,
+        autoColumns = _ref.autoColumns,
+        autoRows = _ref.autoRows,
+        columns = _ref.columns,
+        rows = _ref.rows,
+        alignment = _ref.alignment,
+        distribution = _ref.distribution,
+        columnSpacing = _ref.columnSpacing,
+        rowSpacing = _ref.rowSpacing,
+        spacing = _ref.spacing,
+        styles = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["autoFlow", "autoColumns", "autoRows", "columns", "rows", "alignment", "distribution", "columnSpacing", "rowSpacing", "spacing"]);
+
+    if (autoFlow !== undefined && styles.gridAutoFlow === undefined) {
+      styles.gridAutoFlow = autoFlow;
+    }
+
+    if (autoColumns !== undefined && styles.gridAutoColumns === undefined) {
+      styles.gridAutoColumns = autoColumns;
+    }
+
+    if (autoRows !== undefined && styles.autoRows === undefined) {
+      styles.gridAutoRows = autoRows;
+    }
+
+    if (columns !== undefined && styles.gridTemplateColumns === undefined) {
+      styles.gridTemplateColumns = getTemplateValue(columns);
+    }
+
+    if (rows !== undefined && styles.gridTemplateRows === undefined) {
+      styles.gridTemplateRows = getTemplateValue(rows);
+    }
+
+    if (alignment !== undefined && styles.alignItems === undefined) {
+      styles.alignItems = alignment;
+    }
+
+    if (distribution !== undefined && styles.distribution === undefined) {
+      styles.justifyItems = distribution;
+    }
+
+    if (columnSpacing !== undefined && styles.gridColumnGap === undefined) {
+      styles.gridColumnGap = (0, _system.spacingValue)(columnSpacing);
+    }
+
+    if (rowSpacing !== undefined && styles.gridRowGap === undefined) {
+      styles.gridRowGap = (0, _system.spacingValue)(rowSpacing);
+    }
+
+    if (spacing !== undefined && styles.gap === undefined) {
+      styles.gap = (0, _system.spacingValue)(spacing);
+    }
+
+    return styles;
+  }
+};
+var defaultElement = 'div';
+
+function GridView(_ref2) {
+  var as = _ref2.as,
+      inline = _ref2.inline,
+      innerRef = _ref2.innerRef,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["as", "inline", "innerRef"]);
+  var Element = as || defaultElement;
+  var variant = (0, _VariantProvider.useVariant)();
+  return (0, _react.jsx)(Element, (0, _extends2["default"])({
+    ref: innerRef
+  }, (0, _splitStyles["default"])(_objectSpread({
+    display: inline ? 'inline-grid' : 'grid',
+    autoColumns: 'minmax(0, auto)',
+    plugin: gridViewPlugin,
+    variant: variant
+  }, props))));
+}

package/dist/cjs/GridView/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _GridView = require("./GridView");
+
+exports["default"] = _GridView.GridView;
+Object.keys(_GridView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridView[key]) return;
+  exports[key] = _GridView[key];
+});

package/dist/cjs/Group/Group.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Group = Group;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _system = require("../system");
+
+var _utils = require("../utils");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function Group(_ref) {
+  var _ref$axis = _ref.axis,
+      axis = _ref$axis === void 0 ? 'horizontal' : _ref$axis,
+      childProps = _ref.childProps,
+      children = _ref.children,
+      radius = _ref.radius,
+      spacing = _ref.spacing,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["axis", "childProps", "children", "radius", "spacing"]);
+  var themeRadius = (0, _system.useThemeValue)('group.radius');
+  var radiusValue = radius != null ? radius : themeRadius;
+  var isHorizontalLayout = axis === 'horizontal';
+  var startRadius = isHorizontalLayout ? 'radiusLeft' : 'radiusTop';
+  var endRadius = isHorizontalLayout ? 'radiusRight' : 'radiusBottom';
+  var marginBottom = isHorizontalLayout ? 0 : '-1px';
+  var marginRight = isHorizontalLayout ? '-1px' : 0;
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    axis: axis,
+    spacing: spacing
+  }, restProps), (0, _utils.cloneChildren)(children, function (child, _ref2) {
+    var _objectSpread2;
+
+    var firstChild = _ref2.firstChild,
+        lastChild = _ref2.lastChild;
+    return _objectSpread(_objectSpread(_objectSpread({}, childProps), {}, (_objectSpread2 = {}, _objectSpread2[startRadius] = firstChild ? radiusValue : 0, _objectSpread2[endRadius] = lastChild ? radiusValue : 0, _objectSpread2), !spacing && !lastChild && {
+      marginBottom: marginBottom
+    }), !spacing && !lastChild && {
+      marginRight: marginRight
+    });
+  }));
+}

package/dist/cjs/Group/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Group = require("./Group");
+
+exports["default"] = _Group.Group;
+Object.keys(_Group).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Group[key]) return;
+  exports[key] = _Group[key];
+});