@elliemae/ds-card 3.0.0-next.2 → 3.0.0-next.6

package/dist/esm/detail/DetailCard.js

@@ -0,0 +1,127 @@
+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
+}) => {
+  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 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")
+};
+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

package/dist/esm/detail/DetailCard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/detail/DetailCard.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable complexity */\nimport React from 'react';\nimport { compact, noop } from 'lodash';\nimport { PropTypes, describe } from 'react-desc';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { useTheme } from '@elliemae/ds-system';\nimport DSButton from '@elliemae/ds-button';\nimport DSSeparator from '@elliemae/ds-separator';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Container, Title, Description, RightAddon, RightDescription, RightValue } from './styled';\n\nconst DetailCard = ({\n  title,\n  description,\n  descriptionColor = 'neutral',\n  rightValue,\n  rightDescription,\n  rightAddon,\n  // select props\n  selectable = false,\n  isSelected = false,\n  onSelect = noop,\n  // expand props\n  expandable = false,\n  isExpanded = false,\n  onExpand = noop,\n  expandContent,\n  // state props\n  readOnly = false,\n  disabled = false,\n}) => {\n  const theme = useTheme();\n  const hasRightLegend = rightValue && rightDescription;\n  const hasRightPosition = hasRightLegend || rightAddon;\n  const topWrapperCols = ['1fr'];\n  if (hasRightPosition) topWrapperCols.push('auto');\n  if (expandable) topWrapperCols.unshift('20px');\n  if (selectable) topWrapperCols.unshift(theme.space.s);\n  return (\n    <>\n      <Container disabled={disabled || readOnly} active={selectable && isSelected} data-testid=\"card-detail-container\">\n        <Grid cols={topWrapperCols} alignItems={!description && 'center'}>\n          {selectable && (\n            <Grid pt={description && '9px'}>\n              <DSCheckbox\n                checked={isSelected}\n                onChange={onSelect}\n                readOnly={readOnly}\n                disabled={disabled}\n                data-testid=\"card-checkbox\"\n              />\n            </Grid>\n          )}\n          {expandable && (\n            <Grid height=\"16px\" pt={description && 'xxs'} mt={!description && '-5px'}>\n              <DSButton\n                size=\"s\"\n                buttonType=\"text\"\n                containerProps={{\n                  'data-testid': 'expand-button',\n                }}\n                onClick={onExpand}\n                icon={\n                  isExpanded ? (\n                    <ArrowheadDown color={['neutral', 500]} size=\"s\" />\n                  ) : (\n                    <ArrowheadRight color={['neutral', 500]} size=\"s\" />\n                  )\n                }\n                disabled={disabled}\n              />\n            </Grid>\n          )}\n          <Grid pr=\"24px\">\n            <Title>{title}</Title>\n            {description && <Description descriptionColor={descriptionColor}>{description}</Description>}\n          </Grid>\n          {hasRightPosition && (\n            <Grid cols={compact([hasRightPosition && 'auto', rightAddon && 'auto'])}>\n              {hasRightLegend && (\n                <Grid pr=\"24px\" rows={['auto', 'auto', 1]}>\n                  <RightDescription justifyContent=\"flex-end\">{rightDescription}</RightDescription>\n                  <RightValue justifyContent=\"flex-end\">{rightValue}</RightValue>\n                  <Grid />\n                </Grid>\n              )}\n              {rightAddon && (\n                <RightAddon cols={['auto', 'auto']} gutter=\"2px\">\n                  {rightAddon}\n                </RightAddon>\n              )}\n            </Grid>\n          )}\n        </Grid>\n        {expandContent && isExpanded && (\n          <Grid ml={selectable && 's'} mr={rightAddon && 'xs'}>\n            <DSSeparator dashed position=\"initial\" margin=\"none\" />\n            <Grid pt=\"xxs\" data-testid=\"detail-card-expanded-content\">\n              {expandContent}\n            </Grid>\n          </Grid>\n        )}\n      </Container>\n    </>\n  );\n};\n\nconst detailProps = {\n  /**\n   * Title of the card.\n   */\n  title: PropTypes.string.isRequired.description('Title of the card.'),\n  /**\n   * Description of the card.\n   */\n  description: PropTypes.string.description('Description of the card.'),\n  /**\n   * Description color.\n   */\n  descriptionColor: PropTypes.oneOf(['primary', 'neutral']).description('Description color.'),\n  /**\n   * Right value (should be used with `rightDescription`)\n   */\n  rightValue: PropTypes.string.description('Right value (should be used with `rightDescription`)'),\n  /**\n   * Right description (should be used with `rightValue`)\n   */\n  rightDescription: PropTypes.string.description('Right description (should be used with `rightValue`)'),\n  /**\n   * Right addon array, max elements: 2\n   */\n  rightAddon: PropTypes.element.description('Right addon array, max elements: 2'),\n  /**\n   * Whether if the card is selectable or not\n   */\n  selectable: PropTypes.bool.description('Whether if the card is selectable or not'),\n  /**\n   * Whether if the card is selected or not\n   */\n  isSelected: PropTypes.bool.description('Whether if the card is selected or not'),\n  /**\n   * Callback on selection\n   */\n  onSelect: PropTypes.func.description('Callback on selection'),\n  /**\n   * Whether if the card is expandable or not\n   */\n  expandable: PropTypes.bool.description('Whether if the card is expandable or not'),\n  /**\n   * Whether if the card is expanded or not\n   */\n  isExpanded: PropTypes.bool.description('Whether if the card is expanded or not'),\n  /**\n   * Callback on expand\n   */\n  onExpand: PropTypes.func.description('Callback on expand'),\n  /**\n   * Content\n   */\n  expandContent: PropTypes.element.description('Content'),\n  /**\n   * Read only\n   */\n  readOnly: PropTypes.bool.description('Read only'),\n  /**\n   * Disabled\n   */\n  disabled: PropTypes.bool.description('Disabled'),\n};\n\nDetailCard.propTypes = detailProps;\nconst DSCardDetailWithSchema = describe(DetailCard);\nDSCardDetailWithSchema.propTypes = detailProps;\n\nexport { DetailCard, DSCardDetailWithSchema };\nexport default DetailCard;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/detail/styled.js

@@ -0,0 +1,75 @@
+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;
+  }
+`;
+export {
+  Container,
+  Description,
+  ExpandContent,
+  RightAddon,
+  RightDescription,
+  RightValue,
+  Separator,
+  Title
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/detail/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/detail/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const Separator = styled.div`\n  width: 100%;\n  height: 24px;\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['300']};\n  margin: 0 8px;\n`;\n\nexport const Title = styled.h3`\n  margin: 0;\n  font-size: 16px;\n  min-height: 20px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.neutral['700']};\n`;\n\nexport const Description = styled.p`\n  margin: 0;\n  font-size: 12px;\n  min-height: 18px;\n  display: flex;\n  align-items: center;\n  color: ${(props) =>\n    props.descriptionColor === 'neutral'\n      ? props.theme.colors.neutral['600']\n      : props.theme.colors.brand['600']};\n`;\n\nexport const RightAddon = styled(Grid)`\n  margin: 0;\n  white-space: nowrap;\n`;\n\nexport const RightDescription = styled(Grid)`\n  margin: 0;\n  white-space: nowrap;\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral['600']};\n`;\nexport const RightValue = styled(Grid)`\n  margin: 0;\n  white-space: nowrap;\n  font-size: 14px;\n  color: ${(props) => props.theme.colors.neutral['800']};\n`;\n\nexport const ExpandContent = styled.div`\n  font-size: 12px;\n`;\n\nconst border = ({ active, theme }) =>\n  active ? theme.colors.brand['600'] : theme.colors.neutral['200'];\nconst background = ({ active, theme }) =>\n  active ? theme.colors.brand['100'] : theme.colors.neutral['000'];\n\nexport const Container = styled(Grid)`\n  width: 100%;\n  min-height: 52px;\n  min-width: 244px;\n  padding: 6px 8px 6px 12px;\n  position: relative;\n  border-top: 1px solid ${border};\n  border-bottom: 1px solid ${border};\n  background: ${background};\n  ${(props) =>\n    props.disabled\n      ? `\n    ${Title}, ${Description}, ${RightDescription}, ${RightValue} {\n      color: ${props.theme.colors.neutral['500']};\n    }\n  `\n      : ''}\n  &:hover {\n    box-shadow: 0 2px 4px 0 rgba(53, 60, 70, 0.5);\n    z-index: 1;\n  }\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA,4BAGJ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3D,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIX,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMvB,CAAC,UACR,MAAM,qBAAqB,YACvB,MAAM,MAAM,OAAO,QAAQ,SAC3B,MAAM,MAAM,OAAO,MAAM;AAAA;AAG1B,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA,WAI5B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAE1C,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA,WAItB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAIpC,MAAM,SAAS,CAAC,EAAE,QAAQ,YACxB,SAAS,MAAM,OAAO,MAAM,SAAS,MAAM,OAAO,QAAQ;AAC5D,MAAM,aAAa,CAAC,EAAE,QAAQ,YAC5B,SAAS,MAAM,OAAO,MAAM,SAAS,MAAM,OAAO,QAAQ;AAErD,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMN;AAAA,6BACG;AAAA,gBACb;AAAA,IACZ,CAAC,UACD,MAAM,WACF;AAAA,MACF,UAAU,gBAAgB,qBAAqB;AAAA,eACtC,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,MAGlC;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,13 @@
+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

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSCard';\nexport * from './DSCardHeader';\nexport * from './DSCardBody';\nexport * from './v2/Card';\nexport * from './v2/Group';\nexport * from './v2/ActionAddon';\nexport * from './detail/DetailCard';\n\nexport { default } from './DSCard';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;",
+  "names": []
+}

package/dist/esm/v2/ActionAddon.js

@@ -0,0 +1,44 @@
+import * as React from "react";
+import React2 from "react";
+import { PropTypes, describe } from "react-desc";
+import styled from "styled-components";
+import { ChevronSmallDown } from "@elliemae/ds-icons";
+import Button from "@elliemae/ds-button";
+const Addon = styled(Button)`
+  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__ */ React2.createElement(Addon, {
+  onClick,
+  labelText: label,
+  icon: icon || /* @__PURE__ */ React2.createElement(ChevronSmallDown, {
+    color: ["brand-primary", 700]
+  })
+});
+const actionProps = {
+  label: PropTypes.string.description("Addon label"),
+  onClick: PropTypes.func.description("On click callback"),
+  icon: PropTypes.element.description("Icon to display after the label")
+};
+ActionAddon.propTypes = actionProps;
+const DSCardActionAddonWithSchema = describe(ActionAddon);
+DSCardActionAddonWithSchema.propTypes = actionProps;
+var ActionAddon_default = ActionAddon;
+export {
+  ActionAddon,
+  DSCardActionAddonWithSchema,
+  ActionAddon_default as default
+};
+//# sourceMappingURL=ActionAddon.js.map

package/dist/esm/v2/ActionAddon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/ActionAddon.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 { ChevronSmallDown } from '@elliemae/ds-icons';\nimport Button from '@elliemae/ds-button';\n\nconst Addon = styled(Button)`\n  background-color: transparent;\n  padding-right: 4px;\n  height: 100%;\n  border: none;\n  font-size: 12px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.brand['700']};\n  cursor: pointer;\n  &:focus,\n  &::after {\n    background-color: transparent;\n    box-shadow: none !important; /* needed */\n    border: none !important; /* needed */\n  }\n`;\n\nconst ActionAddon = ({ label, onClick, icon }) => (\n  <Addon onClick={onClick} labelText={label} icon={icon || <ChevronSmallDown color={['brand-primary', 700]} />} />\n);\n\nconst actionProps = {\n  /**\n   * Addon label\n   */\n  label: PropTypes.string.description('Addon label'),\n  /**\n   * On click callback\n   */\n  onClick: PropTypes.func.description('On click callback'),\n  /**\n   * Icon to display after the label\n   */\n  icon: PropTypes.element.description('Icon to display after the label'),\n};\n\nActionAddon.propTypes = actionProps;\nconst DSCardActionAddonWithSchema = describe(ActionAddon);\nDSCardActionAddonWithSchema.propTypes = actionProps;\n\nexport { ActionAddon, DSCardActionAddonWithSchema };\nexport default ActionAddon;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMJ,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/C,MAAM,cAAc,CAAC,EAAE,OAAO,SAAS,WACrC,qCAAC,OAAD;AAAA,EAAO;AAAA,EAAkB,WAAW;AAAA,EAAO,MAAM,QAAQ,qCAAC,kBAAD;AAAA,IAAkB,OAAO,CAAC,iBAAiB;AAAA;AAAA;AAGtG,MAAM,cAAc;AAAA,EAIlB,OAAO,UAAU,OAAO,YAAY;AAAA,EAIpC,SAAS,UAAU,KAAK,YAAY;AAAA,EAIpC,MAAM,UAAU,QAAQ,YAAY;AAAA;AAGtC,YAAY,YAAY;AACxB,MAAM,8BAA8B,SAAS;AAC7C,4BAA4B,YAAY;AAGxC,IAAO,sBAAQ;",
+  "names": []
+}

package/dist/esm/v2/Card.js

@@ -0,0 +1,64 @@
+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 = ({
+  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: 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;
+var Card_default = CustomCard;
+export {
+  CustomCard,
+  DSCardCustomWithSchema,
+  Card_default as default
+};
+//# sourceMappingURL=Card.js.map

package/dist/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/dist/esm/v2/Group.js

@@ -0,0 +1,52 @@
+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 = {
+  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;
+var Group_default = CardGroup;
+export {
+  CardGroup,
+  DSCardGroupWithSchema,
+  Group_default as default
+};
+//# sourceMappingURL=Group.js.map

package/dist/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/dist/esm/v2/components.js

@@ -0,0 +1,75 @@
+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/dist/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": []
+}