@elliemae/ds-card 2.1.0 → 2.2.0-alpha.3

package/cjs/detail/DetailCard.js

@@ -1,200 +1,156 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var lodash = require('lodash');
-var reactDesc = require('react-desc');
-var dsIcons = require('@elliemae/ds-icons');
-var dsSystem = require('@elliemae/ds-system');
-var DSButton = require('@elliemae/ds-button');
-var DSSeparator = require('@elliemae/ds-separator');
-var dsGrid = require('@elliemae/ds-grid');
-var dsForm = require('@elliemae/ds-form');
-var styled = require('./styled.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
-
-var _Grid, _DSSeparator;
-
-const DetailCard = _ref => {
-  let {
-    title,
-    description,
-    descriptionColor = 'neutral',
-    rightValue,
-    rightDescription,
-    rightAddon,
-    // select props
-    selectable = false,
-    isSelected = false,
-    onSelect = lodash.noop,
-    // expand props
-    expandable = false,
-    isExpanded = false,
-    onExpand = lodash.noop,
-    expandContent,
-    // state props
-    readOnly = false,
-    disabled = false
-  } = _ref;
-  const theme = dsSystem.useTheme();
+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 DetailCard_exports = {};
+__export(DetailCard_exports, {
+  DSCardDetailWithSchema: () => DSCardDetailWithSchema,
+  DetailCard: () => DetailCard,
+  default: () => DetailCard_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_lodash = __toESM(require("lodash"));
+var import_react_desc = __toESM(require("react-desc"));
+var import_ds_icons = __toESM(require("@elliemae/ds-icons"));
+var import_ds_system = __toESM(require("@elliemae/ds-system"));
+var import_ds_button = __toESM(require("@elliemae/ds-button"));
+var import_ds_separator = __toESM(require("@elliemae/ds-separator"));
+var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
+var import_ds_form = __toESM(require("@elliemae/ds-form"));
+var import_styled = __toESM(require("./styled"));
+const DetailCard = ({
+  title,
+  description,
+  descriptionColor = "neutral",
+  rightValue,
+  rightDescription,
+  rightAddon,
+  selectable = false,
+  isSelected = false,
+  onSelect = import_lodash.noop,
+  expandable = false,
+  isExpanded = false,
+  onExpand = import_lodash.noop,
+  expandContent,
+  readOnly = false,
+  disabled = false
+}) => {
+  const theme = (0, import_ds_system.useTheme)();
   const hasRightLegend = rightValue && rightDescription;
   const hasRightPosition = hasRightLegend || rightAddon;
-  const topWrapperCols = ['1fr'];
-  if (hasRightPosition) topWrapperCols.push('auto');
-  if (expandable) topWrapperCols.unshift('20px');
-  if (selectable) topWrapperCols.unshift(theme.space.s);
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /*#__PURE__*/_jsx__default["default"](styled.Container, {
-      disabled: disabled || readOnly,
-      active: selectable && isSelected,
-      "data-testid": "card-detail-container"
-    }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-      cols: topWrapperCols,
-      alignItems: !description && 'center'
-    }, void 0, selectable && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-      pt: description && '9px'
-    }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
-      checked: isSelected,
-      onChange: onSelect,
-      readOnly: readOnly,
-      disabled: disabled,
-      "data-testid": "card-checkbox"
-    })), expandable && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-      height: "16px",
-      pt: description && 'xxs',
-      mt: !description && '-5px'
-    }, void 0, /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
-      size: "s",
-      buttonType: "text",
-      containerProps: {
-        'data-testid': 'expand-button'
-      },
-      onClick: onExpand,
-      icon: isExpanded ? /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
-        color: ['neutral', 500],
-        size: "s"
-      }) : /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
-        color: ['neutral', 500],
-        size: "s"
-      }),
-      disabled: disabled
-    })), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-      pr: "24px"
-    }, void 0, /*#__PURE__*/_jsx__default["default"](styled.Title, {}, void 0, title), description && /*#__PURE__*/_jsx__default["default"](styled.Description, {
-      descriptionColor: descriptionColor
-    }, void 0, description)), hasRightPosition && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-      cols: lodash.compact([hasRightPosition && 'auto', rightAddon && 'auto'])
-    }, void 0, hasRightLegend && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-      pr: "24px",
-      rows: ['auto', 'auto', 1]
-    }, void 0, /*#__PURE__*/_jsx__default["default"](styled.RightDescription, {
-      justifyContent: "flex-end"
-    }, void 0, rightDescription), /*#__PURE__*/_jsx__default["default"](styled.RightValue, {
-      justifyContent: "flex-end"
-    }, void 0, rightValue), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))), rightAddon && /*#__PURE__*/_jsx__default["default"](styled.RightAddon, {
-      cols: ['auto', 'auto'],
-      gutter: "2px"
-    }, void 0, rightAddon))), expandContent && isExpanded && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-      ml: selectable && 's',
-      mr: rightAddon && 'xs'
-    }, void 0, _DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {
-      dashed: true,
-      position: "initial",
-      margin: "none"
-    })), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-      pt: "xxs",
-      "data-testid": "detail-card-expanded-content"
-    }, void 0, expandContent)))
-  });
+  const topWrapperCols = ["1fr"];
+  if (hasRightPosition)
+    topWrapperCols.push("auto");
+  if (expandable)
+    topWrapperCols.unshift("20px");
+  if (selectable)
+    topWrapperCols.unshift(theme.space.s);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styled.Container, {
+    disabled: disabled || readOnly,
+    active: selectable && isSelected,
+    "data-testid": "card-detail-container"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    cols: topWrapperCols,
+    alignItems: !description && "center"
+  }, selectable && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    pt: description && "9px"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSCheckbox, {
+    checked: isSelected,
+    onChange: onSelect,
+    readOnly,
+    disabled,
+    "data-testid": "card-checkbox"
+  })), expandable && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    height: "16px",
+    pt: description && "xxs",
+    mt: !description && "-5px"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
+    size: "s",
+    buttonType: "text",
+    containerProps: {
+      "data-testid": "expand-button"
+    },
+    onClick: onExpand,
+    icon: isExpanded ? /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadDown, {
+      color: ["neutral", 500],
+      size: "s"
+    }) : /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadRight, {
+      color: ["neutral", 500],
+      size: "s"
+    }),
+    disabled
+  })), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    pr: "24px"
+  }, /* @__PURE__ */ import_react.default.createElement(import_styled.Title, null, title), description && /* @__PURE__ */ import_react.default.createElement(import_styled.Description, {
+    descriptionColor
+  }, description)), hasRightPosition && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    cols: (0, import_lodash.compact)([hasRightPosition && "auto", rightAddon && "auto"])
+  }, hasRightLegend && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    pr: "24px",
+    rows: ["auto", "auto", 1]
+  }, /* @__PURE__ */ import_react.default.createElement(import_styled.RightDescription, {
+    justifyContent: "flex-end"
+  }, rightDescription), /* @__PURE__ */ import_react.default.createElement(import_styled.RightValue, {
+    justifyContent: "flex-end"
+  }, rightValue), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null)), rightAddon && /* @__PURE__ */ import_react.default.createElement(import_styled.RightAddon, {
+    cols: ["auto", "auto"],
+    gutter: "2px"
+  }, rightAddon))), expandContent && isExpanded && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    ml: selectable && "s",
+    mr: rightAddon && "xs"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_separator.default, {
+    dashed: true,
+    position: "initial",
+    margin: "none"
+  }), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    pt: "xxs",
+    "data-testid": "detail-card-expanded-content"
+  }, expandContent))));
 };
-
 const detailProps = {
-  /**
-   * Title of the card.
-   */
-  title: reactDesc.PropTypes.string.isRequired.description('Title of the card.'),
-
-  /**
-   * Description of the card.
-   */
-  description: reactDesc.PropTypes.string.description('Description of the card.'),
-
-  /**
-   * Description color.
-   */
-  descriptionColor: reactDesc.PropTypes.oneOf(['primary', 'neutral']).description('Description color.'),
-
-  /**
-   * Right value (should be used with `rightDescription`)
-   */
-  rightValue: reactDesc.PropTypes.string.description('Right value (should be used with `rightDescription`)'),
-
-  /**
-   * Right description (should be used with `rightValue`)
-   */
-  rightDescription: reactDesc.PropTypes.string.description('Right description (should be used with `rightValue`)'),
-
-  /**
-   * Right addon array, max elements: 2
-   */
-  rightAddon: reactDesc.PropTypes.element.description('Right addon array, max elements: 2'),
-
-  /**
-   * Whether if the card is selectable or not
-   */
-  selectable: reactDesc.PropTypes.bool.description('Whether if the card is selectable or not'),
-
-  /**
-   * Whether if the card is selected or not
-   */
-  isSelected: reactDesc.PropTypes.bool.description('Whether if the card is selected or not'),
-
-  /**
-   * Callback on selection
-   */
-  onSelect: reactDesc.PropTypes.func.description('Callback on selection'),
-
-  /**
-   * Whether if the card is expandable or not
-   */
-  expandable: reactDesc.PropTypes.bool.description('Whether if the card is expandable or not'),
-
-  /**
-   * Whether if the card is expanded or not
-   */
-  isExpanded: reactDesc.PropTypes.bool.description('Whether if the card is expanded or not'),
-
-  /**
-   * Callback on expand
-   */
-  onExpand: reactDesc.PropTypes.func.description('Callback on expand'),
-
-  /**
-   * Content
-   */
-  expandContent: reactDesc.PropTypes.element.description('Content'),
-
-  /**
-   * Read only
-   */
-  readOnly: reactDesc.PropTypes.bool.description('Read only'),
-
-  /**
-   * Disabled
-   */
-  disabled: reactDesc.PropTypes.bool.description('Disabled')
+  title: import_react_desc.PropTypes.string.isRequired.description("Title of the card."),
+  description: import_react_desc.PropTypes.string.description("Description of the card."),
+  descriptionColor: import_react_desc.PropTypes.oneOf(["primary", "neutral"]).description("Description color."),
+  rightValue: import_react_desc.PropTypes.string.description("Right value (should be used with `rightDescription`)"),
+  rightDescription: import_react_desc.PropTypes.string.description("Right description (should be used with `rightValue`)"),
+  rightAddon: import_react_desc.PropTypes.element.description("Right addon array, max elements: 2"),
+  selectable: import_react_desc.PropTypes.bool.description("Whether if the card is selectable or not"),
+  isSelected: import_react_desc.PropTypes.bool.description("Whether if the card is selected or not"),
+  onSelect: import_react_desc.PropTypes.func.description("Callback on selection"),
+  expandable: import_react_desc.PropTypes.bool.description("Whether if the card is expandable or not"),
+  isExpanded: import_react_desc.PropTypes.bool.description("Whether if the card is expanded or not"),
+  onExpand: import_react_desc.PropTypes.func.description("Callback on expand"),
+  expandContent: import_react_desc.PropTypes.element.description("Content"),
+  readOnly: import_react_desc.PropTypes.bool.description("Read only"),
+  disabled: import_react_desc.PropTypes.bool.description("Disabled")
 };
-const DSCardDetailWithSchema = reactDesc.describe(DetailCard);
+DetailCard.propTypes = detailProps;
+const DSCardDetailWithSchema = (0, import_react_desc.describe)(DetailCard);
 DSCardDetailWithSchema.propTypes = detailProps;
-
-exports.DSCardDetailWithSchema = DSCardDetailWithSchema;
-exports.DetailCard = DetailCard;
-exports["default"] = DetailCard;
+var DetailCard_default = DetailCard;
+module.exports = __toCommonJS(DetailCard_exports);
+//# sourceMappingURL=DetailCard.js.map

package/cjs/detail/DetailCard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/detail/DetailCard.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable complexity */\nimport React from 'react';\nimport { compact, noop } from 'lodash';\nimport { PropTypes, describe } from 'react-desc';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { useTheme } from '@elliemae/ds-system';\nimport DSButton from '@elliemae/ds-button';\nimport DSSeparator from '@elliemae/ds-separator';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Container, Title, Description, RightAddon, RightDescription, RightValue } from './styled';\n\nconst DetailCard = ({\n  title,\n  description,\n  descriptionColor = 'neutral',\n  rightValue,\n  rightDescription,\n  rightAddon,\n  // select props\n  selectable = false,\n  isSelected = false,\n  onSelect = noop,\n  // expand props\n  expandable = false,\n  isExpanded = false,\n  onExpand = noop,\n  expandContent,\n  // state props\n  readOnly = false,\n  disabled = false,\n}) => {\n  const theme = useTheme();\n  const hasRightLegend = rightValue && rightDescription;\n  const hasRightPosition = hasRightLegend || rightAddon;\n  const topWrapperCols = ['1fr'];\n  if (hasRightPosition) topWrapperCols.push('auto');\n  if (expandable) topWrapperCols.unshift('20px');\n  if (selectable) topWrapperCols.unshift(theme.space.s);\n  return (\n    <>\n      <Container disabled={disabled || readOnly} active={selectable && isSelected} data-testid=\"card-detail-container\">\n        <Grid cols={topWrapperCols} alignItems={!description && 'center'}>\n          {selectable && (\n            <Grid pt={description && '9px'}>\n              <DSCheckbox\n                checked={isSelected}\n                onChange={onSelect}\n                readOnly={readOnly}\n                disabled={disabled}\n                data-testid=\"card-checkbox\"\n              />\n            </Grid>\n          )}\n          {expandable && (\n            <Grid height=\"16px\" pt={description && 'xxs'} mt={!description && '-5px'}>\n              <DSButton\n                size=\"s\"\n                buttonType=\"text\"\n                containerProps={{\n                  'data-testid': 'expand-button',\n                }}\n                onClick={onExpand}\n                icon={\n                  isExpanded ? (\n                    <ArrowheadDown color={['neutral', 500]} size=\"s\" />\n                  ) : (\n                    <ArrowheadRight color={['neutral', 500]} size=\"s\" />\n                  )\n                }\n                disabled={disabled}\n              />\n            </Grid>\n          )}\n          <Grid pr=\"24px\">\n            <Title>{title}</Title>\n            {description && <Description descriptionColor={descriptionColor}>{description}</Description>}\n          </Grid>\n          {hasRightPosition && (\n            <Grid cols={compact([hasRightPosition && 'auto', rightAddon && 'auto'])}>\n              {hasRightLegend && (\n                <Grid pr=\"24px\" rows={['auto', 'auto', 1]}>\n                  <RightDescription justifyContent=\"flex-end\">{rightDescription}</RightDescription>\n                  <RightValue justifyContent=\"flex-end\">{rightValue}</RightValue>\n                  <Grid />\n                </Grid>\n              )}\n              {rightAddon && (\n                <RightAddon cols={['auto', 'auto']} gutter=\"2px\">\n                  {rightAddon}\n                </RightAddon>\n              )}\n            </Grid>\n          )}\n        </Grid>\n        {expandContent && isExpanded && (\n          <Grid ml={selectable && 's'} mr={rightAddon && 'xs'}>\n            <DSSeparator dashed position=\"initial\" margin=\"none\" />\n            <Grid pt=\"xxs\" data-testid=\"detail-card-expanded-content\">\n              {expandContent}\n            </Grid>\n          </Grid>\n        )}\n      </Container>\n    </>\n  );\n};\n\nconst detailProps = {\n  /**\n   * Title of the card.\n   */\n  title: PropTypes.string.isRequired.description('Title of the card.'),\n  /**\n   * Description of the card.\n   */\n  description: PropTypes.string.description('Description of the card.'),\n  /**\n   * Description color.\n   */\n  descriptionColor: PropTypes.oneOf(['primary', 'neutral']).description('Description color.'),\n  /**\n   * Right value (should be used with `rightDescription`)\n   */\n  rightValue: PropTypes.string.description('Right value (should be used with `rightDescription`)'),\n  /**\n   * Right description (should be used with `rightValue`)\n   */\n  rightDescription: PropTypes.string.description('Right description (should be used with `rightValue`)'),\n  /**\n   * Right addon array, max elements: 2\n   */\n  rightAddon: PropTypes.element.description('Right addon array, max elements: 2'),\n  /**\n   * Whether if the card is selectable or not\n   */\n  selectable: PropTypes.bool.description('Whether if the card is selectable or not'),\n  /**\n   * Whether if the card is selected or not\n   */\n  isSelected: PropTypes.bool.description('Whether if the card is selected or not'),\n  /**\n   * Callback on selection\n   */\n  onSelect: PropTypes.func.description('Callback on selection'),\n  /**\n   * Whether if the card is expandable or not\n   */\n  expandable: PropTypes.bool.description('Whether if the card is expandable or not'),\n  /**\n   * Whether if the card is expanded or not\n   */\n  isExpanded: PropTypes.bool.description('Whether if the card is expanded or not'),\n  /**\n   * Callback on expand\n   */\n  onExpand: PropTypes.func.description('Callback on expand'),\n  /**\n   * Content\n   */\n  expandContent: PropTypes.element.description('Content'),\n  /**\n   * Read only\n   */\n  readOnly: PropTypes.bool.description('Read only'),\n  /**\n   * Disabled\n   */\n  disabled: PropTypes.bool.description('Disabled'),\n};\n\nDetailCard.propTypes = detailProps;\nconst DSCardDetailWithSchema = describe(DetailCard);\nDSCardDetailWithSchema.propTypes = detailProps;\n\nexport { DetailCard, DSCardDetailWithSchema };\nexport default DetailCard;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/cjs/detail/styled.js

@@ -1,61 +1,107 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var dsGrid = require('@elliemae/ds-grid');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const Separator = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-nx8lwv-0"
-})(["width:100%;height:24px;border-right:1px solid ", ";margin:0 8px;"], props => props.theme.colors.neutral['300']);
-const Title = /*#__PURE__*/styled__default["default"].h3.withConfig({
-  componentId: "sc-nx8lwv-1"
-})(["margin:0;font-size:16px;min-height:20px;font-weight:", ";color:", ";"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['700']);
-const Description = /*#__PURE__*/styled__default["default"].p.withConfig({
-  componentId: "sc-nx8lwv-2"
-})(["margin:0;font-size:12px;min-height:18px;display:flex;align-items:center;color:", ";"], props => props.descriptionColor === 'neutral' ? props.theme.colors.neutral['600'] : props.theme.colors.brand['600']);
-const RightAddon = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-nx8lwv-3"
-})(["margin:0;white-space:nowrap;"]);
-const RightDescription = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-nx8lwv-4"
-})(["margin:0;white-space:nowrap;font-size:12px;color:", ";"], props => props.theme.colors.neutral['600']);
-const RightValue = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-nx8lwv-5"
-})(["margin:0;white-space:nowrap;font-size:14px;color:", ";"], props => props.theme.colors.neutral['800']);
-const ExpandContent = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-nx8lwv-6"
-})(["font-size:12px;"]);
-
-const border = _ref => {
-  let {
-    active,
-    theme
-  } = _ref;
-  return active ? theme.colors.brand['600'] : theme.colors.neutral['200'];
+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 });
 };
-
-const background = _ref2 => {
-  let {
-    active,
-    theme
-  } = _ref2;
-  return active ? theme.colors.brand['100'] : theme.colors.neutral['000'];
+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;
 };
-
-const Container = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-nx8lwv-7"
-})(["width:100%;min-height:52px;min-width:244px;padding:6px 8px 6px 12px;position:relative;border-top:1px solid ", ";border-bottom:1px solid ", ";background:", ";", " &:hover{box-shadow:0 2px 4px 0 rgba(53,60,70,0.5);z-index:1;}"], border, border, background, props => props.disabled ? "\n    ".concat(Title, ", ").concat(Description, ", ").concat(RightDescription, ", ").concat(RightValue, " {\n      color: ").concat(props.theme.colors.neutral['500'], ";\n    }\n  ") : '');
-
-exports.Container = Container;
-exports.Description = Description;
-exports.ExpandContent = ExpandContent;
-exports.RightAddon = RightAddon;
-exports.RightDescription = RightDescription;
-exports.RightValue = RightValue;
-exports.Separator = Separator;
-exports.Title = Title;
+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 styled_exports = {};
+__export(styled_exports, {
+  Container: () => Container,
+  Description: () => Description,
+  ExpandContent: () => ExpandContent,
+  RightAddon: () => RightAddon,
+  RightDescription: () => RightDescription,
+  RightValue: () => RightValue,
+  Separator: () => Separator,
+  Title: () => Title
+});
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
+const Separator = import_styled_components.default.div`
+  width: 100%;
+  height: 24px;
+  border-right: 1px solid ${(props) => props.theme.colors.neutral["300"]};
+  margin: 0 8px;
+`;
+const Title = import_styled_components.default.h3`
+  margin: 0;
+  font-size: 16px;
+  min-height: 20px;
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  color: ${(props) => props.theme.colors.neutral["700"]};
+`;
+const Description = import_styled_components.default.p`
+  margin: 0;
+  font-size: 12px;
+  min-height: 18px;
+  display: flex;
+  align-items: center;
+  color: ${(props) => props.descriptionColor === "neutral" ? props.theme.colors.neutral["600"] : props.theme.colors.brand["600"]};
+`;
+const RightAddon = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  margin: 0;
+  white-space: nowrap;
+`;
+const RightDescription = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  margin: 0;
+  white-space: nowrap;
+  font-size: 12px;
+  color: ${(props) => props.theme.colors.neutral["600"]};
+`;
+const RightValue = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  margin: 0;
+  white-space: nowrap;
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.neutral["800"]};
+`;
+const ExpandContent = import_styled_components.default.div`
+  font-size: 12px;
+`;
+const border = ({ active, theme }) => active ? theme.colors.brand["600"] : theme.colors.neutral["200"];
+const background = ({ active, theme }) => active ? theme.colors.brand["100"] : theme.colors.neutral["000"];
+const Container = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  width: 100%;
+  min-height: 52px;
+  min-width: 244px;
+  padding: 6px 8px 6px 12px;
+  position: relative;
+  border-top: 1px solid ${border};
+  border-bottom: 1px solid ${border};
+  background: ${background};
+  ${(props) => props.disabled ? `
+    ${Title}, ${Description}, ${RightDescription}, ${RightValue} {
+      color: ${props.theme.colors.neutral["500"]};
+    }
+  ` : ""}
+  &:hover {
+    box-shadow: 0 2px 4px 0 rgba(53, 60, 70, 0.5);
+    z-index: 1;
+  }
+  /* & + ${Container} {
+    border-top-color: blue;
+  } */
+`;
+module.exports = __toCommonJS(styled_exports);
+//# sourceMappingURL=styled.js.map

package/cjs/detail/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/detail/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const Separator = styled.div`\n  width: 100%;\n  height: 24px;\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['300']};\n  margin: 0 8px;\n`;\n\nexport const Title = styled.h3`\n  margin: 0;\n  font-size: 16px;\n  min-height: 20px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.neutral['700']};\n`;\n\nexport const Description = styled.p`\n  margin: 0;\n  font-size: 12px;\n  min-height: 18px;\n  display: flex;\n  align-items: center;\n  color: ${(props) =>\n    props.descriptionColor === 'neutral'\n      ? props.theme.colors.neutral['600']\n      : props.theme.colors.brand['600']};\n`;\n\nexport const RightAddon = styled(Grid)`\n  margin: 0;\n  white-space: nowrap;\n`;\n\nexport const RightDescription = styled(Grid)`\n  margin: 0;\n  white-space: nowrap;\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral['600']};\n`;\nexport const RightValue = styled(Grid)`\n  margin: 0;\n  white-space: nowrap;\n  font-size: 14px;\n  color: ${(props) => props.theme.colors.neutral['800']};\n`;\n\nexport const ExpandContent = styled.div`\n  font-size: 12px;\n`;\n\nconst border = ({ active, theme }) =>\n  active ? theme.colors.brand['600'] : theme.colors.neutral['200'];\nconst background = ({ active, theme }) =>\n  active ? theme.colors.brand['100'] : theme.colors.neutral['000'];\n\nexport const Container = styled(Grid)`\n  width: 100%;\n  min-height: 52px;\n  min-width: 244px;\n  padding: 6px 8px 6px 12px;\n  position: relative;\n  border-top: 1px solid ${border};\n  border-bottom: 1px solid ${border};\n  background: ${background};\n  ${(props) =>\n    props.disabled\n      ? `\n    ${Title}, ${Description}, ${RightDescription}, ${RightValue} {\n      color: ${props.theme.colors.neutral['500']};\n    }\n  `\n      : ''}\n  &:hover {\n    box-shadow: 0 2px 4px 0 rgba(53, 60, 70, 0.5);\n    z-index: 1;\n  }\n  /* & + ${Container} {\n    border-top-color: blue;\n  } */\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,qBAAqB;AAEd,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA,4BAGJ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3D,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA;AAAA,iBAIX,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMvB,CAAC,UACR,MAAM,qBAAqB,YACvB,MAAM,MAAM,OAAO,QAAQ,SAC3B,MAAM,MAAM,OAAO,MAAM;AAAA;AAG1B,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,mBAAmB,sCAAO;AAAA;AAAA;AAAA;AAAA,WAI5B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAE1C,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA;AAAA,WAItB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,gBAAgB,iCAAO;AAAA;AAAA;AAIpC,MAAM,SAAS,CAAC,EAAE,QAAQ,YACxB,SAAS,MAAM,OAAO,MAAM,SAAS,MAAM,OAAO,QAAQ;AAC5D,MAAM,aAAa,CAAC,EAAE,QAAQ,YAC5B,SAAS,MAAM,OAAO,MAAM,SAAS,MAAM,OAAO,QAAQ;AAErD,MAAM,YAAY,sCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMN;AAAA,6BACG;AAAA,gBACb;AAAA,IACZ,CAAC,UACD,MAAM,WACF;AAAA,MACF,UAAU,gBAAgB,qBAAqB;AAAA,eACtC,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,MAGlC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKG;AAAA;AAAA;AAAA;",
+  "names": []
+}