@elliemae/ds-card 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/DSCard.js

@@ -1,38 +1,61 @@
-import * as React from "react";
-import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-import DSCardBody from "./DSCardBody";
-import DSCardHeader from "./DSCardHeader";
-const DSCard = ({
-  innerRef = void 0,
-  children = null,
-  containerProps = {},
-  ...otherProps
-}) => {
-  const { cssClassName } = convertPropToCssClassName("card");
-  return /* @__PURE__ */ React2.createElement("div", {
-    "data-testid": "card",
-    ...containerProps,
+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';
+import { PropTypes, describe } from 'react-desc';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { DSCardBody } from './DSCardBody.js';
+import { DSCardHeader } from './DSCardHeader.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["innerRef", "children", "containerProps"];
+
+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 DSCard = _ref => {
+  let {
+    innerRef = undefined,
+    children = null,
+    containerProps = {}
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    cssClassName
+  } = convertPropToCssClassName('card');
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
+    "data-testid": "card"
+  }, containerProps), {}, {
     ref: innerRef,
-    className: cssClassName,
-    ...otherProps
-  }, children);
+    className: cssClassName
+  }, otherProps), {}, {
+    children: children
+  }));
 };
+
 const cardProps = {
-  containerProps: PropTypes.object.description("inject props to component wrapper"),
-  innerRef: PropTypes.string.description("Get reference for the button"),
+  /** inject props to component wrapper */
+  containerProps: PropTypes.object.description('inject props to component wrapper'),
+
+  /**
+   * Get reference for the button
+   */
+  innerRef: PropTypes.string.description('Get reference for the button'),
+
+  /**
+   * DSCardBody and DSCardHeader
+   */
   children: PropTypes.arrayOf(PropTypes.shape({
     type: PropTypes.oneOf([DSCardHeader, DSCardBody])
-  })).description("DSCardBody and DSCardHeader")
+  })).description('DSCardBody and DSCardHeader')
 };
-DSCard.propTypes = cardProps;
 const DSCardWithSchema = describe(DSCard);
 DSCardWithSchema.propTypes = cardProps;
-var DSCard_default = DSCard;
-export {
-  DSCard,
-  DSCardWithSchema,
-  DSCard_default as default
-};
-//# sourceMappingURL=DSCard.js.map
+
+export { DSCard, DSCardWithSchema, DSCard as default };

package/esm/DSCardBody.js

@@ -1,20 +1,22 @@
-import * as React from "react";
-import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-const DSCardBody = ({ children }) => /* @__PURE__ */ React2.createElement("div", {
-  className: "em-ds-card-body",
-  "data-testid": "card-body"
-}, children);
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+
+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: PropTypes.element.description("children")
+  /** children */
+  children: PropTypes.element.description('children')
 };
-DSCardBody.propTypes = bodyProps;
 const DSCardBodyWithSchema = describe(DSCardBody);
 DSCardBodyWithSchema.propTypes = bodyProps;
-var DSCardBody_default = DSCardBody;
-export {
-  DSCardBody,
-  DSCardBodyWithSchema,
-  DSCardBody_default as default
-};
-//# sourceMappingURL=DSCardBody.js.map
+
+export { DSCardBody, DSCardBodyWithSchema, DSCardBody as default };

package/esm/DSCardHeader.js

@@ -1,30 +1,36 @@
-import * as React from "react";
-import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-const DSCardHeader = ({ title, action }) => {
-  const { cssClassName, classNameElement } = convertPropToCssClassName("card-header");
-  return /* @__PURE__ */ React2.createElement("div", {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+
+const DSCardHeader = _ref => {
+  let {
+    title,
+    action
+  } = _ref;
+  const {
+    cssClassName,
+    classNameElement
+  } = convertPropToCssClassName('card-header');
+  return /*#__PURE__*/_jsx("div", {
     className: cssClassName,
     "data-testid": "card-header"
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: classNameElement("heading")
-  }, title), /* @__PURE__ */ React2.createElement("div", {
-    className: classNameElement("pull-right"),
+  }, void 0, /*#__PURE__*/_jsx("span", {
+    className: classNameElement('heading')
+  }, void 0, title), /*#__PURE__*/_jsx("div", {
+    className: classNameElement('pull-right'),
     "data-testid": "ds-card_header-action"
-  }, action));
+  }, void 0, action));
 };
+
 const cardHeader = {
-  title: PropTypes.string.description("card header title"),
-  action: PropTypes.node.description("action")
+  /** card header title */
+  title: PropTypes.string.description('card header title'),
+
+  /** action */
+  action: PropTypes.node.description('action')
 };
-DSCardHeader.propTypes = cardHeader;
 const DSCardHeaderWithSchema = describe(DSCardHeader);
 DSCardHeaderWithSchema.propTypes = cardHeader;
-var DSCardHeader_default = DSCardHeader;
-export {
-  DSCardHeader,
-  DSCardHeaderWithSchema,
-  DSCardHeader_default as default
-};
-//# sourceMappingURL=DSCardHeader.js.map
+
+export { DSCardHeader, DSCardHeaderWithSchema, DSCardHeader as default };

package/esm/detail/DetailCard.js

@@ -1,127 +1,188 @@
-import * as React from "react";
-import React2 from "react";
-import { compact, noop } from "lodash";
-import { PropTypes, describe } from "react-desc";
-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";
-import { Container, Title, Description, RightAddon, RightDescription, RightValue } from "./styled";
-const DetailCard = ({
-  title,
-  description,
-  descriptionColor = "neutral",
-  rightValue,
-  rightDescription,
-  rightAddon,
-  selectable = false,
-  isSelected = false,
-  onSelect = noop,
-  expandable = false,
-  isExpanded = false,
-  onExpand = noop,
-  expandContent,
-  readOnly = false,
-  disabled = false
-}) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { compact, noop } from 'lodash';
+import { PropTypes, describe } from 'react-desc';
+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';
+import { Container, Title, Description, RightDescription, RightValue, RightAddon } from './styled.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var _Grid, _DSSeparator;
+
+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;
-  const topWrapperCols = ["1fr"];
-  if (hasRightPosition)
-    topWrapperCols.push("auto");
-  if (expandable)
-    topWrapperCols.unshift("20px");
-  if (selectable)
-    topWrapperCols.unshift(theme.space.s);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Container, {
-    disabled: disabled || readOnly,
-    active: selectable && isSelected,
-    "data-testid": "card-detail-container"
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    cols: topWrapperCols,
-    alignItems: !description && "center"
-  }, selectable && /* @__PURE__ */ React2.createElement(Grid, {
-    pt: description && "9px"
-  }, /* @__PURE__ */ React2.createElement(DSCheckbox, {
-    checked: isSelected,
-    onChange: onSelect,
-    readOnly,
-    disabled,
-    "data-testid": "card-checkbox"
-  })), expandable && /* @__PURE__ */ React2.createElement(Grid, {
-    height: "16px",
-    pt: description && "xxs",
-    mt: !description && "-5px"
-  }, /* @__PURE__ */ React2.createElement(DSButton, {
-    size: "s",
-    buttonType: "text",
-    containerProps: {
-      "data-testid": "expand-button"
-    },
-    onClick: onExpand,
-    icon: isExpanded ? /* @__PURE__ */ React2.createElement(ArrowheadDown, {
-      color: ["neutral", 500],
-      size: "s"
-    }) : /* @__PURE__ */ React2.createElement(ArrowheadRight, {
-      color: ["neutral", 500],
-      size: "s"
-    }),
-    disabled
-  })), /* @__PURE__ */ React2.createElement(Grid, {
-    pr: "24px"
-  }, /* @__PURE__ */ React2.createElement(Title, null, title), description && /* @__PURE__ */ React2.createElement(Description, {
-    descriptionColor
-  }, description)), hasRightPosition && /* @__PURE__ */ React2.createElement(Grid, {
-    cols: compact([hasRightPosition && "auto", rightAddon && "auto"])
-  }, hasRightLegend && /* @__PURE__ */ React2.createElement(Grid, {
-    pr: "24px",
-    rows: ["auto", "auto", 1]
-  }, /* @__PURE__ */ React2.createElement(RightDescription, {
-    justifyContent: "flex-end"
-  }, rightDescription), /* @__PURE__ */ React2.createElement(RightValue, {
-    justifyContent: "flex-end"
-  }, rightValue), /* @__PURE__ */ React2.createElement(Grid, null)), rightAddon && /* @__PURE__ */ React2.createElement(RightAddon, {
-    cols: ["auto", "auto"],
-    gutter: "2px"
-  }, rightAddon))), expandContent && isExpanded && /* @__PURE__ */ React2.createElement(Grid, {
-    ml: selectable && "s",
-    mr: rightAddon && "xs"
-  }, /* @__PURE__ */ React2.createElement(DSSeparator, {
-    dashed: true,
-    position: "initial",
-    margin: "none"
-  }), /* @__PURE__ */ React2.createElement(Grid, {
-    pt: "xxs",
-    "data-testid": "detail-card-expanded-content"
-  }, expandContent))));
+  const topWrapperCols = ['1fr'];
+  if (hasRightPosition) topWrapperCols.push('auto');
+  if (expandable) topWrapperCols.unshift('20px');
+  if (selectable) topWrapperCols.unshift(theme.space.s);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/_jsx(Container, {
+      disabled: disabled || readOnly,
+      active: selectable && isSelected,
+      "data-testid": "card-detail-container"
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      cols: topWrapperCols,
+      alignItems: !description && 'center'
+    }, void 0, selectable && /*#__PURE__*/_jsx(Grid, {
+      pt: description && '9px'
+    }, void 0, /*#__PURE__*/_jsx(DSCheckbox, {
+      checked: isSelected,
+      onChange: onSelect,
+      readOnly: readOnly,
+      disabled: disabled,
+      "data-testid": "card-checkbox"
+    })), expandable && /*#__PURE__*/_jsx(Grid, {
+      height: "16px",
+      pt: description && 'xxs',
+      mt: !description && '-5px'
+    }, void 0, /*#__PURE__*/_jsx(DSButton, {
+      size: "s",
+      buttonType: "text",
+      containerProps: {
+        'data-testid': 'expand-button'
+      },
+      onClick: onExpand,
+      icon: isExpanded ? /*#__PURE__*/_jsx(ArrowheadDown, {
+        color: ['neutral', 500],
+        size: "s"
+      }) : /*#__PURE__*/_jsx(ArrowheadRight, {
+        color: ['neutral', 500],
+        size: "s"
+      }),
+      disabled: disabled
+    })), /*#__PURE__*/_jsx(Grid, {
+      pr: "24px"
+    }, void 0, /*#__PURE__*/_jsx(Title, {}, void 0, title), description && /*#__PURE__*/_jsx(Description, {
+      descriptionColor: descriptionColor
+    }, void 0, description)), hasRightPosition && /*#__PURE__*/_jsx(Grid, {
+      cols: compact([hasRightPosition && 'auto', rightAddon && 'auto'])
+    }, void 0, hasRightLegend && /*#__PURE__*/_jsx(Grid, {
+      pr: "24px",
+      rows: ['auto', 'auto', 1]
+    }, void 0, /*#__PURE__*/_jsx(RightDescription, {
+      justifyContent: "flex-end"
+    }, void 0, rightDescription), /*#__PURE__*/_jsx(RightValue, {
+      justifyContent: "flex-end"
+    }, void 0, rightValue), _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}))), rightAddon && /*#__PURE__*/_jsx(RightAddon, {
+      cols: ['auto', 'auto'],
+      gutter: "2px"
+    }, void 0, rightAddon))), expandContent && isExpanded && /*#__PURE__*/_jsx(Grid, {
+      ml: selectable && 's',
+      mr: rightAddon && 'xs'
+    }, void 0, _DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx(DSSeparator, {
+      dashed: true,
+      position: "initial",
+      margin: "none"
+    })), /*#__PURE__*/_jsx(Grid, {
+      pt: "xxs",
+      "data-testid": "detail-card-expanded-content"
+    }, void 0, expandContent)))
+  });
 };
+
 const detailProps = {
-  title: PropTypes.string.isRequired.description("Title of the card."),
-  description: PropTypes.string.description("Description of the card."),
-  descriptionColor: PropTypes.oneOf(["primary", "neutral"]).description("Description color."),
-  rightValue: PropTypes.string.description("Right value (should be used with `rightDescription`)"),
-  rightDescription: PropTypes.string.description("Right description (should be used with `rightValue`)"),
-  rightAddon: PropTypes.element.description("Right addon array, max elements: 2"),
-  selectable: PropTypes.bool.description("Whether if the card is selectable or not"),
-  isSelected: PropTypes.bool.description("Whether if the card is selected or not"),
-  onSelect: PropTypes.func.description("Callback on selection"),
-  expandable: PropTypes.bool.description("Whether if the card is expandable or not"),
-  isExpanded: PropTypes.bool.description("Whether if the card is expanded or not"),
-  onExpand: PropTypes.func.description("Callback on expand"),
-  expandContent: PropTypes.element.description("Content"),
-  readOnly: PropTypes.bool.description("Read only"),
-  disabled: PropTypes.bool.description("Disabled")
+  /**
+   * Title of the card.
+   */
+  title: PropTypes.string.isRequired.description('Title of the card.'),
+
+  /**
+   * Description of the card.
+   */
+  description: PropTypes.string.description('Description of the card.'),
+
+  /**
+   * Description color.
+   */
+  descriptionColor: PropTypes.oneOf(['primary', 'neutral']).description('Description color.'),
+
+  /**
+   * Right value (should be used with `rightDescription`)
+   */
+  rightValue: PropTypes.string.description('Right value (should be used with `rightDescription`)'),
+
+  /**
+   * Right description (should be used with `rightValue`)
+   */
+  rightDescription: PropTypes.string.description('Right description (should be used with `rightValue`)'),
+
+  /**
+   * Right addon array, max elements: 2
+   */
+  rightAddon: PropTypes.element.description('Right addon array, max elements: 2'),
+
+  /**
+   * Whether if the card is selectable or not
+   */
+  selectable: PropTypes.bool.description('Whether if the card is selectable or not'),
+
+  /**
+   * Whether if the card is selected or not
+   */
+  isSelected: PropTypes.bool.description('Whether if the card is selected or not'),
+
+  /**
+   * Callback on selection
+   */
+  onSelect: PropTypes.func.description('Callback on selection'),
+
+  /**
+   * Whether if the card is expandable or not
+   */
+  expandable: PropTypes.bool.description('Whether if the card is expandable or not'),
+
+  /**
+   * Whether if the card is expanded or not
+   */
+  isExpanded: PropTypes.bool.description('Whether if the card is expanded or not'),
+
+  /**
+   * Callback on expand
+   */
+  onExpand: PropTypes.func.description('Callback on expand'),
+
+  /**
+   * Content
+   */
+  expandContent: PropTypes.element.description('Content'),
+
+  /**
+   * Read only
+   */
+  readOnly: PropTypes.bool.description('Read only'),
+
+  /**
+   * Disabled
+   */
+  disabled: PropTypes.bool.description('Disabled')
 };
-DetailCard.propTypes = detailProps;
 const DSCardDetailWithSchema = describe(DetailCard);
 DSCardDetailWithSchema.propTypes = detailProps;
-var DetailCard_default = DetailCard;
-export {
-  DSCardDetailWithSchema,
-  DetailCard,
-  DetailCard_default as default
-};
-//# sourceMappingURL=DetailCard.js.map
+
+export { DSCardDetailWithSchema, DetailCard, DetailCard as default };

package/esm/detail/styled.js

@@ -1,78 +1,46 @@
-import * as React from "react";
-import styled from "styled-components";
-import { Grid } from "@elliemae/ds-grid";
-const Separator = styled.div`
-  width: 100%;
-  height: 24px;
-  border-right: 1px solid ${(props) => props.theme.colors.neutral["300"]};
-  margin: 0 8px;
-`;
-const Title = styled.h3`
-  margin: 0;
-  font-size: 16px;
-  min-height: 20px;
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-  color: ${(props) => props.theme.colors.neutral["700"]};
-`;
-const Description = styled.p`
-  margin: 0;
-  font-size: 12px;
-  min-height: 18px;
-  display: flex;
-  align-items: center;
-  color: ${(props) => props.descriptionColor === "neutral" ? props.theme.colors.neutral["600"] : props.theme.colors.brand["600"]};
-`;
-const RightAddon = styled(Grid)`
-  margin: 0;
-  white-space: nowrap;
-`;
-const RightDescription = styled(Grid)`
-  margin: 0;
-  white-space: nowrap;
-  font-size: 12px;
-  color: ${(props) => props.theme.colors.neutral["600"]};
-`;
-const RightValue = styled(Grid)`
-  margin: 0;
-  white-space: nowrap;
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.neutral["800"]};
-`;
-const ExpandContent = styled.div`
-  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 Container = styled(Grid)`
-  width: 100%;
-  min-height: 52px;
-  min-width: 244px;
-  padding: 6px 8px 6px 12px;
-  position: relative;
-  border-top: 1px solid ${border};
-  border-bottom: 1px solid ${border};
-  background: ${background};
-  ${(props) => props.disabled ? `
-    ${Title}, ${Description}, ${RightDescription}, ${RightValue} {
-      color: ${props.theme.colors.neutral["500"]};
-    }
-  ` : ""}
-  &:hover {
-    box-shadow: 0 2px 4px 0 rgba(53, 60, 70, 0.5);
-    z-index: 1;
-  }
-  /* & + ${Container} {
-    border-top-color: blue;
-  } */
-`;
-export {
-  Container,
-  Description,
-  ExpandContent,
-  RightAddon,
-  RightDescription,
-  RightValue,
-  Separator,
-  Title
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+
+const Separator = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-nx8lwv-0"
+})(["width:100%;height:24px;border-right:1px solid ", ";margin:0 8px;"], props => props.theme.colors.neutral['300']);
+const Title = /*#__PURE__*/styled.h3.withConfig({
+  componentId: "sc-nx8lwv-1"
+})(["margin:0;font-size:16px;min-height:20px;font-weight:", ";color:", ";"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['700']);
+const Description = /*#__PURE__*/styled.p.withConfig({
+  componentId: "sc-nx8lwv-2"
+})(["margin:0;font-size:12px;min-height:18px;display:flex;align-items:center;color:", ";"], props => props.descriptionColor === 'neutral' ? props.theme.colors.neutral['600'] : props.theme.colors.brand['600']);
+const RightAddon = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-nx8lwv-3"
+})(["margin:0;white-space:nowrap;"]);
+const RightDescription = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-nx8lwv-4"
+})(["margin:0;white-space:nowrap;font-size:12px;color:", ";"], props => props.theme.colors.neutral['600']);
+const RightValue = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-nx8lwv-5"
+})(["margin:0;white-space:nowrap;font-size:14px;color:", ";"], props => props.theme.colors.neutral['800']);
+const ExpandContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-nx8lwv-6"
+})(["font-size:12px;"]);
+
+const border = _ref => {
+  let {
+    active,
+    theme
+  } = _ref;
+  return active ? theme.colors.brand['600'] : theme.colors.neutral['200'];
 };
-//# sourceMappingURL=styled.js.map
+
+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"
+})(["width:100%;min-height:52px;min-width:244px;padding:6px 8px 6px 12px;position:relative;border-top:1px solid ", ";border-bottom:1px solid ", ";background:", ";", " &:hover{box-shadow:0 2px 4px 0 rgba(53,60,70,0.5);z-index:1;}"], border, border, background, props => props.disabled ? "\n    ".concat(Title, ", ").concat(Description, ", ").concat(RightDescription, ", ").concat(RightValue, " {\n      color: ").concat(props.theme.colors.neutral['500'], ";\n    }\n  ") : '');
+
+export { Container, Description, ExpandContent, RightAddon, RightDescription, RightValue, Separator, Title };

package/esm/index.js

@@ -1,13 +1,7 @@
-import * as React from "react";
-export * from "./DSCard";
-export * from "./DSCardHeader";
-export * from "./DSCardBody";
-export * from "./v2/Card";
-export * from "./v2/Group";
-export * from "./v2/ActionAddon";
-export * from "./detail/DetailCard";
-import { default as default2 } from "./DSCard";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export { DSCard, DSCardWithSchema, DSCard as default } from './DSCard.js';
+export { DSCardHeader, DSCardHeaderWithSchema } from './DSCardHeader.js';
+export { DSCardBody, DSCardBodyWithSchema } from './DSCardBody.js';
+export { CustomCard, DSCardCustomWithSchema } from './v2/Card.js';
+export { CardGroup, DSCardGroupWithSchema } from './v2/Group.js';
+export { ActionAddon, DSCardActionAddonWithSchema } from './v2/ActionAddon.js';
+export { DSCardDetailWithSchema, DetailCard } from './detail/DetailCard.js';