@elliemae/ds-card-navigation 3.55.0-next.7 → 3.55.0-next.9

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

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Grid } from "@elliemae/ds-grid";
+import { useOnOverflowChange } from "@elliemae/ds-hooks-on-overflow-change";
+import { DSTooltipV3 } from "@elliemae/ds-tooltip-v3";
+import { DSTypography, TYPOGRAPHY_VARIANTS } from "@elliemae/ds-typography";
+import React2 from "react";
+import { IconAndTextsRegionContent } from "./IconAndTextsRegionContent.js";
+const TooltipText = ({ title, description }) => /* @__PURE__ */ jsxs(Grid, { children: [
+  /* @__PURE__ */ jsx(DSTypography, { variant: TYPOGRAPHY_VARIANTS.H5_ARTICLE, children: title }),
+  /* @__PURE__ */ jsx(DSTypography, { variant: TYPOGRAPHY_VARIANTS.B1, children: description })
+] });
+const IconAndTextsRegion = ({
+  title,
+  description,
+  wrapText,
+  type,
+  Icon,
+  showFocusRingAroundAll,
+  hideFocusRingAroundAll
+}) => {
+  const [isTitleTruncating, setIsTitleTruncating] = React2.useState(false);
+  const [isDescriptionTruncating, setIsDescriptionTruncating] = React2.useState(false);
+  const AnyOverFlow = isTitleTruncating || isDescriptionTruncating;
+  const { handleRef: titleHandleRef } = useOnOverflowChange({
+    onOverflowStateChange: setIsTitleTruncating
+  });
+  const { handleRef: descriptionHandleRef } = useOnOverflowChange({
+    onOverflowStateChange: setIsDescriptionTruncating
+  });
+  const TooltipTextProps = React2.useMemo(
+    () => ({
+      title,
+      description
+    }),
+    [title, description]
+  );
+  if (AnyOverFlow)
+    return /* @__PURE__ */ jsx(DSTooltipV3, { Text: TooltipText, textProps: TooltipTextProps, children: /* @__PURE__ */ jsx(
+      IconAndTextsRegionContent,
+      {
+        title,
+        description,
+        wrapText,
+        type,
+        Icon,
+        titleHandleRef,
+        descriptionHandleRef,
+        showFocusRingAroundAll,
+        hideFocusRingAroundAll
+      }
+    ) });
+  return /* @__PURE__ */ jsx(
+    IconAndTextsRegionContent,
+    {
+      title,
+      description,
+      wrapText,
+      type,
+      Icon,
+      titleHandleRef,
+      descriptionHandleRef,
+      showFocusRingAroundAll,
+      hideFocusRingAroundAll
+    }
+  );
+};
+export {
+  IconAndTextsRegion
+};
+//# sourceMappingURL=IconAndTextsRegion.js.map

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

@@ -0,0 +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;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TYPOGRAPHY_VARIANTS } from "@elliemae/ds-typography";
+import React2 from "react";
+import { CARD_NAVIGATION_DATA_TESTID } from "../../constants/index.js";
+import {
+  StyledCardNavigationCentralContent,
+  StyledCardNavigationContent,
+  StyledCardNavigationContentTitle,
+  StyledCardNavigationContentTitleWrapper,
+  StyledCardNavigationIcon,
+  StyledDescriptionTypography,
+  StyledGridTextContainer,
+  StyledTitleTypography
+} from "../style.js";
+const mainIconColor = ["neutral", "0"];
+const cols = ["1fr"];
+const IconAndTextsRegionContent = React2.memo((props) => {
+  const {
+    title,
+    description,
+    wrapText,
+    titleHandleRef,
+    descriptionHandleRef,
+    type,
+    Icon,
+    showFocusRingAroundAll,
+    hideFocusRingAroundAll
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    StyledGridTextContainer,
+    {
+      role: "button",
+      tabIndex: 0,
+      onFocus: showFocusRingAroundAll,
+      onBlur: hideFocusRingAroundAll,
+      children: [
+        /* @__PURE__ */ jsx(StyledCardNavigationIcon, { $type: type, "data-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
+            }
+          ) })
+        ] }) }) })
+      ]
+    }
+  );
+});
+export {
+  IconAndTextsRegionContent
+};
+//# sourceMappingURL=IconAndTextsRegionContent.js.map

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

@@ -0,0 +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      role=\"button\"\n      tabIndex={0}\n      onFocus={showFocusRingAroundAll}\n      onBlur={hideFocusRingAroundAll}\n    >\n      <StyledCardNavigationIcon $type={type} data-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;ACqDf,cAKE,YALF;AApDR,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,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MAER;AAAA,4BAAC,4BAAyB,OAAO,MAAM,aAAW,MAAM,MAAK,gBAC3D,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;",
+  "names": ["React"]
+}

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

@@ -27,9 +27,9 @@ const DSCardNavigationPropTypes = {
   Icon: PropTypes.func.description("component that will be used to render the icon").defaultValue('()=><LoanProducts size="l" color={["neutral", 0]} />'),
   actions: PropTypes.arrayOf(
     PropTypes.shape({
-      icon: PropTypes.element.deprecated({ version: "3.x" }),
-      Icon: PropTypes.func.description(""),
-      onClick: PropTypes.func
+      onClick: PropTypes.func.isRequired,
+      icon: PropTypes.element,
+      Icon: PropTypes.func
     })
   ).description("card navigation actions array").defaultValue("[]"),
   wrapText: PropTypes.bool.description("wrap text in the card navigation").defaultValue(false)

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { LoanProducts } from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type SvgIconT } from '@elliemae/ds-icons';\nimport { DSCardNavigationName, CARD_NAVIGATION_SLOTS, CardNavigationTypesValues } from './constants/index.js';\n\nexport declare namespace DSCardNavigationT {\n  export interface Action {\n    icon?: React.ReactNode;\n    Icon?: React.ComponentType<Record<string, never>>;\n    onClick?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  }\n\n  export type TypeValues = (typeof CardNavigationTypesValues)[number];\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: object;\n    title: string;\n    description: string;\n    type: TypeValues;\n    Icon: React.ComponentType<SvgIconT.Props>;\n    actions: Array<Action> | ReadonlyArray<Action>;\n    wrapText: boolean;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSCardNavigationName, typeof CARD_NAVIGATION_SLOTS> {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSCardNavigationT.DefaultProps = {\n  containerProps: {},\n  title: '',\n  description: '',\n  type: CardNavigationTypesValues[0],\n  Icon: LoanProducts,\n  actions: [],\n  wrapText: false,\n};\n\nexport const DSCardNavigationPropTypes: DSPropTypesSchema<DSCardNavigationT.Props> = {\n  ...getPropsPerSlotPropTypes(DSCardNavigationName, CARD_NAVIGATION_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n\n  containerProps: PropTypes.object.description('props to inject to card navigation wrapper').defaultValue('{}'),\n  title: PropTypes.string.description('card navigation title').defaultValue(''),\n  description: PropTypes.string.description('card navigation description').defaultValue(''),\n  type: PropTypes.oneOf(CardNavigationTypesValues).description('card navigation type').defaultValue(''),\n\n  Icon: PropTypes.func\n    .description('component that will be used to render the icon')\n    .defaultValue('()=><LoanProducts size=\"l\" color={[\"neutral\", 0]} />'),\n\n  actions: PropTypes.arrayOf(\n    PropTypes.shape({\n      icon: PropTypes.element.deprecated({ version: '3.x' }),\n      Icon: PropTypes.func.description(''),\n      onClick: PropTypes.func,\n    }),\n  )\n    .description('card navigation actions array')\n    .defaultValue('[]'),\n\n  wrapText: PropTypes.bool.description('wrap text in the card navigation').defaultValue(false),\n};\n\nexport const DSCardNavigationPropTypesSchema =\n  DSCardNavigationPropTypes as unknown as ValidationMap<DSCardNavigationT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAG7B,SAAS,sBAAsB,uBAAuB,iCAAiC;AAyChF,MAAM,eAA+C;AAAA,EAC1D,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,MAAM,0BAA0B,CAAC;AAAA,EACjC,MAAM;AAAA,EACN,SAAS,CAAC;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,4BAAwE;AAAA,EACnF,GAAG,yBAAyB,sBAAsB,qBAAqB;AAAA,EACvE,GAAG;AAAA,EACH,GAAG;AAAA,EAEH,gBAAgB,UAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,IAAI;AAAA,EAC5G,OAAO,UAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC5E,aAAa,UAAU,OAAO,YAAY,6BAA6B,EAAE,aAAa,EAAE;AAAA,EACxF,MAAM,UAAU,MAAM,yBAAyB,EAAE,YAAY,sBAAsB,EAAE,aAAa,EAAE;AAAA,EAEpG,MAAM,UAAU,KACb,YAAY,gDAAgD,EAC5D,aAAa,sDAAsD;AAAA,EAEtE,SAAS,UAAU;AAAA,IACjB,UAAU,MAAM;AAAA,MACd,MAAM,UAAU,QAAQ,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,MACrD,MAAM,UAAU,KAAK,YAAY,EAAE;AAAA,MACnC,SAAS,UAAU;AAAA,IACrB,CAAC;AAAA,EACH,EACG,YAAY,+BAA+B,EAC3C,aAAa,IAAI;AAAA,EAEpB,UAAU,UAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAC7F;AAEO,MAAM,kCACX;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { LoanProducts } from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type SvgIconT } from '@elliemae/ds-icons';\nimport { DSCardNavigationName, CARD_NAVIGATION_SLOTS, CardNavigationTypesValues } from './constants/index.js';\n\nexport declare namespace DSCardNavigationT {\n  export interface Action {\n    icon?: React.ReactNode;\n    Icon?: React.ComponentType<Record<string, never>>;\n    onClick?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  }\n\n  export type TypeValues = (typeof CardNavigationTypesValues)[number];\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: object;\n    title: string;\n    description: string;\n    type: TypeValues;\n    Icon: React.ComponentType<SvgIconT.Props>;\n    actions: Array<Action> | ReadonlyArray<Action>;\n    wrapText: boolean;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSCardNavigationName, typeof CARD_NAVIGATION_SLOTS> {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSCardNavigationT.DefaultProps = {\n  containerProps: {},\n  title: '',\n  description: '',\n  type: CardNavigationTypesValues[0],\n  Icon: LoanProducts,\n  actions: [],\n  wrapText: false,\n};\n\nexport const DSCardNavigationPropTypes: DSPropTypesSchema<DSCardNavigationT.Props> = {\n  ...getPropsPerSlotPropTypes(DSCardNavigationName, CARD_NAVIGATION_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n\n  containerProps: PropTypes.object.description('props to inject to card navigation wrapper').defaultValue('{}'),\n  title: PropTypes.string.description('card navigation title').defaultValue(''),\n  description: PropTypes.string.description('card navigation description').defaultValue(''),\n  type: PropTypes.oneOf(CardNavigationTypesValues).description('card navigation type').defaultValue(''),\n\n  Icon: PropTypes.func\n    .description('component that will be used to render the icon')\n    .defaultValue('()=><LoanProducts size=\"l\" color={[\"neutral\", 0]} />'),\n\n  actions: PropTypes.arrayOf(\n    PropTypes.shape({\n      onClick: PropTypes.func.isRequired,\n      icon: PropTypes.element,\n      Icon: PropTypes.func,\n    }),\n  )\n    .description('card navigation actions array')\n    .defaultValue('[]'),\n\n  wrapText: PropTypes.bool.description('wrap text in the card navigation').defaultValue(false),\n};\n\nexport const DSCardNavigationPropTypesSchema =\n  DSCardNavigationPropTypes as unknown as ValidationMap<DSCardNavigationT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAG7B,SAAS,sBAAsB,uBAAuB,iCAAiC;AAyChF,MAAM,eAA+C;AAAA,EAC1D,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,MAAM,0BAA0B,CAAC;AAAA,EACjC,MAAM;AAAA,EACN,SAAS,CAAC;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,4BAAwE;AAAA,EACnF,GAAG,yBAAyB,sBAAsB,qBAAqB;AAAA,EACvE,GAAG;AAAA,EACH,GAAG;AAAA,EAEH,gBAAgB,UAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,IAAI;AAAA,EAC5G,OAAO,UAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC5E,aAAa,UAAU,OAAO,YAAY,6BAA6B,EAAE,aAAa,EAAE;AAAA,EACxF,MAAM,UAAU,MAAM,yBAAyB,EAAE,YAAY,sBAAsB,EAAE,aAAa,EAAE;AAAA,EAEpG,MAAM,UAAU,KACb,YAAY,gDAAgD,EAC5D,aAAa,sDAAsD;AAAA,EAEtE,SAAS,UAAU;AAAA,IACjB,UAAU,MAAM;AAAA,MACd,SAAS,UAAU,KAAK;AAAA,MACxB,MAAM,UAAU;AAAA,MAChB,MAAM,UAAU;AAAA,IAClB,CAAC;AAAA,EACH,EACG,YAAY,+BAA+B,EAC3C,aAAa,IAAI;AAAA,EAEpB,UAAU,UAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAC7F;AAEO,MAAM,kCACX;",
   "names": []
 }

package/dist/types/DSCardNavigation.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { type DSCardNavigationT } from './react-desc-prop-types.js';
-declare const DSCardNavigation: React.FC<DSCardNavigationT.Props>;
+declare const DSCardNavigation: React.ComponentType<DSCardNavigationT.Props>;
 declare const DSCardNavigationWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSCardNavigationT.Props>;
 export { DSCardNavigation, DSCardNavigationWithSchema };

package/dist/types/config/useCardNavigation.d.ts

@@ -1,12 +1,13 @@
-import { useGetXstyledProps } from '@elliemae/ds-props-helpers';
+import React from 'react';
+import { useGetXstyledProps, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
 import { type DSCardNavigationT } from '../react-desc-prop-types.js';
 export interface CardNavigationCTX {
     propsWithDefault: DSCardNavigationT.InternalProps;
     xstyledProps: ReturnType<typeof useGetXstyledProps>;
+    globalProps: ReturnType<typeof useGetGlobalAttributes>;
     instanceUid: string;
+    iconAndTextsRegionIsFocused: boolean;
+    showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;
+    hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;
 }
-export declare const useCardNavigation: (propsFromUser: DSCardNavigationT.Props) => {
-    propsWithDefault: DSCardNavigationT.InternalProps;
-    xstyledProps: import("@elliemae/ds-props-helpers").XstyledProps;
-    instanceUid: string;
-};
+export declare const useCardNavigation: (propsFromUser: DSCardNavigationT.Props) => CardNavigationCTX;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DSCardNavigationT } from '../react-desc-prop-types.js';
+interface ActionRegionProps {
+    actions: DSCardNavigationT.InternalProps['actions'];
+    instanceUid: string;
+}
+export declare const ActionsRegion: React.ComponentType<ActionRegionProps>;
+export {};

package/dist/types/{style.d.ts → parts/style.d.ts}

@@ -1,21 +1,26 @@
-import { CardNavigationTypes } from './constants/index.js';
+import { CardNavigationTypes } from '../constants/index.js';
 export declare const StyledCardNavigationContentTitle: 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 StyledTitleTypography: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
-export declare const StyledCardNavigationContentDescription: 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 StyledDescriptionTypography: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
 export declare const StyledCardNavigationContentTitleWrapper: 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 StyledCardNavigationContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
     wrapText?: boolean;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledCardNavigationCentralContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledCardNavigationCentralContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    wrapText?: boolean;
+    AnyOverFlow?: boolean;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
 interface StyledCardNavigationBoxWrapperProps {
     fluid?: boolean;
 }
-export declare const StyledCardNavigationBoxWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCardNavigationBoxWrapperProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledCardNavigationBoxWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCardNavigationBoxWrapperProps & {
+    $isIconAndTextsRegionFocused?: boolean;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 interface StyledCardNavigationIconProps {
     $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];
 }
 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 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 {};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { DSCardNavigationT } from '../../react-desc-prop-types.js';
+interface IconAndTextsRegionProps {
+    title: DSCardNavigationT.InternalProps['title'];
+    description: DSCardNavigationT.InternalProps['description'];
+    wrapText: DSCardNavigationT.InternalProps['wrapText'];
+    type: DSCardNavigationT.InternalProps['type'];
+    Icon: DSCardNavigationT.InternalProps['Icon'];
+    showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;
+    hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;
+}
+export declare const IconAndTextsRegion: React.ComponentType<IconAndTextsRegionProps>;
+export {};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { DSCardNavigationT } from '../../react-desc-prop-types.js';
+interface IconAndTextsRegionContentProps {
+    title: DSCardNavigationT.InternalProps['title'];
+    description: DSCardNavigationT.InternalProps['description'];
+    wrapText: DSCardNavigationT.InternalProps['wrapText'];
+    type: DSCardNavigationT.InternalProps['type'];
+    Icon: DSCardNavigationT.InternalProps['Icon'];
+    titleHandleRef: (node: HTMLElement | null) => void;
+    descriptionHandleRef: (node: HTMLElement | null) => void;
+    showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;
+    hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;
+}
+export declare const IconAndTextsRegionContent: React.MemoExoticComponent<(props: IconAndTextsRegionContentProps) => import("react/jsx-runtime.js").JSX.Element>;
+export {};

package/dist/types/tests/tooltip-tests/DSCardNavigation.tooltip.wrapText.interdependecy.test.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/tooltip-tests/DSCardNavigationTooltipTestRenderer.d.ts

@@ -0,0 +1 @@
+export const DSCardNavigationTooltipTestRenderer: import("react").FunctionComponent<import("react").JSX.IntrinsicAttributes>;

package/package.json

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

package/dist/cjs/DescriptionComponent.js

@@ -1,79 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var DescriptionComponent_exports = {};
-__export(DescriptionComponent_exports, {
-  DescriptionComponent: () => DescriptionComponent
-});
-module.exports = __toCommonJS(DescriptionComponent_exports);
-var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_hooks_on_overflow_change = require("@elliemae/ds-hooks-on-overflow-change");
-var import_ds_tooltip_v3 = require("@elliemae/ds-tooltip-v3");
-var import_ds_typography = require("@elliemae/ds-typography");
-var import_react = require("react");
-var import_constants = require("./constants/index.js");
-var import_style = require("./style.js");
-const DescriptionComponent = (props) => {
-  const { description, wrapText } = props;
-  const [isDescriptionTruncating, setIsDescriptionTruncating] = (0, import_react.useState)(false);
-  const { handleRef: descriptionHandleRef } = (0, import_ds_hooks_on_overflow_change.useOnOverflowChange)({
-    onOverflowStateChange: setIsDescriptionTruncating
-  });
-  if (wrapText)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationContentDescription, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_style.StyledDescriptionTypography,
-      {
-        innerRef: descriptionHandleRef,
-        truncateWithEllipsis: true,
-        variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1,
-        "data-testid": import_constants.CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
-        children: description
-      }
-    ) });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationContentDescription, { children: isDescriptionTruncating ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: description, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_style.StyledDescriptionTypography,
-    {
-      innerRef: descriptionHandleRef,
-      truncateWithEllipsis: true,
-      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.StyledDescriptionTypography,
-    {
-      innerRef: descriptionHandleRef,
-      truncateWithEllipsis: true,
-      variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1,
-      "data-testid": import_constants.CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
-      children: description
-    }
-  ) });
-};
-//# sourceMappingURL=DescriptionComponent.js.map

package/dist/cjs/DescriptionComponent.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DescriptionComponent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { useState } from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from './constants/index.js';\nimport { StyledCardNavigationContentDescription, StyledDescriptionTypography } from './style.js';\n\nexport const DescriptionComponent = (props: { description: string; wrapText?: boolean }) => {\n  const { description, wrapText } = props;\n\n  const [isDescriptionTruncating, setIsDescriptionTruncating] = useState(false);\n\n  const { handleRef: descriptionHandleRef } = useOnOverflowChange({\n    onOverflowStateChange: setIsDescriptionTruncating,\n  });\n\n  if (wrapText)\n    return (\n      <StyledCardNavigationContentDescription>\n        <StyledDescriptionTypography\n          innerRef={descriptionHandleRef}\n          truncateWithEllipsis\n          variant={TYPOGRAPHY_VARIANTS.B1}\n          data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n        >\n          {description}\n        </StyledDescriptionTypography>\n      </StyledCardNavigationContentDescription>\n    );\n\n  return (\n    <StyledCardNavigationContentDescription>\n      {isDescriptionTruncating ? (\n        <DSTooltipV3 text={description}>\n          <StyledDescriptionTypography\n            innerRef={descriptionHandleRef}\n            truncateWithEllipsis\n            variant={TYPOGRAPHY_VARIANTS.B1}\n            data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n          >\n            {description}\n          </StyledDescriptionTypography>\n        </DSTooltipV3>\n      ) : (\n        <StyledDescriptionTypography\n          innerRef={descriptionHandleRef}\n          truncateWithEllipsis\n          variant={TYPOGRAPHY_VARIANTS.B1}\n          data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n        >\n          {description}\n        </StyledDescriptionTypography>\n      )}\n    </StyledCardNavigationContentDescription>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBf;AAnBR,yCAAoC;AACpC,2BAA4B;AAC5B,2BAAoC;AACpC,mBAAyB;AACzB,uBAA4C;AAC5C,mBAAoF;AAE7E,MAAM,uBAAuB,CAAC,UAAuD;AAC1F,QAAM,EAAE,aAAa,SAAS,IAAI;AAElC,QAAM,CAAC,yBAAyB,0BAA0B,QAAI,uBAAS,KAAK;AAE5E,QAAM,EAAE,WAAW,qBAAqB,QAAI,wDAAoB;AAAA,IAC9D,uBAAuB;AAAA,EACzB,CAAC;AAED,MAAI;AACF,WACE,4CAAC,uDACC;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,sBAAoB;AAAA,QACpB,SAAS,yCAAoB;AAAA,QAC7B,eAAa,6CAA4B;AAAA,QAExC;AAAA;AAAA,IACH,GACF;AAGJ,SACE,4CAAC,uDACE,oCACC,4CAAC,oCAAY,MAAM,aACjB;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,sBAAoB;AAAA,MACpB,SAAS,yCAAoB;AAAA,MAC7B,eAAa,6CAA4B;AAAA,MAExC;AAAA;AAAA,EACH,GACF,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,sBAAoB;AAAA,MACpB,SAAS,yCAAoB;AAAA,MAC7B,eAAa,6CAA4B;AAAA,MAExC;AAAA;AAAA,EACH,GAEJ;AAEJ;",
-  "names": []
-}

package/dist/cjs/TitleComponent.js

@@ -1,51 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var TitleComponent_exports = {};
-__export(TitleComponent_exports, {
-  TitleComponent: () => TitleComponent
-});
-module.exports = __toCommonJS(TitleComponent_exports);
-var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_hooks_on_overflow_change = require("@elliemae/ds-hooks-on-overflow-change");
-var import_ds_tooltip_v3 = require("@elliemae/ds-tooltip-v3");
-var import_ds_typography = require("@elliemae/ds-typography");
-var import_react = require("react");
-var import_style = require("./style.js");
-const TitleComponent = (props) => {
-  const { title, wrapText } = props;
-  const [isTitleTruncating, setIsTitleTruncating] = (0, import_react.useState)(false);
-  const { handleRef: titleHandleRef } = (0, import_ds_hooks_on_overflow_change.useOnOverflowChange)({
-    onOverflowStateChange: setIsTitleTruncating
-  });
-  if (wrapText)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationContentTitle, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledTitleTypography, { innerRef: titleHandleRef, truncateWithEllipsis: true, variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1, children: title }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationContentTitle, { children: isTitleTruncating ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: title, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledTitleTypography, { innerRef: titleHandleRef, truncateWithEllipsis: true, variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1, children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledTitleTypography, { innerRef: titleHandleRef, truncateWithEllipsis: true, variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1, children: title }) });
-};
-//# sourceMappingURL=TitleComponent.js.map

package/dist/cjs/TitleComponent.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/TitleComponent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { useState } from 'react';\nimport { StyledCardNavigationContentTitle, StyledTitleTypography } from './style.js';\n\nexport const TitleComponent = (props: { title: string; wrapText?: boolean }) => {\n  const { title, wrapText } = props;\n\n  const [isTitleTruncating, setIsTitleTruncating] = useState(false);\n\n  const { handleRef: titleHandleRef } = useOnOverflowChange({\n    onOverflowStateChange: setIsTitleTruncating,\n  });\n\n  if (wrapText)\n    return (\n      <StyledCardNavigationContentTitle>\n        <StyledTitleTypography innerRef={titleHandleRef} truncateWithEllipsis variant={TYPOGRAPHY_VARIANTS.B1}>\n          {title}\n        </StyledTitleTypography>\n      </StyledCardNavigationContentTitle>\n    );\n\n  return (\n    <StyledCardNavigationContentTitle>\n      {isTitleTruncating ? (\n        <DSTooltipV3 text={title}>\n          <StyledTitleTypography innerRef={titleHandleRef} truncateWithEllipsis variant={TYPOGRAPHY_VARIANTS.B1}>\n            {title}\n          </StyledTitleTypography>\n        </DSTooltipV3>\n      ) : (\n        <StyledTitleTypography innerRef={titleHandleRef} truncateWithEllipsis variant={TYPOGRAPHY_VARIANTS.B1}>\n          {title}\n        </StyledTitleTypography>\n      )}\n    </StyledCardNavigationContentTitle>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBf;AAlBR,yCAAoC;AACpC,2BAA4B;AAC5B,2BAAoC;AACpC,mBAAyB;AACzB,mBAAwE;AAEjE,MAAM,iBAAiB,CAAC,UAAiD;AAC9E,QAAM,EAAE,OAAO,SAAS,IAAI;AAE5B,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAS,KAAK;AAEhE,QAAM,EAAE,WAAW,eAAe,QAAI,wDAAoB;AAAA,IACxD,uBAAuB;AAAA,EACzB,CAAC;AAED,MAAI;AACF,WACE,4CAAC,iDACC,sDAAC,sCAAsB,UAAU,gBAAgB,sBAAoB,MAAC,SAAS,yCAAoB,IAChG,iBACH,GACF;AAGJ,SACE,4CAAC,iDACE,8BACC,4CAAC,oCAAY,MAAM,OACjB,sDAAC,sCAAsB,UAAU,gBAAgB,sBAAoB,MAAC,SAAS,yCAAoB,IAChG,iBACH,GACF,IAEA,4CAAC,sCAAsB,UAAU,gBAAgB,sBAAoB,MAAC,SAAS,yCAAoB,IAChG,iBACH,GAEJ;AAEJ;",
-  "names": []
-}

package/dist/cjs/style.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/style.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSTypography } from '@elliemae/ds-typography';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardNavigationName, CARD_NAVIGATION_SLOTS, CardNavigationTypes } from './constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.TITLE,\n})`\n  padding-top: ${(props) => props.theme.space.xxs};\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: 18px;\n`;\n\nexport const StyledCardNavigationContentDescription = styled.div``;\n\nexport const StyledDescriptionTypography = styled(DSTypography)`\n  color: ${(props) => props.theme.colors.neutral['500']};\n  font-size: 12px;\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled.div`\n  width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled.div<{ wrapText?: boolean }>`\n  padding-right: ${(props) => props.theme.space.xs};\n  padding-left: ${(props) => props.theme.space.xs};\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})`\n  min-width: 273px;\n  @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n    min-width: 336px;\n  }\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n  fluid?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps>`\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  ${(props) => (props.fluid ? 'width: 100%' : '')};\n  @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n    width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\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  &:focus {\n    box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\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  width: 64px;\n  height: 64px;\n  background-color: #32aad1;\n  border-top-left-radius: 2px;\n  border-bottom-left-radius: 2px;\n  padding: ${(props) => props.theme.space.xxs};\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'}; // Default color\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n  name: DSCardNavigationName,\n  slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-right: ${(props) => props.theme.space.xxs};\n`;\n\nexport const StyledCardNavigationAction = styled.div`\n  margin-left: ${(props) => props.theme.space.xxs};\n  span {\n    height: ${(props) => props.theme.space.s};\n    width: ${(props) => props.theme.space.s};\n    svg {\n      fill: ${(props) => props.theme.colors.neutral[500]};\n      height: ${(props) => props.theme.space.s};\n      width: ${(props) => props.theme.space.s};\n    }\n  }\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;ACAA,YAAuB;ADAvB,2BAA6B;AAC7B,uBAAuB;AACvB,qBAAqB;AACrB,uBAAiF;AAE1E,MAAM,uCAAmC,yBAAO,OAAO;AAAA,EAC5D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,iBACgB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAG1C,MAAM,4BAAwB,yBAAO,iCAAY;AAAA,WAC7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACtC,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAIrD,MAAM,yCAAyC,wBAAO;AAEtD,MAAM,kCAA8B,yBAAO,iCAAY;AAAA,WACnD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIhD,MAAM,0CAA0C,wBAAO;AAAA;AAAA;AAIvD,MAAM,8BAA8B,wBAAO;AAAA,mBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,kBAChC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1C,MAAM,yCAAqC,yBAAO,qBAAM;AAAA,EAC7D,MAAM,uCAAsB;AAAA,EAC5B,MAAM;AACR,CAAC;AAAA;AAAA,uBAEsB,CAAC,UAAU,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAQxD,MAAM,qCAAiC,yBAAO,OAAO;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASG,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,oBAU3C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa7C,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMY,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKvB,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;AAAA;AAAA;AAAA,mBAIkB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAG5C,MAAM,6BAA6B,wBAAO;AAAA,iBAChC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,cAEnC,CAAC,UAAU,MAAM,MAAM,MAAM,CAAC;AAAA,aAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA,cAE7B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,gBACxC,CAAC,UAAU,MAAM,MAAM,MAAM,CAAC;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;",
-  "names": []
-}

package/dist/esm/DescriptionComponent.js

@@ -1,49 +0,0 @@
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-import { useOnOverflowChange } from "@elliemae/ds-hooks-on-overflow-change";
-import { DSTooltipV3 } from "@elliemae/ds-tooltip-v3";
-import { TYPOGRAPHY_VARIANTS } from "@elliemae/ds-typography";
-import { useState } from "react";
-import { CARD_NAVIGATION_DATA_TESTID } from "./constants/index.js";
-import { StyledCardNavigationContentDescription, StyledDescriptionTypography } from "./style.js";
-const DescriptionComponent = (props) => {
-  const { description, wrapText } = props;
-  const [isDescriptionTruncating, setIsDescriptionTruncating] = useState(false);
-  const { handleRef: descriptionHandleRef } = useOnOverflowChange({
-    onOverflowStateChange: setIsDescriptionTruncating
-  });
-  if (wrapText)
-    return /* @__PURE__ */ jsx(StyledCardNavigationContentDescription, { children: /* @__PURE__ */ jsx(
-      StyledDescriptionTypography,
-      {
-        innerRef: descriptionHandleRef,
-        truncateWithEllipsis: true,
-        variant: TYPOGRAPHY_VARIANTS.B1,
-        "data-testid": CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
-        children: description
-      }
-    ) });
-  return /* @__PURE__ */ jsx(StyledCardNavigationContentDescription, { children: isDescriptionTruncating ? /* @__PURE__ */ jsx(DSTooltipV3, { text: description, children: /* @__PURE__ */ jsx(
-    StyledDescriptionTypography,
-    {
-      innerRef: descriptionHandleRef,
-      truncateWithEllipsis: true,
-      variant: TYPOGRAPHY_VARIANTS.B1,
-      "data-testid": CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
-      children: description
-    }
-  ) }) : /* @__PURE__ */ jsx(
-    StyledDescriptionTypography,
-    {
-      innerRef: descriptionHandleRef,
-      truncateWithEllipsis: true,
-      variant: TYPOGRAPHY_VARIANTS.B1,
-      "data-testid": CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
-      children: description
-    }
-  ) });
-};
-export {
-  DescriptionComponent
-};
-//# sourceMappingURL=DescriptionComponent.js.map

package/dist/esm/DescriptionComponent.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DescriptionComponent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { useState } from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from './constants/index.js';\nimport { StyledCardNavigationContentDescription, StyledDescriptionTypography } from './style.js';\n\nexport const DescriptionComponent = (props: { description: string; wrapText?: boolean }) => {\n  const { description, wrapText } = props;\n\n  const [isDescriptionTruncating, setIsDescriptionTruncating] = useState(false);\n\n  const { handleRef: descriptionHandleRef } = useOnOverflowChange({\n    onOverflowStateChange: setIsDescriptionTruncating,\n  });\n\n  if (wrapText)\n    return (\n      <StyledCardNavigationContentDescription>\n        <StyledDescriptionTypography\n          innerRef={descriptionHandleRef}\n          truncateWithEllipsis\n          variant={TYPOGRAPHY_VARIANTS.B1}\n          data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n        >\n          {description}\n        </StyledDescriptionTypography>\n      </StyledCardNavigationContentDescription>\n    );\n\n  return (\n    <StyledCardNavigationContentDescription>\n      {isDescriptionTruncating ? (\n        <DSTooltipV3 text={description}>\n          <StyledDescriptionTypography\n            innerRef={descriptionHandleRef}\n            truncateWithEllipsis\n            variant={TYPOGRAPHY_VARIANTS.B1}\n            data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n          >\n            {description}\n          </StyledDescriptionTypography>\n        </DSTooltipV3>\n      ) : (\n        <StyledDescriptionTypography\n          innerRef={descriptionHandleRef}\n          truncateWithEllipsis\n          variant={TYPOGRAPHY_VARIANTS.B1}\n          data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n        >\n          {description}\n        </StyledDescriptionTypography>\n      )}\n    </StyledCardNavigationContentDescription>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmBf;AAnBR,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,mCAAmC;AAC5C,SAAS,wCAAwC,mCAAmC;AAE7E,MAAM,uBAAuB,CAAC,UAAuD;AAC1F,QAAM,EAAE,aAAa,SAAS,IAAI;AAElC,QAAM,CAAC,yBAAyB,0BAA0B,IAAI,SAAS,KAAK;AAE5E,QAAM,EAAE,WAAW,qBAAqB,IAAI,oBAAoB;AAAA,IAC9D,uBAAuB;AAAA,EACzB,CAAC;AAED,MAAI;AACF,WACE,oBAAC,0CACC;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,sBAAoB;AAAA,QACpB,SAAS,oBAAoB;AAAA,QAC7B,eAAa,4BAA4B;AAAA,QAExC;AAAA;AAAA,IACH,GACF;AAGJ,SACE,oBAAC,0CACE,oCACC,oBAAC,eAAY,MAAM,aACjB;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,sBAAoB;AAAA,MACpB,SAAS,oBAAoB;AAAA,MAC7B,eAAa,4BAA4B;AAAA,MAExC;AAAA;AAAA,EACH,GACF,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,sBAAoB;AAAA,MACpB,SAAS,oBAAoB;AAAA,MAC7B,eAAa,4BAA4B;AAAA,MAExC;AAAA;AAAA,EACH,GAEJ;AAEJ;",
-  "names": []
-}