@elliemae/ds-mobile 3.0.0-next.2 → 3.0.0-next.6

package/dist/cjs/MobileCard/Card.js

@@ -0,0 +1,181 @@
+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 Card_exports = {};
+__export(Card_exports, {
+  DSMobileCardWithSchema: () => DSMobileCardWithSchema,
+  default: () => Card_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_styled_components = __toESM(require("styled-components"));
+var import_styled_components2 = require("@xstyled/styled-components");
+var import_ds_system = require("@elliemae/ds-system");
+var import_GroupItem = __toESM(require("@elliemae/ds-shared/GroupContext/GroupItem"));
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_StyledCard = require("./StyledCard");
+var import_ExpandChevron = require("./ExpandChevron");
+var import_useHeight = require("./useHeight");
+var import_ExpandableRegion = require("./ExpandableRegion");
+var import_props = require("./props");
+const TitleEllipsis = import_styled_components.default.div`
+  ${(0, import_ds_system.truncate)()}
+`;
+const Title = import_styled_components.default.div`
+  ${import_styled_components2.space}
+  ${(0, import_ds_system.truncate)()}
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  font-size: ${(props) => (0, import_ds_system.toMobile)(props.theme.fontSizes.title[600])};
+  width: 100%;
+  ${(0, import_ds_system.color)("neutral", 800)}
+`;
+const Detail = import_styled_components.default.span`
+  ${import_styled_components2.space}
+  ${(0, import_ds_system.truncate)()}
+  font-size: ${(props) => (0, import_ds_system.toMobile)(props.theme.fontSizes.title[500])};
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+`;
+const SubText = import_styled_components.default.span`
+  margin-top: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xs)};
+  ${(0, import_ds_system.truncate)()}
+  &:nth-child(2) {
+    padding-left: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.s)};
+  }
+`;
+const SubTextWrap = import_styled_components.default.div`
+  ${(0, import_ds_system.truncate)()}
+  border-top: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
+  margin-top: 6px;
+  margin-bottom: 2px;
+  padding-bottom: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)};
+  font-size: ${(props) => (0, import_ds_system.toMobile)(props.theme.fontSizes.subTitle[400])};
+  ${(0, import_ds_system.color)("neutral", 500)}
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+  display: flex;
+  justify-content: space-between;
+`;
+const LeftIcon = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  & > span {
+    height: ${(props) => props.halfM};
+    width: ${(props) => props.halfM};
+  }
+
+  & > span > svg,
+  svg:not([fill]) {
+    height: ${(props) => props.halfM};
+    width: ${(props) => props.halfM};
+  }
+`;
+const CenterWrap = import_styled_components.default.div`
+  display: flex;
+  align-items: center;
+  ${(0, import_ds_system.truncate)()}
+`;
+const MobileCard = ({
+  children,
+  height = "m",
+  leftAddOn,
+  leftProp,
+  rightProp,
+  subText,
+  subIcons,
+  details,
+  theme,
+  expandable = false,
+  expandedContent,
+  value,
+  cardContent
+}) => {
+  const subTextRef = (0, import_react.useRef)(null);
+  const subTextHeight = (0, import_useHeight.useHeight)(subTextRef);
+  const isJustChildren = !(subText || subIcons || details);
+  const halfM = (0, import_ds_system.op)("/", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.m), 2);
+  return /* @__PURE__ */ import_react.default.createElement(import_GroupItem.default, {
+    render: (context = {}) => {
+      const { activeValue, onChange } = context;
+      const selected = activeValue !== void 0 && (activeValue === value || activeValue?.length && activeValue?.includes(value));
+      return /* @__PURE__ */ import_react.default.createElement(import_StyledCard.StyledCard, {
+        "data-testid": "card-wrapper",
+        minHeight: height === "m" ? (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl) : (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xl)
+      }, expandable && /* @__PURE__ */ import_react.default.createElement(import_ExpandChevron.ExpandChevron, {
+        isExpanded: selected,
+        onClick: (e) => {
+          e.stopPropagation();
+          onChange({ target: { value } });
+        },
+        align: subText || subIcons ? "top" : "center"
+      }), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+        pb: (subText || subIcons) && subTextHeight,
+        cols: ["auto", "auto"],
+        alignItems: "center"
+      }, leftProp && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+        ml: (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s)
+      }, leftProp), leftAddOn && /* @__PURE__ */ import_react.default.createElement(LeftIcon, {
+        ml: (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s),
+        halfM
+      }, leftAddOn)), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+        pl: !leftAddOn ? (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s) : (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xs),
+        pr: (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s),
+        width: "100%"
+      }, /* @__PURE__ */ import_react.default.createElement(CenterWrap, null, /* @__PURE__ */ import_react.default.createElement(Title, {
+        pt: !isJustChildren && halfM,
+        "data-testid": "card-title"
+      }, /* @__PURE__ */ import_react.default.createElement(TitleEllipsis, null, children), details && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+        "data-testid": "card-details",
+        cols: details.map(() => "min-content"),
+        mb: !(subText || subIcons) && halfM || 0,
+        pt: (0, import_ds_system.op)("/", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxs), 2)
+      }, details.map((d, i) => /* @__PURE__ */ import_react.default.createElement(Detail, {
+        key: i
+      }, d, i < details.length - 1 && /* @__PURE__ */ import_react.default.createElement(Detail, {
+        px: (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxs)
+      }, "\u2022"))))), rightProp && rightProp.map((prop, i) => /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+        ml: (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s),
+        key: i
+      }, prop))), subIcons && /* @__PURE__ */ import_react.default.createElement(SubTextWrap, {
+        ref: subTextRef
+      }, /* @__PURE__ */ import_react.default.createElement(SubText, null, subIcons), subText && subText[1] && /* @__PURE__ */ import_react.default.createElement(SubText, {
+        "data-testid": "card-subText"
+      }, subText[1])), subText && !subIcons && /* @__PURE__ */ import_react.default.createElement(SubTextWrap, {
+        ref: subTextRef
+      }, subText.map((s, i) => /* @__PURE__ */ import_react.default.createElement(SubText, {
+        "data-testid": "card-subText",
+        key: i
+      }, s))), /* @__PURE__ */ import_react.default.createElement(import_ExpandableRegion.ExpandableRegion, {
+        show: selected,
+        content: expandedContent
+      }), cardContent && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, cardContent)));
+    }
+  });
+};
+MobileCard.propTypes = import_props.cardPropsTypes;
+const DSMobileCardWithSchema = (0, import_react_desc.describe)(MobileCard);
+DSMobileCardWithSchema.propTypes = import_props.cardPropsTypes;
+var Card_default = (0, import_ds_system.withTheme)(MobileCard);
+module.exports = __toCommonJS(Card_exports);
+//# sourceMappingURL=Card.js.map

package/dist/cjs/MobileCard/Card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MobileCard/Card.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useRef } from 'react';\nimport { describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { space } from '@xstyled/styled-components';\nimport { color, border, op, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';\nimport GroupItem from '@elliemae/ds-shared/GroupContext/GroupItem';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledCard as Card } from './StyledCard';\nimport { ExpandChevron } from './ExpandChevron';\nimport { useHeight } from './useHeight';\nimport { ExpandableRegion } from './ExpandableRegion';\nimport { cardPropsTypes, MobileCardProps } from './props';\n\nconst TitleEllipsis = styled.div`\n  ${truncate()}\n`;\n\nconst Title = styled.div`\n  ${space}\n  ${truncate()}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: ${(props) => toMobile(props.theme.fontSizes.title[600])};\n  width: 100%;\n  ${color('neutral', 800)}\n`;\nconst Detail = styled.span`\n  ${space}\n  ${truncate()}\n  font-size: ${(props) => toMobile(props.theme.fontSizes.title[500])};\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n`;\nconst SubText = styled.span`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n  ${truncate()}\n  &:nth-child(2) {\n    padding-left: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  }\n`;\nconst SubTextWrap = styled.div`\n  ${truncate()}\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n  margin-top: 6px;\n  margin-bottom: 2px;\n  padding-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  font-size: ${(props) => toMobile(props.theme.fontSizes.subTitle[400])};\n  ${color('neutral', 500)}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  display: flex;\n  justify-content: space-between;\n`;\nconst LeftIcon = styled(Grid)<{ halfM: string }>`\n  & > span {\n    height: ${(props) => props.halfM};\n    width: ${(props) => props.halfM};\n  }\n\n  & > span > svg,\n  svg:not([fill]) {\n    height: ${(props) => props.halfM};\n    width: ${(props) => props.halfM};\n  }\n`;\nconst CenterWrap = styled.div`\n  display: flex;\n  align-items: center;\n  ${truncate()}\n`;\n\nconst MobileCard: React.ComponentType<MobileCardProps> = ({\n  children,\n  height = 'm',\n  leftAddOn,\n  leftProp,\n  rightProp,\n  subText,\n  subIcons,\n  details,\n  theme,\n  expandable = false,\n  expandedContent,\n  value,\n  cardContent,\n}) => {\n  const subTextRef = useRef(null);\n  const subTextHeight = useHeight(subTextRef);\n  const isJustChildren = !(subText || subIcons || details);\n  const halfM = op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 2);\n\n  return (\n    <GroupItem\n      render={(context = {}) => {\n        const { activeValue, onChange } = context;\n        const selected =\n          activeValue !== undefined && (activeValue === value || (activeValue?.length && activeValue?.includes(value)));\n\n        return (\n          <Card\n            data-testid=\"card-wrapper\"\n            minHeight={\n              height === 'm' ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl) : __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl)\n            }\n          >\n            {expandable && (\n              <ExpandChevron\n                isExpanded={selected}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onChange({ target: { value } });\n                }}\n                align={subText || subIcons ? 'top' : 'center'}\n              />\n            )}\n            <Grid pb={(subText || subIcons) && subTextHeight} cols={['auto', 'auto']} alignItems=\"center\">\n              {leftProp && <Grid ml={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}>{leftProp}</Grid>}\n              {leftAddOn && (\n                <LeftIcon ml={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)} halfM={halfM}>\n                  {leftAddOn}\n                </LeftIcon>\n              )}\n            </Grid>\n            <Grid\n              pl={!leftAddOn ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : __UNSAFE_SPACE_TO_DIMSUM(theme.space.xs)}\n              pr={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n              width=\"100%\"\n            >\n              <CenterWrap>\n                <Title pt={!isJustChildren && halfM} data-testid=\"card-title\">\n                  <TitleEllipsis>{children}</TitleEllipsis>\n                  {details && (\n                    <Grid\n                      data-testid=\"card-details\"\n                      cols={details.map(() => 'min-content')}\n                      mb={(!(subText || subIcons) && halfM) || 0}\n                      pt={op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)}\n                    >\n                      {details.map((d, i) => (\n                        <Detail key={i}>\n                          {d}\n                          {i < details.length - 1 && <Detail px={__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)}>\u2022</Detail>}\n                        </Detail>\n                      ))}\n                    </Grid>\n                  )}\n                </Title>\n                {rightProp &&\n                  rightProp.map((prop, i) => (\n                    <Grid ml={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)} key={i}>\n                      {prop}\n                    </Grid>\n                  ))}\n              </CenterWrap>\n              {subIcons && (\n                <SubTextWrap ref={subTextRef}>\n                  <SubText>{subIcons}</SubText>\n                  {subText && subText[1] && <SubText data-testid=\"card-subText\">{subText[1]}</SubText>}\n                </SubTextWrap>\n              )}\n              {subText && !subIcons && (\n                <SubTextWrap ref={subTextRef}>\n                  {subText.map((s, i) => (\n                    <SubText data-testid=\"card-subText\" key={i}>\n                      {s}\n                    </SubText>\n                  ))}\n                </SubTextWrap>\n              )}\n              <ExpandableRegion show={selected} content={expandedContent} />\n              {cardContent && <Grid>{cardContent}</Grid>}\n            </Grid>\n          </Card>\n        );\n      }}\n    />\n  );\n};\n\nMobileCard.propTypes = cardPropsTypes;\n\nconst DSMobileCardWithSchema = describe(MobileCard);\n\nDSMobileCardWithSchema.propTypes = cardPropsTypes;\n\nexport { DSMobileCardWithSchema };\n\nexport default withTheme(MobileCard);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/MobileCard/CardIcons.js

@@ -0,0 +1,107 @@
+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 CardIcons_exports = {};
+__export(CardIcons_exports, {
+  SubIcons: () => SubIcons
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_prop_types = __toESM(require("prop-types"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_grid = require("@elliemae/ds-grid");
+const CardIconsWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  align-items: center;
+  span,
+  svg {
+    width: 12px !important;
+    height: 12px !important;
+  }
+  span.icon-color-muted svg,
+  svg:not([fill]) {
+    fill: ${(props) => props.theme.colors.neutral["600"]};
+    height: 12px !important;
+    width: 12px !important;
+
+    & * {
+      fill: ${(props) => props.theme.colors.neutral["600"]};
+    }
+  }
+  span.icon-color-warn svg,
+  svg:not([fill]) {
+    fill: ${(props) => props.theme.colors.warning["600"]};
+    height: 12px !important;
+    width: 12px !important;
+
+    & * {
+      fill: ${(props) => props.theme.colors.warning["600"]};
+    }
+  }
+  span.icon-color-error svg,
+  svg:not([fill]) {
+    fill: ${(props) => props.theme.colors.danger["900"]};
+    height: 12px !important;
+    width: 12px !important;
+
+    & * {
+      fill: ${(props) => props.theme.colors.danger["900"]};
+    }
+  }
+  span.icon-color-success svg,
+  svg:not([fill]) {
+    fill: ${(props) => props.theme.colors.success["900"]};
+    height: 12px !important;
+    width: 12px !important;
+
+    & * {
+      fill: ${(props) => props.theme.colors.success["900"]};
+    }
+  }
+  span.icon-color-primary svg,
+  svg:not([fill]) {
+    fill: ${(props) => props.theme.colors.brand[600]};
+  }
+  span.icon-color-primary svg,
+  svg:not([fill]) {
+    fill: ${(props) => props.theme.colors.brand[600]};
+  }
+`;
+const SubIcons = ({ icons = [], colors = [] }) => /* @__PURE__ */ import_react.default.createElement(CardIconsWrapper, {
+  cols: icons.map(() => "12px"),
+  gutter: "6px",
+  height: "14px",
+  "data-testid": "card-subIcons"
+}, icons.map((Icon, i) => /* @__PURE__ */ import_react.default.createElement(Icon, {
+  key: i,
+  className: `icon-color-${colors[i] || "muted"}`
+})));
+SubIcons.propTypes = {
+  icons: import_prop_types.default.arrayOf(import_prop_types.default.func),
+  colors: import_prop_types.default.arrayOf(import_prop_types.default.oneOf(["muted", "warn", "error", "success", "primary"]))
+};
+module.exports = __toCommonJS(CardIcons_exports);
+//# sourceMappingURL=CardIcons.js.map

package/dist/cjs/MobileCard/CardIcons.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MobileCard/CardIcons.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst CardIconsWrapper = styled(Grid)`\n  align-items: center;\n  span,\n  svg {\n    width: 12px !important;\n    height: 12px !important;\n  }\n  span.icon-color-muted svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.neutral['600']};\n    height: 12px !important;\n    width: 12px !important;\n\n    & * {\n      fill: ${(props) => props.theme.colors.neutral['600']};\n    }\n  }\n  span.icon-color-warn svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.warning['600']};\n    height: 12px !important;\n    width: 12px !important;\n\n    & * {\n      fill: ${(props) => props.theme.colors.warning['600']};\n    }\n  }\n  span.icon-color-error svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.danger['900']};\n    height: 12px !important;\n    width: 12px !important;\n\n    & * {\n      fill: ${(props) => props.theme.colors.danger['900']};\n    }\n  }\n  span.icon-color-success svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.success['900']};\n    height: 12px !important;\n    width: 12px !important;\n\n    & * {\n      fill: ${(props) => props.theme.colors.success['900']};\n    }\n  }\n  span.icon-color-primary svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.brand[600]};\n  }\n  span.icon-color-primary svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.brand[600]};\n  }\n`;\n\nexport const SubIcons = ({ icons = [], colors = [] }) => (\n  <CardIconsWrapper cols={icons.map(() => '12px')} gutter=\"6px\" height=\"14px\" data-testid=\"card-subIcons\">\n    {icons.map((Icon, i) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Icon key={i} className={`icon-color-${colors[i] || 'muted'}`} />\n    ))}\n  </CardIconsWrapper>\n);\n\nSubIcons.propTypes = {\n  /**\n   * Array of  Icons\n   */\n  icons: PropTypes.arrayOf(PropTypes.func),\n  /**\n   * Color Types: muted, warn, error, success\n   */\n  colors: PropTypes.arrayOf(PropTypes.oneOf(['muted', 'warn', 'error', 'success', 'primary'])),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAsB;AACtB,+BAAmB;AACnB,qBAAqB;AAErB,MAAM,mBAAmB,sCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,cAKpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,cAKpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKnC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAKvC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,cAKpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,YAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzC,MAAM,WAAW,CAAC,EAAE,QAAQ,IAAI,SAAS,SAC9C,mDAAC,kBAAD;AAAA,EAAkB,MAAM,MAAM,IAAI,MAAM;AAAA,EAAS,QAAO;AAAA,EAAM,QAAO;AAAA,EAAO,eAAY;AAAA,GACrF,MAAM,IAAI,CAAC,MAAM,MAEhB,mDAAC,MAAD;AAAA,EAAM,KAAK;AAAA,EAAG,WAAW,cAAc,OAAO,MAAM;AAAA;AAK1D,SAAS,YAAY;AAAA,EAInB,OAAO,0BAAU,QAAQ,0BAAU;AAAA,EAInC,QAAQ,0BAAU,QAAQ,0BAAU,MAAM,CAAC,SAAS,QAAQ,SAAS,WAAW;AAAA;",
+  "names": []
+}

package/dist/cjs/MobileCard/ExpandChevron.js

@@ -0,0 +1,59 @@
+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 ExpandChevron_exports = {};
+__export(ExpandChevron_exports, {
+  ExpandChevron: () => ExpandChevron
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_prop_types = __toESM(require("prop-types"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_icons = require("@elliemae/ds-icons");
+const ChevronWrap = import_styled_components.default.div`
+  margin-top: ${(props) => props.align === "top" ? "18px" : "0"};
+  align-self: ${(props) => props.align === "top" ? "flex-start" : "center"};
+  margin-left: ${(props) => props.theme.space.xs};
+`;
+const ExpandChevron = ({ isExpanded, onClick, align }) => {
+  const Chevron = isExpanded ? import_ds_icons.ChevronDown : import_ds_icons.ChevronRight;
+  return /* @__PURE__ */ import_react.default.createElement(ChevronWrap, {
+    "data-testid": "ds-card-expand-chevron",
+    align
+  }, /* @__PURE__ */ import_react.default.createElement(Chevron, {
+    size: "s",
+    color: ["brand-primary", 800],
+    onClick
+  }));
+};
+ExpandChevron.propTypes = {
+  isExpanded: import_prop_types.default.bool,
+  onClick: import_prop_types.default.func.isRequired,
+  align: import_prop_types.default.string.isRequired
+};
+module.exports = __toCommonJS(ExpandChevron_exports);
+//# sourceMappingURL=ExpandChevron.js.map

package/dist/cjs/MobileCard/ExpandChevron.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MobileCard/ExpandChevron.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { ChevronDown, ChevronRight } from '@elliemae/ds-icons';\n\nconst ChevronWrap = styled.div`\n  margin-top: ${(props) => (props.align === 'top' ? '18px' : '0')};\n  align-self: ${(props) => (props.align === 'top' ? 'flex-start' : 'center')};\n  margin-left: ${(props) => props.theme.space.xs};\n`;\n\nexport const ExpandChevron = ({ isExpanded, onClick, align }) => {\n  const Chevron = isExpanded ? ChevronDown : ChevronRight;\n  return (\n    <ChevronWrap data-testid=\"ds-card-expand-chevron\" align={align}>\n      <Chevron size=\"s\" color={['brand-primary', 800]} onClick={onClick} />\n    </ChevronWrap>\n  );\n};\n\nExpandChevron.propTypes = {\n  /**\n   * Whether if the chevron is expanded or not\n   */\n  isExpanded: PropTypes.bool,\n  /**\n   * click callback\n   */\n  onClick: PropTypes.func.isRequired,\n  /**\n   * top or center\n   */\n  align: PropTypes.string.isRequired,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,+BAAmB;AACnB,sBAA0C;AAE1C,MAAM,cAAc,iCAAO;AAAA,gBACX,CAAC,UAAW,MAAM,UAAU,QAAQ,SAAS;AAAA,gBAC7C,CAAC,UAAW,MAAM,UAAU,QAAQ,eAAe;AAAA,iBAClD,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGvC,MAAM,gBAAgB,CAAC,EAAE,YAAY,SAAS,YAAY;AAC/D,QAAM,UAAU,aAAa,8BAAc;AAC3C,SACE,mDAAC,aAAD;AAAA,IAAa,eAAY;AAAA,IAAyB;AAAA,KAChD,mDAAC,SAAD;AAAA,IAAS,MAAK;AAAA,IAAI,OAAO,CAAC,iBAAiB;AAAA,IAAM;AAAA;AAAA;AAKvD,cAAc,YAAY;AAAA,EAIxB,YAAY,0BAAU;AAAA,EAItB,SAAS,0BAAU,KAAK;AAAA,EAIxB,OAAO,0BAAU,OAAO;AAAA;",
+  "names": []
+}

package/dist/cjs/MobileCard/ExpandableRegion.js

@@ -0,0 +1,81 @@
+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 ExpandableRegion_exports = {};
+__export(ExpandableRegion_exports, {
+  ExpandableRegion: () => ExpandableRegion
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_prop_types = __toESM(require("prop-types"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_system = require("@elliemae/ds-system");
+const RegionWrapper = import_styled_components.default.div`
+  width: 100%;
+  height: 100%;
+`;
+const Region = import_styled_components.default.div`
+  display: flex;
+  ${(props) => props.hide ? "visibility: hidden;" : ""}
+  transition: max-height ${(props) => props.animate ? "0.25s" : "0.20s"} linear;
+  max-height: 0;
+  ${(props) => props.animate ? `
+      max-height: ${props.refHeight}px;
+    ` : ""}
+  align-items: center;
+  ${(0, import_ds_system.truncate)()};
+  border-top: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+`;
+const ExpandableRegion = ({ show, content }) => {
+  const ref = (0, import_react.useRef)(null);
+  const [animate, setAnimate] = (0, import_react.useState)(show);
+  const [hide, setHide] = (0, import_react.useState)(!show);
+  (0, import_react.useEffect)(() => {
+    setAnimate(show);
+    if (show)
+      setHide(false);
+  }, [show]);
+  const hideOnAnimationEnd = () => {
+    if (!show)
+      setHide(true);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(Region, {
+    hide,
+    refHeight: ref?.current?.scrollHeight || 9999,
+    onTransitionEnd: hideOnAnimationEnd,
+    animate
+  }, /* @__PURE__ */ import_react.default.createElement(RegionWrapper, {
+    ref
+  }, content));
+};
+ExpandableRegion.propTypes = {
+  show: import_prop_types.default.bool,
+  content: import_prop_types.default.element
+};
+module.exports = __toCommonJS(ExpandableRegion_exports);
+//# sourceMappingURL=ExpandableRegion.js.map

package/dist/cjs/MobileCard/ExpandableRegion.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MobileCard/ExpandableRegion.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useEffect, useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { border, truncate } from '@elliemae/ds-system';\n\nconst RegionWrapper = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\nconst Region = styled.div<{ hide: boolean; animate: boolean; refHeight: number }>`\n  display: flex;\n  ${(props) => (props.hide ? 'visibility: hidden;' : '')}\n  transition: max-height ${(props) => (props.animate ? '0.25s' : '0.20s')} linear;\n  max-height: 0;\n  ${(props) =>\n    props.animate\n      ? `\n      max-height: ${props.refHeight}px;\n    `\n      : ''}\n  align-items: center;\n  ${truncate()};\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n`;\n\nexport const ExpandableRegion = ({ show, content }: { show: boolean; content: JSX.Element | JSX.Element[] }) => {\n  const ref = useRef<HTMLDivElement>(null);\n  // triggers transition\n  const [animate, setAnimate] = useState(show);\n  // needed to properly handle the transition. Hide after transition ends\n  const [hide, setHide] = useState(!show);\n  useEffect(() => {\n    setAnimate(show);\n    if (show) setHide(false);\n  }, [show]);\n\n  const hideOnAnimationEnd = () => {\n    if (!show) setHide(true);\n  };\n\n  return (\n    <Region\n      hide={hide}\n      // needed to handle transition, `auto` max-height isn't supported\n      refHeight={ref?.current?.scrollHeight || 9999}\n      onTransitionEnd={hideOnAnimationEnd}\n      animate={animate}\n    >\n      <RegionWrapper ref={ref}>{content}</RegionWrapper>\n    </Region>\n  );\n};\n\nExpandableRegion.propTypes = {\n  show: PropTypes.bool,\n  content: PropTypes.element,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmD;AACnD,wBAAsB;AACtB,+BAAmB;AACnB,uBAAiC;AAEjC,MAAM,gBAAgB,iCAAO;AAAA;AAAA;AAAA;AAK7B,MAAM,SAAS,iCAAO;AAAA;AAAA,IAElB,CAAC,UAAW,MAAM,OAAO,wBAAwB;AAAA,2BAC1B,CAAC,UAAW,MAAM,UAAU,UAAU;AAAA;AAAA,IAE7D,CAAC,UACD,MAAM,UACF;AAAA,oBACY,MAAM;AAAA,QAElB;AAAA;AAAA,IAEJ;AAAA,gBACY,CAAC,UAAU,6BAAO,MAAM,MAAM,OAAO,QAAQ;AAAA,iBAC5C,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAG7C,MAAM,mBAAmB,CAAC,EAAE,MAAM,cAAuE;AAC9G,QAAM,MAAM,yBAAuB;AAEnC,QAAM,CAAC,SAAS,cAAc,2BAAS;AAEvC,QAAM,CAAC,MAAM,WAAW,2BAAS,CAAC;AAClC,8BAAU,MAAM;AACd,eAAW;AACX,QAAI;AAAM,cAAQ;AAAA,KACjB,CAAC;AAEJ,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC;AAAM,cAAQ;AAAA;AAGrB,SACE,mDAAC,QAAD;AAAA,IACE;AAAA,IAEA,WAAW,KAAK,SAAS,gBAAgB;AAAA,IACzC,iBAAiB;AAAA,IACjB;AAAA,KAEA,mDAAC,eAAD;AAAA,IAAe;AAAA,KAAW;AAAA;AAKhC,iBAAiB,YAAY;AAAA,EAC3B,MAAM,0BAAU;AAAA,EAChB,SAAS,0BAAU;AAAA;",
+  "names": []
+}

package/dist/cjs/MobileCard/Group.js

@@ -0,0 +1,105 @@
+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 Group_exports = {};
+__export(Group_exports, {
+  DSMobileCardGroupWithSchema: () => DSMobileCardGroupWithSchema,
+  default: () => Group_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_styled_components = __toESM(require("styled-components"));
+var import_Group = __toESM(require("@elliemae/ds-shared/GroupContext/Group"));
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system = require("@elliemae/ds-system");
+var import_StyledCard = require("./StyledCard");
+const GroupGrid = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  ${import_StyledCard.StyledCard} {
+    border-top: none;
+  }
+
+  ${({ theme, withTopBorder }) => withTopBorder ? `border-top: ${(0, import_ds_system.border)(theme.colors.neutral["100"])}` : ""}
+`;
+const GroupTitle = import_styled_components.default.span`
+  ${(0, import_ds_system.truncate)()}
+`;
+const GroupTitleGrid = import_styled_components.default.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0 ${(props2) => props2.theme.space.xs};
+  font-size: ${(props2) => `calc(${(0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props2.theme.space.m)} / 2)`};
+  ${(0, import_ds_system.color)("neutral", "700")}
+  font-weight: ${(props2) => props2.theme.fontWeights.semibold};
+  background-color: ${(props2) => props2.theme.colors.brand["200"]};
+  border-top: ${(props2) => (0, import_ds_system.border)(props2.theme.colors.brand["300"])};
+  line-height: ${(props2) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props2.theme.space.m)};
+  @media (min-width: 1024px) {
+    background-color: ${(props2) => props2.theme.colors.neutral["080"]};
+    border-top: ${(props2) => (0, import_ds_system.border)(props2.theme.colors.neutral["080"])};
+  }
+`;
+const MobileCardGroup = ({
+  children,
+  theme,
+  title,
+  action,
+  activeValue,
+  allowMultipleOpen = false,
+  onChange = () => null
+}) => {
+  const rows = !title ? ["auto"] : [(0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.m), "auto"];
+  return /* @__PURE__ */ import_react.default.createElement(import_Group.default, {
+    activeValue,
+    multiple: allowMultipleOpen,
+    onChange
+  }, /* @__PURE__ */ import_react.default.createElement(GroupGrid, {
+    withTopBorder: !title,
+    rows
+  }, !!title && /* @__PURE__ */ import_react.default.createElement(GroupTitleGrid, {
+    pl: "xxs"
+  }, /* @__PURE__ */ import_react.default.createElement(GroupTitle, null, title), action), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, import_react.default.Children.map(children, (child, idx) => import_react.default.cloneElement(child, {
+    key: idx,
+    value: idx,
+    idx
+  }), null))));
+};
+const props = {
+  theme: import_react_desc.PropTypes.object.isRequired.description(""),
+  title: import_react_desc.PropTypes.string.description(""),
+  children: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.element, import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.element)]).isRequired.description(""),
+  action: import_react_desc.PropTypes.element.description(""),
+  activeValue: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.number, import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.number)]).description(""),
+  allowMultipleOpen: import_react_desc.PropTypes.bool.description(""),
+  onChange: import_react_desc.PropTypes.func.description("")
+};
+MobileCardGroup.propTypes = props;
+const DSMobileCardGroupWithSchema = (0, import_react_desc.describe)(MobileCardGroup);
+DSMobileCardGroupWithSchema.propTypes = props;
+var Group_default = (0, import_ds_system.withTheme)(MobileCardGroup);
+module.exports = __toCommonJS(Group_exports);
+//# sourceMappingURL=Group.js.map

package/dist/cjs/MobileCard/Group.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MobileCard/Group.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/no-array-index-key */\nimport React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport Group from '@elliemae/ds-shared/GroupContext/Group';\nimport { Grid } from '@elliemae/ds-grid';\nimport { color, border, withTheme, truncate, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { StyledCard as Card } from './StyledCard';\n\nconst GroupGrid = styled(Grid)`\n  ${Card} {\n    border-top: none;\n  }\n\n  ${({ theme, withTopBorder }) => (withTopBorder ? `border-top: ${border(theme.colors.neutral['100'])}` : '')}\n`;\n\nconst GroupTitle = styled.span`\n  ${truncate()}\n`;\n\nconst GroupTitleGrid = styled.div`\n  display: flex;\n  justify-content: space-between;\n  padding: 0 ${(props) => props.theme.space.xs};\n  font-size: ${(props) => `calc(${__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)} / 2)`};\n  ${color('neutral', '700')}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  background-color: ${(props) => props.theme.colors.brand['200']};\n  border-top: ${(props) => border(props.theme.colors.brand['300'])};\n  line-height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  @media (min-width: 1024px) {\n    background-color: ${(props) => props.theme.colors.neutral['080']};\n    border-top: ${(props) => border(props.theme.colors.neutral['080'])};\n  }\n`;\n\nconst MobileCardGroup = ({\n  children,\n  theme,\n  title,\n  action,\n  activeValue,\n  allowMultipleOpen = false,\n  onChange = () => null,\n}) => {\n  const rows = !title ? ['auto'] : [__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];\n\n  return (\n    <Group activeValue={activeValue} multiple={allowMultipleOpen} onChange={onChange}>\n      <GroupGrid withTopBorder={!title} rows={rows}>\n        {!!title && (\n          <GroupTitleGrid pl=\"xxs\">\n            <GroupTitle>{title}</GroupTitle>\n            {action}\n          </GroupTitleGrid>\n        )}\n        <Grid>\n          {React.Children.map(\n            children,\n            (child, idx) =>\n              React.cloneElement(child, {\n                key: idx,\n                value: idx,\n                idx,\n              }),\n            null,\n          )}\n        </Grid>\n      </GroupGrid>\n    </Group>\n  );\n};\n\nconst props = {\n  theme: PropTypes.object.isRequired.description(''),\n  /**\n   * Defines group title\n   */\n  title: PropTypes.string.description(''),\n  /**\n   * Pass one or more Mobile Cards to render as a group\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description(''),\n  /**\n   * Group header addon\n   */\n  action: PropTypes.element.description(''),\n  /**  */\n  activeValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).description(''),\n  /**  */\n  allowMultipleOpen: PropTypes.bool.description(''),\n  /**  */\n  onChange: PropTypes.func.description(''),\n};\n\nMobileCardGroup.propTypes = props;\n\nconst DSMobileCardGroupWithSchema = describe(MobileCardGroup);\n\nDSMobileCardGroupWithSchema.propTypes = props;\n\nexport { DSMobileCardGroupWithSchema };\n\nexport default withTheme(MobileCardGroup);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAoC;AACpC,+BAAmB;AACnB,mBAAkB;AAClB,qBAAqB;AACrB,uBAA6E;AAC7E,wBAAmC;AAEnC,MAAM,YAAY,sCAAO;AAAA,IACrB;AAAA;AAAA;AAAA;AAAA,IAIA,CAAC,EAAE,OAAO,oBAAqB,gBAAgB,eAAe,6BAAO,MAAM,OAAO,QAAQ,YAAY;AAAA;AAG1G,MAAM,aAAa,iCAAO;AAAA,IACtB;AAAA;AAGJ,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA,eAGf,CAAC,WAAU,OAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,WAAU,QAAQ,+CAAyB,OAAM,MAAM,MAAM;AAAA,IACzE,4BAAM,WAAW;AAAA,iBACJ,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA,sBAC9B,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA,gBAC1C,CAAC,WAAU,6BAAO,OAAM,MAAM,OAAO,MAAM;AAAA,iBAC1C,CAAC,WAAU,+CAAyB,OAAM,MAAM,MAAM;AAAA;AAAA,wBAE/C,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,kBAC5C,CAAC,WAAU,6BAAO,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI/D,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,WAAW,MAAM;AAAA,MACb;AACJ,QAAM,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,+CAAyB,MAAM,MAAM,IAAI;AAE3E,SACE,mDAAC,sBAAD;AAAA,IAAO;AAAA,IAA0B,UAAU;AAAA,IAAmB;AAAA,KAC5D,mDAAC,WAAD;AAAA,IAAW,eAAe,CAAC;AAAA,IAAO;AAAA,KAC/B,CAAC,CAAC,SACD,mDAAC,gBAAD;AAAA,IAAgB,IAAG;AAAA,KACjB,mDAAC,YAAD,MAAa,QACZ,SAGL,mDAAC,qBAAD,MACG,qBAAM,SAAS,IACd,UACA,CAAC,OAAO,QACN,qBAAM,aAAa,OAAO;AAAA,IACxB,KAAK;AAAA,IACL,OAAO;AAAA,IACP;AAAA,MAEJ;AAAA;AAQZ,MAAM,QAAQ;AAAA,EACZ,OAAO,4BAAU,OAAO,WAAW,YAAY;AAAA,EAI/C,OAAO,4BAAU,OAAO,YAAY;AAAA,EAIpC,UAAU,4BAAU,UAAU,CAAC,4BAAU,SAAS,4BAAU,QAAQ,4BAAU,WAAW,WAAW,YAAY;AAAA,EAIhH,QAAQ,4BAAU,QAAQ,YAAY;AAAA,EAEtC,aAAa,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,QAAQ,4BAAU,UAAU,YAAY;AAAA,EAEtG,mBAAmB,4BAAU,KAAK,YAAY;AAAA,EAE9C,UAAU,4BAAU,KAAK,YAAY;AAAA;AAGvC,gBAAgB,YAAY;AAE5B,MAAM,8BAA8B,gCAAS;AAE7C,4BAA4B,YAAY;AAIxC,IAAO,gBAAQ,gCAAU;",
+  "names": []
+}