@elliemae/ds-card-navigation 3.55.1 → 3.57.0-next.1

package/dist/cjs/DSCardNavigation.js

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

package/dist/cjs/DSCardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSCardNavigation.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Bf;AA9BR,0BAAuD;AACvD,sBAAgC;AAChC,8BAAyB;AACzB,mBAA+B;AAC/B,+BAAkC;AAClC,uBAAqC;AACrC,mCAAwE;AACxE,mBAQO;AACP,4BAA+B;AAC/B,kCAAqC;AAErC,MAAM,gBAAgB,CAAC,WAAW,GAAG;AAErC,MAAM,mBAAsD,CAAC,UAAU;AACrE,QAAM,EAAE,kBAAkB,cAAc,YAAY,QAAI,4CAAkB,KAAK;AAC/E,QAAM,EAAE,gBAAgB,OAAO,aAAa,MAAM,MAAM,SAAS,UAAU,GAAG,KAAK,IAAI;AAEvF,QAAM,WAAO,sBAAQ,MAAO,QAAQ,SAAS,IAAI,CAAC,OAAO,aAAa,IAAI,CAAC,KAAK,GAAI,CAAC,QAAQ,MAAM,CAAC;AAEpG,SACE,6CAAC,+CAA+B,UAAU,GAAI,GAAG,MAAO,GAAG,cAAe,GAAG,gBAC3E;AAAA,gDAAC,yCAAyB,MAAK,UAAS,cAAY,OAAO,OAAO,MAAM,aAAW,MACjF,sDAAC,QAAK,MAAK,KAAI,OAAO,CAAC,GAAG,aAAa,GAAG,GAC5C;AAAA,IAEA,6CAAC,mDAAmC,MAClC;AAAA,kDAAC,4CACC,uDAAC,wDACC;AAAA,oDAAC,wCAAe,OAAc,UAAoB;AAAA,QAClD,4CAAC,oDAAqB,aAA0B,UAAoB;AAAA,SACtE,GACF;AAAA,MAEC,QAAQ,SAAS,KAChB,4CAAC,4CACE,kBAAQ;AAAA,QACP,CACE;AAAA,UACE,OAAO,4CAAC,mCAAgB,cAAW,gBAAe;AAAA,UAClD,MAAM;AAAA,UACN;AAAA,UACA,GAAG;AAAA,QACL,GACA;AAAA;AAAA,UAGA,4CAAC,2CACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,cAAW;AAAA,cACV,GAAG;AAAA,cACJ,YAAY,iCAAa;AAAA,cACzB,MAAM,iCAAa;AAAA,cAElB,uBAAa,4CAAC,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,iCAA6B,kCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
+  "sourcesContent": ["import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useCardNavigation } from './config/useCardNavigation.js';\nimport { DSCardNavigationName } from './constants/index.js';\nimport { type DSCardNavigationT, DSCardNavigationPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledCardNavigationBoxWrapper } from './parts/style.js';\nimport { IconAndTextsRegion } from './parts/text-region/IconAndTextsRegion.js';\nimport { ActionsRegion } from './parts/ActionsRegion.js';\n\nconst DSCardNavigation: React.ComponentType<DSCardNavigationT.Props> = (props) => {\n  const cardNavigationConfig = useCardNavigation(props);\n  const {\n    propsWithDefault,\n    xstyledProps,\n    globalProps,\n    iconAndTextsRegionIsFocused,\n    showFocusRingAroundAll,\n    hideFocusRingAroundAll,\n    instanceUid,\n  } = cardNavigationConfig;\n  const { containerProps, title, description, type, Icon, actions, wrapText } = propsWithDefault;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSCardNavigationT.Props>(propsWithDefault);\n\n  return (\n    <StyledCardNavigationBoxWrapper\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      $isIconAndTextsRegionFocused={iconAndTextsRegionIsFocused}\n    >\n      <IconAndTextsRegion\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        title={title}\n        description={description}\n        wrapText={wrapText}\n        type={type}\n        Icon={Icon}\n        showFocusRingAroundAll={showFocusRingAroundAll}\n        hideFocusRingAroundAll={hideFocusRingAroundAll}\n      />\n      <ActionsRegion\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        actions={actions}\n        instanceUid={instanceUid}\n      />\n    </StyledCardNavigationBoxWrapper>\n  );\n};\n\nDSCardNavigation.displayName = DSCardNavigationName;\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = DSCardNavigationPropTypesSchema;\n\nexport { DSCardNavigation, DSCardNavigationWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBnB;AAzBJ,8BAAwC;AAExC,+BAAkC;AAClC,uBAAqC;AACrC,mCAAwE;AACxE,mBAA+C;AAC/C,gCAAmC;AACnC,2BAA8B;AAE9B,MAAM,mBAAiE,CAAC,UAAU;AAChF,QAAM,2BAAuB,4CAAkB,KAAK;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,aAAa,MAAM,MAAM,SAAS,SAAS,IAAI;AAE9E,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAuC,gBAAgB;AAEzG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,8BAA8B;AAAA,MAE9B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,iCAA6B,kCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
   "names": []
 }

package/dist/cjs/config/useCardNavigation.js

@@ -40,20 +40,35 @@ var import_useValidateProps = require("./useValidateProps.js");
 const useCardNavigation = (propsFromUser) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
   (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSCardNavigationPropTypes);
+  const { title, type, ...globalPropsWithoutReusedReservedKeywords } = propsWithDefault;
+  const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(globalPropsWithoutReusedReservedKeywords);
   const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
   const instanceUid = import_react.default.useMemo(() => `ds-card-navigation-${(0, import_uid.uid)(5)}`, []);
+  const [iconAndTextsRegionIsFocused, setIconAndTextsRegionIsFocused] = import_react.default.useState(false);
+  const showFocusRingAroundAll = import_react.default.useCallback(() => {
+    setIconAndTextsRegionIsFocused(true);
+  }, []);
+  const hideFocusRingAroundAll = import_react.default.useCallback(() => {
+    setIconAndTextsRegionIsFocused(false);
+  }, []);
   return import_react.default.useMemo(
     () => ({
       propsWithDefault,
       xstyledProps,
-      instanceUid
-      // ...eventHandlers,
+      globalProps,
+      instanceUid,
+      iconAndTextsRegionIsFocused,
+      showFocusRingAroundAll,
+      hideFocusRingAroundAll
     }),
     [
       propsWithDefault,
       xstyledProps,
-      instanceUid
-      // eventHandlers,
+      globalProps,
+      instanceUid,
+      iconAndTextsRegionIsFocused,
+      showFocusRingAroundAll,
+      hideFocusRingAroundAll
     ]
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useCardNavigation.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAiE;AACjE,iBAAoB;AACpB,mCAAgF;AAChF,8BAAiC;AAQ1B,MAAM,oBAAoB,CAAC,kBAA2C;AAI3E,QAAM,uBAAmB,sDAA8D,eAAe,yCAAY;AAClH,gDAAiB,kBAAkB,sDAAyB;AAI5D,QAAM,mBAAe,4CAAmB,gBAAgB;AAKxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,0BAAsB,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAM1E,SAAO,aAAAA,QAAM;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;",
+  "sourcesContent": ["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` AND `type` as they are reused reserved keyword from global props,\n  //   we intend to \"consume\" those props, not \"spread\" in the html\n  const { title, type, ...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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAyF;AACzF,iBAAoB;AACpB,mCAAgF;AAChF,8BAAiC;AAY1B,MAAM,oBAAoB,CAAC,kBAA8D;AAI9F,QAAM,uBAAmB,sDAA8D,eAAe,yCAAY;AAClH,gDAAiB,kBAAkB,sDAAyB;AAM5D,QAAM,EAAE,OAAO,MAAM,GAAG,yCAAyC,IAAI;AACrE,QAAM,kBAAc,gDAAuB,wCAAwC;AACnF,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,0BAAsB,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAC1E,QAAM,CAAC,6BAA6B,8BAA8B,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1F,QAAM,yBAAyB,aAAAA,QAAM,YAAqD,MAAM;AAC9F,mCAA+B,IAAI;AAAA,EACrC,GAAG,CAAC,CAAC;AACL,QAAM,yBAAyB,aAAAA,QAAM,YAAqD,MAAM;AAC9F,mCAA+B,KAAK;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,SAAO,aAAAA,QAAM;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;",
   "names": ["React"]
 }

package/dist/cjs/constants/index.js

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

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

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

package/dist/cjs/index.js

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

package/dist/cjs/index.js.map

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

package/dist/cjs/parts/ActionsRegion.js

@@ -0,0 +1,72 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ActionsRegion_exports = {};
+__export(ActionsRegion_exports, {
+  ActionsRegion: () => ActionsRegion
+});
+module.exports = __toCommonJS(ActionsRegion_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_style = require("./style.js");
+const ActionsRegion = ({
+  actions,
+  instanceUid,
+  getOwnerProps,
+  getOwnerPropsArguments
+}) => {
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationActions, { getOwnerProps, getOwnerPropsArguments, children: actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {
+    const defaultIconJSX = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MoreOptionsVert, { "aria-label": "More options" });
+    const iconJSX = icon ?? defaultIconJSX;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_style.StyledCardNavigationButtonWrapper,
+      {
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_style.StyledCardNavigationActionButton,
+          {
+            onClick,
+            "aria-label": "More options",
+            ...unexpectedButPreviouslySupportedOtherProps,
+            buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
+            size: import_ds_button_v2.BUTTON_SIZES.L,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}) : iconJSX
+          }
+        )
+      },
+      `${instanceUid}-${index}`
+    );
+  }) });
+};
+//# sourceMappingURL=ActionsRegion.js.map

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

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

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

@@ -28,46 +28,65 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var style_exports = {};
 __export(style_exports, {
-  StyledCardNavigationAction: () => StyledCardNavigationAction,
+  StyledCardNavigationActionButton: () => StyledCardNavigationActionButton,
   StyledCardNavigationActions: () => StyledCardNavigationActions,
   StyledCardNavigationBoxWrapper: () => StyledCardNavigationBoxWrapper,
+  StyledCardNavigationButtonWrapper: () => StyledCardNavigationButtonWrapper,
   StyledCardNavigationCentralContent: () => StyledCardNavigationCentralContent,
   StyledCardNavigationContent: () => StyledCardNavigationContent,
-  StyledCardNavigationContentDescription: () => StyledCardNavigationContentDescription,
   StyledCardNavigationContentTitle: () => StyledCardNavigationContentTitle,
   StyledCardNavigationContentTitleWrapper: () => StyledCardNavigationContentTitleWrapper,
   StyledCardNavigationIcon: () => StyledCardNavigationIcon,
   StyledDescriptionTypography: () => StyledDescriptionTypography,
+  StyledGridTextContainer: () => StyledGridTextContainer,
   StyledTitleTypography: () => StyledTitleTypography
 });
 module.exports = __toCommonJS(style_exports);
 var React = __toESM(require("react"));
-var import_ds_typography = require("@elliemae/ds-typography");
-var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_constants = require("./constants/index.js");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
+var import_constants = require("../constants/index.js");
 const StyledCardNavigationContentTitle = (0, import_ds_system.styled)("div", {
   name: import_constants.DSCardNavigationName,
   slot: import_constants.CARD_NAVIGATION_SLOTS.TITLE
+})``;
+const StyledTitleTypography = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
+  name: import_constants.DSCardNavigationName,
+  slot: import_constants.CARD_NAVIGATION_SLOTS.TITLE_TYPOGRAPHY,
+  preserveLegacyDataTestId: true
 })`
-  padding-top: ${(props) => props.theme.space.xxs};
-`;
-const StyledTitleTypography = (0, import_ds_system.styled)(import_ds_typography.DSTypography)`
   color: ${(props) => props.theme.colors.neutral["700"]};
   font-weight: ${(props) => props.theme.fontWeights.semibold};
-  font-size: 18px;
+  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 StyledCardNavigationContentDescription = import_ds_system.styled.div``;
-const StyledDescriptionTypography = (0, import_ds_system.styled)(import_ds_typography.DSTypography)`
+const StyledDescriptionTypography = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
+  name: import_constants.DSCardNavigationName,
+  slot: import_constants.CARD_NAVIGATION_SLOTS.DESCRIPTION_TEXT,
+  preserveLegacyDataTestId: true
+})`
   color: ${(props) => props.theme.colors.neutral["500"]};
-  font-size: 12px;
+  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 = import_ds_system.styled.div`
+const StyledCardNavigationContentTitleWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSCardNavigationName,
+  slot: import_constants.CARD_NAVIGATION_SLOTS.TITLE_WRAPPER
+})`
   width: 100%;
 `;
-const StyledCardNavigationContent = import_ds_system.styled.div`
-  padding-right: ${(props) => props.theme.space.xs};
-  padding-left: ${(props) => props.theme.space.xs};
+const StyledCardNavigationContent = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSCardNavigationName,
+  slot: import_constants.CARD_NAVIGATION_SLOTS.CONTENT
+})`
   display: flex;
   align-items: center;
   flex: 1;
@@ -77,15 +96,14 @@ const StyledCardNavigationCentralContent = (0, import_ds_system.styled)(import_d
   slot: import_constants.CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,
   name: import_constants.DSCardNavigationName
 })`
-  min-width: 273px;
-  @media (max-width: ${(props) => props.theme.breakpoints.small}) {
-    min-width: 336px;
-  }
+  padding: 0 ${(props) => props.theme.space.xs};
 `;
 const StyledCardNavigationBoxWrapper = (0, import_ds_system.styled)("div", {
   name: import_constants.DSCardNavigationName,
   slot: import_constants.CARD_NAVIGATION_SLOTS.ROOT
 })`
+  min-width: 240px;
+  min-height: 64px;
   width: 337px;
   display: flex;
   flex-direction: row;
@@ -94,10 +112,12 @@ const StyledCardNavigationBoxWrapper = (0, import_ds_system.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: '';
@@ -110,46 +130,71 @@ const StyledCardNavigationBoxWrapper = (0, import_ds_system.styled)("div", {
     border-radius: 2px;
     pointer-events: none;
   }
-  &:hover,
-  &:focus {
+  &:hover {
     box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);
+    outline-offset: 2px;
   }
+
+  ${(props) => props.$isIconAndTextsRegionFocused ? import_ds_system.css`
+          outline: 2px solid ${props.theme.colors.brand["700"]};
+          outline-offset: 2px;
+        ` : import_ds_system.css``}
 `;
 const StyledCardNavigationIcon = (0, import_ds_system.styled)("div", {
   name: import_constants.DSCardNavigationName,
   slot: import_constants.CARD_NAVIGATION_SLOTS.TYPE
 })`
-  width: 64px;
-  height: 64px;
-  background-color: #32aad1;
+  min-width: 64px;
+  min-height: 64px;
+  height: 100%;
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
-  padding: ${(props) => props.theme.space.xxs};
+  padding: 0 ${(props) => props.theme.space.xs};
   display: flex;
   align-items: center;
   justify-content: center;
   fill: #ffffff;
-  background-color: ${({ $type }) => $type === import_constants.CardNavigationTypes.BORROWER && "#32aad1" || $type === import_constants.CardNavigationTypes.FINANCIAL && "#1ba88d" || $type === import_constants.CardNavigationTypes.LOAN && "#8e49b2" || $type === import_constants.CardNavigationTypes.REGULATORY && "#db5575" || "#32aad1"}; // Default color
+  background-color: ${({ $type }) => $type === import_constants.CardNavigationTypes.BORROWER && "#32aad1" || $type === import_constants.CardNavigationTypes.FINANCIAL && "#1ba88d" || $type === import_constants.CardNavigationTypes.LOAN && "#8e49b2" || $type === import_constants.CardNavigationTypes.REGULATORY && "#db5575" || "#32aad1"};
 `;
 const StyledCardNavigationActions = (0, import_ds_system.styled)("div", {
   name: import_constants.DSCardNavigationName,
   slot: import_constants.CARD_NAVIGATION_SLOTS.ACTIONS
 })`
+  padding: 0 ${(props) => props.theme.space.xs};
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding-right: ${(props) => props.theme.space.xxs};
+  gap: ${(props) => props.theme.space.xs};
 `;
-const StyledCardNavigationAction = import_ds_system.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};
-    }
+const StyledCardNavigationButtonWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSCardNavigationName,
+  slot: import_constants.CARD_NAVIGATION_SLOTS.BUTTON_WRAPPER
+})`
+  span,
+  svg {
+    height: ${({ theme }) => theme.space.s};
+    width: ${({ theme }) => theme.space.s};
+    fill: ${({ theme }) => theme.colors.neutral[500]};
   }
 `;
+const StyledGridTextContainer = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSCardNavigationName,
+  slot: import_constants.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 = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
+  name: import_constants.DSCardNavigationName,
+  slot: import_constants.CARD_NAVIGATION_SLOTS.ACTION_BUTTON,
+  preserveLegacyDataTestId: true
+})``;
 //# sourceMappingURL=style.js.map

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

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