@elliemae/ds-card 2.1.0-rc.7 → 2.2.0-alpha.2

package/esm/v2/Card.js

@@ -1,77 +1,64 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { PropTypes, describe } from 'react-desc';
-import { DSHeader } from '@elliemae/ds-header';
-import DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';
-import { CardContainer, LeftSection, LeftAddon, MainSection, Description, RightAddonSection, RightAddon, Separator } from './components.js';
-import { jsxs, Fragment } from 'react/jsx-runtime';
-
-var _Separator;
-
-const getCol = rightAddon => {
-  if (!rightAddon) return [1];
-  return [1, 'auto'];
+import * as React from "react";
+import React2 from "react";
+import { PropTypes, describe } from "react-desc";
+import { DSHeader } from "@elliemae/ds-header";
+import DSTruncatedTooltipText, {
+  TooltipTextProvider
+} from "@elliemae/ds-truncated-tooltip-text";
+import {
+  CardContainer,
+  LeftSection,
+  LeftAddon,
+  RightAddonSection,
+  RightAddon,
+  Separator,
+  MainSection,
+  Description
+} from "./components";
+const getCol = (rightAddon) => {
+  if (!rightAddon)
+    return [1];
+  return [1, "auto"];
 };
-
-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 CustomCard = ({
+  title,
+  description,
+  leftAddon,
+  rightAddon,
+  hasBorder = false
+}) => /* @__PURE__ */ React2.createElement(TooltipTextProvider, null, /* @__PURE__ */ React2.createElement(CardContainer, {
+  hasBorder,
+  cols: getCol(rightAddon),
+  "data-testid": "em-ds-card"
+}, /* @__PURE__ */ React2.createElement(LeftSection, null, leftAddon && /* @__PURE__ */ React2.createElement(LeftAddon, null, leftAddon), /* @__PURE__ */ React2.createElement(MainSection, {
+  style: {
+    maxWidth: leftAddon ? "calc(100% - 40px)" : "100%"
+  }
+}, /* @__PURE__ */ React2.createElement(DSHeader, {
+  fontSize: "16px",
+  "data-testid": "em-ds-card-header",
+  fontWeight: "regular",
+  color: "neutral.800",
+  text: /* @__PURE__ */ React2.createElement(DSTruncatedTooltipText, {
+    value: title
+  })
+}), description && /* @__PURE__ */ React2.createElement(Description, null, /* @__PURE__ */ React2.createElement(DSTruncatedTooltipText, {
+  value: description
+})))), rightAddon && /* @__PURE__ */ React2.createElement(RightAddonSection, null, rightAddon[0] && /* @__PURE__ */ React2.createElement(RightAddon, null, rightAddon[0]), rightAddon[1] && /* @__PURE__ */ React2.createElement(React2.Fragment, null, rightAddon.length > 1 && /* @__PURE__ */ React2.createElement(Separator, null), /* @__PURE__ */ React2.createElement(RightAddon, null, rightAddon[1])))));
 const cardProps = {
-  /**
-   * Title of the card. requiered
-   */
-  title: PropTypes.string.isRequired.description('Title of the card. requiered'),
-
-  /**
-   * Description of the card. not requiered
-   */
-  description: PropTypes.string.description('Description of the card. not requiered'),
-
-  /**
-   * Left Addon
-   */
-  leftAddon: PropTypes.element.description('Left Addon'),
-
-  /**
-   * Right addon array, max elements: 2
-   */
-  rightAddon: PropTypes.array.description('Right addon array, max elements: 2'),
-
-  /**
-   * Wheter if the card has border or not
-   */
-  hasBorder: PropTypes.bool.description('Wheter if the card has border or not')
+  title: PropTypes.string.isRequired.description("Title of the card. requiered"),
+  description: PropTypes.string.description("Description of the card. not requiered"),
+  leftAddon: PropTypes.element.description("Left Addon"),
+  rightAddon: PropTypes.array.description("Right addon array, max elements: 2"),
+  hasBorder: PropTypes.bool.description("Wheter if the card has border or not")
 };
+CustomCard.propTypes = cardProps;
 const DSCardCustomWithSchema = describe(CustomCard);
 DSCardCustomWithSchema.propTypes = cardProps;
-
-export { CustomCard, DSCardCustomWithSchema, CustomCard as default };
+var Card_default = CustomCard;
+export {
+  CustomCard,
+  DSCardCustomWithSchema,
+  Card_default as default
+};
+//# sourceMappingURL=Card.js.map

package/esm/v2/Card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/Card.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSHeader } from '@elliemae/ds-header';\nimport DSTruncatedTooltipText, {\n  TooltipTextProvider,\n} from '@elliemae/ds-truncated-tooltip-text';\nimport {\n  CardContainer,\n  LeftSection,\n  LeftAddon,\n  RightAddonSection,\n  RightAddon,\n  Separator,\n  MainSection,\n  Description,\n} from './components';\n\nconst getCol = (rightAddon) => {\n  if (!rightAddon) return [1];\n  return [1, 'auto'];\n};\n\nconst CustomCard = ({\n  title,\n  description,\n  leftAddon,\n  rightAddon, // array. max 2 elements\n  hasBorder = false,\n}) => (\n  <TooltipTextProvider>\n    <CardContainer\n      hasBorder={hasBorder}\n      cols={getCol(rightAddon)}\n      data-testid=\"em-ds-card\"\n    >\n      <LeftSection>\n        {leftAddon && <LeftAddon>{leftAddon}</LeftAddon>}\n        <MainSection\n          style={{\n            maxWidth: leftAddon ? 'calc(100% - 40px)' : '100%',\n          }}\n        >\n          <DSHeader\n            fontSize=\"16px\"\n            data-testid=\"em-ds-card-header\"\n            fontWeight=\"regular\"\n            color=\"neutral.800\"\n            text={<DSTruncatedTooltipText value={title} />}\n          />\n          {description && (\n            <Description>\n              <DSTruncatedTooltipText value={description} />\n            </Description>\n          )}\n        </MainSection>\n      </LeftSection>\n      {rightAddon && (\n        <RightAddonSection>\n          {rightAddon[0] && <RightAddon>{rightAddon[0]}</RightAddon>}\n          {rightAddon[1] && (\n            <>\n              {rightAddon.length > 1 && <Separator />}\n              <RightAddon>{rightAddon[1]}</RightAddon>\n            </>\n          )}\n        </RightAddonSection>\n      )}\n    </CardContainer>\n  </TooltipTextProvider>\n);\n\nconst cardProps = {\n  /**\n   * Title of the card. requiered\n   */\n  title: PropTypes.string.isRequired.description(\n    'Title of the card. requiered',\n  ),\n  /**\n   * Description of the card. not requiered\n   */\n  description: PropTypes.string.description(\n    'Description of the card. not requiered',\n  ),\n  /**\n   * Left Addon\n   */\n  leftAddon: PropTypes.element.description('Left Addon'),\n  /**\n   * Right addon array, max elements: 2\n   */\n  rightAddon: PropTypes.array.description('Right addon array, max elements: 2'),\n  /**\n   * Wheter if the card has border or not\n   */\n  hasBorder: PropTypes.bool.description('Wheter if the card has border or not'),\n};\n\nCustomCard.propTypes = cardProps;\nconst DSCardCustomWithSchema = describe(CustomCard);\nDSCardCustomWithSchema.propTypes = cardProps;\n\nexport { CustomCard, DSCardCustomWithSchema };\nexport default CustomCard;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA,MAAM,SAAS,CAAC,eAAe;AAC7B,MAAI,CAAC;AAAY,WAAO,CAAC;AACzB,SAAO,CAAC,GAAG;AAAA;AAGb,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,MAEZ,qCAAC,qBAAD,MACE,qCAAC,eAAD;AAAA,EACE;AAAA,EACA,MAAM,OAAO;AAAA,EACb,eAAY;AAAA,GAEZ,qCAAC,aAAD,MACG,aAAa,qCAAC,WAAD,MAAY,YAC1B,qCAAC,aAAD;AAAA,EACE,OAAO;AAAA,IACL,UAAU,YAAY,sBAAsB;AAAA;AAAA,GAG9C,qCAAC,UAAD;AAAA,EACE,UAAS;AAAA,EACT,eAAY;AAAA,EACZ,YAAW;AAAA,EACX,OAAM;AAAA,EACN,MAAM,qCAAC,wBAAD;AAAA,IAAwB,OAAO;AAAA;AAAA,IAEtC,eACC,qCAAC,aAAD,MACE,qCAAC,wBAAD;AAAA,EAAwB,OAAO;AAAA,OAKtC,cACC,qCAAC,mBAAD,MACG,WAAW,MAAM,qCAAC,YAAD,MAAa,WAAW,KACzC,WAAW,MACV,4DACG,WAAW,SAAS,KAAK,qCAAC,WAAD,OAC1B,qCAAC,YAAD,MAAa,WAAW;AAStC,MAAM,YAAY;AAAA,EAIhB,OAAO,UAAU,OAAO,WAAW,YACjC;AAAA,EAKF,aAAa,UAAU,OAAO,YAC5B;AAAA,EAKF,WAAW,UAAU,QAAQ,YAAY;AAAA,EAIzC,YAAY,UAAU,MAAM,YAAY;AAAA,EAIxC,WAAW,UAAU,KAAK,YAAY;AAAA;AAGxC,WAAW,YAAY;AACvB,MAAM,yBAAyB,SAAS;AACxC,uBAAuB,YAAY;AAGnC,IAAO,eAAQ;",
+  "names": []
+}

package/esm/v2/Group.js

@@ -1,57 +1,52 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { PropTypes, describe } from 'react-desc';
-import styled from 'styled-components';
-import { truncate, color, border } from '@elliemae/ds-system';
-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, _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());
-const TitleWrapper = /*#__PURE__*/styled.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, color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['080'], props => border(props.theme.colors.neutral['080']));
-const Items = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1y2lfoo-3"
-})(["display:flex;flex-direction:column;"]);
-
-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));
-};
-
+import * as React from "react";
+import React2 from "react";
+import { PropTypes, describe } from "react-desc";
+import styled from "styled-components";
+import { color, border, truncate } from "@elliemae/ds-system";
+import Card from "./Card";
+const Group = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 100%;
+  ${Card} {
+    border-top: none;
+  }
+  ${({ theme, withTopBorder }) => withTopBorder ? `border-top: ${theme.colors.neutral["100"]}` : ""}
+`;
+const GroupTitle = styled.span`
+  ${truncate()}
+`;
+const TitleWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0 ${(props) => props.theme.space.xs};
+  font-size: 12px;
+  ${color("neutral", "700")};
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  background-color: ${(props) => props.theme.colors.neutral["080"]};
+  border-top: ${(props) => border(props.theme.colors.neutral["080"])};
+  line-height: 24px;
+`;
+const Items = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const CardGroup = ({ children, title, action }) => /* @__PURE__ */ React2.createElement(Group, {
+  withTopBorder: !title
+}, !!title && /* @__PURE__ */ React2.createElement(TitleWrapper, null, /* @__PURE__ */ React2.createElement(GroupTitle, null, title), action), /* @__PURE__ */ React2.createElement(Items, null, children));
 const cardgroupProps = {
-  /**
-   * Card items
-   */
-  children: PropTypes.element.isRequired.description('Card items'),
-
-  /**
-   * Title of the group
-   */
-  title: PropTypes.string.isRequired.description('Title of the group'),
-
-  /**
-   * Right addon action
-   */
-  action: PropTypes.element.description('Right addon action')
+  children: PropTypes.element.isRequired.description("Card items"),
+  title: PropTypes.string.isRequired.description("Title of the group"),
+  action: PropTypes.element.description("Right addon action")
 };
+CardGroup.propTypes = cardgroupProps;
 const DSCardGroupWithSchema = describe(CardGroup);
 DSCardGroupWithSchema.propTypes = cardgroupProps;
-
-export { CardGroup, DSCardGroupWithSchema, CardGroup as default };
+var Group_default = CardGroup;
+export {
+  CardGroup,
+  DSCardGroupWithSchema,
+  Group_default as default
+};
+//# sourceMappingURL=Group.js.map

package/esm/v2/Group.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/Group.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { color, border, truncate } from '@elliemae/ds-system';\nimport Card from './Card';\n\nconst Group = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 100%;\n  ${Card} {\n    border-top: none;\n  }\n  ${({ theme, withTopBorder }) =>\n    withTopBorder ? `border-top: ${theme.colors.neutral['100']}` : ''}\n`;\n\nconst GroupTitle = styled.span`\n  ${truncate()}\n`;\n\nconst TitleWrapper = styled.div`\n  display: flex;\n  justify-content: space-between;\n  padding: 0 ${(props) => props.theme.space.xs};\n  font-size: 12px;\n  ${color('neutral', '700')};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  background-color: ${(props) => props.theme.colors.neutral['080']};\n  border-top: ${(props) => border(props.theme.colors.neutral['080'])};\n  line-height: 24px;\n`;\n\nconst Items = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst CardGroup = ({ children, title, action }) => (\n  <Group withTopBorder={!title}>\n    {!!title && (\n      <TitleWrapper>\n        <GroupTitle>{title}</GroupTitle>\n        {action}\n      </TitleWrapper>\n    )}\n    <Items>{children}</Items>\n  </Group>\n);\n\nconst cardgroupProps = {\n  /**\n   * Card items\n   */\n  children: PropTypes.element.isRequired.description('Card items'),\n  /**\n   * Title of the group\n   */\n  title: PropTypes.string.isRequired.description('Title of the group'),\n  /**\n   * Right addon action\n   */\n  action: PropTypes.element.description('Right addon action'),\n};\n\nCardGroup.propTypes = cardgroupProps;\nconst DSCardGroupWithSchema = describe(CardGroup);\nDSCardGroupWithSchema.propTypes = cardgroupProps;\n\nexport { CardGroup, DSCardGroupWithSchema };\nexport default CardGroup;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjB;AAAA;AAAA;AAAA,IAGA,CAAC,EAAE,OAAO,oBACV,gBAAgB,eAAe,MAAM,OAAO,QAAQ,WAAW;AAAA;AAGnE,MAAM,aAAa,OAAO;AAAA,IACtB;AAAA;AAGJ,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA,eAGb,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,IAExC,MAAM,WAAW;AAAA,iBACJ,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,sBAC9B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBAC5C,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI7D,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAKrB,MAAM,YAAY,CAAC,EAAE,UAAU,OAAO,aACpC,qCAAC,OAAD;AAAA,EAAO,eAAe,CAAC;AAAA,GACpB,CAAC,CAAC,SACD,qCAAC,cAAD,MACE,qCAAC,YAAD,MAAa,QACZ,SAGL,qCAAC,OAAD,MAAQ;AAIZ,MAAM,iBAAiB;AAAA,EAIrB,UAAU,UAAU,QAAQ,WAAW,YAAY;AAAA,EAInD,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAI/C,QAAQ,UAAU,QAAQ,YAAY;AAAA;AAGxC,UAAU,YAAY;AACtB,MAAM,wBAAwB,SAAS;AACvC,sBAAsB,YAAY;AAGlC,IAAO,gBAAQ;",
+  "names": []
+}

package/esm/v2/components.js

@@ -1,38 +1,75 @@
-import styled from 'styled-components';
-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;}"], _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;"]);
-const LeftAddon = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1cjakml-2"
-})(["height:fit-content;width:fit-content;margin-right:16px;cursor:pointer;"]);
-const RightAddonSection = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1cjakml-3"
-})(["display:flex;align-items:center;width:fit-content;"]);
-const RightAddon = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1cjakml-4"
-})(["height:fit-content;width:fit-content;cursor:pointer;"]);
-const Separator = /*#__PURE__*/styled.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.div.withConfig({
-  componentId: "sc-1cjakml-6"
-})(["display:flex;flex-direction:column;"]);
-const Title = /*#__PURE__*/styled.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.p.withConfig({
-  componentId: "sc-1cjakml-8"
-})(["margin:0;color:", ";"], props => props.theme.colors.neutral['600']);
-
-export { CardContainer, Description, LeftAddon, LeftSection, MainSection, RightAddon, RightAddonSection, Separator, Title };
+import * as React from "react";
+import styled from "styled-components";
+import { Grid } from "@elliemae/ds-grid";
+const CardContainer = styled(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 = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const LeftAddon = styled.div`
+  height: fit-content;
+  width: fit-content;
+  margin-right: 16px;
+  cursor: pointer;
+`;
+const RightAddonSection = styled.div`
+  display: flex;
+  align-items: center;
+  width: fit-content;
+`;
+const RightAddon = styled.div`
+  height: fit-content;
+  width: fit-content;
+  cursor: pointer;
+`;
+const Separator = styled.div`
+  width: 0px;
+  height: 24px;
+  border-right: 1px solid ${(props) => props.theme.colors.neutral["300"]};
+  margin: 0 8px;
+`;
+const MainSection = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const Title = styled.h3`
+  margin: 0;
+  font-size: 16px;
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+  color: ${(props) => props.theme.colors.neutral["800"]};
+`;
+const Description = styled.p`
+  margin: 0;
+  color: ${(props) => props.theme.colors.neutral["600"]};
+`;
+export {
+  CardContainer,
+  Description,
+  LeftAddon,
+  LeftSection,
+  MainSection,
+  RightAddon,
+  RightAddonSection,
+  Separator,
+  Title
+};
+//# sourceMappingURL=components.js.map

package/esm/v2/components.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/components.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst CardContainer = styled(Grid)`\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 56px;\n  padding: 8px 16px;\n  position: relative;\n  border: ${({ theme, hasBorder }) =>\n    hasBorder ? `1px solid ${theme.colors.neutral['100']}` : ''};\n  &:before {\n    content: '';\n    border-bottom: 1px solid ${(props) => props.theme.colors.neutral['100']};\n    position: absolute;\n    margin: 0 auto;\n    width: 90%;\n    bottom: 0;\n  }\n  &:last-child::before {\n    content: none;\n  }\n`;\n\nconst LeftSection = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled.div`\n  height: fit-content;\n  width: fit-content;\n  margin-right: 16px;\n  cursor: pointer;\n`;\n\nconst RightAddonSection = styled.div`\n  display: flex;\n  align-items: center;\n  width: fit-content;\n`;\n\nconst RightAddon = styled.div`\n  height: fit-content;\n  width: fit-content;\n  cursor: pointer;\n`;\n\nconst Separator = styled.div`\n  width: 0px;\n  height: 24px;\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['300']};\n  margin: 0 8px;\n`;\n\nconst MainSection = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst Title = styled.h3`\n  margin: 0;\n  font-size: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['800']};\n`;\n\nconst Description = styled.p`\n  margin: 0;\n  color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nexport {\n  CardContainer,\n  LeftSection,\n  LeftAddon,\n  RightAddonSection,\n  RightAddon,\n  Separator,\n  MainSection,\n  Title,\n  Description,\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOjB,CAAC,EAAE,OAAO,gBAClB,YAAY,aAAa,MAAM,OAAO,QAAQ,WAAW;AAAA;AAAA;AAAA,+BAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWrE,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAK3B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMjC,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA,4BAGG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIlE,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAK3B,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA,iBAGJ,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGjD,MAAM,cAAc,OAAO;AAAA;AAAA,WAEhB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-card",
-  "version": "2.1.0-rc.7",
+  "version": "2.2.0-alpha.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Card",
   "module": "./esm/index.js",
@@ -68,15 +68,15 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.1.0-rc.7",
-    "@elliemae/ds-classnames": "2.1.0-rc.7",
-    "@elliemae/ds-form": "2.1.0-rc.7",
-    "@elliemae/ds-grid": "2.1.0-rc.7",
-    "@elliemae/ds-header": "2.1.0-rc.7",
-    "@elliemae/ds-icons": "2.1.0-rc.7",
-    "@elliemae/ds-separator": "2.1.0-rc.7",
-    "@elliemae/ds-system": "2.1.0-rc.7",
-    "@elliemae/ds-truncated-tooltip-text": "2.1.0-rc.7",
+    "@elliemae/ds-button": "2.2.0-alpha.2",
+    "@elliemae/ds-classnames": "2.2.0-alpha.2",
+    "@elliemae/ds-form": "2.2.0-alpha.2",
+    "@elliemae/ds-grid": "2.2.0-alpha.2",
+    "@elliemae/ds-header": "2.2.0-alpha.2",
+    "@elliemae/ds-icons": "2.2.0-alpha.2",
+    "@elliemae/ds-separator": "2.2.0-alpha.2",
+    "@elliemae/ds-system": "2.2.0-alpha.2",
+    "@elliemae/ds-truncated-tooltip-text": "2.2.0-alpha.2",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {