@elliemae/ds-card-navigation 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/DSCardNavigation.js

@@ -1,87 +1,114 @@
-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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('react');
+var reactDesc = require('react-desc');
+var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var style = require('./style.js');
+var types = require('./components/types.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _MoreOptionsVert;
+
+const _excluded = ["containerProps", "title", "description", "type", "Icon", "actions"],
+      _excluded2 = ["icon"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DSCardNavigation = _ref => {
+  let {
+    containerProps = {},
+    title = '',
+    description = '',
+    type,
+    Icon,
+    actions = []
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.TooltipTextProvider, {}, void 0, /*#__PURE__*/jsxRuntime.jsxs(style.StyledCardNavigationBoxWrapper, _objectSpread(_objectSpread(_objectSpread({
+    role: "button",
+    tabIndex: 0
+  }, rest), containerProps), {}, {
+    children: [/*#__PURE__*/_jsx__default["default"](style.StyledCardNavigationIcon, {
+      type: type
+    }, void 0, /*#__PURE__*/_jsx__default["default"](Icon, {
+      size: "l"
+    })), /*#__PURE__*/_jsx__default["default"](style.StyledCardNavigationCentralContent, {}, void 0, /*#__PURE__*/_jsx__default["default"](style.StyledCardNavigationContent, {}, void 0, /*#__PURE__*/_jsx__default["default"](style.StyledCardNavigationContentTitleWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](style.StyledCardNavigationContentTitle, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.DSTruncatedTooltipText, {
+      value: title
+    })), /*#__PURE__*/_jsx__default["default"](style.StyledCardNavigationContentDescription, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.DSTruncatedTooltipText, {
+      value: description,
+      "data-testid": "ds-card-navigation--description"
+    })))), actions.length > 0 && /*#__PURE__*/_jsx__default["default"](style.StyledCardNavigationActions, {}, void 0, actions.map((_ref2, key) => {
+      let {
+        icon = _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {
+          "aria-label": "More options"
+        }))
+      } = _ref2,
+          otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded2);
+
+      return /*#__PURE__*/_jsx__default["default"](style.StyledCardNavigationAction, {}, key, /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({
+        icon: icon
+      }, otherProps), {}, {
+        buttonType: DSButton.BUTTON_TYPE.TEXT,
+        size: DSButton.BUTTON_SIZE.L
+      })));
+    })))]
+  })));
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSCardNavigation_exports = {};
-__export(DSCardNavigation_exports, {
-  CardNavigationTypes: () => import_types.CardNavigationTypes,
-  CardNavigationTypesValues: () => import_types.CardNavigationTypesValues,
-  DSCardNavigationWithSchema: () => DSCardNavigationWithSchema,
-  default: () => DSCardNavigation_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-var import_style = require("./style");
-var import_types = require("./components/types");
-const DSCardNavigation = ({ containerProps = {}, title = "", description = "", type, Icon, actions = [], ...rest }) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.TooltipTextProvider, null, /* @__PURE__ */ import_react.default.createElement(import_style.StyledCardNavigationBoxWrapper, {
-  role: "button",
-  tabIndex: 0,
-  ...rest,
-  ...containerProps
-}, /* @__PURE__ */ import_react.default.createElement(import_style.StyledCardNavigationIcon, {
-  type
-}, /* @__PURE__ */ import_react.default.createElement(Icon, {
-  size: "l"
-})), /* @__PURE__ */ import_react.default.createElement(import_style.StyledCardNavigationCentralContent, null, /* @__PURE__ */ import_react.default.createElement(import_style.StyledCardNavigationContent, null, /* @__PURE__ */ import_react.default.createElement(import_style.StyledCardNavigationContentTitleWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_style.StyledCardNavigationContentTitle, null, /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, {
-  value: title
-})), /* @__PURE__ */ import_react.default.createElement(import_style.StyledCardNavigationContentDescription, null, /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, {
-  value: description,
-  "data-testid": "ds-card-navigation--description"
-})))), actions.length > 0 && /* @__PURE__ */ import_react.default.createElement(import_style.StyledCardNavigationActions, null, actions.map(({ icon = /* @__PURE__ */ import_react.default.createElement(import_ds_icons.MoreOptionsVert, {
-  "aria-label": "More options"
-}), ...otherProps }, key) => /* @__PURE__ */ import_react.default.createElement(import_style.StyledCardNavigationAction, {
-  key
-}, /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
-  icon,
-  ...otherProps,
-  buttonType: import_ds_button.BUTTON_TYPE.TEXT,
-  size: import_ds_button.BUTTON_SIZE.L
-})))))));
+
 DSCardNavigation.defaultProps = {
-  type: import_types.CardNavigationTypes.BORROWER,
-  Icon: import_ds_icons.LoanProducts
+  type: types.CardNavigationTypes.BORROWER,
+  Icon: dsIcons.LoanProducts
 };
 const props = {
-  containerProps: import_react_desc.PropTypes.object.description("props to inject to card navigation wrapper"),
-  title: import_react_desc.PropTypes.string.description("card navigation title"),
-  Icon: import_react_desc.PropTypes.node.description("card navigation main icon"),
-  description: import_react_desc.PropTypes.string.description("card navigation description"),
-  type: import_react_desc.PropTypes.oneOf(import_types.CardNavigationTypesValues).description("card navigation type"),
-  actions: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.shape({
-    icon: import_react_desc.PropTypes.element,
-    onClick: import_react_desc.PropTypes.func
-  })).description("card navigation actions array")
+  /** props to inject to card navigation wrapper */
+  containerProps: reactDesc.PropTypes.object.description('props to inject to card navigation wrapper'),
+
+  /** card navigation title */
+  title: reactDesc.PropTypes.string.description('card navigation title'),
+
+  /** card navigation main icon */
+  Icon: reactDesc.PropTypes.node.description('card navigation main icon'),
+
+  /** card navigation description */
+  description: reactDesc.PropTypes.string.description('card navigation description'),
+
+  /** card navigation type */
+  type: reactDesc.PropTypes.oneOf(types.CardNavigationTypesValues).description('card navigation type'),
+
+  /** card navigation actions array */
+  actions: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
+    icon: reactDesc.PropTypes.element,
+    onClick: reactDesc.PropTypes.func
+  })).description('card navigation actions array')
 };
-DSCardNavigation.propTypes = props;
-const DSCardNavigationWithSchema = (0, import_react_desc.describe)(DSCardNavigation);
+const DSCardNavigationWithSchema = reactDesc.describe(DSCardNavigation);
 DSCardNavigationWithSchema.propTypes = props;
-var DSCardNavigation_default = DSCardNavigation;
-module.exports = __toCommonJS(DSCardNavigation_exports);
-//# sourceMappingURL=DSCardNavigation.js.map
+
+exports.CardNavigationTypes = types.CardNavigationTypes;
+exports.CardNavigationTypesValues = types.CardNavigationTypesValues;
+exports.DSCardNavigationWithSchema = DSCardNavigationWithSchema;
+exports["default"] = DSCardNavigation;

package/cjs/components/types.js

@@ -1,42 +1,14 @@
-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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var types_exports = {};
-__export(types_exports, {
-  CardNavigationTypes: () => CardNavigationTypes,
-  CardNavigationTypesValues: () => CardNavigationTypesValues
-});
-var React = __toESM(require("react"));
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
 const CardNavigationTypes = {
-  BORROWER: "borrower",
-  FINANCIAL: "financial",
-  LOAN: "loan",
-  REGULATORY: "regulatory"
+  BORROWER: 'borrower',
+  FINANCIAL: 'financial',
+  LOAN: 'loan',
+  REGULATORY: 'regulatory'
 };
 const CardNavigationTypesValues = Object.values(CardNavigationTypes);
-module.exports = __toCommonJS(types_exports);
-//# sourceMappingURL=types.js.map
+
+exports.CardNavigationTypes = CardNavigationTypes;
+exports.CardNavigationTypesValues = CardNavigationTypesValues;

package/cjs/index.js

@@ -1,36 +1,13 @@
-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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var src_exports = {};
-__export(src_exports, {
-  default: () => import_DSCardNavigation.default
-});
-var React = __toESM(require("react"));
-var import_DSCardNavigation = require("./DSCardNavigation");
-__reExport(src_exports, require("./DSCardNavigation"));
-module.exports = __toCommonJS(src_exports);
-//# sourceMappingURL=index.js.map
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSCardNavigation = require('./DSCardNavigation.js');
+var types = require('./components/types.js');
+
+
+
+exports.DSCardNavigationWithSchema = DSCardNavigation.DSCardNavigationWithSchema;
+exports["default"] = DSCardNavigation["default"];
+exports.CardNavigationTypes = types.CardNavigationTypes;
+exports.CardNavigationTypesValues = types.CardNavigationTypesValues;

package/cjs/style.js

@@ -1,134 +1,53 @@
-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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var style_exports = {};
-__export(style_exports, {
-  StyledCardNavigationAction: () => StyledCardNavigationAction,
-  StyledCardNavigationActions: () => StyledCardNavigationActions,
-  StyledCardNavigationBoxWrapper: () => StyledCardNavigationBoxWrapper,
-  StyledCardNavigationCentralContent: () => StyledCardNavigationCentralContent,
-  StyledCardNavigationContent: () => StyledCardNavigationContent,
-  StyledCardNavigationContentDescription: () => StyledCardNavigationContentDescription,
-  StyledCardNavigationContentTitle: () => StyledCardNavigationContentTitle,
-  StyledCardNavigationContentTitleWrapper: () => StyledCardNavigationContentTitleWrapper,
-  StyledCardNavigationIcon: () => StyledCardNavigationIcon
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var types = require('./components/types.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledCardNavigationContentTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-jb13pp-0"
+})(["padding-top:", ";font-weight:", ";font-size:18px;color:", ";"], props => props.theme.space.xxs, props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['700']);
+const StyledCardNavigationContentDescription = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-jb13pp-1"
+})(["color:", ";font-size:12px;"], props => props.theme.colors.neutral['500']);
+const StyledCardNavigationContentTitleWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-jb13pp-2"
+})(["width:100%;"]);
+const StyledCardNavigationContent = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-jb13pp-3"
+})(["padding-right:", ";padding-left:", ";display:flex;align-items:center;flex:1;overflow:hidden;"], props => props.theme.space.xs, props => props.theme.space.xs);
+const StyledCardNavigationCentralContent = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-jb13pp-4"
+})(["width:273px;display:flex;@media (max-width:", "){width:336px;}"], props => props.theme.breakpoints.small);
+const StyledCardNavigationBoxWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-jb13pp-5"
+})(["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;", ";@media (max-width:", "){width:", ";}:after{display:block;content:'';position:absolute;height:100%;width:100%;top:0;left:0;border:solid ", " transparent;border-radius:2px;pointer-events:none;}&:hover,&:focus{box-shadow:0 3px 8px 0px rgba(37,41,47,0.4);}"], props => props.fluid ? 'width: 100%' : '', props => props.theme.breakpoints.small, props => props.fluid ? 'width: 100%' : '414px', props => props.theme.space.xxs);
+const StyledCardNavigationIcon = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-jb13pp-6"
+})(["width:64px;height:64px;background-color:#32aad1;border-top-left-radius:2px;border-bottom-left-radius:2px;padding:", ";display:flex;align-items:center;justify-content:center;fill:#ffffff;background-color:", ";"], props => props.theme.space.xxs, _ref => {
+  let {
+    type
+  } = _ref;
+  return type === types.CardNavigationTypes.BORROWER && '#32aad1' || type === types.CardNavigationTypes.FINANCIAL && '#1ba88d' || type === types.CardNavigationTypes.LOAN && '#8e49b2' || type === types.CardNavigationTypes.REGULATORY && '#db5575';
 });
-var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_types = require("./components/types");
-const StyledCardNavigationContentTitle = import_styled_components.default.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_styled_components.default.div`
-  color: ${(props) => props.theme.colors.neutral["500"]};
-  font-size: 12px;
-`;
-const StyledCardNavigationContentTitleWrapper = import_styled_components.default.div`
-  width: 100%;
-`;
-const StyledCardNavigationContent = import_styled_components.default.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_styled_components.default.div`
-  width: 273px;
-  display: flex;
-  @media (max-width: ${(props) => props.theme.breakpoints.small}) {
-    width: 336px;
-  }
-`;
-const StyledCardNavigationBoxWrapper = import_styled_components.default.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_styled_components.default.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_styled_components.default.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-right: ${(props) => props.theme.space.xxs};
-`;
-const StyledCardNavigationAction = import_styled_components.default.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};
-    }
-  }
-`;
-module.exports = __toCommonJS(style_exports);
-//# sourceMappingURL=style.js.map
+const StyledCardNavigationActions = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-jb13pp-7"
+})(["display:flex;flex-direction:row;align-items:center;padding-right:", ";"], props => props.theme.space.xxs);
+const StyledCardNavigationAction = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-jb13pp-8"
+})(["margin-left:", ";span{height:", ";width:", ";svg{fill:", ";height:", ";width:", ";}}"], props => props.theme.space.xxs, props => props.theme.space.s, props => props.theme.space.s, props => props.theme.colors.neutral[500], props => props.theme.space.s, props => props.theme.space.s);
+
+exports.StyledCardNavigationAction = StyledCardNavigationAction;
+exports.StyledCardNavigationActions = StyledCardNavigationActions;
+exports.StyledCardNavigationBoxWrapper = StyledCardNavigationBoxWrapper;
+exports.StyledCardNavigationCentralContent = StyledCardNavigationCentralContent;
+exports.StyledCardNavigationContent = StyledCardNavigationContent;
+exports.StyledCardNavigationContentDescription = StyledCardNavigationContentDescription;
+exports.StyledCardNavigationContentTitle = StyledCardNavigationContentTitle;
+exports.StyledCardNavigationContentTitleWrapper = StyledCardNavigationContentTitleWrapper;
+exports.StyledCardNavigationIcon = StyledCardNavigationIcon;

package/esm/DSCardNavigation.js

@@ -1,68 +1,101 @@
-import * as React from "react";
-import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-import { DSTruncatedTooltipText, TooltipTextProvider } from "@elliemae/ds-truncated-tooltip-text";
-import { MoreOptionsVert, LoanProducts } from "@elliemae/ds-icons";
-import DSButton, { BUTTON_SIZE, BUTTON_TYPE } from "@elliemae/ds-button";
-import {
-  StyledCardNavigationContentTitle,
-  StyledCardNavigationContentDescription,
-  StyledCardNavigationContentTitleWrapper,
-  StyledCardNavigationContent,
-  StyledCardNavigationCentralContent,
-  StyledCardNavigationBoxWrapper,
-  StyledCardNavigationIcon,
-  StyledCardNavigationAction,
-  StyledCardNavigationActions
-} from "./style";
-import { CardNavigationTypes, CardNavigationTypesValues } from "./components/types";
-const DSCardNavigation = ({ containerProps = {}, title = "", description = "", type, Icon, actions = [], ...rest }) => /* @__PURE__ */ React2.createElement(TooltipTextProvider, null, /* @__PURE__ */ React2.createElement(StyledCardNavigationBoxWrapper, {
-  role: "button",
-  tabIndex: 0,
-  ...rest,
-  ...containerProps
-}, /* @__PURE__ */ React2.createElement(StyledCardNavigationIcon, {
-  type
-}, /* @__PURE__ */ React2.createElement(Icon, {
-  size: "l"
-})), /* @__PURE__ */ React2.createElement(StyledCardNavigationCentralContent, null, /* @__PURE__ */ React2.createElement(StyledCardNavigationContent, null, /* @__PURE__ */ React2.createElement(StyledCardNavigationContentTitleWrapper, null, /* @__PURE__ */ React2.createElement(StyledCardNavigationContentTitle, null, /* @__PURE__ */ React2.createElement(DSTruncatedTooltipText, {
-  value: title
-})), /* @__PURE__ */ React2.createElement(StyledCardNavigationContentDescription, null, /* @__PURE__ */ React2.createElement(DSTruncatedTooltipText, {
-  value: description,
-  "data-testid": "ds-card-navigation--description"
-})))), actions.length > 0 && /* @__PURE__ */ React2.createElement(StyledCardNavigationActions, null, actions.map(({ icon = /* @__PURE__ */ React2.createElement(MoreOptionsVert, {
-  "aria-label": "More options"
-}), ...otherProps }, key) => /* @__PURE__ */ React2.createElement(StyledCardNavigationAction, {
-  key
-}, /* @__PURE__ */ React2.createElement(DSButton, {
-  icon,
-  ...otherProps,
-  buttonType: BUTTON_TYPE.TEXT,
-  size: BUTTON_SIZE.L
-})))))));
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { TooltipTextProvider, DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { LoanProducts, MoreOptionsVert } from '@elliemae/ds-icons';
+import DSButton, { BUTTON_TYPE, BUTTON_SIZE } from '@elliemae/ds-button';
+import { StyledCardNavigationBoxWrapper, StyledCardNavigationIcon, StyledCardNavigationCentralContent, StyledCardNavigationContent, StyledCardNavigationContentTitleWrapper, StyledCardNavigationContentTitle, StyledCardNavigationContentDescription, StyledCardNavigationActions, StyledCardNavigationAction } from './style.js';
+import { CardNavigationTypes, CardNavigationTypesValues } from './components/types.js';
+export { CardNavigationTypes, CardNavigationTypesValues } from './components/types.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _MoreOptionsVert;
+
+const _excluded = ["containerProps", "title", "description", "type", "Icon", "actions"],
+      _excluded2 = ["icon"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DSCardNavigation = _ref => {
+  let {
+    containerProps = {},
+    title = '',
+    description = '',
+    type,
+    Icon,
+    actions = []
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsx(TooltipTextProvider, {}, void 0, /*#__PURE__*/jsxs(StyledCardNavigationBoxWrapper, _objectSpread(_objectSpread(_objectSpread({
+    role: "button",
+    tabIndex: 0
+  }, rest), containerProps), {}, {
+    children: [/*#__PURE__*/_jsx(StyledCardNavigationIcon, {
+      type: type
+    }, void 0, /*#__PURE__*/_jsx(Icon, {
+      size: "l"
+    })), /*#__PURE__*/_jsx(StyledCardNavigationCentralContent, {}, void 0, /*#__PURE__*/_jsx(StyledCardNavigationContent, {}, void 0, /*#__PURE__*/_jsx(StyledCardNavigationContentTitleWrapper, {}, void 0, /*#__PURE__*/_jsx(StyledCardNavigationContentTitle, {}, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+      value: title
+    })), /*#__PURE__*/_jsx(StyledCardNavigationContentDescription, {}, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+      value: description,
+      "data-testid": "ds-card-navigation--description"
+    })))), actions.length > 0 && /*#__PURE__*/_jsx(StyledCardNavigationActions, {}, void 0, actions.map((_ref2, key) => {
+      let {
+        icon = _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx(MoreOptionsVert, {
+          "aria-label": "More options"
+        }))
+      } = _ref2,
+          otherProps = _objectWithoutProperties(_ref2, _excluded2);
+
+      return /*#__PURE__*/_jsx(StyledCardNavigationAction, {}, key, /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({
+        icon: icon
+      }, otherProps), {}, {
+        buttonType: BUTTON_TYPE.TEXT,
+        size: BUTTON_SIZE.L
+      })));
+    })))]
+  })));
+};
+
 DSCardNavigation.defaultProps = {
   type: CardNavigationTypes.BORROWER,
   Icon: LoanProducts
 };
 const props = {
-  containerProps: PropTypes.object.description("props to inject to card navigation wrapper"),
-  title: PropTypes.string.description("card navigation title"),
-  Icon: PropTypes.node.description("card navigation main icon"),
-  description: PropTypes.string.description("card navigation description"),
-  type: PropTypes.oneOf(CardNavigationTypesValues).description("card navigation type"),
+  /** 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.node.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")
+  })).description('card navigation actions array')
 };
-DSCardNavigation.propTypes = props;
 const DSCardNavigationWithSchema = describe(DSCardNavigation);
 DSCardNavigationWithSchema.propTypes = props;
-var DSCardNavigation_default = DSCardNavigation;
-export {
-  CardNavigationTypes,
-  CardNavigationTypesValues,
-  DSCardNavigationWithSchema,
-  DSCardNavigation_default as default
-};
-//# sourceMappingURL=DSCardNavigation.js.map
+
+export { DSCardNavigationWithSchema, DSCardNavigation as default };

package/esm/components/types.js

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

package/esm/index.js

@@ -1,7 +1,2 @@
-import * as React from "react";
-import { default as default2 } from "./DSCardNavigation";
-export * from "./DSCardNavigation";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export { DSCardNavigationWithSchema, default } from './DSCardNavigation.js';
+export { CardNavigationTypes, CardNavigationTypesValues } from './components/types.js';

package/esm/style.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-card-navigation",
-  "version": "2.2.0-alpha.4",
+  "version": "3.0.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Card Navigation",
   "module": "./esm/index.js",
@@ -44,23 +44,23 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0-alpha.4",
-    "@elliemae/ds-icons": "2.2.0-alpha.4",
-    "@elliemae/ds-truncated-tooltip-text": "2.2.0-alpha.4",
+    "@elliemae/ds-button": "3.0.0-next.2",
+    "@elliemae/ds-icons": "3.0.0-next.2",
+    "@elliemae/ds-truncated-tooltip-text": "3.0.0-next.2",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "@elliemae/pui-theme": "~2.3.0",
+    "@elliemae/pui-theme": "~2.2.5",
     "@testing-library/jest-dom": "~5.15.0",
     "@testing-library/react": "~12.1.2",
-    "styled-components": "~5.3.3"
+    "styled-components": "~5.3.0"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "^2.3.0",
+    "@elliemae/pui-theme": "^2.2.5",
     "lodash": "^4.17.21",
     "react": "~17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.0"
   },
   "publishConfig": {
     "access": "public",

package/cjs/DSCardNavigation.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DSCardNavigation.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { MoreOptionsVert, LoanProducts } from '@elliemae/ds-icons';\nimport DSButton, { BUTTON_SIZE, BUTTON_TYPE } from '@elliemae/ds-button';\nimport {\n  StyledCardNavigationContentTitle,\n  StyledCardNavigationContentDescription,\n  StyledCardNavigationContentTitleWrapper,\n  StyledCardNavigationContent,\n  StyledCardNavigationCentralContent,\n  StyledCardNavigationBoxWrapper,\n  StyledCardNavigationIcon,\n  StyledCardNavigationAction,\n  StyledCardNavigationActions,\n} from './style';\nimport { CardNavigationTypes, CardNavigationTypesValues } from './components/types';\n\nconst DSCardNavigation = ({ containerProps = {}, title = '', description = '', type, Icon, actions = [], ...rest }) => (\n  <TooltipTextProvider>\n    <StyledCardNavigationBoxWrapper role=\"button\" tabIndex={0} {...rest} {...containerProps}>\n      <StyledCardNavigationIcon type={type}>\n        <Icon size=\"l\" />\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                <DSButton icon={icon} {...otherProps} buttonType={BUTTON_TYPE.TEXT} size={BUTTON_SIZE.L} />\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.node.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;\n\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = props;\n\nexport { CardNavigationTypes, CardNavigationTypesValues, DSCardNavigationWithSchema };\n\nexport default DSCardNavigation;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,uCAA4D;AAC5D,sBAA8C;AAC9C,uBAAmD;AACnD,mBAUO;AACP,mBAA+D;AAE/D,MAAM,mBAAmB,CAAC,EAAE,iBAAiB,IAAI,QAAQ,IAAI,cAAc,IAAI,MAAM,MAAM,UAAU,OAAO,WAC1G,mDAAC,sDAAD,MACE,mDAAC,6CAAD;AAAA,EAAgC,MAAK;AAAA,EAAS,UAAU;AAAA,KAAO;AAAA,KAAU;AAAA,GACvE,mDAAC,uCAAD;AAAA,EAA0B;AAAA,GACxB,mDAAC,MAAD;AAAA,EAAM,MAAK;AAAA,KAEb,mDAAC,iDAAD,MACE,mDAAC,0CAAD,MACE,mDAAC,sDAAD,MACE,mDAAC,+CAAD,MACE,mDAAC,yDAAD;AAAA,EAAwB,OAAO;AAAA,KAEjC,mDAAC,qDAAD,MACE,mDAAC,yDAAD;AAAA,EAAwB,OAAO;AAAA,EAAa,eAAY;AAAA,OAI7D,QAAQ,SAAS,KAChB,mDAAC,0CAAD,MACG,QAAQ,IAAI,CAAC,EAAE,OAAO,mDAAC,iCAAD;AAAA,EAAiB,cAAW;AAAA,OAAsB,cAAc,QACrF,mDAAC,yCAAD;AAAA,EAA4B;AAAA,GAC1B,mDAAC,0BAAD;AAAA,EAAU;AAAA,KAAgB;AAAA,EAAY,YAAY,6BAAY;AAAA,EAAM,MAAM,6BAAY;AAAA;AAUtG,iBAAiB,eAAe;AAAA,EAC9B,MAAM,iCAAoB;AAAA,EAC1B,MAAM;AAAA;AAGR,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAE7C,OAAO,4BAAU,OAAO,YAAY;AAAA,EAEpC,MAAM,4BAAU,KAAK,YAAY;AAAA,EAEjC,aAAa,4BAAU,OAAO,YAAY;AAAA,EAE1C,MAAM,4BAAU,MAAM,wCAA2B,YAAY;AAAA,EAE7D,SAAS,4BAAU,QACjB,4BAAU,MAAM;AAAA,IACd,MAAM,4BAAU;AAAA,IAChB,SAAS,4BAAU;AAAA,MAErB,YAAY;AAAA;AAGhB,iBAAiB,YAAY;AAE7B,MAAM,6BAA6B,gCAAS;AAC5C,2BAA2B,YAAY;AAIvC,IAAO,2BAAQ;",
-  "names": []
-}

package/cjs/components/types.js.map

@@ -1,7 +0,0 @@
-{
-  "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;ACAA,YAAuB;ADAhB,MAAM,sBAAsB;AAAA,EACjC,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AAAA;AAGP,MAAM,4BAA4B,OAAO,OAAO;",
-  "names": []
-}

package/cjs/index.js.map

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

package/cjs/style.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/style.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import styled from 'styled-components';\nimport { CardNavigationTypes } from './components/types';\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;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,mBAAoC;AAE7B,MAAM,mCAAmC,iCAAO;AAAA,iBACtC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC7B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,yCAAyC,iCAAO;AAAA,WAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1C,MAAM,0CAA0C,iCAAO;AAAA;AAAA;AAIvD,MAAM,8BAA8B,iCAAO;AAAA,mBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,kBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,qCAAqC,iCAAO;AAAA;AAAA;AAAA,uBAGlC,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAKnD,MAAM,iCAAiC,iCAAO;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,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMlC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMpB,CAAC,EAAE,WACpB,SAAS,iCAAoB,YAAY,aACzC,SAAS,iCAAoB,aAAa,aAC1C,SAAS,iCAAoB,QAAQ,aACrC,SAAS,iCAAoB,cAAc;AAAA;AAGzC,MAAM,8BAA8B,iCAAO;AAAA;AAAA;AAAA;AAAA,mBAI/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGzC,MAAM,6BAA6B,iCAAO;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;AAAA,gBACpC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,eAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;",
-  "names": []
-}

package/esm/DSCardNavigation.js.map

@@ -1,7 +0,0 @@
-{
-  "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 'react-desc';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { MoreOptionsVert, LoanProducts } from '@elliemae/ds-icons';\nimport DSButton, { BUTTON_SIZE, BUTTON_TYPE } from '@elliemae/ds-button';\nimport {\n  StyledCardNavigationContentTitle,\n  StyledCardNavigationContentDescription,\n  StyledCardNavigationContentTitleWrapper,\n  StyledCardNavigationContent,\n  StyledCardNavigationCentralContent,\n  StyledCardNavigationBoxWrapper,\n  StyledCardNavigationIcon,\n  StyledCardNavigationAction,\n  StyledCardNavigationActions,\n} from './style';\nimport { CardNavigationTypes, CardNavigationTypesValues } from './components/types';\n\nconst DSCardNavigation = ({ containerProps = {}, title = '', description = '', type, Icon, actions = [], ...rest }) => (\n  <TooltipTextProvider>\n    <StyledCardNavigationBoxWrapper role=\"button\" tabIndex={0} {...rest} {...containerProps}>\n      <StyledCardNavigationIcon type={type}>\n        <Icon size=\"l\" />\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                <DSButton icon={icon} {...otherProps} buttonType={BUTTON_TYPE.TEXT} size={BUTTON_SIZE.L} />\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.node.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;\n\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = props;\n\nexport { CardNavigationTypes, CardNavigationTypesValues, DSCardNavigationWithSchema };\n\nexport default DSCardNavigation;\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AAEA,MAAM,mBAAmB,CAAC,EAAE,iBAAiB,IAAI,QAAQ,IAAI,cAAc,IAAI,MAAM,MAAM,UAAU,OAAO,WAC1G,qCAAC,qBAAD,MACE,qCAAC,gCAAD;AAAA,EAAgC,MAAK;AAAA,EAAS,UAAU;AAAA,KAAO;AAAA,KAAU;AAAA,GACvE,qCAAC,0BAAD;AAAA,EAA0B;AAAA,GACxB,qCAAC,MAAD;AAAA,EAAM,MAAK;AAAA,KAEb,qCAAC,oCAAD,MACE,qCAAC,6BAAD,MACE,qCAAC,yCAAD,MACE,qCAAC,kCAAD,MACE,qCAAC,wBAAD;AAAA,EAAwB,OAAO;AAAA,KAEjC,qCAAC,wCAAD,MACE,qCAAC,wBAAD;AAAA,EAAwB,OAAO;AAAA,EAAa,eAAY;AAAA,OAI7D,QAAQ,SAAS,KAChB,qCAAC,6BAAD,MACG,QAAQ,IAAI,CAAC,EAAE,OAAO,qCAAC,iBAAD;AAAA,EAAiB,cAAW;AAAA,OAAsB,cAAc,QACrF,qCAAC,4BAAD;AAAA,EAA4B;AAAA,GAC1B,qCAAC,UAAD;AAAA,EAAU;AAAA,KAAgB;AAAA,EAAY,YAAY,YAAY;AAAA,EAAM,MAAM,YAAY;AAAA;AAUtG,iBAAiB,eAAe;AAAA,EAC9B,MAAM,oBAAoB;AAAA,EAC1B,MAAM;AAAA;AAGR,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAE7C,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,MAAM,UAAU,KAAK,YAAY;AAAA,EAEjC,aAAa,UAAU,OAAO,YAAY;AAAA,EAE1C,MAAM,UAAU,MAAM,2BAA2B,YAAY;AAAA,EAE7D,SAAS,UAAU,QACjB,UAAU,MAAM;AAAA,IACd,MAAM,UAAU;AAAA,IAChB,SAAS,UAAU;AAAA,MAErB,YAAY;AAAA;AAGhB,iBAAiB,YAAY;AAE7B,MAAM,6BAA6B,SAAS;AAC5C,2BAA2B,YAAY;AAIvC,IAAO,2BAAQ;",
-  "names": []
-}

package/esm/components/types.js.map

@@ -1,7 +0,0 @@
-{
-  "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;ACAO,MAAM,sBAAsB;AAAA,EACjC,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AAAA;AAGP,MAAM,4BAA4B,OAAO,OAAO;",
-  "names": []
-}

package/esm/index.js.map

@@ -1,7 +0,0 @@
-{
-  "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';\nexport * from './DSCardNavigation';\n"],
-  "mappings": "AAAA;ACAA;AACA;",
-  "names": []
-}

package/esm/style.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { CardNavigationTypes } from './components/types';\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;ACAA;AACA;AAEO,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;AAAA;AAG1C,MAAM,yCAAyC,OAAO;AAAA,WAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1C,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,WACpB,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;AAAA,gBACpC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,eAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;",
-  "names": []
-}