@elliemae/ds-mobile 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/GlobalHeader/MobileGlobalHeader.js

@@ -1,123 +1,150 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var MobileGlobalHeader_exports = {};
-__export(MobileGlobalHeader_exports, {
-  DSGlobalHeader: () => DSGlobalHeader,
-  DSGlobalHeaderWithSchema: () => DSGlobalHeaderWithSchema
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_form = require("@elliemae/ds-form");
-var import_react_desc = require("react-desc");
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-var import_ds_icon = require("@elliemae/ds-icon");
-var import_lodash = require("lodash");
-var import_ds_grid = require("@elliemae/ds-grid");
-var import_EM_logo = __toESM(require("../Icons/EM_logo"));
-var import_styles = require("./styles");
-var import_SideNav = require("../SideNav");
-const DSGlobalHeader = ({
-  containerProps = {},
-  title,
-  lastIcon,
-  onSearchChange = import_lodash.noop,
-  topMenuItems,
-  bottomMenuItems
-}) => {
-  const [searchBarVisible, setSearchBarVisible] = (0, import_react.useState)(false);
-  const [searchValue, setSearchValue] = (0, import_react.useState)();
-  const [showMenu, setShowMenu] = (0, import_react.useState)(false);
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var dsForm = require('@elliemae/ds-form');
+var reactDesc = require('react-desc');
+var DSButton = require('@elliemae/ds-button');
+var dsIcon = require('@elliemae/ds-icon');
+var lodash = require('lodash');
+var dsGrid = require('@elliemae/ds-grid');
+var EM_logo = require('../Icons/EM_logo.js');
+var styles = require('./styles.js');
+var SideNav = require('../SideNav/SideNav.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _span;
+
+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__default["default"](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; }
+
+const DSGlobalHeader = _ref => {
+  let {
+    containerProps = {},
+    title,
+    lastIcon,
+    onSearchChange = lodash.noop,
+    topMenuItems,
+    bottomMenuItems
+  } = _ref;
+  const [searchBarVisible, setSearchBarVisible] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState();
+  const [showMenu, setShowMenu] = React.useState(false);
+
   const searchClicked = () => {
     setSearchBarVisible(true);
   };
-  const onSearchChangeDebounced = (0, import_react.useCallback)((0, import_lodash.debounce)(onSearchChange, 250), []);
-  const searchValueChanged = (e) => {
+
+  const onSearchChangeDebounced = React.useCallback(lodash.debounce(onSearchChange, 250), []);
+
+  const searchValueChanged = e => {
     const val = e.target.value;
     onSearchChangeDebounced(val);
     setSearchValue(val);
   };
+
   const searchCloseClicked = () => {
     setSearchBarVisible(false);
   };
-  const menuToggle = (flag) => {
+
+  const menuToggle = flag => {
     setShowMenu(flag);
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styles.Container, {
-    "data-testid": containerProps["data-testid"] || "global-header-wrapper",
-    ...containerProps
-  }, !searchBarVisible ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styles.MainSection, null, /* @__PURE__ */ import_react.default.createElement(import_styles.Icon, {
-    onClick: menuToggle.bind(null, true)
-  }, (0, import_EM_logo.default)()), /* @__PURE__ */ import_react.default.createElement(import_styles.Label, null, title), /* @__PURE__ */ import_react.default.createElement("span", null), /* @__PURE__ */ import_react.default.createElement(import_styles.RightSection, null, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
-    cols: lastIcon ? [1 / 2, 1 / 2] : [1],
-    gutter: "xs"
-  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Search, {
-    "data-testid": "mobile-global-header-search",
-    size: import_ds_icon.DSIconSizes.M,
-    color: import_ds_icon.DSIconColors.WHITE,
-    onClick: searchClicked
-  })), lastIcon && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, lastIcon))))) : /* @__PURE__ */ import_react.default.createElement(import_styles.SearchWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSInput, {
-    clearable: true,
-    className: "dsInput",
-    placeholder: "Search here",
-    onChange: searchValueChanged,
-    rightComponent: /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
-      buttonType: "primary",
-      className: "dsButton",
-      icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Search, {
-        size: import_ds_icon.DSIconSizes.M,
-        color: import_ds_icon.DSIconColors.WHITE,
-        onClick: searchCloseClicked
-      })
-    }),
-    value: searchValue,
-    variant: "variant-active"
-  }))), showMenu ? /* @__PURE__ */ import_react.default.createElement(import_SideNav.DSSideNav, {
-    title,
-    menuItems: topMenuItems,
-    bottomMenuItems,
-    onClose: menuToggle.bind(null, false)
-  }) : null);
+
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(styles.Container, _objectSpread(_objectSpread({
+      "data-testid": containerProps['data-testid'] || 'global-header-wrapper'
+    }, containerProps), {}, {
+      children: !searchBarVisible ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/_jsx__default["default"](styles.MainSection, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.Icon, {
+          onClick: menuToggle.bind(null, true)
+        }, void 0, EM_logo()), /*#__PURE__*/_jsx__default["default"](styles.Label, {}, void 0, title), _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {})), /*#__PURE__*/_jsx__default["default"](styles.RightSection, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+          cols: lastIcon ? [1 / 2, 1 / 2] : [1],
+          gutter: "xs"
+        }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
+          "data-testid": "mobile-global-header-search",
+          size: dsIcon.DSIconSizes.M,
+          color: dsIcon.DSIconColors.WHITE,
+          onClick: searchClicked
+        })), lastIcon && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, lastIcon))))
+      }) : /*#__PURE__*/_jsx__default["default"](styles.SearchWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInput, {
+        clearable: true,
+        className: "dsInput",
+        placeholder: "Search here",
+        onChange: searchValueChanged,
+        rightComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+          buttonType: "primary",
+          className: "dsButton",
+          icon: /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
+            size: dsIcon.DSIconSizes.M,
+            color: dsIcon.DSIconColors.WHITE,
+            onClick: searchCloseClicked
+          })
+        }),
+        value: searchValue,
+        variant: "variant-active"
+      }))
+    })), showMenu ? /*#__PURE__*/_jsx__default["default"](SideNav.DSSideNav, {
+      title: title,
+      menuItems: topMenuItems,
+      bottomMenuItems: bottomMenuItems,
+      onClose: menuToggle.bind(null, false)
+    }) : null]
+  });
 };
-const menuProps = import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.shape({
-  icon: import_react_desc.PropTypes.element,
-  text: import_react_desc.PropTypes.string
-})).description("menu item array");
+
+const menuProps = reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
+  icon: reactDesc.PropTypes.element,
+  text: reactDesc.PropTypes.string
+})).description('menu item array');
 const props = {
-  containerProps: import_react_desc.PropTypes.object.description("props to inject to wrapper"),
-  title: import_react_desc.PropTypes.string.isRequired.description("Heading Title"),
-  lastIcon: import_react_desc.PropTypes.element.description("Dimsum icon Element"),
-  onSearchChange: import_react_desc.PropTypes.func.description("Callback function for search change"),
+  /** props to inject to wrapper */
+  containerProps: reactDesc.PropTypes.object.description('props to inject to wrapper'),
+
+  /**
+   * Heading Title
+   */
+  title: reactDesc.PropTypes.string.isRequired.description('Heading Title'),
+
+  /**
+   * Dimsum icon Element
+   */
+  lastIcon: reactDesc.PropTypes.element.description('Dimsum icon Element'),
+
+  /**
+   * Callback function for search change
+   */
+  onSearchChange: reactDesc.PropTypes.func.description('Callback function for search change'),
+
+  /**
+   * Top Menu items array
+   */
   topMenuItems: menuProps,
+
+  /**
+   * Bottom Menu items array
+   */
   bottomMenuItems: menuProps
 };
-DSGlobalHeader.propTypes = props;
-const DSGlobalHeaderWithSchema = (0, import_react_desc.describe)(DSGlobalHeader);
+const DSGlobalHeaderWithSchema = reactDesc.describe(DSGlobalHeader);
 DSGlobalHeaderWithSchema.propTypes = props;
-module.exports = __toCommonJS(MobileGlobalHeader_exports);
-//# sourceMappingURL=MobileGlobalHeader.js.map
+
+exports.DSGlobalHeader = DSGlobalHeader;
+exports.DSGlobalHeaderWithSchema = DSGlobalHeaderWithSchema;

package/cjs/GlobalHeader/index.js

@@ -1,36 +1,10 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var GlobalHeader_exports = {};
-__export(GlobalHeader_exports, {
-  DSGlobalHeader: () => import_MobileGlobalHeader.DSGlobalHeader,
-  DSGlobalHeaderWithSchema: () => import_MobileGlobalHeader.DSGlobalHeaderWithSchema
-});
-var React = __toESM(require("react"));
-var import_MobileGlobalHeader = require("./MobileGlobalHeader");
-module.exports = __toCommonJS(GlobalHeader_exports);
-//# sourceMappingURL=index.js.map
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MobileGlobalHeader = require('./MobileGlobalHeader.js');
+
+
+
+exports.DSGlobalHeader = MobileGlobalHeader.DSGlobalHeader;
+exports.DSGlobalHeaderWithSchema = MobileGlobalHeader.DSGlobalHeaderWithSchema;

package/cjs/GlobalHeader/styles.js

@@ -1,115 +1,40 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var styles_exports = {};
-__export(styles_exports, {
-  Container: () => Container,
-  Icon: () => Icon,
-  Label: () => Label,
-  MainSection: () => MainSection,
-  RightSection: () => RightSection,
-  SearchWrapper: () => SearchWrapper
-});
-var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_system = require("@elliemae/ds-system");
-const Container = import_styled_components.default.header`
-  width: auto;
-  height: 64px;
-  position: fixed;
-  width: 100%;
-  background-color: ${(props) => props.theme.colors.brand[700]};
-  padding: ${(props) => props.theme.space.xs};
-  color: ${(props) => props.theme.colors.neutral["000"]};
-`;
-const growLeft = import_ds_system.kfrm`
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
-`;
-const SearchWrapper = import_styled_components.default.div`
-  background-color: ${(props) => props.theme.colors.brand[600]};
-  ${import_ds_system.css`
-    animation: ${growLeft} 1s;
-  `}
-  float: right;
-  width: 100%;
-  border-radius: 4px;
-  .dsInput {
-    input {
-      border-radius: 2px 0 0 2px;
-      color: ${(props) => props.theme.colors.neutral["000"]};
-      border: calc(0.30769rem * 0.25) solid
-        ${(props) => props.theme.colors.brand[800]} !important;
-      &:focus {
-        border-right: none !important;
-      }
-      &::placeholder {
-        color: ${(props) => props.theme.colors.neutral["000"]};
-      }
-    }
-    .em-ds-input__clearable {
-      border: calc(0.30769rem * 0.25) solid
-        ${(props) => props.theme.colors.brand[800]} !important;
-    }
-  }
+'use strict';
 
-  .dsButton {
-    border-color: ${(props) => props.theme.colors.brand[800]} !important;
-    border-radius: 0 2px 2px 0;
-    border-left: none;
-  }
-  svg,
-  svg:not([fill]) {
-    fill: ${(props) => props.theme.colors.neutral["000"]};
-  }
-`;
-const Icon = import_styled_components.default.div`
-  margin-right: ${(props) => props.theme.space.xs};
-`;
-const Label = import_styled_components.default.div`
-  font-family: ${(props) => props.theme.fonts.default};
-  font-weight: ${(props) => props.theme.fontWeights.regular};
-  font-size: 25px;
-  line-height: 32px;
-`;
-const RightSection = import_styled_components.default.div`
-  padding-top: 5px;
-`;
-const MainSection = import_styled_components.default.div`
-  display: flex;
-  flex-direction: row;
-  height: 32px;
-  span {
-    flex-grow: 1;
-  }
-`;
-module.exports = __toCommonJS(styles_exports);
-//# sourceMappingURL=styles.js.map
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2;
+const Container = /*#__PURE__*/styled__default["default"].header.withConfig({
+  componentId: "sc-1nzpklc-0"
+})(["width:auto;height:64px;position:fixed;width:100%;background-color:", ";padding:", ";color:", ";"], props => props.theme.colors.brand[700], props => props.theme.space.xs, props => props.theme.colors.neutral['000']);
+const growLeft = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  0% {\n    width: 0;\n  }\n  100% {\n    width: 100%;\n  }\n"])));
+const SearchWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1nzpklc-1"
+})(["background-color:", ";", " float:right;width:100%;border-radius:4px;.dsInput{input{border-radius:2px 0 0 2px;color:", ";border:calc(0.30769rem * 0.25) solid ", " !important;&:focus{border-right:none !important;}&::placeholder{color:", ";}}.em-ds-input__clearable{border:calc(0.30769rem * 0.25) solid ", " !important;}}.dsButton{border-color:", " !important;border-radius:0 2px 2px 0;border-left:none;}svg,svg:not([fill]){fill:", ";}"], props => props.theme.colors.brand[600], dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n    animation: ", " 1s;\n  "])), growLeft), props => props.theme.colors.neutral['000'], props => props.theme.colors.brand[800], props => props.theme.colors.neutral['000'], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.neutral['000']);
+const Icon = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1nzpklc-2"
+})(["margin-right:", ";"], props => props.theme.space.xs);
+const Label = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1nzpklc-3"
+})(["font-family:", ";font-weight:", ";font-size:25px;line-height:32px;"], props => props.theme.fonts.default, props => props.theme.fontWeights.regular);
+const RightSection = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1nzpklc-4"
+})(["padding-top:5px;"]);
+const MainSection = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1nzpklc-5"
+})(["display:flex;flex-direction:row;height:32px;span{flex-grow:1;}"]);
+
+exports.Container = Container;
+exports.Icon = Icon;
+exports.Label = Label;
+exports.MainSection = MainSection;
+exports.RightSection = RightSection;
+exports.SearchWrapper = SearchWrapper;

package/cjs/GroupBox/GroupBox.js

@@ -1,87 +1,89 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var GroupBox_exports = {};
-__export(GroupBox_exports, {
-  DSGroupBox: () => DSGroupBox,
-  DSGroupBoxWithSchema: () => DSGroupBoxWithSchema
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_lodash = require("lodash");
-var import_ds_system = require("@elliemae/ds-system");
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_grid = require("@elliemae/ds-grid");
-const Title = import_styled_components.default.h3`
-  font-size: 14px;
-  margin: 0;
-  ${(0, import_ds_system.truncate)()}
-  color: ${(props2) => props2.theme.colors.neutral["700"]};
-  line-height: inherit;
-  text-transform: capitalize;
-  font-weight: ${(props2) => props2.theme.fontWeights.semibold};
-`;
-const GroupBox = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  background: ${(props2) => props2.background === "grey" ? props2.theme.colors.neutral["050"] : props2.theme.colors.neutral["000"]};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var lodash = require('lodash');
+var dsSystem = require('@elliemae/ds-system');
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Title = /*#__PURE__*/styled__default["default"].h3.withConfig({
+  componentId: "sc-1g87w66-0"
+})(["font-size:14px;margin:0;", " color:", ";line-height:inherit;text-transform:capitalize;font-weight:", ";"], dsSystem.truncate(), props => props.theme.colors.neutral['700'], props => props.theme.fontWeights.semibold);
+const GroupBox = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-1g87w66-1"
+})(["background:", ";border-top:", ";"], props => props.background === 'grey' ? props.theme.colors.neutral['050'] : props.theme.colors.neutral['000'], props => props.borderTop ? "1px solid ".concat(props.theme.colors.neutral['100']) : 'none');
 
-  border-top: ${(props2) => props2.borderTop ? `1px solid ${props2.theme.colors.neutral["100"]}` : "none"};
-`;
-const DSGroupBox = ({ children, title, background = "grey", headerLevel = 3, actionsRight = [], borderTop }) => {
-  const rows = ["auto"];
+const DSGroupBox = _ref => {
+  let {
+    children,
+    title,
+    background = 'grey',
+    headerLevel = 3,
+    actionsRight = [],
+    borderTop
+  } = _ref;
+  const rows = ['auto'];
   const hasActions = actionsRight.length > 0;
-  if (hasActions)
-    rows.push("auto");
-  return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
-    rows: ["32px", "auto"]
-  }, /* @__PURE__ */ import_react.default.createElement(GroupBox, {
-    background,
+  if (hasActions) rows.push('auto');
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    rows: ['32px', 'auto']
+  }, void 0, /*#__PURE__*/_jsx__default["default"](GroupBox, {
+    background: background,
     cols: rows,
-    borderTop,
+    borderTop: borderTop,
     alignItems: "center",
     pl: "xs",
-    pr: hasActions ? "xxs" : "xs"
-  }, /* @__PURE__ */ import_react.default.createElement(Title, {
-    as: `h${headerLevel}`
-  }, title), hasActions && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
-    cols: (0, import_lodash.times)(actionsRight.length, () => "auto"),
+    pr: hasActions ? 'xxs' : 'xs'
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Title, {
+    as: "h".concat(headerLevel)
+  }, void 0, title), hasActions && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    cols: lodash.times(actionsRight.length, () => 'auto'),
     justifySelf: "end"
-  }, actionsRight)), children);
+  }, void 0, actionsRight)), children);
 };
+
 const props = {
-  children: import_react_desc.PropTypes.element.description("In-box children"),
-  background: import_react_desc.PropTypes.oneOf(["white", "grey"]).description("Title background"),
-  borderTop: import_react_desc.PropTypes.bool.description("Toggle border top of group box"),
-  title: import_react_desc.PropTypes.string.isRequired.description("Group Box title"),
-  headerLevel: import_react_desc.PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description("semantic level of header tag for the title"),
-  actionsRight: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.element).description("Array of button icons")
+  /**
+   * In-box children
+   */
+  children: reactDesc.PropTypes.element.description('In-box children'),
+
+  /**
+   * Title background
+   */
+  background: reactDesc.PropTypes.oneOf(['white', 'grey']).description('Title background'),
+
+  /**
+   * Toggle border top of group box
+   */
+  borderTop: reactDesc.PropTypes.bool.description('Toggle border top of group box'),
+
+  /**
+   * Group Box title
+   */
+  title: reactDesc.PropTypes.string.isRequired.description('Group Box title'),
+
+  /**
+   * semantic level of header tag for the title
+   */
+  headerLevel: reactDesc.PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('semantic level of header tag for the title'),
+
+  /**
+   * Array of button icons
+   */
+  actionsRight: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.element).description('Array of button icons')
 };
-DSGroupBox.propTypes = props;
-const DSGroupBoxWithSchema = (0, import_react_desc.describe)(DSGroupBox);
+const DSGroupBoxWithSchema = reactDesc.describe(DSGroupBox);
 DSGroupBoxWithSchema.propTypes = props;
-module.exports = __toCommonJS(GroupBox_exports);
-//# sourceMappingURL=GroupBox.js.map
+
+exports.DSGroupBox = DSGroupBox;
+exports.DSGroupBoxWithSchema = DSGroupBoxWithSchema;