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

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

@@ -0,0 +1,107 @@
+"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 IconAndTextsRegion_exports = {};
+__export(IconAndTextsRegion_exports, {
+  IconAndTextsRegion: () => IconAndTextsRegion
+});
+module.exports = __toCommonJS(IconAndTextsRegion_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_hooks_on_overflow_change = require("@elliemae/ds-hooks-on-overflow-change");
+var import_ds_tooltip_v3 = require("@elliemae/ds-tooltip-v3");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_react = __toESM(require("react"));
+var import_IconAndTextsRegionContent = require("./IconAndTextsRegionContent.js");
+const TooltipText = ({ title, description }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: import_ds_typography.TYPOGRAPHY_VARIANTS.H5_ARTICLE, children: title }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1, children: description })
+] });
+const IconAndTextsRegion = ({
+  title,
+  description,
+  wrapText,
+  type,
+  Icon,
+  showFocusRingAroundAll,
+  hideFocusRingAroundAll,
+  getOwnerProps,
+  getOwnerPropsArguments
+}) => {
+  const [isTitleTruncating, setIsTitleTruncating] = import_react.default.useState(false);
+  const [isDescriptionTruncating, setIsDescriptionTruncating] = import_react.default.useState(false);
+  const AnyOverFlow = isTitleTruncating || isDescriptionTruncating;
+  const { handleRef: titleHandleRef } = (0, import_ds_hooks_on_overflow_change.useOnOverflowChange)({
+    onOverflowStateChange: setIsTitleTruncating
+  });
+  const { handleRef: descriptionHandleRef } = (0, import_ds_hooks_on_overflow_change.useOnOverflowChange)({
+    onOverflowStateChange: setIsDescriptionTruncating
+  });
+  const TooltipTextProps = import_react.default.useMemo(
+    () => ({
+      title,
+      description
+    }),
+    [title, description]
+  );
+  if (AnyOverFlow)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { Text: TooltipText, textProps: TooltipTextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_IconAndTextsRegionContent.IconAndTextsRegionContent,
+      {
+        title,
+        description,
+        wrapText,
+        type,
+        Icon,
+        titleHandleRef,
+        descriptionHandleRef,
+        showFocusRingAroundAll,
+        hideFocusRingAroundAll,
+        getOwnerProps,
+        getOwnerPropsArguments
+      }
+    ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_IconAndTextsRegionContent.IconAndTextsRegionContent,
+    {
+      title,
+      description,
+      wrapText,
+      type,
+      Icon,
+      titleHandleRef,
+      descriptionHandleRef,
+      showFocusRingAroundAll,
+      hideFocusRingAroundAll,
+      getOwnerProps,
+      getOwnerPropsArguments
+    }
+  );
+};
+//# sourceMappingURL=IconAndTextsRegion.js.map

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

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

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

@@ -0,0 +1,128 @@
+"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 IconAndTextsRegionContent_exports = {};
+__export(IconAndTextsRegionContent_exports, {
+  IconAndTextsRegionContent: () => IconAndTextsRegionContent
+});
+module.exports = __toCommonJS(IconAndTextsRegionContent_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_react = __toESM(require("react"));
+var import_constants = require("../../constants/index.js");
+var import_style = require("../style.js");
+const mainIconColor = ["neutral", "0"];
+const cols = ["1fr"];
+const IconAndTextsRegionContent = import_react.default.memo((props) => {
+  const {
+    title,
+    description,
+    wrapText,
+    titleHandleRef,
+    descriptionHandleRef,
+    type,
+    Icon,
+    showFocusRingAroundAll,
+    hideFocusRingAroundAll,
+    getOwnerProps,
+    getOwnerPropsArguments
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_style.StyledGridTextContainer,
+    {
+      "data-type": type,
+      role: "button",
+      tabIndex: 0,
+      onFocus: showFocusRingAroundAll,
+      onBlur: hideFocusRingAroundAll,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_style.StyledCardNavigationIcon,
+          {
+            $type: type,
+            role: "presentation",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "l", color: mainIconColor })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_style.StyledCardNavigationCentralContent,
+          {
+            cols,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationContent, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_style.StyledCardNavigationContentTitleWrapper,
+              {
+                getOwnerProps,
+                getOwnerPropsArguments,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_style.StyledCardNavigationContentTitle,
+                    {
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_style.StyledTitleTypography,
+                        {
+                          innerRef: titleHandleRef,
+                          truncateWithEllipsis: !wrapText,
+                          variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1,
+                          getOwnerProps,
+                          getOwnerPropsArguments,
+                          children: title
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_style.StyledDescriptionTypography,
+                    {
+                      innerRef: descriptionHandleRef,
+                      truncateWithEllipsis: !wrapText,
+                      variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1,
+                      "data-testid": import_constants.CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: description
+                    }
+                  ) })
+                ]
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+});
+//# sourceMappingURL=IconAndTextsRegionContent.js.map

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AACP,sBAA6B;AAG7B,uBAAuF;AAyChF,MAAM,eAA+C;AAAA,EAC1D,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,MAAM,2CAA0B,CAAC;AAAA,EACjC,MAAM;AAAA,EACN,SAAS,CAAC;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,4BAAwE;AAAA,EACnF,OAAG,kDAAyB,uCAAsB,sCAAqB;AAAA,EACvE,GAAG;AAAA,EACH,GAAG;AAAA,EAEH,gBAAgB,kCAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,IAAI;AAAA,EAC5G,OAAO,kCAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC5E,aAAa,kCAAU,OAAO,YAAY,6BAA6B,EAAE,aAAa,EAAE;AAAA,EACxF,MAAM,kCAAU,MAAM,0CAAyB,EAAE,YAAY,sBAAsB,EAAE,aAAa,EAAE;AAAA,EAEpG,MAAM,kCAAU,KACb,YAAY,gDAAgD,EAC5D,aAAa,sDAAsD;AAAA,EAEtE,SAAS,kCAAU;AAAA,IACjB,kCAAU,MAAM;AAAA,MACd,MAAM,kCAAU,QAAQ,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,MACrD,MAAM,kCAAU,KAAK,YAAY,EAAE;AAAA,MACnC,SAAS,kCAAU;AAAA,IACrB,CAAC;AAAA,EACH,EACG,YAAY,+BAA+B,EAC3C,aAAa,IAAI;AAAA,EAEpB,UAAU,kCAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAC7F;AAEO,MAAM,kCACX;",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AACP,sBAA6B;AAG7B,uBAAuF;AAyChF,MAAM,eAA+C;AAAA,EAC1D,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,MAAM,2CAA0B,CAAC;AAAA,EACjC,MAAM;AAAA,EACN,SAAS,CAAC;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,4BAAwE;AAAA,EACnF,OAAG,kDAAyB,uCAAsB,sCAAqB;AAAA,EACvE,GAAG;AAAA,EACH,GAAG;AAAA,EAEH,gBAAgB,kCAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,IAAI;AAAA,EAC5G,OAAO,kCAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC5E,aAAa,kCAAU,OAAO,YAAY,6BAA6B,EAAE,aAAa,EAAE;AAAA,EACxF,MAAM,kCAAU,MAAM,0CAAyB,EAAE,YAAY,sBAAsB,EAAE,aAAa,EAAE;AAAA,EAEpG,MAAM,kCAAU,KACb,YAAY,gDAAgD,EAC5D,aAAa,sDAAsD;AAAA,EAEtE,SAAS,kCAAU;AAAA,IACjB,kCAAU,MAAM;AAAA,MACd,SAAS,kCAAU,KAAK;AAAA,MACxB,MAAM,kCAAU;AAAA,MAChB,MAAM,kCAAU;AAAA,IAClB,CAAC;AAAA,EACH,EACG,YAAY,+BAA+B,EAC3C,aAAa,IAAI;AAAA,EAEpB,UAAU,kCAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAC7F;AAEO,MAAM,kCACX;",
   "names": []
 }

package/dist/esm/DSCardNavigation.js

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

package/dist/esm/config/useCardNavigation.js

@@ -1,26 +1,41 @@
 import * as React from "react";
 import React2 from "react";
-import { useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { useGetXstyledProps, useMemoMergePropsWithDefault, useGetGlobalAttributes } 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, type, ...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,
-      instanceUid
-      // ...eventHandlers,
+      globalProps,
+      instanceUid,
+      iconAndTextsRegionIsFocused,
+      showFocusRingAroundAll,
+      hideFocusRingAroundAll
     }),
     [
       propsWithDefault,
       xstyledProps,
-      instanceUid
-      // eventHandlers,
+      globalProps,
+      instanceUid,
+      iconAndTextsRegionIsFocused,
+      showFocusRingAroundAll,
+      hideFocusRingAroundAll
     ]
   );
 };

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 } 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;",
+  "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` 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"],
+  "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,MAAM,GAAG,yCAAyC,IAAI;AACrE,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;",
   "names": ["React"]
 }

package/dist/esm/constants/index.js

@@ -6,11 +6,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 = {
   ...slotObjectToDataTestIds(DSCardNavigationName, CARD_NAVIGATION_SLOTS),
-  DESCRIPTION_TEXT: "ds-card-navigation--description"
+  DESCRIPTION_TEXT: "ds-card-navigation--description",
+  TITLE_TYPOGRAPHY: "ds-typography-element",
+  ACTION_BUTTON: "ds-button"
 };
 const CardNavigationTypes = {
   BORROWER: "borrower",

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

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

package/dist/esm/index.js

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

package/dist/esm/index.js.map

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