npm - @elliemae/ds-mobile - Versions diffs - 3.0.4-rc.5 → 3.1.0-next.10 - Mend

@elliemae/ds-mobile 3.0.4-rc.5 → 3.1.0-next.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (235) hide show

package/dist/cjs/MobileCard/ExpandChevron.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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

package/dist/cjs/MobileContextMenu/MobileContextMenu.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileContextMenu/MobileContextMenu.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable func-names */\n/* eslint-disable max-lines */\nimport React, { useState, useRef, useMemo } from 'react';\nimport { noop } from 'lodash';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { truncate, withTheme } from '@elliemae/ds-system';\nimport { Group } from '@elliemae/ds-shared';\nimport { DSMobileContextMenuGroup as ContextMenuGroup } from './MobileContextMenuGroup';\n\nconst StyledContainer = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  z-index: ${(props) => props.zIndex};\n  width: ${(props) => `calc(100% - ${props.theme.space.xs})`};\n  position: fixed;\n  bottom: 0;\n  left: ${(props) => props.theme.space.xxs};\n  max-height: 90vh;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.5), 0 0px 11px 0 rgba(0, 0, 0, 0.5);\n`;\n\nconst StyledTitle = styled(Grid)`\n  font-size: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.neutral['000']};\n  ${truncate()}\n\n  & > span {\n    height: 20px;\n    width: 20px;\n  }\n\n  & > span > svg,\n  svg:not([fill]) {\n    height: 20px;\n    width: 20px;\n    fill: ${(props) => props.theme.colors.neutral['000']};\n  }\n`;\n\nconst HeaderContainer = styled(Grid)`\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  background: ${(props) => props.theme.colors.brand['600']};\n`;\n\nconst isArr = (prop) => Array.isArray(prop);\n\nconst DSMobileContextMenu = withTheme(\n  ({\n    open = false,\n    title = '',\n    multiple = false,\n    singleSelect = false,\n    onChange = noop,\n    onClickOutside = noop,\n    children,\n    theme,\n    backdropZIndex,\n    zIndex = 1,\n    dataTestid = 'mobile-context-menu',\n    buttonFooter = null,\n    onApply = noop,\n    selecteds: initSelecteds,\n  }) => {\n    const [selectedItems, setSelectedItems] = useState([]);\n    const trueSelected = useMemo(\n      () => (initSelecteds !== undefined ? initSelecteds : [...selectedItems]),\n      [initSelecteds, selectedItems],\n    );\n    const containerRef = useRef(null);\n    const handleChange = (value, childProps, event) => {\n      onChange(value, childProps, event);\n      if (initSelecteds === undefined) {\n        if (multiple) setSelectedItems([...value]);\n        else if (singleSelect) setSelectedItems(value);\n      }\n    };\n\n    const handleApply = function (e) {\n      if (this.onClick) this.onClick(e);\n      onApply(e, selectedItems);\n    };\n\n    const rows = [theme.space.s, 1];\n    if (buttonFooter) rows.push('56px');\n\n    if (!open) return null;\n\n    return (\n      <>\n        <DSBackdrop\n          type=\"cover\"\n          zIndex={backdropZIndex}\n          onClick={(e) => {\n            // PUI-4481 prevent click on elements below backdrop\n            e.stopPropagation();\n            onClickOutside(e);\n          }}\n        />\n        <StyledContainer zIndex={zIndex} rows={rows} ref={containerRef} data-testid=\"ds-mobile-context-menu\">\n          <HeaderContainer justifyContent=\"center\" alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n            <StyledTitle alignItems=\"center\" gutter=\"xxs\" cols={Array(isArr(title) ? title.length : 1).fill('auto')}>\n              {title}\n            </StyledTitle>\n          </HeaderContainer>\n          <Grid style={{ overflow: 'hidden' }}>\n            <Grid style={{ overflow: 'auto' }}>\n              <Group activeValue={trueSelected} multiple={multiple} onChange={handleChange}>\n                {React.Children.map(children, (child, ii) => {\n                  const isGroup =\n                    child.type === (<ContextMenuGroup />).type ||\n                    child.type?.name === ContextMenuGroup.componentType ||\n                    child.type === ContextMenuGroup.type;\n                  const { onClick = noop } = child.props;\n                  const value = ii;\n                  let isSelected;\n                  if (singleSelect) isSelected = trueSelected === value;\n                  else if (multiple) isSelected = trueSelected.includes(value);\n                  return React.cloneElement(child, {\n                    value,\n                    key: `cm.${ii}`,\n                    isMulti: multiple,\n                    singleSelect,\n                    isSelected,\n                    onClick: !isGroup ? (e) => onClick(e, child.props) : null,\n                    selectedItems: isGroup ? trueSelected : null,\n                  });\n                })}\n              </Group>\n            </Grid>\n          </Grid>\n          {buttonFooter && (\n            <Grid pl=\"xs\" pr=\"xs\" alignItems=\"center\">\n              {React.cloneElement(buttonFooter, {\n                ...buttonFooter.props,\n                containerProps: {\n                  'data-testid': `${dataTestid}--btn`,\n                },\n                buttonType: 'primary',\n                size: 'l',\n                onClick: handleApply.bind(buttonFooter.props),\n              })}\n            </Grid>\n          )}\n        </StyledContainer>\n      </>\n    );\n  },\n);\n\nconst props = {\n  /** toggle open the menu */\n  open: PropTypes.bool.description('toggle open the menu'),\n  /** context menu title  */\n  title: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.node])),\n  ]).description('context menu title'),\n  /** change handler for selectable context menu  */\n  onChange: PropTypes.func.description('change handler for selectable context menu'),\n  /** multi select */\n  multiple: PropTypes.bool.description('multi select'),\n  /** click outside callback handler */\n  onClickOutside: PropTypes.func.description('click outside callback handler'),\n  /** array of mobile context menu items */\n  children: PropTypes.arrayOf(PropTypes.element).description('array of mobile context menu items'),\n  /** z index for overlay div */\n  backdropZIndex: PropTypes.number.description('z index for overlay div'),\n  /** z index for menu container */\n  zIndex: PropTypes.number.description('z index for menu container'),\n  /** for e2e tests */\n  dataTestid: PropTypes.string.description('for e2e tests'),\n  /** bottom button */\n  buttonFooter: PropTypes.element.description('bottom button'),\n  /** callback */\n  onApply: PropTypes.func.description('callback'),\n  /** selected elements for multi and single select */\n  selecteds: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n    PropTypes.number,\n  ]).description('selected elements for multi and single select'),\n};\n\nDSMobileContextMenu.propTypes = props;\nDSMobileContextMenu.displayName = 'DSMobileContextMenu';\nconst DSMobileContextMenuWithSchema = describe(DSMobileContextMenu);\n\nDSMobileContextMenuWithSchema.propTypes = props;\n\nexport { DSMobileContextMenu, DSMobileContextMenuWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable func-names */\n/* eslint-disable max-lines */\nimport React, { useState, useRef, useMemo } from 'react';\nimport { noop } from 'lodash';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { truncate, withTheme } from '@elliemae/ds-system';\nimport { Group } from '@elliemae/ds-shared';\nimport { DSMobileContextMenuGroup as ContextMenuGroup } from './MobileContextMenuGroup';\n\nconst StyledContainer = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  z-index: ${(props) => props.zIndex};\n  width: ${(props) => `calc(100% - ${props.theme.space.xs})`};\n  position: fixed;\n  bottom: 0;\n  left: ${(props) => props.theme.space.xxs};\n  max-height: 90vh;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.5), 0 0px 11px 0 rgba(0, 0, 0, 0.5);\n`;\n\nconst StyledTitle = styled(Grid)`\n  font-size: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.neutral['000']};\n  ${truncate()}\n\n  & > span {\n    height: 20px;\n    width: 20px;\n  }\n\n  & > span > svg,\n  svg:not([fill]) {\n    height: 20px;\n    width: 20px;\n    fill: ${(props) => props.theme.colors.neutral['000']};\n  }\n`;\n\nconst HeaderContainer = styled(Grid)`\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  background: ${(props) => props.theme.colors.brand['600']};\n`;\n\nconst isArr = (prop) => Array.isArray(prop);\n\nconst DSMobileContextMenu = withTheme(\n  ({\n    open = false,\n    title = '',\n    multiple = false,\n    singleSelect = false,\n    onChange = noop,\n    onClickOutside = noop,\n    children,\n    theme,\n    backdropZIndex,\n    zIndex = 1,\n    dataTestid = 'mobile-context-menu',\n    buttonFooter = null,\n    onApply = noop,\n    selecteds: initSelecteds,\n  }) => {\n    const [selectedItems, setSelectedItems] = useState([]);\n    const trueSelected = useMemo(\n      () => (initSelecteds !== undefined ? initSelecteds : [...selectedItems]),\n      [initSelecteds, selectedItems],\n    );\n    const containerRef = useRef(null);\n    const handleChange = (value, childProps, event) => {\n      onChange(value, childProps, event);\n      if (initSelecteds === undefined) {\n        if (multiple) setSelectedItems([...value]);\n        else if (singleSelect) setSelectedItems(value);\n      }\n    };\n\n    const handleApply = function (e) {\n      if (this.onClick) this.onClick(e);\n      onApply(e, selectedItems);\n    };\n\n    const rows = [theme.space.s, 1];\n    if (buttonFooter) rows.push('56px');\n\n    if (!open) return null;\n\n    return (\n      <>\n        <DSBackdrop\n          type=\"cover\"\n          zIndex={backdropZIndex}\n          onClick={(e) => {\n            // PUI-4481 prevent click on elements below backdrop\n            e.stopPropagation();\n            onClickOutside(e);\n          }}\n        />\n        <StyledContainer zIndex={zIndex} rows={rows} ref={containerRef} data-testid=\"ds-mobile-context-menu\">\n          <HeaderContainer justifyContent=\"center\" alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n            <StyledTitle alignItems=\"center\" gutter=\"xxs\" cols={Array(isArr(title) ? title.length : 1).fill('auto')}>\n              {title}\n            </StyledTitle>\n          </HeaderContainer>\n          <Grid style={{ overflow: 'hidden' }}>\n            <Grid style={{ overflow: 'auto' }}>\n              <Group activeValue={trueSelected} multiple={multiple} onChange={handleChange}>\n                {React.Children.map(children, (child, ii) => {\n                  const isGroup =\n                    child.type === (<ContextMenuGroup />).type ||\n                    child.type?.name === ContextMenuGroup.componentType ||\n                    child.type === ContextMenuGroup.type;\n                  const { onClick = noop } = child.props;\n                  const value = ii;\n                  let isSelected;\n                  if (singleSelect) isSelected = trueSelected === value;\n                  else if (multiple) isSelected = trueSelected.includes(value);\n                  return React.cloneElement(child, {\n                    value,\n                    key: `cm.${ii}`,\n                    isMulti: multiple,\n                    singleSelect,\n                    isSelected,\n                    onClick: !isGroup ? (e) => onClick(e, child.props) : null,\n                    selectedItems: isGroup ? trueSelected : null,\n                  });\n                })}\n              </Group>\n            </Grid>\n          </Grid>\n          {buttonFooter && (\n            <Grid pl=\"xs\" pr=\"xs\" alignItems=\"center\">\n              {React.cloneElement(buttonFooter, {\n                ...buttonFooter.props,\n                containerProps: {\n                  'data-testid': `${dataTestid}--btn`,\n                },\n                buttonType: 'primary',\n                size: 'l',\n                onClick: handleApply.bind(buttonFooter.props),\n              })}\n            </Grid>\n          )}\n        </StyledContainer>\n      </>\n    );\n  },\n);\n\nconst props = {\n  /** toggle open the menu */\n  open: PropTypes.bool.description('toggle open the menu'),\n  /** context menu title  */\n  title: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.node])),\n  ]).description('context menu title'),\n  /** change handler for selectable context menu  */\n  onChange: PropTypes.func.description('change handler for selectable context menu'),\n  /** multi select */\n  multiple: PropTypes.bool.description('multi select'),\n  /** click outside callback handler */\n  onClickOutside: PropTypes.func.description('click outside callback handler'),\n  /** array of mobile context menu items */\n  children: PropTypes.arrayOf(PropTypes.element).description('array of mobile context menu items'),\n  /** z index for overlay div */\n  backdropZIndex: PropTypes.number.description('z index for overlay div'),\n  /** z index for menu container */\n  zIndex: PropTypes.number.description('z index for menu container'),\n  /** for e2e tests */\n  dataTestid: PropTypes.string.description('for e2e tests'),\n  /** bottom button */\n  buttonFooter: PropTypes.element.description('bottom button'),\n  /** callback */\n  onApply: PropTypes.func.description('callback'),\n  /** selected elements for multi and single select */\n  selecteds: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n    PropTypes.number,\n  ]).description('selected elements for multi and single select'),\n};\n\nDSMobileContextMenu.propTypes = props;\nDSMobileContextMenu.displayName = 'DSMobileContextMenu';\nconst DSMobileContextMenuWithSchema = describe(DSMobileContextMenu);\n\nDSMobileContextMenuWithSchema.propTypes = props;\n\nexport { DSMobileContextMenu, DSMobileContextMenuWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/MobileContextMenu/MobileContextMenuGroup.js CHANGED Viewed

@@ -40,11 +40,11 @@ __export(MobileContextMenuGroup_exports, {
 module.exports = __toCommonJS(MobileContextMenuGroup_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
+var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_lodash = require("lodash");
-var import_react_desc = require("react-desc");
-const Title = import_styled_components.default.div`
+var import_ds_utilities = require("@elliemae/ds-utilities");
+const Title = import_ds_system.styled.div`
   height: 24px;
   line-height: 24px;
   font-size: 12px;
@@ -73,16 +73,16 @@ const DSMobileContextMenuGroup = ({ title, isMulti, singleSelect, children, valu
   });
 })));
 const props = {
-  title: import_react_desc.PropTypes.string.isRequired.description("group title"),
-  children: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.element).isRequired.description("Array of MobileContextMenuItem"),
-  isMulti: import_react_desc.PropTypes.bool.description("multi select"),
-  singleSelect: import_react_desc.PropTypes.bool.description("single select"),
-  value: import_react_desc.PropTypes.string.description("value for select"),
-  selectedItems: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.array, import_react_desc.PropTypes.string]).description("selected items, array for multi, string for single")
+  title: import_ds_utilities.PropTypes.string.isRequired.description("group title"),
+  children: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.element).isRequired.description("Array of MobileContextMenuItem"),
+  isMulti: import_ds_utilities.PropTypes.bool.description("multi select"),
+  singleSelect: import_ds_utilities.PropTypes.bool.description("single select"),
+  value: import_ds_utilities.PropTypes.string.description("value for select"),
+  selectedItems: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.array, import_ds_utilities.PropTypes.string]).description("selected items, array for multi, string for single")
 };
 DSMobileContextMenuGroup.propTypes = props;
 DSMobileContextMenuGroup.componentType = "DSMobileContextMenuGroup";
 DSMobileContextMenuGroup.displayName = "DSMobileContextMenuGroup";
-const DSMobileContextMenuGroupWithSchema = (0, import_react_desc.describe)(DSMobileContextMenuGroup);
+const DSMobileContextMenuGroupWithSchema = (0, import_ds_utilities.describe)(DSMobileContextMenuGroup);
 DSMobileContextMenuGroupWithSchema.propTypes = props;
 //# sourceMappingURL=MobileContextMenuGroup.js.map

package/dist/cjs/MobileContextMenu/MobileContextMenuGroup.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileContextMenu/MobileContextMenuGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { noop } from 'lodash';\nimport { PropTypes, describe } from 'react-desc';\n\nconst Title = styled.div`\n  height: 24px;\n  line-height: 24px;\n  font-size: 12px;\n  border-top: 1px solid ${(props) => props.theme.colors.brand['300']};\n  background: ${(props) => props.theme.colors.brand['200']};\n  padding: 0 ${(props) => props.theme.space.xs};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nconst DSMobileContextMenuGroup = ({ title, isMulti, singleSelect, children, value: groupValue, selectedItems }) => (\n  <Grid>\n    <Grid>\n      <Title>{title}</Title>\n    </Grid>\n    <Grid>\n      {React.Children.map(children, (child, index) => {\n        const { onClick = noop } = child.props;\n        const value = `${groupValue}:${index}`;\n        let isSelected;\n        if (singleSelect) isSelected = selectedItems === value;\n        else if (isMulti) isSelected = selectedItems.includes(value);\n        return React.cloneElement(child, {\n          value,\n          key: 'group.'.concat(index),\n          isGroup: true,\n          isMulti,\n          singleSelect,\n          isSelected,\n          onClick: (e) => onClick(e, { value, ...child.props }),\n        });\n      })}\n    </Grid>\n  </Grid>\n);\n\nconst props = {\n  /**\n   * Group title\n   */\n  title: PropTypes.string.isRequired.description('group title'),\n  /**\n   *  Array of MobileContextMenuItem\n   */\n  children: PropTypes.arrayOf(PropTypes.element).isRequired.description('Array of MobileContextMenuItem'),\n  /** multi select */\n  isMulti: PropTypes.bool.description('multi select'),\n  /** single select */\n  singleSelect: PropTypes.bool.description('single select'),\n  /** value for select */\n  value: PropTypes.string.description('value for select'),\n  /** selected items, array for multi, string for single */\n  selectedItems: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).description(\n    'selected items, array for multi, string for single',\n  ),\n};\n\nDSMobileContextMenuGroup.propTypes = props;\nDSMobileContextMenuGroup.componentType = 'DSMobileContextMenuGroup';\nDSMobileContextMenuGroup.displayName = 'DSMobileContextMenuGroup';\nconst DSMobileContextMenuGroupWithSchema = describe(DSMobileContextMenuGroup);\n\nDSMobileContextMenuGroupWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuGroup, DSMobileContextMenuGroupWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAAmB;AACnB,qBAAqB;AACrB,oBAAqB;AACrB,wBAAoC;AAEpC,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA;AAAA,0BAIK,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA,gBAC9C,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA,eACrC,CAAC,WAAU,OAAM,MAAM,MAAM;AAAA,WACjC,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,iBAChC,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,2BAA2B,CAAC,EAAE,OAAO,SAAS,cAAc,UAAU,OAAO,YAAY,oBAC7F,mDAAC,2BACC,mDAAC,2BACC,mDAAC,aAAO,KAAM,CAChB,GACA,mDAAC,2BACE,qBAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC9C,QAAM,EAAE,UAAU,uBAAS,MAAM;AACjC,QAAM,QAAQ,GAAG,cAAc;AAC/B,MAAI;AACJ,MAAI;AAAc,iBAAa,kBAAkB;AAAA,WACxC;AAAS,iBAAa,cAAc,SAAS,KAAK;AAC3D,SAAO,qBAAM,aAAa,OAAO;AAAA,IAC/B;AAAA,IACA,KAAK,SAAS,OAAO,KAAK;AAAA,IAC1B,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,CAAC,MAAM,QAAQ,GAAG,iBAAE,SAAU,MAAM,MAAO;AAAA,EACtD,CAAC;AACH,CAAC,CACH,CACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,OAAO,4BAAU,OAAO,WAAW,YAAY,aAAa;AAAA,EAI5D,UAAU,4BAAU,QAAQ,4BAAU,OAAO,EAAE,WAAW,YAAY,gCAAgC;AAAA,EAEtG,SAAS,4BAAU,KAAK,YAAY,cAAc;AAAA,EAElD,cAAc,4BAAU,KAAK,YAAY,eAAe;AAAA,EAExD,OAAO,4BAAU,OAAO,YAAY,kBAAkB;AAAA,EAEtD,eAAe,4BAAU,UAAU,CAAC,4BAAU,OAAO,4BAAU,MAAM,CAAC,EAAE,YACtE,oDACF;AACF;AAEA,yBAAyB,YAAY;AACrC,yBAAyB,gBAAgB;AACzC,yBAAyB,cAAc;AACvC,MAAM,qCAAqC,gCAAS,wBAAwB;AAE5E,mCAAmC,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { noop } from 'lodash';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\n\nconst Title = styled.div`\n  height: 24px;\n  line-height: 24px;\n  font-size: 12px;\n  border-top: 1px solid ${(props) => props.theme.colors.brand['300']};\n  background: ${(props) => props.theme.colors.brand['200']};\n  padding: 0 ${(props) => props.theme.space.xs};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nconst DSMobileContextMenuGroup = ({ title, isMulti, singleSelect, children, value: groupValue, selectedItems }) => (\n  <Grid>\n    <Grid>\n      <Title>{title}</Title>\n    </Grid>\n    <Grid>\n      {React.Children.map(children, (child, index) => {\n        const { onClick = noop } = child.props;\n        const value = `${groupValue}:${index}`;\n        let isSelected;\n        if (singleSelect) isSelected = selectedItems === value;\n        else if (isMulti) isSelected = selectedItems.includes(value);\n        return React.cloneElement(child, {\n          value,\n          key: 'group.'.concat(index),\n          isGroup: true,\n          isMulti,\n          singleSelect,\n          isSelected,\n          onClick: (e) => onClick(e, { value, ...child.props }),\n        });\n      })}\n    </Grid>\n  </Grid>\n);\n\nconst props = {\n  /**\n   * Group title\n   */\n  title: PropTypes.string.isRequired.description('group title'),\n  /**\n   *  Array of MobileContextMenuItem\n   */\n  children: PropTypes.arrayOf(PropTypes.element).isRequired.description('Array of MobileContextMenuItem'),\n  /** multi select */\n  isMulti: PropTypes.bool.description('multi select'),\n  /** single select */\n  singleSelect: PropTypes.bool.description('single select'),\n  /** value for select */\n  value: PropTypes.string.description('value for select'),\n  /** selected items, array for multi, string for single */\n  selectedItems: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).description(\n    'selected items, array for multi, string for single',\n  ),\n};\n\nDSMobileContextMenuGroup.propTypes = props;\nDSMobileContextMenuGroup.componentType = 'DSMobileContextMenuGroup';\nDSMobileContextMenuGroup.displayName = 'DSMobileContextMenuGroup';\nconst DSMobileContextMenuGroupWithSchema = describe(DSMobileContextMenuGroup);\n\nDSMobileContextMenuGroupWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuGroup, DSMobileContextMenuGroupWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,oBAAqB;AACrB,0BAAoC;AAEpC,MAAM,QAAQ,wBAAO;AAAA;AAAA;AAAA;AAAA,0BAIK,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA,gBAC9C,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA,eACrC,CAAC,WAAU,OAAM,MAAM,MAAM;AAAA,WACjC,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,iBAChC,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,2BAA2B,CAAC,EAAE,OAAO,SAAS,cAAc,UAAU,OAAO,YAAY,oBAC7F,mDAAC,2BACC,mDAAC,2BACC,mDAAC,aAAO,KAAM,CAChB,GACA,mDAAC,2BACE,qBAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC9C,QAAM,EAAE,UAAU,uBAAS,MAAM;AACjC,QAAM,QAAQ,GAAG,cAAc;AAC/B,MAAI;AACJ,MAAI;AAAc,iBAAa,kBAAkB;AAAA,WACxC;AAAS,iBAAa,cAAc,SAAS,KAAK;AAC3D,SAAO,qBAAM,aAAa,OAAO;AAAA,IAC/B;AAAA,IACA,KAAK,SAAS,OAAO,KAAK;AAAA,IAC1B,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,CAAC,MAAM,QAAQ,GAAG,iBAAE,SAAU,MAAM,MAAO;AAAA,EACtD,CAAC;AACH,CAAC,CACH,CACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,OAAO,8BAAU,OAAO,WAAW,YAAY,aAAa;AAAA,EAI5D,UAAU,8BAAU,QAAQ,8BAAU,OAAO,EAAE,WAAW,YAAY,gCAAgC;AAAA,EAEtG,SAAS,8BAAU,KAAK,YAAY,cAAc;AAAA,EAElD,cAAc,8BAAU,KAAK,YAAY,eAAe;AAAA,EAExD,OAAO,8BAAU,OAAO,YAAY,kBAAkB;AAAA,EAEtD,eAAe,8BAAU,UAAU,CAAC,8BAAU,OAAO,8BAAU,MAAM,CAAC,EAAE,YACtE,oDACF;AACF;AAEA,yBAAyB,YAAY;AACrC,yBAAyB,gBAAgB;AACzC,yBAAyB,cAAc;AACvC,MAAM,qCAAqC,kCAAS,wBAAwB;AAE5E,mCAAmC,YAAY;",
   "names": []
 }