@elliemae/ds-mobile 3.0.0-next.1 → 3.0.0-next.5

package/dist/esm/MobileCard/Card.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/Card.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/MobileCard/CardIcons.js

@@ -0,0 +1,78 @@
+import * as React from "react";
+import React2 from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { Grid } from "@elliemae/ds-grid";
+const CardIconsWrapper = styled(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__ */ React2.createElement(CardIconsWrapper, {
+  cols: icons.map(() => "12px"),
+  gutter: "6px",
+  height: "14px",
+  "data-testid": "card-subIcons"
+}, icons.map((Icon, i) => /* @__PURE__ */ React2.createElement(Icon, {
+  key: i,
+  className: `icon-color-${colors[i] || "muted"}`
+})));
+SubIcons.propTypes = {
+  icons: PropTypes.arrayOf(PropTypes.func),
+  colors: PropTypes.arrayOf(PropTypes.oneOf(["muted", "warn", "error", "success", "primary"]))
+};
+export {
+  SubIcons
+};
+//# sourceMappingURL=CardIcons.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/CardIcons.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,OAAO;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,qCAAC,kBAAD;AAAA,EAAkB,MAAM,MAAM,IAAI,MAAM;AAAA,EAAS,QAAO;AAAA,EAAM,QAAO;AAAA,EAAO,eAAY;AAAA,GACrF,MAAM,IAAI,CAAC,MAAM,MAEhB,qCAAC,MAAD;AAAA,EAAM,KAAK;AAAA,EAAG,WAAW,cAAc,OAAO,MAAM;AAAA;AAK1D,SAAS,YAAY;AAAA,EAInB,OAAO,UAAU,QAAQ,UAAU;AAAA,EAInC,QAAQ,UAAU,QAAQ,UAAU,MAAM,CAAC,SAAS,QAAQ,SAAS,WAAW;AAAA;",
+  "names": []
+}

package/dist/esm/MobileCard/ExpandChevron.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import React2 from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { ChevronDown, ChevronRight } from "@elliemae/ds-icons";
+const ChevronWrap = styled.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 ? ChevronDown : ChevronRight;
+  return /* @__PURE__ */ React2.createElement(ChevronWrap, {
+    "data-testid": "ds-card-expand-chevron",
+    align
+  }, /* @__PURE__ */ React2.createElement(Chevron, {
+    size: "s",
+    color: ["brand-primary", 800],
+    onClick
+  }));
+};
+ExpandChevron.propTypes = {
+  isExpanded: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  align: PropTypes.string.isRequired
+};
+export {
+  ExpandChevron
+};
+//# sourceMappingURL=ExpandChevron.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/ExpandChevron.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;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,cAAc;AAC3C,SACE,qCAAC,aAAD;AAAA,IAAa,eAAY;AAAA,IAAyB;AAAA,KAChD,qCAAC,SAAD;AAAA,IAAS,MAAK;AAAA,IAAI,OAAO,CAAC,iBAAiB;AAAA,IAAM;AAAA;AAAA;AAKvD,cAAc,YAAY;AAAA,EAIxB,YAAY,UAAU;AAAA,EAItB,SAAS,UAAU,KAAK;AAAA,EAIxB,OAAO,UAAU,OAAO;AAAA;",
+  "names": []
+}

package/dist/esm/MobileCard/ExpandableRegion.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+import React2, { useEffect, useState, useRef } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { border, truncate } from "@elliemae/ds-system";
+const RegionWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+const Region = styled.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;
+  ${truncate()};
+  border-top: ${(props) => border(props.theme.colors.neutral["300"])};
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+`;
+const ExpandableRegion = ({ show, content }) => {
+  const ref = useRef(null);
+  const [animate, setAnimate] = useState(show);
+  const [hide, setHide] = useState(!show);
+  useEffect(() => {
+    setAnimate(show);
+    if (show)
+      setHide(false);
+  }, [show]);
+  const hideOnAnimationEnd = () => {
+    if (!show)
+      setHide(true);
+  };
+  return /* @__PURE__ */ React2.createElement(Region, {
+    hide,
+    refHeight: ref?.current?.scrollHeight || 9999,
+    onTransitionEnd: hideOnAnimationEnd,
+    animate
+  }, /* @__PURE__ */ React2.createElement(RegionWrapper, {
+    ref
+  }, content));
+};
+ExpandableRegion.propTypes = {
+  show: PropTypes.bool,
+  content: PropTypes.element
+};
+export {
+  ExpandableRegion
+};
+//# sourceMappingURL=ExpandableRegion.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/ExpandableRegion.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAK7B,MAAM,SAAS,OAAO;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,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA,iBAC5C,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAG7C,MAAM,mBAAmB,CAAC,EAAE,MAAM,cAAuE;AAC9G,QAAM,MAAM,OAAuB;AAEnC,QAAM,CAAC,SAAS,cAAc,SAAS;AAEvC,QAAM,CAAC,MAAM,WAAW,SAAS,CAAC;AAClC,YAAU,MAAM;AACd,eAAW;AACX,QAAI;AAAM,cAAQ;AAAA,KACjB,CAAC;AAEJ,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC;AAAM,cAAQ;AAAA;AAGrB,SACE,qCAAC,QAAD;AAAA,IACE;AAAA,IAEA,WAAW,KAAK,SAAS,gBAAgB;AAAA,IACzC,iBAAiB;AAAA,IACjB;AAAA,KAEA,qCAAC,eAAD;AAAA,IAAe;AAAA,KAAW;AAAA;AAKhC,iBAAiB,YAAY;AAAA,EAC3B,MAAM,UAAU;AAAA,EAChB,SAAS,UAAU;AAAA;",
+  "names": []
+}

package/dist/esm/MobileCard/Group.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/Group.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO;AAAA,IACrB;AAAA;AAAA;AAAA;AAAA,IAIA,CAAC,EAAE,OAAO,oBAAqB,gBAAgB,eAAe,OAAO,MAAM,OAAO,QAAQ,YAAY;AAAA;AAG1G,MAAM,aAAa,OAAO;AAAA,IACtB;AAAA;AAGJ,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,eAGf,CAAC,WAAU,OAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,WAAU,QAAQ,yBAAyB,OAAM,MAAM,MAAM;AAAA,IACzE,MAAM,WAAW;AAAA,iBACJ,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA,sBAC9B,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA,gBAC1C,CAAC,WAAU,OAAO,OAAM,MAAM,OAAO,MAAM;AAAA,iBAC1C,CAAC,WAAU,yBAAyB,OAAM,MAAM,MAAM;AAAA;AAAA,wBAE/C,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,kBAC5C,CAAC,WAAU,OAAO,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,yBAAyB,MAAM,MAAM,IAAI;AAE3E,SACE,qCAAC,OAAD;AAAA,IAAO;AAAA,IAA0B,UAAU;AAAA,IAAmB;AAAA,KAC5D,qCAAC,WAAD;AAAA,IAAW,eAAe,CAAC;AAAA,IAAO;AAAA,KAC/B,CAAC,CAAC,SACD,qCAAC,gBAAD;AAAA,IAAgB,IAAG;AAAA,KACjB,qCAAC,YAAD,MAAa,QACZ,SAGL,qCAAC,MAAD,MACG,OAAM,SAAS,IACd,UACA,CAAC,OAAO,QACN,OAAM,aAAa,OAAO;AAAA,IACxB,KAAK;AAAA,IACL,OAAO;AAAA,IACP;AAAA,MAEJ;AAAA;AAQZ,MAAM,QAAQ;AAAA,EACZ,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAI/C,OAAO,UAAU,OAAO,YAAY;AAAA,EAIpC,UAAU,UAAU,UAAU,CAAC,UAAU,SAAS,UAAU,QAAQ,UAAU,WAAW,WAAW,YAAY;AAAA,EAIhH,QAAQ,UAAU,QAAQ,YAAY;AAAA,EAEtC,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,UAAU,YAAY;AAAA,EAEtG,mBAAmB,UAAU,KAAK,YAAY;AAAA,EAE9C,UAAU,UAAU,KAAK,YAAY;AAAA;AAGvC,gBAAgB,YAAY;AAE5B,MAAM,8BAA8B,SAAS;AAE7C,4BAA4B,YAAY;AAIxC,IAAO,gBAAQ,UAAU;",
+  "names": []
+}

package/dist/esm/MobileCard/StyledCard.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import styled from "styled-components";
+import { border } from "@elliemae/ds-system";
+const StyledCard = styled.div`
+  display: flex;
+  align-items: center;
+  height: fit-content;
+  min-height: ${(props) => props.minHeight};
+  border: ${(props) => border(props.theme.colors.neutral["100"])};
+  border-bottom: ${(props) => border(".5px", props.theme.colors.neutral["500"])};
+`;
+export {
+  StyledCard
+};
+//# sourceMappingURL=StyledCard.js.map

package/dist/esm/MobileCard/StyledCard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/StyledCard.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { border } from '@elliemae/ds-system';\n\nexport const StyledCard = styled.div<{ minHeight: string }>`\n  display: flex;\n  align-items: center;\n  height: fit-content;\n  min-height: ${(props) => props.minHeight};\n  border: ${(props) => border(props.theme.colors.neutral['100'])};\n  border-bottom: ${(props) => border('.5px', props.theme.colors.neutral['500'])};\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIjB,CAAC,UAAU,MAAM;AAAA,YACrB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA,mBACtC,CAAC,UAAU,OAAO,QAAQ,MAAM,MAAM,OAAO,QAAQ;AAAA;",
+  "names": []
+}

package/dist/esm/MobileCard/index.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import MobileCard, { DSMobileCardWithSchema } from "./Card";
+import MobileGroup, { DSMobileCardGroupWithSchema } from "./Group";
+import { ActionAddon } from "./ActionAddon";
+MobileCard.Group = MobileGroup;
+const DSMobileCard = MobileCard;
+export * from "./CardIcons";
+var MobileCard_default = MobileCard;
+export {
+  ActionAddon,
+  DSMobileCard,
+  DSMobileCardGroupWithSchema,
+  DSMobileCardWithSchema,
+  MobileCard_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/MobileCard/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import MobileCard, { DSMobileCardWithSchema } from './Card';\nimport MobileGroup, { DSMobileCardGroupWithSchema } from './Group';\nimport { ActionAddon } from './ActionAddon';\n\nMobileCard.Group = MobileGroup;\nconst DSMobileCard = MobileCard;\n\nexport {\n  DSMobileCard,\n  ActionAddon,\n  DSMobileCardWithSchema,\n  DSMobileCardGroupWithSchema,\n};\nexport * from './CardIcons';\nexport default MobileCard;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA,WAAW,QAAQ;AACnB,MAAM,eAAe;AAQrB;AACA,IAAO,qBAAQ;",
+  "names": []
+}

package/dist/esm/MobileCard/props.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { PropTypes } from "react-desc";
+const cardPropsTypes = {
+  height: PropTypes.oneOf(["s", "m"]).description("card height"),
+  children: PropTypes.string.description("Defines mobile card title").isRequired,
+  expandable: PropTypes.bool.description("Wheter if the card is expandable or not"),
+  expandedContent: PropTypes.element.description("content to display in expand card section"),
+  leftAddOn: PropTypes.element.description("Icon to the left of the card. Size is adjusted automatically."),
+  leftProp: PropTypes.element.description("Pass an element to render left. For example a Button with an icon"),
+  rightProp: PropTypes.arrayOf(PropTypes.element).description("Pass an array of 1 or 2 elements to render right. For example a Button with an icon"),
+  subText: PropTypes.arrayOf(PropTypes.string).description("Pass an array of 1 or 2 strings"),
+  subIcons: PropTypes.element.description("SubIcons component"),
+  details: PropTypes.arrayOf(PropTypes.string).description("Pass an array of 1, 2 or 3 strings"),
+  theme: PropTypes.object.description("").isRequired,
+  value: PropTypes.number.description(""),
+  cardContent: PropTypes.node.description("JSX content for the card")
+};
+export {
+  cardPropsTypes
+};
+//# sourceMappingURL=props.js.map

package/dist/esm/MobileCard/props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes } from 'react-desc';\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport interface MobileCardProps {\n  children: React.ReactNode | React.ReactNode[];\n  height: 's' | 'm';\n  leftAddOn: JSX.Element | JSX.Element[];\n  leftProp: JSX.Element | JSX.Element[];\n  rightProp: JSX.Element[];\n  subText: string[];\n  subIcons: JSX.Element | JSX.Element[];\n  details: string[];\n  theme: Theme;\n  value: number;\n  expandable: boolean;\n  expandedContent: JSX.Element | JSX.Element[];\n  cardContent: JSX.Element | JSX.Element[];\n}\n\nexport const cardPropsTypes = {\n  /**\n   * card height\n   */\n  height: PropTypes.oneOf(['s', 'm']).description('card height'),\n  /**\n   * Defines mobile card title\n   */\n  children: PropTypes.string.description('Defines mobile card title').isRequired,\n  /**\n   * Wheter if the card is expandable or not\n   */\n  expandable: PropTypes.bool.description('Wheter if the card is expandable or not'),\n  /**\n   * content to display in expand card section\n   */\n  expandedContent: PropTypes.element.description('content to display in expand card section'),\n  /**\n   * Icon to the left of the card. Size is adjusted automatically.\n   */\n  leftAddOn: PropTypes.element.description('Icon to the left of the card. Size is adjusted automatically.'),\n  /**\n   * Pass an element to render left. For example a Button with an icon\n   */\n  leftProp: PropTypes.element.description('Pass an element to render left. For example a Button with an icon'),\n  /**\n   * Pass an array of 1 or 2 elements to render right. For example a Button with an icon\n   */\n  rightProp: PropTypes.arrayOf(PropTypes.element).description(\n    'Pass an array of 1 or 2 elements to render right. For example a Button with an icon',\n  ),\n  /**\n   * Pass an array of 1 or 2 strings\n   */\n  subText: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1 or 2 strings'),\n  /**\n   * SubIcons component\n   */\n  subIcons: PropTypes.element.description('SubIcons component'),\n  /**\n   * Pass an array of 1, 2 or 3 strings\n   */\n  details: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),\n  theme: PropTypes.object.description('').isRequired,\n  value: PropTypes.number.description(''),\n  cardContent: PropTypes.node.description('JSX content for the card'),\n};\n"],
+  "mappings": "AAAA;ACCA;AAmBO,MAAM,iBAAiB;AAAA,EAI5B,QAAQ,UAAU,MAAM,CAAC,KAAK,MAAM,YAAY;AAAA,EAIhD,UAAU,UAAU,OAAO,YAAY,6BAA6B;AAAA,EAIpE,YAAY,UAAU,KAAK,YAAY;AAAA,EAIvC,iBAAiB,UAAU,QAAQ,YAAY;AAAA,EAI/C,WAAW,UAAU,QAAQ,YAAY;AAAA,EAIzC,UAAU,UAAU,QAAQ,YAAY;AAAA,EAIxC,WAAW,UAAU,QAAQ,UAAU,SAAS,YAC9C;AAAA,EAKF,SAAS,UAAU,QAAQ,UAAU,QAAQ,YAAY;AAAA,EAIzD,UAAU,UAAU,QAAQ,YAAY;AAAA,EAIxC,SAAS,UAAU,QAAQ,UAAU,QAAQ,YAAY;AAAA,EACzD,OAAO,UAAU,OAAO,YAAY,IAAI;AAAA,EACxC,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,aAAa,UAAU,KAAK,YAAY;AAAA;",
+  "names": []
+}

package/{esm → dist/esm}/MobileCard/useHeight.js

@@ -1,13 +1,11 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useState, useEffect } from 'react';
-import { rem } from 'polished';
-
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { rem } from "polished";
 function getCurrentFont() {
-  return Number(window.getComputedStyle(document.querySelector(':root')).getPropertyValue('font-size').match(/\d+/)[0]);
+  return Number(window.getComputedStyle(document.querySelector(":root")).getPropertyValue("font-size").match(/\d+/)[0]);
 }
-
 function useHeight(ref) {
-  const [height, setHeight] = useState('0rem');
+  const [height, setHeight] = useState("0rem");
   const [currentFont, setCurrentFont] = useState(13);
   useEffect(() => {
     setCurrentFont(getCurrentFont());
@@ -19,5 +17,7 @@ function useHeight(ref) {
   }, [ref.current, currentFont]);
   return height;
 }
-
-export { useHeight };
+export {
+  useHeight
+};
+//# sourceMappingURL=useHeight.js.map

package/dist/esm/MobileCard/useHeight.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/useHeight.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useState } from 'react';\nimport { rem } from 'polished';\n\nfunction getCurrentFont() {\n  return Number(\n    window\n      .getComputedStyle(document.querySelector(':root'))\n      .getPropertyValue('font-size')\n      .match(/\\d+/)[0],\n  );\n}\n\nexport function useHeight(ref) {\n  const [height, setHeight] = useState('0rem');\n  const [currentFont, setCurrentFont] = useState(13);\n  useEffect(() => {\n    setCurrentFont(getCurrentFont());\n  }, []);\n\n  useEffect(() => {\n    if (ref.current && height !== rem(ref.current.clientHeight, currentFont)) {\n      setHeight(rem(ref.current.clientHeight, currentFont));\n    }\n  }, [ref.current, currentFont]);\n\n  return height;\n}\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA,0BAA0B;AACxB,SAAO,OACL,OACG,iBAAiB,SAAS,cAAc,UACxC,iBAAiB,aACjB,MAAM,OAAO;AAAA;AAIb,mBAAmB,KAAK;AAC7B,QAAM,CAAC,QAAQ,aAAa,SAAS;AACrC,QAAM,CAAC,aAAa,kBAAkB,SAAS;AAC/C,YAAU,MAAM;AACd,mBAAe;AAAA,KACd;AAEH,YAAU,MAAM;AACd,QAAI,IAAI,WAAW,WAAW,IAAI,IAAI,QAAQ,cAAc,cAAc;AACxE,gBAAU,IAAI,IAAI,QAAQ,cAAc;AAAA;AAAA,KAEzC,CAAC,IAAI,SAAS;AAEjB,SAAO;AAAA;",
+  "names": []
+}