@elliemae/ds-card-v2 3.60.0-next.38 → 3.60.0-next.39

package/dist/cjs/DSCardV2.js

@@ -36,19 +36,27 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
-var import_ds_legacy_header = require("@elliemae/ds-legacy-header");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_ds_system = require("@elliemae/ds-system");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_useCardV2 = require("./config/useCardV2.js");
 var import_constants = require("./constants/index.js");
 var import_styles = require("./styles.js");
-const getCol = (rightAddon) => {
+const getCols = (rightAddon, isSmall) => {
+  if (isSmall) return ["1fr"];
   if (!rightAddon) return ["1fr"];
-  return ["1fr", "auto"];
+  return ["auto", "minmax(0, 1fr)", "auto"];
+};
+const getRows = (isSmall) => {
+  if (isSmall) return ["auto", "auto", "auto"];
+  return ["auto"];
 };
 const DSCardV2 = (props) => {
   const { propsWithDefault, globalProps, xstyledProps } = (0, import_useCardV2.useCardV2)(props);
-  const { hasBorder, title, leftAddon, rightAddon, description } = propsWithDefault;
+  const { hasBorder, title, leftAddon, rightAddon, description, wrapText } = propsWithDefault;
   const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
+  const layoutMode = (0, import_ds_system.useGetLayoutMode)();
+  const isSmall = layoutMode === "s" || layoutMode === "xs";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.TooltipTextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styles.CardContainer,
     {
@@ -57,43 +65,67 @@ const DSCardV2 = (props) => {
       ...globalProps,
       ...xstyledProps,
       hasBorder,
-      cols: getCol(rightAddon),
+      cols: getCols(rightAddon, isSmall),
+      rows: getRows(isSmall),
       getOwnerProps,
       getOwnerPropsArguments,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.LeftSection, { children: [
-          leftAddon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.LeftAddon, { getOwnerProps, getOwnerPropsArguments, children: leftAddon }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            import_styles.MainSection,
-            {
-              style: {
-                maxWidth: leftAddon ? "calc(100% - 40px)" : "100%"
-              },
-              getOwnerProps,
-              getOwnerPropsArguments,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_ds_legacy_header.DSHeader,
-                  {
-                    "data-testid": import_constants.CARD_V2_DATA_TESTID.CARD_HEADER,
-                    fontSize: "16px",
-                    fontWeight: "regular",
-                    color: "neutral.800",
-                    text: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, { value: title })
-                  }
-                ),
-                description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Description, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, { value: description }) })
-              ]
-            }
-          )
-        ] }),
-        Array.isArray(rightAddon) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.RightAddonSection, { getOwnerProps, getOwnerPropsArguments, children: [
-          rightAddon[0] ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.RightAddon, { getOwnerProps, getOwnerPropsArguments, children: rightAddon[0] }) : null,
-          rightAddon[1] ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            rightAddon.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Separator, { getOwnerProps, getOwnerPropsArguments }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.RightAddon, { getOwnerProps, getOwnerPropsArguments, children: rightAddon[1] })
-          ] }) : null
-        ] })
+        leftAddon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styles.LeftAddon,
+          {
+            style: {
+              gridColumn: isSmall ? "1" : "1",
+              gridRow: isSmall ? "1" : "1",
+              justifySelf: isSmall ? "center" : "start"
+            },
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: leftAddon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_styles.MainSection,
+          {
+            style: {
+              gridColumn: isSmall ? "1" : "2",
+              gridRow: isSmall ? "2" : "1",
+              textAlign: isSmall ? "center" : "left"
+            },
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styles.Title,
+                {
+                  "data-testid": import_constants.CARD_V2_DATA_TESTID.CARD_HEADER,
+                  getOwnerProps,
+                  getOwnerPropsArguments,
+                  children: wrapText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1, as: "span", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, { value: title })
+                }
+              ),
+              description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Description, { getOwnerProps, getOwnerPropsArguments, children: wrapText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1, as: "span", children: description }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, { value: description }) })
+            ]
+          }
+        ),
+        Array.isArray(rightAddon) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_styles.RightAddonSection,
+          {
+            style: {
+              gridColumn: isSmall ? "1" : "3",
+              gridRow: isSmall ? "3" : "1",
+              justifySelf: isSmall ? "center" : "end"
+            },
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: [
+              rightAddon[0] ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.RightAddon, { getOwnerProps, getOwnerPropsArguments, children: rightAddon[0] }) : null,
+              rightAddon[1] ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                rightAddon.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Separator, { getOwnerProps, getOwnerPropsArguments }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.RightAddon, { getOwnerProps, getOwnerPropsArguments, children: rightAddon[1] })
+              ] }) : null
+            ]
+          }
+        )
       ]
     }
   ) });

package/dist/cjs/DSCardV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSCardV2.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { DSHeader } from '@elliemae/ds-legacy-header';\nimport { type DSCardV2T, DSCardV2PropTypesSchema } from './react-desc-prop-types.js';\nimport { useCardV2 } from './config/useCardV2.js';\nimport { DSCardV2Name, CARD_V2_DATA_TESTID } from './constants/index.js';\nimport {\n  CardContainer,\n  LeftSection,\n  LeftAddon,\n  MainSection,\n  Description,\n  RightAddonSection,\n  RightAddon,\n  Separator,\n} from './styles.js';\n\nconst getCol = (rightAddon: DSCardV2T.OptionalProps['rightAddon']) => {\n  if (!rightAddon) return ['1fr'];\n  return ['1fr', 'auto'];\n};\n\nconst DSCardV2: React.ComponentType<DSCardV2T.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps } = useCardV2(props);\n  const { hasBorder, title, leftAddon, rightAddon, description } = propsWithDefault;\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n  return (\n    <TooltipTextProvider>\n      <CardContainer\n        data-component-selector=\"ds-card-v2\"\n        data-testid={CARD_V2_DATA_TESTID.CARD_CONTAINER} // we must keep this explicit to avoid the breaking changes\n        {...globalProps}\n        {...xstyledProps}\n        hasBorder={hasBorder}\n        cols={getCol(rightAddon)}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <LeftSection>\n          {leftAddon && (\n            <LeftAddon getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n              {leftAddon}\n            </LeftAddon>\n          )}\n          <MainSection\n            style={{\n              maxWidth: leftAddon ? 'calc(100% - 40px)' : '100%',\n            }}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <DSHeader\n              data-testid={CARD_V2_DATA_TESTID.CARD_HEADER} // we must keep this explicit to avoid the breaking changes\n              fontSize=\"16px\"\n              fontWeight=\"regular\"\n              color=\"neutral.800\"\n              text={<DSTruncatedTooltipText value={title} />}\n            />\n            {description && (\n              <Description getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n                <DSTruncatedTooltipText value={description} />\n              </Description>\n            )}\n          </MainSection>\n        </LeftSection>\n        {Array.isArray(rightAddon) && (\n          <RightAddonSection getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            {rightAddon[0] ? (\n              <RightAddon getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n                {rightAddon[0]}\n              </RightAddon>\n            ) : null}\n            {rightAddon[1] ? (\n              <>\n                {rightAddon.length > 1 && (\n                  <Separator getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n                )}\n                <RightAddon getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n                  {rightAddon[1]}\n                </RightAddon>\n              </>\n            ) : null}\n          </RightAddonSection>\n        )}\n      </CardContainer>\n    </TooltipTextProvider>\n  );\n};\n\nDSCardV2.displayName = DSCardV2Name;\nconst DSCardV2WithSchema = describe(DSCardV2);\nDSCardV2WithSchema.propTypes = DSCardV2PropTypesSchema;\n\nexport { DSCardV2, DSCardV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCX;AAxCZ,8BAAwC;AACxC,uCAA4D;AAC5D,8BAAyB;AACzB,mCAAwD;AACxD,uBAA0B;AAC1B,uBAAkD;AAClD,oBASO;AAEP,MAAM,SAAS,CAAC,eAAsD;AACpE,MAAI,CAAC,WAAY,QAAO,CAAC,KAAK;AAC9B,SAAO,CAAC,OAAO,MAAM;AACvB;AAEA,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,aAAa,aAAa,QAAI,4BAAU,KAAK;AACvE,QAAM,EAAE,WAAW,OAAO,WAAW,YAAY,YAAY,IAAI;AACjE,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,gBAAgB;AAChF,SACE,4CAAC,wDACC;AAAA,IAAC;AAAA;AAAA,MACC,2BAAwB;AAAA,MACxB,eAAa,qCAAoB;AAAA,MAChC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,MAAM,OAAO,UAAU;AAAA,MACvB;AAAA,MACA;AAAA,MAEA;AAAA,qDAAC,6BACE;AAAA,uBACC,4CAAC,2BAAU,eAA8B,wBACtC,qBACH;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,UAAU,YAAY,sBAAsB;AAAA,cAC9C;AAAA,cACA;AAAA,cACA;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAa,qCAAoB;AAAA,oBACjC,UAAS;AAAA,oBACT,YAAW;AAAA,oBACX,OAAM;AAAA,oBACN,MAAM,4CAAC,2DAAuB,OAAO,OAAO;AAAA;AAAA,gBAC9C;AAAA,gBACC,eACC,4CAAC,6BAAY,eAA8B,wBACzC,sDAAC,2DAAuB,OAAO,aAAa,GAC9C;AAAA;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA,QACC,MAAM,QAAQ,UAAU,KACvB,6CAAC,mCAAkB,eAA8B,wBAC9C;AAAA,qBAAW,CAAC,IACX,4CAAC,4BAAW,eAA8B,wBACvC,qBAAW,CAAC,GACf,IACE;AAAA,UACH,WAAW,CAAC,IACX,4EACG;AAAA,uBAAW,SAAS,KACnB,4CAAC,2BAAU,eAA8B,wBAAgD;AAAA,YAE3F,4CAAC,4BAAW,eAA8B,wBACvC,qBAAW,CAAC,GACf;AAAA,aACF,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { DSTypography, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { type DSCardV2T, DSCardV2PropTypesSchema } from './react-desc-prop-types.js';\nimport { useCardV2 } from './config/useCardV2.js';\nimport { DSCardV2Name, CARD_V2_DATA_TESTID } from './constants/index.js';\nimport {\n  CardContainer,\n  LeftAddon,\n  MainSection,\n  Description,\n  RightAddonSection,\n  RightAddon,\n  Separator,\n  Title,\n} from './styles.js';\n\nconst getCols = (rightAddon: DSCardV2T.OptionalProps['rightAddon'], isSmall: boolean) => {\n  if (isSmall) return ['1fr'];\n  if (!rightAddon) return ['1fr'];\n  return ['auto', 'minmax(0, 1fr)', 'auto'];\n};\n\nconst getRows = (isSmall: boolean) => {\n  if (isSmall) return ['auto', 'auto', 'auto'];\n  return ['auto'];\n};\n// eslint-disable-next-line complexity\nconst DSCardV2: React.ComponentType<DSCardV2T.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps } = useCardV2(props);\n  const { hasBorder, title, leftAddon, rightAddon, description, wrapText } = propsWithDefault;\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n  const layoutMode = useGetLayoutMode();\n  const isSmall = layoutMode === 's' || layoutMode === 'xs';\n\n  return (\n    <TooltipTextProvider>\n      <CardContainer\n        data-component-selector=\"ds-card-v2\"\n        data-testid={CARD_V2_DATA_TESTID.CARD_CONTAINER} // we must keep this explicit to avoid the breaking changes\n        {...globalProps}\n        {...xstyledProps}\n        hasBorder={hasBorder}\n        cols={getCols(rightAddon, isSmall)}\n        rows={getRows(isSmall)}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {leftAddon && (\n          <LeftAddon\n            style={{\n              gridColumn: isSmall ? '1' : '1',\n              gridRow: isSmall ? '1' : '1',\n              justifySelf: isSmall ? 'center' : 'start',\n            }}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {leftAddon}\n          </LeftAddon>\n        )}\n        <MainSection\n          style={{\n            gridColumn: isSmall ? '1' : '2',\n            gridRow: isSmall ? '2' : '1',\n            textAlign: isSmall ? 'center' : 'left',\n          }}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <Title\n            data-testid={CARD_V2_DATA_TESTID.CARD_HEADER}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {wrapText ? (\n              <DSTypography variant={TYPOGRAPHY_VARIANTS.B1} as=\"span\">\n                {title}\n              </DSTypography>\n            ) : (\n              <DSTruncatedTooltipText value={title} />\n            )}\n          </Title>\n          {description && (\n            <Description getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n              {wrapText ? (\n                <DSTypography variant={TYPOGRAPHY_VARIANTS.B1} as=\"span\">\n                  {description}\n                </DSTypography>\n              ) : (\n                <DSTruncatedTooltipText value={description} />\n              )}\n            </Description>\n          )}\n        </MainSection>\n\n        {Array.isArray(rightAddon) && (\n          <RightAddonSection\n            style={{\n              gridColumn: isSmall ? '1' : '3',\n              gridRow: isSmall ? '3' : '1',\n              justifySelf: isSmall ? 'center' : 'end',\n            }}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {rightAddon[0] ? (\n              <RightAddon getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n                {rightAddon[0]}\n              </RightAddon>\n            ) : null}\n            {rightAddon[1] ? (\n              <>\n                {rightAddon.length > 1 && (\n                  <Separator getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n                )}\n                <RightAddon getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n                  {rightAddon[1]}\n                </RightAddon>\n              </>\n            ) : null}\n          </RightAddonSection>\n        )}\n      </CardContainer>\n    </TooltipTextProvider>\n  );\n};\n\nDSCardV2.displayName = DSCardV2Name;\nconst DSCardV2WithSchema = describe(DSCardV2);\nDSCardV2WithSchema.propTypes = DSCardV2PropTypesSchema;\n\nexport { DSCardV2, DSCardV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/constants/index.js

@@ -44,7 +44,8 @@ const CARD_V2_SLOTS = {
   RIGHT_ADDON_SECTION: "right-addon-section",
   SEPARATOR: "separator",
   MAIN_SECTION: "main-section",
-  DESCRIPTION: "description"
+  DESCRIPTION: "description",
+  TITLE: "title"
 };
 const CARD_V2_DATA_TESTID = {
   ...(0, import_ds_system.slotObjectToDataTestIds)(DSCardV2Name, CARD_V2_SLOTS),

package/dist/cjs/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardV2Name = 'DSCardv2';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_SLOTS = {\n  CARD_CONTAINER: 'container',\n  LEFT_SECTION: 'left-section',\n  LEFT_ADDON: 'left-addon',\n  RIGHT_ADDON: 'right-addon',\n  RIGHT_ADDON_SECTION: 'right-addon-section',\n  SEPARATOR: 'separator',\n  MAIN_SECTION: 'main-section',\n  DESCRIPTION: 'description',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSCardV2Name, CARD_V2_SLOTS),\n  CARD_CONTAINER: 'em-ds-card',\n  CARD_HEADER: 'em-ds-card-header',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AAGrB,MAAM,gBAAgB;AAAA,EAC3B,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,aAAa;AACf;AAGO,MAAM,sBAAsB;AAAA,EACjC,OAAG,0CAAwB,cAAc,aAAa;AAAA,EACtD,gBAAgB;AAAA,EAChB,aAAa;AACf;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardV2Name = 'DSCardv2';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_SLOTS = {\n  CARD_CONTAINER: 'container',\n  LEFT_SECTION: 'left-section',\n  LEFT_ADDON: 'left-addon',\n  RIGHT_ADDON: 'right-addon',\n  RIGHT_ADDON_SECTION: 'right-addon-section',\n  SEPARATOR: 'separator',\n  MAIN_SECTION: 'main-section',\n  DESCRIPTION: 'description',\n  TITLE: 'title',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSCardV2Name, CARD_V2_SLOTS),\n  CARD_CONTAINER: 'em-ds-card',\n  CARD_HEADER: 'em-ds-card-header',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AAGrB,MAAM,gBAAgB;AAAA,EAC3B,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,aAAa;AAAA,EACb,OAAO;AACT;AAGO,MAAM,sBAAsB;AAAA,EACjC,OAAG,0CAAwB,cAAc,aAAa;AAAA,EACtD,gBAAgB;AAAA,EAChB,aAAa;AACf;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -36,7 +36,8 @@ module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 const defaultProps = {
-  hasBorder: false
+  hasBorder: false,
+  wrapText: true
 };
 const DSCardV2PropTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
@@ -60,7 +61,11 @@ const DSCardV2PropTypes = {
   /**
    * Wheter if the card has border or not
    */
-  hasBorder: import_ds_props_helpers.PropTypes.bool.description("Wheter if the card has border or not").defaultValue(false)
+  hasBorder: import_ds_props_helpers.PropTypes.bool.description("Wheter if the card has border or not").defaultValue(false),
+  /**
+   * Whether title and description wrap instead of truncating with tooltip
+   */
+  wrapText: import_ds_props_helpers.PropTypes.bool.description("Whether title and description wrap instead of truncating with tooltip").defaultValue(true)
 };
 const DSCardV2PropTypesSchema = DSCardV2PropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSCardV2T {\n  export interface RequiredProps {\n    title: string;\n  }\n\n  export interface DefaultProps {\n    hasBorder?: boolean;\n  }\n\n  export interface OptionalProps {\n    description?: string;\n    leftAddon?: JSX.Element;\n    rightAddon?: JSX.Element | JSX.Element[];\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSCardV2T.DefaultProps = {\n  hasBorder: false,\n};\n\nexport const DSCardV2PropTypes: DSPropTypesSchema<DSCardV2T.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /**\n   * Title of the card. requiered\n   */\n  title: PropTypes.string.isRequired.description('Title of the card. requiered'),\n  /**\n   * Description of the card. not requiered\n   */\n  description: PropTypes.string.description('Description of the card. not requiered'),\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').defaultValue(false),\n};\n\nexport const DSCardV2PropTypesSchema = DSCardV2PropTypes as unknown as WeakValidationMap<DSCardV2T.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AAsChE,MAAM,eAAuC;AAAA,EAClD,WAAW;AACb;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,OAAO,kCAAU,OAAO,WAAW,YAAY,8BAA8B;AAAA;AAAA;AAAA;AAAA,EAI7E,aAAa,kCAAU,OAAO,YAAY,wCAAwC;AAAA;AAAA;AAAA;AAAA,EAIlF,WAAW,kCAAU,QAAQ,YAAY,YAAY;AAAA;AAAA;AAAA;AAAA,EAIrD,YAAY,kCAAU,MAAM,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAI5E,WAAW,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAClG;AAEO,MAAM,0BAA0B;",
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSCardV2T {\n  export interface RequiredProps {\n    title: string;\n  }\n\n  export interface DefaultProps {\n    hasBorder?: boolean;\n    wrapText?: boolean;\n  }\n\n  export interface OptionalProps {\n    description?: string;\n    leftAddon?: JSX.Element;\n    rightAddon?: JSX.Element | JSX.Element[];\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSCardV2T.DefaultProps = {\n  hasBorder: false,\n  wrapText: true,\n};\n\nexport const DSCardV2PropTypes: DSPropTypesSchema<DSCardV2T.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /**\n   * Title of the card. requiered\n   */\n  title: PropTypes.string.isRequired.description('Title of the card. requiered'),\n  /**\n   * Description of the card. not requiered\n   */\n  description: PropTypes.string.description('Description of the card. not requiered'),\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').defaultValue(false),\n  /**\n   * Whether title and description wrap instead of truncating with tooltip\n   */\n  wrapText: PropTypes.bool\n    .description('Whether title and description wrap instead of truncating with tooltip')\n    .defaultValue(true),\n};\n\nexport const DSCardV2PropTypesSchema = DSCardV2PropTypes as unknown as WeakValidationMap<DSCardV2T.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AAuChE,MAAM,eAAuC;AAAA,EAClD,WAAW;AAAA,EACX,UAAU;AACZ;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,OAAO,kCAAU,OAAO,WAAW,YAAY,8BAA8B;AAAA;AAAA;AAAA;AAAA,EAI7E,aAAa,kCAAU,OAAO,YAAY,wCAAwC;AAAA;AAAA;AAAA;AAAA,EAIlF,WAAW,kCAAU,QAAQ,YAAY,YAAY;AAAA;AAAA;AAAA;AAAA,EAIrD,YAAY,kCAAU,MAAM,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAI5E,WAAW,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAAA;AAAA;AAAA;AAAA,EAIhG,UAAU,kCAAU,KACjB,YAAY,uEAAuE,EACnF,aAAa,IAAI;AACtB;AAEO,MAAM,0BAA0B;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -31,11 +31,11 @@ __export(styles_exports, {
   CardContainer: () => CardContainer,
   Description: () => Description,
   LeftAddon: () => LeftAddon,
-  LeftSection: () => LeftSection,
   MainSection: () => MainSection,
   RightAddon: () => RightAddon,
   RightAddonSection: () => RightAddonSection,
-  Separator: () => Separator
+  Separator: () => Separator,
+  Title: () => Title
 });
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
@@ -46,7 +46,7 @@ const CardContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  height: 56px;
+  min-height: 56px;
   padding: 8px 16px;
   position: relative;
   border: ${({ theme, hasBorder }) => hasBorder ? `1px solid ${theme.colors.neutral["100"]}` : ""};
@@ -63,10 +63,6 @@ const CardContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
   }
   ${import_ds_system.xStyledCommonProps}
 `;
-const LeftSection = (0, import_ds_system.styled)("div", { name: import_constants.DSCardV2Name, slot: import_constants.CARD_V2_SLOTS.LEFT_SECTION })`
-  display: flex;
-  align-items: center;
-`;
 const LeftAddon = (0, import_ds_system.styled)("div", { name: import_constants.DSCardV2Name, slot: import_constants.CARD_V2_SLOTS.LEFT_ADDON })`
   height: fit-content;
   width: fit-content;
@@ -92,6 +88,15 @@ const Separator = (0, import_ds_system.styled)("div", { name: import_constants.D
 const MainSection = (0, import_ds_system.styled)("div", { name: import_constants.DSCardV2Name, slot: import_constants.CARD_V2_SLOTS.MAIN_SECTION })`
   display: flex;
   flex-direction: column;
+  min-width: 0;
+`;
+const Title = (0, import_ds_system.styled)("h3", { name: import_constants.DSCardV2Name, slot: import_constants.CARD_V2_SLOTS.TITLE })`
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+  color: ${({ theme }) => theme.colors.neutral["800"]};
+  line-height: 1;
 `;
 const Description = (0, import_ds_system.styled)("p", { name: import_constants.DSCardV2Name, slot: import_constants.CARD_V2_SLOTS.DESCRIPTION })`
   margin: 0;

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV2Name, CARD_V2_SLOTS } from './constants/index.js';\n\nconst CardContainer = styled(Grid, { name: DSCardV2Name, slot: CARD_V2_SLOTS.CARD_CONTAINER })<{ hasBorder?: boolean }>`\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 }) => (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  ${xStyledCommonProps}\n`;\n\nconst LeftSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_SECTION })`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_ADDON })`\n  height: fit-content;\n  width: fit-content;\n  margin-right: 16px;\n  cursor: pointer;\n`;\n\nconst RightAddonSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON_SECTION })`\n  display: flex;\n  align-items: center;\n  width: fit-content;\n`;\n\nconst RightAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON })`\n  height: fit-content;\n  width: fit-content;\n  cursor: pointer;\n`;\n\nconst Separator = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.SEPARATOR })`\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', { name: DSCardV2Name, slot: CARD_V2_SLOTS.MAIN_SECTION })`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst Description = styled('p', { name: DSCardV2Name, slot: CARD_V2_SLOTS.DESCRIPTION })`\n  margin: 0;\n  color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nexport { CardContainer, LeftSection, LeftAddon, RightAddonSection, RightAddon, Separator, MainSection, Description };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,qBAAqB;AACrB,uBAA4C;AAE5C,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,+BAAc,MAAM,+BAAc,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOjF,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,aAAa,MAAM,OAAO,QAAQ,KAAK,CAAC,KAAK,EAAG;AAAA;AAAA;AAAA,+BAGpE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASvE,mCAAkB;AAAA;AAGtB,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAK1F,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtF,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvG,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAMxF,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,UAAU,CAAC;AAAA;AAAA;AAAA,4BAGzD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIxE,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAK1F,MAAM,kBAAc,yBAAO,KAAK,EAAE,MAAM,+BAAc,MAAM,+BAAc,YAAY,CAAC;AAAA;AAAA,WAE5E,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
+  "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV2Name, CARD_V2_SLOTS } from './constants/index.js';\n\nconst CardContainer = styled(Grid, { name: DSCardV2Name, slot: CARD_V2_SLOTS.CARD_CONTAINER })<{ hasBorder?: boolean }>`\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  min-height: 56px;\n  padding: 8px 16px;\n  position: relative;\n  border: ${({ theme, hasBorder }) => (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  ${xStyledCommonProps}\n`;\n\nconst LeftAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_ADDON })`\n  height: fit-content;\n  width: fit-content;\n  margin-right: 16px;\n  cursor: pointer;\n`;\n\nconst RightAddonSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON_SECTION })`\n  display: flex;\n  align-items: center;\n  width: fit-content;\n`;\n\nconst RightAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON })`\n  height: fit-content;\n  width: fit-content;\n  cursor: pointer;\n`;\n\nconst Separator = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.SEPARATOR })`\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', { name: DSCardV2Name, slot: CARD_V2_SLOTS.MAIN_SECTION })`\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n`;\n\nconst Title = styled('h3', { name: DSCardV2Name, slot: CARD_V2_SLOTS.TITLE })`\n  margin: 0;\n  padding: 0;\n  font-size: 16px;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme }) => theme.colors.neutral['800']};\n  line-height: 1;\n`;\n\nconst Description = styled('p', { name: DSCardV2Name, slot: CARD_V2_SLOTS.DESCRIPTION })`\n  margin: 0;\n  color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nexport { CardContainer, LeftAddon, RightAddonSection, RightAddon, Separator, MainSection, Title, Description };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,qBAAqB;AACrB,uBAA4C;AAE5C,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,+BAAc,MAAM,+BAAc,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOjF,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,aAAa,MAAM,OAAO,QAAQ,KAAK,CAAC,KAAK,EAAG;AAAA;AAAA;AAAA,+BAGpE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASvE,mCAAkB;AAAA;AAGtB,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtF,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvG,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAMxF,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,UAAU,CAAC;AAAA;AAAA;AAAA,4BAGzD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIxE,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAM1F,MAAM,YAAQ,yBAAO,MAAM,EAAE,MAAM,+BAAc,MAAM,+BAAc,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,iBAI3D,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA,WAC9C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIrD,MAAM,kBAAc,yBAAO,KAAK,EAAE,MAAM,+BAAc,MAAM,+BAAc,YAAY,CAAC;AAAA;AAAA,WAE5E,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
   "names": []
 }

package/dist/esm/DSCardV2.js

@@ -2,28 +2,36 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { describe, useOwnerProps } from "@elliemae/ds-props-helpers";
 import { DSTruncatedTooltipText, TooltipTextProvider } from "@elliemae/ds-truncated-tooltip-text";
-import { DSHeader } from "@elliemae/ds-legacy-header";
+import { DSTypography, TYPOGRAPHY_VARIANTS } from "@elliemae/ds-typography";
+import { useGetLayoutMode } from "@elliemae/ds-system";
 import { DSCardV2PropTypesSchema } from "./react-desc-prop-types.js";
 import { useCardV2 } from "./config/useCardV2.js";
 import { DSCardV2Name, CARD_V2_DATA_TESTID } from "./constants/index.js";
 import {
   CardContainer,
-  LeftSection,
   LeftAddon,
   MainSection,
   Description,
   RightAddonSection,
   RightAddon,
-  Separator
+  Separator,
+  Title
 } from "./styles.js";
-const getCol = (rightAddon) => {
+const getCols = (rightAddon, isSmall) => {
+  if (isSmall) return ["1fr"];
   if (!rightAddon) return ["1fr"];
-  return ["1fr", "auto"];
+  return ["auto", "minmax(0, 1fr)", "auto"];
+};
+const getRows = (isSmall) => {
+  if (isSmall) return ["auto", "auto", "auto"];
+  return ["auto"];
 };
 const DSCardV2 = (props) => {
   const { propsWithDefault, globalProps, xstyledProps } = useCardV2(props);
-  const { hasBorder, title, leftAddon, rightAddon, description } = propsWithDefault;
+  const { hasBorder, title, leftAddon, rightAddon, description, wrapText } = propsWithDefault;
   const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);
+  const layoutMode = useGetLayoutMode();
+  const isSmall = layoutMode === "s" || layoutMode === "xs";
   return /* @__PURE__ */ jsx(TooltipTextProvider, { children: /* @__PURE__ */ jsxs(
     CardContainer,
     {
@@ -32,43 +40,67 @@ const DSCardV2 = (props) => {
       ...globalProps,
       ...xstyledProps,
       hasBorder,
-      cols: getCol(rightAddon),
+      cols: getCols(rightAddon, isSmall),
+      rows: getRows(isSmall),
       getOwnerProps,
       getOwnerPropsArguments,
       children: [
-        /* @__PURE__ */ jsxs(LeftSection, { children: [
-          leftAddon && /* @__PURE__ */ jsx(LeftAddon, { getOwnerProps, getOwnerPropsArguments, children: leftAddon }),
-          /* @__PURE__ */ jsxs(
-            MainSection,
-            {
-              style: {
-                maxWidth: leftAddon ? "calc(100% - 40px)" : "100%"
-              },
-              getOwnerProps,
-              getOwnerPropsArguments,
-              children: [
-                /* @__PURE__ */ jsx(
-                  DSHeader,
-                  {
-                    "data-testid": CARD_V2_DATA_TESTID.CARD_HEADER,
-                    fontSize: "16px",
-                    fontWeight: "regular",
-                    color: "neutral.800",
-                    text: /* @__PURE__ */ jsx(DSTruncatedTooltipText, { value: title })
-                  }
-                ),
-                description && /* @__PURE__ */ jsx(Description, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(DSTruncatedTooltipText, { value: description }) })
-              ]
-            }
-          )
-        ] }),
-        Array.isArray(rightAddon) && /* @__PURE__ */ jsxs(RightAddonSection, { getOwnerProps, getOwnerPropsArguments, children: [
-          rightAddon[0] ? /* @__PURE__ */ jsx(RightAddon, { getOwnerProps, getOwnerPropsArguments, children: rightAddon[0] }) : null,
-          rightAddon[1] ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            rightAddon.length > 1 && /* @__PURE__ */ jsx(Separator, { getOwnerProps, getOwnerPropsArguments }),
-            /* @__PURE__ */ jsx(RightAddon, { getOwnerProps, getOwnerPropsArguments, children: rightAddon[1] })
-          ] }) : null
-        ] })
+        leftAddon && /* @__PURE__ */ jsx(
+          LeftAddon,
+          {
+            style: {
+              gridColumn: isSmall ? "1" : "1",
+              gridRow: isSmall ? "1" : "1",
+              justifySelf: isSmall ? "center" : "start"
+            },
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: leftAddon
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          MainSection,
+          {
+            style: {
+              gridColumn: isSmall ? "1" : "2",
+              gridRow: isSmall ? "2" : "1",
+              textAlign: isSmall ? "center" : "left"
+            },
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: [
+              /* @__PURE__ */ jsx(
+                Title,
+                {
+                  "data-testid": CARD_V2_DATA_TESTID.CARD_HEADER,
+                  getOwnerProps,
+                  getOwnerPropsArguments,
+                  children: wrapText ? /* @__PURE__ */ jsx(DSTypography, { variant: TYPOGRAPHY_VARIANTS.B1, as: "span", children: title }) : /* @__PURE__ */ jsx(DSTruncatedTooltipText, { value: title })
+                }
+              ),
+              description && /* @__PURE__ */ jsx(Description, { getOwnerProps, getOwnerPropsArguments, children: wrapText ? /* @__PURE__ */ jsx(DSTypography, { variant: TYPOGRAPHY_VARIANTS.B1, as: "span", children: description }) : /* @__PURE__ */ jsx(DSTruncatedTooltipText, { value: description }) })
+            ]
+          }
+        ),
+        Array.isArray(rightAddon) && /* @__PURE__ */ jsxs(
+          RightAddonSection,
+          {
+            style: {
+              gridColumn: isSmall ? "1" : "3",
+              gridRow: isSmall ? "3" : "1",
+              justifySelf: isSmall ? "center" : "end"
+            },
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: [
+              rightAddon[0] ? /* @__PURE__ */ jsx(RightAddon, { getOwnerProps, getOwnerPropsArguments, children: rightAddon[0] }) : null,
+              rightAddon[1] ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                rightAddon.length > 1 && /* @__PURE__ */ jsx(Separator, { getOwnerProps, getOwnerPropsArguments }),
+                /* @__PURE__ */ jsx(RightAddon, { getOwnerProps, getOwnerPropsArguments, children: rightAddon[1] })
+              ] }) : null
+            ]
+          }
+        )
       ]
     }
   ) });

package/dist/esm/DSCardV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSCardV2.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { DSHeader } from '@elliemae/ds-legacy-header';\nimport { type DSCardV2T, DSCardV2PropTypesSchema } from './react-desc-prop-types.js';\nimport { useCardV2 } from './config/useCardV2.js';\nimport { DSCardV2Name, CARD_V2_DATA_TESTID } from './constants/index.js';\nimport {\n  CardContainer,\n  LeftSection,\n  LeftAddon,\n  MainSection,\n  Description,\n  RightAddonSection,\n  RightAddon,\n  Separator,\n} from './styles.js';\n\nconst getCol = (rightAddon: DSCardV2T.OptionalProps['rightAddon']) => {\n  if (!rightAddon) return ['1fr'];\n  return ['1fr', 'auto'];\n};\n\nconst DSCardV2: React.ComponentType<DSCardV2T.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps } = useCardV2(props);\n  const { hasBorder, title, leftAddon, rightAddon, description } = propsWithDefault;\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n  return (\n    <TooltipTextProvider>\n      <CardContainer\n        data-component-selector=\"ds-card-v2\"\n        data-testid={CARD_V2_DATA_TESTID.CARD_CONTAINER} // we must keep this explicit to avoid the breaking changes\n        {...globalProps}\n        {...xstyledProps}\n        hasBorder={hasBorder}\n        cols={getCol(rightAddon)}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <LeftSection>\n          {leftAddon && (\n            <LeftAddon getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n              {leftAddon}\n            </LeftAddon>\n          )}\n          <MainSection\n            style={{\n              maxWidth: leftAddon ? 'calc(100% - 40px)' : '100%',\n            }}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <DSHeader\n              data-testid={CARD_V2_DATA_TESTID.CARD_HEADER} // we must keep this explicit to avoid the breaking changes\n              fontSize=\"16px\"\n              fontWeight=\"regular\"\n              color=\"neutral.800\"\n              text={<DSTruncatedTooltipText value={title} />}\n            />\n            {description && (\n              <Description getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n                <DSTruncatedTooltipText value={description} />\n              </Description>\n            )}\n          </MainSection>\n        </LeftSection>\n        {Array.isArray(rightAddon) && (\n          <RightAddonSection getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            {rightAddon[0] ? (\n              <RightAddon getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n                {rightAddon[0]}\n              </RightAddon>\n            ) : null}\n            {rightAddon[1] ? (\n              <>\n                {rightAddon.length > 1 && (\n                  <Separator getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n                )}\n                <RightAddon getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n                  {rightAddon[1]}\n                </RightAddon>\n              </>\n            ) : null}\n          </RightAddonSection>\n        )}\n      </CardContainer>\n    </TooltipTextProvider>\n  );\n};\n\nDSCardV2.displayName = DSCardV2Name;\nconst DSCardV2WithSchema = describe(DSCardV2);\nDSCardV2WithSchema.propTypes = DSCardV2PropTypesSchema;\n\nexport { DSCardV2, DSCardV2WithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyCX,SAiCE,UAjCF,KAIF,YAJE;AAxCZ,SAAS,UAAU,qBAAqB;AACxC,SAAS,wBAAwB,2BAA2B;AAC5D,SAAS,gBAAgB;AACzB,SAAyB,+BAA+B;AACxD,SAAS,iBAAiB;AAC1B,SAAS,cAAc,2BAA2B;AAClD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,SAAS,CAAC,eAAsD;AACpE,MAAI,CAAC,WAAY,QAAO,CAAC,KAAK;AAC9B,SAAO,CAAC,OAAO,MAAM;AACvB;AAEA,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,aAAa,aAAa,IAAI,UAAU,KAAK;AACvE,QAAM,EAAE,WAAW,OAAO,WAAW,YAAY,YAAY,IAAI;AACjE,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,gBAAgB;AAChF,SACE,oBAAC,uBACC;AAAA,IAAC;AAAA;AAAA,MACC,2BAAwB;AAAA,MACxB,eAAa,oBAAoB;AAAA,MAChC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,MAAM,OAAO,UAAU;AAAA,MACvB;AAAA,MACA;AAAA,MAEA;AAAA,6BAAC,eACE;AAAA,uBACC,oBAAC,aAAU,eAA8B,wBACtC,qBACH;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,UAAU,YAAY,sBAAsB;AAAA,cAC9C;AAAA,cACA;AAAA,cACA;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAa,oBAAoB;AAAA,oBACjC,UAAS;AAAA,oBACT,YAAW;AAAA,oBACX,OAAM;AAAA,oBACN,MAAM,oBAAC,0BAAuB,OAAO,OAAO;AAAA;AAAA,gBAC9C;AAAA,gBACC,eACC,oBAAC,eAAY,eAA8B,wBACzC,8BAAC,0BAAuB,OAAO,aAAa,GAC9C;AAAA;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA,QACC,MAAM,QAAQ,UAAU,KACvB,qBAAC,qBAAkB,eAA8B,wBAC9C;AAAA,qBAAW,CAAC,IACX,oBAAC,cAAW,eAA8B,wBACvC,qBAAW,CAAC,GACf,IACE;AAAA,UACH,WAAW,CAAC,IACX,iCACG;AAAA,uBAAW,SAAS,KACnB,oBAAC,aAAU,eAA8B,wBAAgD;AAAA,YAE3F,oBAAC,cAAW,eAA8B,wBACvC,qBAAW,CAAC,GACf;AAAA,aACF,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { DSTypography, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { type DSCardV2T, DSCardV2PropTypesSchema } from './react-desc-prop-types.js';\nimport { useCardV2 } from './config/useCardV2.js';\nimport { DSCardV2Name, CARD_V2_DATA_TESTID } from './constants/index.js';\nimport {\n  CardContainer,\n  LeftAddon,\n  MainSection,\n  Description,\n  RightAddonSection,\n  RightAddon,\n  Separator,\n  Title,\n} from './styles.js';\n\nconst getCols = (rightAddon: DSCardV2T.OptionalProps['rightAddon'], isSmall: boolean) => {\n  if (isSmall) return ['1fr'];\n  if (!rightAddon) return ['1fr'];\n  return ['auto', 'minmax(0, 1fr)', 'auto'];\n};\n\nconst getRows = (isSmall: boolean) => {\n  if (isSmall) return ['auto', 'auto', 'auto'];\n  return ['auto'];\n};\n// eslint-disable-next-line complexity\nconst DSCardV2: React.ComponentType<DSCardV2T.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps } = useCardV2(props);\n  const { hasBorder, title, leftAddon, rightAddon, description, wrapText } = propsWithDefault;\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n  const layoutMode = useGetLayoutMode();\n  const isSmall = layoutMode === 's' || layoutMode === 'xs';\n\n  return (\n    <TooltipTextProvider>\n      <CardContainer\n        data-component-selector=\"ds-card-v2\"\n        data-testid={CARD_V2_DATA_TESTID.CARD_CONTAINER} // we must keep this explicit to avoid the breaking changes\n        {...globalProps}\n        {...xstyledProps}\n        hasBorder={hasBorder}\n        cols={getCols(rightAddon, isSmall)}\n        rows={getRows(isSmall)}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {leftAddon && (\n          <LeftAddon\n            style={{\n              gridColumn: isSmall ? '1' : '1',\n              gridRow: isSmall ? '1' : '1',\n              justifySelf: isSmall ? 'center' : 'start',\n            }}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {leftAddon}\n          </LeftAddon>\n        )}\n        <MainSection\n          style={{\n            gridColumn: isSmall ? '1' : '2',\n            gridRow: isSmall ? '2' : '1',\n            textAlign: isSmall ? 'center' : 'left',\n          }}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <Title\n            data-testid={CARD_V2_DATA_TESTID.CARD_HEADER}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {wrapText ? (\n              <DSTypography variant={TYPOGRAPHY_VARIANTS.B1} as=\"span\">\n                {title}\n              </DSTypography>\n            ) : (\n              <DSTruncatedTooltipText value={title} />\n            )}\n          </Title>\n          {description && (\n            <Description getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n              {wrapText ? (\n                <DSTypography variant={TYPOGRAPHY_VARIANTS.B1} as=\"span\">\n                  {description}\n                </DSTypography>\n              ) : (\n                <DSTruncatedTooltipText value={description} />\n              )}\n            </Description>\n          )}\n        </MainSection>\n\n        {Array.isArray(rightAddon) && (\n          <RightAddonSection\n            style={{\n              gridColumn: isSmall ? '1' : '3',\n              gridRow: isSmall ? '3' : '1',\n              justifySelf: isSmall ? 'center' : 'end',\n            }}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {rightAddon[0] ? (\n              <RightAddon getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n                {rightAddon[0]}\n              </RightAddon>\n            ) : null}\n            {rightAddon[1] ? (\n              <>\n                {rightAddon.length > 1 && (\n                  <Separator getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n                )}\n                <RightAddon getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n                  {rightAddon[1]}\n                </RightAddon>\n              </>\n            ) : null}\n          </RightAddonSection>\n        )}\n      </CardContainer>\n    </TooltipTextProvider>\n  );\n};\n\nDSCardV2.displayName = DSCardV2Name;\nconst DSCardV2WithSchema = describe(DSCardV2);\nDSCardV2WithSchema.propTypes = DSCardV2PropTypesSchema;\n\nexport { DSCardV2, DSCardV2WithSchema };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -9,7 +9,8 @@ const CARD_V2_SLOTS = {
   RIGHT_ADDON_SECTION: "right-addon-section",
   SEPARATOR: "separator",
   MAIN_SECTION: "main-section",
-  DESCRIPTION: "description"
+  DESCRIPTION: "description",
+  TITLE: "title"
 };
 const CARD_V2_DATA_TESTID = {
   ...slotObjectToDataTestIds(DSCardV2Name, CARD_V2_SLOTS),

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardV2Name = 'DSCardv2';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_SLOTS = {\n  CARD_CONTAINER: 'container',\n  LEFT_SECTION: 'left-section',\n  LEFT_ADDON: 'left-addon',\n  RIGHT_ADDON: 'right-addon',\n  RIGHT_ADDON_SECTION: 'right-addon-section',\n  SEPARATOR: 'separator',\n  MAIN_SECTION: 'main-section',\n  DESCRIPTION: 'description',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSCardV2Name, CARD_V2_SLOTS),\n  CARD_CONTAINER: 'em-ds-card',\n  CARD_HEADER: 'em-ds-card-header',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AAGrB,MAAM,gBAAgB;AAAA,EAC3B,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,aAAa;AACf;AAGO,MAAM,sBAAsB;AAAA,EACjC,GAAG,wBAAwB,cAAc,aAAa;AAAA,EACtD,gBAAgB;AAAA,EAChB,aAAa;AACf;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardV2Name = 'DSCardv2';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_SLOTS = {\n  CARD_CONTAINER: 'container',\n  LEFT_SECTION: 'left-section',\n  LEFT_ADDON: 'left-addon',\n  RIGHT_ADDON: 'right-addon',\n  RIGHT_ADDON_SECTION: 'right-addon-section',\n  SEPARATOR: 'separator',\n  MAIN_SECTION: 'main-section',\n  DESCRIPTION: 'description',\n  TITLE: 'title',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSCardV2Name, CARD_V2_SLOTS),\n  CARD_CONTAINER: 'em-ds-card',\n  CARD_HEADER: 'em-ds-card-header',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AAGrB,MAAM,gBAAgB;AAAA,EAC3B,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,aAAa;AAAA,EACb,OAAO;AACT;AAGO,MAAM,sBAAsB;AAAA,EACjC,GAAG,wBAAwB,cAAc,aAAa;AAAA,EACtD,gBAAgB;AAAA,EAChB,aAAa;AACf;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
 const defaultProps = {
-  hasBorder: false
+  hasBorder: false,
+  wrapText: true
 };
 const DSCardV2PropTypes = {
   ...globalAttributesPropTypes,
@@ -25,7 +26,11 @@ const DSCardV2PropTypes = {
   /**
    * Wheter if the card has border or not
    */
-  hasBorder: PropTypes.bool.description("Wheter if the card has border or not").defaultValue(false)
+  hasBorder: PropTypes.bool.description("Wheter if the card has border or not").defaultValue(false),
+  /**
+   * Whether title and description wrap instead of truncating with tooltip
+   */
+  wrapText: PropTypes.bool.description("Whether title and description wrap instead of truncating with tooltip").defaultValue(true)
 };
 const DSCardV2PropTypesSchema = DSCardV2PropTypes;
 export {

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSCardV2T {\n  export interface RequiredProps {\n    title: string;\n  }\n\n  export interface DefaultProps {\n    hasBorder?: boolean;\n  }\n\n  export interface OptionalProps {\n    description?: string;\n    leftAddon?: JSX.Element;\n    rightAddon?: JSX.Element | JSX.Element[];\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSCardV2T.DefaultProps = {\n  hasBorder: false,\n};\n\nexport const DSCardV2PropTypes: DSPropTypesSchema<DSCardV2T.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /**\n   * Title of the card. requiered\n   */\n  title: PropTypes.string.isRequired.description('Title of the card. requiered'),\n  /**\n   * Description of the card. not requiered\n   */\n  description: PropTypes.string.description('Description of the card. not requiered'),\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').defaultValue(false),\n};\n\nexport const DSCardV2PropTypesSchema = DSCardV2PropTypes as unknown as WeakValidationMap<DSCardV2T.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AAsChE,MAAM,eAAuC;AAAA,EAClD,WAAW;AACb;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,OAAO,UAAU,OAAO,WAAW,YAAY,8BAA8B;AAAA;AAAA;AAAA;AAAA,EAI7E,aAAa,UAAU,OAAO,YAAY,wCAAwC;AAAA;AAAA;AAAA;AAAA,EAIlF,WAAW,UAAU,QAAQ,YAAY,YAAY;AAAA;AAAA;AAAA;AAAA,EAIrD,YAAY,UAAU,MAAM,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAI5E,WAAW,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAClG;AAEO,MAAM,0BAA0B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSCardV2T {\n  export interface RequiredProps {\n    title: string;\n  }\n\n  export interface DefaultProps {\n    hasBorder?: boolean;\n    wrapText?: boolean;\n  }\n\n  export interface OptionalProps {\n    description?: string;\n    leftAddon?: JSX.Element;\n    rightAddon?: JSX.Element | JSX.Element[];\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSCardV2T.DefaultProps = {\n  hasBorder: false,\n  wrapText: true,\n};\n\nexport const DSCardV2PropTypes: DSPropTypesSchema<DSCardV2T.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /**\n   * Title of the card. requiered\n   */\n  title: PropTypes.string.isRequired.description('Title of the card. requiered'),\n  /**\n   * Description of the card. not requiered\n   */\n  description: PropTypes.string.description('Description of the card. not requiered'),\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').defaultValue(false),\n  /**\n   * Whether title and description wrap instead of truncating with tooltip\n   */\n  wrapText: PropTypes.bool\n    .description('Whether title and description wrap instead of truncating with tooltip')\n    .defaultValue(true),\n};\n\nexport const DSCardV2PropTypesSchema = DSCardV2PropTypes as unknown as WeakValidationMap<DSCardV2T.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AAuChE,MAAM,eAAuC;AAAA,EAClD,WAAW;AAAA,EACX,UAAU;AACZ;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,OAAO,UAAU,OAAO,WAAW,YAAY,8BAA8B;AAAA;AAAA;AAAA;AAAA,EAI7E,aAAa,UAAU,OAAO,YAAY,wCAAwC;AAAA;AAAA;AAAA;AAAA,EAIlF,WAAW,UAAU,QAAQ,YAAY,YAAY;AAAA;AAAA;AAAA;AAAA,EAIrD,YAAY,UAAU,MAAM,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAI5E,WAAW,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAAA;AAAA;AAAA;AAAA,EAIhG,UAAU,UAAU,KACjB,YAAY,uEAAuE,EACnF,aAAa,IAAI;AACtB;AAEO,MAAM,0BAA0B;",
   "names": []
 }

package/dist/esm/styles.js

@@ -6,7 +6,7 @@ const CardContainer = styled(Grid, { name: DSCardV2Name, slot: CARD_V2_SLOTS.CAR
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  height: 56px;
+  min-height: 56px;
   padding: 8px 16px;
   position: relative;
   border: ${({ theme, hasBorder }) => hasBorder ? `1px solid ${theme.colors.neutral["100"]}` : ""};
@@ -23,10 +23,6 @@ const CardContainer = styled(Grid, { name: DSCardV2Name, slot: CARD_V2_SLOTS.CAR
   }
   ${xStyledCommonProps}
 `;
-const LeftSection = styled("div", { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_SECTION })`
-  display: flex;
-  align-items: center;
-`;
 const LeftAddon = styled("div", { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_ADDON })`
   height: fit-content;
   width: fit-content;
@@ -52,6 +48,15 @@ const Separator = styled("div", { name: DSCardV2Name, slot: CARD_V2_SLOTS.SEPARA
 const MainSection = styled("div", { name: DSCardV2Name, slot: CARD_V2_SLOTS.MAIN_SECTION })`
   display: flex;
   flex-direction: column;
+  min-width: 0;
+`;
+const Title = styled("h3", { name: DSCardV2Name, slot: CARD_V2_SLOTS.TITLE })`
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+  color: ${({ theme }) => theme.colors.neutral["800"]};
+  line-height: 1;
 `;
 const Description = styled("p", { name: DSCardV2Name, slot: CARD_V2_SLOTS.DESCRIPTION })`
   margin: 0;
@@ -61,10 +66,10 @@ export {
   CardContainer,
   Description,
   LeftAddon,
-  LeftSection,
   MainSection,
   RightAddon,
   RightAddonSection,
-  Separator
+  Separator,
+  Title
 };
 //# sourceMappingURL=styles.js.map

package/dist/esm/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV2Name, CARD_V2_SLOTS } from './constants/index.js';\n\nconst CardContainer = styled(Grid, { name: DSCardV2Name, slot: CARD_V2_SLOTS.CARD_CONTAINER })<{ hasBorder?: boolean }>`\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 }) => (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  ${xStyledCommonProps}\n`;\n\nconst LeftSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_SECTION })`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_ADDON })`\n  height: fit-content;\n  width: fit-content;\n  margin-right: 16px;\n  cursor: pointer;\n`;\n\nconst RightAddonSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON_SECTION })`\n  display: flex;\n  align-items: center;\n  width: fit-content;\n`;\n\nconst RightAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON })`\n  height: fit-content;\n  width: fit-content;\n  cursor: pointer;\n`;\n\nconst Separator = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.SEPARATOR })`\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', { name: DSCardV2Name, slot: CARD_V2_SLOTS.MAIN_SECTION })`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst Description = styled('p', { name: DSCardV2Name, slot: CARD_V2_SLOTS.DESCRIPTION })`\n  margin: 0;\n  color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nexport { CardContainer, LeftSection, LeftAddon, RightAddonSection, RightAddon, Separator, MainSection, Description };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,YAAY;AACrB,SAAS,cAAc,qBAAqB;AAE5C,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,cAAc,MAAM,cAAc,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOjF,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,aAAa,MAAM,OAAO,QAAQ,KAAK,CAAC,KAAK,EAAG;AAAA;AAAA;AAAA,+BAGpE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASvE,kBAAkB;AAAA;AAGtB,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAK1F,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtF,MAAM,oBAAoB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvG,MAAM,aAAa,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAMxF,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,UAAU,CAAC;AAAA;AAAA;AAAA,4BAGzD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIxE,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAK1F,MAAM,cAAc,OAAO,KAAK,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA;AAAA,WAE5E,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV2Name, CARD_V2_SLOTS } from './constants/index.js';\n\nconst CardContainer = styled(Grid, { name: DSCardV2Name, slot: CARD_V2_SLOTS.CARD_CONTAINER })<{ hasBorder?: boolean }>`\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  min-height: 56px;\n  padding: 8px 16px;\n  position: relative;\n  border: ${({ theme, hasBorder }) => (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  ${xStyledCommonProps}\n`;\n\nconst LeftAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_ADDON })`\n  height: fit-content;\n  width: fit-content;\n  margin-right: 16px;\n  cursor: pointer;\n`;\n\nconst RightAddonSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON_SECTION })`\n  display: flex;\n  align-items: center;\n  width: fit-content;\n`;\n\nconst RightAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON })`\n  height: fit-content;\n  width: fit-content;\n  cursor: pointer;\n`;\n\nconst Separator = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.SEPARATOR })`\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', { name: DSCardV2Name, slot: CARD_V2_SLOTS.MAIN_SECTION })`\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n`;\n\nconst Title = styled('h3', { name: DSCardV2Name, slot: CARD_V2_SLOTS.TITLE })`\n  margin: 0;\n  padding: 0;\n  font-size: 16px;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme }) => theme.colors.neutral['800']};\n  line-height: 1;\n`;\n\nconst Description = styled('p', { name: DSCardV2Name, slot: CARD_V2_SLOTS.DESCRIPTION })`\n  margin: 0;\n  color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nexport { CardContainer, LeftAddon, RightAddonSection, RightAddon, Separator, MainSection, Title, Description };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,YAAY;AACrB,SAAS,cAAc,qBAAqB;AAE5C,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,cAAc,MAAM,cAAc,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOjF,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,aAAa,MAAM,OAAO,QAAQ,KAAK,CAAC,KAAK,EAAG;AAAA;AAAA;AAAA,+BAGpE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASvE,kBAAkB;AAAA;AAGtB,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtF,MAAM,oBAAoB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvG,MAAM,aAAa,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAMxF,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,UAAU,CAAC;AAAA;AAAA;AAAA,4BAGzD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIxE,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAM1F,MAAM,QAAQ,OAAO,MAAM,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,iBAI3D,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA,WAC9C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIrD,MAAM,cAAc,OAAO,KAAK,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA;AAAA,WAE5E,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
   "names": []
 }

package/dist/types/constants/index.d.ts

@@ -8,6 +8,7 @@ export declare const CARD_V2_SLOTS: {
     readonly SEPARATOR: "separator";
     readonly MAIN_SECTION: "main-section";
     readonly DESCRIPTION: "description";
+    readonly TITLE: "title";
 };
 export declare const CARD_V2_DATA_TESTID: {
     CARD_CONTAINER: string;
@@ -19,4 +20,5 @@ export declare const CARD_V2_DATA_TESTID: {
     SEPARATOR: "ds-cardv2-separator";
     MAIN_SECTION: "ds-cardv2-main-section";
     DESCRIPTION: "ds-cardv2-description";
+    TITLE: "ds-cardv2-title";
 };

package/dist/types/react-desc-prop-types.d.ts

@@ -6,6 +6,7 @@ export declare namespace DSCardV2T {
     }
     interface DefaultProps {
         hasBorder?: boolean;
+        wrapText?: boolean;
     }
     interface OptionalProps {
         description?: string;

package/dist/types/styles.d.ts

@@ -1,11 +1,11 @@
 declare const CardContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
     hasBorder?: boolean;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
-declare const LeftSection: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 declare const LeftAddon: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 declare const RightAddonSection: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 declare const RightAddon: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 declare const Separator: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 declare const MainSection: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+declare const Title: import("styled-components").StyledComponent<"h3", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"h3">, never>;
 declare const Description: import("styled-components").StyledComponent<"p", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"p">, never>;
-export { CardContainer, LeftSection, LeftAddon, RightAddonSection, RightAddon, Separator, MainSection, Description };
+export { CardContainer, LeftAddon, RightAddonSection, RightAddon, Separator, MainSection, Title, Description };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-card-v2",
-  "version": "3.60.0-next.38",
+  "version": "3.60.0-next.39",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Card V2",
   "files": [
@@ -39,17 +39,17 @@
     "@elliemae/ds-legacy-header": "1.0.16",
     "lodash-es": "^4.17.21",
     "uid": "^2.0.2",
-    "@elliemae/ds-grid": "3.60.0-next.38",
-    "@elliemae/ds-props-helpers": "3.60.0-next.38",
-    "@elliemae/ds-system": "3.60.0-next.38",
-    "@elliemae/ds-truncated-tooltip-text": "3.60.0-next.38"
+    "@elliemae/ds-grid": "3.60.0-next.39",
+    "@elliemae/ds-system": "3.60.0-next.39",
+    "@elliemae/ds-props-helpers": "3.60.0-next.39",
+    "@elliemae/ds-truncated-tooltip-text": "3.60.0-next.39"
   },
   "devDependencies": {
     "@xstyled/system": "~3.8.1",
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-icons": "3.60.0-next.38",
-    "@elliemae/ds-monorepo-devops": "3.60.0-next.38"
+    "@elliemae/ds-monorepo-devops": "3.60.0-next.39",
+    "@elliemae/ds-icons": "3.60.0-next.39"
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",