@elliemae/ds-mobile 2.3.0-alpha.6 → 2.3.0-next.0

package/cjs/MobileActionToolbar/MobileActionToolbarItem.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var reactDesc = require('react-desc');
+var DSButton = require('@elliemae/ds-button');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+const _excluded = ["icon"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const ToolbarItem = _ref => {
+  let {
+    icon
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const displayIcon = /*#__PURE__*/React__default["default"].cloneElement(icon, {
+    size: 'm'
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({}, otherProps), {}, {
+    buttonType: "text",
+    icon: displayIcon,
+    size: "m"
+  }));
+};
+
+ToolbarItem.displayName = 'ToolbarItem';
+const props = {
+  /** toolbar item icon */
+  icon: reactDesc.PropTypes.element.description('Toolbar item icon')
+};
+const DSToolbarItemWithSchema = reactDesc.describe(ToolbarItem);
+DSToolbarItemWithSchema.propTypes = props;
+
+exports.DSToolbarItemWithSchema = DSToolbarItemWithSchema;
+exports["default"] = ToolbarItem;

package/cjs/MobileActionToolbar/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MobileActionToolbar = require('./MobileActionToolbar.js');
+var MobileActionToolbarItem = require('./MobileActionToolbarItem.js');
+
+
+
+exports.DSMobileActionToolbarWithSchema = MobileActionToolbar.DSMobileActionToolbarWithSchema;
+exports["default"] = MobileActionToolbar["default"];
+exports.DSToolbarItemWithSchema = MobileActionToolbarItem.DSToolbarItemWithSchema;
+exports.ToolbarItem = MobileActionToolbarItem["default"];

package/cjs/MobileBanner/MobileBanner.js

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var reactDesc = require('react-desc');
+var icons = require('./utils/icons.js');
+var propTypes = require('./propTypes.js');
+var defaultProps = require('./defaultProps.js');
+var styles = require('./styles.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _CloseX;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DSMobileBanner = _ref => {
+  let {
+    type,
+    isOpen,
+    closeButtonOnClick,
+    label,
+    body,
+    actionLinkLabel,
+    actionLinkHref,
+    actionLinkOnClick,
+    showCloseButton,
+    containerProps,
+    focusOnOpen
+  } = _ref;
+  const innerContainerRef = React.useRef(null);
+  const closeRef = React.useRef(null);
+  const [current, setCurrent] = React.useState(isOpen);
+  const [isAnimating, setIsAnimating] = React.useState(false);
+  const [height, setHeight] = React.useState(0);
+  React.useEffect(() => {
+    if (innerContainerRef.current) {
+      setHeight(innerContainerRef.current.offsetHeight);
+    }
+  }, [isAnimating, isOpen]);
+  React.useEffect(() => {
+    if (focusOnOpen && closeRef.current && isOpen) {
+      var _closeRef$current, _closeRef$current$foc;
+
+      (_closeRef$current = closeRef.current) === null || _closeRef$current === void 0 ? void 0 : (_closeRef$current$foc = _closeRef$current.focus) === null || _closeRef$current$foc === void 0 ? void 0 : _closeRef$current$foc.call(_closeRef$current);
+    }
+  }, [focusOnOpen, isOpen]);
+  React.useLayoutEffect(() => {
+    if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
+  }, [isOpen, current]);
+  if (!isAnimating && !isOpen) return null;
+  return /*#__PURE__*/jsxRuntime.jsx(styles.StyledBannerContainer, _objectSpread(_objectSpread({
+    type: type,
+    isOpen: isOpen,
+    isAnimating: isAnimating,
+    onAnimationEnd: () => setCurrent(isOpen),
+    height: height
+  }, containerProps), {}, {
+    "data-testid": "ds-mobile-banner-container",
+    role: "alert",
+    children: /*#__PURE__*/jsxRuntime.jsxs(styles.StyledInnerContainer, {
+      type: type,
+      isOpen: isOpen,
+      ref: innerContainerRef,
+      isAnimating: isAnimating,
+      children: [/*#__PURE__*/_jsx__default["default"](styles.StyledIconContainer, {
+        "data-testid": "ds-mobile-banner-icon"
+      }, void 0, icons.icons[type]), /*#__PURE__*/_jsx__default["default"](styles.StyledContent, {
+        showCloseButton: showCloseButton
+      }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx__default["default"](styles.StyledSubTitle, {}, void 0, body, actionLinkLabel && /*#__PURE__*/_jsx__default["default"](styles.StyledActionLink, {
+        href: actionLinkHref,
+        "data-testid": "ds-mobile-banner-link",
+        onClick: actionLinkOnClick
+      }, void 0, actionLinkLabel))), showCloseButton && /*#__PURE__*/_jsx__default["default"](styles.StyledCloseButtonContainer, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledCloseButton, {
+        "data-testid": "ds-mobile-banner-close-button",
+        buttonType: "link",
+        onClick: closeButtonOnClick,
+        "aria-label": "Close Banner",
+        icon: _CloseX || (_CloseX = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseX, {
+          width: "12px",
+          height: "12px"
+        })),
+        innerRef: closeRef
+      }))]
+    })
+  }));
+};
+
+DSMobileBanner.defaultProps = defaultProps.defaultProps;
+const DSMobileBannerWithSchema = reactDesc.describe(DSMobileBanner);
+DSMobileBannerWithSchema.propTypes = propTypes.propTypes;
+
+exports.DSMobileBanner = DSMobileBanner;
+exports.DSMobileBannerWithSchema = DSMobileBannerWithSchema;

package/cjs/MobileBanner/defaultProps.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var bannerTypes = require('./utils/bannerTypes.js');
+
+const defaultProps = {
+  type: bannerTypes.MOBILE_BANNER_TYPES.SUCCESS,
+  isOpen: false,
+  closeButtonOnClick: () => null,
+  actionLinkLabel: null,
+  actionLinkHref: null,
+  actionLinkOnClick: () => null,
+  label: '',
+  body: '',
+  showCloseButton: true,
+  containerProps: {},
+  focusOnOpen: false
+};
+
+exports.defaultProps = defaultProps;

package/cjs/MobileBanner/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/MobileBanner/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MobileBanner = require('./MobileBanner.js');
+var bannerTypes = require('./utils/bannerTypes.js');
+
+
+
+exports.DSMobileBanner = MobileBanner.DSMobileBanner;
+exports.DSMobileBannerWithSchema = MobileBanner.DSMobileBannerWithSchema;
+exports.MOBILE_BANNER_TYPES = bannerTypes.MOBILE_BANNER_TYPES;

package/cjs/MobileBanner/propTypes.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const propTypes = {
+  type: reactDesc.PropTypes.oneOf(['info', 'success', 'warning', 'error']).description('Type of banner'),
+  isOpen: reactDesc.PropTypes.bool.description('Whether the banner is open or not'),
+  closeButtonOnClick: reactDesc.PropTypes.func.description('OnClick function used in the close button'),
+  actionLinkLabel: reactDesc.PropTypes.string.description('Label used in the the action link'),
+  actionLinkHref: reactDesc.PropTypes.string.description('Href used in the the action link'),
+  actionLinkOnClick: reactDesc.PropTypes.string.description('OnClick function used in the action link'),
+  label: reactDesc.PropTypes.string.description('Label text for the banner'),
+  body: reactDesc.PropTypes.string.description('Body text for the banner'),
+  showCloseButton: reactDesc.PropTypes.bool.description('Whether the close button should be visible or not'),
+  containerProps: reactDesc.PropTypes.shape({}).description('Set of properties attached to the banner container'),
+  focusOnOpen: reactDesc.PropTypes.bool.description("Whether the banner should get focus when its openedWhether the banner should get focus when it's opened")
+};
+
+exports.propTypes = propTypes;

package/cjs/MobileBanner/styles.js

@@ -0,0 +1,174 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var DSButton = require('@elliemae/ds-button');
+var styleHelpers = require('./utils/styleHelpers.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+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(", ");", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['000'];
+}, _ref2 => {
+  let {
+    type,
+    theme
+  } = _ref2;
+  return styleHelpers.handleBorderColor(type, theme);
+}, _ref3 => {
+  let {
+    isOpen
+  } = _ref3;
+  return isOpen ? '0' : '-100%';
+}, _ref4 => {
+  let {
+    isAnimating,
+    isOpen
+  } = _ref4;
+  return styleHelpers.handleAnimation(isAnimating, isOpen);
+});
+const StyledTextContent = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-4jnp92-1"
+})(["width:100%;"]);
+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 ", ";}"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral[700];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return dsSystem.toMobile(theme.fontSizes.title[700]);
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.fontWeights.semibold;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.space.xxs;
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.neutral[700];
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral[700];
+});
+const StyledSubTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-4jnp92-3"
+})(["font-size:", ";font-weight:", ";"], _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return dsSystem.toMobile(theme.fontSizes.title[600]);
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.fontWeights.regular;
+});
+const StyledIconContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-4jnp92-4"
+})(["margin-top:10px;margin-right:", ";margin-left:", ";"], _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.space.xxs;
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.space.xs;
+});
+const StyledContent = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-4jnp92-5"
+})(["width:100%;display:flex;flex-direction:column;margin:", " 0;margin-right:", ";"], _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.space.xxs2;
+}, _ref16 => {
+  let {
+    showCloseButton
+  } = _ref16;
+  return !showCloseButton ? '28px' : '0';
+});
+const StyledCloseButtonContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-4jnp92-6"
+})(["display:flex;align-items:flex-start;margin-top:6px;margin-right:6px;"]);
+const StyledCloseButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
+  componentId: "sc-4jnp92-7"
+})(["position:relative;&:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.brand[700];
+});
+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:", ";"], _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.space.xs;
+}, _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return dsSystem.toMobile(theme.fontSizes.title[600]);
+}, _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.fontWeights.regular;
+}, _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.colors.brand[600];
+});
+const StyledBannerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-4jnp92-9"
+})(["overflow:hidden;height:", ";", ";"], _ref22 => {
+  let {
+    isOpen
+  } = _ref22;
+  return isOpen ? 'auto' : '0px';
+}, _ref23 => {
+  let {
+    isAnimating,
+    isOpen,
+    height
+  } = _ref23;
+  return styleHelpers.handleAnimation(isAnimating, isOpen, height);
+});
+
+exports.StyledActionLink = StyledActionLink;
+exports.StyledBannerContainer = StyledBannerContainer;
+exports.StyledCloseButton = StyledCloseButton;
+exports.StyledCloseButtonContainer = StyledCloseButtonContainer;
+exports.StyledContent = StyledContent;
+exports.StyledIconContainer = StyledIconContainer;
+exports.StyledInnerContainer = StyledInnerContainer;
+exports.StyledSubTitle = StyledSubTitle;
+exports.StyledTextContent = StyledTextContent;
+exports.StyledTitle = StyledTitle;

package/cjs/MobileBanner/utils/bannerTypes.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const MOBILE_BANNER_TYPES = {
+  INFO: 'info',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  ERROR: 'error'
+};
+
+exports.MOBILE_BANNER_TYPES = MOBILE_BANNER_TYPES;

package/cjs/MobileBanner/utils/icons.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsIcons = require('@elliemae/ds-icons');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const icons = {
+  success: /*#__PURE__*/_jsx__default["default"](dsIcons.SuccessFill, {
+    fill: "#207e56"
+  }),
+  info: /*#__PURE__*/_jsx__default["default"](dsIcons.InfoFill, {
+    fill: "#1e79c2"
+  }),
+  error: /*#__PURE__*/_jsx__default["default"](dsIcons.AlertsDetailFill, {
+    width: "24px",
+    height: "24px",
+    fill: "#c64252"
+  }),
+  warning: /*#__PURE__*/_jsx__default["default"](dsIcons.WarningSquare, {
+    width: "24px",
+    height: "24px",
+    fill: "#d17a00"
+  })
+};
+
+exports.icons = icons;

package/cjs/MobileBanner/utils/styleHelpers.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var dsSystem = require('@elliemae/ds-system');
+var bannerTypes = require('./bannerTypes.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+const slideIn = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n"])));
+const slideOut = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -100%, 0);\n  }\n"])));
+const spanContainer = height => dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
+const shrinkContainer = height => dsSystem.kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
+const handleBorderColor = (type, _ref) => {
+  let {
+    colors
+  } = _ref;
+
+  switch (type) {
+    case bannerTypes.MOBILE_BANNER_TYPES.SUCCESS:
+      return colors.success[900];
+
+    case bannerTypes.MOBILE_BANNER_TYPES.INFO:
+      return colors.brand[600];
+
+    case bannerTypes.MOBILE_BANNER_TYPES.WARNING:
+      return colors.warning[900];
+
+    case bannerTypes.MOBILE_BANNER_TYPES.ERROR:
+      return colors.danger[900];
+  }
+};
+const handleAnimation = function (isAnimating, isOpen) {
+  let height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
+  if (isAnimating) {
+    if (isOpen) {
+      return dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
+    } else {
+      return dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
+    }
+  }
+};
+
+exports.handleAnimation = handleAnimation;
+exports.handleBorderColor = handleBorderColor;
+exports.shrinkContainer = shrinkContainer;
+exports.slideIn = slideIn;
+exports.slideOut = slideOut;
+exports.spanContainer = spanContainer;

package/cjs/MobileCard/ActionAddon.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('styled-components');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+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 = _ref => {
+  let {
+    label,
+    onClick,
+    icon
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](Addon, {
+    onClick: onClick,
+    labelText: label,
+    icon: icon || /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {
+      color: ['brand-primary', 700]
+    })
+  });
+};
+
+exports.ActionAddon = ActionAddon;