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

package/cjs/v2/ActionAddon.js

@@ -1,73 +1,58 @@
-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 });
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+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 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 = _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]
+    })
+  });
 };
-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 ActionAddon_exports = {};
-__export(ActionAddon_exports, {
-  ActionAddon: () => ActionAddon,
-  DSCardActionAddonWithSchema: () => DSCardActionAddonWithSchema,
-  default: () => ActionAddon_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-const Addon = (0, import_styled_components.default)(import_ds_button.default)`
-  background-color: transparent;
-  padding-right: 4px;
-  height: 100%;
-  border: none;
-  font-size: 12px;
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-  color: ${(props) => props.theme.colors.brand["700"]};
-  cursor: pointer;
-  &:focus,
-  &::after {
-    background-color: transparent;
-    box-shadow: none !important; /* needed */
-    border: none !important; /* needed */
-  }
-`;
-const ActionAddon = ({ label, onClick, icon }) => /* @__PURE__ */ import_react.default.createElement(Addon, {
-  onClick,
-  labelText: label,
-  icon: icon || /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, {
-    color: ["brand-primary", 700]
-  })
-});
+
 const actionProps = {
-  label: import_react_desc.PropTypes.string.description("Addon label"),
-  onClick: import_react_desc.PropTypes.func.description("On click callback"),
-  icon: import_react_desc.PropTypes.element.description("Icon to display after the label")
+  /**
+   * Addon label
+   */
+  label: reactDesc.PropTypes.string.description('Addon label'),
+
+  /**
+   * On click callback
+   */
+  onClick: reactDesc.PropTypes.func.description('On click callback'),
+
+  /**
+   * Icon to display after the label
+   */
+  icon: reactDesc.PropTypes.element.description('Icon to display after the label')
 };
-ActionAddon.propTypes = actionProps;
-const DSCardActionAddonWithSchema = (0, import_react_desc.describe)(ActionAddon);
+const DSCardActionAddonWithSchema = reactDesc.describe(ActionAddon);
 DSCardActionAddonWithSchema.propTypes = actionProps;
-var ActionAddon_default = ActionAddon;
-module.exports = __toCommonJS(ActionAddon_exports);
-//# sourceMappingURL=ActionAddon.js.map
+
+exports.ActionAddon = ActionAddon;
+exports.DSCardActionAddonWithSchema = DSCardActionAddonWithSchema;
+exports["default"] = ActionAddon;

package/cjs/v2/Card.js

@@ -1,82 +1,88 @@
-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 });
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var dsHeader = require('@elliemae/ds-header');
+var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var components = require('./components.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 DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
+
+var _Separator;
+
+const getCol = rightAddon => {
+  if (!rightAddon) return [1];
+  return [1, 'auto'];
 };
-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;
+
+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])]
+  }))));
 };
-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 Card_exports = {};
-__export(Card_exports, {
-  CustomCard: () => CustomCard,
-  DSCardCustomWithSchema: () => DSCardCustomWithSchema,
-  default: () => Card_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_ds_header = require("@elliemae/ds-header");
-var import_ds_truncated_tooltip_text = __toESM(require("@elliemae/ds-truncated-tooltip-text"));
-var import_components = require("./components");
-const getCol = (rightAddon) => {
-  if (!rightAddon)
-    return [1];
-  return [1, "auto"];
-};
-const CustomCard = ({
-  title,
-  description,
-  leftAddon,
-  rightAddon,
-  hasBorder = false
-}) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.TooltipTextProvider, null, /* @__PURE__ */ import_react.default.createElement(import_components.CardContainer, {
-  hasBorder,
-  cols: getCol(rightAddon),
-  "data-testid": "em-ds-card"
-}, /* @__PURE__ */ import_react.default.createElement(import_components.LeftSection, null, leftAddon && /* @__PURE__ */ import_react.default.createElement(import_components.LeftAddon, null, leftAddon), /* @__PURE__ */ import_react.default.createElement(import_components.MainSection, {
-  style: {
-    maxWidth: leftAddon ? "calc(100% - 40px)" : "100%"
-  }
-}, /* @__PURE__ */ import_react.default.createElement(import_ds_header.DSHeader, {
-  fontSize: "16px",
-  "data-testid": "em-ds-card-header",
-  fontWeight: "regular",
-  color: "neutral.800",
-  text: /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.default, {
-    value: title
-  })
-}), description && /* @__PURE__ */ import_react.default.createElement(import_components.Description, null, /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.default, {
-  value: description
-})))), rightAddon && /* @__PURE__ */ import_react.default.createElement(import_components.RightAddonSection, null, rightAddon[0] && /* @__PURE__ */ import_react.default.createElement(import_components.RightAddon, null, rightAddon[0]), rightAddon[1] && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, rightAddon.length > 1 && /* @__PURE__ */ import_react.default.createElement(import_components.Separator, null), /* @__PURE__ */ import_react.default.createElement(import_components.RightAddon, null, rightAddon[1])))));
+
 const cardProps = {
-  title: import_react_desc.PropTypes.string.isRequired.description("Title of the card. requiered"),
-  description: import_react_desc.PropTypes.string.description("Description of the card. not requiered"),
-  leftAddon: import_react_desc.PropTypes.element.description("Left Addon"),
-  rightAddon: import_react_desc.PropTypes.array.description("Right addon array, max elements: 2"),
-  hasBorder: import_react_desc.PropTypes.bool.description("Wheter if the card has border or not")
+  /**
+   * Title of the card. requiered
+   */
+  title: reactDesc.PropTypes.string.isRequired.description('Title of the card. requiered'),
+
+  /**
+   * Description of the card. not requiered
+   */
+  description: reactDesc.PropTypes.string.description('Description of the card. not requiered'),
+
+  /**
+   * Left Addon
+   */
+  leftAddon: reactDesc.PropTypes.element.description('Left Addon'),
+
+  /**
+   * Right addon array, max elements: 2
+   */
+  rightAddon: reactDesc.PropTypes.array.description('Right addon array, max elements: 2'),
+
+  /**
+   * Wheter if the card has border or not
+   */
+  hasBorder: reactDesc.PropTypes.bool.description('Wheter if the card has border or not')
 };
-CustomCard.propTypes = cardProps;
-const DSCardCustomWithSchema = (0, import_react_desc.describe)(CustomCard);
+const DSCardCustomWithSchema = reactDesc.describe(CustomCard);
 DSCardCustomWithSchema.propTypes = cardProps;
-var Card_default = CustomCard;
-module.exports = __toCommonJS(Card_exports);
-//# sourceMappingURL=Card.js.map
+
+exports.CustomCard = CustomCard;
+exports.DSCardCustomWithSchema = DSCardCustomWithSchema;
+exports["default"] = CustomCard;

package/cjs/v2/Group.js

@@ -1,81 +1,68 @@
-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 Group_exports = {};
-__export(Group_exports, {
-  CardGroup: () => CardGroup,
-  DSCardGroupWithSchema: () => DSCardGroupWithSchema,
-  default: () => Group_default
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var Card = require('./Card.js');
+
+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 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, _ref => {
+  let {
+    theme,
+    withTopBorder
+  } = _ref;
+  return withTopBorder ? "border-top: ".concat(theme.colors.neutral['100']) : '';
 });
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_system = require("@elliemae/ds-system");
-var import_Card = __toESM(require("./Card"));
-const Group = import_styled_components.default.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 100%;
-  ${import_Card.default} {
-    border-top: none;
-  }
-  ${({ theme, withTopBorder }) => withTopBorder ? `border-top: ${theme.colors.neutral["100"]}` : ""}
-`;
-const GroupTitle = import_styled_components.default.span`
-  ${(0, import_ds_system.truncate)()}
-`;
-const TitleWrapper = import_styled_components.default.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 0 ${(props) => props.theme.space.xs};
-  font-size: 12px;
-  ${(0, import_ds_system.color)("neutral", "700")};
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-  background-color: ${(props) => props.theme.colors.neutral["080"]};
-  border-top: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["080"])};
-  line-height: 24px;
-`;
-const Items = import_styled_components.default.div`
-  display: flex;
-  flex-direction: column;
-`;
-const CardGroup = ({ children, title, action }) => /* @__PURE__ */ import_react.default.createElement(Group, {
-  withTopBorder: !title
-}, !!title && /* @__PURE__ */ import_react.default.createElement(TitleWrapper, null, /* @__PURE__ */ import_react.default.createElement(GroupTitle, null, title), action), /* @__PURE__ */ import_react.default.createElement(Items, null, children));
+const GroupTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1y2lfoo-1"
+})(["", ""], dsSystem.truncate());
+const TitleWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1y2lfoo-2"
+})(["display:flex;justify-content:space-between;padding:0 ", ";font-size:12px;", ";font-weight:", ";background-color:", ";border-top:", ";line-height:24px;"], props => props.theme.space.xs, dsSystem.color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['080'], props => dsSystem.border(props.theme.colors.neutral['080']));
+const Items = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1y2lfoo-3"
+})(["display:flex;flex-direction:column;"]);
+
+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 = {
-  children: import_react_desc.PropTypes.element.isRequired.description("Card items"),
-  title: import_react_desc.PropTypes.string.isRequired.description("Title of the group"),
-  action: import_react_desc.PropTypes.element.description("Right addon action")
+  /**
+   * Card items
+   */
+  children: reactDesc.PropTypes.element.isRequired.description('Card items'),
+
+  /**
+   * Title of the group
+   */
+  title: reactDesc.PropTypes.string.isRequired.description('Title of the group'),
+
+  /**
+   * Right addon action
+   */
+  action: reactDesc.PropTypes.element.description('Right addon action')
 };
-CardGroup.propTypes = cardgroupProps;
-const DSCardGroupWithSchema = (0, import_react_desc.describe)(CardGroup);
+const DSCardGroupWithSchema = reactDesc.describe(CardGroup);
 DSCardGroupWithSchema.propTypes = cardgroupProps;
-var Group_default = CardGroup;
-module.exports = __toCommonJS(Group_exports);
-//# sourceMappingURL=Group.js.map
+
+exports.CardGroup = CardGroup;
+exports.DSCardGroupWithSchema = DSCardGroupWithSchema;
+exports["default"] = CardGroup;

package/cjs/v2/components.js

@@ -1,104 +1,54 @@
-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 components_exports = {};
-__export(components_exports, {
-  CardContainer: () => CardContainer,
-  Description: () => Description,
-  LeftAddon: () => LeftAddon,
-  LeftSection: () => LeftSection,
-  MainSection: () => MainSection,
-  RightAddon: () => RightAddon,
-  RightAddonSection: () => RightAddonSection,
-  Separator: () => Separator,
-  Title: () => Title
-});
-var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_grid = require("@elliemae/ds-grid");
-const CardContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 56px;
-  padding: 8px 16px;
-  position: relative;
-  border: ${({ theme, hasBorder }) => hasBorder ? `1px solid ${theme.colors.neutral["100"]}` : ""};
-  &:before {
-    content: '';
-    border-bottom: 1px solid ${(props) => props.theme.colors.neutral["100"]};
-    position: absolute;
-    margin: 0 auto;
-    width: 90%;
-    bottom: 0;
-  }
-  &:last-child::before {
-    content: none;
-  }
-`;
-const LeftSection = import_styled_components.default.div`
-  display: flex;
-  align-items: center;
-`;
-const LeftAddon = import_styled_components.default.div`
-  height: fit-content;
-  width: fit-content;
-  margin-right: 16px;
-  cursor: pointer;
-`;
-const RightAddonSection = import_styled_components.default.div`
-  display: flex;
-  align-items: center;
-  width: fit-content;
-`;
-const RightAddon = import_styled_components.default.div`
-  height: fit-content;
-  width: fit-content;
-  cursor: pointer;
-`;
-const Separator = import_styled_components.default.div`
-  width: 0px;
-  height: 24px;
-  border-right: 1px solid ${(props) => props.theme.colors.neutral["300"]};
-  margin: 0 8px;
-`;
-const MainSection = import_styled_components.default.div`
-  display: flex;
-  flex-direction: column;
-`;
-const Title = import_styled_components.default.h3`
-  margin: 0;
-  font-size: 16px;
-  font-weight: ${(props) => props.theme.fontWeights.regular};
-  color: ${(props) => props.theme.colors.neutral["800"]};
-`;
-const Description = import_styled_components.default.p`
-  margin: 0;
-  color: ${(props) => props.theme.colors.neutral["600"]};
-`;
-module.exports = __toCommonJS(components_exports);
-//# sourceMappingURL=components.js.map
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 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;}"], _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;"]);
+const LeftAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1cjakml-2"
+})(["height:fit-content;width:fit-content;margin-right:16px;cursor:pointer;"]);
+const RightAddonSection = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1cjakml-3"
+})(["display:flex;align-items:center;width:fit-content;"]);
+const RightAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1cjakml-4"
+})(["height:fit-content;width:fit-content;cursor:pointer;"]);
+const Separator = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1cjakml-5"
+})(["width:0px;height:24px;border-right:1px solid ", ";margin:0 8px;"], props => props.theme.colors.neutral['300']);
+const MainSection = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1cjakml-6"
+})(["display:flex;flex-direction:column;"]);
+const Title = /*#__PURE__*/styled__default["default"].h3.withConfig({
+  componentId: "sc-1cjakml-7"
+})(["margin:0;font-size:16px;font-weight:", ";color:", ";"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['800']);
+const Description = /*#__PURE__*/styled__default["default"].p.withConfig({
+  componentId: "sc-1cjakml-8"
+})(["margin:0;color:", ";"], props => props.theme.colors.neutral['600']);
+
+exports.CardContainer = CardContainer;
+exports.Description = Description;
+exports.LeftAddon = LeftAddon;
+exports.LeftSection = LeftSection;
+exports.MainSection = MainSection;
+exports.RightAddon = RightAddon;
+exports.RightAddonSection = RightAddonSection;
+exports.Separator = Separator;
+exports.Title = Title;