@elliemae/ds-legacy-card-navigation 1.0.0-rc.1

package/dist/cjs/DSCardNavigation.js

@@ -0,0 +1,93 @@
+"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 DSCardNavigation_exports = {};
+__export(DSCardNavigation_exports, {
+  CardNavigationTypes: () => import_types.CardNavigationTypes,
+  CardNavigationTypesValues: () => import_types.CardNavigationTypesValues,
+  DSCardNavigation: () => DSCardNavigation,
+  DSCardNavigationWithSchema: () => DSCardNavigationWithSchema,
+  default: () => DSCardNavigation_default
+});
+module.exports = __toCommonJS(DSCardNavigation_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_legacy_props_helpers = require("@elliemae/ds-legacy-props-helpers");
+var import_ds_legacy_truncated_tooltip_text = require("@elliemae/ds-legacy-truncated-tooltip-text");
+var import_ds_legacy_icons = require("@elliemae/ds-legacy-icons");
+var import_ds_legacy_button_v2 = require("@elliemae/ds-legacy-button-v2");
+var import_style = require("./style.js");
+var import_types = require("./components/types.js");
+const DSCardNavigation = ({ containerProps = {}, title = "", description = "", type, Icon, actions = [], ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_truncated_tooltip_text.TooltipTextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.StyledCardNavigationBoxWrapper, { tabIndex: 0, ...rest, ...containerProps, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationIcon, { role: "button", "aria-label": title, type, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "l", color: ["neutral", 0] }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.StyledCardNavigationCentralContent, { 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_style.StyledCardNavigationContentTitle, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_truncated_tooltip_text.DSTruncatedTooltipText, { value: title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationContentDescription, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_truncated_tooltip_text.DSTruncatedTooltipText, { value: description, "data-testid": "ds-card-navigation--description" }) })
+    ] }) }),
+    actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationActions, { children: actions.map(({ icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_icons.MoreOptionsVert, { "aria-label": "More options" }), ...otherProps }, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationAction, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_legacy_button_v2.DSButtonV2,
+      {
+        ...otherProps,
+        "aria-label": "More options",
+        buttonType: import_ds_legacy_button_v2.BUTTON_TYPES.ICON,
+        size: import_ds_legacy_button_v2.BUTTON_SIZES.L,
+        children: icon
+      }
+    ) }, key)) })
+  ] })
+] }) });
+DSCardNavigation.defaultProps = {
+  type: import_types.CardNavigationTypes.BORROWER,
+  Icon: import_ds_legacy_icons.LoanProducts
+};
+const props = {
+  /** props to inject to card navigation wrapper */
+  containerProps: import_ds_legacy_props_helpers.PropTypes.object.description("props to inject to card navigation wrapper"),
+  /** card navigation title */
+  title: import_ds_legacy_props_helpers.PropTypes.string.description("card navigation title"),
+  /** card navigation main icon */
+  Icon: import_ds_legacy_props_helpers.PropTypes.func.description("card navigation main icon"),
+  /** card navigation description */
+  description: import_ds_legacy_props_helpers.PropTypes.string.description("card navigation description"),
+  /** card navigation type */
+  type: import_ds_legacy_props_helpers.PropTypes.oneOf(import_types.CardNavigationTypesValues).description("card navigation type"),
+  /** card navigation actions array */
+  actions: import_ds_legacy_props_helpers.PropTypes.arrayOf(
+    import_ds_legacy_props_helpers.PropTypes.shape({
+      icon: import_ds_legacy_props_helpers.PropTypes.element,
+      onClick: import_ds_legacy_props_helpers.PropTypes.func
+    })
+  ).description("card navigation actions array")
+};
+DSCardNavigation.propTypes = props;
+DSCardNavigation.displayName = "DSCardNavigation";
+const DSCardNavigationWithSchema = (0, import_ds_legacy_props_helpers.describe)(DSCardNavigation);
+DSCardNavigationWithSchema.propTypes = props;
+var DSCardNavigation_default = DSCardNavigation;
+//# sourceMappingURL=DSCardNavigation.js.map

package/dist/cjs/DSCardNavigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSCardNavigation.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-legacy-props-helpers';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-legacy-truncated-tooltip-text';\nimport { MoreOptionsVert, LoanProducts } from '@elliemae/ds-legacy-icons';\nimport { DSButtonV2, BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-legacy-button-v2';\nimport {\n  StyledCardNavigationContentTitle,\n  StyledCardNavigationContentDescription,\n  StyledCardNavigationContentTitleWrapper,\n  StyledCardNavigationContent,\n  StyledCardNavigationCentralContent,\n  StyledCardNavigationBoxWrapper,\n  StyledCardNavigationIcon,\n  StyledCardNavigationAction,\n  StyledCardNavigationActions,\n} from './style.js';\nimport { CardNavigationTypes, CardNavigationTypesValues } from './components/types.js';\n\nconst DSCardNavigation = ({ containerProps = {}, title = '', description = '', type, Icon, actions = [], ...rest }) => (\n  <TooltipTextProvider>\n    <StyledCardNavigationBoxWrapper tabIndex={0} {...rest} {...containerProps}>\n      <StyledCardNavigationIcon role=\"button\" aria-label={title} type={type}>\n        <Icon size=\"l\" color={['neutral', 0]} />\n      </StyledCardNavigationIcon>\n      <StyledCardNavigationCentralContent>\n        <StyledCardNavigationContent>\n          <StyledCardNavigationContentTitleWrapper>\n            <StyledCardNavigationContentTitle>\n              <DSTruncatedTooltipText value={title} />\n            </StyledCardNavigationContentTitle>\n            <StyledCardNavigationContentDescription>\n              <DSTruncatedTooltipText value={description} data-testid=\"ds-card-navigation--description\" />\n            </StyledCardNavigationContentDescription>\n          </StyledCardNavigationContentTitleWrapper>\n        </StyledCardNavigationContent>\n        {actions.length > 0 && (\n          <StyledCardNavigationActions>\n            {actions.map(({ icon = <MoreOptionsVert aria-label=\"More options\" />, ...otherProps }, key) => (\n              <StyledCardNavigationAction key={key}>\n                <DSButtonV2\n                  {...otherProps}\n                  aria-label=\"More options\"\n                  buttonType={BUTTON_TYPES.ICON}\n                  size={BUTTON_SIZES.L}\n                >\n                  {icon}\n                </DSButtonV2>\n              </StyledCardNavigationAction>\n            ))}\n          </StyledCardNavigationActions>\n        )}\n      </StyledCardNavigationCentralContent>\n    </StyledCardNavigationBoxWrapper>\n  </TooltipTextProvider>\n);\n\nDSCardNavigation.defaultProps = {\n  type: CardNavigationTypes.BORROWER,\n  Icon: LoanProducts,\n};\n\nconst props = {\n  /** props to inject to card navigation wrapper */\n  containerProps: PropTypes.object.description('props to inject to card navigation wrapper'),\n  /** card navigation title */\n  title: PropTypes.string.description('card navigation title'),\n  /** card navigation main icon */\n  Icon: PropTypes.func.description('card navigation main icon'),\n  /** card navigation description */\n  description: PropTypes.string.description('card navigation description'),\n  /** card navigation type */\n  type: PropTypes.oneOf(CardNavigationTypesValues).description('card navigation type'),\n  /** card navigation actions array */\n  actions: PropTypes.arrayOf(\n    PropTypes.shape({\n      icon: PropTypes.element,\n      onClick: PropTypes.func,\n    }),\n  ).description('card navigation actions array'),\n};\n\nDSCardNavigation.propTypes = props;\nDSCardNavigation.displayName = 'DSCardNavigation';\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = props;\n\nexport { CardNavigationTypes, CardNavigationTypesValues, DSCardNavigationWithSchema, DSCardNavigation };\n\nexport default DSCardNavigation;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBf;AArBR,qCAAoC;AACpC,8CAA4D;AAC5D,6BAA8C;AAC9C,iCAAuD;AACvD,mBAUO;AACP,mBAA+D;AAE/D,MAAM,mBAAmB,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,cAAc,IAAI,MAAM,MAAM,UAAU,CAAC,GAAG,GAAG,KAAK,MAC/G,4CAAC,+DACC,uDAAC,+CAA+B,UAAU,GAAI,GAAG,MAAO,GAAG,gBACzD;AAAA,8CAAC,yCAAyB,MAAK,UAAS,cAAY,OAAO,MACzD,sDAAC,QAAK,MAAK,KAAI,OAAO,CAAC,WAAW,CAAC,GAAG,GACxC;AAAA,EACA,6CAAC,mDACC;AAAA,gDAAC,4CACC,uDAAC,wDACC;AAAA,kDAAC,iDACC,sDAAC,kEAAuB,OAAO,OAAO,GACxC;AAAA,MACA,4CAAC,uDACC,sDAAC,kEAAuB,OAAO,aAAa,eAAY,mCAAkC,GAC5F;AAAA,OACF,GACF;AAAA,IACC,QAAQ,SAAS,KAChB,4CAAC,4CACE,kBAAQ,IAAI,CAAC,EAAE,OAAO,4CAAC,0CAAgB,cAAW,gBAAe,GAAI,GAAG,WAAW,GAAG,QACrF,4CAAC,2CACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,cAAW;AAAA,QACX,YAAY,wCAAa;AAAA,QACzB,MAAM,wCAAa;AAAA,QAElB;AAAA;AAAA,IACH,KAR+B,GASjC,CACD,GACH;AAAA,KAEJ;AAAA,GACF,GACF;AAGF,iBAAiB,eAAe;AAAA,EAC9B,MAAM,iCAAoB;AAAA,EAC1B,MAAM;AACR;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,yCAAU,OAAO,YAAY,4CAA4C;AAAA;AAAA,EAEzF,OAAO,yCAAU,OAAO,YAAY,uBAAuB;AAAA;AAAA,EAE3D,MAAM,yCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAE5D,aAAa,yCAAU,OAAO,YAAY,6BAA6B;AAAA;AAAA,EAEvE,MAAM,yCAAU,MAAM,sCAAyB,EAAE,YAAY,sBAAsB;AAAA;AAAA,EAEnF,SAAS,yCAAU;AAAA,IACjB,yCAAU,MAAM;AAAA,MACd,MAAM,yCAAU;AAAA,MAChB,SAAS,yCAAU;AAAA,IACrB,CAAC;AAAA,EACH,EAAE,YAAY,+BAA+B;AAC/C;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,cAAc;AAC/B,MAAM,iCAA6B,yCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAIvC,IAAO,2BAAQ;",
+  "names": []
+}

package/dist/cjs/components/types.js

@@ -0,0 +1,43 @@
+"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 types_exports = {};
+__export(types_exports, {
+  CardNavigationTypes: () => CardNavigationTypes,
+  CardNavigationTypesValues: () => CardNavigationTypesValues
+});
+module.exports = __toCommonJS(types_exports);
+var React = __toESM(require("react"));
+const CardNavigationTypes = {
+  BORROWER: "borrower",
+  FINANCIAL: "financial",
+  LOAN: "loan",
+  REGULATORY: "regulatory"
+};
+const CardNavigationTypesValues = Object.values(CardNavigationTypes);
+//# sourceMappingURL=types.js.map

package/dist/cjs/components/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/types.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const CardNavigationTypes = {\n  BORROWER: 'borrower',\n  FINANCIAL: 'financial',\n  LOAN: 'loan',\n  REGULATORY: 'regulatory',\n};\n\nexport const CardNavigationTypesValues = Object.values(CardNavigationTypes);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,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

@@ -0,0 +1,38 @@
+"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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+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 src_exports = {};
+__export(src_exports, {
+  default: () => import_DSCardNavigation.default
+});
+module.exports = __toCommonJS(src_exports);
+var React = __toESM(require("react"));
+var import_DSCardNavigation = __toESM(require("./DSCardNavigation.js"));
+__reExport(src_exports, require("./DSCardNavigation.js"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export { default } from './DSCardNavigation.js';\nexport * from './DSCardNavigation.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAwB;AACxB,wBAAc,kCADd;",
+  "names": []
+}

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/style.js

@@ -0,0 +1,135 @@
+"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 style_exports = {};
+__export(style_exports, {
+  StyledCardNavigationAction: () => StyledCardNavigationAction,
+  StyledCardNavigationActions: () => StyledCardNavigationActions,
+  StyledCardNavigationBoxWrapper: () => StyledCardNavigationBoxWrapper,
+  StyledCardNavigationCentralContent: () => StyledCardNavigationCentralContent,
+  StyledCardNavigationContent: () => StyledCardNavigationContent,
+  StyledCardNavigationContentDescription: () => StyledCardNavigationContentDescription,
+  StyledCardNavigationContentTitle: () => StyledCardNavigationContentTitle,
+  StyledCardNavigationContentTitleWrapper: () => StyledCardNavigationContentTitleWrapper,
+  StyledCardNavigationIcon: () => StyledCardNavigationIcon
+});
+module.exports = __toCommonJS(style_exports);
+var React = __toESM(require("react"));
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+var import_types = require("./components/types.js");
+const StyledCardNavigationContentTitle = import_ds_legacy_system.styled.div`
+  padding-top: ${(props) => props.theme.space.xxs};
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  font-size: 18px;
+  color: ${(props) => props.theme.colors.neutral["700"]};
+`;
+const StyledCardNavigationContentDescription = import_ds_legacy_system.styled.div`
+  color: ${(props) => props.theme.colors.neutral["500"]};
+  font-size: 12px;
+`;
+const StyledCardNavigationContentTitleWrapper = import_ds_legacy_system.styled.div`
+  width: 100%;
+`;
+const StyledCardNavigationContent = import_ds_legacy_system.styled.div`
+  padding-right: ${(props) => props.theme.space.xs};
+  padding-left: ${(props) => props.theme.space.xs};
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+`;
+const StyledCardNavigationCentralContent = import_ds_legacy_system.styled.div`
+  width: 273px;
+  display: flex;
+  @media (max-width: ${(props) => props.theme.breakpoints.small}) {
+    width: 336px;
+  }
+`;
+const StyledCardNavigationBoxWrapper = import_ds_legacy_system.styled.div`
+  width: 337px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);
+  border-radius: 2px;
+  position: relative;
+  outline: none;
+  ${(props) => props.fluid ? "width: 100%" : ""};
+  @media (max-width: ${(props) => props.theme.breakpoints.small}) {
+    width: ${(props) => props.fluid ? "width: 100%" : "414px"};
+  }
+  :after {
+    display: block;
+    content: '';
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    border: solid ${(props) => props.theme.space.xxs} transparent;
+    border-radius: 2px;
+    pointer-events: none;
+  }
+  &:hover,
+  &:focus {
+    box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);
+  }
+`;
+const StyledCardNavigationIcon = import_ds_legacy_system.styled.div`
+  width: 64px;
+  height: 64px;
+  background-color: #32aad1;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+  padding: ${(props) => props.theme.space.xxs};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  fill: #ffffff;
+  /* fill: color(neutral, 0); */
+  background-color: ${({ type }) => type === import_types.CardNavigationTypes.BORROWER && "#32aad1" || type === import_types.CardNavigationTypes.FINANCIAL && "#1ba88d" || type === import_types.CardNavigationTypes.LOAN && "#8e49b2" || type === import_types.CardNavigationTypes.REGULATORY && "#db5575"};
+`;
+const StyledCardNavigationActions = import_ds_legacy_system.styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-right: ${(props) => props.theme.space.xxs};
+`;
+const StyledCardNavigationAction = import_ds_legacy_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};
+    }
+  }
+`;
+//# sourceMappingURL=style.js.map

package/dist/cjs/style.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/style.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled } from '@elliemae/ds-legacy-system';\nimport { CardNavigationTypes } from './components/types.js';\n\nexport const StyledCardNavigationContentTitle = styled.div`\n  padding-top: ${(props) => props.theme.space.xxs};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 18px;\n  color: ${(props) => props.theme.colors.neutral['700']};\n`;\n\nexport const StyledCardNavigationContentDescription = styled.div`\n  color: ${(props) => props.theme.colors.neutral['500']};\n  font-size: 12px;\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled.div`\n  width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled.div`\n  padding-right: ${(props) => props.theme.space.xs};\n  padding-left: ${(props) => props.theme.space.xs};\n  display: flex;\n  align-items: center;\n  flex: 1;\n  overflow: hidden;\n`;\n\nexport const StyledCardNavigationCentralContent = styled.div`\n  width: 273px;\n  display: flex;\n  @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n    width: 336px;\n  }\n`;\n\nexport const StyledCardNavigationBoxWrapper = styled.div`\n  width: 337px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n  border-radius: 2px;\n  position: relative;\n  outline: none;\n  ${(props) => (props.fluid ? 'width: 100%' : '')};\n  @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n    width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n  }\n  :after {\n    display: block;\n    content: '';\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    left: 0;\n    border: solid ${(props) => props.theme.space.xxs} transparent;\n    border-radius: 2px;\n    pointer-events: none;\n  }\n  &:hover,\n  &:focus {\n    box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n  }\n`;\n\nexport const StyledCardNavigationIcon = styled.div`\n  width: 64px;\n  height: 64px;\n  background-color: #32aad1;\n  border-top-left-radius: 2px;\n  border-bottom-left-radius: 2px;\n  padding: ${(props) => props.theme.space.xxs};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  fill: #ffffff;\n  /* fill: color(neutral, 0); */\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`;\n\nexport const StyledCardNavigationActions = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-right: ${(props) => props.theme.space.xxs};\n`;\n\nexport const StyledCardNavigationAction = styled.div`\n  margin-left: ${(props) => props.theme.space.xxs};\n  span {\n    height: ${(props) => props.theme.space.s};\n    width: ${(props) => props.theme.space.s};\n    svg {\n      fill: ${(props) => props.theme.colors.neutral[500]};\n      height: ${(props) => props.theme.space.s};\n      width: ${(props) => props.theme.space.s};\n    }\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuB;AACvB,mBAAoC;AAE7B,MAAM,mCAAmC,+BAAO;AAAA,iBACtC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC7B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG/C,MAAM,yCAAyC,+BAAO;AAAA,WAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAI/C,MAAM,0CAA0C,+BAAO;AAAA;AAAA;AAIvD,MAAM,8BAA8B,+BAAO;AAAA,mBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,kBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,qCAAqC,+BAAO;AAAA;AAAA;AAAA,uBAGlC,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAKnD,MAAM,iCAAiC,+BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASjD,CAAC,UAAW,MAAM,QAAQ,gBAAgB;AAAA,uBACvB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,aAC7C,CAAC,UAAW,MAAM,QAAQ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAUnC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1C,MAAM,2BAA2B,+BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMlC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMpB,CAAC,EAAE,KAAK,MACzB,SAAS,iCAAoB,YAAY,aACzC,SAAS,iCAAoB,aAAa,aAC1C,SAAS,iCAAoB,QAAQ,aACrC,SAAS,iCAAoB,cAAc;AAAA;AAGzC,MAAM,8BAA8B,+BAAO;AAAA;AAAA;AAAA;AAAA,mBAI/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGzC,MAAM,6BAA6B,+BAAO;AAAA,iBAChC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,cAEhC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,aAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,cAE5B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,gBACvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,eAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/DSCardNavigation.js

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PropTypes, describe } from "@elliemae/ds-legacy-props-helpers";
+import { DSTruncatedTooltipText, TooltipTextProvider } from "@elliemae/ds-legacy-truncated-tooltip-text";
+import { MoreOptionsVert, LoanProducts } from "@elliemae/ds-legacy-icons";
+import { DSButtonV2, BUTTON_SIZES, BUTTON_TYPES } from "@elliemae/ds-legacy-button-v2";
+import {
+  StyledCardNavigationContentTitle,
+  StyledCardNavigationContentDescription,
+  StyledCardNavigationContentTitleWrapper,
+  StyledCardNavigationContent,
+  StyledCardNavigationCentralContent,
+  StyledCardNavigationBoxWrapper,
+  StyledCardNavigationIcon,
+  StyledCardNavigationAction,
+  StyledCardNavigationActions
+} from "./style.js";
+import { CardNavigationTypes, CardNavigationTypesValues } from "./components/types.js";
+const DSCardNavigation = ({ containerProps = {}, title = "", description = "", type, Icon, actions = [], ...rest }) => /* @__PURE__ */ jsx(TooltipTextProvider, { children: /* @__PURE__ */ jsxs(StyledCardNavigationBoxWrapper, { tabIndex: 0, ...rest, ...containerProps, children: [
+  /* @__PURE__ */ jsx(StyledCardNavigationIcon, { role: "button", "aria-label": title, type, children: /* @__PURE__ */ jsx(Icon, { size: "l", color: ["neutral", 0] }) }),
+  /* @__PURE__ */ jsxs(StyledCardNavigationCentralContent, { children: [
+    /* @__PURE__ */ jsx(StyledCardNavigationContent, { children: /* @__PURE__ */ jsxs(StyledCardNavigationContentTitleWrapper, { children: [
+      /* @__PURE__ */ jsx(StyledCardNavigationContentTitle, { children: /* @__PURE__ */ jsx(DSTruncatedTooltipText, { value: title }) }),
+      /* @__PURE__ */ jsx(StyledCardNavigationContentDescription, { children: /* @__PURE__ */ jsx(DSTruncatedTooltipText, { value: description, "data-testid": "ds-card-navigation--description" }) })
+    ] }) }),
+    actions.length > 0 && /* @__PURE__ */ jsx(StyledCardNavigationActions, { children: actions.map(({ icon = /* @__PURE__ */ jsx(MoreOptionsVert, { "aria-label": "More options" }), ...otherProps }, key) => /* @__PURE__ */ jsx(StyledCardNavigationAction, { children: /* @__PURE__ */ jsx(
+      DSButtonV2,
+      {
+        ...otherProps,
+        "aria-label": "More options",
+        buttonType: BUTTON_TYPES.ICON,
+        size: BUTTON_SIZES.L,
+        children: icon
+      }
+    ) }, key)) })
+  ] })
+] }) });
+DSCardNavigation.defaultProps = {
+  type: CardNavigationTypes.BORROWER,
+  Icon: LoanProducts
+};
+const props = {
+  /** props to inject to card navigation wrapper */
+  containerProps: PropTypes.object.description("props to inject to card navigation wrapper"),
+  /** card navigation title */
+  title: PropTypes.string.description("card navigation title"),
+  /** card navigation main icon */
+  Icon: PropTypes.func.description("card navigation main icon"),
+  /** card navigation description */
+  description: PropTypes.string.description("card navigation description"),
+  /** card navigation type */
+  type: PropTypes.oneOf(CardNavigationTypesValues).description("card navigation type"),
+  /** card navigation actions array */
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.element,
+      onClick: PropTypes.func
+    })
+  ).description("card navigation actions array")
+};
+DSCardNavigation.propTypes = props;
+DSCardNavigation.displayName = "DSCardNavigation";
+const DSCardNavigationWithSchema = describe(DSCardNavigation);
+DSCardNavigationWithSchema.propTypes = props;
+var DSCardNavigation_default = DSCardNavigation;
+export {
+  CardNavigationTypes,
+  CardNavigationTypesValues,
+  DSCardNavigation,
+  DSCardNavigationWithSchema,
+  DSCardNavigation_default as default
+};
+//# sourceMappingURL=DSCardNavigation.js.map

package/dist/esm/DSCardNavigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSCardNavigation.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-legacy-props-helpers';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-legacy-truncated-tooltip-text';\nimport { MoreOptionsVert, LoanProducts } from '@elliemae/ds-legacy-icons';\nimport { DSButtonV2, BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-legacy-button-v2';\nimport {\n  StyledCardNavigationContentTitle,\n  StyledCardNavigationContentDescription,\n  StyledCardNavigationContentTitleWrapper,\n  StyledCardNavigationContent,\n  StyledCardNavigationCentralContent,\n  StyledCardNavigationBoxWrapper,\n  StyledCardNavigationIcon,\n  StyledCardNavigationAction,\n  StyledCardNavigationActions,\n} from './style.js';\nimport { CardNavigationTypes, CardNavigationTypesValues } from './components/types.js';\n\nconst DSCardNavigation = ({ containerProps = {}, title = '', description = '', type, Icon, actions = [], ...rest }) => (\n  <TooltipTextProvider>\n    <StyledCardNavigationBoxWrapper tabIndex={0} {...rest} {...containerProps}>\n      <StyledCardNavigationIcon role=\"button\" aria-label={title} type={type}>\n        <Icon size=\"l\" color={['neutral', 0]} />\n      </StyledCardNavigationIcon>\n      <StyledCardNavigationCentralContent>\n        <StyledCardNavigationContent>\n          <StyledCardNavigationContentTitleWrapper>\n            <StyledCardNavigationContentTitle>\n              <DSTruncatedTooltipText value={title} />\n            </StyledCardNavigationContentTitle>\n            <StyledCardNavigationContentDescription>\n              <DSTruncatedTooltipText value={description} data-testid=\"ds-card-navigation--description\" />\n            </StyledCardNavigationContentDescription>\n          </StyledCardNavigationContentTitleWrapper>\n        </StyledCardNavigationContent>\n        {actions.length > 0 && (\n          <StyledCardNavigationActions>\n            {actions.map(({ icon = <MoreOptionsVert aria-label=\"More options\" />, ...otherProps }, key) => (\n              <StyledCardNavigationAction key={key}>\n                <DSButtonV2\n                  {...otherProps}\n                  aria-label=\"More options\"\n                  buttonType={BUTTON_TYPES.ICON}\n                  size={BUTTON_SIZES.L}\n                >\n                  {icon}\n                </DSButtonV2>\n              </StyledCardNavigationAction>\n            ))}\n          </StyledCardNavigationActions>\n        )}\n      </StyledCardNavigationCentralContent>\n    </StyledCardNavigationBoxWrapper>\n  </TooltipTextProvider>\n);\n\nDSCardNavigation.defaultProps = {\n  type: CardNavigationTypes.BORROWER,\n  Icon: LoanProducts,\n};\n\nconst props = {\n  /** props to inject to card navigation wrapper */\n  containerProps: PropTypes.object.description('props to inject to card navigation wrapper'),\n  /** card navigation title */\n  title: PropTypes.string.description('card navigation title'),\n  /** card navigation main icon */\n  Icon: PropTypes.func.description('card navigation main icon'),\n  /** card navigation description */\n  description: PropTypes.string.description('card navigation description'),\n  /** card navigation type */\n  type: PropTypes.oneOf(CardNavigationTypesValues).description('card navigation type'),\n  /** card navigation actions array */\n  actions: PropTypes.arrayOf(\n    PropTypes.shape({\n      icon: PropTypes.element,\n      onClick: PropTypes.func,\n    }),\n  ).description('card navigation actions array'),\n};\n\nDSCardNavigation.propTypes = props;\nDSCardNavigation.displayName = 'DSCardNavigation';\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = props;\n\nexport { CardNavigationTypes, CardNavigationTypesValues, DSCardNavigationWithSchema, DSCardNavigation };\n\nexport default DSCardNavigation;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsBf,cAIE,YAJF;AArBR,SAAS,WAAW,gBAAgB;AACpC,SAAS,wBAAwB,2BAA2B;AAC5D,SAAS,iBAAiB,oBAAoB;AAC9C,SAAS,YAAY,cAAc,oBAAoB;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,iCAAiC;AAE/D,MAAM,mBAAmB,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,cAAc,IAAI,MAAM,MAAM,UAAU,CAAC,GAAG,GAAG,KAAK,MAC/G,oBAAC,uBACC,+BAAC,kCAA+B,UAAU,GAAI,GAAG,MAAO,GAAG,gBACzD;AAAA,sBAAC,4BAAyB,MAAK,UAAS,cAAY,OAAO,MACzD,8BAAC,QAAK,MAAK,KAAI,OAAO,CAAC,WAAW,CAAC,GAAG,GACxC;AAAA,EACA,qBAAC,sCACC;AAAA,wBAAC,+BACC,+BAAC,2CACC;AAAA,0BAAC,oCACC,8BAAC,0BAAuB,OAAO,OAAO,GACxC;AAAA,MACA,oBAAC,0CACC,8BAAC,0BAAuB,OAAO,aAAa,eAAY,mCAAkC,GAC5F;AAAA,OACF,GACF;AAAA,IACC,QAAQ,SAAS,KAChB,oBAAC,+BACE,kBAAQ,IAAI,CAAC,EAAE,OAAO,oBAAC,mBAAgB,cAAW,gBAAe,GAAI,GAAG,WAAW,GAAG,QACrF,oBAAC,8BACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,cAAW;AAAA,QACX,YAAY,aAAa;AAAA,QACzB,MAAM,aAAa;AAAA,QAElB;AAAA;AAAA,IACH,KAR+B,GASjC,CACD,GACH;AAAA,KAEJ;AAAA,GACF,GACF;AAGF,iBAAiB,eAAe;AAAA,EAC9B,MAAM,oBAAoB;AAAA,EAC1B,MAAM;AACR;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,4CAA4C;AAAA;AAAA,EAEzF,OAAO,UAAU,OAAO,YAAY,uBAAuB;AAAA;AAAA,EAE3D,MAAM,UAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAE5D,aAAa,UAAU,OAAO,YAAY,6BAA6B;AAAA;AAAA,EAEvE,MAAM,UAAU,MAAM,yBAAyB,EAAE,YAAY,sBAAsB;AAAA;AAAA,EAEnF,SAAS,UAAU;AAAA,IACjB,UAAU,MAAM;AAAA,MACd,MAAM,UAAU;AAAA,MAChB,SAAS,UAAU;AAAA,IACrB,CAAC;AAAA,EACH,EAAE,YAAY,+BAA+B;AAC/C;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAIvC,IAAO,2BAAQ;",
+  "names": []
+}

package/dist/esm/components/types.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const CardNavigationTypes = {
+  BORROWER: "borrower",
+  FINANCIAL: "financial",
+  LOAN: "loan",
+  REGULATORY: "regulatory"
+};
+const CardNavigationTypesValues = Object.values(CardNavigationTypes);
+export {
+  CardNavigationTypes,
+  CardNavigationTypesValues
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/components/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/types.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const CardNavigationTypes = {\n  BORROWER: 'borrower',\n  FINANCIAL: 'financial',\n  LOAN: 'loan',\n  REGULATORY: 'regulatory',\n};\n\nexport const CardNavigationTypesValues = Object.values(CardNavigationTypes);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { default as default2 } from "./DSCardNavigation.js";
+export * from "./DSCardNavigation.js";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default } from './DSCardNavigation.js';\nexport * from './DSCardNavigation.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAAA,gBAAe;AACxB,cAAc;",
+  "names": ["default"]
+}

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/style.js

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { styled } from "@elliemae/ds-legacy-system";
+import { CardNavigationTypes } from "./components/types.js";
+const StyledCardNavigationContentTitle = styled.div`
+  padding-top: ${(props) => props.theme.space.xxs};
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  font-size: 18px;
+  color: ${(props) => props.theme.colors.neutral["700"]};
+`;
+const StyledCardNavigationContentDescription = styled.div`
+  color: ${(props) => props.theme.colors.neutral["500"]};
+  font-size: 12px;
+`;
+const StyledCardNavigationContentTitleWrapper = styled.div`
+  width: 100%;
+`;
+const StyledCardNavigationContent = styled.div`
+  padding-right: ${(props) => props.theme.space.xs};
+  padding-left: ${(props) => props.theme.space.xs};
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+`;
+const StyledCardNavigationCentralContent = styled.div`
+  width: 273px;
+  display: flex;
+  @media (max-width: ${(props) => props.theme.breakpoints.small}) {
+    width: 336px;
+  }
+`;
+const StyledCardNavigationBoxWrapper = styled.div`
+  width: 337px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);
+  border-radius: 2px;
+  position: relative;
+  outline: none;
+  ${(props) => props.fluid ? "width: 100%" : ""};
+  @media (max-width: ${(props) => props.theme.breakpoints.small}) {
+    width: ${(props) => props.fluid ? "width: 100%" : "414px"};
+  }
+  :after {
+    display: block;
+    content: '';
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    border: solid ${(props) => props.theme.space.xxs} transparent;
+    border-radius: 2px;
+    pointer-events: none;
+  }
+  &:hover,
+  &:focus {
+    box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);
+  }
+`;
+const StyledCardNavigationIcon = styled.div`
+  width: 64px;
+  height: 64px;
+  background-color: #32aad1;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+  padding: ${(props) => props.theme.space.xxs};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  fill: #ffffff;
+  /* fill: color(neutral, 0); */
+  background-color: ${({ type }) => type === CardNavigationTypes.BORROWER && "#32aad1" || type === CardNavigationTypes.FINANCIAL && "#1ba88d" || type === CardNavigationTypes.LOAN && "#8e49b2" || type === CardNavigationTypes.REGULATORY && "#db5575"};
+`;
+const StyledCardNavigationActions = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-right: ${(props) => props.theme.space.xxs};
+`;
+const StyledCardNavigationAction = styled.div`
+  margin-left: ${(props) => props.theme.space.xxs};
+  span {
+    height: ${(props) => props.theme.space.s};
+    width: ${(props) => props.theme.space.s};
+    svg {
+      fill: ${(props) => props.theme.colors.neutral[500]};
+      height: ${(props) => props.theme.space.s};
+      width: ${(props) => props.theme.space.s};
+    }
+  }
+`;
+export {
+  StyledCardNavigationAction,
+  StyledCardNavigationActions,
+  StyledCardNavigationBoxWrapper,
+  StyledCardNavigationCentralContent,
+  StyledCardNavigationContent,
+  StyledCardNavigationContentDescription,
+  StyledCardNavigationContentTitle,
+  StyledCardNavigationContentTitleWrapper,
+  StyledCardNavigationIcon
+};
+//# sourceMappingURL=style.js.map

package/dist/esm/style.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-legacy-system';\nimport { CardNavigationTypes } from './components/types.js';\n\nexport const StyledCardNavigationContentTitle = styled.div`\n  padding-top: ${(props) => props.theme.space.xxs};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 18px;\n  color: ${(props) => props.theme.colors.neutral['700']};\n`;\n\nexport const StyledCardNavigationContentDescription = styled.div`\n  color: ${(props) => props.theme.colors.neutral['500']};\n  font-size: 12px;\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled.div`\n  width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled.div`\n  padding-right: ${(props) => props.theme.space.xs};\n  padding-left: ${(props) => props.theme.space.xs};\n  display: flex;\n  align-items: center;\n  flex: 1;\n  overflow: hidden;\n`;\n\nexport const StyledCardNavigationCentralContent = styled.div`\n  width: 273px;\n  display: flex;\n  @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n    width: 336px;\n  }\n`;\n\nexport const StyledCardNavigationBoxWrapper = styled.div`\n  width: 337px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n  border-radius: 2px;\n  position: relative;\n  outline: none;\n  ${(props) => (props.fluid ? 'width: 100%' : '')};\n  @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n    width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n  }\n  :after {\n    display: block;\n    content: '';\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    left: 0;\n    border: solid ${(props) => props.theme.space.xxs} transparent;\n    border-radius: 2px;\n    pointer-events: none;\n  }\n  &:hover,\n  &:focus {\n    box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n  }\n`;\n\nexport const StyledCardNavigationIcon = styled.div`\n  width: 64px;\n  height: 64px;\n  background-color: #32aad1;\n  border-top-left-radius: 2px;\n  border-bottom-left-radius: 2px;\n  padding: ${(props) => props.theme.space.xxs};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  fill: #ffffff;\n  /* fill: color(neutral, 0); */\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`;\n\nexport const StyledCardNavigationActions = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-right: ${(props) => props.theme.space.xxs};\n`;\n\nexport const StyledCardNavigationAction = styled.div`\n  margin-left: ${(props) => props.theme.space.xxs};\n  span {\n    height: ${(props) => props.theme.space.s};\n    width: ${(props) => props.theme.space.s};\n    svg {\n      fill: ${(props) => props.theme.colors.neutral[500]};\n      height: ${(props) => props.theme.space.s};\n      width: ${(props) => props.theme.space.s};\n    }\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,2BAA2B;AAE7B,MAAM,mCAAmC,OAAO;AAAA,iBACtC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC7B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG/C,MAAM,yCAAyC,OAAO;AAAA,WAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAI/C,MAAM,0CAA0C,OAAO;AAAA;AAAA;AAIvD,MAAM,8BAA8B,OAAO;AAAA,mBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,kBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,qCAAqC,OAAO;AAAA;AAAA;AAAA,uBAGlC,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAKnD,MAAM,iCAAiC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASjD,CAAC,UAAW,MAAM,QAAQ,gBAAgB;AAAA,uBACvB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,aAC7C,CAAC,UAAW,MAAM,QAAQ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAUnC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1C,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMlC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMpB,CAAC,EAAE,KAAK,MACzB,SAAS,oBAAoB,YAAY,aACzC,SAAS,oBAAoB,aAAa,aAC1C,SAAS,oBAAoB,QAAQ,aACrC,SAAS,oBAAoB,cAAc;AAAA;AAGzC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,mBAI/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGzC,MAAM,6BAA6B,OAAO;AAAA,iBAChC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,cAEhC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,aAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,cAE5B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,gBACvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,eAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/types/DSCardNavigation.d.ts

@@ -0,0 +1,42 @@
+import { CardNavigationTypes, CardNavigationTypesValues } from './components/types.js';
+declare const DSCardNavigation: {
+    ({ containerProps, title, description, type, Icon, actions, ...rest }: {
+        [x: string]: any;
+        containerProps?: {} | undefined;
+        title?: string | undefined;
+        description?: string | undefined;
+        type: any;
+        Icon: any;
+        actions?: never[] | undefined;
+    }): import("react/jsx-runtime.js").JSX.Element;
+    defaultProps: {
+        type: string;
+        Icon: (rest: import("@elliemae/ds-legacy-icons").SvgIconT.Props) => import("react/jsx-runtime.js").JSX.Element;
+    };
+    propTypes: {
+        /** props to inject to card navigation wrapper */
+        containerProps: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /** card navigation title */
+        title: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /** card navigation main icon */
+        Icon: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /** card navigation description */
+        description: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /** card navigation type */
+        type: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /** card navigation actions array */
+        actions: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    };
+    displayName: string;
+};
+declare const DSCardNavigationWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
+    [x: string]: any;
+    containerProps?: {} | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    type: any;
+    Icon: any;
+    actions?: never[] | undefined;
+}>;
+export { CardNavigationTypes, CardNavigationTypesValues, DSCardNavigationWithSchema, DSCardNavigation };
+export default DSCardNavigation;

package/dist/types/components/types.d.ts

@@ -0,0 +1,7 @@
+export declare const CardNavigationTypes: {
+    BORROWER: string;
+    FINANCIAL: string;
+    LOAN: string;
+    REGULATORY: string;
+};
+export declare const CardNavigationTypesValues: string[];

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DSCardNavigation.js';
+export * from './DSCardNavigation.js';

package/dist/types/style.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledCardNavigationContentTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledCardNavigationContentDescription: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledCardNavigationContentTitleWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledCardNavigationContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledCardNavigationCentralContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledCardNavigationBoxWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledCardNavigationIcon: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledCardNavigationActions: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledCardNavigationAction: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;

package/dist/types/tests/DSCardNavigation.axe.test.d.ts

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

package/dist/types/tests/DSCardNavigation.test.d.ts

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

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@elliemae/ds-legacy-card-navigation",
+  "version": "1.0.0-rc.1",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Card Navigation",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./style": {
+      "import": "./dist/esm/style.js",
+      "require": "./dist/cjs/style.js"
+    },
+    "./DSCardNavigation": {
+      "import": "./dist/esm/DSCardNavigation.js",
+      "require": "./dist/cjs/DSCardNavigation.js"
+    },
+    "./components/types": {
+      "import": "./dist/esm/components/types.js",
+      "require": "./dist/cjs/components/types.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum-legacy.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "@elliemae/ds-legacy-button-v2": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-icons": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-props-helpers": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-system": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-truncated-tooltip-text": "1.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.31",
+    "@elliemae/pui-theme": "~2.7.0",
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-legacy-monorepo-devops": "1.0.0-rc.1"
+  },
+  "peerDependencies": {
+    "@elliemae/pui-theme": "^2.6.0",
+    "lodash": "^4.17.21",
+    "react": "~17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "~5.3.9"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "pui-cli test --passWithNoTests",
+    "lint": "node ../../../scripts/lint.mjs",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "dev:build": "pnpm --filter {.}... build",
+    "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}