@elliemae/ds-card-navigation 3.55.0-next.24 → 3.55.0-next.26

package/dist/cjs/DSCardNavigation.js

@@ -67,6 +67,8 @@ const DSCardNavigation = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_IconAndTextsRegion.IconAndTextsRegion,
           {
+            getOwnerProps,
+            getOwnerPropsArguments,
             title,
             description,
             wrapText,
@@ -76,7 +78,15 @@ const DSCardNavigation = (props) => {
             hideFocusRingAroundAll
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionsRegion.ActionsRegion, { actions, instanceUid })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ActionsRegion.ActionsRegion,
+          {
+            getOwnerProps,
+            getOwnerPropsArguments,
+            actions,
+            instanceUid
+          }
+        )
       ]
     }
   );

package/dist/cjs/DSCardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSCardNavigation.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useCardNavigation } from './config/useCardNavigation.js';\nimport { DSCardNavigationName } from './constants/index.js';\nimport { type DSCardNavigationT, DSCardNavigationPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledCardNavigationBoxWrapper } from './parts/style.js';\nimport { IconAndTextsRegion } from './parts/text-region/IconAndTextsRegion.js';\nimport { ActionsRegion } from './parts/ActionsRegion.js';\n\nconst DSCardNavigation: React.ComponentType<DSCardNavigationT.Props> = (props) => {\n  const cardNavigationConfig = useCardNavigation(props);\n  const {\n    propsWithDefault,\n    xstyledProps,\n    globalProps,\n    iconAndTextsRegionIsFocused,\n    showFocusRingAroundAll,\n    hideFocusRingAroundAll,\n    instanceUid,\n  } = cardNavigationConfig;\n  const { containerProps, title, description, type, Icon, actions, wrapText } = propsWithDefault;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSCardNavigationT.Props>(propsWithDefault);\n\n  return (\n    <StyledCardNavigationBoxWrapper\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      $isIconAndTextsRegionFocused={iconAndTextsRegionIsFocused}\n    >\n      <IconAndTextsRegion\n        title={title}\n        description={description}\n        wrapText={wrapText}\n        type={type}\n        Icon={Icon}\n        showFocusRingAroundAll={showFocusRingAroundAll}\n        hideFocusRingAroundAll={hideFocusRingAroundAll}\n      />\n      <ActionsRegion actions={actions} instanceUid={instanceUid} />\n    </StyledCardNavigationBoxWrapper>\n  );\n};\n\nDSCardNavigation.displayName = DSCardNavigationName;\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = DSCardNavigationPropTypesSchema;\n\nexport { DSCardNavigation, DSCardNavigationWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBnB;AAzBJ,8BAAwC;AAExC,+BAAkC;AAClC,uBAAqC;AACrC,mCAAwE;AACxE,mBAA+C;AAC/C,gCAAmC;AACnC,2BAA8B;AAE9B,MAAM,mBAAiE,CAAC,UAAU;AAChF,QAAM,2BAAuB,4CAAkB,KAAK;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,aAAa,MAAM,MAAM,SAAS,SAAS,IAAI;AAE9E,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAuC,gBAAgB;AAEzG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,8BAA8B;AAAA,MAE9B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA,4CAAC,sCAAc,SAAkB,aAA0B;AAAA;AAAA;AAAA,EAC7D;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,iCAA6B,kCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
+  "sourcesContent": ["import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useCardNavigation } from './config/useCardNavigation.js';\nimport { DSCardNavigationName } from './constants/index.js';\nimport { type DSCardNavigationT, DSCardNavigationPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledCardNavigationBoxWrapper } from './parts/style.js';\nimport { IconAndTextsRegion } from './parts/text-region/IconAndTextsRegion.js';\nimport { ActionsRegion } from './parts/ActionsRegion.js';\n\nconst DSCardNavigation: React.ComponentType<DSCardNavigationT.Props> = (props) => {\n  const cardNavigationConfig = useCardNavigation(props);\n  const {\n    propsWithDefault,\n    xstyledProps,\n    globalProps,\n    iconAndTextsRegionIsFocused,\n    showFocusRingAroundAll,\n    hideFocusRingAroundAll,\n    instanceUid,\n  } = cardNavigationConfig;\n  const { containerProps, title, description, type, Icon, actions, wrapText } = propsWithDefault;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSCardNavigationT.Props>(propsWithDefault);\n\n  return (\n    <StyledCardNavigationBoxWrapper\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      $isIconAndTextsRegionFocused={iconAndTextsRegionIsFocused}\n    >\n      <IconAndTextsRegion\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        title={title}\n        description={description}\n        wrapText={wrapText}\n        type={type}\n        Icon={Icon}\n        showFocusRingAroundAll={showFocusRingAroundAll}\n        hideFocusRingAroundAll={hideFocusRingAroundAll}\n      />\n      <ActionsRegion\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        actions={actions}\n        instanceUid={instanceUid}\n      />\n    </StyledCardNavigationBoxWrapper>\n  );\n};\n\nDSCardNavigation.displayName = DSCardNavigationName;\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = DSCardNavigationPropTypesSchema;\n\nexport { DSCardNavigation, DSCardNavigationWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBnB;AAzBJ,8BAAwC;AAExC,+BAAkC;AAClC,uBAAqC;AACrC,mCAAwE;AACxE,mBAA+C;AAC/C,gCAAmC;AACnC,2BAA8B;AAE9B,MAAM,mBAAiE,CAAC,UAAU;AAChF,QAAM,2BAAuB,4CAAkB,KAAK;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,aAAa,MAAM,MAAM,SAAS,SAAS,IAAI;AAE9E,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAuC,gBAAgB;AAEzG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,8BAA8B;AAAA,MAE9B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,iCAA6B,kCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
   "names": []
 }

package/dist/cjs/constants/index.js

@@ -44,11 +44,19 @@ const CARD_NAVIGATION_SLOTS = {
   ACTIONS: "actions",
   TYPE: "type",
   CENTRAL_CONTENT: "central-content",
-  INTERACTIVE_ELEMENT_REGION: "interactive-element-region"
+  INTERACTIVE_ELEMENT_REGION: "interactive-element-region",
+  DESCRIPTION_TEXT: "description-text",
+  TITLE_TYPOGRAPHY: "title-typography",
+  TITLE_WRAPPER: "title-wrapper",
+  CONTENT: "content",
+  BUTTON_WRAPPER: "button-wrapper",
+  ACTION_BUTTON: "action-button"
 };
 const CARD_NAVIGATION_DATA_TESTID = {
   ...(0, import_ds_system.slotObjectToDataTestIds)(DSCardNavigationName, CARD_NAVIGATION_SLOTS),
-  DESCRIPTION_TEXT: "ds-card-navigation--description"
+  DESCRIPTION_TEXT: "ds-card-navigation--description",
+  TITLE_TYPOGRAPHY: "ds-typography-element",
+  ACTION_BUTTON: "ds-button"
 };
 const CardNavigationTypes = {
   BORROWER: "borrower",

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 DSCardNavigationName = 'DSCardnavigation';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_SLOTS = {\n  ROOT: 'root',\n  TITLE: 'title',\n  ACTIONS: 'actions',\n  TYPE: 'type',\n  CENTRAL_CONTENT: 'central-content',\n  INTERACTIVE_ELEMENT_REGION: 'interactive-element-region',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSCardNavigationName, CARD_NAVIGATION_SLOTS),\n  DESCRIPTION_TEXT: 'ds-card-navigation--description',\n};\n\nexport const CardNavigationTypes = {\n  BORROWER: 'borrower',\n  FINANCIAL: 'financial',\n  LOAN: 'loan',\n  REGULATORY: 'regulatory',\n} as const;\n\nexport const CardNavigationTypesValues = Object.values(CardNavigationTypes);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,uBAAuB;AAG7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B;AAGO,MAAM,8BAA8B;AAAA,EACzC,OAAG,0CAAwB,sBAAsB,qBAAqB;AAAA,EACtE,kBAAkB;AACpB;AAEO,MAAM,sBAAsB;AAAA,EACjC,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AACd;AAEO,MAAM,4BAA4B,OAAO,OAAO,mBAAmB;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardNavigationName = 'DSCardnavigation';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_SLOTS = {\n  ROOT: 'root',\n  TITLE: 'title',\n  ACTIONS: 'actions',\n  TYPE: 'type',\n  CENTRAL_CONTENT: 'central-content',\n  INTERACTIVE_ELEMENT_REGION: 'interactive-element-region',\n  DESCRIPTION_TEXT: 'description-text',\n  TITLE_TYPOGRAPHY: 'title-typography',\n  TITLE_WRAPPER: 'title-wrapper',\n  CONTENT: 'content',\n  BUTTON_WRAPPER: 'button-wrapper',\n  ACTION_BUTTON: 'action-button',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSCardNavigationName, CARD_NAVIGATION_SLOTS),\n  DESCRIPTION_TEXT: 'ds-card-navigation--description',\n  TITLE_TYPOGRAPHY: 'ds-typography-element',\n  ACTION_BUTTON: 'ds-button',\n};\n\nexport const CardNavigationTypes = {\n  BORROWER: 'borrower',\n  FINANCIAL: 'financial',\n  LOAN: 'loan',\n  REGULATORY: 'regulatory',\n} as const;\n\nexport const CardNavigationTypesValues = Object.values(CardNavigationTypes);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,uBAAuB;AAG7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAGO,MAAM,8BAA8B;AAAA,EACzC,OAAG,0CAAwB,sBAAsB,qBAAqB;AAAA,EACtE,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AACjB;AAEO,MAAM,sBAAsB;AAAA,EACjC,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AACd;AAEO,MAAM,4BAA4B,OAAO,OAAO,mBAAmB;",
   "names": []
 }

package/dist/cjs/index.js

@@ -33,6 +33,7 @@ __export(index_exports, {
   CardNavigationTypes: () => import_constants.CardNavigationTypes,
   CardNavigationTypesValues: () => import_constants.CardNavigationTypesValues,
   DSCardNavigation: () => import_DSCardNavigation2.DSCardNavigation,
+  DSCardNavigationName: () => import_constants.DSCardNavigationName,
   DSCardNavigationWithSchema: () => import_DSCardNavigation2.DSCardNavigationWithSchema,
   default: () => index_default
 });

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport { DSCardNavigation } from './DSCardNavigation.js';\nimport type {} from '@xstyled/system';\nexport { DSCardNavigation, DSCardNavigationWithSchema } from './DSCardNavigation.js';\nexport { type DSCardNavigationT } from './react-desc-prop-types.js';\nexport {\n  CARD_NAVIGATION_SLOTS,\n  CARD_NAVIGATION_DATA_TESTID,\n  CardNavigationTypesValues,\n  CardNavigationTypes,\n} from './constants/index.js';\n\nexport default DSCardNavigation;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAiC;AAEjC,IAAAA,2BAA6D;AAE7D,uBAKO;AAEP,IAAO,gBAAQ;",
+  "sourcesContent": ["// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport { DSCardNavigation } from './DSCardNavigation.js';\nimport type {} from '@xstyled/system';\nexport { DSCardNavigation, DSCardNavigationWithSchema } from './DSCardNavigation.js';\nexport { type DSCardNavigationT } from './react-desc-prop-types.js';\nexport {\n  CARD_NAVIGATION_SLOTS,\n  CARD_NAVIGATION_DATA_TESTID,\n  CardNavigationTypesValues,\n  CardNavigationTypes,\n  DSCardNavigationName,\n} from './constants/index.js';\n\nexport default DSCardNavigation;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAiC;AAEjC,IAAAA,2BAA6D;AAE7D,uBAMO;AAEP,IAAO,gBAAQ;",
   "names": ["import_DSCardNavigation"]
 }

package/dist/cjs/parts/ActionsRegion.js

@@ -36,22 +36,31 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_style = require("./style.js");
-const ActionsRegion = ({ actions, instanceUid }) => {
+const ActionsRegion = ({
+  actions,
+  instanceUid,
+  getOwnerProps,
+  getOwnerPropsArguments
+}) => {
   if (actions.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationActions, { children: actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationActions, { getOwnerProps, getOwnerPropsArguments, children: actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {
     const defaultIconJSX = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MoreOptionsVert, { "aria-label": "More options" });
     const iconJSX = icon ?? defaultIconJSX;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_style.StyledCardNavigationAction,
+      import_style.StyledCardNavigationButtonWrapper,
       {
+        getOwnerProps,
+        getOwnerPropsArguments,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_ds_button_v2.DSButtonV3,
+          import_style.StyledCardNavigationActionButton,
           {
             onClick,
             "aria-label": "More options",
             ...unexpectedButPreviouslySupportedOtherProps,
             buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
             size: import_ds_button_v2.BUTTON_SIZES.L,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}) : iconJSX
           }
         )

package/dist/cjs/parts/ActionsRegion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/ActionsRegion.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { BUTTON_SIZES, BUTTON_TYPES, DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../react-desc-prop-types.js';\nimport { StyledCardNavigationAction, StyledCardNavigationActions } from './style.js';\n\ninterface ActionRegionProps {\n  actions: DSCardNavigationT.InternalProps['actions'];\n  instanceUid: string;\n}\n\nexport const ActionsRegion: React.ComponentType<ActionRegionProps> = ({ actions, instanceUid }) => {\n  if (actions.length === 0) return null;\n  return (\n    <StyledCardNavigationActions>\n      {actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {\n        const defaultIconJSX = <MoreOptionsVert aria-label=\"More options\" />;\n        const iconJSX = icon ?? defaultIconJSX;\n        return (\n          <StyledCardNavigationAction\n            // eslint-disable-next-line react/no-array-index-key\n            key={`${instanceUid}-${index}`}\n          >\n            <DSButtonV3\n              onClick={onClick}\n              aria-label=\"More options\"\n              {...unexpectedButPreviouslySupportedOtherProps}\n              buttonType={BUTTON_TYPES.ICON}\n              size={BUTTON_SIZES.L}\n            >\n              {Icon ? <Icon /> : iconJSX}\n            </DSButtonV3>\n          </StyledCardNavigationAction>\n        );\n      })}\n    </StyledCardNavigationActions>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBQ;AAhB/B,0BAAuD;AACvD,sBAAgC;AAGhC,mBAAwE;AAOjE,MAAM,gBAAwD,CAAC,EAAE,SAAS,YAAY,MAAM;AACjG,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,4CAAC,4CACE,kBAAQ,IAAI,CAAC,EAAE,MAAM,MAAM,SAAS,GAAG,2CAA2C,GAAG,UAAU;AAC9F,UAAM,iBAAiB,4CAAC,mCAAgB,cAAW,gBAAe;AAClE,UAAM,UAAU,QAAQ;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QAIC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAW;AAAA,YACV,GAAG;AAAA,YACJ,YAAY,iCAAa;AAAA,YACzB,MAAM,iCAAa;AAAA,YAElB,iBAAO,4CAAC,QAAK,IAAK;AAAA;AAAA,QACrB;AAAA;AAAA,MAVK,GAAG,WAAW,IAAI,KAAK;AAAA,IAW9B;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["import { BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../react-desc-prop-types.js';\nimport {\n  StyledCardNavigationButtonWrapper,\n  StyledCardNavigationActions,\n  StyledCardNavigationActionButton,\n} from './style.js';\n\ninterface ActionRegionProps {\n  actions: DSCardNavigationT.InternalProps['actions'];\n  instanceUid: string;\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}\n\nexport const ActionsRegion: React.ComponentType<ActionRegionProps> = ({\n  actions,\n  instanceUid,\n  getOwnerProps,\n  getOwnerPropsArguments,\n}) => {\n  if (actions.length === 0) return null;\n  return (\n    <StyledCardNavigationActions getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      {actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {\n        const defaultIconJSX = <MoreOptionsVert aria-label=\"More options\" />;\n        const iconJSX = icon ?? defaultIconJSX;\n        return (\n          <StyledCardNavigationButtonWrapper\n            // eslint-disable-next-line react/no-array-index-key\n            key={`${instanceUid}-${index}`}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <StyledCardNavigationActionButton\n              onClick={onClick}\n              aria-label=\"More options\"\n              {...unexpectedButPreviouslySupportedOtherProps}\n              buttonType={BUTTON_TYPES.ICON}\n              size={BUTTON_SIZES.L}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              {Icon ? <Icon /> : iconJSX}\n            </StyledCardNavigationActionButton>\n          </StyledCardNavigationButtonWrapper>\n        );\n      })}\n    </StyledCardNavigationActions>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BQ;AA3B/B,0BAA2C;AAC3C,sBAAgC;AAGhC,mBAIO;AASA,MAAM,gBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,4CAAC,4CAA4B,eAA8B,wBACxD,kBAAQ,IAAI,CAAC,EAAE,MAAM,MAAM,SAAS,GAAG,2CAA2C,GAAG,UAAU;AAC9F,UAAM,iBAAiB,4CAAC,mCAAgB,cAAW,gBAAe;AAClE,UAAM,UAAU,QAAQ;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QAGC;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAW;AAAA,YACV,GAAG;AAAA,YACJ,YAAY,iCAAa;AAAA,YACzB,MAAM,iCAAa;AAAA,YACnB;AAAA,YACA;AAAA,YAEC,iBAAO,4CAAC,QAAK,IAAK;AAAA;AAAA,QACrB;AAAA;AAAA,MAdK,GAAG,WAAW,IAAI,KAAK;AAAA,IAe9B;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/style.js

@@ -28,9 +28,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var style_exports = {};
 __export(style_exports, {
-  StyledCardNavigationAction: () => StyledCardNavigationAction,
+  StyledCardNavigationActionButton: () => StyledCardNavigationActionButton,
   StyledCardNavigationActions: () => StyledCardNavigationActions,
   StyledCardNavigationBoxWrapper: () => StyledCardNavigationBoxWrapper,
+  StyledCardNavigationButtonWrapper: () => StyledCardNavigationButtonWrapper,
   StyledCardNavigationCentralContent: () => StyledCardNavigationCentralContent,
   StyledCardNavigationContent: () => StyledCardNavigationContent,
   StyledCardNavigationContentTitle: () => StyledCardNavigationContentTitle,
@@ -45,12 +46,17 @@ var React = __toESM(require("react"));
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_typography = require("@elliemae/ds-typography");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_constants = require("../constants/index.js");
 const StyledCardNavigationContentTitle = (0, import_ds_system.styled)("div", {
   name: import_constants.DSCardNavigationName,
   slot: import_constants.CARD_NAVIGATION_SLOTS.TITLE
 })``;
-const StyledTitleTypography = (0, import_ds_system.styled)(import_ds_typography.DSTypography)`
+const StyledTitleTypography = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
+  name: import_constants.DSCardNavigationName,
+  slot: import_constants.CARD_NAVIGATION_SLOTS.TITLE_TYPOGRAPHY,
+  preserveLegacyDataTestId: true
+})`
   color: ${(props) => props.theme.colors.neutral["700"]};
   font-weight: ${(props) => props.theme.fontWeights.semibold};
   font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem
@@ -59,7 +65,11 @@ const StyledTitleTypography = (0, import_ds_system.styled)(import_ds_typography.
     font-size: 1.125rem; // 18px -> 18/16 = 1.125rem
   }
 `;
-const StyledDescriptionTypography = (0, import_ds_system.styled)(import_ds_typography.DSTypography)`
+const StyledDescriptionTypography = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
+  name: import_constants.DSCardNavigationName,
+  slot: import_constants.CARD_NAVIGATION_SLOTS.DESCRIPTION_TEXT,
+  preserveLegacyDataTestId: true
+})`
   color: ${(props) => props.theme.colors.neutral["500"]};
   font-size: 0.923rem; // 12px -> 12/13 = 0.923rem
 
@@ -67,10 +77,16 @@ const StyledDescriptionTypography = (0, import_ds_system.styled)(import_ds_typog
     font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem
   }
 `;
-const StyledCardNavigationContentTitleWrapper = import_ds_system.styled.div`
+const StyledCardNavigationContentTitleWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSCardNavigationName,
+  slot: import_constants.CARD_NAVIGATION_SLOTS.TITLE_WRAPPER
+})`
   width: 100%;
 `;
-const StyledCardNavigationContent = import_ds_system.styled.div`
+const StyledCardNavigationContent = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSCardNavigationName,
+  slot: import_constants.CARD_NAVIGATION_SLOTS.CONTENT
+})`
   display: flex;
   align-items: center;
   flex: 1;
@@ -150,7 +166,10 @@ const StyledCardNavigationActions = (0, import_ds_system.styled)("div", {
   align-items: center;
   gap: ${(props) => props.theme.space.xs};
 `;
-const StyledCardNavigationAction = (0, import_ds_system.styled)("div")`
+const StyledCardNavigationButtonWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSCardNavigationName,
+  slot: import_constants.CARD_NAVIGATION_SLOTS.BUTTON_WRAPPER
+})`
   span,
   svg {
     height: ${({ theme }) => theme.space.s};
@@ -173,4 +192,9 @@ const StyledGridTextContainer = (0, import_ds_system.styled)("div", {
   }
   cursor: pointer;
 `;
+const StyledCardNavigationActionButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
+  name: import_constants.DSCardNavigationName,
+  slot: import_constants.CARD_NAVIGATION_SLOTS.ACTION_BUTTON,
+  preserveLegacyDataTestId: true
+})``;
 //# sourceMappingURL=style.js.map

package/dist/cjs/parts/style.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/style.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from '../constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.TITLE,\n})``;\n\nexport const StyledTitleTypography = styled(DSTypography)`\n  color: ${(props) => props.theme.colors.neutral['700']};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem\n\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 1.125rem; // 18px -> 18/16 = 1.125rem\n  }\n`;\n\nexport const StyledDescriptionTypography = styled(DSTypography)`\n  color: ${(props) => props.theme.colors.neutral['500']};\n  font-size: 0.923rem; // 12px -> 12/13 = 0.923rem\n\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem\n  }\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled.div`\n  width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled.div<{ wrapText?: boolean }>`\n  display: flex;\n  align-items: center;\n  flex: 1;\n  width: 100%;\n`;\n\nexport const StyledCardNavigationCentralContent = styled(Grid, {\n  slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,\n  name: DSCardNavigationName,\n})<{ wrapText?: boolean; AnyOverFlow?: boolean }>`\n  padding: 0 ${(props) => props.theme.space.xs};\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n  fluid?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps & { $isIconAndTextsRegionFocused?: boolean }>`\n  min-width: 240px;\n  min-height: 64px;\n  width: 337px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n  border-radius: 2px;\n  position: relative;\n  outline: none;\n\n  ${(props) => (props.fluid ? 'width: 100%' : '')};\n  @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n    width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n  }\n\n  :after {\n    display: block;\n    content: '';\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    left: 0;\n    border: solid ${(props) => props.theme.space.xxs} transparent;\n    border-radius: 2px;\n    pointer-events: none;\n  }\n  &:hover {\n    box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n    outline-offset: 2px;\n  }\n\n  ${(props) =>\n    props.$isIconAndTextsRegionFocused\n      ? css`\n          outline: 2px solid ${props.theme.colors.brand['700']};\n          outline-offset: 2px;\n        `\n      : css``}\n`;\n\ninterface StyledCardNavigationIconProps {\n  $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];\n}\n\nexport const StyledCardNavigationIcon = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.TYPE,\n})<StyledCardNavigationIconProps>`\n  min-width: 64px;\n  min-height: 64px;\n  height: 100%;\n  border-top-left-radius: 2px;\n  border-bottom-left-radius: 2px;\n  padding: 0 ${(props) => props.theme.space.xs};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  fill: #ffffff;\n  background-color: ${({ $type }) =>\n    ($type === CardNavigationTypes.BORROWER && '#32aad1') ||\n    ($type === CardNavigationTypes.FINANCIAL && '#1ba88d') ||\n    ($type === CardNavigationTypes.LOAN && '#8e49b2') ||\n    ($type === CardNavigationTypes.REGULATORY && '#db5575') ||\n    '#32aad1'};\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})`\n  padding: 0 ${(props) => props.theme.space.xs};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledCardNavigationAction = styled('div')`\n  span,\n  svg {\n    height: ${({ theme }) => theme.space.s};\n    width: ${({ theme }) => theme.space.s};\n    fill: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nexport const StyledGridTextContainer = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.INTERACTIVE_ELEMENT_REGION,\n})`\n  display: grid;\n  grid-template-columns: max-content auto;\n  align-items: center;\n  min-width: 0;\n  width: 100%;\n  overflow: hidden;\n  &:focus {\n    outline: none;\n  }\n  cursor: pointer;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from '../constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.TITLE,\n})``;\n\nexport const StyledTitleTypography = styled(DSTypography, {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.TITLE_TYPOGRAPHY,\n  preserveLegacyDataTestId: true,\n})`\n  color: ${(props) => props.theme.colors.neutral['700']};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem\n\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 1.125rem; // 18px -> 18/16 = 1.125rem\n  }\n`;\n\nexport const StyledDescriptionTypography = styled(DSTypography, {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.DESCRIPTION_TEXT,\n  preserveLegacyDataTestId: true,\n})`\n  color: ${(props) => props.theme.colors.neutral['500']};\n  font-size: 0.923rem; // 12px -> 12/13 = 0.923rem\n\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem\n  }\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.TITLE_WRAPPER,\n})`\n  width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.CONTENT,\n})<{ wrapText?: boolean }>`\n  display: flex;\n  align-items: center;\n  flex: 1;\n  width: 100%;\n`;\n\nexport const StyledCardNavigationCentralContent = styled(Grid, {\n  slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,\n  name: DSCardNavigationName,\n})<{ wrapText?: boolean; AnyOverFlow?: boolean }>`\n  padding: 0 ${(props) => props.theme.space.xs};\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n  fluid?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps & { $isIconAndTextsRegionFocused?: boolean }>`\n  min-width: 240px;\n  min-height: 64px;\n  width: 337px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n  border-radius: 2px;\n  position: relative;\n  outline: none;\n\n  ${(props) => (props.fluid ? 'width: 100%' : '')};\n  @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n    width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n  }\n\n  :after {\n    display: block;\n    content: '';\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    left: 0;\n    border: solid ${(props) => props.theme.space.xxs} transparent;\n    border-radius: 2px;\n    pointer-events: none;\n  }\n  &:hover {\n    box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n    outline-offset: 2px;\n  }\n\n  ${(props) =>\n    props.$isIconAndTextsRegionFocused\n      ? css`\n          outline: 2px solid ${props.theme.colors.brand['700']};\n          outline-offset: 2px;\n        `\n      : css``}\n`;\n\ninterface StyledCardNavigationIconProps {\n  $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];\n}\n\nexport const StyledCardNavigationIcon = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.TYPE,\n})<StyledCardNavigationIconProps>`\n  min-width: 64px;\n  min-height: 64px;\n  height: 100%;\n  border-top-left-radius: 2px;\n  border-bottom-left-radius: 2px;\n  padding: 0 ${(props) => props.theme.space.xs};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  fill: #ffffff;\n  background-color: ${({ $type }) =>\n    ($type === CardNavigationTypes.BORROWER && '#32aad1') ||\n    ($type === CardNavigationTypes.FINANCIAL && '#1ba88d') ||\n    ($type === CardNavigationTypes.LOAN && '#8e49b2') ||\n    ($type === CardNavigationTypes.REGULATORY && '#db5575') ||\n    '#32aad1'};\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})`\n  padding: 0 ${(props) => props.theme.space.xs};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledCardNavigationButtonWrapper = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.BUTTON_WRAPPER,\n})`\n  span,\n  svg {\n    height: ${({ theme }) => theme.space.s};\n    width: ${({ theme }) => theme.space.s};\n    fill: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nexport const StyledGridTextContainer = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.INTERACTIVE_ELEMENT_REGION,\n})`\n  display: grid;\n  grid-template-columns: max-content auto;\n  align-items: center;\n  min-width: 0;\n  width: 100%;\n  overflow: hidden;\n  &:focus {\n    outline: none;\n  }\n  cursor: pointer;\n`;\n\nexport const StyledCardNavigationActionButton = styled(DSButtonV3, {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.ACTION_BUTTON,\n  preserveLegacyDataTestId: true,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAA4B;AAC5B,2BAA6B;AAC7B,0BAA2B;AAC3B,uBAAiF;AAE1E,MAAM,uCAAmC,yBAAO,OAAO;AAAA,EAC5D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,4BAAwB,yBAAO,mCAAc;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAAA,EAC5B,0BAA0B;AAC5B,CAAC;AAAA,WACU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACtC,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA,uBAGrC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAKtD,MAAM,kCAA8B,yBAAO,mCAAc;AAAA,EAC9D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAAA,EAC5B,0BAA0B;AAC5B,CAAC;AAAA,WACU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,uBAGhC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAKtD,MAAM,8CAA0C,yBAAO,OAAO;AAAA,EACnE,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,kCAA8B,yBAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,yCAAqC,yBAAO,qBAAM;AAAA,EAC7D,MAAM,uCAAsB;AAAA,EAC5B,MAAM;AACR,CAAC;AAAA,eACc,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAMvC,MAAM,qCAAiC,yBAAO,OAAO;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYG,CAAC,UAAW,MAAM,QAAQ,gBAAgB,EAAG;AAAA,uBAC1B,CAAC,UAAU,MAAM,MAAM,YAAY,KAAK;AAAA,aAClD,CAAC,UAAW,MAAM,QAAQ,gBAAgB,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAW3C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAShD,CAAC,UACD,MAAM,+BACF;AAAA,+BACuB,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA,YAGtD,sBAAK;AAAA;AAON,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMc,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKxB,CAAC,EAAE,MAAM,MAC1B,UAAU,qCAAoB,YAAY,aAC1C,UAAU,qCAAoB,aAAa,aAC3C,UAAU,qCAAoB,QAAQ,aACtC,UAAU,qCAAoB,cAAc,aAC7C,SAAS;AAAA;AAGN,MAAM,kCAA8B,yBAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,eACc,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA,SAIrC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAGjC,MAAM,wCAAoC,yBAAO,OAAO;AAAA,EAC7D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,cAGa,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA,aAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA,YAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI7C,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaM,MAAM,uCAAmC,yBAAO,gCAAY;AAAA,EACjE,MAAM;AAAA,EACN,MAAM,uCAAsB;AAAA,EAC5B,0BAA0B;AAC5B,CAAC;",
   "names": []
 }

package/dist/cjs/parts/text-region/IconAndTextsRegion.js

@@ -50,7 +50,9 @@ const IconAndTextsRegion = ({
   type,
   Icon,
   showFocusRingAroundAll,
-  hideFocusRingAroundAll
+  hideFocusRingAroundAll,
+  getOwnerProps,
+  getOwnerPropsArguments
 }) => {
   const [isTitleTruncating, setIsTitleTruncating] = import_react.default.useState(false);
   const [isDescriptionTruncating, setIsDescriptionTruncating] = import_react.default.useState(false);
@@ -80,7 +82,9 @@ const IconAndTextsRegion = ({
         titleHandleRef,
         descriptionHandleRef,
         showFocusRingAroundAll,
-        hideFocusRingAroundAll
+        hideFocusRingAroundAll,
+        getOwnerProps,
+        getOwnerPropsArguments
       }
     ) });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -94,7 +98,9 @@ const IconAndTextsRegion = ({
       titleHandleRef,
       descriptionHandleRef,
       showFocusRingAroundAll,
-      hideFocusRingAroundAll
+      hideFocusRingAroundAll,
+      getOwnerProps,
+      getOwnerPropsArguments
     }
   );
 };

package/dist/cjs/parts/text-region/IconAndTextsRegion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/text-region/IconAndTextsRegion.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport type { DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { DSTypography, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport { IconAndTextsRegionContent } from './IconAndTextsRegionContent.js';\n\ntype TooltipTextProps = DSTooltipV3T.CustomInterface<{\n  title: string;\n  description: string;\n}>;\n\nconst TooltipText: React.ComponentType<TooltipTextProps> = ({ title, description }) => (\n  <Grid>\n    <DSTypography variant={TYPOGRAPHY_VARIANTS.H5_ARTICLE}>{title}</DSTypography>\n    <DSTypography variant={TYPOGRAPHY_VARIANTS.B1}>{description}</DSTypography>\n  </Grid>\n);\n\ninterface IconAndTextsRegionProps {\n  title: DSCardNavigationT.InternalProps['title'];\n  description: DSCardNavigationT.InternalProps['description'];\n  wrapText: DSCardNavigationT.InternalProps['wrapText'];\n  type: DSCardNavigationT.InternalProps['type'];\n  Icon: DSCardNavigationT.InternalProps['Icon'];\n  showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n  hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const IconAndTextsRegion: React.ComponentType<IconAndTextsRegionProps> = ({\n  title,\n  description,\n  wrapText,\n  type,\n  Icon,\n  showFocusRingAroundAll,\n  hideFocusRingAroundAll,\n}) => {\n  const [isTitleTruncating, setIsTitleTruncating] = React.useState(false);\n  const [isDescriptionTruncating, setIsDescriptionTruncating] = React.useState(false);\n\n  const AnyOverFlow = isTitleTruncating || isDescriptionTruncating;\n\n  const { handleRef: titleHandleRef } = useOnOverflowChange({\n    onOverflowStateChange: setIsTitleTruncating,\n  });\n\n  const { handleRef: descriptionHandleRef } = useOnOverflowChange({\n    onOverflowStateChange: setIsDescriptionTruncating,\n  });\n  const TooltipTextProps = React.useMemo(\n    () => ({\n      title,\n      description,\n    }),\n    [title, description],\n  );\n\n  if (AnyOverFlow)\n    return (\n      <DSTooltipV3<TooltipTextProps> Text={TooltipText} textProps={TooltipTextProps}>\n        <IconAndTextsRegionContent\n          title={title}\n          description={description}\n          wrapText={wrapText}\n          type={type}\n          Icon={Icon}\n          titleHandleRef={titleHandleRef}\n          descriptionHandleRef={descriptionHandleRef}\n          showFocusRingAroundAll={showFocusRingAroundAll}\n          hideFocusRingAroundAll={hideFocusRingAroundAll}\n        />\n      </DSTooltipV3>\n    );\n  return (\n    <IconAndTextsRegionContent\n      title={title}\n      description={description}\n      wrapText={wrapText}\n      type={type}\n      Icon={Icon}\n      titleHandleRef={titleHandleRef}\n      descriptionHandleRef={descriptionHandleRef}\n      showFocusRingAroundAll={showFocusRingAroundAll}\n      hideFocusRingAroundAll={hideFocusRingAroundAll}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADerB;AAfF,qBAAqB;AACrB,yCAAoC;AAEpC,2BAA4B;AAC5B,2BAAkD;AAClD,mBAAkB;AAElB,uCAA0C;AAO1C,MAAM,cAAqD,CAAC,EAAE,OAAO,YAAY,MAC/E,6CAAC,uBACC;AAAA,8CAAC,qCAAa,SAAS,yCAAoB,YAAa,iBAAM;AAAA,EAC9D,4CAAC,qCAAa,SAAS,yCAAoB,IAAK,uBAAY;AAAA,GAC9D;AAaK,MAAM,qBAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,aAAAA,QAAM,SAAS,KAAK;AACtE,QAAM,CAAC,yBAAyB,0BAA0B,IAAI,aAAAA,QAAM,SAAS,KAAK;AAElF,QAAM,cAAc,qBAAqB;AAEzC,QAAM,EAAE,WAAW,eAAe,QAAI,wDAAoB;AAAA,IACxD,uBAAuB;AAAA,EACzB,CAAC;AAED,QAAM,EAAE,WAAW,qBAAqB,QAAI,wDAAoB;AAAA,IAC9D,uBAAuB;AAAA,EACzB,CAAC;AACD,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AAEA,MAAI;AACF,WACE,4CAAC,oCAA8B,MAAM,aAAa,WAAW,kBAC3D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport type { DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { DSTypography, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport { IconAndTextsRegionContent } from './IconAndTextsRegionContent.js';\n\ntype TooltipTextProps = DSTooltipV3T.CustomInterface<{\n  title: string;\n  description: string;\n}>;\n\nconst TooltipText: React.ComponentType<TooltipTextProps> = ({ title, description }) => (\n  <Grid>\n    <DSTypography variant={TYPOGRAPHY_VARIANTS.H5_ARTICLE}>{title}</DSTypography>\n    <DSTypography variant={TYPOGRAPHY_VARIANTS.B1}>{description}</DSTypography>\n  </Grid>\n);\n\ninterface IconAndTextsRegionProps {\n  title: DSCardNavigationT.InternalProps['title'];\n  description: DSCardNavigationT.InternalProps['description'];\n  wrapText: DSCardNavigationT.InternalProps['wrapText'];\n  type: DSCardNavigationT.InternalProps['type'];\n  Icon: DSCardNavigationT.InternalProps['Icon'];\n  showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n  hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}\n\nexport const IconAndTextsRegion: React.ComponentType<IconAndTextsRegionProps> = ({\n  title,\n  description,\n  wrapText,\n  type,\n  Icon,\n  showFocusRingAroundAll,\n  hideFocusRingAroundAll,\n  getOwnerProps,\n  getOwnerPropsArguments,\n}) => {\n  const [isTitleTruncating, setIsTitleTruncating] = React.useState(false);\n  const [isDescriptionTruncating, setIsDescriptionTruncating] = React.useState(false);\n\n  const AnyOverFlow = isTitleTruncating || isDescriptionTruncating;\n\n  const { handleRef: titleHandleRef } = useOnOverflowChange({\n    onOverflowStateChange: setIsTitleTruncating,\n  });\n\n  const { handleRef: descriptionHandleRef } = useOnOverflowChange({\n    onOverflowStateChange: setIsDescriptionTruncating,\n  });\n  const TooltipTextProps = React.useMemo(\n    () => ({\n      title,\n      description,\n    }),\n    [title, description],\n  );\n\n  if (AnyOverFlow)\n    return (\n      <DSTooltipV3<TooltipTextProps> Text={TooltipText} textProps={TooltipTextProps}>\n        <IconAndTextsRegionContent\n          title={title}\n          description={description}\n          wrapText={wrapText}\n          type={type}\n          Icon={Icon}\n          titleHandleRef={titleHandleRef}\n          descriptionHandleRef={descriptionHandleRef}\n          showFocusRingAroundAll={showFocusRingAroundAll}\n          hideFocusRingAroundAll={hideFocusRingAroundAll}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      </DSTooltipV3>\n    );\n  return (\n    <IconAndTextsRegionContent\n      title={title}\n      description={description}\n      wrapText={wrapText}\n      type={type}\n      Icon={Icon}\n      titleHandleRef={titleHandleRef}\n      descriptionHandleRef={descriptionHandleRef}\n      showFocusRingAroundAll={showFocusRingAroundAll}\n      hideFocusRingAroundAll={hideFocusRingAroundAll}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADerB;AAfF,qBAAqB;AACrB,yCAAoC;AAEpC,2BAA4B;AAC5B,2BAAkD;AAClD,mBAAkB;AAElB,uCAA0C;AAO1C,MAAM,cAAqD,CAAC,EAAE,OAAO,YAAY,MAC/E,6CAAC,uBACC;AAAA,8CAAC,qCAAa,SAAS,yCAAoB,YAAa,iBAAM;AAAA,EAC9D,4CAAC,qCAAa,SAAS,yCAAoB,IAAK,uBAAY;AAAA,GAC9D;AAeK,MAAM,qBAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,aAAAA,QAAM,SAAS,KAAK;AACtE,QAAM,CAAC,yBAAyB,0BAA0B,IAAI,aAAAA,QAAM,SAAS,KAAK;AAElF,QAAM,cAAc,qBAAqB;AAEzC,QAAM,EAAE,WAAW,eAAe,QAAI,wDAAoB;AAAA,IACxD,uBAAuB;AAAA,EACzB,CAAC;AAED,QAAM,EAAE,WAAW,qBAAqB,QAAI,wDAAoB;AAAA,IAC9D,uBAAuB;AAAA,EACzB,CAAC;AACD,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AAEA,MAAI;AACF,WACE,4CAAC,oCAA8B,MAAM,aAAa,WAAW,kBAC3D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/text-region/IconAndTextsRegionContent.js

@@ -49,7 +49,9 @@ const IconAndTextsRegionContent = import_react.default.memo((props) => {
     type,
     Icon,
     showFocusRingAroundAll,
-    hideFocusRingAroundAll
+    hideFocusRingAroundAll,
+    getOwnerProps,
+    getOwnerPropsArguments
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_style.StyledGridTextContainer,
@@ -59,29 +61,66 @@ const IconAndTextsRegionContent = import_react.default.memo((props) => {
       tabIndex: 0,
       onFocus: showFocusRingAroundAll,
       onBlur: hideFocusRingAroundAll,
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationIcon, { $type: type, role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "l", color: mainIconColor }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationCentralContent, { cols, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.StyledCardNavigationContentTitleWrapper, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationContentTitle, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_style.StyledTitleTypography,
-            {
-              innerRef: titleHandleRef,
-              truncateWithEllipsis: !wrapText,
-              variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1,
-              children: title
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_style.StyledDescriptionTypography,
-            {
-              innerRef: descriptionHandleRef,
-              truncateWithEllipsis: !wrapText,
-              variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1,
-              "data-testid": import_constants.CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
-              children: description
-            }
-          ) })
-        ] }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_style.StyledCardNavigationIcon,
+          {
+            $type: type,
+            role: "presentation",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "l", color: mainIconColor })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_style.StyledCardNavigationCentralContent,
+          {
+            cols,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationContent, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_style.StyledCardNavigationContentTitleWrapper,
+              {
+                getOwnerProps,
+                getOwnerPropsArguments,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_style.StyledCardNavigationContentTitle,
+                    {
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_style.StyledTitleTypography,
+                        {
+                          innerRef: titleHandleRef,
+                          truncateWithEllipsis: !wrapText,
+                          variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1,
+                          getOwnerProps,
+                          getOwnerPropsArguments,
+                          children: title
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_style.StyledDescriptionTypography,
+                    {
+                      innerRef: descriptionHandleRef,
+                      truncateWithEllipsis: !wrapText,
+                      variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1,
+                      "data-testid": import_constants.CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: description
+                    }
+                  ) })
+                ]
+              }
+            ) })
+          }
+        )
       ]
     }
   );

package/dist/cjs/parts/text-region/IconAndTextsRegionContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/text-region/IconAndTextsRegionContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { SvgIconT } from '@elliemae/ds-icons';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport {\n  StyledCardNavigationCentralContent,\n  StyledCardNavigationContent,\n  StyledCardNavigationContentTitle,\n  StyledCardNavigationContentTitleWrapper,\n  StyledCardNavigationIcon,\n  StyledDescriptionTypography,\n  StyledGridTextContainer,\n  StyledTitleTypography,\n} from '../style.js';\n\nconst mainIconColor = ['neutral', '0'] as SvgIconT.ColorType;\nconst cols = ['1fr'];\n\ninterface IconAndTextsRegionContentProps {\n  title: DSCardNavigationT.InternalProps['title'];\n  description: DSCardNavigationT.InternalProps['description'];\n  wrapText: DSCardNavigationT.InternalProps['wrapText'];\n  type: DSCardNavigationT.InternalProps['type'];\n  Icon: DSCardNavigationT.InternalProps['Icon'];\n\n  titleHandleRef: (node: HTMLElement | null) => void;\n  descriptionHandleRef: (node: HTMLElement | null) => void;\n  showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n  hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const IconAndTextsRegionContent = React.memo((props: IconAndTextsRegionContentProps) => {\n  const {\n    title,\n    description,\n    wrapText,\n    titleHandleRef,\n    descriptionHandleRef,\n    type,\n    Icon,\n    showFocusRingAroundAll,\n    hideFocusRingAroundAll,\n  } = props;\n\n  return (\n    <StyledGridTextContainer\n      data-type={type}\n      role=\"button\"\n      tabIndex={0}\n      onFocus={showFocusRingAroundAll}\n      onBlur={hideFocusRingAroundAll}\n    >\n      <StyledCardNavigationIcon $type={type} role=\"presentation\">\n        <Icon size=\"l\" color={mainIconColor} />\n      </StyledCardNavigationIcon>\n\n      <StyledCardNavigationCentralContent cols={cols}>\n        <StyledCardNavigationContent>\n          <StyledCardNavigationContentTitleWrapper>\n            <StyledCardNavigationContentTitle>\n              <StyledTitleTypography\n                innerRef={titleHandleRef}\n                truncateWithEllipsis={!wrapText}\n                variant={TYPOGRAPHY_VARIANTS.B1}\n              >\n                {title}\n              </StyledTitleTypography>\n            </StyledCardNavigationContentTitle>\n            <div>\n              <StyledDescriptionTypography\n                innerRef={descriptionHandleRef}\n                truncateWithEllipsis={!wrapText}\n                variant={TYPOGRAPHY_VARIANTS.B1}\n                data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n              >\n                {description}\n              </StyledDescriptionTypography>\n            </div>\n          </StyledCardNavigationContentTitleWrapper>\n        </StyledCardNavigationContent>\n      </StyledCardNavigationCentralContent>\n    </StyledGridTextContainer>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDf;AArDR,2BAAoC;AACpC,mBAAkB;AAClB,uBAA4C;AAE5C,mBASO;AAEP,MAAM,gBAAgB,CAAC,WAAW,GAAG;AACrC,MAAM,OAAO,CAAC,KAAK;AAeZ,MAAM,4BAA4B,aAAAA,QAAM,KAAK,CAAC,UAA0C;AAC7F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MAER;AAAA,oDAAC,yCAAyB,OAAO,MAAM,MAAK,gBAC1C,sDAAC,QAAK,MAAK,KAAI,OAAO,eAAe,GACvC;AAAA,QAEA,4CAAC,mDAAmC,MAClC,sDAAC,4CACC,uDAAC,wDACC;AAAA,sDAAC,iDACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,sBAAsB,CAAC;AAAA,cACvB,SAAS,yCAAoB;AAAA,cAE5B;AAAA;AAAA,UACH,GACF;AAAA,UACA,4CAAC,SACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,sBAAsB,CAAC;AAAA,cACvB,SAAS,yCAAoB;AAAA,cAC7B,eAAa,6CAA4B;AAAA,cAExC;AAAA;AAAA,UACH,GACF;AAAA,WACF,GACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "sourcesContent": ["import type { SvgIconT } from '@elliemae/ds-icons';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport {\n  StyledCardNavigationCentralContent,\n  StyledCardNavigationContent,\n  StyledCardNavigationContentTitle,\n  StyledCardNavigationContentTitleWrapper,\n  StyledCardNavigationIcon,\n  StyledDescriptionTypography,\n  StyledGridTextContainer,\n  StyledTitleTypography,\n} from '../style.js';\n\nconst mainIconColor = ['neutral', '0'] as SvgIconT.ColorType;\nconst cols = ['1fr'];\n\ninterface IconAndTextsRegionContentProps {\n  title: DSCardNavigationT.InternalProps['title'];\n  description: DSCardNavigationT.InternalProps['description'];\n  wrapText: DSCardNavigationT.InternalProps['wrapText'];\n  type: DSCardNavigationT.InternalProps['type'];\n  Icon: DSCardNavigationT.InternalProps['Icon'];\n\n  titleHandleRef: (node: HTMLElement | null) => void;\n  descriptionHandleRef: (node: HTMLElement | null) => void;\n  showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n  hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}\n\nexport const IconAndTextsRegionContent = React.memo((props: IconAndTextsRegionContentProps) => {\n  const {\n    title,\n    description,\n    wrapText,\n    titleHandleRef,\n    descriptionHandleRef,\n    type,\n    Icon,\n    showFocusRingAroundAll,\n    hideFocusRingAroundAll,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = props;\n\n  return (\n    <StyledGridTextContainer\n      data-type={type}\n      role=\"button\"\n      tabIndex={0}\n      onFocus={showFocusRingAroundAll}\n      onBlur={hideFocusRingAroundAll}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledCardNavigationIcon\n        $type={type}\n        role=\"presentation\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Icon size=\"l\" color={mainIconColor} />\n      </StyledCardNavigationIcon>\n\n      <StyledCardNavigationCentralContent\n        cols={cols}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledCardNavigationContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <StyledCardNavigationContentTitleWrapper\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <StyledCardNavigationContentTitle\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              <StyledTitleTypography\n                innerRef={titleHandleRef}\n                truncateWithEllipsis={!wrapText}\n                variant={TYPOGRAPHY_VARIANTS.B1}\n                getOwnerProps={getOwnerProps}\n                getOwnerPropsArguments={getOwnerPropsArguments}\n              >\n                {title}\n              </StyledTitleTypography>\n            </StyledCardNavigationContentTitle>\n            <div>\n              <StyledDescriptionTypography\n                innerRef={descriptionHandleRef}\n                truncateWithEllipsis={!wrapText}\n                variant={TYPOGRAPHY_VARIANTS.B1}\n                data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n                getOwnerProps={getOwnerProps}\n                getOwnerPropsArguments={getOwnerPropsArguments}\n              >\n                {description}\n              </StyledDescriptionTypography>\n            </div>\n          </StyledCardNavigationContentTitleWrapper>\n        </StyledCardNavigationContent>\n      </StyledCardNavigationCentralContent>\n    </StyledGridTextContainer>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiEf;AAhER,2BAAoC;AACpC,mBAAkB;AAClB,uBAA4C;AAE5C,mBASO;AAEP,MAAM,gBAAgB,CAAC,WAAW,GAAG;AACrC,MAAM,OAAO,CAAC,KAAK;AAiBZ,MAAM,4BAA4B,aAAAA,QAAM,KAAK,CAAC,UAA0C;AAC7F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEA,sDAAC,QAAK,MAAK,KAAI,OAAO,eAAe;AAAA;AAAA,QACvC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YAEA,sDAAC,4CAA4B,eAA8B,wBACzD;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC;AAAA,sBACA;AAAA,sBAEA;AAAA,wBAAC;AAAA;AAAA,0BACC,UAAU;AAAA,0BACV,sBAAsB,CAAC;AAAA,0BACvB,SAAS,yCAAoB;AAAA,0BAC7B;AAAA,0BACA;AAAA,0BAEC;AAAA;AAAA,sBACH;AAAA;AAAA,kBACF;AAAA,kBACA,4CAAC,SACC;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAU;AAAA,sBACV,sBAAsB,CAAC;AAAA,sBACvB,SAAS,yCAAoB;AAAA,sBAC7B,eAAa,6CAA4B;AAAA,sBACzC;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH,GACF;AAAA;AAAA;AAAA,YACF,GACF;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/DSCardNavigation.js

@@ -33,6 +33,8 @@ const DSCardNavigation = (props) => {
         /* @__PURE__ */ jsx(
           IconAndTextsRegion,
           {
+            getOwnerProps,
+            getOwnerPropsArguments,
             title,
             description,
             wrapText,
@@ -42,7 +44,15 @@ const DSCardNavigation = (props) => {
             hideFocusRingAroundAll
           }
         ),
-        /* @__PURE__ */ jsx(ActionsRegion, { actions, instanceUid })
+        /* @__PURE__ */ jsx(
+          ActionsRegion,
+          {
+            getOwnerProps,
+            getOwnerPropsArguments,
+            actions,
+            instanceUid
+          }
+        )
       ]
     }
   );

package/dist/esm/DSCardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSCardNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useCardNavigation } from './config/useCardNavigation.js';\nimport { DSCardNavigationName } from './constants/index.js';\nimport { type DSCardNavigationT, DSCardNavigationPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledCardNavigationBoxWrapper } from './parts/style.js';\nimport { IconAndTextsRegion } from './parts/text-region/IconAndTextsRegion.js';\nimport { ActionsRegion } from './parts/ActionsRegion.js';\n\nconst DSCardNavigation: React.ComponentType<DSCardNavigationT.Props> = (props) => {\n  const cardNavigationConfig = useCardNavigation(props);\n  const {\n    propsWithDefault,\n    xstyledProps,\n    globalProps,\n    iconAndTextsRegionIsFocused,\n    showFocusRingAroundAll,\n    hideFocusRingAroundAll,\n    instanceUid,\n  } = cardNavigationConfig;\n  const { containerProps, title, description, type, Icon, actions, wrapText } = propsWithDefault;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSCardNavigationT.Props>(propsWithDefault);\n\n  return (\n    <StyledCardNavigationBoxWrapper\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      $isIconAndTextsRegionFocused={iconAndTextsRegionIsFocused}\n    >\n      <IconAndTextsRegion\n        title={title}\n        description={description}\n        wrapText={wrapText}\n        type={type}\n        Icon={Icon}\n        showFocusRingAroundAll={showFocusRingAroundAll}\n        hideFocusRingAroundAll={hideFocusRingAroundAll}\n      />\n      <ActionsRegion actions={actions} instanceUid={instanceUid} />\n    </StyledCardNavigationBoxWrapper>\n  );\n};\n\nDSCardNavigation.displayName = DSCardNavigationName;\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = DSCardNavigationPropTypesSchema;\n\nexport { DSCardNavigation, DSCardNavigationWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyBnB,SAQE,KARF;AAzBJ,SAAS,UAAU,qBAAqB;AAExC,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAiC,uCAAuC;AACxE,SAAS,sCAAsC;AAC/C,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAE9B,MAAM,mBAAiE,CAAC,UAAU;AAChF,QAAM,uBAAuB,kBAAkB,KAAK;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,aAAa,MAAM,MAAM,SAAS,SAAS,IAAI;AAE9E,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAuC,gBAAgB;AAEzG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,8BAA8B;AAAA,MAE9B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,iBAAc,SAAkB,aAA0B;AAAA;AAAA;AAAA,EAC7D;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useCardNavigation } from './config/useCardNavigation.js';\nimport { DSCardNavigationName } from './constants/index.js';\nimport { type DSCardNavigationT, DSCardNavigationPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledCardNavigationBoxWrapper } from './parts/style.js';\nimport { IconAndTextsRegion } from './parts/text-region/IconAndTextsRegion.js';\nimport { ActionsRegion } from './parts/ActionsRegion.js';\n\nconst DSCardNavigation: React.ComponentType<DSCardNavigationT.Props> = (props) => {\n  const cardNavigationConfig = useCardNavigation(props);\n  const {\n    propsWithDefault,\n    xstyledProps,\n    globalProps,\n    iconAndTextsRegionIsFocused,\n    showFocusRingAroundAll,\n    hideFocusRingAroundAll,\n    instanceUid,\n  } = cardNavigationConfig;\n  const { containerProps, title, description, type, Icon, actions, wrapText } = propsWithDefault;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSCardNavigationT.Props>(propsWithDefault);\n\n  return (\n    <StyledCardNavigationBoxWrapper\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      $isIconAndTextsRegionFocused={iconAndTextsRegionIsFocused}\n    >\n      <IconAndTextsRegion\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        title={title}\n        description={description}\n        wrapText={wrapText}\n        type={type}\n        Icon={Icon}\n        showFocusRingAroundAll={showFocusRingAroundAll}\n        hideFocusRingAroundAll={hideFocusRingAroundAll}\n      />\n      <ActionsRegion\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        actions={actions}\n        instanceUid={instanceUid}\n      />\n    </StyledCardNavigationBoxWrapper>\n  );\n};\n\nDSCardNavigation.displayName = DSCardNavigationName;\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = DSCardNavigationPropTypesSchema;\n\nexport { DSCardNavigation, DSCardNavigationWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyBnB,SAQE,KARF;AAzBJ,SAAS,UAAU,qBAAqB;AAExC,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAiC,uCAAuC;AACxE,SAAS,sCAAsC;AAC/C,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAE9B,MAAM,mBAAiE,CAAC,UAAU;AAChF,QAAM,uBAAuB,kBAAkB,KAAK;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,aAAa,MAAM,MAAM,SAAS,SAAS,IAAI;AAE9E,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAuC,gBAAgB;AAEzG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,8BAA8B;AAAA,MAE9B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -7,11 +7,19 @@ const CARD_NAVIGATION_SLOTS = {
   ACTIONS: "actions",
   TYPE: "type",
   CENTRAL_CONTENT: "central-content",
-  INTERACTIVE_ELEMENT_REGION: "interactive-element-region"
+  INTERACTIVE_ELEMENT_REGION: "interactive-element-region",
+  DESCRIPTION_TEXT: "description-text",
+  TITLE_TYPOGRAPHY: "title-typography",
+  TITLE_WRAPPER: "title-wrapper",
+  CONTENT: "content",
+  BUTTON_WRAPPER: "button-wrapper",
+  ACTION_BUTTON: "action-button"
 };
 const CARD_NAVIGATION_DATA_TESTID = {
   ...slotObjectToDataTestIds(DSCardNavigationName, CARD_NAVIGATION_SLOTS),
-  DESCRIPTION_TEXT: "ds-card-navigation--description"
+  DESCRIPTION_TEXT: "ds-card-navigation--description",
+  TITLE_TYPOGRAPHY: "ds-typography-element",
+  ACTION_BUTTON: "ds-button"
 };
 const CardNavigationTypes = {
   BORROWER: "borrower",

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 DSCardNavigationName = 'DSCardnavigation';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_SLOTS = {\n  ROOT: 'root',\n  TITLE: 'title',\n  ACTIONS: 'actions',\n  TYPE: 'type',\n  CENTRAL_CONTENT: 'central-content',\n  INTERACTIVE_ELEMENT_REGION: 'interactive-element-region',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSCardNavigationName, CARD_NAVIGATION_SLOTS),\n  DESCRIPTION_TEXT: 'ds-card-navigation--description',\n};\n\nexport const CardNavigationTypes = {\n  BORROWER: 'borrower',\n  FINANCIAL: 'financial',\n  LOAN: 'loan',\n  REGULATORY: 'regulatory',\n} as const;\n\nexport const CardNavigationTypesValues = Object.values(CardNavigationTypes);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,uBAAuB;AAG7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B;AAGO,MAAM,8BAA8B;AAAA,EACzC,GAAG,wBAAwB,sBAAsB,qBAAqB;AAAA,EACtE,kBAAkB;AACpB;AAEO,MAAM,sBAAsB;AAAA,EACjC,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AACd;AAEO,MAAM,4BAA4B,OAAO,OAAO,mBAAmB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardNavigationName = 'DSCardnavigation';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_SLOTS = {\n  ROOT: 'root',\n  TITLE: 'title',\n  ACTIONS: 'actions',\n  TYPE: 'type',\n  CENTRAL_CONTENT: 'central-content',\n  INTERACTIVE_ELEMENT_REGION: 'interactive-element-region',\n  DESCRIPTION_TEXT: 'description-text',\n  TITLE_TYPOGRAPHY: 'title-typography',\n  TITLE_WRAPPER: 'title-wrapper',\n  CONTENT: 'content',\n  BUTTON_WRAPPER: 'button-wrapper',\n  ACTION_BUTTON: 'action-button',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSCardNavigationName, CARD_NAVIGATION_SLOTS),\n  DESCRIPTION_TEXT: 'ds-card-navigation--description',\n  TITLE_TYPOGRAPHY: 'ds-typography-element',\n  ACTION_BUTTON: 'ds-button',\n};\n\nexport const CardNavigationTypes = {\n  BORROWER: 'borrower',\n  FINANCIAL: 'financial',\n  LOAN: 'loan',\n  REGULATORY: 'regulatory',\n} as const;\n\nexport const CardNavigationTypesValues = Object.values(CardNavigationTypes);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,uBAAuB;AAG7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAGO,MAAM,8BAA8B;AAAA,EACzC,GAAG,wBAAwB,sBAAsB,qBAAqB;AAAA,EACtE,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AACjB;AAEO,MAAM,sBAAsB;AAAA,EACjC,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AACd;AAEO,MAAM,4BAA4B,OAAO,OAAO,mBAAmB;",
   "names": []
 }

package/dist/esm/index.js

@@ -5,7 +5,8 @@ import {
   CARD_NAVIGATION_SLOTS,
   CARD_NAVIGATION_DATA_TESTID,
   CardNavigationTypesValues,
-  CardNavigationTypes
+  CardNavigationTypes,
+  DSCardNavigationName
 } from "./constants/index.js";
 var index_default = DSCardNavigation;
 export {
@@ -14,6 +15,7 @@ export {
   CardNavigationTypes,
   CardNavigationTypesValues,
   DSCardNavigation2 as DSCardNavigation,
+  DSCardNavigationName,
   DSCardNavigationWithSchema,
   index_default as default
 };

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport { DSCardNavigation } from './DSCardNavigation.js';\nimport type {} from '@xstyled/system';\nexport { DSCardNavigation, DSCardNavigationWithSchema } from './DSCardNavigation.js';\nexport { type DSCardNavigationT } from './react-desc-prop-types.js';\nexport {\n  CARD_NAVIGATION_SLOTS,\n  CARD_NAVIGATION_DATA_TESTID,\n  CardNavigationTypesValues,\n  CardNavigationTypes,\n} from './constants/index.js';\n\nexport default DSCardNavigation;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,wBAAwB;AAEjC,SAAS,oBAAAA,mBAAkB,kCAAkC;AAE7D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,IAAO,gBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport { DSCardNavigation } from './DSCardNavigation.js';\nimport type {} from '@xstyled/system';\nexport { DSCardNavigation, DSCardNavigationWithSchema } from './DSCardNavigation.js';\nexport { type DSCardNavigationT } from './react-desc-prop-types.js';\nexport {\n  CARD_NAVIGATION_SLOTS,\n  CARD_NAVIGATION_DATA_TESTID,\n  CardNavigationTypesValues,\n  CardNavigationTypes,\n  DSCardNavigationName,\n} from './constants/index.js';\n\nexport default DSCardNavigation;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,wBAAwB;AAEjC,SAAS,oBAAAA,mBAAkB,kCAAkC;AAE7D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,IAAO,gBAAQ;",
   "names": ["DSCardNavigation"]
 }

package/dist/esm/parts/ActionsRegion.js

@@ -1,24 +1,37 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { BUTTON_SIZES, BUTTON_TYPES, DSButtonV3 } from "@elliemae/ds-button-v2";
+import { BUTTON_SIZES, BUTTON_TYPES } from "@elliemae/ds-button-v2";
 import { MoreOptionsVert } from "@elliemae/ds-icons";
-import { StyledCardNavigationAction, StyledCardNavigationActions } from "./style.js";
-const ActionsRegion = ({ actions, instanceUid }) => {
+import {
+  StyledCardNavigationButtonWrapper,
+  StyledCardNavigationActions,
+  StyledCardNavigationActionButton
+} from "./style.js";
+const ActionsRegion = ({
+  actions,
+  instanceUid,
+  getOwnerProps,
+  getOwnerPropsArguments
+}) => {
   if (actions.length === 0) return null;
-  return /* @__PURE__ */ jsx(StyledCardNavigationActions, { children: actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {
+  return /* @__PURE__ */ jsx(StyledCardNavigationActions, { getOwnerProps, getOwnerPropsArguments, children: actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {
     const defaultIconJSX = /* @__PURE__ */ jsx(MoreOptionsVert, { "aria-label": "More options" });
     const iconJSX = icon ?? defaultIconJSX;
     return /* @__PURE__ */ jsx(
-      StyledCardNavigationAction,
+      StyledCardNavigationButtonWrapper,
       {
+        getOwnerProps,
+        getOwnerPropsArguments,
         children: /* @__PURE__ */ jsx(
-          DSButtonV3,
+          StyledCardNavigationActionButton,
           {
             onClick,
             "aria-label": "More options",
             ...unexpectedButPreviouslySupportedOtherProps,
             buttonType: BUTTON_TYPES.ICON,
             size: BUTTON_SIZES.L,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: Icon ? /* @__PURE__ */ jsx(Icon, {}) : iconJSX
           }
         )

package/dist/esm/parts/ActionsRegion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ActionsRegion.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { BUTTON_SIZES, BUTTON_TYPES, DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../react-desc-prop-types.js';\nimport { StyledCardNavigationAction, StyledCardNavigationActions } from './style.js';\n\ninterface ActionRegionProps {\n  actions: DSCardNavigationT.InternalProps['actions'];\n  instanceUid: string;\n}\n\nexport const ActionsRegion: React.ComponentType<ActionRegionProps> = ({ actions, instanceUid }) => {\n  if (actions.length === 0) return null;\n  return (\n    <StyledCardNavigationActions>\n      {actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {\n        const defaultIconJSX = <MoreOptionsVert aria-label=\"More options\" />;\n        const iconJSX = icon ?? defaultIconJSX;\n        return (\n          <StyledCardNavigationAction\n            // eslint-disable-next-line react/no-array-index-key\n            key={`${instanceUid}-${index}`}\n          >\n            <DSButtonV3\n              onClick={onClick}\n              aria-label=\"More options\"\n              {...unexpectedButPreviouslySupportedOtherProps}\n              buttonType={BUTTON_TYPES.ICON}\n              size={BUTTON_SIZES.L}\n            >\n              {Icon ? <Icon /> : iconJSX}\n            </DSButtonV3>\n          </StyledCardNavigationAction>\n        );\n      })}\n    </StyledCardNavigationActions>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgBQ;AAhB/B,SAAS,cAAc,cAAc,kBAAkB;AACvD,SAAS,uBAAuB;AAGhC,SAAS,4BAA4B,mCAAmC;AAOjE,MAAM,gBAAwD,CAAC,EAAE,SAAS,YAAY,MAAM;AACjG,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,oBAAC,+BACE,kBAAQ,IAAI,CAAC,EAAE,MAAM,MAAM,SAAS,GAAG,2CAA2C,GAAG,UAAU;AAC9F,UAAM,iBAAiB,oBAAC,mBAAgB,cAAW,gBAAe;AAClE,UAAM,UAAU,QAAQ;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QAIC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAW;AAAA,YACV,GAAG;AAAA,YACJ,YAAY,aAAa;AAAA,YACzB,MAAM,aAAa;AAAA,YAElB,iBAAO,oBAAC,QAAK,IAAK;AAAA;AAAA,QACrB;AAAA;AAAA,MAVK,GAAG,WAAW,IAAI,KAAK;AAAA,IAW9B;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../react-desc-prop-types.js';\nimport {\n  StyledCardNavigationButtonWrapper,\n  StyledCardNavigationActions,\n  StyledCardNavigationActionButton,\n} from './style.js';\n\ninterface ActionRegionProps {\n  actions: DSCardNavigationT.InternalProps['actions'];\n  instanceUid: string;\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}\n\nexport const ActionsRegion: React.ComponentType<ActionRegionProps> = ({\n  actions,\n  instanceUid,\n  getOwnerProps,\n  getOwnerPropsArguments,\n}) => {\n  if (actions.length === 0) return null;\n  return (\n    <StyledCardNavigationActions getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      {actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {\n        const defaultIconJSX = <MoreOptionsVert aria-label=\"More options\" />;\n        const iconJSX = icon ?? defaultIconJSX;\n        return (\n          <StyledCardNavigationButtonWrapper\n            // eslint-disable-next-line react/no-array-index-key\n            key={`${instanceUid}-${index}`}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <StyledCardNavigationActionButton\n              onClick={onClick}\n              aria-label=\"More options\"\n              {...unexpectedButPreviouslySupportedOtherProps}\n              buttonType={BUTTON_TYPES.ICON}\n              size={BUTTON_SIZES.L}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              {Icon ? <Icon /> : iconJSX}\n            </StyledCardNavigationActionButton>\n          </StyledCardNavigationButtonWrapper>\n        );\n      })}\n    </StyledCardNavigationActions>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2BQ;AA3B/B,SAAS,cAAc,oBAAoB;AAC3C,SAAS,uBAAuB;AAGhC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASA,MAAM,gBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,oBAAC,+BAA4B,eAA8B,wBACxD,kBAAQ,IAAI,CAAC,EAAE,MAAM,MAAM,SAAS,GAAG,2CAA2C,GAAG,UAAU;AAC9F,UAAM,iBAAiB,oBAAC,mBAAgB,cAAW,gBAAe;AAClE,UAAM,UAAU,QAAQ;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QAGC;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAW;AAAA,YACV,GAAG;AAAA,YACJ,YAAY,aAAa;AAAA,YACzB,MAAM,aAAa;AAAA,YACnB;AAAA,YACA;AAAA,YAEC,iBAAO,oBAAC,QAAK,IAAK;AAAA;AAAA,QACrB;AAAA;AAAA,MAdK,GAAG,WAAW,IAAI,KAAK;AAAA,IAe9B;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

package/dist/esm/parts/style.js

@@ -2,12 +2,17 @@ import * as React from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { css, styled } from "@elliemae/ds-system";
 import { DSTypography } from "@elliemae/ds-typography";
+import { DSButtonV3 } from "@elliemae/ds-button-v2";
 import { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from "../constants/index.js";
 const StyledCardNavigationContentTitle = styled("div", {
   name: DSCardNavigationName,
   slot: CARD_NAVIGATION_SLOTS.TITLE
 })``;
-const StyledTitleTypography = styled(DSTypography)`
+const StyledTitleTypography = styled(DSTypography, {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.TITLE_TYPOGRAPHY,
+  preserveLegacyDataTestId: true
+})`
   color: ${(props) => props.theme.colors.neutral["700"]};
   font-weight: ${(props) => props.theme.fontWeights.semibold};
   font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem
@@ -16,7 +21,11 @@ const StyledTitleTypography = styled(DSTypography)`
     font-size: 1.125rem; // 18px -> 18/16 = 1.125rem
   }
 `;
-const StyledDescriptionTypography = styled(DSTypography)`
+const StyledDescriptionTypography = styled(DSTypography, {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.DESCRIPTION_TEXT,
+  preserveLegacyDataTestId: true
+})`
   color: ${(props) => props.theme.colors.neutral["500"]};
   font-size: 0.923rem; // 12px -> 12/13 = 0.923rem
 
@@ -24,10 +33,16 @@ const StyledDescriptionTypography = styled(DSTypography)`
     font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem
   }
 `;
-const StyledCardNavigationContentTitleWrapper = styled.div`
+const StyledCardNavigationContentTitleWrapper = styled("div", {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.TITLE_WRAPPER
+})`
   width: 100%;
 `;
-const StyledCardNavigationContent = styled.div`
+const StyledCardNavigationContent = styled("div", {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.CONTENT
+})`
   display: flex;
   align-items: center;
   flex: 1;
@@ -107,7 +122,10 @@ const StyledCardNavigationActions = styled("div", {
   align-items: center;
   gap: ${(props) => props.theme.space.xs};
 `;
-const StyledCardNavigationAction = styled("div")`
+const StyledCardNavigationButtonWrapper = styled("div", {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.BUTTON_WRAPPER
+})`
   span,
   svg {
     height: ${({ theme }) => theme.space.s};
@@ -130,10 +148,16 @@ const StyledGridTextContainer = styled("div", {
   }
   cursor: pointer;
 `;
+const StyledCardNavigationActionButton = styled(DSButtonV3, {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.ACTION_BUTTON,
+  preserveLegacyDataTestId: true
+})``;
 export {
-  StyledCardNavigationAction,
+  StyledCardNavigationActionButton,
   StyledCardNavigationActions,
   StyledCardNavigationBoxWrapper,
+  StyledCardNavigationButtonWrapper,
   StyledCardNavigationCentralContent,
   StyledCardNavigationContent,
   StyledCardNavigationContentTitle,

package/dist/esm/parts/style.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/style.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from '../constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.TITLE,\n})``;\n\nexport const StyledTitleTypography = styled(DSTypography)`\n  color: ${(props) => props.theme.colors.neutral['700']};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem\n\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 1.125rem; // 18px -> 18/16 = 1.125rem\n  }\n`;\n\nexport const StyledDescriptionTypography = styled(DSTypography)`\n  color: ${(props) => props.theme.colors.neutral['500']};\n  font-size: 0.923rem; // 12px -> 12/13 = 0.923rem\n\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem\n  }\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled.div`\n  width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled.div<{ wrapText?: boolean }>`\n  display: flex;\n  align-items: center;\n  flex: 1;\n  width: 100%;\n`;\n\nexport const StyledCardNavigationCentralContent = styled(Grid, {\n  slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,\n  name: DSCardNavigationName,\n})<{ wrapText?: boolean; AnyOverFlow?: boolean }>`\n  padding: 0 ${(props) => props.theme.space.xs};\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n  fluid?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps & { $isIconAndTextsRegionFocused?: boolean }>`\n  min-width: 240px;\n  min-height: 64px;\n  width: 337px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n  border-radius: 2px;\n  position: relative;\n  outline: none;\n\n  ${(props) => (props.fluid ? 'width: 100%' : '')};\n  @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n    width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n  }\n\n  :after {\n    display: block;\n    content: '';\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    left: 0;\n    border: solid ${(props) => props.theme.space.xxs} transparent;\n    border-radius: 2px;\n    pointer-events: none;\n  }\n  &:hover {\n    box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n    outline-offset: 2px;\n  }\n\n  ${(props) =>\n    props.$isIconAndTextsRegionFocused\n      ? css`\n          outline: 2px solid ${props.theme.colors.brand['700']};\n          outline-offset: 2px;\n        `\n      : css``}\n`;\n\ninterface StyledCardNavigationIconProps {\n  $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];\n}\n\nexport const StyledCardNavigationIcon = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.TYPE,\n})<StyledCardNavigationIconProps>`\n  min-width: 64px;\n  min-height: 64px;\n  height: 100%;\n  border-top-left-radius: 2px;\n  border-bottom-left-radius: 2px;\n  padding: 0 ${(props) => props.theme.space.xs};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  fill: #ffffff;\n  background-color: ${({ $type }) =>\n    ($type === CardNavigationTypes.BORROWER && '#32aad1') ||\n    ($type === CardNavigationTypes.FINANCIAL && '#1ba88d') ||\n    ($type === CardNavigationTypes.LOAN && '#8e49b2') ||\n    ($type === CardNavigationTypes.REGULATORY && '#db5575') ||\n    '#32aad1'};\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})`\n  padding: 0 ${(props) => props.theme.space.xs};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledCardNavigationAction = styled('div')`\n  span,\n  svg {\n    height: ${({ theme }) => theme.space.s};\n    width: ${({ theme }) => theme.space.s};\n    fill: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nexport const StyledGridTextContainer = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.INTERACTIVE_ELEMENT_REGION,\n})`\n  display: grid;\n  grid-template-columns: max-content auto;\n  align-items: center;\n  min-width: 0;\n  width: 100%;\n  overflow: hidden;\n  &:focus {\n    outline: none;\n  }\n  cursor: pointer;\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from '../constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.TITLE,\n})``;\n\nexport const StyledTitleTypography = styled(DSTypography, {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.TITLE_TYPOGRAPHY,\n  preserveLegacyDataTestId: true,\n})`\n  color: ${(props) => props.theme.colors.neutral['700']};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem\n\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 1.125rem; // 18px -> 18/16 = 1.125rem\n  }\n`;\n\nexport const StyledDescriptionTypography = styled(DSTypography, {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.DESCRIPTION_TEXT,\n  preserveLegacyDataTestId: true,\n})`\n  color: ${(props) => props.theme.colors.neutral['500']};\n  font-size: 0.923rem; // 12px -> 12/13 = 0.923rem\n\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem\n  }\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.TITLE_WRAPPER,\n})`\n  width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.CONTENT,\n})<{ wrapText?: boolean }>`\n  display: flex;\n  align-items: center;\n  flex: 1;\n  width: 100%;\n`;\n\nexport const StyledCardNavigationCentralContent = styled(Grid, {\n  slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,\n  name: DSCardNavigationName,\n})<{ wrapText?: boolean; AnyOverFlow?: boolean }>`\n  padding: 0 ${(props) => props.theme.space.xs};\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n  fluid?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps & { $isIconAndTextsRegionFocused?: boolean }>`\n  min-width: 240px;\n  min-height: 64px;\n  width: 337px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n  border-radius: 2px;\n  position: relative;\n  outline: none;\n\n  ${(props) => (props.fluid ? 'width: 100%' : '')};\n  @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n    width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n  }\n\n  :after {\n    display: block;\n    content: '';\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    left: 0;\n    border: solid ${(props) => props.theme.space.xxs} transparent;\n    border-radius: 2px;\n    pointer-events: none;\n  }\n  &:hover {\n    box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n    outline-offset: 2px;\n  }\n\n  ${(props) =>\n    props.$isIconAndTextsRegionFocused\n      ? css`\n          outline: 2px solid ${props.theme.colors.brand['700']};\n          outline-offset: 2px;\n        `\n      : css``}\n`;\n\ninterface StyledCardNavigationIconProps {\n  $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];\n}\n\nexport const StyledCardNavigationIcon = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.TYPE,\n})<StyledCardNavigationIconProps>`\n  min-width: 64px;\n  min-height: 64px;\n  height: 100%;\n  border-top-left-radius: 2px;\n  border-bottom-left-radius: 2px;\n  padding: 0 ${(props) => props.theme.space.xs};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  fill: #ffffff;\n  background-color: ${({ $type }) =>\n    ($type === CardNavigationTypes.BORROWER && '#32aad1') ||\n    ($type === CardNavigationTypes.FINANCIAL && '#1ba88d') ||\n    ($type === CardNavigationTypes.LOAN && '#8e49b2') ||\n    ($type === CardNavigationTypes.REGULATORY && '#db5575') ||\n    '#32aad1'};\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})`\n  padding: 0 ${(props) => props.theme.space.xs};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledCardNavigationButtonWrapper = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.BUTTON_WRAPPER,\n})`\n  span,\n  svg {\n    height: ${({ theme }) => theme.space.s};\n    width: ${({ theme }) => theme.space.s};\n    fill: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nexport const StyledGridTextContainer = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.INTERACTIVE_ELEMENT_REGION,\n})`\n  display: grid;\n  grid-template-columns: max-content auto;\n  align-items: center;\n  min-width: 0;\n  width: 100%;\n  overflow: hidden;\n  &:focus {\n    outline: none;\n  }\n  cursor: pointer;\n`;\n\nexport const StyledCardNavigationActionButton = styled(DSButtonV3, {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.ACTION_BUTTON,\n  preserveLegacyDataTestId: true,\n})``;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/text-region/IconAndTextsRegion.js

@@ -17,7 +17,9 @@ const IconAndTextsRegion = ({
   type,
   Icon,
   showFocusRingAroundAll,
-  hideFocusRingAroundAll
+  hideFocusRingAroundAll,
+  getOwnerProps,
+  getOwnerPropsArguments
 }) => {
   const [isTitleTruncating, setIsTitleTruncating] = React2.useState(false);
   const [isDescriptionTruncating, setIsDescriptionTruncating] = React2.useState(false);
@@ -47,7 +49,9 @@ const IconAndTextsRegion = ({
         titleHandleRef,
         descriptionHandleRef,
         showFocusRingAroundAll,
-        hideFocusRingAroundAll
+        hideFocusRingAroundAll,
+        getOwnerProps,
+        getOwnerPropsArguments
       }
     ) });
   return /* @__PURE__ */ jsx(
@@ -61,7 +65,9 @@ const IconAndTextsRegion = ({
       titleHandleRef,
       descriptionHandleRef,
       showFocusRingAroundAll,
-      hideFocusRingAroundAll
+      hideFocusRingAroundAll,
+      getOwnerProps,
+      getOwnerPropsArguments
     }
   );
 };

package/dist/esm/parts/text-region/IconAndTextsRegion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/text-region/IconAndTextsRegion.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport type { DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { DSTypography, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport { IconAndTextsRegionContent } from './IconAndTextsRegionContent.js';\n\ntype TooltipTextProps = DSTooltipV3T.CustomInterface<{\n  title: string;\n  description: string;\n}>;\n\nconst TooltipText: React.ComponentType<TooltipTextProps> = ({ title, description }) => (\n  <Grid>\n    <DSTypography variant={TYPOGRAPHY_VARIANTS.H5_ARTICLE}>{title}</DSTypography>\n    <DSTypography variant={TYPOGRAPHY_VARIANTS.B1}>{description}</DSTypography>\n  </Grid>\n);\n\ninterface IconAndTextsRegionProps {\n  title: DSCardNavigationT.InternalProps['title'];\n  description: DSCardNavigationT.InternalProps['description'];\n  wrapText: DSCardNavigationT.InternalProps['wrapText'];\n  type: DSCardNavigationT.InternalProps['type'];\n  Icon: DSCardNavigationT.InternalProps['Icon'];\n  showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n  hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const IconAndTextsRegion: React.ComponentType<IconAndTextsRegionProps> = ({\n  title,\n  description,\n  wrapText,\n  type,\n  Icon,\n  showFocusRingAroundAll,\n  hideFocusRingAroundAll,\n}) => {\n  const [isTitleTruncating, setIsTitleTruncating] = React.useState(false);\n  const [isDescriptionTruncating, setIsDescriptionTruncating] = React.useState(false);\n\n  const AnyOverFlow = isTitleTruncating || isDescriptionTruncating;\n\n  const { handleRef: titleHandleRef } = useOnOverflowChange({\n    onOverflowStateChange: setIsTitleTruncating,\n  });\n\n  const { handleRef: descriptionHandleRef } = useOnOverflowChange({\n    onOverflowStateChange: setIsDescriptionTruncating,\n  });\n  const TooltipTextProps = React.useMemo(\n    () => ({\n      title,\n      description,\n    }),\n    [title, description],\n  );\n\n  if (AnyOverFlow)\n    return (\n      <DSTooltipV3<TooltipTextProps> Text={TooltipText} textProps={TooltipTextProps}>\n        <IconAndTextsRegionContent\n          title={title}\n          description={description}\n          wrapText={wrapText}\n          type={type}\n          Icon={Icon}\n          titleHandleRef={titleHandleRef}\n          descriptionHandleRef={descriptionHandleRef}\n          showFocusRingAroundAll={showFocusRingAroundAll}\n          hideFocusRingAroundAll={hideFocusRingAroundAll}\n        />\n      </DSTooltipV3>\n    );\n  return (\n    <IconAndTextsRegionContent\n      title={title}\n      description={description}\n      wrapText={wrapText}\n      type={type}\n      Icon={Icon}\n      titleHandleRef={titleHandleRef}\n      descriptionHandleRef={descriptionHandleRef}\n      showFocusRingAroundAll={showFocusRingAroundAll}\n      hideFocusRingAroundAll={hideFocusRingAroundAll}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACerB,SACE,KADF;AAfF,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAEpC,SAAS,mBAAmB;AAC5B,SAAS,cAAc,2BAA2B;AAClD,OAAOA,YAAW;AAElB,SAAS,iCAAiC;AAO1C,MAAM,cAAqD,CAAC,EAAE,OAAO,YAAY,MAC/E,qBAAC,QACC;AAAA,sBAAC,gBAAa,SAAS,oBAAoB,YAAa,iBAAM;AAAA,EAC9D,oBAAC,gBAAa,SAAS,oBAAoB,IAAK,uBAAY;AAAA,GAC9D;AAaK,MAAM,qBAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,mBAAmB,oBAAoB,IAAIA,OAAM,SAAS,KAAK;AACtE,QAAM,CAAC,yBAAyB,0BAA0B,IAAIA,OAAM,SAAS,KAAK;AAElF,QAAM,cAAc,qBAAqB;AAEzC,QAAM,EAAE,WAAW,eAAe,IAAI,oBAAoB;AAAA,IACxD,uBAAuB;AAAA,EACzB,CAAC;AAED,QAAM,EAAE,WAAW,qBAAqB,IAAI,oBAAoB;AAAA,IAC9D,uBAAuB;AAAA,EACzB,CAAC;AACD,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AAEA,MAAI;AACF,WACE,oBAAC,eAA8B,MAAM,aAAa,WAAW,kBAC3D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport type { DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { DSTypography, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport { IconAndTextsRegionContent } from './IconAndTextsRegionContent.js';\n\ntype TooltipTextProps = DSTooltipV3T.CustomInterface<{\n  title: string;\n  description: string;\n}>;\n\nconst TooltipText: React.ComponentType<TooltipTextProps> = ({ title, description }) => (\n  <Grid>\n    <DSTypography variant={TYPOGRAPHY_VARIANTS.H5_ARTICLE}>{title}</DSTypography>\n    <DSTypography variant={TYPOGRAPHY_VARIANTS.B1}>{description}</DSTypography>\n  </Grid>\n);\n\ninterface IconAndTextsRegionProps {\n  title: DSCardNavigationT.InternalProps['title'];\n  description: DSCardNavigationT.InternalProps['description'];\n  wrapText: DSCardNavigationT.InternalProps['wrapText'];\n  type: DSCardNavigationT.InternalProps['type'];\n  Icon: DSCardNavigationT.InternalProps['Icon'];\n  showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n  hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}\n\nexport const IconAndTextsRegion: React.ComponentType<IconAndTextsRegionProps> = ({\n  title,\n  description,\n  wrapText,\n  type,\n  Icon,\n  showFocusRingAroundAll,\n  hideFocusRingAroundAll,\n  getOwnerProps,\n  getOwnerPropsArguments,\n}) => {\n  const [isTitleTruncating, setIsTitleTruncating] = React.useState(false);\n  const [isDescriptionTruncating, setIsDescriptionTruncating] = React.useState(false);\n\n  const AnyOverFlow = isTitleTruncating || isDescriptionTruncating;\n\n  const { handleRef: titleHandleRef } = useOnOverflowChange({\n    onOverflowStateChange: setIsTitleTruncating,\n  });\n\n  const { handleRef: descriptionHandleRef } = useOnOverflowChange({\n    onOverflowStateChange: setIsDescriptionTruncating,\n  });\n  const TooltipTextProps = React.useMemo(\n    () => ({\n      title,\n      description,\n    }),\n    [title, description],\n  );\n\n  if (AnyOverFlow)\n    return (\n      <DSTooltipV3<TooltipTextProps> Text={TooltipText} textProps={TooltipTextProps}>\n        <IconAndTextsRegionContent\n          title={title}\n          description={description}\n          wrapText={wrapText}\n          type={type}\n          Icon={Icon}\n          titleHandleRef={titleHandleRef}\n          descriptionHandleRef={descriptionHandleRef}\n          showFocusRingAroundAll={showFocusRingAroundAll}\n          hideFocusRingAroundAll={hideFocusRingAroundAll}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      </DSTooltipV3>\n    );\n  return (\n    <IconAndTextsRegionContent\n      title={title}\n      description={description}\n      wrapText={wrapText}\n      type={type}\n      Icon={Icon}\n      titleHandleRef={titleHandleRef}\n      descriptionHandleRef={descriptionHandleRef}\n      showFocusRingAroundAll={showFocusRingAroundAll}\n      hideFocusRingAroundAll={hideFocusRingAroundAll}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACerB,SACE,KADF;AAfF,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAEpC,SAAS,mBAAmB;AAC5B,SAAS,cAAc,2BAA2B;AAClD,OAAOA,YAAW;AAElB,SAAS,iCAAiC;AAO1C,MAAM,cAAqD,CAAC,EAAE,OAAO,YAAY,MAC/E,qBAAC,QACC;AAAA,sBAAC,gBAAa,SAAS,oBAAoB,YAAa,iBAAM;AAAA,EAC9D,oBAAC,gBAAa,SAAS,oBAAoB,IAAK,uBAAY;AAAA,GAC9D;AAeK,MAAM,qBAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,mBAAmB,oBAAoB,IAAIA,OAAM,SAAS,KAAK;AACtE,QAAM,CAAC,yBAAyB,0BAA0B,IAAIA,OAAM,SAAS,KAAK;AAElF,QAAM,cAAc,qBAAqB;AAEzC,QAAM,EAAE,WAAW,eAAe,IAAI,oBAAoB;AAAA,IACxD,uBAAuB;AAAA,EACzB,CAAC;AAED,QAAM,EAAE,WAAW,qBAAqB,IAAI,oBAAoB;AAAA,IAC9D,uBAAuB;AAAA,EACzB,CAAC;AACD,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AAEA,MAAI;AACF,WACE,oBAAC,eAA8B,MAAM,aAAa,WAAW,kBAC3D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/text-region/IconAndTextsRegionContent.js

@@ -25,7 +25,9 @@ const IconAndTextsRegionContent = React2.memo((props) => {
     type,
     Icon,
     showFocusRingAroundAll,
-    hideFocusRingAroundAll
+    hideFocusRingAroundAll,
+    getOwnerProps,
+    getOwnerPropsArguments
   } = props;
   return /* @__PURE__ */ jsxs(
     StyledGridTextContainer,
@@ -35,29 +37,66 @@ const IconAndTextsRegionContent = React2.memo((props) => {
       tabIndex: 0,
       onFocus: showFocusRingAroundAll,
       onBlur: hideFocusRingAroundAll,
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: [
-        /* @__PURE__ */ jsx(StyledCardNavigationIcon, { $type: type, role: "presentation", children: /* @__PURE__ */ jsx(Icon, { size: "l", color: mainIconColor }) }),
-        /* @__PURE__ */ jsx(StyledCardNavigationCentralContent, { cols, children: /* @__PURE__ */ jsx(StyledCardNavigationContent, { children: /* @__PURE__ */ jsxs(StyledCardNavigationContentTitleWrapper, { children: [
-          /* @__PURE__ */ jsx(StyledCardNavigationContentTitle, { children: /* @__PURE__ */ jsx(
-            StyledTitleTypography,
-            {
-              innerRef: titleHandleRef,
-              truncateWithEllipsis: !wrapText,
-              variant: TYPOGRAPHY_VARIANTS.B1,
-              children: title
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-            StyledDescriptionTypography,
-            {
-              innerRef: descriptionHandleRef,
-              truncateWithEllipsis: !wrapText,
-              variant: TYPOGRAPHY_VARIANTS.B1,
-              "data-testid": CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
-              children: description
-            }
-          ) })
-        ] }) }) })
+        /* @__PURE__ */ jsx(
+          StyledCardNavigationIcon,
+          {
+            $type: type,
+            role: "presentation",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: /* @__PURE__ */ jsx(Icon, { size: "l", color: mainIconColor })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StyledCardNavigationCentralContent,
+          {
+            cols,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: /* @__PURE__ */ jsx(StyledCardNavigationContent, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsxs(
+              StyledCardNavigationContentTitleWrapper,
+              {
+                getOwnerProps,
+                getOwnerPropsArguments,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    StyledCardNavigationContentTitle,
+                    {
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: /* @__PURE__ */ jsx(
+                        StyledTitleTypography,
+                        {
+                          innerRef: titleHandleRef,
+                          truncateWithEllipsis: !wrapText,
+                          variant: TYPOGRAPHY_VARIANTS.B1,
+                          getOwnerProps,
+                          getOwnerPropsArguments,
+                          children: title
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                    StyledDescriptionTypography,
+                    {
+                      innerRef: descriptionHandleRef,
+                      truncateWithEllipsis: !wrapText,
+                      variant: TYPOGRAPHY_VARIANTS.B1,
+                      "data-testid": CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: description
+                    }
+                  ) })
+                ]
+              }
+            ) })
+          }
+        )
       ]
     }
   );

package/dist/esm/parts/text-region/IconAndTextsRegionContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/text-region/IconAndTextsRegionContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { SvgIconT } from '@elliemae/ds-icons';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport {\n  StyledCardNavigationCentralContent,\n  StyledCardNavigationContent,\n  StyledCardNavigationContentTitle,\n  StyledCardNavigationContentTitleWrapper,\n  StyledCardNavigationIcon,\n  StyledDescriptionTypography,\n  StyledGridTextContainer,\n  StyledTitleTypography,\n} from '../style.js';\n\nconst mainIconColor = ['neutral', '0'] as SvgIconT.ColorType;\nconst cols = ['1fr'];\n\ninterface IconAndTextsRegionContentProps {\n  title: DSCardNavigationT.InternalProps['title'];\n  description: DSCardNavigationT.InternalProps['description'];\n  wrapText: DSCardNavigationT.InternalProps['wrapText'];\n  type: DSCardNavigationT.InternalProps['type'];\n  Icon: DSCardNavigationT.InternalProps['Icon'];\n\n  titleHandleRef: (node: HTMLElement | null) => void;\n  descriptionHandleRef: (node: HTMLElement | null) => void;\n  showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n  hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const IconAndTextsRegionContent = React.memo((props: IconAndTextsRegionContentProps) => {\n  const {\n    title,\n    description,\n    wrapText,\n    titleHandleRef,\n    descriptionHandleRef,\n    type,\n    Icon,\n    showFocusRingAroundAll,\n    hideFocusRingAroundAll,\n  } = props;\n\n  return (\n    <StyledGridTextContainer\n      data-type={type}\n      role=\"button\"\n      tabIndex={0}\n      onFocus={showFocusRingAroundAll}\n      onBlur={hideFocusRingAroundAll}\n    >\n      <StyledCardNavigationIcon $type={type} role=\"presentation\">\n        <Icon size=\"l\" color={mainIconColor} />\n      </StyledCardNavigationIcon>\n\n      <StyledCardNavigationCentralContent cols={cols}>\n        <StyledCardNavigationContent>\n          <StyledCardNavigationContentTitleWrapper>\n            <StyledCardNavigationContentTitle>\n              <StyledTitleTypography\n                innerRef={titleHandleRef}\n                truncateWithEllipsis={!wrapText}\n                variant={TYPOGRAPHY_VARIANTS.B1}\n              >\n                {title}\n              </StyledTitleTypography>\n            </StyledCardNavigationContentTitle>\n            <div>\n              <StyledDescriptionTypography\n                innerRef={descriptionHandleRef}\n                truncateWithEllipsis={!wrapText}\n                variant={TYPOGRAPHY_VARIANTS.B1}\n                data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n              >\n                {description}\n              </StyledDescriptionTypography>\n            </div>\n          </StyledCardNavigationContentTitleWrapper>\n        </StyledCardNavigationContent>\n      </StyledCardNavigationCentralContent>\n    </StyledGridTextContainer>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsDf,cAKE,YALF;AArDR,SAAS,2BAA2B;AACpC,OAAOA,YAAW;AAClB,SAAS,mCAAmC;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,gBAAgB,CAAC,WAAW,GAAG;AACrC,MAAM,OAAO,CAAC,KAAK;AAeZ,MAAM,4BAA4BA,OAAM,KAAK,CAAC,UAA0C;AAC7F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MAER;AAAA,4BAAC,4BAAyB,OAAO,MAAM,MAAK,gBAC1C,8BAAC,QAAK,MAAK,KAAI,OAAO,eAAe,GACvC;AAAA,QAEA,oBAAC,sCAAmC,MAClC,8BAAC,+BACC,+BAAC,2CACC;AAAA,8BAAC,oCACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,sBAAsB,CAAC;AAAA,cACvB,SAAS,oBAAoB;AAAA,cAE5B;AAAA;AAAA,UACH,GACF;AAAA,UACA,oBAAC,SACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,sBAAsB,CAAC;AAAA,cACvB,SAAS,oBAAoB;AAAA,cAC7B,eAAa,4BAA4B;AAAA,cAExC;AAAA;AAAA,UACH,GACF;AAAA,WACF,GACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { SvgIconT } from '@elliemae/ds-icons';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport {\n  StyledCardNavigationCentralContent,\n  StyledCardNavigationContent,\n  StyledCardNavigationContentTitle,\n  StyledCardNavigationContentTitleWrapper,\n  StyledCardNavigationIcon,\n  StyledDescriptionTypography,\n  StyledGridTextContainer,\n  StyledTitleTypography,\n} from '../style.js';\n\nconst mainIconColor = ['neutral', '0'] as SvgIconT.ColorType;\nconst cols = ['1fr'];\n\ninterface IconAndTextsRegionContentProps {\n  title: DSCardNavigationT.InternalProps['title'];\n  description: DSCardNavigationT.InternalProps['description'];\n  wrapText: DSCardNavigationT.InternalProps['wrapText'];\n  type: DSCardNavigationT.InternalProps['type'];\n  Icon: DSCardNavigationT.InternalProps['Icon'];\n\n  titleHandleRef: (node: HTMLElement | null) => void;\n  descriptionHandleRef: (node: HTMLElement | null) => void;\n  showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n  hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}\n\nexport const IconAndTextsRegionContent = React.memo((props: IconAndTextsRegionContentProps) => {\n  const {\n    title,\n    description,\n    wrapText,\n    titleHandleRef,\n    descriptionHandleRef,\n    type,\n    Icon,\n    showFocusRingAroundAll,\n    hideFocusRingAroundAll,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = props;\n\n  return (\n    <StyledGridTextContainer\n      data-type={type}\n      role=\"button\"\n      tabIndex={0}\n      onFocus={showFocusRingAroundAll}\n      onBlur={hideFocusRingAroundAll}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledCardNavigationIcon\n        $type={type}\n        role=\"presentation\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Icon size=\"l\" color={mainIconColor} />\n      </StyledCardNavigationIcon>\n\n      <StyledCardNavigationCentralContent\n        cols={cols}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledCardNavigationContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <StyledCardNavigationContentTitleWrapper\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <StyledCardNavigationContentTitle\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              <StyledTitleTypography\n                innerRef={titleHandleRef}\n                truncateWithEllipsis={!wrapText}\n                variant={TYPOGRAPHY_VARIANTS.B1}\n                getOwnerProps={getOwnerProps}\n                getOwnerPropsArguments={getOwnerPropsArguments}\n              >\n                {title}\n              </StyledTitleTypography>\n            </StyledCardNavigationContentTitle>\n            <div>\n              <StyledDescriptionTypography\n                innerRef={descriptionHandleRef}\n                truncateWithEllipsis={!wrapText}\n                variant={TYPOGRAPHY_VARIANTS.B1}\n                data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n                getOwnerProps={getOwnerProps}\n                getOwnerPropsArguments={getOwnerPropsArguments}\n              >\n                {description}\n              </StyledDescriptionTypography>\n            </div>\n          </StyledCardNavigationContentTitleWrapper>\n        </StyledCardNavigationContent>\n      </StyledCardNavigationCentralContent>\n    </StyledGridTextContainer>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiEf,cASE,YATF;AAhER,SAAS,2BAA2B;AACpC,OAAOA,YAAW;AAClB,SAAS,mCAAmC;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,gBAAgB,CAAC,WAAW,GAAG;AACrC,MAAM,OAAO,CAAC,KAAK;AAiBZ,MAAM,4BAA4BA,OAAM,KAAK,CAAC,UAA0C;AAC7F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEA,8BAAC,QAAK,MAAK,KAAI,OAAO,eAAe;AAAA;AAAA,QACvC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YAEA,8BAAC,+BAA4B,eAA8B,wBACzD;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC;AAAA,sBACA;AAAA,sBAEA;AAAA,wBAAC;AAAA;AAAA,0BACC,UAAU;AAAA,0BACV,sBAAsB,CAAC;AAAA,0BACvB,SAAS,oBAAoB;AAAA,0BAC7B;AAAA,0BACA;AAAA,0BAEC;AAAA;AAAA,sBACH;AAAA;AAAA,kBACF;AAAA,kBACA,oBAAC,SACC;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAU;AAAA,sBACV,sBAAsB,CAAC;AAAA,sBACvB,SAAS,oBAAoB;AAAA,sBAC7B,eAAa,4BAA4B;AAAA,sBACzC;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH,GACF;AAAA;AAAA;AAAA,YACF,GACF;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -6,15 +6,26 @@ export declare const CARD_NAVIGATION_SLOTS: {
     readonly TYPE: "type";
     readonly CENTRAL_CONTENT: "central-content";
     readonly INTERACTIVE_ELEMENT_REGION: "interactive-element-region";
+    readonly DESCRIPTION_TEXT: "description-text";
+    readonly TITLE_TYPOGRAPHY: "title-typography";
+    readonly TITLE_WRAPPER: "title-wrapper";
+    readonly CONTENT: "content";
+    readonly BUTTON_WRAPPER: "button-wrapper";
+    readonly ACTION_BUTTON: "action-button";
 };
 export declare const CARD_NAVIGATION_DATA_TESTID: {
     DESCRIPTION_TEXT: string;
+    TITLE_TYPOGRAPHY: string;
+    ACTION_BUTTON: string;
     ROOT: "ds-cardnavigation-root";
     TITLE: "ds-cardnavigation-title";
     ACTIONS: "ds-cardnavigation-actions";
     TYPE: "ds-cardnavigation-type";
     CENTRAL_CONTENT: "ds-cardnavigation-central-content";
     INTERACTIVE_ELEMENT_REGION: "ds-cardnavigation-interactive-element-region";
+    TITLE_WRAPPER: "ds-cardnavigation-title-wrapper";
+    CONTENT: "ds-cardnavigation-content";
+    BUTTON_WRAPPER: "ds-cardnavigation-button-wrapper";
 };
 export declare const CardNavigationTypes: {
     readonly BORROWER: "borrower";

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 import { DSCardNavigation } from './DSCardNavigation.js';
 export { DSCardNavigation, DSCardNavigationWithSchema } from './DSCardNavigation.js';
 export { type DSCardNavigationT } from './react-desc-prop-types.js';
-export { CARD_NAVIGATION_SLOTS, CARD_NAVIGATION_DATA_TESTID, CardNavigationTypesValues, CardNavigationTypes, } from './constants/index.js';
+export { CARD_NAVIGATION_SLOTS, CARD_NAVIGATION_DATA_TESTID, CardNavigationTypesValues, CardNavigationTypes, DSCardNavigationName, } from './constants/index.js';
 export default DSCardNavigation;

package/dist/types/parts/ActionsRegion.d.ts

@@ -3,6 +3,8 @@ import type { DSCardNavigationT } from '../react-desc-prop-types.js';
 interface ActionRegionProps {
     actions: DSCardNavigationT.InternalProps['actions'];
     instanceUid: string;
+    getOwnerProps?: () => object;
+    getOwnerPropsArguments?: () => object;
 }
 export declare const ActionsRegion: React.ComponentType<ActionRegionProps>;
 export {};

package/dist/types/parts/style.d.ts

@@ -21,6 +21,7 @@ interface StyledCardNavigationIconProps {
 }
 export declare const StyledCardNavigationIcon: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCardNavigationIconProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledCardNavigationActions: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledCardNavigationAction: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledCardNavigationButtonWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledGridTextContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledCardNavigationActionButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>>, never>;
 export {};

package/dist/types/parts/text-region/IconAndTextsRegion.d.ts

@@ -8,6 +8,8 @@ interface IconAndTextsRegionProps {
     Icon: DSCardNavigationT.InternalProps['Icon'];
     showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;
     hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;
+    getOwnerProps?: () => object;
+    getOwnerPropsArguments?: () => object;
 }
 export declare const IconAndTextsRegion: React.ComponentType<IconAndTextsRegionProps>;
 export {};

package/dist/types/parts/text-region/IconAndTextsRegionContent.d.ts

@@ -10,6 +10,8 @@ interface IconAndTextsRegionContentProps {
     descriptionHandleRef: (node: HTMLElement | null) => void;
     showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;
     hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;
+    getOwnerProps?: () => object;
+    getOwnerPropsArguments?: () => object;
 }
 export declare const IconAndTextsRegionContent: React.MemoExoticComponent<(props: IconAndTextsRegionContentProps) => import("react/jsx-runtime.js").JSX.Element>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-card-navigation",
-  "version": "3.55.0-next.24",
+  "version": "3.55.0-next.26",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Card Navigation",
   "files": [
@@ -37,22 +37,27 @@
   },
   "dependencies": {
     "@xstyled/styled-components": "~3.7.3",
-    "@elliemae/ds-grid": "3.55.0-next.24",
-    "@elliemae/ds-hooks-on-blur-out": "3.55.0-next.24",
-    "@elliemae/ds-system": "3.55.0-next.24",
-    "@elliemae/ds-hooks-on-overflow-change": "3.55.0-next.24",
-    "@elliemae/ds-icons": "3.55.0-next.24",
-    "@elliemae/ds-props-helpers": "3.55.0-next.24"
+    "uid": "^2.0.2",
+    "@elliemae/ds-button-v2": "3.55.0-next.26",
+    "@elliemae/ds-hooks-on-overflow-change": "3.55.0-next.26",
+    "@elliemae/ds-hooks-on-blur-out": "3.55.0-next.26",
+    "@elliemae/ds-props-helpers": "3.55.0-next.26",
+    "@elliemae/ds-grid": "3.55.0-next.26",
+    "@elliemae/ds-icons": "3.55.0-next.26",
+    "@elliemae/ds-system": "3.55.0-next.26",
+    "@elliemae/ds-tooltip-v3": "3.55.0-next.26",
+    "@elliemae/ds-typography": "3.55.0-next.26"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.65",
     "@playwright/experimental-ct-react": "^1.51.1",
+    "@xstyled/system": "~3.7.3",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.55.0-next.24",
-    "@elliemae/ds-typescript-helpers": "3.55.0-next.24",
-    "@elliemae/ds-icons": "3.55.0-next.24",
-    "@elliemae/ds-test-utils": "3.55.0-next.24"
+    "@elliemae/ds-monorepo-devops": "3.55.0-next.26",
+    "@elliemae/ds-test-utils": "3.55.0-next.26",
+    "@elliemae/ds-typescript-helpers": "3.55.0-next.26",
+    "@elliemae/ds-icons": "3.55.0-next.26"
   },
   "peerDependencies": {
     "@testing-library/jest-dom": "^6.6.3",