@elliemae/ds-card-navigation 3.53.0-alpha.1 → 3.53.0-alpha.3

package/dist/esm/parts/ActionsRegion.js

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { BUTTON_SIZES, BUTTON_TYPES } from "@elliemae/ds-button-v2";
+import { MoreOptionsVert } from "@elliemae/ds-icons";
+import {
+  StyledCardNavigationButtonWrapper,
+  StyledCardNavigationActions,
+  StyledCardNavigationActionButton
+} from "./style.js";
+const ActionsRegion = ({
+  actions,
+  instanceUid,
+  getOwnerProps,
+  getOwnerPropsArguments
+}) => {
+  if (actions.length === 0) return null;
+  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(
+      StyledCardNavigationButtonWrapper,
+      {
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children: /* @__PURE__ */ jsx(
+          StyledCardNavigationActionButton,
+          {
+            onClick,
+            "aria-label": "More options",
+            ...unexpectedButPreviouslySupportedOtherProps,
+            buttonType: BUTTON_TYPES.ICON,
+            size: BUTTON_SIZES.L,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: Icon ? /* @__PURE__ */ jsx(Icon, {}) : iconJSX
+          }
+        )
+      },
+      `${instanceUid}-${index}`
+    );
+  }) });
+};
+export {
+  ActionsRegion
+};
+//# sourceMappingURL=ActionsRegion.js.map

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

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

@@ -0,0 +1,170 @@
+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, {
+  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
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 1.125rem; // 18px -> 18/16 = 1.125rem
+  }
+`;
+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
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem
+  }
+`;
+const StyledCardNavigationContentTitleWrapper = styled("div", {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.TITLE_WRAPPER
+})`
+  width: 100%;
+`;
+const StyledCardNavigationContent = styled("div", {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.CONTENT
+})`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+`;
+const StyledCardNavigationCentralContent = styled(Grid, {
+  slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,
+  name: DSCardNavigationName
+})`
+  padding: 0 ${(props) => props.theme.space.xs};
+`;
+const StyledCardNavigationBoxWrapper = styled("div", {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.ROOT
+})`
+  min-width: 240px;
+  min-height: 64px;
+  width: 337px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);
+  border-radius: 2px;
+  position: relative;
+  outline: none;
+
+  ${(props) => props.fluid ? "width: 100%" : ""};
+  @media (max-width: ${(props) => props.theme.breakpoints.small}) {
+    width: ${(props) => props.fluid ? "width: 100%" : "414px"};
+  }
+
+  :after {
+    display: block;
+    content: '';
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    border: solid ${(props) => props.theme.space.xxs} transparent;
+    border-radius: 2px;
+    pointer-events: none;
+  }
+  &:hover {
+    box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);
+    outline-offset: 2px;
+  }
+
+  ${(props) => props.$isIconAndTextsRegionFocused ? css`
+          outline: 2px solid ${props.theme.colors.brand["700"]};
+          outline-offset: 2px;
+        ` : css``}
+`;
+const StyledCardNavigationIcon = styled("div", {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.TYPE
+})`
+  min-width: 64px;
+  min-height: 64px;
+  height: 100%;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+  padding: 0 ${(props) => props.theme.space.xs};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  fill: #ffffff;
+  background-color: ${({ $type }) => $type === CardNavigationTypes.BORROWER && "#32aad1" || $type === CardNavigationTypes.FINANCIAL && "#1ba88d" || $type === CardNavigationTypes.LOAN && "#8e49b2" || $type === CardNavigationTypes.REGULATORY && "#db5575" || "#32aad1"};
+`;
+const StyledCardNavigationActions = styled("div", {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.ACTIONS
+})`
+  padding: 0 ${(props) => props.theme.space.xs};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${(props) => props.theme.space.xs};
+`;
+const StyledCardNavigationButtonWrapper = styled("div", {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.BUTTON_WRAPPER
+})`
+  span,
+  svg {
+    height: ${({ theme }) => theme.space.s};
+    width: ${({ theme }) => theme.space.s};
+    fill: ${({ theme }) => theme.colors.neutral[500]};
+  }
+`;
+const StyledGridTextContainer = styled("div", {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.INTERACTIVE_ELEMENT_REGION
+})`
+  display: grid;
+  grid-template-columns: max-content auto;
+  align-items: center;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+  &:focus {
+    outline: none;
+  }
+  cursor: pointer;
+`;
+const StyledCardNavigationActionButton = styled(DSButtonV3, {
+  name: DSCardNavigationName,
+  slot: CARD_NAVIGATION_SLOTS.ACTION_BUTTON,
+  preserveLegacyDataTestId: true
+})``;
+export {
+  StyledCardNavigationActionButton,
+  StyledCardNavigationActions,
+  StyledCardNavigationBoxWrapper,
+  StyledCardNavigationButtonWrapper,
+  StyledCardNavigationCentralContent,
+  StyledCardNavigationContent,
+  StyledCardNavigationContentTitle,
+  StyledCardNavigationContentTitleWrapper,
+  StyledCardNavigationIcon,
+  StyledDescriptionTypography,
+  StyledGridTextContainer,
+  StyledTitleTypography
+};
+//# sourceMappingURL=style.js.map

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

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

@@ -0,0 +1,77 @@
+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,
+  getOwnerProps,
+  getOwnerPropsArguments
+}) => {
+  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,
+        getOwnerProps,
+        getOwnerPropsArguments
+      }
+    ) });
+  return /* @__PURE__ */ jsx(
+    IconAndTextsRegionContent,
+    {
+      title,
+      description,
+      wrapText,
+      type,
+      Icon,
+      titleHandleRef,
+      descriptionHandleRef,
+      showFocusRingAroundAll,
+      hideFocusRingAroundAll,
+      getOwnerProps,
+      getOwnerPropsArguments
+    }
+  );
+};
+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  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

@@ -0,0 +1,107 @@
+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,
+    getOwnerProps,
+    getOwnerPropsArguments
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    StyledGridTextContainer,
+    {
+      "data-type": type,
+      role: "button",
+      tabIndex: 0,
+      onFocus: showFocusRingAroundAll,
+      onBlur: hideFocusRingAroundAll,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        /* @__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
+                    }
+                  ) })
+                ]
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+});
+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  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/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/constants/index.d.ts

@@ -5,9 +5,27 @@ export declare const CARD_NAVIGATION_SLOTS: {
     readonly ACTIONS: "actions";
     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

@@ -0,0 +1,10 @@
+import React from 'react';
+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/{style.d.ts → parts/style.d.ts}

@@ -1,22 +1,27 @@
-/// <reference types="react" />
-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 | undefined;
+    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 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 {};