@elliemae/ds-mobile 3.1.0-next.2 → 3.1.0-next.20

package/dist/cjs/MobileCard/Card.js

@@ -26,9 +26,7 @@ __export(Card_exports, {
 module.exports = __toCommonJS(Card_exports);
 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_utilities = require("@elliemae/ds-utilities");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_shared = require("@elliemae/ds-shared");
 var import_ds_grid = require("@elliemae/ds-grid");
@@ -37,31 +35,31 @@ 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`
+const TitleEllipsis = import_ds_system.styled.div`
   ${(0, import_ds_system.truncate)()}
 `;
-const Title = import_styled_components.default.div`
-  ${import_styled_components2.space}
+const Title = import_ds_system.styled.div`
+  ${import_ds_system.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}
+const Detail = import_ds_system.styled.span`
+  ${import_ds_system.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`
+const SubText = import_ds_system.styled.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`
+const SubTextWrap = import_ds_system.styled.div`
   ${(0, import_ds_system.truncate)()}
   border-top: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
   margin-top: 6px;
@@ -73,7 +71,7 @@ const SubTextWrap = import_styled_components.default.div`
   display: flex;
   justify-content: space-between;
 `;
-const LeftIcon = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const LeftIcon = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   & > span {
     height: ${(props) => props.halfM};
     width: ${(props) => props.halfM};
@@ -85,7 +83,7 @@ const LeftIcon = (0, import_styled_components.default)(import_ds_grid.Grid)`
     width: ${(props) => props.halfM};
   }
 `;
-const CenterWrap = import_styled_components.default.div`
+const CenterWrap = import_ds_system.styled.div`
   display: flex;
   align-items: center;
   ${(0, import_ds_system.truncate)()}
@@ -169,7 +167,7 @@ const MobileCard = ({
 };
 MobileCard.propTypes = import_props.cardPropsTypes;
 MobileCard.displayName = "MobileCard";
-const DSMobileCardWithSchema = (0, import_react_desc.describe)(MobileCard);
+const DSMobileCardWithSchema = (0, import_ds_utilities.describe)(MobileCard);
 DSMobileCardWithSchema.propTypes = import_props.cardPropsTypes;
 var Card_default = (0, import_ds_system.withTheme)(MobileCard);
 //# sourceMappingURL=Card.js.map

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

@@ -1,7 +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';\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;\nMobileCard.displayName = 'MobileCard';\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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",
+  "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 '@elliemae/ds-utilities';\nimport {\n  styled,\n  space,\n  color,\n  border,\n  op,\n  truncate,\n  withTheme,\n  __UNSAFE_SPACE_TO_DIMSUM,\n  toMobile,\n} from '@elliemae/ds-system';\nimport { GroupItem } from '@elliemae/ds-shared';\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;\nMobileCard.displayName = 'MobileCard';\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

@@ -26,9 +26,9 @@ module.exports = __toCommonJS(CardIcons_exports);
 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");
 var import_ds_grid = require("@elliemae/ds-grid");
-const CardIconsWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const CardIconsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   align-items: center;
   span,
   svg {

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

@@ -1,7 +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;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAsB;AACtB,+BAAmB;AACnB,qBAAqB;AAErB,MAAM,mBAAmB,sCAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASxB,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,CAAC,GAAG,SAAS,CAAC,QAC/C,mDAAC;AAAA,EAAiB,MAAM,MAAM,IAAI,MAAM,MAAM;AAAA,EAAG,QAAO;AAAA,EAAM,QAAO;AAAA,EAAO,eAAY;AAAA,GACrF,MAAM,IAAI,CAAC,MAAM,MAEhB,mDAAC;AAAA,EAAK,KAAK;AAAA,EAAG,WAAW,cAAc,OAAO,MAAM;AAAA,CAAW,CAChE,CACH;AAGF,SAAS,YAAY;AAAA,EAInB,OAAO,0BAAU,QAAQ,0BAAU,IAAI;AAAA,EAIvC,QAAQ,0BAAU,QAAQ,0BAAU,MAAM,CAAC,SAAS,QAAQ,SAAS,WAAW,SAAS,CAAC,CAAC;AAC7F;",
+  "sourcesContent": ["/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\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;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAsB;AACtB,uBAAuB;AACvB,qBAAqB;AAErB,MAAM,mBAAmB,6BAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASxB,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,CAAC,GAAG,SAAS,CAAC,QAC/C,mDAAC;AAAA,EAAiB,MAAM,MAAM,IAAI,MAAM,MAAM;AAAA,EAAG,QAAO;AAAA,EAAM,QAAO;AAAA,EAAO,eAAY;AAAA,GACrF,MAAM,IAAI,CAAC,MAAM,MAEhB,mDAAC;AAAA,EAAK,KAAK;AAAA,EAAG,WAAW,cAAc,OAAO,MAAM;AAAA,CAAW,CAChE,CACH;AAGF,SAAS,YAAY;AAAA,EAInB,OAAO,0BAAU,QAAQ,0BAAU,IAAI;AAAA,EAIvC,QAAQ,0BAAU,QAAQ,0BAAU,MAAM,CAAC,SAAS,QAAQ,SAAS,WAAW,SAAS,CAAC,CAAC;AAC7F;",
   "names": []
 }

package/dist/cjs/MobileCard/ExpandChevron.js

@@ -26,9 +26,9 @@ module.exports = __toCommonJS(ExpandChevron_exports);
 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");
 var import_ds_icons = require("@elliemae/ds-icons");
-const ChevronWrap = import_styled_components.default.div`
+const ChevronWrap = import_ds_system.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};

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

@@ -1,7 +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;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;AAAA,IAAY,eAAY;AAAA,IAAyB;AAAA,KAChD,mDAAC;AAAA,IAAQ,MAAK;AAAA,IAAI,OAAO,CAAC,iBAAiB,GAAG;AAAA,IAAG;AAAA,GAAkB,CACrE;AAEJ;AAEA,cAAc,YAAY;AAAA,EAIxB,YAAY,0BAAU;AAAA,EAItB,SAAS,0BAAU,KAAK;AAAA,EAIxB,OAAO,0BAAU,OAAO;AAC1B;",
+  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\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;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,uBAAuB;AACvB,sBAA0C;AAE1C,MAAM,cAAc,wBAAO;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;AAAA,IAAY,eAAY;AAAA,IAAyB;AAAA,KAChD,mDAAC;AAAA,IAAQ,MAAK;AAAA,IAAI,OAAO,CAAC,iBAAiB,GAAG;AAAA,IAAG;AAAA,GAAkB,CACrE;AAEJ;AAEA,cAAc,YAAY;AAAA,EAIxB,YAAY,0BAAU;AAAA,EAItB,SAAS,0BAAU,KAAK;AAAA,EAIxB,OAAO,0BAAU,OAAO;AAC1B;",
   "names": []
 }

package/dist/cjs/MobileCard/ExpandableRegion.js

@@ -26,13 +26,13 @@ module.exports = __toCommonJS(ExpandableRegion_exports);
 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`
+var import_ds_system2 = require("@elliemae/ds-system");
+const RegionWrapper = import_ds_system.styled.div`
   width: 100%;
   height: 100%;
 `;
-const Region = import_styled_components.default.div`
+const Region = import_ds_system.styled.div`
   display: flex;
   ${(props) => props.hide ? "visibility: hidden;" : ""}
   transition: max-height ${(props) => props.animate ? "0.25s" : "0.20s"} linear;
@@ -41,8 +41,8 @@ const Region = import_styled_components.default.div`
       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"])};
+  ${(0, import_ds_system2.truncate)()};
+  border-top: ${(props) => (0, import_ds_system2.border)(props.theme.colors.neutral["300"])};
   font-weight: ${(props) => props.theme.fontWeights.regular};
 `;
 const ExpandableRegion = ({ show, content }) => {

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

@@ -1,7 +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;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,+BAAS;AAAA,gBACG,CAAC,UAAU,6BAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA,iBAClD,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAG7C,MAAM,mBAAmB,CAAC,EAAE,MAAM,cAAuE;AAC9G,QAAM,MAAM,yBAAuB,IAAI;AAEvC,QAAM,CAAC,SAAS,cAAc,2BAAS,IAAI;AAE3C,QAAM,CAAC,MAAM,WAAW,2BAAS,CAAC,IAAI;AACtC,8BAAU,MAAM;AACd,eAAW,IAAI;AACf,QAAI;AAAM,cAAQ,KAAK;AAAA,EACzB,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC;AAAM,cAAQ,IAAI;AAAA,EACzB;AAEA,SACE,mDAAC;AAAA,IACC;AAAA,IAEA,WAAW,KAAK,SAAS,gBAAgB;AAAA,IACzC,iBAAiB;AAAA,IACjB;AAAA,KAEA,mDAAC;AAAA,IAAc;AAAA,KAAW,OAAQ,CACpC;AAEJ;AAEA,iBAAiB,YAAY;AAAA,EAC3B,MAAM,0BAAU;AAAA,EAChB,SAAS,0BAAU;AACrB;",
+  "sourcesContent": ["import React, { useEffect, useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\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;AAAA;ACAA,YAAuB;ADAvB,mBAAmD;AACnD,wBAAsB;AACtB,uBAAuB;AACvB,wBAAiC;AAEjC,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAK7B,MAAM,SAAS,wBAAO;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,gCAAS;AAAA,gBACG,CAAC,UAAU,8BAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA,iBAClD,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAG7C,MAAM,mBAAmB,CAAC,EAAE,MAAM,cAAuE;AAC9G,QAAM,MAAM,yBAAuB,IAAI;AAEvC,QAAM,CAAC,SAAS,cAAc,2BAAS,IAAI;AAE3C,QAAM,CAAC,MAAM,WAAW,2BAAS,CAAC,IAAI;AACtC,8BAAU,MAAM;AACd,eAAW,IAAI;AACf,QAAI;AAAM,cAAQ,KAAK;AAAA,EACzB,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC;AAAM,cAAQ,IAAI;AAAA,EACzB;AAEA,SACE,mDAAC;AAAA,IACC;AAAA,IAEA,WAAW,KAAK,SAAS,gBAAgB;AAAA,IACzC,iBAAiB;AAAA,IACjB;AAAA,KAEA,mDAAC;AAAA,IAAc;AAAA,KAAW,OAAQ,CACpC;AAEJ;AAEA,iBAAiB,YAAY;AAAA,EAC3B,MAAM,0BAAU;AAAA,EAChB,SAAS,0BAAU;AACrB;",
   "names": []
 }

package/dist/cjs/MobileCard/Group.js

@@ -26,35 +26,35 @@ __export(Group_exports, {
 module.exports = __toCommonJS(Group_exports);
 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_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_system = require("@elliemae/ds-system");
 var import_ds_shared = require("@elliemae/ds-shared");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_system = require("@elliemae/ds-system");
+var import_ds_system2 = require("@elliemae/ds-system");
 var import_StyledCard = require("./StyledCard");
-const GroupGrid = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const GroupGrid = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   ${import_StyledCard.StyledCard} {
     border-top: none;
   }
 
-  ${({ theme, withTopBorder }) => withTopBorder ? `border-top: ${(0, import_ds_system.border)(theme.colors.neutral["100"])}` : ""}
+  ${({ theme, withTopBorder }) => withTopBorder ? `border-top: ${(0, import_ds_system2.border)(theme.colors.neutral["100"])}` : ""}
 `;
-const GroupTitle = import_styled_components.default.span`
-  ${(0, import_ds_system.truncate)()}
+const GroupTitle = import_ds_system.styled.span`
+  ${(0, import_ds_system2.truncate)()}
 `;
-const GroupTitleGrid = import_styled_components.default.div`
+const GroupTitleGrid = import_ds_system.styled.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-size: ${(props2) => `calc(${(0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(props2.theme.space.m)} / 2)`};
+  ${(0, import_ds_system2.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)};
+  border-top: ${(props2) => (0, import_ds_system2.border)(props2.theme.colors.brand["300"])};
+  line-height: ${(props2) => (0, import_ds_system2.__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"])};
+    border-top: ${(props2) => (0, import_ds_system2.border)(props2.theme.colors.neutral["080"])};
   }
 `;
 const MobileCardGroup = ({
@@ -66,7 +66,7 @@ const MobileCardGroup = ({
   allowMultipleOpen = false,
   onChange = () => null
 }) => {
-  const rows = !title ? ["auto"] : [(0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.m), "auto"];
+  const rows = !title ? ["auto"] : [(0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.m), "auto"];
   return /* @__PURE__ */ import_react.default.createElement(import_ds_shared.Group, {
     activeValue,
     multiple: allowMultipleOpen,
@@ -83,17 +83,17 @@ const MobileCardGroup = ({
   }), 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("")
+  theme: import_ds_utilities.PropTypes.object.isRequired.description(""),
+  title: import_ds_utilities.PropTypes.string.description(""),
+  children: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.element, import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.element)]).isRequired.description(""),
+  action: import_ds_utilities.PropTypes.element.description(""),
+  activeValue: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.number, import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.number)]).description(""),
+  allowMultipleOpen: import_ds_utilities.PropTypes.bool.description(""),
+  onChange: import_ds_utilities.PropTypes.func.description("")
 };
 MobileCardGroup.propTypes = props;
 MobileCardGroup.displayName = "MobileCardGroup";
-const DSMobileCardGroupWithSchema = (0, import_react_desc.describe)(MobileCardGroup);
+const DSMobileCardGroupWithSchema = (0, import_ds_utilities.describe)(MobileCardGroup);
 DSMobileCardGroupWithSchema.propTypes = props;
-var Group_default = (0, import_ds_system.withTheme)(MobileCardGroup);
+var Group_default = (0, import_ds_system2.withTheme)(MobileCardGroup);
 //# sourceMappingURL=Group.js.map

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

@@ -1,7 +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';\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;\nMobileCardGroup.displayName = 'MobileCardGroup';\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;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAoC;AACpC,+BAAmB;AACnB,uBAAsB;AACtB,qBAAqB;AACrB,uBAA6E;AAC7E,wBAAmC;AAEnC,MAAM,YAAY,sCAAO,mBAAI;AAAA,IACzB;AAAA;AAAA;AAAA;AAAA,IAIA,CAAC,EAAE,OAAO,oBAAqB,gBAAgB,eAAe,6BAAO,MAAM,OAAO,QAAQ,MAAM,MAAM;AAAA;AAG1G,MAAM,aAAa,iCAAO;AAAA,IACtB,+BAAS;AAAA;AAGb,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA,eAGf,CAAC,WAAU,OAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,WAAU,QAAQ,+CAAyB,OAAM,MAAM,MAAM,CAAC;AAAA,IAC1E,4BAAM,WAAW,KAAK;AAAA,iBACT,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA,sBAC9B,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA,gBAC1C,CAAC,WAAU,6BAAO,OAAM,MAAM,OAAO,MAAM,MAAM;AAAA,iBAChD,CAAC,WAAU,+CAAyB,OAAM,MAAM,MAAM,CAAC;AAAA;AAAA,wBAEhD,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,kBAC5C,CAAC,WAAU,6BAAO,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAIrE,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,MAAM,IAAI,CAAC,+CAAyB,MAAM,MAAM,CAAC,GAAG,MAAM;AAEjF,SACE,mDAAC;AAAA,IAAM;AAAA,IAA0B,UAAU;AAAA,IAAmB;AAAA,KAC5D,mDAAC;AAAA,IAAU,eAAe,CAAC;AAAA,IAAO;AAAA,KAC/B,CAAC,CAAC,SACD,mDAAC;AAAA,IAAe,IAAG;AAAA,KACjB,mDAAC,kBAAY,KAAM,GAClB,MACH,GAEF,mDAAC,2BACE,qBAAM,SAAS,IACd,UACA,CAAC,OAAO,QACN,qBAAM,aAAa,OAAO;AAAA,IACxB,KAAK;AAAA,IACL,OAAO;AAAA,IACP;AAAA,EACF,CAAC,GACH,IACF,CACF,CACF,CACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,OAAO,4BAAU,OAAO,WAAW,YAAY,EAAE;AAAA,EAIjD,OAAO,4BAAU,OAAO,YAAY,EAAE;AAAA,EAItC,UAAU,4BAAU,UAAU,CAAC,4BAAU,SAAS,4BAAU,QAAQ,4BAAU,OAAO,CAAC,CAAC,EAAE,WAAW,YAAY,EAAE;AAAA,EAIlH,QAAQ,4BAAU,QAAQ,YAAY,EAAE;AAAA,EAExC,aAAa,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,QAAQ,4BAAU,MAAM,CAAC,CAAC,EAAE,YAAY,EAAE;AAAA,EAExG,mBAAmB,4BAAU,KAAK,YAAY,EAAE;AAAA,EAEhD,UAAU,4BAAU,KAAK,YAAY,EAAE;AACzC;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,8BAA8B,gCAAS,eAAe;AAE5D,4BAA4B,YAAY;AAIxC,IAAO,gBAAQ,gCAAU,eAAe;",
+  "sourcesContent": ["/* eslint-disable react/no-array-index-key */\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Group } from '@elliemae/ds-shared';\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;\nMobileCardGroup.displayName = 'MobileCardGroup';\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;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,0BAAoC;AACpC,uBAAuB;AACvB,uBAAsB;AACtB,qBAAqB;AACrB,wBAA6E;AAC7E,wBAAmC;AAEnC,MAAM,YAAY,6BAAO,mBAAI;AAAA,IACzB;AAAA;AAAA;AAAA;AAAA,IAIA,CAAC,EAAE,OAAO,oBAAqB,gBAAgB,eAAe,8BAAO,MAAM,OAAO,QAAQ,MAAM,MAAM;AAAA;AAG1G,MAAM,aAAa,wBAAO;AAAA,IACtB,gCAAS;AAAA;AAGb,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA,eAGf,CAAC,WAAU,OAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,WAAU,QAAQ,gDAAyB,OAAM,MAAM,MAAM,CAAC;AAAA,IAC1E,6BAAM,WAAW,KAAK;AAAA,iBACT,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA,sBAC9B,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA,gBAC1C,CAAC,WAAU,8BAAO,OAAM,MAAM,OAAO,MAAM,MAAM;AAAA,iBAChD,CAAC,WAAU,gDAAyB,OAAM,MAAM,MAAM,CAAC;AAAA;AAAA,wBAEhD,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,kBAC5C,CAAC,WAAU,8BAAO,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAIrE,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,MAAM,IAAI,CAAC,gDAAyB,MAAM,MAAM,CAAC,GAAG,MAAM;AAEjF,SACE,mDAAC;AAAA,IAAM;AAAA,IAA0B,UAAU;AAAA,IAAmB;AAAA,KAC5D,mDAAC;AAAA,IAAU,eAAe,CAAC;AAAA,IAAO;AAAA,KAC/B,CAAC,CAAC,SACD,mDAAC;AAAA,IAAe,IAAG;AAAA,KACjB,mDAAC,kBAAY,KAAM,GAClB,MACH,GAEF,mDAAC,2BACE,qBAAM,SAAS,IACd,UACA,CAAC,OAAO,QACN,qBAAM,aAAa,OAAO;AAAA,IACxB,KAAK;AAAA,IACL,OAAO;AAAA,IACP;AAAA,EACF,CAAC,GACH,IACF,CACF,CACF,CACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,OAAO,8BAAU,OAAO,WAAW,YAAY,EAAE;AAAA,EAIjD,OAAO,8BAAU,OAAO,YAAY,EAAE;AAAA,EAItC,UAAU,8BAAU,UAAU,CAAC,8BAAU,SAAS,8BAAU,QAAQ,8BAAU,OAAO,CAAC,CAAC,EAAE,WAAW,YAAY,EAAE;AAAA,EAIlH,QAAQ,8BAAU,QAAQ,YAAY,EAAE;AAAA,EAExC,aAAa,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,QAAQ,8BAAU,MAAM,CAAC,CAAC,EAAE,YAAY,EAAE;AAAA,EAExG,mBAAmB,8BAAU,KAAK,YAAY,EAAE;AAAA,EAEhD,UAAU,8BAAU,KAAK,YAAY,EAAE;AACzC;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,8BAA8B,kCAAS,eAAe;AAE5D,4BAA4B,YAAY;AAIxC,IAAO,gBAAQ,iCAAU,eAAe;",
   "names": []
 }

package/dist/cjs/MobileCard/StyledCard.js

@@ -24,14 +24,14 @@ __export(StyledCard_exports, {
 });
 module.exports = __toCommonJS(StyledCard_exports);
 var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
 var import_ds_system = require("@elliemae/ds-system");
-const StyledCard = import_styled_components.default.div`
+var import_ds_system2 = require("@elliemae/ds-system");
+const StyledCard = import_ds_system.styled.div`
   display: flex;
   align-items: center;
   height: fit-content;
   min-height: ${(props) => props.minHeight};
-  border: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["100"])};
-  border-bottom: ${(props) => (0, import_ds_system.border)(".5px", props.theme.colors.neutral["500"])};
+  border: ${(props) => (0, import_ds_system2.border)(props.theme.colors.neutral["100"])};
+  border-bottom: ${(props) => (0, import_ds_system2.border)(".5px", props.theme.colors.neutral["500"])};
 `;
 //# sourceMappingURL=StyledCard.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileCard/StyledCard.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,uBAAuB;AAEhB,MAAM,aAAa,iCAAO;AAAA;AAAA;AAAA;AAAA,gBAIjB,CAAC,UAAU,MAAM;AAAA,YACrB,CAAC,UAAU,6BAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA,mBAC5C,CAAC,UAAU,6BAAO,QAAQ,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,wBAAuB;AAEhB,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA,gBAIjB,CAAC,UAAU,MAAM;AAAA,YACrB,CAAC,UAAU,8BAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA,mBAC5C,CAAC,UAAU,8BAAO,QAAQ,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;",
   "names": []
 }

package/dist/cjs/MobileCard/props.js

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileCard/props.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,wBAA0B;AAmBnB,MAAM,iBAAiB;AAAA,EAI5B,QAAQ,4BAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,aAAa;AAAA,EAI7D,UAAU,4BAAU,OAAO,YAAY,2BAA2B,EAAE;AAAA,EAIpE,YAAY,4BAAU,KAAK,YAAY,yCAAyC;AAAA,EAIhF,iBAAiB,4BAAU,QAAQ,YAAY,2CAA2C;AAAA,EAI1F,WAAW,4BAAU,QAAQ,YAAY,+DAA+D;AAAA,EAIxG,UAAU,4BAAU,QAAQ,YAAY,mEAAmE;AAAA,EAI3G,WAAW,4BAAU,QAAQ,4BAAU,OAAO,EAAE,YAC9C,qFACF;AAAA,EAIA,SAAS,4BAAU,QAAQ,4BAAU,MAAM,EAAE,YAAY,iCAAiC;AAAA,EAI1F,UAAU,4BAAU,QAAQ,YAAY,oBAAoB;AAAA,EAI5D,SAAS,4BAAU,QAAQ,4BAAU,MAAM,EAAE,YAAY,oCAAoC;AAAA,EAC7F,OAAO,4BAAU,OAAO,YAAY,EAAE,EAAE;AAAA,EACxC,OAAO,4BAAU,OAAO,YAAY,EAAE;AAAA,EACtC,aAAa,4BAAU,KAAK,YAAY,0BAA0B;AACpE;",
+  "sourcesContent": ["import React from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA0B;AAmBnB,MAAM,iBAAiB;AAAA,EAI5B,QAAQ,8BAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,aAAa;AAAA,EAI7D,UAAU,8BAAU,OAAO,YAAY,2BAA2B,EAAE;AAAA,EAIpE,YAAY,8BAAU,KAAK,YAAY,yCAAyC;AAAA,EAIhF,iBAAiB,8BAAU,QAAQ,YAAY,2CAA2C;AAAA,EAI1F,WAAW,8BAAU,QAAQ,YAAY,+DAA+D;AAAA,EAIxG,UAAU,8BAAU,QAAQ,YAAY,mEAAmE;AAAA,EAI3G,WAAW,8BAAU,QAAQ,8BAAU,OAAO,EAAE,YAC9C,qFACF;AAAA,EAIA,SAAS,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,iCAAiC;AAAA,EAI1F,UAAU,8BAAU,QAAQ,YAAY,oBAAoB;AAAA,EAI5D,SAAS,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,oCAAoC;AAAA,EAC7F,OAAO,8BAAU,OAAO,YAAY,EAAE,EAAE;AAAA,EACxC,OAAO,8BAAU,OAAO,YAAY,EAAE;AAAA,EACtC,aAAa,8BAAU,KAAK,YAAY,0BAA0B;AACpE;",
   "names": []
 }

package/dist/cjs/MobileContextMenu/MobileContextMenu.js

@@ -44,14 +44,14 @@ module.exports = __toCommonJS(MobileContextMenu_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_lodash = require("lodash");
-var import_react_desc = require("react-desc");
-var import_styled_components = __toESM(require("styled-components"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_backdrop = require("@elliemae/ds-backdrop");
-var import_ds_system = require("@elliemae/ds-system");
+var import_ds_system2 = require("@elliemae/ds-system");
 var import_ds_shared = require("@elliemae/ds-shared");
 var import_MobileContextMenuGroup = require("./MobileContextMenuGroup");
-const StyledContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const StyledContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   background: ${(props2) => props2.theme.colors.neutral["000"]};
   z-index: ${(props2) => props2.zIndex};
   width: ${(props2) => `calc(100% - ${props2.theme.space.xs})`};
@@ -63,11 +63,11 @@ const StyledContainer = (0, import_styled_components.default)(import_ds_grid.Gri
   border-top-right-radius: 5px;
   box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.5), 0 0px 11px 0 rgba(0, 0, 0, 0.5);
 `;
-const StyledTitle = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const StyledTitle = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   font-size: 16px;
   font-weight: ${(props2) => props2.theme.fontWeights.semibold};
   color: ${(props2) => props2.theme.colors.neutral["000"]};
-  ${(0, import_ds_system.truncate)()}
+  ${(0, import_ds_system2.truncate)()}
 
   & > span {
     height: 20px;
@@ -81,13 +81,13 @@ const StyledTitle = (0, import_styled_components.default)(import_ds_grid.Grid)`
     fill: ${(props2) => props2.theme.colors.neutral["000"]};
   }
 `;
-const HeaderContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const HeaderContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   background: ${(props2) => props2.theme.colors.brand["600"]};
 `;
 const isArr = (prop) => Array.isArray(prop);
-const DSMobileContextMenu = (0, import_ds_system.withTheme)(({
+const DSMobileContextMenu = (0, import_ds_system2.withTheme)(({
   open = false,
   title = "",
   multiple = false,
@@ -186,27 +186,27 @@ const DSMobileContextMenu = (0, import_ds_system.withTheme)(({
   })))));
 });
 const props = {
-  open: import_react_desc.PropTypes.bool.description("toggle open the menu"),
-  title: import_react_desc.PropTypes.oneOfType([
-    import_react_desc.PropTypes.string,
-    import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.node]))
+  open: import_ds_utilities.PropTypes.bool.description("toggle open the menu"),
+  title: import_ds_utilities.PropTypes.oneOfType([
+    import_ds_utilities.PropTypes.string,
+    import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.node]))
   ]).description("context menu title"),
-  onChange: import_react_desc.PropTypes.func.description("change handler for selectable context menu"),
-  multiple: import_react_desc.PropTypes.bool.description("multi select"),
-  onClickOutside: import_react_desc.PropTypes.func.description("click outside callback handler"),
-  children: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.element).description("array of mobile context menu items"),
-  backdropZIndex: import_react_desc.PropTypes.number.description("z index for overlay div"),
-  zIndex: import_react_desc.PropTypes.number.description("z index for menu container"),
-  dataTestid: import_react_desc.PropTypes.string.description("for e2e tests"),
-  buttonFooter: import_react_desc.PropTypes.element.description("bottom button"),
-  onApply: import_react_desc.PropTypes.func.description("callback"),
-  selecteds: import_react_desc.PropTypes.oneOfType([
-    import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number])),
-    import_react_desc.PropTypes.number
+  onChange: import_ds_utilities.PropTypes.func.description("change handler for selectable context menu"),
+  multiple: import_ds_utilities.PropTypes.bool.description("multi select"),
+  onClickOutside: import_ds_utilities.PropTypes.func.description("click outside callback handler"),
+  children: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.element).description("array of mobile context menu items"),
+  backdropZIndex: import_ds_utilities.PropTypes.number.description("z index for overlay div"),
+  zIndex: import_ds_utilities.PropTypes.number.description("z index for menu container"),
+  dataTestid: import_ds_utilities.PropTypes.string.description("for e2e tests"),
+  buttonFooter: import_ds_utilities.PropTypes.element.description("bottom button"),
+  onApply: import_ds_utilities.PropTypes.func.description("callback"),
+  selecteds: import_ds_utilities.PropTypes.oneOfType([
+    import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.number])),
+    import_ds_utilities.PropTypes.number
   ]).description("selected elements for multi and single select")
 };
 DSMobileContextMenu.propTypes = props;
 DSMobileContextMenu.displayName = "DSMobileContextMenu";
-const DSMobileContextMenuWithSchema = (0, import_react_desc.describe)(DSMobileContextMenu);
+const DSMobileContextMenuWithSchema = (0, import_ds_utilities.describe)(DSMobileContextMenu);
 DSMobileContextMenuWithSchema.propTypes = props;
 //# sourceMappingURL=MobileContextMenu.js.map