@elliemae/ds-card 2.0.0-next.9 → 2.0.0-rc.12

package/cjs/DSCard.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('react');

package/cjs/DSCardBody.js

@@ -10,12 +10,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const DSCardBody = ({
-  children
-}) => /*#__PURE__*/_jsx__default["default"]("div", {
-  className: "em-ds-card-body",
-  "data-testid": "card-body"
-}, void 0, children);
+const DSCardBody = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "em-ds-card-body",
+    "data-testid": "card-body"
+  }, void 0, children);
+};
 
 const bodyProps = {
   /** children */

package/cjs/DSCardHeader.js

@@ -11,10 +11,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const DSCardHeader = ({
-  title,
-  action
-}) => {
+const DSCardHeader = _ref => {
+  let {
+    title,
+    action
+  } = _ref;
   const {
     cssClassName,
     classNameElement

package/cjs/detail/DetailCard.js

@@ -6,47 +6,44 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var lodash = require('lodash');
 var reactDesc = require('react-desc');
-var ArrowheadRight = require('@elliemae/ds-icons/ArrowheadRight');
-var ArrowheadDown = require('@elliemae/ds-icons/ArrowheadDown');
+var dsIcons = require('@elliemae/ds-icons');
 var dsSystem = require('@elliemae/ds-system');
 var DSButton = require('@elliemae/ds-button');
 var DSSeparator = require('@elliemae/ds-separator');
 var dsGrid = require('@elliemae/ds-grid');
-var DSCheckbox = require('@elliemae/ds-form/Checkbox');
+var dsForm = require('@elliemae/ds-form');
 var styled = require('./styled.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var ArrowheadRight__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadRight);
-var ArrowheadDown__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadDown);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
-var DSCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(DSCheckbox);
 
 var _Grid, _DSSeparator;
 
-const DetailCard = ({
-  title,
-  description,
-  descriptionColor = 'neutral',
-  rightValue,
-  rightDescription,
-  rightAddon,
-  // select props
-  selectable = false,
-  isSelected = false,
-  onSelect = lodash.noop,
-  // expand props
-  expandable = false,
-  isExpanded = false,
-  onExpand = lodash.noop,
-  expandContent,
-  // state props
-  readOnly = false,
-  disabled = false
-}) => {
+const DetailCard = _ref => {
+  let {
+    title,
+    description,
+    descriptionColor = 'neutral',
+    rightValue,
+    rightDescription,
+    rightAddon,
+    // select props
+    selectable = false,
+    isSelected = false,
+    onSelect = lodash.noop,
+    // expand props
+    expandable = false,
+    isExpanded = false,
+    onExpand = lodash.noop,
+    expandContent,
+    // state props
+    readOnly = false,
+    disabled = false
+  } = _ref;
   const theme = dsSystem.useTheme();
   const hasRightLegend = rightValue && rightDescription;
   const hasRightPosition = hasRightLegend || rightAddon;
@@ -64,7 +61,7 @@ const DetailCard = ({
       alignItems: !description && 'center'
     }, void 0, selectable && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
       pt: description && '9px'
-    }, void 0, /*#__PURE__*/_jsx__default["default"](DSCheckbox__default["default"], {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
       checked: isSelected,
       onChange: onSelect,
       readOnly: readOnly,
@@ -81,10 +78,10 @@ const DetailCard = ({
         'data-testid': 'expand-button'
       },
       onClick: onExpand,
-      icon: isExpanded ? /*#__PURE__*/_jsx__default["default"](ArrowheadDown__default["default"], {
+      icon: isExpanded ? /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
         color: ['neutral', 500],
         size: "s"
-      }) : /*#__PURE__*/_jsx__default["default"](ArrowheadRight__default["default"], {
+      }) : /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
         color: ['neutral', 500],
         size: "s"
       }),

package/cjs/detail/styled.js

@@ -31,15 +31,21 @@ const ExpandContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-nx8lwv-6"
 })(["font-size:12px;"]);
 
-const border = ({
-  active,
-  theme
-}) => active ? theme.colors.brand['600'] : theme.colors.neutral['200'];
-
-const background = ({
-  active,
-  theme
-}) => active ? theme.colors.brand['100'] : theme.colors.neutral['000'];
+const border = _ref => {
+  let {
+    active,
+    theme
+  } = _ref;
+  return active ? theme.colors.brand['600'] : theme.colors.neutral['200'];
+};
+
+const background = _ref2 => {
+  let {
+    active,
+    theme
+  } = _ref2;
+  return active ? theme.colors.brand['100'] : theme.colors.neutral['000'];
+};
 
 const Container = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-nx8lwv-7"

package/cjs/v2/ActionAddon.js

@@ -6,31 +6,33 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var reactDesc = require('react-desc');
 var styled = require('styled-components');
-var Chevron = require('@elliemae/ds-icons/ChevronSmallDown');
+var dsIcons = require('@elliemae/ds-icons');
 var DSButton = require('@elliemae/ds-button');
 
 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);
-var Chevron__default = /*#__PURE__*/_interopDefaultLegacy(Chevron);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 const Addon = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-1pazs35-0"
 })(["background-color:transparent;padding-right:4px;height:100%;border:none;font-size:12px;font-weight:", ";color:", ";cursor:pointer;&:focus,&::after{background-color:transparent;box-shadow:none !important;border:none !important;}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['700']);
 
-const ActionAddon = ({
-  label,
-  onClick,
-  icon
-}) => /*#__PURE__*/_jsx__default["default"](Addon, {
-  onClick: onClick,
-  labelText: label,
-  icon: icon || /*#__PURE__*/_jsx__default["default"](Chevron__default["default"], {
-    color: ['brand-primary', 700]
-  })
-});
+const ActionAddon = _ref => {
+  let {
+    label,
+    onClick,
+    icon
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](Addon, {
+    onClick: onClick,
+    labelText: label,
+    icon: icon || /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {
+      color: ['brand-primary', 700]
+    })
+  });
+};
 
 const actionProps = {
   /**

package/cjs/v2/Card.js

@@ -22,34 +22,37 @@ const getCol = rightAddon => {
   return [1, 'auto'];
 };
 
-const CustomCard = ({
-  title,
-  description,
-  leftAddon,
-  rightAddon,
-  // array. max 2 elements
-  hasBorder = false
-}) => /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx__default["default"](components.CardContainer, {
-  hasBorder: hasBorder,
-  cols: getCol(rightAddon),
-  "data-testid": "em-ds-card"
-}, void 0, /*#__PURE__*/_jsx__default["default"](components.LeftSection, {}, void 0, leftAddon && /*#__PURE__*/_jsx__default["default"](components.LeftAddon, {}, void 0, leftAddon), /*#__PURE__*/_jsx__default["default"](components.MainSection, {
-  style: {
-    maxWidth: leftAddon ? 'calc(100% - 40px)' : '100%'
-  }
-}, void 0, /*#__PURE__*/_jsx__default["default"](dsHeader.DSHeader, {
-  fontSize: "16px",
-  "data-testid": "em-ds-card-header",
-  fontWeight: "regular",
-  color: "neutral.800",
-  text: /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
-    value: title
-  })
-}), description && /*#__PURE__*/_jsx__default["default"](components.Description, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
-  value: description
-})))), rightAddon && /*#__PURE__*/_jsx__default["default"](components.RightAddonSection, {}, void 0, rightAddon[0] && /*#__PURE__*/_jsx__default["default"](components.RightAddon, {}, void 0, rightAddon[0]), rightAddon[1] && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: [rightAddon.length > 1 && (_Separator || (_Separator = /*#__PURE__*/_jsx__default["default"](components.Separator, {}))), /*#__PURE__*/_jsx__default["default"](components.RightAddon, {}, void 0, rightAddon[1])]
-}))));
+const CustomCard = _ref => {
+  let {
+    title,
+    description,
+    leftAddon,
+    rightAddon,
+    // array. max 2 elements
+    hasBorder = false
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx__default["default"](components.CardContainer, {
+    hasBorder: hasBorder,
+    cols: getCol(rightAddon),
+    "data-testid": "em-ds-card"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](components.LeftSection, {}, void 0, leftAddon && /*#__PURE__*/_jsx__default["default"](components.LeftAddon, {}, void 0, leftAddon), /*#__PURE__*/_jsx__default["default"](components.MainSection, {
+    style: {
+      maxWidth: leftAddon ? 'calc(100% - 40px)' : '100%'
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsHeader.DSHeader, {
+    fontSize: "16px",
+    "data-testid": "em-ds-card-header",
+    fontWeight: "regular",
+    color: "neutral.800",
+    text: /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
+      value: title
+    })
+  }), description && /*#__PURE__*/_jsx__default["default"](components.Description, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
+    value: description
+  })))), rightAddon && /*#__PURE__*/_jsx__default["default"](components.RightAddonSection, {}, void 0, rightAddon[0] && /*#__PURE__*/_jsx__default["default"](components.RightAddon, {}, void 0, rightAddon[0]), rightAddon[1] && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [rightAddon.length > 1 && (_Separator || (_Separator = /*#__PURE__*/_jsx__default["default"](components.Separator, {}))), /*#__PURE__*/_jsx__default["default"](components.RightAddon, {}, void 0, rightAddon[1])]
+  }))));
+};
 
 const cardProps = {
   /**

package/cjs/v2/Group.js

@@ -16,10 +16,13 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const Group = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1y2lfoo-0"
-})(["display:flex;flex-direction:column;width:100%;max-width:100%;", "{border-top:none;}", ""], Card.CustomCard, ({
-  theme,
-  withTopBorder
-}) => withTopBorder ? "border-top: ".concat(theme.colors.neutral['100']) : '');
+})(["display:flex;flex-direction:column;width:100%;max-width:100%;", "{border-top:none;}", ""], Card.CustomCard, _ref => {
+  let {
+    theme,
+    withTopBorder
+  } = _ref;
+  return withTopBorder ? "border-top: ".concat(theme.colors.neutral['100']) : '';
+});
 const GroupTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-1y2lfoo-1"
 })(["", ""], dsSystem.truncate());
@@ -30,13 +33,16 @@ const Items = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1y2lfoo-3"
 })(["display:flex;flex-direction:column;"]);
 
-const CardGroup = ({
-  children,
-  title,
-  action
-}) => /*#__PURE__*/_jsx__default["default"](Group, {
-  withTopBorder: !title
-}, void 0, !!title && /*#__PURE__*/_jsx__default["default"](TitleWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx__default["default"](Items, {}, void 0, children));
+const CardGroup = _ref2 => {
+  let {
+    children,
+    title,
+    action
+  } = _ref2;
+  return /*#__PURE__*/_jsx__default["default"](Group, {
+    withTopBorder: !title
+  }, void 0, !!title && /*#__PURE__*/_jsx__default["default"](TitleWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx__default["default"](Items, {}, void 0, children));
+};
 
 const cardgroupProps = {
   /**

package/cjs/v2/components.js

@@ -11,10 +11,13 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const CardContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1cjakml-0"
-})(["align-items:center;justify-content:space-between;width:100%;height:56px;padding:8px 16px;position:relative;border:", ";&:before{content:'';border-bottom:1px solid ", ";position:absolute;margin:0 auto;width:90%;bottom:0;}&:last-child::before{content:none;}"], ({
-  theme,
-  hasBorder
-}) => hasBorder ? "1px solid ".concat(theme.colors.neutral['100']) : '', props => props.theme.colors.neutral['100']);
+})(["align-items:center;justify-content:space-between;width:100%;height:56px;padding:8px 16px;position:relative;border:", ";&:before{content:'';border-bottom:1px solid ", ";position:absolute;margin:0 auto;width:90%;bottom:0;}&:last-child::before{content:none;}"], _ref => {
+  let {
+    theme,
+    hasBorder
+  } = _ref;
+  return hasBorder ? "1px solid ".concat(theme.colors.neutral['100']) : '';
+}, props => props.theme.colors.neutral['100']);
 const LeftSection = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1cjakml-1"
 })(["display:flex;align-items:center;"]);

package/esm/DSCard.js

@@ -1,3 +1,8 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';

package/esm/DSCardBody.js

@@ -2,12 +2,15 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
 
-const DSCardBody = ({
-  children
-}) => /*#__PURE__*/_jsx("div", {
-  className: "em-ds-card-body",
-  "data-testid": "card-body"
-}, void 0, children);
+const DSCardBody = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    className: "em-ds-card-body",
+    "data-testid": "card-body"
+  }, void 0, children);
+};
 
 const bodyProps = {
   /** children */

package/esm/DSCardHeader.js

@@ -3,10 +3,11 @@ import 'react';
 import { PropTypes, describe } from 'react-desc';
 import { convertPropToCssClassName } from '@elliemae/ds-classnames';
 
-const DSCardHeader = ({
-  title,
-  action
-}) => {
+const DSCardHeader = _ref => {
+  let {
+    title,
+    action
+  } = _ref;
   const {
     cssClassName,
     classNameElement

package/esm/detail/DetailCard.js

@@ -1,39 +1,39 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import { noop, compact } from 'lodash';
+import { compact, noop } from 'lodash';
 import { PropTypes, describe } from 'react-desc';
-import ArrowheadRight from '@elliemae/ds-icons/ArrowheadRight';
-import ArrowheadDown from '@elliemae/ds-icons/ArrowheadDown';
+import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
 import { useTheme } from '@elliemae/ds-system';
 import DSButton from '@elliemae/ds-button';
 import DSSeparator from '@elliemae/ds-separator';
 import { Grid } from '@elliemae/ds-grid';
-import DSCheckbox from '@elliemae/ds-form/Checkbox';
+import { DSCheckbox } from '@elliemae/ds-form';
 import { Container, Title, Description, RightDescription, RightValue, RightAddon } from './styled.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 var _Grid, _DSSeparator;
 
-const DetailCard = ({
-  title,
-  description,
-  descriptionColor = 'neutral',
-  rightValue,
-  rightDescription,
-  rightAddon,
-  // select props
-  selectable = false,
-  isSelected = false,
-  onSelect = noop,
-  // expand props
-  expandable = false,
-  isExpanded = false,
-  onExpand = noop,
-  expandContent,
-  // state props
-  readOnly = false,
-  disabled = false
-}) => {
+const DetailCard = _ref => {
+  let {
+    title,
+    description,
+    descriptionColor = 'neutral',
+    rightValue,
+    rightDescription,
+    rightAddon,
+    // select props
+    selectable = false,
+    isSelected = false,
+    onSelect = noop,
+    // expand props
+    expandable = false,
+    isExpanded = false,
+    onExpand = noop,
+    expandContent,
+    // state props
+    readOnly = false,
+    disabled = false
+  } = _ref;
   const theme = useTheme();
   const hasRightLegend = rightValue && rightDescription;
   const hasRightPosition = hasRightLegend || rightAddon;

package/esm/detail/styled.js

@@ -23,15 +23,21 @@ const ExpandContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-nx8lwv-6"
 })(["font-size:12px;"]);
 
-const border = ({
-  active,
-  theme
-}) => active ? theme.colors.brand['600'] : theme.colors.neutral['200'];
+const border = _ref => {
+  let {
+    active,
+    theme
+  } = _ref;
+  return active ? theme.colors.brand['600'] : theme.colors.neutral['200'];
+};
 
-const background = ({
-  active,
-  theme
-}) => active ? theme.colors.brand['100'] : theme.colors.neutral['000'];
+const background = _ref2 => {
+  let {
+    active,
+    theme
+  } = _ref2;
+  return active ? theme.colors.brand['100'] : theme.colors.neutral['000'];
+};
 
 const Container = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-nx8lwv-7"

package/esm/v2/ActionAddon.js

@@ -2,24 +2,27 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
-import Chevron from '@elliemae/ds-icons/ChevronSmallDown';
+import { ChevronSmallDown } from '@elliemae/ds-icons';
 import DSButton from '@elliemae/ds-button';
 
 const Addon = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-1pazs35-0"
 })(["background-color:transparent;padding-right:4px;height:100%;border:none;font-size:12px;font-weight:", ";color:", ";cursor:pointer;&:focus,&::after{background-color:transparent;box-shadow:none !important;border:none !important;}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['700']);
 
-const ActionAddon = ({
-  label,
-  onClick,
-  icon
-}) => /*#__PURE__*/_jsx(Addon, {
-  onClick: onClick,
-  labelText: label,
-  icon: icon || /*#__PURE__*/_jsx(Chevron, {
-    color: ['brand-primary', 700]
-  })
-});
+const ActionAddon = _ref => {
+  let {
+    label,
+    onClick,
+    icon
+  } = _ref;
+  return /*#__PURE__*/_jsx(Addon, {
+    onClick: onClick,
+    labelText: label,
+    icon: icon || /*#__PURE__*/_jsx(ChevronSmallDown, {
+      color: ['brand-primary', 700]
+    })
+  });
+};
 
 const actionProps = {
   /**

package/esm/v2/Card.js

@@ -13,34 +13,37 @@ const getCol = rightAddon => {
   return [1, 'auto'];
 };
 
-const CustomCard = ({
-  title,
-  description,
-  leftAddon,
-  rightAddon,
-  // array. max 2 elements
-  hasBorder = false
-}) => /*#__PURE__*/_jsx(TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx(CardContainer, {
-  hasBorder: hasBorder,
-  cols: getCol(rightAddon),
-  "data-testid": "em-ds-card"
-}, void 0, /*#__PURE__*/_jsx(LeftSection, {}, void 0, leftAddon && /*#__PURE__*/_jsx(LeftAddon, {}, void 0, leftAddon), /*#__PURE__*/_jsx(MainSection, {
-  style: {
-    maxWidth: leftAddon ? 'calc(100% - 40px)' : '100%'
-  }
-}, void 0, /*#__PURE__*/_jsx(DSHeader, {
-  fontSize: "16px",
-  "data-testid": "em-ds-card-header",
-  fontWeight: "regular",
-  color: "neutral.800",
-  text: /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
-    value: title
-  })
-}), description && /*#__PURE__*/_jsx(Description, {}, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
-  value: description
-})))), rightAddon && /*#__PURE__*/_jsx(RightAddonSection, {}, void 0, rightAddon[0] && /*#__PURE__*/_jsx(RightAddon, {}, void 0, rightAddon[0]), rightAddon[1] && /*#__PURE__*/jsxs(Fragment, {
-  children: [rightAddon.length > 1 && (_Separator || (_Separator = /*#__PURE__*/_jsx(Separator, {}))), /*#__PURE__*/_jsx(RightAddon, {}, void 0, rightAddon[1])]
-}))));
+const CustomCard = _ref => {
+  let {
+    title,
+    description,
+    leftAddon,
+    rightAddon,
+    // array. max 2 elements
+    hasBorder = false
+  } = _ref;
+  return /*#__PURE__*/_jsx(TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx(CardContainer, {
+    hasBorder: hasBorder,
+    cols: getCol(rightAddon),
+    "data-testid": "em-ds-card"
+  }, void 0, /*#__PURE__*/_jsx(LeftSection, {}, void 0, leftAddon && /*#__PURE__*/_jsx(LeftAddon, {}, void 0, leftAddon), /*#__PURE__*/_jsx(MainSection, {
+    style: {
+      maxWidth: leftAddon ? 'calc(100% - 40px)' : '100%'
+    }
+  }, void 0, /*#__PURE__*/_jsx(DSHeader, {
+    fontSize: "16px",
+    "data-testid": "em-ds-card-header",
+    fontWeight: "regular",
+    color: "neutral.800",
+    text: /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+      value: title
+    })
+  }), description && /*#__PURE__*/_jsx(Description, {}, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+    value: description
+  })))), rightAddon && /*#__PURE__*/_jsx(RightAddonSection, {}, void 0, rightAddon[0] && /*#__PURE__*/_jsx(RightAddon, {}, void 0, rightAddon[0]), rightAddon[1] && /*#__PURE__*/jsxs(Fragment, {
+    children: [rightAddon.length > 1 && (_Separator || (_Separator = /*#__PURE__*/_jsx(Separator, {}))), /*#__PURE__*/_jsx(RightAddon, {}, void 0, rightAddon[1])]
+  }))));
+};
 
 const cardProps = {
   /**

package/esm/v2/Group.js

@@ -7,10 +7,13 @@ import { CustomCard } from './Card.js';
 
 const Group = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1y2lfoo-0"
-})(["display:flex;flex-direction:column;width:100%;max-width:100%;", "{border-top:none;}", ""], CustomCard, ({
-  theme,
-  withTopBorder
-}) => withTopBorder ? "border-top: ".concat(theme.colors.neutral['100']) : '');
+})(["display:flex;flex-direction:column;width:100%;max-width:100%;", "{border-top:none;}", ""], CustomCard, _ref => {
+  let {
+    theme,
+    withTopBorder
+  } = _ref;
+  return withTopBorder ? "border-top: ".concat(theme.colors.neutral['100']) : '';
+});
 const GroupTitle = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-1y2lfoo-1"
 })(["", ""], truncate());
@@ -21,13 +24,16 @@ const Items = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1y2lfoo-3"
 })(["display:flex;flex-direction:column;"]);
 
-const CardGroup = ({
-  children,
-  title,
-  action
-}) => /*#__PURE__*/_jsx(Group, {
-  withTopBorder: !title
-}, void 0, !!title && /*#__PURE__*/_jsx(TitleWrapper, {}, void 0, /*#__PURE__*/_jsx(GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx(Items, {}, void 0, children));
+const CardGroup = _ref2 => {
+  let {
+    children,
+    title,
+    action
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Group, {
+    withTopBorder: !title
+  }, void 0, !!title && /*#__PURE__*/_jsx(TitleWrapper, {}, void 0, /*#__PURE__*/_jsx(GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx(Items, {}, void 0, children));
+};
 
 const cardgroupProps = {
   /**

package/esm/v2/components.js

@@ -3,10 +3,13 @@ import { Grid } from '@elliemae/ds-grid';
 
 const CardContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1cjakml-0"
-})(["align-items:center;justify-content:space-between;width:100%;height:56px;padding:8px 16px;position:relative;border:", ";&:before{content:'';border-bottom:1px solid ", ";position:absolute;margin:0 auto;width:90%;bottom:0;}&:last-child::before{content:none;}"], ({
-  theme,
-  hasBorder
-}) => hasBorder ? "1px solid ".concat(theme.colors.neutral['100']) : '', props => props.theme.colors.neutral['100']);
+})(["align-items:center;justify-content:space-between;width:100%;height:56px;padding:8px 16px;position:relative;border:", ";&:before{content:'';border-bottom:1px solid ", ";position:absolute;margin:0 auto;width:90%;bottom:0;}&:last-child::before{content:none;}"], _ref => {
+  let {
+    theme,
+    hasBorder
+  } = _ref;
+  return hasBorder ? "1px solid ".concat(theme.colors.neutral['100']) : '';
+}, props => props.theme.colors.neutral['100']);
 const LeftSection = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1cjakml-1"
 })(["display:flex;align-items:center;"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-card",
-  "version": "2.0.0-next.9",
+  "version": "2.0.0-rc.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Card",
   "module": "./esm/index.js",
@@ -68,25 +68,27 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-next.9",
-    "@elliemae/ds-classnames": "2.0.0-next.9",
-    "@elliemae/ds-form": "2.0.0-next.9",
-    "@elliemae/ds-grid": "2.0.0-next.9",
-    "@elliemae/ds-header": "2.0.0-next.9",
-    "@elliemae/ds-icons": "2.0.0-next.9",
-    "@elliemae/ds-separator": "2.0.0-next.9",
-    "@elliemae/ds-system": "2.0.0-next.9",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.0-next.9",
+    "@elliemae/ds-button": "2.0.0-rc.12",
+    "@elliemae/ds-classnames": "2.0.0-rc.12",
+    "@elliemae/ds-form": "2.0.0-rc.12",
+    "@elliemae/ds-grid": "2.0.0-rc.12",
+    "@elliemae/ds-header": "2.0.0-rc.12",
+    "@elliemae/ds-icons": "2.0.0-rc.12",
+    "@elliemae/ds-separator": "2.0.0-rc.12",
+    "@elliemae/ds-system": "2.0.0-rc.12",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.12",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/DSCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const DSCard: {
     ({ innerRef, children, containerProps, ...otherProps }: {
@@ -8,17 +9,41 @@ declare const DSCard: {
     }): JSX.Element;
     propTypes: {
         /** inject props to component wrapper */
-        containerProps: any;
+        containerProps: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Get reference for the button
          */
-        innerRef: any;
+        innerRef: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * DSCardBody and DSCardHeader
          */
-        children: any;
+        children: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSCardWithSchema: any;
+declare const DSCardWithSchema: {
+    (props?: {
+        [x: string]: any;
+        innerRef?: undefined;
+        children?: null | undefined;
+        containerProps?: {} | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSCard, DSCardWithSchema };
 export default DSCard;

package/types/DSCardBody.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const DSCardBody: {
     ({ children }: {
@@ -5,9 +6,20 @@ declare const DSCardBody: {
     }): JSX.Element;
     propTypes: {
         /** children */
-        children: any;
+        children: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSCardBodyWithSchema: any;
+declare const DSCardBodyWithSchema: {
+    (props?: {
+        children: any;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSCardBody, DSCardBodyWithSchema };
 export default DSCardBody;

package/types/DSCardHeader.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const DSCardHeader: {
     ({ title, action }: {
@@ -6,11 +7,28 @@ declare const DSCardHeader: {
     }): JSX.Element;
     propTypes: {
         /** card header title */
-        title: any;
+        title: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** action */
-        action: any;
+        action: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSCardHeaderWithSchema: any;
+declare const DSCardHeaderWithSchema: {
+    (props?: {
+        title: any;
+        action: any;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSCardHeader, DSCardHeaderWithSchema };
 export default DSCardHeader;

package/types/detail/DetailCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const DetailCard: {
     ({ title, description, descriptionColor, rightValue, rightDescription, rightAddon, selectable, isSelected, onSelect, expandable, isExpanded, onExpand, expandContent, readOnly, disabled, }: {
@@ -25,61 +26,151 @@ declare const DetailCard: {
         /**
          * Description of the card.
          */
-        description: any;
+        description: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Description color.
          */
-        descriptionColor: any;
+        descriptionColor: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Right value (should be used with `rightDescription`)
          */
-        rightValue: any;
+        rightValue: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Right description (should be used with `rightValue`)
          */
-        rightDescription: any;
+        rightDescription: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Right addon array, max elements: 2
          */
-        rightAddon: any;
+        rightAddon: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Whether if the card is selectable or not
          */
-        selectable: any;
+        selectable: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Whether if the card is selected or not
          */
-        isSelected: any;
+        isSelected: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Callback on selection
          */
-        onSelect: any;
+        onSelect: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Whether if the card is expandable or not
          */
-        expandable: any;
+        expandable: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Whether if the card is expanded or not
          */
-        isExpanded: any;
+        isExpanded: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Callback on expand
          */
-        onExpand: any;
+        onExpand: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Content
          */
-        expandContent: any;
+        expandContent: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Read only
          */
-        readOnly: any;
+        readOnly: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Disabled
          */
-        disabled: any;
+        disabled: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSCardDetailWithSchema: any;
+declare const DSCardDetailWithSchema: {
+    (props?: {
+        title: any;
+        description: any;
+        descriptionColor?: string | undefined;
+        rightValue: any;
+        rightDescription: any;
+        rightAddon: any;
+        selectable?: boolean | undefined;
+        isSelected?: boolean | undefined;
+        onSelect?: ((...args: any[]) => void) | undefined;
+        expandable?: boolean | undefined;
+        isExpanded?: boolean | undefined;
+        onExpand?: ((...args: any[]) => void) | undefined;
+        expandContent: any;
+        readOnly?: boolean | undefined;
+        disabled?: boolean | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DetailCard, DSCardDetailWithSchema };
 export default DetailCard;

package/types/detail/styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Title: import("styled-components").StyledComponent<"h3", any, {}, never>;
-export declare const Description: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const RightAddon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
-export declare const RightDescription: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
-export declare const RightValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
-export declare const ExpandContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Separator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+export declare const RightAddon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const RightDescription: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const RightValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const ExpandContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const Container: any;

package/types/v2/ActionAddon.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const ActionAddon: {
     ({ label, onClick, icon }: {
@@ -9,17 +10,40 @@ declare const ActionAddon: {
         /**
          * Addon label
          */
-        label: any;
+        label: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * On click callback
          */
-        onClick: any;
+        onClick: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Icon to display after the label
          */
-        icon: any;
+        icon: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSCardActionAddonWithSchema: any;
+declare const DSCardActionAddonWithSchema: {
+    (props?: {
+        label: any;
+        onClick: any;
+        icon: any;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { ActionAddon, DSCardActionAddonWithSchema };
 export default ActionAddon;

package/types/v2/Card.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const CustomCard: {
     ({ title, description, leftAddon, rightAddon, hasBorder, }: {
@@ -15,21 +16,51 @@ declare const CustomCard: {
         /**
          * Description of the card. not requiered
          */
-        description: any;
+        description: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Left Addon
          */
-        leftAddon: any;
+        leftAddon: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Right addon array, max elements: 2
          */
-        rightAddon: any;
+        rightAddon: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Wheter if the card has border or not
          */
-        hasBorder: any;
+        hasBorder: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSCardCustomWithSchema: any;
+declare const DSCardCustomWithSchema: {
+    (props?: {
+        title: any;
+        description: any;
+        leftAddon: any;
+        rightAddon: any;
+        hasBorder?: boolean | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { CustomCard, DSCardCustomWithSchema };
 export default CustomCard;

package/types/v2/Group.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const CardGroup: {
     ({ children, title, action }: {
@@ -17,9 +18,22 @@ declare const CardGroup: {
         /**
          * Right addon action
          */
-        action: any;
+        action: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSCardGroupWithSchema: any;
+declare const DSCardGroupWithSchema: {
+    (props?: {
+        children: any;
+        title: any;
+        action: any;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { CardGroup, DSCardGroupWithSchema };
 export default CardGroup;

package/types/v2/components.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-declare const CardContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
-declare const LeftSection: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const LeftAddon: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const RightAddonSection: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const RightAddon: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const MainSection: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const Title: import("styled-components").StyledComponent<"h3", any, {}, never>;
-declare const Description: import("styled-components").StyledComponent<"p", any, {}, never>;
+declare const CardContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+declare const LeftSection: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const LeftAddon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const RightAddonSection: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const RightAddon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const Separator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const MainSection: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const Title: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+declare const Description: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
 export { CardContainer, LeftSection, LeftAddon, RightAddonSection, RightAddon, Separator, MainSection, Title, Description, };