@elliemae/ds-group-box 2.2.0 → 2.3.0-alpha.3

package/esm/DSGroupBox.js

@@ -1,128 +1,77 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import React from 'react';
-import { PropTypes, describe } from 'react-desc';
-import { GroupBoxWrapper, GroupBoxContent } from './components/blocks.js';
-import { DSGroupBoxHeader } from './components/GroupHeader.js';
-import { BOX_TYPES_ARRAY, BOX_TYPES } from './constants.js';
-import { jsxs } from 'react/jsx-runtime';
-
-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; }
-
-const DSGroupBox = _ref => {
-  let {
-    containerProps = {},
-    labelProps = {
-      labelText: '',
-      borderBottom: false,
-      id: 'ds-group-box__header'
-    },
-    rightActions = [],
-    centerActions = [],
-    type = BOX_TYPES.CATEGORY,
-    asRow = false,
-    onlyHeader = false,
-    noBorder = true,
-    noPadding = false,
-    children: components = [],
-    // eslint-disable-next-line react/prop-types
-    isMain = true
-  } = _ref;
-  const {
-    labelText
-  } = labelProps;
-  return /*#__PURE__*/jsxs(GroupBoxWrapper, _objectSpread(_objectSpread({}, containerProps), {}, {
+import * as React from "react";
+import React2 from "react";
+import { PropTypes, describe } from "react-desc";
+import { GroupBoxWrapper, GroupBoxContent } from "./components/blocks";
+import { DSGroupBoxHeader } from "./components/GroupHeader";
+import { BOX_TYPES, BOX_TYPES_ARRAY } from "./constants";
+const DSGroupBox = ({
+  containerProps = {},
+  labelProps = {
+    labelText: "",
+    borderBottom: false,
+    id: "ds-group-box__header"
+  },
+  rightActions = [],
+  centerActions = [],
+  type = BOX_TYPES.CATEGORY,
+  asRow = false,
+  onlyHeader = false,
+  noBorder = true,
+  noPadding = false,
+  children: components = [],
+  isMain = true
+}) => {
+  const { labelText } = labelProps;
+  return /* @__PURE__ */ React2.createElement(GroupBoxWrapper, {
+    ...containerProps,
+    classProps: { onlyHeader, noBorder, type, isMain }
+  }, labelText && /* @__PURE__ */ React2.createElement(DSGroupBoxHeader, {
+    centerActions,
+    isMain,
+    labelProps,
+    noBorder,
+    rightActions,
+    type
+  }), /* @__PURE__ */ React2.createElement(GroupBoxContent, {
     classProps: {
+      type,
+      asRow,
       onlyHeader,
+      noPadding,
       noBorder,
-      type,
-      isMain
-    },
-    children: [labelText && /*#__PURE__*/_jsx(DSGroupBoxHeader, {
-      centerActions: centerActions,
-      isMain: isMain,
-      labelProps: labelProps,
-      noBorder: noBorder,
-      rightActions: rightActions,
-      type: type
-    }), /*#__PURE__*/_jsx(GroupBoxContent, {
-      classProps: {
-        type,
-        asRow,
-        onlyHeader,
-        noPadding,
-        noBorder,
-        noBorderTop: !!labelText
-      }
-    }, void 0, components && components.props ? React.Children.map(components, component => /*#__PURE__*/React.cloneElement(component, _objectSpread(_objectSpread({}, component.props), {}, {
-      isMain: false
-    })), null) : components)]
-  }));
+      noBorderTop: !!labelText
+    }
+  }, components && components.props ? React2.Children.map(components, (component) => React2.cloneElement(component, {
+    ...component.props,
+    isMain: false
+  }), null) : components));
 };
-
 const props = {
-  /** props to inject to wrapper */
-  containerProps: PropTypes.object.description('props to inject to wrapper'),
-
-  /**
-   * Label attributes to be rendered
-   */
+  containerProps: PropTypes.object.description("props to inject to wrapper"),
   labelProps: PropTypes.shape({
     labelText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     borderBottom: PropTypes.bool,
     id: PropTypes.string
-  }).description('Label attributes to be rendered'),
-
-  /**
-   * ['category-box', 'group-box']
-   */
+  }).description("Label attributes to be rendered"),
   type: PropTypes.oneOf(BOX_TYPES_ARRAY).description(BOX_TYPES_ARRAY.toString()),
-
-  /**
-   * Components to be rendered inside the box
-   */
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description('Components to be rendered inside the box'),
-
-  /**
-   * Actions on the right side of the label
-   */
-  rightActions: PropTypes.arrayOf(PropTypes.element).description('Actions on the right side of the label'),
-
-  /**
-   * Actions on the next to the label
-   */
-  centerActions: PropTypes.arrayOf(PropTypes.element).description('Actions on the next to the label'),
-
-  /**
-   * Display the content of the group box with flex direction row
-   */
-  asRow: PropTypes.bool.description('Display the content of the group box with flex direction row'),
-
-  /**
-   * Show border only on the header
-   */
-  onlyHeader: PropTypes.bool.description('Show border only on the header'),
-
-  /**
-   * Remove the wrapper border
-   */
-  noBorder: PropTypes.bool.description('Remove the wrapper border'),
-
-  /**
-   * Remove the top and bottom padding from the content
-   */
-  noPadding: PropTypes.bool.description('Remove the top and bottom padding from the content')
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]).isRequired.description("Components to be rendered inside the box"),
+  rightActions: PropTypes.arrayOf(PropTypes.element).description("Actions on the right side of the label"),
+  centerActions: PropTypes.arrayOf(PropTypes.element).description("Actions on the next to the label"),
+  asRow: PropTypes.bool.description("Display the content of the group box with flex direction row"),
+  onlyHeader: PropTypes.bool.description("Show border only on the header"),
+  noBorder: PropTypes.bool.description("Remove the wrapper border"),
+  noPadding: PropTypes.bool.description("Remove the top and bottom padding from the content")
 };
+DSGroupBox.propTypes = props;
 const DSGroupBoxWithSchema = describe(DSGroupBox);
 DSGroupBoxWithSchema.propTypes = props;
-
-export { DSGroupBox, DSGroupBoxWithSchema, DSGroupBox as default };
+var DSGroupBox_default = DSGroupBox;
+export {
+  DSGroupBox,
+  DSGroupBoxWithSchema,
+  DSGroupBox_default as default
+};
+//# sourceMappingURL=DSGroupBox.js.map

package/esm/DSGroupBox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSGroupBox.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { GroupBoxWrapper, GroupBoxContent } from './components/blocks';\nimport { DSGroupBoxHeader } from './components/GroupHeader';\nimport { BOX_TYPES, BOX_TYPES_ARRAY } from './constants';\n\nconst DSGroupBox = ({\n  containerProps = {},\n  labelProps = {\n    labelText: '',\n    borderBottom: false,\n    id: 'ds-group-box__header',\n  },\n  rightActions = [],\n  centerActions = [],\n  type = BOX_TYPES.CATEGORY,\n  asRow = false,\n  onlyHeader = false,\n  noBorder = true,\n  noPadding = false,\n  children: components = [],\n  // eslint-disable-next-line react/prop-types\n  isMain = true,\n}) => {\n  const { labelText } = labelProps;\n  return (\n    <GroupBoxWrapper\n      {...containerProps}\n      classProps={{ onlyHeader, noBorder, type, isMain }}\n    >\n      {labelText && (\n        <DSGroupBoxHeader\n          centerActions={centerActions}\n          isMain={isMain}\n          labelProps={labelProps}\n          noBorder={noBorder}\n          rightActions={rightActions}\n          type={type}\n        />\n      )}\n\n      <GroupBoxContent\n        classProps={{\n          type,\n          asRow,\n          onlyHeader,\n          noPadding,\n          noBorder,\n          noBorderTop: !!labelText,\n        }}\n      >\n        {components && components.props\n          ? React.Children.map(\n              components,\n              (component) =>\n                React.cloneElement(component, {\n                  ...component.props,\n                  isMain: false,\n                }),\n              null,\n            )\n          : components}\n      </GroupBoxContent>\n    </GroupBoxWrapper>\n  );\n};\n\nconst props = {\n  /** props to inject to wrapper */\n  containerProps: PropTypes.object.description('props to inject to wrapper'),\n  /**\n   * Label attributes to be rendered\n   */\n  labelProps: PropTypes.shape({\n    labelText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n    borderBottom: PropTypes.bool,\n    id: PropTypes.string,\n  }).description('Label attributes to be rendered'),\n  /**\n   * ['category-box', 'group-box']\n   */\n  type: PropTypes.oneOf(BOX_TYPES_ARRAY).description(\n    BOX_TYPES_ARRAY.toString(),\n  ),\n  /**\n   * Components to be rendered inside the box\n   */\n  children: PropTypes.oneOfType([\n    PropTypes.element,\n    PropTypes.arrayOf(PropTypes.element),\n  ]).isRequired.description('Components to be rendered inside the box'),\n  /**\n   * Actions on the right side of the label\n   */\n  rightActions: PropTypes.arrayOf(PropTypes.element).description(\n    'Actions on the right side of the label',\n  ),\n  /**\n   * Actions on the next to the label\n   */\n  centerActions: PropTypes.arrayOf(PropTypes.element).description(\n    'Actions on the next to the label',\n  ),\n  /**\n   * Display the content of the group box with flex direction row\n   */\n  asRow: PropTypes.bool.description(\n    'Display the content of the group box with flex direction row',\n  ),\n  /**\n   * Show border only on the header\n   */\n  onlyHeader: PropTypes.bool.description('Show border only on the header'),\n  /**\n   * Remove the wrapper border\n   */\n  noBorder: PropTypes.bool.description('Remove the wrapper border'),\n  /**\n   * Remove the top and bottom padding from the content\n   */\n  noPadding: PropTypes.bool.description(\n    'Remove the top and bottom padding from the content',\n  ),\n};\n\nDSGroupBox.propTypes = props;\nconst DSGroupBoxWithSchema = describe(DSGroupBox);\n\nDSGroupBoxWithSchema.propTypes = props;\n\nexport { DSGroupBox, DSGroupBoxWithSchema };\nexport default DSGroupBox;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,aAAa,CAAC;AAAA,EAClB,iBAAiB;AAAA,EACjB,aAAa;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,IAAI;AAAA;AAAA,EAEN,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,OAAO,UAAU;AAAA,EACjB,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU,aAAa;AAAA,EAEvB,SAAS;AAAA,MACL;AACJ,QAAM,EAAE,cAAc;AACtB,SACE,qCAAC,iBAAD;AAAA,OACM;AAAA,IACJ,YAAY,EAAE,YAAY,UAAU,MAAM;AAAA,KAEzC,aACC,qCAAC,kBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAIJ,qCAAC,iBAAD;AAAA,IACE,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,CAAC,CAAC;AAAA;AAAA,KAGhB,cAAc,WAAW,QACtB,OAAM,SAAS,IACb,YACA,CAAC,cACC,OAAM,aAAa,WAAW;AAAA,OACzB,UAAU;AAAA,IACb,QAAQ;AAAA,MAEZ,QAEF;AAAA;AAMZ,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAI7C,YAAY,UAAU,MAAM;AAAA,IAC1B,WAAW,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,IAC5D,cAAc,UAAU;AAAA,IACxB,IAAI,UAAU;AAAA,KACb,YAAY;AAAA,EAIf,MAAM,UAAU,MAAM,iBAAiB,YACrC,gBAAgB;AAAA,EAKlB,UAAU,UAAU,UAAU;AAAA,IAC5B,UAAU;AAAA,IACV,UAAU,QAAQ,UAAU;AAAA,KAC3B,WAAW,YAAY;AAAA,EAI1B,cAAc,UAAU,QAAQ,UAAU,SAAS,YACjD;AAAA,EAKF,eAAe,UAAU,QAAQ,UAAU,SAAS,YAClD;AAAA,EAKF,OAAO,UAAU,KAAK,YACpB;AAAA,EAKF,YAAY,UAAU,KAAK,YAAY;AAAA,EAIvC,UAAU,UAAU,KAAK,YAAY;AAAA,EAIrC,WAAW,UAAU,KAAK,YACxB;AAAA;AAIJ,WAAW,YAAY;AACvB,MAAM,uBAAuB,SAAS;AAEtC,qBAAqB,YAAY;AAGjC,IAAO,qBAAQ;",
+  "names": []
+}

package/esm/GroupBoxLabel.js

@@ -1,33 +1,54 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import styled from 'styled-components';
-import { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';
-
-const borderBase200 = props => "1px solid ".concat(props.theme.colors.neutral[200], ";");
-
-const categoryBoxStyles = "\n  width: 100%;\n  height: 36px;\n  padding:0 0;\n  color: ".concat(props => props.theme.colors.neutral[800], ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: ").concat(borderBase200, "\n");
-const groupBoxStyles = "\n  border: unset;\n  font-size: ".concat(props => toMobile(props.theme.fontSizes.title[500]), ";\n  padding: 12px 0;\n");
-const GroupBoxLabelNode = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-141ikkh-0"
-})(["", " ", " ", " ", ""], props => props.nodeType === 'category-box' ? categoryBoxStyles : groupBoxStyles, props => props.noBorder ? 'border: none;' : '', props => props.borderBottom ? "border-bottom: ".concat(borderBase200(props)) : '', props => props.isMain ? "padding-right: ".concat(__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), ";") : '');
-
-function GroupBoxLabel(_ref) {
-  let {
+import * as React from "react";
+import React2 from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from "@elliemae/ds-system";
+import { BOX_TYPES_ARRAY } from "./constants";
+const borderBase200 = (props) => `1px solid ${props.theme.colors.neutral[200]};`;
+const categoryBoxStyles = `
+  width: 100%;
+  height: 36px;
+  padding:0 0;
+  color: ${(props) => props.theme.colors.neutral[800]};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: ${borderBase200}
+`;
+const groupBoxStyles = `
+  border: unset;
+  font-size: ${(props) => toMobile(props.theme.fontSizes.title[500])};
+  padding: 12px 0;
+`;
+const GroupBoxLabelNode = styled.div`
+  ${(props) => props.nodeType === "category-box" ? categoryBoxStyles : groupBoxStyles}
+  ${(props) => props.noBorder ? "border: none;" : ""}
+  ${(props) => props.borderBottom ? `border-bottom: ${borderBase200(props)}` : ""}
+  ${(props) => props.isMain ? `padding-right: ${__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};` : ""}
+`;
+function GroupBoxLabel({ borderBottom, children, noBorder, isMain, type, id }) {
+  return /* @__PURE__ */ React2.createElement(GroupBoxLabelNode, {
     borderBottom,
-    children,
-    noBorder,
-    isMain,
-    type,
-    id
-  } = _ref;
-  return /*#__PURE__*/_jsx(GroupBoxLabelNode, {
-    borderBottom: borderBottom,
     "data-testid": "ds-group-box__header",
-    isMain: isMain,
-    noBorder: noBorder,
+    isMain,
+    noBorder,
     nodeType: type,
-    id: id
-  }, void 0, children);
+    id
+  }, children);
 }
-
-export { GroupBoxLabel as default };
+GroupBoxLabel.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired,
+  type: PropTypes.oneOf(BOX_TYPES_ARRAY),
+  borderBottom: PropTypes.bool,
+  isMain: PropTypes.bool.isRequired,
+  noBorder: PropTypes.bool,
+  id: PropTypes.string
+};
+var GroupBoxLabel_default = GroupBoxLabel;
+export {
+  GroupBoxLabel_default as default
+};
+//# sourceMappingURL=GroupBoxLabel.js.map

package/esm/GroupBoxLabel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/GroupBoxLabel.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';\nimport { BOX_TYPES_ARRAY } from './constants';\n\nconst borderBase200 = (props) =>\n  `1px solid ${props.theme.colors.neutral[200]};`;\n\nconst categoryBoxStyles = `\n  width: 100%;\n  height: 36px;\n  padding:0 0;\n  color: ${(props) => props.theme.colors.neutral[800]};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: ${borderBase200}\n`;\n\nconst groupBoxStyles = `\n  border: unset;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.title[500])};\n  padding: 12px 0;\n`;\n\nconst GroupBoxLabelNode = styled.div`\n  ${(props) =>\n    props.nodeType === 'category-box' ? categoryBoxStyles : groupBoxStyles}\n  ${(props) => (props.noBorder ? 'border: none;' : '')}\n  ${(props) =>\n    props.borderBottom ? `border-bottom: ${borderBase200(props)}` : ''}\n  ${(props) =>\n    props.isMain\n      ? `padding-right: ${__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};`\n      : ''}\n`;\nfunction GroupBoxLabel({ borderBottom, children, noBorder, isMain, type, id }) {\n  return (\n    <GroupBoxLabelNode\n      borderBottom={borderBottom}\n      data-testid=\"ds-group-box__header\"\n      isMain={isMain}\n      noBorder={noBorder}\n      nodeType={type}\n      id={id}\n    >\n      {children}\n    </GroupBoxLabelNode>\n  );\n}\n\nGroupBoxLabel.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.node,\n  ]).isRequired,\n  type: PropTypes.oneOf(BOX_TYPES_ARRAY),\n  borderBottom: PropTypes.bool,\n  isMain: PropTypes.bool.isRequired,\n  noBorder: PropTypes.bool,\n  id: PropTypes.string,\n};\n\nexport default GroupBoxLabel;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,gBAAgB,CAAC,UACrB,aAAa,MAAM,MAAM,OAAO,QAAQ;AAE1C,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA,WAIf,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,mBAI9B;AAAA;AAGnB,MAAM,iBAAiB;AAAA;AAAA,eAER,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAI/D,MAAM,oBAAoB,OAAO;AAAA,IAC7B,CAAC,UACD,MAAM,aAAa,iBAAiB,oBAAoB;AAAA,IACxD,CAAC,UAAW,MAAM,WAAW,kBAAkB;AAAA,IAC/C,CAAC,UACD,MAAM,eAAe,kBAAkB,cAAc,WAAW;AAAA,IAChE,CAAC,UACD,MAAM,SACF,kBAAkB,yBAAyB,MAAM,MAAM,MAAM,SAC7D;AAAA;AAER,uBAAuB,EAAE,cAAc,UAAU,UAAU,QAAQ,MAAM,MAAM;AAC7E,SACE,qCAAC,mBAAD;AAAA,IACE;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,KAEC;AAAA;AAKP,cAAc,YAAY;AAAA,EACxB,UAAU,UAAU,UAAU;AAAA,IAC5B,UAAU,QAAQ,UAAU;AAAA,IAC5B,UAAU;AAAA,KACT;AAAA,EACH,MAAM,UAAU,MAAM;AAAA,EACtB,cAAc,UAAU;AAAA,EACxB,QAAQ,UAAU,KAAK;AAAA,EACvB,UAAU,UAAU;AAAA,EACpB,IAAI,UAAU;AAAA;AAGhB,IAAO,wBAAQ;",
+  "names": []
+}

package/esm/LabelElement.js

@@ -1,17 +1,23 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import styled from 'styled-components';
-import { toMobile } from '@elliemae/ds-system';
-
-const LabelElementNode = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-nu03bl-0"
-})(["overflow:hidden;display:flex;align-items:center;font-size:", ";font-weight:400;"], props => toMobile(props.theme.fontSizes.title[700]));
-
-function LabelElement(_ref) {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsx(LabelElementNode, {}, void 0, children);
+import * as React from "react";
+import React2 from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { toMobile } from "@elliemae/ds-system";
+const LabelElementNode = styled.div`
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  font-size: ${(props) => toMobile(props.theme.fontSizes.title[700])};
+  font-weight: 400;
+`;
+function LabelElement({ children }) {
+  return /* @__PURE__ */ React2.createElement(LabelElementNode, null, children);
 }
-
-export { LabelElement as default };
+LabelElement.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
+};
+var LabelElement_default = LabelElement;
+export {
+  LabelElement_default as default
+};
+//# sourceMappingURL=LabelElement.js.map

package/esm/LabelElement.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/LabelElement.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { toMobile } from '@elliemae/ds-system';\n\nconst LabelElementNode = styled.div`\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.title[700])};\n  font-weight: 400;\n`;\n\nfunction LabelElement({ children }) {\n  return <LabelElementNode>{children}</LabelElementNode>;\n}\n\nLabelElement.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n};\n\nexport default LabelElement;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA,eAIjB,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAI/D,sBAAsB,EAAE,YAAY;AAClC,SAAO,qCAAC,kBAAD,MAAmB;AAAA;AAG5B,aAAa,YAAY;AAAA,EACvB,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO;AAAA;AAGpE,IAAO,uBAAQ;",
+  "names": []
+}

package/esm/components/GroupHeader.js

@@ -1,44 +1,40 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
-import { BOX_TYPES } from '../constants.js';
-import { Actions } from '../Actions.js';
-import LabelElement from '../LabelElement.js';
-import GroupBoxLabel from '../GroupBoxLabel.js';
-
-const DSGroupBoxHeader = _ref => {
-  let {
-    labelProps = {
-      labelText: '',
-      borderBottom: false,
-      id: 'ds-group-box__header'
-    },
-    rightActions = [],
-    centerActions = [],
-    type = BOX_TYPES.CATEGORY,
-    noBorder,
-    isMain
-  } = _ref;
-  const {
-    labelText,
+import * as React from "react";
+import React2 from "react";
+import DSTruncatedTooltipText from "@elliemae/ds-truncated-tooltip-text";
+import { BOX_TYPES } from "../constants";
+import Actions from "../Actions";
+import LabelElement from "../LabelElement";
+import Label from "../GroupBoxLabel";
+const DSGroupBoxHeader = ({
+  labelProps = {
+    labelText: "",
+    borderBottom: false,
+    id: "ds-group-box__header"
+  },
+  rightActions = [],
+  centerActions = [],
+  type = BOX_TYPES.CATEGORY,
+  noBorder,
+  isMain
+}) => {
+  const { labelText, borderBottom, id } = labelProps;
+  return /* @__PURE__ */ React2.createElement(Label, {
     borderBottom,
+    isMain,
+    noBorder,
+    type,
     id
-  } = labelProps;
-  return /*#__PURE__*/_jsx(GroupBoxLabel, {
-    borderBottom: borderBottom,
-    isMain: isMain,
-    noBorder: noBorder,
-    type: type,
-    id: id
-  }, void 0, /*#__PURE__*/_jsx(LabelElement, {}, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+  }, /* @__PURE__ */ React2.createElement(LabelElement, null, /* @__PURE__ */ React2.createElement(DSTruncatedTooltipText, {
     value: labelText
-  })), /*#__PURE__*/_jsx(Actions, {
+  })), /* @__PURE__ */ React2.createElement(Actions, {
     actions: centerActions,
     centerActions: centerActions.length > 0
-  }), /*#__PURE__*/_jsx(Actions, {
+  }), /* @__PURE__ */ React2.createElement(Actions, {
     actions: rightActions,
     rightActions: rightActions.length > 0
   }));
 };
-
-export { DSGroupBoxHeader };
+export {
+  DSGroupBoxHeader
+};
+//# sourceMappingURL=GroupHeader.js.map

package/esm/components/GroupHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/GroupHeader.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';\nimport { BOX_TYPES } from '../constants';\nimport Actions from '../Actions';\nimport LabelElement from '../LabelElement';\nimport Label from '../GroupBoxLabel';\n\nexport const DSGroupBoxHeader = ({\n  labelProps = {\n    labelText: '',\n    borderBottom: false,\n    id: 'ds-group-box__header',\n  },\n  rightActions = [],\n  centerActions = [],\n  type = BOX_TYPES.CATEGORY,\n  noBorder,\n  isMain,\n}) => {\n  const { labelText, borderBottom, id } = labelProps;\n  return (\n    <Label\n      borderBottom={borderBottom}\n      isMain={isMain}\n      noBorder={noBorder}\n      type={type}\n      id={id}\n    >\n      <LabelElement>\n        <DSTruncatedTooltipText value={labelText} />\n      </LabelElement>\n      <Actions\n        actions={centerActions}\n        centerActions={centerActions.length > 0}\n      />\n      <Actions actions={rightActions} rightActions={rightActions.length > 0} />\n    </Label>\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,aAAa;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,IAAI;AAAA;AAAA,EAEN,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,OAAO,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,MACI;AACJ,QAAM,EAAE,WAAW,cAAc,OAAO;AACxC,SACE,qCAAC,OAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEA,qCAAC,cAAD,MACE,qCAAC,wBAAD;AAAA,IAAwB,OAAO;AAAA,OAEjC,qCAAC,SAAD;AAAA,IACE,SAAS;AAAA,IACT,eAAe,cAAc,SAAS;AAAA,MAExC,qCAAC,SAAD;AAAA,IAAS,SAAS;AAAA,IAAc,cAAc,aAAa,SAAS;AAAA;AAAA;",
+  "names": []
+}

package/esm/components/blocks.js

@@ -1,50 +1,29 @@
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-
-const blockName = 'group-box';
-const GroupBoxWrapper = aggregatedClasses('div')(blockName, 'wrapper', _ref => {
-  let {
-    onlyHeader,
-    noBorder,
-    type,
-    isMain
-  } = _ref;
-  return {
-    'only-header': onlyHeader,
-    'no-border': noBorder,
-    [type]: type,
-    'main-box': isMain,
-    'nested-box': !isMain
-  };
-});
-const GroupBoxContent = aggregatedClasses('div')(blockName, 'content', _ref2 => {
-  let {
-    type,
-    asRow,
-    onlyHeader,
-    noPadding,
-    noBorder,
-    noBorderTop
-  } = _ref2;
-  return {
-    [type]: type,
-    'as-row': asRow,
-    'only-header': onlyHeader,
-    'no-padding': noPadding,
-    'no-border': noBorder,
-    'no-border-top': noBorderTop
-  };
-});
-const Label = aggregatedClasses('div')(blockName, 'label', _ref3 => {
-  let {
-    borderBottom,
-    type,
-    noBorder
-  } = _ref3;
-  return {
-    'border-bottom': borderBottom,
-    [type]: type,
-    'no-border': noBorder
-  };
-});
-
-export { GroupBoxContent, GroupBoxWrapper, Label };
+import * as React from "react";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+const blockName = "group-box";
+const GroupBoxWrapper = aggregatedClasses("div")(blockName, "wrapper", ({ onlyHeader, noBorder, type, isMain }) => ({
+  "only-header": onlyHeader,
+  "no-border": noBorder,
+  [type]: type,
+  "main-box": isMain,
+  "nested-box": !isMain
+}));
+const GroupBoxContent = aggregatedClasses("div")(blockName, "content", ({ type, asRow, onlyHeader, noPadding, noBorder, noBorderTop }) => ({
+  [type]: type,
+  "as-row": asRow,
+  "only-header": onlyHeader,
+  "no-padding": noPadding,
+  "no-border": noBorder,
+  "no-border-top": noBorderTop
+}));
+const Label = aggregatedClasses("div")(blockName, "label", ({ borderBottom, type, noBorder }) => ({
+  "border-bottom": borderBottom,
+  [type]: type,
+  "no-border": noBorder
+}));
+export {
+  GroupBoxContent,
+  GroupBoxWrapper,
+  Label
+};
+//# sourceMappingURL=blocks.js.map

package/esm/components/blocks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/blocks.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'group-box';\n\nexport const GroupBoxWrapper = aggregatedClasses('div')(\n  blockName,\n  'wrapper',\n  ({ onlyHeader, noBorder, type, isMain }) => ({\n    'only-header': onlyHeader,\n    'no-border': noBorder,\n    [type]: type,\n    'main-box': isMain,\n    'nested-box': !isMain,\n  }),\n);\n\nexport const GroupBoxContent = aggregatedClasses('div')(\n  blockName,\n  'content',\n  ({ type, asRow, onlyHeader, noPadding, noBorder, noBorderTop }) => ({\n    [type]: type,\n    'as-row': asRow,\n    'only-header': onlyHeader,\n    'no-padding': noPadding,\n    'no-border': noBorder,\n    'no-border-top': noBorderTop,\n  }),\n);\n\nexport const Label = aggregatedClasses('div')(\n  blockName,\n  'label',\n  ({ borderBottom, type, noBorder }) => ({\n    'border-bottom': borderBottom,\n    [type]: type,\n    'no-border': noBorder,\n  }),\n);\n"],
+  "mappings": "AAAA;ACAA;AAEA,MAAM,YAAY;AAEX,MAAM,kBAAkB,kBAAkB,OAC/C,WACA,WACA,CAAC,EAAE,YAAY,UAAU,MAAM,aAAc;AAAA,EAC3C,eAAe;AAAA,EACf,aAAa;AAAA,GACZ,OAAO;AAAA,EACR,YAAY;AAAA,EACZ,cAAc,CAAC;AAAA;AAIZ,MAAM,kBAAkB,kBAAkB,OAC/C,WACA,WACA,CAAC,EAAE,MAAM,OAAO,YAAY,WAAW,UAAU,kBAAmB;AAAA,GACjE,OAAO;AAAA,EACR,UAAU;AAAA,EACV,eAAe;AAAA,EACf,cAAc;AAAA,EACd,aAAa;AAAA,EACb,iBAAiB;AAAA;AAId,MAAM,QAAQ,kBAAkB,OACrC,WACA,SACA,CAAC,EAAE,cAAc,MAAM,eAAgB;AAAA,EACrC,iBAAiB;AAAA,GAChB,OAAO;AAAA,EACR,aAAa;AAAA;",
+  "names": []
+}

package/esm/constants.js

@@ -1,7 +1,11 @@
+import * as React from "react";
 const BOX_TYPES = {
-  CATEGORY: 'category-box',
-  GROUP: 'group-box'
+  CATEGORY: "category-box",
+  GROUP: "group-box"
 };
 const BOX_TYPES_ARRAY = [BOX_TYPES.CATEGORY, BOX_TYPES.GROUP];
-
-export { BOX_TYPES, BOX_TYPES_ARRAY };
+export {
+  BOX_TYPES,
+  BOX_TYPES_ARRAY
+};
+//# sourceMappingURL=constants.js.map

package/esm/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/constants.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const BOX_TYPES = {\n  CATEGORY: 'category-box',\n  GROUP: 'group-box',\n};\nexport const BOX_TYPES_ARRAY = [BOX_TYPES.CATEGORY, BOX_TYPES.GROUP];\n"],
+  "mappings": "AAAA;ACAO,MAAM,YAAY;AAAA,EACvB,UAAU;AAAA,EACV,OAAO;AAAA;AAEF,MAAM,kBAAkB,CAAC,UAAU,UAAU,UAAU;",
+  "names": []
+}

package/esm/index.js

@@ -1,2 +1,8 @@
-export { DSGroupBox, DSGroupBoxWithSchema, DSGroupBox as default } from './DSGroupBox.js';
-export { BOX_TYPES, BOX_TYPES_ARRAY } from './constants.js';
+import * as React from "react";
+export * from "./DSGroupBox";
+export * from "./constants";
+import { default as default2 } from "./DSGroupBox";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSGroupBox';\nexport * from './constants';\nexport { default } from './DSGroupBox';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-group-box",
-  "version": "2.2.0",
+  "version": "2.3.0-alpha.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Group Box",
   "module": "./esm/index.js",
@@ -64,9 +64,9 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-classnames": "2.2.0",
-    "@elliemae/ds-system": "2.2.0",
-    "@elliemae/ds-truncated-tooltip-text": "2.2.0",
+    "@elliemae/ds-classnames": "2.3.0-alpha.3",
+    "@elliemae/ds-system": "2.3.0-alpha.3",
+    "@elliemae/ds-truncated-tooltip-text": "2.3.0-alpha.3",
     "@xstyled/styled-components": "~3.1.1",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3"