@elliemae/ds-mobile 2.0.0-alpha.1 → 2.0.0-alpha.10

package/cjs/MobileBanner/styles.js

@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
-const StyledInnerContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledInnerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-0"
 })(["display:flex;min-height:68px;width:100%;background-color:", ";border-bottom:4px solid ", ";transform:translateY(", ");", ";"], ({
   theme
@@ -25,10 +25,10 @@ const StyledInnerContainer = /*#__PURE__*/styled__default['default'].div.withCon
   isAnimating,
   isOpen
 }) => styleHelpers.handleAnimation(isAnimating, isOpen));
-const StyledTextContent = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledTextContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-1"
 })(["width:100%;"]);
-const StyledTitle = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-2"
 })(["color:", ";font-size:", ";font-weight:", ";margin-bottom:", ";@media not all and (min-resolution:0.001dpcm){@media{-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}}@media screen and (min--moz-device-pixel-ratio:0){-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}"], ({
   theme
@@ -43,36 +43,36 @@ const StyledTitle = /*#__PURE__*/styled__default['default'].div.withConfig({
 }) => theme.colors.neutral[700], ({
   theme
 }) => theme.colors.neutral[700]);
-const StyledSubTitle = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledSubTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-3"
 })(["font-size:", ";font-weight:", ";"], ({
   theme
 }) => dsSystem.toMobile(theme.fontSizes.title[600]), ({
   theme
 }) => theme.fontWeights.regular);
-const StyledIconContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledIconContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-4"
 })(["margin-top:10px;margin-right:", ";margin-left:", ";"], ({
   theme
 }) => theme.space.xxs, ({
   theme
 }) => theme.space.xs);
-const StyledContent = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-5"
 })(["width:100%;display:flex;flex-direction:column;margin:", " 0;margin-right:", ";"], ({
   theme
 }) => theme.space.xxs2, ({
   showCloseButton
 }) => !showCloseButton ? '28px' : '0');
-const StyledCloseButtonContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledCloseButtonContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-6"
 })(["display:flex;align-items:flex-start;margin-top:14px;margin-right:4px;"]);
-const StyledCloseButton = /*#__PURE__*/styled__default['default'](DSButton__default['default']).withConfig({
+const StyledCloseButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-4jnp92-7"
 })(["position:relative;&:focus{&:after{display:block;content:' ';position:absolute;top:-2px;left:0;width:calc(100% + 0px);height:calc(100% + 5px);border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], ({
   theme
 }) => theme.colors.brand[700]);
-const StyledActionLink = /*#__PURE__*/styled__default['default'].a.withConfig({
+const StyledActionLink = /*#__PURE__*/styled__default["default"].a.withConfig({
   componentId: "sc-4jnp92-8"
 })(["text-decoration:none;float:right;margin-left:", ";line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], ({
   theme
@@ -83,7 +83,7 @@ const StyledActionLink = /*#__PURE__*/styled__default['default'].a.withConfig({
 }) => theme.fontWeights.regular, ({
   theme
 }) => theme.colors.brand[600]);
-const StyledBannerContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledBannerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-9"
 })(["overflow:hidden;height:", ";", ";"], ({
   isOpen

package/cjs/MobileBanner/utils/icons.js

@@ -7,6 +7,7 @@ require('react');
 var SuccessFill = require('@elliemae/ds-icons/SuccessFill');
 var InfoFill = require('@elliemae/ds-icons/InfoFill');
 var AlertsDetailFill = require('@elliemae/ds-icons/AlertsDetailFill');
+var WarningSquare = require('@elliemae/ds-icons/WarningSquare');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,20 +15,21 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var SuccessFill__default = /*#__PURE__*/_interopDefaultLegacy(SuccessFill);
 var InfoFill__default = /*#__PURE__*/_interopDefaultLegacy(InfoFill);
 var AlertsDetailFill__default = /*#__PURE__*/_interopDefaultLegacy(AlertsDetailFill);
+var WarningSquare__default = /*#__PURE__*/_interopDefaultLegacy(WarningSquare);
 
 const icons = {
-  success: /*#__PURE__*/_jsx__default['default'](SuccessFill__default['default'], {
+  success: /*#__PURE__*/_jsx__default["default"](SuccessFill__default["default"], {
     fill: "#207e56"
   }),
-  info: /*#__PURE__*/_jsx__default['default'](InfoFill__default['default'], {
+  info: /*#__PURE__*/_jsx__default["default"](InfoFill__default["default"], {
     fill: "#1e79c2"
   }),
-  error: /*#__PURE__*/_jsx__default['default'](AlertsDetailFill__default['default'], {
+  error: /*#__PURE__*/_jsx__default["default"](AlertsDetailFill__default["default"], {
     width: "24px",
     height: "24px",
     fill: "#c64252"
   }),
-  warning: /*#__PURE__*/_jsx__default['default'](AlertsDetailFill__default['default'], {
+  warning: /*#__PURE__*/_jsx__default["default"](WarningSquare__default["default"], {
     width: "24px",
     height: "24px",
     fill: "#d17a00"

package/cjs/MobileCard/ActionAddon.js

@@ -15,17 +15,17 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var ChevronSmallDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallDown);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
-const Addon = /*#__PURE__*/styled__default['default'](DSButton__default['default']).withConfig({
+const Addon = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-afblfw-0"
 })(["background-color:transparent;padding-right:4px;height:100%;border:none;font-size:12px;font-weight:", ";color:", ";cursor:pointer;&:focus,&::after{background-color:transparent;box-shadow:none !important;border:none !important;}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['700']);
 const ActionAddon = ({
   label,
   onClick,
   icon
-}) => /*#__PURE__*/_jsx__default['default'](Addon, {
+}) => /*#__PURE__*/_jsx__default["default"](Addon, {
   onClick: onClick,
   labelText: label,
-  icon: icon || /*#__PURE__*/_jsx__default['default'](ChevronSmallDown__default['default'], {
+  icon: icon || /*#__PURE__*/_jsx__default["default"](ChevronSmallDown__default["default"], {
     color: ['brand-primary', 700]
   })
 });

package/cjs/MobileCard/Card.js

@@ -22,25 +22,25 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var GroupItem__default = /*#__PURE__*/_interopDefaultLegacy(GroupItem);
 
-const TitleEllipsis = /*#__PURE__*/styled__default['default'].div.withConfig({
+const TitleEllipsis = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10tpzm8-0"
 })(["", ""], dsSystem.truncate());
-const Title = /*#__PURE__*/styled__default['default'].div.withConfig({
+const Title = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10tpzm8-1"
 })(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], styledSystem.padding, dsSystem.truncate(), props => props.theme.fontWeights.semibold, props => dsSystem.toMobile(props.theme.fontSizes.title[600]), dsSystem.color('neutral', '800'));
-const Detail = /*#__PURE__*/styled__default['default'].span.withConfig({
+const Detail = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-10tpzm8-2"
 })(["", " ", " font-size:", ";font-weight:", ";"], styledSystem.padding, dsSystem.truncate(), props => dsSystem.toMobile(props.theme.fontSizes.title[500]), props => props.theme.fontWeights.regular);
-const SubText = /*#__PURE__*/styled__default['default'].span.withConfig({
+const SubText = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-10tpzm8-3"
 })(["margin-top:", ";", " &:nth-child(2){padding-left:", ";}"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), dsSystem.truncate(), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s));
-const SubTextWrap = /*#__PURE__*/styled__default['default'].div.withConfig({
+const SubTextWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10tpzm8-4"
 })(["", " border-top:", ";margin-top:6px;margin-bottom:2px;padding-bottom:", ";font-size:", ";", " font-weight:", ";display:flex;justify-content:space-between;"], dsSystem.truncate(), props => dsSystem.border(props.theme.colors.neutral['300']), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.toMobile(props.theme.fontSizes.subTitle[400]), dsSystem.color('neutral', '500'), props => props.theme.fontWeights.regular);
-const LeftIcon = /*#__PURE__*/styled__default['default'](Grid.Grid).withConfig({
+const LeftIcon = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-10tpzm8-5"
 })(["& > span{height:", ";width:", ";}& > span > svg,svg:not([fill]){height:", ";width:", ";}"], props => props.halfM, props => props.halfM, props => props.halfM, props => props.halfM);
-const CenterWrap = /*#__PURE__*/styled__default['default'].div.withConfig({
+const CenterWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10tpzm8-6"
 })(["display:flex;align-items:center;", ""], dsSystem.truncate());
 
@@ -64,17 +64,17 @@ const MobileCard = ({
   const subTextHeight = useHeight.useHeight(subTextRef);
   const isJustChildren = !(subText || subIcons || details);
   const halfM = dsSystem.op('/', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 2);
-  return /*#__PURE__*/_jsx__default['default'](GroupItem__default['default'], {
+  return /*#__PURE__*/_jsx__default["default"](GroupItem__default["default"], {
     render: (context = {}) => {
       const {
         activeValue,
         onChange
       } = context;
       const selected = activeValue !== undefined && (activeValue === value || (activeValue === null || activeValue === void 0 ? void 0 : activeValue.length) && (activeValue === null || activeValue === void 0 ? void 0 : activeValue.includes(value)));
-      return /*#__PURE__*/_jsx__default['default'](StyledCard.StyledCard, {
+      return /*#__PURE__*/_jsx__default["default"](StyledCard.StyledCard, {
         "data-testid": "card-wrapper",
         minHeight: height === 'm' ? dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl) : dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xl)
-      }, void 0, expandable && /*#__PURE__*/_jsx__default['default'](ExpandChevron.ExpandChevron, {
+      }, void 0, expandable && /*#__PURE__*/_jsx__default["default"](ExpandChevron.ExpandChevron, {
         isExpanded: selected,
         onClick: e => {
           e.stopPropagation();
@@ -85,42 +85,42 @@ const MobileCard = ({
           });
         },
         align: subText || subIcons ? 'top' : 'center'
-      }), /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+      }), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
         pb: (subText || subIcons) && subTextHeight,
         cols: ['auto', 'auto'],
         alignItems: "center"
-      }, void 0, leftProp && /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+      }, void 0, leftProp && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
         ml: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
-      }, void 0, leftProp), leftAddOn && /*#__PURE__*/_jsx__default['default'](LeftIcon, {
+      }, void 0, leftProp), leftAddOn && /*#__PURE__*/_jsx__default["default"](LeftIcon, {
         ml: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
         halfM: halfM
-      }, void 0, leftAddOn)), /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+      }, void 0, leftAddOn)), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
         pl: !leftAddOn ? dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xs),
         pr: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
         width: "100%"
-      }, void 0, /*#__PURE__*/_jsx__default['default'](CenterWrap, {}, void 0, /*#__PURE__*/_jsx__default['default'](Title, {
+      }, void 0, /*#__PURE__*/_jsx__default["default"](CenterWrap, {}, void 0, /*#__PURE__*/_jsx__default["default"](Title, {
         pt: !isJustChildren && halfM,
         "data-testid": "card-title"
-      }, void 0, _TitleEllipsis || (_TitleEllipsis = /*#__PURE__*/_jsx__default['default'](TitleEllipsis, {}, void 0, children)), details && /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+      }, void 0, _TitleEllipsis || (_TitleEllipsis = /*#__PURE__*/_jsx__default["default"](TitleEllipsis, {}, void 0, children)), details && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
         "data-testid": "card-details",
         cols: details.map(() => 'min-content'),
         mb: !(subText || subIcons) && halfM,
         pt: dsSystem.op('/', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)
-      }, void 0, details.map((d, i) => /*#__PURE__*/_jsx__default['default'](Detail, {}, i, d, i < details.length - 1 && /*#__PURE__*/_jsx__default['default'](Detail, {
+      }, void 0, details.map((d, i) => /*#__PURE__*/_jsx__default["default"](Detail, {}, i, d, i < details.length - 1 && /*#__PURE__*/_jsx__default["default"](Detail, {
         px: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)
-      }, void 0, "\u2022"))))), rightProp && rightProp.map((prop, i) => /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+      }, void 0, "\u2022"))))), rightProp && rightProp.map((prop, i) => /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
         ml: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
       }, i, prop))), subIcons && /*#__PURE__*/jsxRuntime.jsxs(SubTextWrap, {
         ref: subTextRef,
-        children: [_SubText || (_SubText = /*#__PURE__*/_jsx__default['default'](SubText, {}, void 0, subIcons)), subText && subText[1] && /*#__PURE__*/_jsx__default['default'](SubText, {
+        children: [_SubText || (_SubText = /*#__PURE__*/_jsx__default["default"](SubText, {}, void 0, subIcons)), subText && subText[1] && /*#__PURE__*/_jsx__default["default"](SubText, {
           "data-testid": "card-subText"
         }, void 0, subText[1])]
       }), subText && !subIcons && /*#__PURE__*/jsxRuntime.jsx(SubTextWrap, {
         ref: subTextRef,
-        children: subText.map((s, i) => /*#__PURE__*/_jsx__default['default'](SubText, {
+        children: subText.map((s, i) => /*#__PURE__*/_jsx__default["default"](SubText, {
           "data-testid": "card-subText"
         }, i, s))
-      }), /*#__PURE__*/_jsx__default['default'](ExpandableRegion.ExpandableRegion, {
+      }), /*#__PURE__*/_jsx__default["default"](ExpandableRegion.ExpandableRegion, {
         show: selected,
         content: expandedContent
       })));
@@ -186,4 +186,4 @@ DSMobileCardWithSchema.propTypes = props;
 var MobileCard$1 = dsSystem.withTheme(MobileCard);
 
 exports.DSMobileCardWithSchema = DSMobileCardWithSchema;
-exports['default'] = MobileCard$1;
+exports["default"] = MobileCard$1;

package/cjs/MobileCard/CardIcons.js

@@ -12,13 +12,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const CardIconsWrapper = /*#__PURE__*/styled__default['default'](Grid.Grid).withConfig({
+const CardIconsWrapper = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-1vqygz1-0"
 })(["align-items:center;span,svg{width:12px !important;height:12px !important;}span.icon-color-muted svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-warn svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-error svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-success svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-primary svg,svg:not([fill]){fill:", ";}span.icon-color-primary svg,svg:not([fill]){fill:", ";}"], props => props.theme.colors.neutral['600'], props => props.theme.colors.neutral['600'], props => props.theme.colors.warning['600'], props => props.theme.colors.warning['600'], props => props.theme.colors.danger['900'], props => props.theme.colors.danger['900'], props => props.theme.colors.success['900'], props => props.theme.colors.success['900'], props => props.theme.colors.brand[600], props => props.theme.colors.brand[600]);
 const SubIcons = ({
   icons = [],
   colors = []
-}) => /*#__PURE__*/_jsx__default['default'](CardIconsWrapper, {
+}) => /*#__PURE__*/_jsx__default["default"](CardIconsWrapper, {
   cols: icons.map(() => '12px'),
   gutter: "6px",
   height: "14px",
@@ -26,7 +26,7 @@ const SubIcons = ({
 }, void 0, icons.map((Icon, i) =>
 /*#__PURE__*/
 // eslint-disable-next-line react/no-array-index-key
-_jsx__default['default'](Icon, {
+_jsx__default["default"](Icon, {
   className: `icon-color-${colors[i] || 'muted'}`
 }, i)));
 

package/cjs/MobileCard/ExpandChevron.js

@@ -15,7 +15,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
 var ChevronRight__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRight);
 
-const ChevronWrap = /*#__PURE__*/styled__default['default'].div.withConfig({
+const ChevronWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1l0ask2-0"
 })(["margin-top:", ";align-self:", ";margin-left:", ";"], props => props.align === 'top' ? '18px' : '0', props => props.align === 'top' ? 'flex-start' : 'center', props => props.theme.space.xs);
 const ExpandChevron = ({
@@ -23,11 +23,11 @@ const ExpandChevron = ({
   onClick,
   align
 }) => {
-  const Chevron = isExpanded ? ChevronDownIcon__default['default'] : ChevronRight__default['default'];
-  return /*#__PURE__*/_jsx__default['default'](ChevronWrap, {
+  const Chevron = isExpanded ? ChevronDownIcon__default["default"] : ChevronRight__default["default"];
+  return /*#__PURE__*/_jsx__default["default"](ChevronWrap, {
     "data-testid": "ds-card-expand-chevron",
     align: align
-  }, void 0, /*#__PURE__*/_jsx__default['default'](Chevron, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Chevron, {
     size: "s",
     color: ['brand-primary', 800],
     onClick: onClick

package/cjs/MobileCard/ExpandableRegion.js

@@ -13,10 +13,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const RegionWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+const RegionWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-mduzz9-0"
 })(["width:100%;height:100%;"]);
-const Region = /*#__PURE__*/styled__default['default'].div.withConfig({
+const Region = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-mduzz9-1"
 })(["display:flex;", " transition:max-height ", " linear;max-height:0;", " align-items:center;", ";border-top:", ";font-weight:", ";"], props => props.hide ? 'visibility: hidden;' : '', props => props.animate ? '0.25s' : '0.20s', props => props.animate ? `
       max-height: ${props.refHeight}px;
@@ -41,7 +41,7 @@ const ExpandableRegion = ({
     if (!show) setHide(true);
   };
 
-  return /*#__PURE__*/_jsx__default['default'](Region, {
+  return /*#__PURE__*/_jsx__default["default"](Region, {
     hide: hide // needed to handle transition, `auto` max-height isn't supported
     ,
     refHeight: (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 9999,

package/cjs/MobileCard/Group.js

@@ -18,16 +18,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Group__default = /*#__PURE__*/_interopDefaultLegacy(Group);
 
-const GroupGrid = /*#__PURE__*/styled__default['default'](Grid.Grid).withConfig({
+const GroupGrid = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-17xukaf-0"
 })(["", "{border-top:none;}", ""], StyledCard.StyledCard, ({
   theme,
   withTopBorder
 }) => withTopBorder ? `border-top: ${dsSystem.border(theme.colors.neutral['100'])}` : '');
-const GroupTitle = /*#__PURE__*/styled__default['default'].span.withConfig({
+const GroupTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-17xukaf-1"
 })(["", ""], dsSystem.truncate());
-const GroupTitleGrid = /*#__PURE__*/styled__default['default'].div.withConfig({
+const GroupTitleGrid = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-17xukaf-2"
 })(["display:flex;justify-content:space-between;padding:0 ", ";font-size:", ";", " font-weight:", ";background-color:", ";border-top:", ";line-height:", ";@media (min-width:1024px){background-color:", ";border-top:", ";}"], props => props.theme.space.xs, props => `calc(${dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)} / 2)`, dsSystem.color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['200'], props => dsSystem.border(props.theme.colors.brand['300']), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), props => props.theme.colors.neutral['080'], props => dsSystem.border(props.theme.colors.neutral['080']));
 
@@ -41,16 +41,16 @@ const MobileCardGroup = ({
   onChange = () => null
 }) => {
   const rows = !title ? ['auto'] : [dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];
-  return /*#__PURE__*/_jsx__default['default'](Group__default['default'], {
+  return /*#__PURE__*/_jsx__default["default"](Group__default["default"], {
     activeValue: activeValue,
     multiple: allowMultipleOpen,
     onChange: onChange
-  }, void 0, /*#__PURE__*/_jsx__default['default'](GroupGrid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](GroupGrid, {
     withTopBorder: !title,
     rows: rows
-  }, void 0, !!title && /*#__PURE__*/_jsx__default['default'](GroupTitleGrid, {
+  }, void 0, !!title && /*#__PURE__*/_jsx__default["default"](GroupTitleGrid, {
     pl: "xxs"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx__default['default'](Grid.Grid, {}, void 0, React__default['default'].Children.map(children, (child, idx) => /*#__PURE__*/React__default['default'].cloneElement(child, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {}, void 0, React__default["default"].Children.map(children, (child, idx) => /*#__PURE__*/React__default["default"].cloneElement(child, {
     key: idx,
     value: idx,
     idx
@@ -89,4 +89,4 @@ DSMobileCardGroupWithSchema.propTypes = props;
 var MobileGroup = dsSystem.withTheme(MobileCardGroup);
 
 exports.DSMobileCardGroupWithSchema = DSMobileCardGroupWithSchema;
-exports['default'] = MobileGroup;
+exports["default"] = MobileGroup;

package/cjs/MobileCard/StyledCard.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledCard = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledCard = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-28g2t3-0"
 })(["display:flex;align-items:center;height:fit-content;min-height:", ";border:", ";border-bottom:", ";"], props => props.minHeight, props => dsSystem.border(props.theme.colors.neutral['100']), props => dsSystem.border('.5px', props.theme.colors.neutral['500']));
 

package/cjs/MobileCard/index.js

@@ -7,11 +7,11 @@ var Group = require('./Group.js');
 var ActionAddon = require('./ActionAddon.js');
 var CardIcons = require('./CardIcons.js');
 
-Card['default'].Group = Group['default'];
-const DSMobileCard = Card['default'];
+Card["default"].Group = Group["default"];
+const DSMobileCard = Card["default"];
 
 exports.DSMobileCardWithSchema = Card.DSMobileCardWithSchema;
-exports.default = Card['default'];
+exports["default"] = Card["default"];
 exports.DSMobileCardGroupWithSchema = Group.DSMobileCardGroupWithSchema;
 exports.ActionAddon = ActionAddon.ActionAddon;
 exports.SubIcons = CardIcons.SubIcons;

package/cjs/MobileContextMenu/MobileContextMenu.js

@@ -27,14 +27,14 @@ var _ContextMenuGroup;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const StyledContainer = /*#__PURE__*/styled__default['default'](Grid.Grid).withConfig({
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const StyledContainer = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-15ys5tq-0"
 })(["background:", ";z-index:", ";width:", ";position:fixed;bottom:0;left:", ";max-height:90vh;border-top-left-radius:5px;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);"], props => props.theme.colors.neutral['000'], props => props.zIndex, props => `calc(100% - ${props.theme.space.xs})`, props => props.theme.space.xxs);
-const StyledTitle = /*#__PURE__*/styled__default['default'](Grid.Grid).withConfig({
+const StyledTitle = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-15ys5tq-1"
 })(["font-size:16px;font-weight:", ";color:", ";", " & > span{height:20px;width:20px;}& > span > svg,svg:not([fill]){height:20px;width:20px;fill:", ";}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['000'], dsSystem.truncate(), props => props.theme.colors.neutral['000']);
-const HeaderContainer = /*#__PURE__*/styled__default['default'](Grid.Grid).withConfig({
+const HeaderContainer = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-15ys5tq-2"
 })(["border-top-left-radius:5px;border-top-right-radius:5px;background:", ";"], props => props.theme.colors.brand['600']);
 
@@ -57,16 +57,15 @@ const DSMobileContextMenu = dsSystem.withTheme(({
   selecteds: initSelecteds
 }) => {
   const [selectedItems, setSelectedItems] = React.useState([]);
+  const trueSelected = React.useMemo(() => initSelecteds !== undefined ? initSelecteds : [...selectedItems], [initSelecteds, selectedItems]);
   const containerRef = React.useRef(null);
-  React.useEffect(() => {
-    if (typeof initSelecteds !== 'undefined') {
-      if (multiple) setSelectedItems(prev => [...prev, ...initSelecteds]);else if (singleSelect) setSelectedItems(initSelecteds);
-    }
-  }, [initSelecteds, multiple, singleSelect]);
 
   const handleChange = (value, childProps, event) => {
     onChange(value, childProps, event);
-    if (multiple) setSelectedItems([...value]);else if (singleSelect) setSelectedItems(value);
+
+    if (initSelecteds === undefined) {
+      if (multiple) setSelectedItems([...value]);else if (singleSelect) setSelectedItems(value);
+    }
   };
 
   const handleApply = function (e) {
@@ -78,7 +77,7 @@ const DSMobileContextMenu = dsSystem.withTheme(({
   if (buttonFooter) rows.push('56px');
   if (!open) return null;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default['default'](dsBasic.DSBackdrop, {
+    children: [/*#__PURE__*/_jsx__default["default"](dsBasic.DSBackdrop, {
       type: "cover",
       zIndex: backdropZIndex,
       onClick: e => {
@@ -91,51 +90,51 @@ const DSMobileContextMenu = dsSystem.withTheme(({
       rows: rows,
       ref: containerRef,
       "data-testid": "ds-mobile-context-menu",
-      children: [/*#__PURE__*/_jsx__default['default'](HeaderContainer, {
+      children: [/*#__PURE__*/_jsx__default["default"](HeaderContainer, {
         justifyContent: "center",
         alignItems: "center",
         pl: "xs",
         pr: "xs"
-      }, void 0, /*#__PURE__*/_jsx__default['default'](StyledTitle, {
+      }, void 0, /*#__PURE__*/_jsx__default["default"](StyledTitle, {
         alignItems: "center",
         gutter: "xxs",
         cols: Array(isArr(title) ? title.length : 1).fill('auto')
-      }, void 0, title)), /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+      }, void 0, title)), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
         style: {
           overflow: 'hidden'
         }
-      }, void 0, /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+      }, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
         style: {
           overflow: 'auto'
         }
-      }, void 0, /*#__PURE__*/_jsx__default['default'](Group__default['default'], {
-        activeValue: selectedItems,
+      }, void 0, /*#__PURE__*/_jsx__default["default"](Group__default["default"], {
+        activeValue: trueSelected,
         multiple: multiple,
         onChange: handleChange
-      }, void 0, React__default['default'].Children.map(children, (child, ii) => {
+      }, void 0, React__default["default"].Children.map(children, (child, ii) => {
         var _child$type;
 
-        const isGroup = child.type === (_ContextMenuGroup || (_ContextMenuGroup = /*#__PURE__*/_jsx__default['default'](MobileContextMenuGroup.DSMobileContextMenuGroup, {}))).type || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === MobileContextMenuGroup.DSMobileContextMenuGroup.componentType || child.type === MobileContextMenuGroup.DSMobileContextMenuGroup.type;
+        const isGroup = child.type === (_ContextMenuGroup || (_ContextMenuGroup = /*#__PURE__*/_jsx__default["default"](MobileContextMenuGroup.DSMobileContextMenuGroup, {}))).type || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === MobileContextMenuGroup.DSMobileContextMenuGroup.componentType || child.type === MobileContextMenuGroup.DSMobileContextMenuGroup.type;
         const {
           onClick = lodash.noop
         } = child.props;
         const value = ii;
         let isSelected;
-        if (singleSelect) isSelected = selectedItems === value;else if (multiple) isSelected = selectedItems.includes(value);
-        return /*#__PURE__*/React__default['default'].cloneElement(child, {
+        if (singleSelect) isSelected = trueSelected === value;else if (multiple) isSelected = trueSelected.includes(value);
+        return /*#__PURE__*/React__default["default"].cloneElement(child, {
           value,
           key: `cm.${ii}`,
           isMulti: multiple,
           singleSelect,
           isSelected,
           onClick: !isGroup ? e => onClick(e, child.props) : null,
-          selectedItems: isGroup ? selectedItems : null
+          selectedItems: isGroup ? trueSelected : null
         });
-      })))), buttonFooter && /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+      })))), buttonFooter && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
         pl: "xs",
         pr: "xs",
         alignItems: "center"
-      }, void 0, /*#__PURE__*/React__default['default'].cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
+      }, void 0, /*#__PURE__*/React__default["default"].cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
         containerProps: {
           'data-testid': `${dataTestid}--btn`
         },

package/cjs/MobileContextMenu/MobileContextMenuGroup.js

@@ -19,8 +19,8 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const Title = /*#__PURE__*/styled__default['default'].div.withConfig({
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const Title = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-atfpfh-0"
 })(["height:24px;line-height:24px;font-size:12px;border-top:1px solid ", ";background:", ";padding:0 ", ";color:", ";font-weight:", ";"], props => props.theme.colors.brand['300'], props => props.theme.colors.brand['200'], props => props.theme.space.xs, props => props.theme.colors.neutral['700'], props => props.theme.fontWeights.semibold);
 
@@ -31,14 +31,14 @@ const DSMobileContextMenuGroup = ({
   children,
   value: groupValue,
   selectedItems
-}) => /*#__PURE__*/_jsx__default['default'](dsBasic.Grid, {}, void 0, /*#__PURE__*/_jsx__default['default'](dsBasic.Grid, {}, void 0, /*#__PURE__*/_jsx__default['default'](Title, {}, void 0, title)), /*#__PURE__*/_jsx__default['default'](dsBasic.Grid, {}, void 0, React__default['default'].Children.map(children, (child, index) => {
+}) => /*#__PURE__*/_jsx__default["default"](dsBasic.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsBasic.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](Title, {}, void 0, title)), /*#__PURE__*/_jsx__default["default"](dsBasic.Grid, {}, void 0, React__default["default"].Children.map(children, (child, index) => {
   const {
     onClick = lodash.noop
   } = child.props;
   const value = `${groupValue}:${index}`;
   let isSelected;
   if (singleSelect) isSelected = selectedItems === value;else if (isMulti) isSelected = selectedItems.includes(value);
-  return /*#__PURE__*/React__default['default'].cloneElement(child, {
+  return /*#__PURE__*/React__default["default"].cloneElement(child, {
     value,
     key: 'group.'.concat(index),
     isGroup: true,