@elliemae/ds-mobile 2.3.0-alpha.9 → 2.3.0-next.3

package/{dist/esm → esm}/MobileBanner/defaultProps.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { MOBILE_BANNER_TYPES } from "./utils/bannerTypes";
+import { MOBILE_BANNER_TYPES } from './utils/bannerTypes.js';
+
 const defaultProps = {
   type: MOBILE_BANNER_TYPES.SUCCESS,
   isOpen: false,
@@ -7,13 +7,11 @@ const defaultProps = {
   actionLinkLabel: null,
   actionLinkHref: null,
   actionLinkOnClick: () => null,
-  label: "",
-  body: "",
+  label: '',
+  body: '',
   showCloseButton: true,
   containerProps: {},
   focusOnOpen: false
 };
-export {
-  defaultProps
-};
-//# sourceMappingURL=defaultProps.js.map
+
+export { defaultProps };

package/esm/MobileBanner/index.d.js

@@ -0,0 +1 @@
+

package/esm/MobileBanner/index.js

@@ -0,0 +1,2 @@
+export { DSMobileBanner, DSMobileBannerWithSchema } from './MobileBanner.js';
+export { MOBILE_BANNER_TYPES } from './utils/bannerTypes.js';

package/esm/MobileBanner/propTypes.js

@@ -0,0 +1,17 @@
+import { PropTypes } from 'react-desc';
+
+const propTypes = {
+  type: PropTypes.oneOf(['info', 'success', 'warning', 'error']).description('Type of banner'),
+  isOpen: PropTypes.bool.description('Whether the banner is open or not'),
+  closeButtonOnClick: PropTypes.func.description('OnClick function used in the close button'),
+  actionLinkLabel: PropTypes.string.description('Label used in the the action link'),
+  actionLinkHref: PropTypes.string.description('Href used in the the action link'),
+  actionLinkOnClick: PropTypes.string.description('OnClick function used in the action link'),
+  label: PropTypes.string.description('Label text for the banner'),
+  body: PropTypes.string.description('Body text for the banner'),
+  showCloseButton: PropTypes.bool.description('Whether the close button should be visible or not'),
+  containerProps: PropTypes.shape({}).description('Set of properties attached to the banner container'),
+  focusOnOpen: PropTypes.bool.description("Whether the banner should get focus when its openedWhether the banner should get focus when it's opened")
+};
+
+export { propTypes };

package/esm/MobileBanner/styles.js

@@ -0,0 +1,156 @@
+import styled from 'styled-components';
+import { toMobile } from '@elliemae/ds-system';
+import DSButton from '@elliemae/ds-button';
+import { handleBorderColor, handleAnimation } from './utils/styleHelpers.js';
+
+const StyledInnerContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-4jnp92-0"
+})(["display:flex;min-height:68px;width:100%;background-color:", ";border-bottom:4px solid ", ";transform:translateY(", ");", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['000'];
+}, _ref2 => {
+  let {
+    type,
+    theme
+  } = _ref2;
+  return handleBorderColor(type, theme);
+}, _ref3 => {
+  let {
+    isOpen
+  } = _ref3;
+  return isOpen ? '0' : '-100%';
+}, _ref4 => {
+  let {
+    isAnimating,
+    isOpen
+  } = _ref4;
+  return handleAnimation(isAnimating, isOpen);
+});
+const StyledTextContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-4jnp92-1"
+})(["width:100%;"]);
+const StyledTitle = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-4jnp92-2"
+})(["color:", ";font-size:", ";font-weight:", ";margin-bottom:", ";@media not all and (min-resolution:0.001dpcm){@media{-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}}@media screen and (min--moz-device-pixel-ratio:0){-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral[700];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return toMobile(theme.fontSizes.title[700]);
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.fontWeights.semibold;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.space.xxs;
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.neutral[700];
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral[700];
+});
+const StyledSubTitle = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-4jnp92-3"
+})(["font-size:", ";font-weight:", ";"], _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return toMobile(theme.fontSizes.title[600]);
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.fontWeights.regular;
+});
+const StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-4jnp92-4"
+})(["margin-top:10px;margin-right:", ";margin-left:", ";"], _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.space.xxs;
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.space.xs;
+});
+const StyledContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-4jnp92-5"
+})(["width:100%;display:flex;flex-direction:column;margin:", " 0;margin-right:", ";"], _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.space.xxs2;
+}, _ref16 => {
+  let {
+    showCloseButton
+  } = _ref16;
+  return !showCloseButton ? '28px' : '0';
+});
+const StyledCloseButtonContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-4jnp92-6"
+})(["display:flex;align-items:flex-start;margin-top:6px;margin-right:6px;"]);
+const StyledCloseButton = /*#__PURE__*/styled(DSButton).withConfig({
+  componentId: "sc-4jnp92-7"
+})(["position:relative;&:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.brand[700];
+});
+const StyledActionLink = /*#__PURE__*/styled.a.withConfig({
+  componentId: "sc-4jnp92-8"
+})(["text-decoration:none;float:right;margin-left:", ";line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.space.xs;
+}, _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return toMobile(theme.fontSizes.title[600]);
+}, _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.fontWeights.regular;
+}, _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.colors.brand[600];
+});
+const StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-4jnp92-9"
+})(["overflow:hidden;height:", ";", ";"], _ref22 => {
+  let {
+    isOpen
+  } = _ref22;
+  return isOpen ? 'auto' : '0px';
+}, _ref23 => {
+  let {
+    isAnimating,
+    isOpen,
+    height
+  } = _ref23;
+  return handleAnimation(isAnimating, isOpen, height);
+});
+
+export { StyledActionLink, StyledBannerContainer, StyledCloseButton, StyledCloseButtonContainer, StyledContent, StyledIconContainer, StyledInnerContainer, StyledSubTitle, StyledTextContent, StyledTitle };

package/esm/MobileBanner/utils/bannerTypes.js

@@ -0,0 +1,8 @@
+const MOBILE_BANNER_TYPES = {
+  INFO: 'info',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  ERROR: 'error'
+};
+
+export { MOBILE_BANNER_TYPES };

package/esm/MobileBanner/utils/icons.js

@@ -0,0 +1,24 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { SuccessFill, InfoFill, AlertsDetailFill, WarningSquare } from '@elliemae/ds-icons';
+
+const icons = {
+  success: /*#__PURE__*/_jsx(SuccessFill, {
+    fill: "#207e56"
+  }),
+  info: /*#__PURE__*/_jsx(InfoFill, {
+    fill: "#1e79c2"
+  }),
+  error: /*#__PURE__*/_jsx(AlertsDetailFill, {
+    width: "24px",
+    height: "24px",
+    fill: "#c64252"
+  }),
+  warning: /*#__PURE__*/_jsx(WarningSquare, {
+    width: "24px",
+    height: "24px",
+    fill: "#d17a00"
+  })
+};
+
+export { icons };

package/esm/MobileBanner/utils/styleHelpers.js

@@ -0,0 +1,41 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { kfrm, css } from '@elliemae/ds-system';
+import { MOBILE_BANNER_TYPES } from './bannerTypes.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+const slideIn = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n"])));
+const slideOut = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -100%, 0);\n  }\n"])));
+const spanContainer = height => kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
+const shrinkContainer = height => kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
+const handleBorderColor = (type, _ref) => {
+  let {
+    colors
+  } = _ref;
+
+  switch (type) {
+    case MOBILE_BANNER_TYPES.SUCCESS:
+      return colors.success[900];
+
+    case MOBILE_BANNER_TYPES.INFO:
+      return colors.brand[600];
+
+    case MOBILE_BANNER_TYPES.WARNING:
+      return colors.warning[900];
+
+    case MOBILE_BANNER_TYPES.ERROR:
+      return colors.danger[900];
+  }
+};
+const handleAnimation = function (isAnimating, isOpen) {
+  let height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
+  if (isAnimating) {
+    if (isOpen) {
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
+    } else {
+      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
+    }
+  }
+};
+
+export { handleAnimation, handleBorderColor, shrinkContainer, slideIn, slideOut, spanContainer };

package/esm/MobileCard/ActionAddon.js

@@ -0,0 +1,25 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { ChevronSmallDown } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+
+const Addon = /*#__PURE__*/styled(DSButton).withConfig({
+  componentId: "sc-afblfw-0"
+})(["background-color:transparent;padding-right:4px;height:100%;border:none;font-size:12px;font-weight:", ";color:", ";cursor:pointer;&:focus,&::after{background-color:transparent;box-shadow:none !important;border:none !important;}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['700']);
+const ActionAddon = _ref => {
+  let {
+    label,
+    onClick,
+    icon
+  } = _ref;
+  return /*#__PURE__*/_jsx(Addon, {
+    onClick: onClick,
+    labelText: label,
+    icon: icon || /*#__PURE__*/_jsx(ChevronSmallDown, {
+      color: ['brand-primary', 700]
+    })
+  });
+};
+
+export { ActionAddon };

package/esm/MobileCard/Card.js

@@ -0,0 +1,131 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { useRef } from 'react';
+import { describe } from 'react-desc';
+import styled from 'styled-components';
+import { space } from '@xstyled/styled-components';
+import { truncate, toMobile, color, __UNSAFE_SPACE_TO_DIMSUM, border, withTheme, op } from '@elliemae/ds-system';
+import GroupItem from '@elliemae/ds-shared/GroupContext/GroupItem';
+import { Grid } from '@elliemae/ds-grid';
+import { StyledCard } from './StyledCard.js';
+import { ExpandChevron } from './ExpandChevron.js';
+import { useHeight } from './useHeight.js';
+import { ExpandableRegion } from './ExpandableRegion.js';
+import { cardPropsTypes } from './props.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const TitleEllipsis = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-10tpzm8-0"
+})(["", ""], truncate());
+const Title = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-10tpzm8-1"
+})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], space, truncate(), props => props.theme.fontWeights.semibold, props => toMobile(props.theme.fontSizes.title[600]), color('neutral', 800));
+const Detail = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-10tpzm8-2"
+})(["", " ", " font-size:", ";font-weight:", ";"], space, truncate(), props => toMobile(props.theme.fontSizes.title[500]), props => props.theme.fontWeights.regular);
+const SubText = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-10tpzm8-3"
+})(["margin-top:", ";", " &:nth-child(2){padding-left:", ";}"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), truncate(), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s));
+const SubTextWrap = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-10tpzm8-4"
+})(["", " border-top:", ";margin-top:6px;margin-bottom:2px;padding-bottom:", ";font-size:", ";", " font-weight:", ";display:flex;justify-content:space-between;"], truncate(), props => border(props.theme.colors.neutral['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => toMobile(props.theme.fontSizes.subTitle[400]), color('neutral', 500), props => props.theme.fontWeights.regular);
+const LeftIcon = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-10tpzm8-5"
+})(["& > span{height:", ";width:", ";}& > span > svg,svg:not([fill]){height:", ";width:", ";}"], props => props.halfM, props => props.halfM, props => props.halfM, props => props.halfM);
+const CenterWrap = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-10tpzm8-6"
+})(["display:flex;align-items:center;", ""], truncate());
+
+const MobileCard = _ref => {
+  var _TitleEllipsis, _SubText, _Grid;
+
+  let {
+    children,
+    height = 'm',
+    leftAddOn,
+    leftProp,
+    rightProp,
+    subText,
+    subIcons,
+    details,
+    theme,
+    expandable = false,
+    expandedContent,
+    value,
+    cardContent
+  } = _ref;
+  const subTextRef = useRef(null);
+  const subTextHeight = useHeight(subTextRef);
+  const isJustChildren = !(subText || subIcons || details);
+  const halfM = op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 2);
+  return /*#__PURE__*/_jsx(GroupItem, {
+    render: function () {
+      let context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const {
+        activeValue,
+        onChange
+      } = context;
+      const selected = activeValue !== undefined && (activeValue === value || (activeValue === null || activeValue === void 0 ? void 0 : activeValue.length) && (activeValue === null || activeValue === void 0 ? void 0 : activeValue.includes(value)));
+      return /*#__PURE__*/_jsx(StyledCard, {
+        "data-testid": "card-wrapper",
+        minHeight: height === 'm' ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl) : __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl)
+      }, void 0, expandable && /*#__PURE__*/_jsx(ExpandChevron, {
+        isExpanded: selected,
+        onClick: e => {
+          e.stopPropagation();
+          onChange({
+            target: {
+              value
+            }
+          });
+        },
+        align: subText || subIcons ? 'top' : 'center'
+      }), /*#__PURE__*/_jsx(Grid, {
+        pb: (subText || subIcons) && subTextHeight,
+        cols: ['auto', 'auto'],
+        alignItems: "center"
+      }, void 0, leftProp && /*#__PURE__*/_jsx(Grid, {
+        ml: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+      }, void 0, leftProp), leftAddOn && /*#__PURE__*/_jsx(LeftIcon, {
+        ml: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+        halfM: halfM
+      }, void 0, leftAddOn)), /*#__PURE__*/_jsx(Grid, {
+        pl: !leftAddOn ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : __UNSAFE_SPACE_TO_DIMSUM(theme.space.xs),
+        pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+        width: "100%"
+      }, void 0, /*#__PURE__*/_jsx(CenterWrap, {}, void 0, /*#__PURE__*/_jsx(Title, {
+        pt: !isJustChildren && halfM,
+        "data-testid": "card-title"
+      }, void 0, _TitleEllipsis || (_TitleEllipsis = /*#__PURE__*/_jsx(TitleEllipsis, {}, void 0, children)), details && /*#__PURE__*/_jsx(Grid, {
+        "data-testid": "card-details",
+        cols: details.map(() => 'min-content'),
+        mb: !(subText || subIcons) && halfM || 0,
+        pt: op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)
+      }, void 0, details.map((d, i) => /*#__PURE__*/_jsx(Detail, {}, i, d, i < details.length - 1 && /*#__PURE__*/_jsx(Detail, {
+        px: __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)
+      }, void 0, "\u2022"))))), rightProp && rightProp.map((prop, i) => /*#__PURE__*/_jsx(Grid, {
+        ml: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+      }, i, prop))), subIcons && /*#__PURE__*/jsxs(SubTextWrap, {
+        ref: subTextRef,
+        children: [_SubText || (_SubText = /*#__PURE__*/_jsx(SubText, {}, void 0, subIcons)), subText && subText[1] && /*#__PURE__*/_jsx(SubText, {
+          "data-testid": "card-subText"
+        }, void 0, subText[1])]
+      }), subText && !subIcons && /*#__PURE__*/jsx(SubTextWrap, {
+        ref: subTextRef,
+        children: subText.map((s, i) => /*#__PURE__*/_jsx(SubText, {
+          "data-testid": "card-subText"
+        }, i, s))
+      }), /*#__PURE__*/_jsx(ExpandableRegion, {
+        show: selected,
+        content: expandedContent
+      }), cardContent && (_Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}, void 0, cardContent)))));
+    }
+  });
+};
+
+const DSMobileCardWithSchema = describe(MobileCard);
+DSMobileCardWithSchema.propTypes = cardPropsTypes;
+var MobileCard$1 = withTheme(MobileCard);
+
+export { DSMobileCardWithSchema, MobileCard$1 as default };

package/esm/MobileCard/CardIcons.js

@@ -0,0 +1,29 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'react';
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+
+const CardIconsWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1vqygz1-0"
+})(["align-items:center;span,svg{width:12px !important;height:12px !important;}span.icon-color-muted svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-warn svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-error svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-success svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-primary svg,svg:not([fill]){fill:", ";}span.icon-color-primary svg,svg:not([fill]){fill:", ";}"], props => props.theme.colors.neutral['600'], props => props.theme.colors.neutral['600'], props => props.theme.colors.warning['600'], props => props.theme.colors.warning['600'], props => props.theme.colors.danger['900'], props => props.theme.colors.danger['900'], props => props.theme.colors.success['900'], props => props.theme.colors.success['900'], props => props.theme.colors.brand[600], props => props.theme.colors.brand[600]);
+const SubIcons = _ref => {
+  let {
+    icons = [],
+    colors = []
+  } = _ref;
+  return /*#__PURE__*/_jsx(CardIconsWrapper, {
+    cols: icons.map(() => '12px'),
+    gutter: "6px",
+    height: "14px",
+    "data-testid": "card-subIcons"
+  }, void 0, icons.map((Icon, i) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _jsx(Icon, {
+    className: "icon-color-".concat(colors[i] || 'muted')
+  }, i)));
+};
+
+export { SubIcons };

package/esm/MobileCard/ExpandChevron.js

@@ -0,0 +1,26 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { ChevronDown, ChevronRight } from '@elliemae/ds-icons';
+
+const ChevronWrap = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1l0ask2-0"
+})(["margin-top:", ";align-self:", ";margin-left:", ";"], props => props.align === 'top' ? '18px' : '0', props => props.align === 'top' ? 'flex-start' : 'center', props => props.theme.space.xs);
+const ExpandChevron = _ref => {
+  let {
+    isExpanded,
+    onClick,
+    align
+  } = _ref;
+  const Chevron = isExpanded ? ChevronDown : ChevronRight;
+  return /*#__PURE__*/_jsx(ChevronWrap, {
+    "data-testid": "ds-card-expand-chevron",
+    align: align
+  }, void 0, /*#__PURE__*/_jsx(Chevron, {
+    size: "s",
+    color: ['brand-primary', 800],
+    onClick: onClick
+  }));
+};
+
+export { ExpandChevron };

package/esm/MobileCard/ExpandableRegion.js

@@ -0,0 +1,47 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { truncate, border } from '@elliemae/ds-system';
+import { jsx } from 'react/jsx-runtime';
+
+const RegionWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-mduzz9-0"
+})(["width:100%;height:100%;"]);
+const Region = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-mduzz9-1"
+})(["display:flex;", " transition:max-height ", " linear;max-height:0;", " align-items:center;", ";border-top:", ";font-weight:", ";"], props => props.hide ? 'visibility: hidden;' : '', props => props.animate ? '0.25s' : '0.20s', props => props.animate ? "\n      max-height: ".concat(props.refHeight, "px;\n    ") : '', truncate(), props => border(props.theme.colors.neutral['300']), props => props.theme.fontWeights.regular);
+const ExpandableRegion = _ref => {
+  var _ref$current;
+
+  let {
+    show,
+    content
+  } = _ref;
+  const ref = useRef(null); // triggers transition
+
+  const [animate, setAnimate] = useState(show); // needed to properly handle the transition. Hide after transition ends
+
+  const [hide, setHide] = useState(!show);
+  useEffect(() => {
+    setAnimate(show);
+    if (show) setHide(false);
+  }, [show]);
+
+  const hideOnAnimationEnd = () => {
+    if (!show) setHide(true);
+  };
+
+  return /*#__PURE__*/_jsx(Region, {
+    hide: hide // needed to handle transition, `auto` max-height isn't supported
+    ,
+    refHeight: (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 9999,
+    onTransitionEnd: hideOnAnimationEnd,
+    animate: animate
+  }, void 0, /*#__PURE__*/jsx(RegionWrapper, {
+    ref: ref,
+    children: content
+  }));
+};
+
+export { ExpandableRegion };

package/esm/MobileCard/Group.js

@@ -0,0 +1,86 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import React from 'react';
+import { PropTypes, describe } from 'react-desc';
+import styled from 'styled-components';
+import Group from '@elliemae/ds-shared/GroupContext/Group';
+import { Grid } from '@elliemae/ds-grid';
+import { truncate, __UNSAFE_SPACE_TO_DIMSUM, color, border, withTheme } from '@elliemae/ds-system';
+import { StyledCard } from './StyledCard.js';
+
+const GroupGrid = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-17xukaf-0"
+})(["", "{border-top:none;}", ""], StyledCard, _ref => {
+  let {
+    theme,
+    withTopBorder
+  } = _ref;
+  return withTopBorder ? "border-top: ".concat(border(theme.colors.neutral['100'])) : '';
+});
+const GroupTitle = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-17xukaf-1"
+})(["", ""], truncate());
+const GroupTitleGrid = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-17xukaf-2"
+})(["display:flex;justify-content:space-between;padding:0 ", ";font-size:", ";", " font-weight:", ";background-color:", ";border-top:", ";line-height:", ";@media (min-width:1024px){background-color:", ";border-top:", ";}"], props => props.theme.space.xs, props => "calc(".concat(__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), " / 2)"), color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['200'], props => border(props.theme.colors.brand['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), props => props.theme.colors.neutral['080'], props => border(props.theme.colors.neutral['080']));
+
+const MobileCardGroup = _ref2 => {
+  let {
+    children,
+    theme,
+    title,
+    action,
+    activeValue,
+    allowMultipleOpen = false,
+    onChange = () => null
+  } = _ref2;
+  const rows = !title ? ['auto'] : [__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];
+  return /*#__PURE__*/_jsx(Group, {
+    activeValue: activeValue,
+    multiple: allowMultipleOpen,
+    onChange: onChange
+  }, void 0, /*#__PURE__*/_jsx(GroupGrid, {
+    withTopBorder: !title,
+    rows: rows
+  }, void 0, !!title && /*#__PURE__*/_jsx(GroupTitleGrid, {
+    pl: "xxs"
+  }, void 0, /*#__PURE__*/_jsx(GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx(Grid, {}, void 0, React.Children.map(children, (child, idx) => /*#__PURE__*/React.cloneElement(child, {
+    key: idx,
+    value: idx,
+    idx
+  }), null))));
+};
+
+const props = {
+  theme: PropTypes.object.isRequired.description(''),
+
+  /**
+   * Defines group title
+   */
+  title: PropTypes.string.description(''),
+
+  /**
+   * Pass one or more Mobile Cards to render as a group
+   */
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description(''),
+
+  /**
+   * Group header addon
+   */
+  action: PropTypes.element.description(''),
+
+  /**  */
+  activeValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).description(''),
+
+  /**  */
+  allowMultipleOpen: PropTypes.bool.description(''),
+
+  /**  */
+  onChange: PropTypes.func.description('')
+};
+const DSMobileCardGroupWithSchema = describe(MobileCardGroup);
+DSMobileCardGroupWithSchema.propTypes = props;
+var MobileGroup = withTheme(MobileCardGroup);
+
+export { DSMobileCardGroupWithSchema, MobileGroup as default };

package/esm/MobileCard/StyledCard.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { border } from '@elliemae/ds-system';
+
+const StyledCard = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-28g2t3-0"
+})(["display:flex;align-items:center;height:fit-content;min-height:", ";border:", ";border-bottom:", ";"], props => props.minHeight, props => border(props.theme.colors.neutral['100']), props => border('.5px', props.theme.colors.neutral['500']));
+
+export { StyledCard };

package/esm/MobileCard/index.js

@@ -0,0 +1,11 @@
+import MobileCard from './Card.js';
+export { DSMobileCardWithSchema, default } from './Card.js';
+import MobileGroup from './Group.js';
+export { DSMobileCardGroupWithSchema } from './Group.js';
+export { ActionAddon } from './ActionAddon.js';
+export { SubIcons } from './CardIcons.js';
+
+MobileCard.Group = MobileGroup;
+const DSMobileCard = MobileCard;
+
+export { DSMobileCard };