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

package/dist/esm/DSCardNavigation.js

@@ -1,51 +1,58 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { describe, useOwnerProps } from "@elliemae/ds-props-helpers";
+import { BUTTON_SIZES, BUTTON_TYPES, DSButtonV2 } from "@elliemae/ds-button-v2";
+import { MoreOptionsVert } from "@elliemae/ds-icons";
+import { describe } from "@elliemae/ds-props-helpers";
+import { useMemo } from "react";
 import { useCardNavigation } from "./config/useCardNavigation.js";
 import { DSCardNavigationName } from "./constants/index.js";
 import { DSCardNavigationPropTypesSchema } from "./react-desc-prop-types.js";
-import { StyledCardNavigationBoxWrapper } from "./parts/style.js";
-import { IconAndTextsRegion } from "./parts/text-region/IconAndTextsRegion.js";
-import { ActionsRegion } from "./parts/ActionsRegion.js";
+import {
+  StyledCardNavigationAction,
+  StyledCardNavigationActions,
+  StyledCardNavigationBoxWrapper,
+  StyledCardNavigationCentralContent,
+  StyledCardNavigationContent,
+  StyledCardNavigationContentTitleWrapper,
+  StyledCardNavigationIcon
+} from "./style.js";
+import { TitleComponent } from "./TitleComponent.js";
+import { DescriptionComponent } from "./DescriptionComponent.js";
+const mainIconColor = ["neutral", "0"];
 const DSCardNavigation = (props) => {
-  const cardNavigationConfig = useCardNavigation(props);
-  const {
-    propsWithDefault,
-    xstyledProps,
-    globalProps,
-    iconAndTextsRegionIsFocused,
-    showFocusRingAroundAll,
-    hideFocusRingAroundAll,
-    instanceUid
-  } = cardNavigationConfig;
-  const { containerProps, title, description, type, Icon, actions, wrapText } = propsWithDefault;
-  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);
-  return /* @__PURE__ */ jsxs(
-    StyledCardNavigationBoxWrapper,
-    {
-      ...globalProps,
-      ...xstyledProps,
-      ...containerProps,
-      getOwnerProps,
-      getOwnerPropsArguments,
-      $isIconAndTextsRegionFocused: iconAndTextsRegionIsFocused,
-      children: [
-        /* @__PURE__ */ jsx(
-          IconAndTextsRegion,
-          {
-            title,
-            description,
-            wrapText,
-            type,
-            Icon,
-            showFocusRingAroundAll,
-            hideFocusRingAroundAll
-          }
-        ),
-        /* @__PURE__ */ jsx(ActionsRegion, { actions, instanceUid })
-      ]
-    }
-  );
+  const { propsWithDefault, xstyledProps, instanceUid } = useCardNavigation(props);
+  const { containerProps, title, description, type, Icon, actions, wrapText, ...rest } = propsWithDefault;
+  const cols = useMemo(() => actions.length > 0 ? ["1fr", "min-content"] : ["1fr"], [actions.length]);
+  return /* @__PURE__ */ jsxs(StyledCardNavigationBoxWrapper, { tabIndex: 0, ...rest, ...xstyledProps, ...containerProps, children: [
+    /* @__PURE__ */ jsx(StyledCardNavigationIcon, { role: "button", "aria-label": title, $type: type, "data-type": type, children: /* @__PURE__ */ jsx(Icon, { size: "l", color: [...mainIconColor] }) }),
+    /* @__PURE__ */ jsxs(StyledCardNavigationCentralContent, { cols, children: [
+      /* @__PURE__ */ jsx(StyledCardNavigationContent, { children: /* @__PURE__ */ jsxs(StyledCardNavigationContentTitleWrapper, { children: [
+        /* @__PURE__ */ jsx(TitleComponent, { title, wrapText }),
+        /* @__PURE__ */ jsx(DescriptionComponent, { description, wrapText })
+      ] }) }),
+      actions.length > 0 && /* @__PURE__ */ jsx(StyledCardNavigationActions, { children: actions.map(
+        ({
+          icon = /* @__PURE__ */ jsx(MoreOptionsVert, { "aria-label": "More options" }),
+          Icon: ActionIcon,
+          onClick,
+          ...unexpectedButPreviouslySupportedOtherProps
+        }, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          /* @__PURE__ */ jsx(StyledCardNavigationAction, { children: /* @__PURE__ */ jsx(
+            DSButtonV2,
+            {
+              onClick,
+              "aria-label": "More options",
+              ...unexpectedButPreviouslySupportedOtherProps,
+              buttonType: BUTTON_TYPES.ICON,
+              size: BUTTON_SIZES.L,
+              children: ActionIcon ? /* @__PURE__ */ jsx(ActionIcon, {}) : icon
+            }
+          ) }, `${instanceUid}-${index}`)
+        )
+      ) })
+    ] })
+  ] });
 };
 DSCardNavigation.displayName = DSCardNavigationName;
 const DSCardNavigationWithSchema = describe(DSCardNavigation);

package/dist/esm/DSCardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSCardNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useCardNavigation } from './config/useCardNavigation.js';\nimport { DSCardNavigationName } from './constants/index.js';\nimport { type DSCardNavigationT, DSCardNavigationPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledCardNavigationBoxWrapper } from './parts/style.js';\nimport { IconAndTextsRegion } from './parts/text-region/IconAndTextsRegion.js';\nimport { ActionsRegion } from './parts/ActionsRegion.js';\n\nconst DSCardNavigation: React.ComponentType<DSCardNavigationT.Props> = (props) => {\n  const cardNavigationConfig = useCardNavigation(props);\n  const {\n    propsWithDefault,\n    xstyledProps,\n    globalProps,\n    iconAndTextsRegionIsFocused,\n    showFocusRingAroundAll,\n    hideFocusRingAroundAll,\n    instanceUid,\n  } = cardNavigationConfig;\n  const { containerProps, title, description, type, Icon, actions, wrapText } = propsWithDefault;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSCardNavigationT.Props>(propsWithDefault);\n\n  return (\n    <StyledCardNavigationBoxWrapper\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      $isIconAndTextsRegionFocused={iconAndTextsRegionIsFocused}\n    >\n      <IconAndTextsRegion\n        title={title}\n        description={description}\n        wrapText={wrapText}\n        type={type}\n        Icon={Icon}\n        showFocusRingAroundAll={showFocusRingAroundAll}\n        hideFocusRingAroundAll={hideFocusRingAroundAll}\n      />\n      <ActionsRegion actions={actions} instanceUid={instanceUid} />\n    </StyledCardNavigationBoxWrapper>\n  );\n};\n\nDSCardNavigation.displayName = DSCardNavigationName;\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = DSCardNavigationPropTypesSchema;\n\nexport { DSCardNavigation, DSCardNavigationWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyBnB,SAQE,KARF;AAzBJ,SAAS,UAAU,qBAAqB;AAExC,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAiC,uCAAuC;AACxE,SAAS,sCAAsC;AAC/C,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAE9B,MAAM,mBAAiE,CAAC,UAAU;AAChF,QAAM,uBAAuB,kBAAkB,KAAK;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,aAAa,MAAM,MAAM,SAAS,SAAS,IAAI;AAE9E,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAuC,gBAAgB;AAEzG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,8BAA8B;AAAA,MAE9B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,iBAAc,SAAkB,aAA0B;AAAA;AAAA;AAAA,EAC7D;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { BUTTON_SIZES, BUTTON_TYPES, DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport React, { useMemo } from 'react';\nimport { useCardNavigation } from './config/useCardNavigation.js';\nimport { DSCardNavigationName } from './constants/index.js';\nimport { type DSCardNavigationT, DSCardNavigationPropTypesSchema } from './react-desc-prop-types.js';\nimport {\n  StyledCardNavigationAction,\n  StyledCardNavigationActions,\n  StyledCardNavigationBoxWrapper,\n  StyledCardNavigationCentralContent,\n  StyledCardNavigationContent,\n  StyledCardNavigationContentTitleWrapper,\n  StyledCardNavigationIcon,\n} from './style.js';\nimport { TitleComponent } from './TitleComponent.js';\nimport { DescriptionComponent } from './DescriptionComponent.js';\n\nconst mainIconColor = ['neutral', '0'] as const;\n\nconst DSCardNavigation: React.FC<DSCardNavigationT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps, instanceUid } = useCardNavigation(props);\n  const { containerProps, title, description, type, Icon, actions, wrapText, ...rest } = propsWithDefault;\n\n  const cols = useMemo(() => (actions.length > 0 ? ['1fr', 'min-content'] : ['1fr']), [actions.length]);\n\n  return (\n    <StyledCardNavigationBoxWrapper tabIndex={0} {...rest} {...xstyledProps} {...containerProps}>\n      <StyledCardNavigationIcon role=\"button\" aria-label={title} $type={type} data-type={type}>\n        <Icon size=\"l\" color={[...mainIconColor]} />\n      </StyledCardNavigationIcon>\n\n      <StyledCardNavigationCentralContent cols={cols}>\n        <StyledCardNavigationContent>\n          <StyledCardNavigationContentTitleWrapper>\n            <TitleComponent title={title} wrapText={wrapText} />\n            <DescriptionComponent description={description} wrapText={wrapText} />\n          </StyledCardNavigationContentTitleWrapper>\n        </StyledCardNavigationContent>\n\n        {actions.length > 0 && (\n          <StyledCardNavigationActions>\n            {actions.map(\n              (\n                {\n                  icon = <MoreOptionsVert aria-label=\"More options\" />,\n                  Icon: ActionIcon,\n                  onClick,\n                  ...unexpectedButPreviouslySupportedOtherProps\n                },\n                index,\n              ) => (\n                // eslint-disable-next-line react/no-array-index-key\n                <StyledCardNavigationAction key={`${instanceUid}-${index}`}>\n                  <DSButtonV2\n                    onClick={onClick}\n                    aria-label=\"More options\"\n                    {...unexpectedButPreviouslySupportedOtherProps}\n                    buttonType={BUTTON_TYPES.ICON}\n                    size={BUTTON_SIZES.L}\n                  >\n                    {ActionIcon ? <ActionIcon /> : icon}\n                  </DSButtonV2>\n                </StyledCardNavigationAction>\n              ),\n            )}\n          </StyledCardNavigationActions>\n        )}\n      </StyledCardNavigationCentralContent>\n    </StyledCardNavigationBoxWrapper>\n  );\n};\n\nDSCardNavigation.displayName = DSCardNavigationName;\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = DSCardNavigationPropTypesSchema;\n\nexport { DSCardNavigation, DSCardNavigationWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8Bf,cAKE,YALF;AA9BR,SAAS,cAAc,cAAc,kBAAkB;AACvD,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAgB,eAAe;AAC/B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAiC,uCAAuC;AACxE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAErC,MAAM,gBAAgB,CAAC,WAAW,GAAG;AAErC,MAAM,mBAAsD,CAAC,UAAU;AACrE,QAAM,EAAE,kBAAkB,cAAc,YAAY,IAAI,kBAAkB,KAAK;AAC/E,QAAM,EAAE,gBAAgB,OAAO,aAAa,MAAM,MAAM,SAAS,UAAU,GAAG,KAAK,IAAI;AAEvF,QAAM,OAAO,QAAQ,MAAO,QAAQ,SAAS,IAAI,CAAC,OAAO,aAAa,IAAI,CAAC,KAAK,GAAI,CAAC,QAAQ,MAAM,CAAC;AAEpG,SACE,qBAAC,kCAA+B,UAAU,GAAI,GAAG,MAAO,GAAG,cAAe,GAAG,gBAC3E;AAAA,wBAAC,4BAAyB,MAAK,UAAS,cAAY,OAAO,OAAO,MAAM,aAAW,MACjF,8BAAC,QAAK,MAAK,KAAI,OAAO,CAAC,GAAG,aAAa,GAAG,GAC5C;AAAA,IAEA,qBAAC,sCAAmC,MAClC;AAAA,0BAAC,+BACC,+BAAC,2CACC;AAAA,4BAAC,kBAAe,OAAc,UAAoB;AAAA,QAClD,oBAAC,wBAAqB,aAA0B,UAAoB;AAAA,SACtE,GACF;AAAA,MAEC,QAAQ,SAAS,KAChB,oBAAC,+BACE,kBAAQ;AAAA,QACP,CACE;AAAA,UACE,OAAO,oBAAC,mBAAgB,cAAW,gBAAe;AAAA,UAClD,MAAM;AAAA,UACN;AAAA,UACA,GAAG;AAAA,QACL,GACA;AAAA;AAAA,UAGA,oBAAC,8BACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,cAAW;AAAA,cACV,GAAG;AAAA,cACJ,YAAY,aAAa;AAAA,cACzB,MAAM,aAAa;AAAA,cAElB,uBAAa,oBAAC,cAAW,IAAK;AAAA;AAAA,UACjC,KAT+B,GAAG,WAAW,IAAI,KAAK,EAUxD;AAAA;AAAA,MAEJ,GACF;AAAA,OAEJ;AAAA,KACF;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
   "names": []
 }

package/dist/esm/DescriptionComponent.js

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

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

package/dist/esm/TitleComponent.js

@@ -0,0 +1,21 @@
+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 { StyledCardNavigationContentTitle, StyledTitleTypography } from "./style.js";
+const TitleComponent = (props) => {
+  const { title, wrapText } = props;
+  const [isTitleTruncating, setIsTitleTruncating] = useState(false);
+  const { handleRef: titleHandleRef } = useOnOverflowChange({
+    onOverflowStateChange: setIsTitleTruncating
+  });
+  if (wrapText)
+    return /* @__PURE__ */ jsx(StyledCardNavigationContentTitle, { children: /* @__PURE__ */ jsx(StyledTitleTypography, { innerRef: titleHandleRef, truncateWithEllipsis: true, variant: TYPOGRAPHY_VARIANTS.B1, children: title }) });
+  return /* @__PURE__ */ jsx(StyledCardNavigationContentTitle, { children: isTitleTruncating ? /* @__PURE__ */ jsx(DSTooltipV3, { text: title, children: /* @__PURE__ */ jsx(StyledTitleTypography, { innerRef: titleHandleRef, truncateWithEllipsis: true, variant: TYPOGRAPHY_VARIANTS.B1, children: title }) }) : /* @__PURE__ */ jsx(StyledTitleTypography, { innerRef: titleHandleRef, truncateWithEllipsis: true, variant: TYPOGRAPHY_VARIANTS.B1, children: title }) });
+};
+export {
+  TitleComponent
+};
+//# sourceMappingURL=TitleComponent.js.map

package/dist/esm/TitleComponent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/TitleComponent.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 { 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACkBf;AAlBR,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,kCAAkC,6BAA6B;AAEjE,MAAM,iBAAiB,CAAC,UAAiD;AAC9E,QAAM,EAAE,OAAO,SAAS,IAAI;AAE5B,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAEhE,QAAM,EAAE,WAAW,eAAe,IAAI,oBAAoB;AAAA,IACxD,uBAAuB;AAAA,EACzB,CAAC;AAED,MAAI;AACF,WACE,oBAAC,oCACC,8BAAC,yBAAsB,UAAU,gBAAgB,sBAAoB,MAAC,SAAS,oBAAoB,IAChG,iBACH,GACF;AAGJ,SACE,oBAAC,oCACE,8BACC,oBAAC,eAAY,MAAM,OACjB,8BAAC,yBAAsB,UAAU,gBAAgB,sBAAoB,MAAC,SAAS,oBAAoB,IAChG,iBACH,GACF,IAEA,oBAAC,yBAAsB,UAAU,gBAAgB,sBAAoB,MAAC,SAAS,oBAAoB,IAChG,iBACH,GAEJ;AAEJ;",
+  "names": []
+}

package/dist/esm/config/useCardNavigation.js

@@ -1,41 +1,26 @@
 import * as React from "react";
 import React2 from "react";
-import { useGetXstyledProps, useMemoMergePropsWithDefault, useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
+import { useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
 import { uid } from "uid";
 import { DSCardNavigationPropTypes, defaultProps } from "../react-desc-prop-types.js";
 import { useValidateProps } from "./useValidateProps.js";
 const useCardNavigation = (propsFromUser) => {
   const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
   useValidateProps(propsWithDefault, DSCardNavigationPropTypes);
-  const { title, ...globalPropsWithoutReusedReservedKeywords } = propsWithDefault;
-  const globalProps = useGetGlobalAttributes(globalPropsWithoutReusedReservedKeywords);
   const xstyledProps = useGetXstyledProps(propsWithDefault);
   const instanceUid = React2.useMemo(() => `ds-card-navigation-${uid(5)}`, []);
-  const [iconAndTextsRegionIsFocused, setIconAndTextsRegionIsFocused] = React2.useState(false);
-  const showFocusRingAroundAll = React2.useCallback(() => {
-    setIconAndTextsRegionIsFocused(true);
-  }, []);
-  const hideFocusRingAroundAll = React2.useCallback(() => {
-    setIconAndTextsRegionIsFocused(false);
-  }, []);
   return React2.useMemo(
     () => ({
       propsWithDefault,
       xstyledProps,
-      globalProps,
-      instanceUid,
-      iconAndTextsRegionIsFocused,
-      showFocusRingAroundAll,
-      hideFocusRingAroundAll
+      instanceUid
+      // ...eventHandlers,
     }),
     [
       propsWithDefault,
       xstyledProps,
-      globalProps,
-      instanceUid,
-      iconAndTextsRegionIsFocused,
-      showFocusRingAroundAll,
-      hideFocusRingAroundAll
+      instanceUid
+      // eventHandlers,
     ]
   );
 };

package/dist/esm/config/useCardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCardNavigation.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSCardNavigationT, DSCardNavigationPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardNavigationCTX {\n  propsWithDefault: DSCardNavigationT.InternalProps;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  instanceUid: string;\n  iconAndTextsRegionIsFocused: boolean;\n  showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n  hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const useCardNavigation = (propsFromUser: DSCardNavigationT.Props): CardNavigationCTX => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCardNavigationT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSCardNavigationPropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  // exclude `title` as it is a reused reserved keyword from global props,\n  //   we intend to \"consume\" the title props, not \"spread\" in the html\n  const { title, ...globalPropsWithoutReusedReservedKeywords } = propsWithDefault;\n  const globalProps = useGetGlobalAttributes(globalPropsWithoutReusedReservedKeywords);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const instanceUid = React.useMemo(() => `ds-card-navigation-${uid(5)}`, []);\n  const [iconAndTextsRegionIsFocused, setIconAndTextsRegionIsFocused] = React.useState(false);\n  const showFocusRingAroundAll = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n    setIconAndTextsRegionIsFocused(true);\n  }, []);\n  const hideFocusRingAroundAll = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n    setIconAndTextsRegionIsFocused(false);\n  }, []);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalProps,\n      instanceUid,\n      iconAndTextsRegionIsFocused,\n      showFocusRingAroundAll,\n      hideFocusRingAroundAll,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      globalProps,\n      instanceUid,\n      iconAndTextsRegionIsFocused,\n      showFocusRingAroundAll,\n      hideFocusRingAroundAll,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,oBAAoB,8BAA8B,8BAA8B;AACzF,SAAS,WAAW;AACpB,SAAiC,2BAA2B,oBAAoB;AAChF,SAAS,wBAAwB;AAY1B,MAAM,oBAAoB,CAAC,kBAA8D;AAI9F,QAAM,mBAAmB,6BAA8D,eAAe,YAAY;AAClH,mBAAiB,kBAAkB,yBAAyB;AAM5D,QAAM,EAAE,OAAO,GAAG,yCAAyC,IAAI;AAC/D,QAAM,cAAc,uBAAuB,wCAAwC;AACnF,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,sBAAsB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAC1E,QAAM,CAAC,6BAA6B,8BAA8B,IAAIA,OAAM,SAAS,KAAK;AAC1F,QAAM,yBAAyBA,OAAM,YAAqD,MAAM;AAC9F,mCAA+B,IAAI;AAAA,EACrC,GAAG,CAAC,CAAC;AACL,QAAM,yBAAyBA,OAAM,YAAqD,MAAM;AAC9F,mCAA+B,KAAK;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSCardNavigationT, DSCardNavigationPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardNavigationCTX {\n  propsWithDefault: DSCardNavigationT.InternalProps;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useCardNavigation = (propsFromUser: DSCardNavigationT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCardNavigationT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSCardNavigationPropTypes);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `ds-card-navigation-${uid(5)}`, []);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      // eventHandlers,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,WAAW;AACpB,SAAiC,2BAA2B,oBAAoB;AAChF,SAAS,wBAAwB;AAQ1B,MAAM,oBAAoB,CAAC,kBAA2C;AAI3E,QAAM,mBAAmB,6BAA8D,eAAe,YAAY;AAClH,mBAAiB,kBAAkB,yBAAyB;AAI5D,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,sBAAsB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAM1E,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
   "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({
-      onClick: PropTypes.func.isRequired,
-      icon: PropTypes.element,
-      Icon: PropTypes.func
+      icon: PropTypes.element.deprecated({ version: "3.x" }),
+      Icon: PropTypes.func.description(""),
+      onClick: 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      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;",
+  "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;",
   "names": []
 }

package/dist/esm/{parts/style.js → style.js}

@@ -1,33 +1,30 @@
 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 { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from "../constants/index.js";
+import { styled } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { DSCardNavigationName, CARD_NAVIGATION_SLOTS, CardNavigationTypes } from "./constants/index.js";
 const StyledCardNavigationContentTitle = styled("div", {
   name: DSCardNavigationName,
   slot: CARD_NAVIGATION_SLOTS.TITLE
-})``;
+})`
+  padding-top: ${(props) => props.theme.space.xxs};
+`;
 const StyledTitleTypography = styled(DSTypography)`
   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
-  }
+  font-size: 18px;
 `;
+const StyledCardNavigationContentDescription = styled.div``;
 const StyledDescriptionTypography = styled(DSTypography)`
   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
-  }
+  font-size: 12px;
 `;
 const StyledCardNavigationContentTitleWrapper = styled.div`
   width: 100%;
 `;
 const StyledCardNavigationContent = styled.div`
+  padding-right: ${(props) => props.theme.space.xs};
+  padding-left: ${(props) => props.theme.space.xs};
   display: flex;
   align-items: center;
   flex: 1;
@@ -37,14 +34,15 @@ const StyledCardNavigationCentralContent = styled(Grid, {
   slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,
   name: DSCardNavigationName
 })`
-  padding: ${(props) => props.theme.space.xs};
+  min-width: 273px;
+  @media (max-width: ${(props) => props.theme.breakpoints.small}) {
+    min-width: 336px;
+  }
 `;
 const StyledCardNavigationBoxWrapper = styled("div", {
   name: DSCardNavigationName,
   slot: CARD_NAVIGATION_SLOTS.ROOT
 })`
-  min-width: 240px;
-  min-height: 64px;
   width: 337px;
   display: flex;
   flex-direction: row;
@@ -53,12 +51,10 @@ const StyledCardNavigationBoxWrapper = styled("div", {
   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: '';
@@ -71,59 +67,46 @@ const StyledCardNavigationBoxWrapper = styled("div", {
     border-radius: 2px;
     pointer-events: none;
   }
-  &:hover {
+  &:hover,
+  &:focus {
     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%;
+  width: 64px;
+  height: 64px;
+  background-color: #32aad1;
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
-  padding: ${(props) => props.theme.space.xs};
+  padding: ${(props) => props.theme.space.xxs};
   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"};
+  background-color: ${({ $type }) => $type === CardNavigationTypes.BORROWER && "#32aad1" || $type === CardNavigationTypes.FINANCIAL && "#1ba88d" || $type === CardNavigationTypes.LOAN && "#8e49b2" || $type === CardNavigationTypes.REGULATORY && "#db5575" || "#32aad1"}; // Default color
 `;
 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 StyledCardNavigationAction = styled("div")`
-  span,
-  svg {
-    height: ${({ theme }) => theme.space.s};
-    width: ${({ theme }) => theme.space.s};
-    fill: ${({ theme }) => theme.colors.neutral[500]};
-  }
+  padding-right: ${(props) => props.theme.space.xxs};
 `;
-const StyledGridTextContainer = styled("div")`
-  display: grid;
-  grid-template-columns: max-content auto;
-  align-items: center;
-  min-width: 0;
-  max-width: 100%;
-  overflow: hidden;
-  &:focus {
-    outline: none;
+const StyledCardNavigationAction = styled.div`
+  margin-left: ${(props) => props.theme.space.xxs};
+  span {
+    height: ${(props) => props.theme.space.s};
+    width: ${(props) => props.theme.space.s};
+    svg {
+      fill: ${(props) => props.theme.colors.neutral[500]};
+      height: ${(props) => props.theme.space.s};
+      width: ${(props) => props.theme.space.s};
+    }
   }
 `;
 export {
@@ -132,11 +115,11 @@ export {
   StyledCardNavigationBoxWrapper,
   StyledCardNavigationCentralContent,
   StyledCardNavigationContent,
+  StyledCardNavigationContentDescription,
   StyledCardNavigationContentTitle,
   StyledCardNavigationContentTitleWrapper,
   StyledCardNavigationIcon,
   StyledDescriptionTypography,
-  StyledGridTextContainer,
   StyledTitleTypography
 };
 //# sourceMappingURL=style.js.map

package/dist/esm/style.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,sBAAsB,uBAAuB,2BAA2B;AAE1E,MAAM,mCAAmC,OAAO,OAAO;AAAA,EAC5D,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,iBACgB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAG1C,MAAM,wBAAwB,OAAO,YAAY;AAAA,WAC7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACtC,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAIrD,MAAM,yCAAyC,OAAO;AAEtD,MAAM,8BAA8B,OAAO,YAAY;AAAA,WACnD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIhD,MAAM,0CAA0C,OAAO;AAAA;AAAA;AAIvD,MAAM,8BAA8B,OAAO;AAAA,mBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,kBAChC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1C,MAAM,qCAAqC,OAAO,MAAM;AAAA,EAC7D,MAAM,sBAAsB;AAAA,EAC5B,MAAM;AACR,CAAC;AAAA;AAAA,uBAEsB,CAAC,UAAU,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAQxD,MAAM,iCAAiC,OAAO,OAAO;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,sBAAsB;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,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,sBAAsB;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,oBAAoB,YAAY,aAC1C,UAAU,oBAAoB,aAAa,aAC3C,UAAU,oBAAoB,QAAQ,aACtC,UAAU,oBAAoB,cAAc,aAC7C,SAAS;AAAA;AAGN,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA,mBAIkB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAG5C,MAAM,6BAA6B,OAAO;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/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.ComponentType<DSCardNavigationT.Props>;
+declare const DSCardNavigation: React.FC<DSCardNavigationT.Props>;
 declare const DSCardNavigationWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSCardNavigationT.Props>;
 export { DSCardNavigation, DSCardNavigationWithSchema };

package/dist/types/DescriptionComponent.d.ts

@@ -0,0 +1,4 @@
+export declare const DescriptionComponent: (props: {
+    description: string;
+    wrapText?: boolean;
+}) => import("react/jsx-runtime.js").JSX.Element;

package/dist/types/TitleComponent.d.ts

@@ -0,0 +1,4 @@
+export declare const TitleComponent: (props: {
+    title: string;
+    wrapText?: boolean;
+}) => import("react/jsx-runtime.js").JSX.Element;

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

@@ -1,13 +1,12 @@
-import React from 'react';
-import { useGetXstyledProps, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { useGetXstyledProps } 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) => CardNavigationCTX;
+export declare const useCardNavigation: (propsFromUser: DSCardNavigationT.Props) => {
+    propsWithDefault: DSCardNavigationT.InternalProps;
+    xstyledProps: import("@elliemae/ds-props-helpers").XstyledProps;
+    instanceUid: string;
+};

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

@@ -1,26 +1,21 @@
-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, {
-    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>;
+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>;
 interface StyledCardNavigationBoxWrapperProps {
     fluid?: boolean;
 }
-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>;
+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>;
 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 {};