@elliemae/ds-mobile 3.0.0-next.45 → 3.0.0-next.48

package/dist/cjs/Tabs/propTypes.js

@@ -4,32 +4,26 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var propTypes_exports = {};
 __export(propTypes_exports, {
   MobileTabPropTypes: () => MobileTabPropTypes,
   MobileTabsPropTypes: () => MobileTabsPropTypes
 });
+module.exports = __toCommonJS(propTypes_exports);
 var React = __toESM(require("react"));
 var import_react_desc = require("react-desc");
 const MobileTabPropTypes = {
@@ -49,5 +43,4 @@ const MobileTabsPropTypes = {
   containerProps: import_react_desc.PropTypes.object.description("Additional properties for the container.").defaultValue({}),
   innerRef: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.func, import_react_desc.PropTypes.shape({ current: import_react_desc.PropTypes.any })]).description("Ref to the container.").defaultValue(void 0)
 };
-module.exports = __toCommonJS(propTypes_exports);
 //# sourceMappingURL=propTypes.js.map

package/dist/cjs/Tabs/propTypes.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/Tabs/propTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const MobileTabPropTypes = {\n  tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n  title: PropTypes.string.description('Tab title.').defaultValue(''),\n  required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n  disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n};\n\nexport const MobileTabsPropTypes = {\n  onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n  tabBarExtraContent: PropTypes.element.description('Extra content next to the Tabs Bar.').defaultValue(undefined),\n  onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n  fixedTabsHeaders: PropTypes.bool\n    .description('Enables fixed Tabs mode. Makes Tab Bar non scrollable and adds equal fixed widths.')\n    .defaultValue(false),\n  activeTab: PropTypes.string\n    .description('Passing a value makes DSTabs a controlled component.')\n    .defaultValue('First DSTab children.'),\n  children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n  tabsListAriaLabel: PropTypes.string.description('Aria label for the Tab list.').defaultValue('Tab list.'),\n  containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n    .description('Ref to the container.')\n    .defaultValue(undefined),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,qBAAqB;AAAA,EAChC,OAAO,4BAAU,OAAO,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EACrE,OAAO,4BAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,4BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,4BAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,sBAAsB;AAAA,EACjC,aAAa,4BAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,oBAAoB,4BAAU,QAAQ,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EAC/G,qBAAqB,4BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,kBAAkB,4BAAU,KACzB,YAAY,oFAAoF,EAChG,aAAa,KAAK;AAAA,EACrB,WAAW,4BAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,4BAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,4BAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,WAAW;AAAA,EACxG,gBAAgB,4BAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,4BAAU,UAAU,CAAC,4BAAU,MAAM,4BAAU,MAAM,EAAE,SAAS,4BAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,qBAAqB;AAAA,EAChC,OAAO,4BAAU,OAAO,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EACrE,OAAO,4BAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,4BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,4BAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,sBAAsB;AAAA,EACjC,aAAa,4BAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,oBAAoB,4BAAU,QAAQ,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EAC/G,qBAAqB,4BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,kBAAkB,4BAAU,KACzB,YAAY,oFAAoF,EAChG,aAAa,KAAK;AAAA,EACrB,WAAW,4BAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,4BAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,4BAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,WAAW;AAAA,EACxG,gBAAgB,4BAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,4BAAU,UAAU,CAAC,4BAAU,MAAM,4BAAU,MAAM,EAAE,SAAS,4BAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;",
   "names": []
 }

package/dist/cjs/index.js

@@ -4,27 +4,21 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
   DSCategoryBox: () => import_CategoryBox.DSCategoryBox,
@@ -54,41 +48,41 @@ __export(src_exports, {
   VirtualizedInfiniteLoader: () => import_InfiniteLoader.VirtualizedInfiniteLoader,
   VirtualizedInfiniteLoaderWithSchema: () => import_InfiniteLoader.VirtualizedInfiniteLoaderWithSchema
 });
+module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-__reExport(src_exports, require("./PageList/PageList"));
-__reExport(src_exports, require("./PageFilter/PageFilter"));
-__reExport(src_exports, require("./PageForm/PageForm"));
-__reExport(src_exports, require("./PageSummary/PageSummary"));
-__reExport(src_exports, require("./LoadingPage"));
-__reExport(src_exports, require("./PageSearch/PageSearch"));
+__reExport(src_exports, require("./PageList/PageList"), module.exports);
+__reExport(src_exports, require("./PageFilter/PageFilter"), module.exports);
+__reExport(src_exports, require("./PageForm/PageForm"), module.exports);
+__reExport(src_exports, require("./PageSummary/PageSummary"), module.exports);
+__reExport(src_exports, require("./LoadingPage"), module.exports);
+__reExport(src_exports, require("./PageSearch/PageSearch"), module.exports);
 var import_Accordion = require("./Accordion");
-__reExport(src_exports, require("./MobileSeparator"));
-__reExport(src_exports, require("./MobileListItem"));
-__reExport(src_exports, require("./MobileTouchable"));
-__reExport(src_exports, require("./MobileContextMenu"));
-__reExport(src_exports, require("./MobileFilterbar"));
-__reExport(src_exports, require("./MobileActionToolbar"));
-__reExport(src_exports, require("./MobileFooter"));
-__reExport(src_exports, require("./MobilePageHeader"));
-__reExport(src_exports, require("./MobileSelectList"));
-__reExport(src_exports, require("./MobileDatePicker"));
-__reExport(src_exports, require("./MobileTimePicker"));
-__reExport(src_exports, require("./MobileEmtpyState"));
-__reExport(src_exports, require("./MobileDropdownMenu"));
-__reExport(src_exports, require("./Tabs"));
+__reExport(src_exports, require("./MobileSeparator"), module.exports);
+__reExport(src_exports, require("./MobileListItem"), module.exports);
+__reExport(src_exports, require("./MobileTouchable"), module.exports);
+__reExport(src_exports, require("./MobileContextMenu"), module.exports);
+__reExport(src_exports, require("./MobileFilterbar"), module.exports);
+__reExport(src_exports, require("./MobileActionToolbar"), module.exports);
+__reExport(src_exports, require("./MobileFooter"), module.exports);
+__reExport(src_exports, require("./MobilePageHeader"), module.exports);
+__reExport(src_exports, require("./MobileSelectList"), module.exports);
+__reExport(src_exports, require("./MobileDatePicker"), module.exports);
+__reExport(src_exports, require("./MobileTimePicker"), module.exports);
+__reExport(src_exports, require("./MobileEmtpyState"), module.exports);
+__reExport(src_exports, require("./MobileDropdownMenu"), module.exports);
+__reExport(src_exports, require("./Tabs"), module.exports);
 var import_MobileCard = require("./MobileCard");
 var import_CollectionBox = require("./CollectionBox");
 var import_CategoryBox = require("./CategoryBox");
 var import_GroupBox = require("./GroupBox");
 var import_SwipeToRefresh = require("./SwipeToRefresh/SwipeToRefresh");
 var import_GlobalHeader = require("./GlobalHeader");
-__reExport(src_exports, require("./Modal"));
+__reExport(src_exports, require("./Modal"), module.exports);
 var import_SideNav = require("./SideNav");
 var import_InfiniteLoader = require("./InfiniteLoader");
-__reExport(src_exports, require("./MobileBanner"));
-__reExport(src_exports, require("./MobileActionToolbar"));
+__reExport(src_exports, require("./MobileBanner"), module.exports);
+__reExport(src_exports, require("./MobileActionToolbar"), module.exports);
 var import_MobileActionToolbar = __toESM(require("./MobileActionToolbar"));
-__reExport(src_exports, require("./MobileSeparator"));
+__reExport(src_exports, require("./MobileSeparator"), module.exports);
 var import_MobileSeparator = __toESM(require("./MobileSeparator"));
-module.exports = __toCommonJS(src_exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable import/export */\n// page templates\nexport * from './PageList/PageList';\nexport * from './PageFilter/PageFilter';\nexport * from './PageForm/PageForm';\nexport * from './PageSummary/PageSummary';\nexport * from './LoadingPage';\nexport * from './PageSearch/PageSearch';\n\n// components\nexport {\n  DSMobileAccordion,\n  DSMobileAccordionItem,\n  DSMobileAccordionWithSchema,\n  DSMobileAccordionItemWithSchema,\n} from './Accordion';\nexport * from './MobileSeparator';\nexport * from './MobileListItem';\nexport * from './MobileTouchable';\nexport * from './MobileContextMenu';\nexport * from './MobileFilterbar';\nexport * from './MobileActionToolbar';\nexport * from './MobileFooter';\nexport * from './MobilePageHeader';\nexport * from './MobileSelectList';\nexport * from './MobileDatePicker';\nexport * from './MobileTimePicker';\nexport * from './MobileEmtpyState';\nexport * from './MobileDropdownMenu';\nexport * from './Tabs';\nexport { DSMobileCard, DSMobileCardWithSchema, DSMobileCardGroupWithSchema, SubIcons } from './MobileCard';\nexport { DSCollectionBox, DSCollectionBoxWithSchema } from './CollectionBox';\nexport { DSCategoryBox, DSCategoryBoxWithSchema } from './CategoryBox';\nexport { DSGroupBox, DSGroupBoxWithSchema } from './GroupBox';\nexport { SwipeToRefresh, SwipeToRefreshWithSchema } from './SwipeToRefresh/SwipeToRefresh';\nexport { DSGlobalHeader, DSGlobalHeaderWithSchema } from './GlobalHeader';\nexport * from './Modal';\nexport { DSSideNav, DSSideNavWithSchema } from './SideNav';\nexport {\n  InfiniteLoader,\n  VirtualizedInfiniteLoader,\n  VirtualizedInfiniteLoaderWithSchema,\n  InfiniteLoaderWithSchema,\n} from './InfiniteLoader';\nexport * from './MobileBanner';\nexport * from './MobileActionToolbar';\nexport { default as DSMobileActionToolbar } from './MobileActionToolbar';\nexport * from './MobileSeparator';\nexport { default as DSMobileSeparator } from './MobileSeparator';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AAGd,uBAKO;AACP,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAA4F;AAC5F,2BAA2D;AAC3D,yBAAuD;AACvD,sBAAiD;AACjD,4BAAyD;AACzD,0BAAyD;AACzD,wBAAc;AACd,qBAA+C;AAC/C,4BAKO;AACP,wBAAc;AACd,wBAAc;AACd,iCAAiD;AACjD,wBAAc;AACd,6BAA6C;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,wBAAc,gCAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,gCAJd;AAKA,wBAAc,sCALd;AAMA,wBAAc,0BANd;AAOA,wBAAc,oCAPd;AAUA,uBAKO;AACP,wBAAc,8BAhBd;AAiBA,wBAAc,6BAjBd;AAkBA,wBAAc,8BAlBd;AAmBA,wBAAc,gCAnBd;AAoBA,wBAAc,8BApBd;AAqBA,wBAAc,kCArBd;AAsBA,wBAAc,2BAtBd;AAuBA,wBAAc,+BAvBd;AAwBA,wBAAc,+BAxBd;AAyBA,wBAAc,+BAzBd;AA0BA,wBAAc,+BA1Bd;AA2BA,wBAAc,+BA3Bd;AA4BA,wBAAc,iCA5Bd;AA6BA,wBAAc,mBA7Bd;AA8BA,wBAA4F;AAC5F,2BAA2D;AAC3D,yBAAuD;AACvD,sBAAiD;AACjD,4BAAyD;AACzD,0BAAyD;AACzD,wBAAc,oBApCd;AAqCA,qBAA+C;AAC/C,4BAKO;AACP,wBAAc,2BA5Cd;AA6CA,wBAAc,kCA7Cd;AA8CA,iCAAiD;AACjD,wBAAc,8BA/Cd;AAgDA,6BAA6C;",
   "names": []
 }

package/dist/esm/MobileBanner/MobileBanner.js

@@ -33,6 +33,7 @@ import {
   StyledIconContainer,
   StyledSubTitle,
   StyledTitle,
+  StyledSubTitleText,
   StyledCloseButtonContainer
 } from "./styles";
 const DSMobileBanner = ({
@@ -89,21 +90,21 @@ const DSMobileBanner = ({
     "data-testid": "ds-mobile-banner-icon"
   }, icons[type]), /* @__PURE__ */ React2.createElement(StyledContent, {
     showCloseButton
-  }, /* @__PURE__ */ React2.createElement(StyledTitle, null, label), /* @__PURE__ */ React2.createElement(StyledSubTitle, null, body, actionLinkLabel && /* @__PURE__ */ React2.createElement(StyledActionLink, {
+  }, /* @__PURE__ */ React2.createElement(StyledTitle, null, label), /* @__PURE__ */ React2.createElement(StyledSubTitle, null, /* @__PURE__ */ React2.createElement(StyledSubTitleText, null, body), actionLinkLabel && /* @__PURE__ */ React2.createElement(StyledActionLink, {
     href: actionLinkHref,
     "data-testid": "ds-mobile-banner-link",
     onClick: actionLinkOnClick
   }, actionLinkLabel))), showCloseButton && /* @__PURE__ */ React2.createElement(StyledCloseButtonContainer, null, /* @__PURE__ */ React2.createElement(StyledCloseButton, {
     "data-testid": "ds-mobile-banner-close-button",
-    buttonType: "link",
+    buttonType: "icon",
     onClick: closeButtonOnClick,
     "aria-label": "Close Banner",
-    icon: /* @__PURE__ */ React2.createElement(CloseX, {
-      width: "12px",
-      height: "12px"
-    }),
-    innerRef: closeRef
-  }))));
+    innerRef: closeRef,
+    size: "s"
+  }, /* @__PURE__ */ React2.createElement(CloseX, {
+    width: "12px",
+    height: "12px"
+  })))));
 };
 DSMobileBanner.defaultProps = defaultProps;
 DSMobileBanner.propTypes = propTypes;

package/dist/esm/MobileBanner/MobileBanner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileBanner/MobileBanner.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { describe } from 'react-desc';\nimport type { MobileBannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n  StyledActionLink,\n  StyledCloseButton,\n  StyledInnerContainer,\n  StyledBannerContainer,\n  StyledContent,\n  StyledIconContainer,\n  StyledSubTitle,\n  StyledTitle,\n  StyledCloseButtonContainer,\n} from './styles';\n\nconst DSMobileBanner = ({\n  type,\n  isOpen,\n  closeButtonOnClick,\n  label,\n  body,\n  actionLinkLabel,\n  actionLinkHref,\n  actionLinkOnClick,\n  showCloseButton,\n  containerProps,\n  focusOnOpen,\n}: MobileBannerPropsT): JSX.Element => {\n  const innerContainerRef = useRef<HTMLDivElement | null>(null);\n  const closeRef = useRef<HTMLDivElement | null>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState<number>(0);\n\n  useEffect(() => {\n    if (innerContainerRef.current) {\n      setHeight(innerContainerRef.current.offsetHeight);\n    }\n  }, [isAnimating, isOpen]);\n\n  useEffect(() => {\n    if (focusOnOpen && closeRef.current && isOpen) {\n      closeRef.current?.focus?.();\n    }\n  }, [focusOnOpen, isOpen]);\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      type={type}\n      isOpen={isOpen}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => setCurrent(isOpen)}\n      height={height}\n      {...containerProps}\n      data-testid=\"ds-mobile-banner-container\"\n      role=\"alert\"\n    >\n      <StyledInnerContainer type={type} isOpen={isOpen} ref={innerContainerRef} isAnimating={isAnimating}>\n        <StyledIconContainer data-testid=\"ds-mobile-banner-icon\">{icons[type]}</StyledIconContainer>\n        <StyledContent showCloseButton={showCloseButton}>\n          <StyledTitle>{label}</StyledTitle>\n          <StyledSubTitle>\n            {body}\n            {actionLinkLabel && (\n              <StyledActionLink href={actionLinkHref} data-testid=\"ds-mobile-banner-link\" onClick={actionLinkOnClick}>\n                {actionLinkLabel}\n              </StyledActionLink>\n            )}\n          </StyledSubTitle>\n        </StyledContent>\n        {showCloseButton && (\n          <StyledCloseButtonContainer>\n            <StyledCloseButton\n              data-testid=\"ds-mobile-banner-close-button\"\n              buttonType=\"link\"\n              onClick={closeButtonOnClick}\n              aria-label=\"Close Banner\"\n              icon={<CloseX width=\"12px\" height=\"12px\" />}\n              innerRef={closeRef}\n            />\n          </StyledCloseButtonContainer>\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSMobileBanner.defaultProps = defaultProps;\nDSMobileBanner.propTypes = propTypes;\nconst DSMobileBannerWithSchema = describe(DSMobileBanner);\nDSMobileBannerWithSchema.propTypes = propTypes;\n\nexport { DSMobileBanner, DSMobileBannerWithSchema };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACqC;AACrC,QAAM,oBAAoB,OAA8B,IAAI;AAC5D,QAAM,WAAW,OAA8B,IAAI;AACnD,QAAM,CAAC,SAAS,cAAc,SAAkB,MAAM;AACtD,QAAM,CAAC,aAAa,kBAAkB,SAAkB,KAAK;AAC7D,QAAM,CAAC,QAAQ,aAAa,SAAiB,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,gBAAU,kBAAkB,QAAQ,YAAY;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,YAAU,MAAM;AACd,QAAI,eAAe,SAAS,WAAW,QAAQ;AAC7C,eAAS,SAAS,QAAQ;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,kBAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe,IAAI;AAAA;AAChD,qBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,MAAI,CAAC,eAAe,CAAC;AAAQ,WAAO;AAEpC,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM,WAAW,MAAM;AAAA,IACvC;AAAA,KACI,iBANL;AAAA,IAOC,eAAY;AAAA,IACZ,MAAK;AAAA,MAEL,qCAAC;AAAA,IAAqB;AAAA,IAAY;AAAA,IAAgB,KAAK;AAAA,IAAmB;AAAA,KACxE,qCAAC;AAAA,IAAoB,eAAY;AAAA,KAAyB,MAAM,KAAM,GACtE,qCAAC;AAAA,IAAc;AAAA,KACb,qCAAC,mBAAa,KAAM,GACpB,qCAAC,sBACE,MACA,mBACC,qCAAC;AAAA,IAAiB,MAAM;AAAA,IAAgB,eAAY;AAAA,IAAwB,SAAS;AAAA,KAClF,eACH,CAEJ,CACF,GACC,mBACC,qCAAC,kCACC,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,YAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAW;AAAA,IACX,MAAM,qCAAC;AAAA,MAAO,OAAM;AAAA,MAAO,QAAO;AAAA,KAAO;AAAA,IACzC,UAAU;AAAA,GACZ,CACF,CAEJ,CACF;AAEJ;AAEA,eAAe,eAAe;AAC9B,eAAe,YAAY;AAC3B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';\nimport { CloseX } from '@elliemae/ds-icons';\n\nimport { describe } from 'react-desc';\nimport type { MobileBannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n  StyledActionLink,\n  StyledCloseButton,\n  StyledInnerContainer,\n  StyledBannerContainer,\n  StyledContent,\n  StyledIconContainer,\n  StyledSubTitle,\n  StyledTitle,\n  StyledSubTitleText,\n  StyledCloseButtonContainer,\n} from './styles';\n\nconst DSMobileBanner = ({\n  type,\n  isOpen,\n  closeButtonOnClick,\n  label,\n  body,\n  actionLinkLabel,\n  actionLinkHref,\n  actionLinkOnClick,\n  showCloseButton,\n  containerProps,\n  focusOnOpen,\n}: MobileBannerPropsT): JSX.Element => {\n  const innerContainerRef = useRef<HTMLDivElement | null>(null);\n  const closeRef = useRef<HTMLDivElement | null>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState<number>(0);\n\n  useEffect(() => {\n    if (innerContainerRef.current) {\n      setHeight(innerContainerRef.current.offsetHeight);\n    }\n  }, [isAnimating, isOpen]);\n\n  useEffect(() => {\n    if (focusOnOpen && closeRef.current && isOpen) {\n      closeRef.current?.focus?.();\n    }\n  }, [focusOnOpen, isOpen]);\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      type={type}\n      isOpen={isOpen}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => setCurrent(isOpen)}\n      height={height}\n      {...containerProps}\n      data-testid=\"ds-mobile-banner-container\"\n      role=\"alert\"\n    >\n      <StyledInnerContainer type={type} isOpen={isOpen} ref={innerContainerRef} isAnimating={isAnimating}>\n        <StyledIconContainer data-testid=\"ds-mobile-banner-icon\">{icons[type]}</StyledIconContainer>\n        <StyledContent showCloseButton={showCloseButton}>\n          <StyledTitle>{label}</StyledTitle>\n          <StyledSubTitle>\n            <StyledSubTitleText>{body}</StyledSubTitleText>\n            {actionLinkLabel && (\n              <StyledActionLink href={actionLinkHref} data-testid=\"ds-mobile-banner-link\" onClick={actionLinkOnClick}>\n                {actionLinkLabel}\n              </StyledActionLink>\n            )}\n          </StyledSubTitle>\n        </StyledContent>\n        {showCloseButton && (\n          <StyledCloseButtonContainer>\n            <StyledCloseButton\n              data-testid=\"ds-mobile-banner-close-button\"\n              buttonType=\"icon\"\n              onClick={closeButtonOnClick}\n              aria-label=\"Close Banner\"\n              innerRef={closeRef}\n              size=\"s\"\n            >\n              <CloseX width=\"12px\" height=\"12px\" />\n            </StyledCloseButton>\n          </StyledCloseButtonContainer>\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSMobileBanner.defaultProps = defaultProps;\nDSMobileBanner.propTypes = propTypes;\nconst DSMobileBannerWithSchema = describe(DSMobileBanner);\nDSMobileBannerWithSchema.propTypes = propTypes;\n\nexport { DSMobileBanner, DSMobileBannerWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACqC;AACrC,QAAM,oBAAoB,OAA8B,IAAI;AAC5D,QAAM,WAAW,OAA8B,IAAI;AACnD,QAAM,CAAC,SAAS,cAAc,SAAkB,MAAM;AACtD,QAAM,CAAC,aAAa,kBAAkB,SAAkB,KAAK;AAC7D,QAAM,CAAC,QAAQ,aAAa,SAAiB,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,gBAAU,kBAAkB,QAAQ,YAAY;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,YAAU,MAAM;AACd,QAAI,eAAe,SAAS,WAAW,QAAQ;AAC7C,eAAS,SAAS,QAAQ;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,kBAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe,IAAI;AAAA;AAChD,qBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,MAAI,CAAC,eAAe,CAAC;AAAQ,WAAO;AAEpC,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM,WAAW,MAAM;AAAA,IACvC;AAAA,KACI,iBANL;AAAA,IAOC,eAAY;AAAA,IACZ,MAAK;AAAA,MAEL,qCAAC;AAAA,IAAqB;AAAA,IAAY;AAAA,IAAgB,KAAK;AAAA,IAAmB;AAAA,KACxE,qCAAC;AAAA,IAAoB,eAAY;AAAA,KAAyB,MAAM,KAAM,GACtE,qCAAC;AAAA,IAAc;AAAA,KACb,qCAAC,mBAAa,KAAM,GACpB,qCAAC,sBACC,qCAAC,0BAAoB,IAAK,GACzB,mBACC,qCAAC;AAAA,IAAiB,MAAM;AAAA,IAAgB,eAAY;AAAA,IAAwB,SAAS;AAAA,KAClF,eACH,CAEJ,CACF,GACC,mBACC,qCAAC,kCACC,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,YAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAW;AAAA,IACX,UAAU;AAAA,IACV,MAAK;AAAA,KAEL,qCAAC;AAAA,IAAO,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO,CACrC,CACF,CAEJ,CACF;AAEJ;AAEA,eAAe,eAAe;AAC9B,eAAe,YAAY;AAC3B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/MobileBanner/styles.js

@@ -1,16 +1,17 @@
 import * as React from "react";
 import styled from "styled-components";
 import { toMobile } from "@elliemae/ds-system";
-import DSButton from "@elliemae/ds-button";
+import { DSButtonV2 } from "@elliemae/ds-button";
 import { handleAnimation, handleBorderColor } from "./utils/styleHelpers";
 const StyledInnerContainer = styled.div`
   display: flex;
-  min-height: 68px;
+  min-height: 60px;
   width: 100%;
   background-color: ${({ theme }) => theme.colors.neutral["000"]};
   border-bottom: 4px solid ${({ type, theme }) => handleBorderColor(type, theme)};
   transform: translateY(${({ isOpen }) => isOpen ? "0" : "-100%"});
   ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};
+  padding: 8px 8px 8px 16px;
 `;
 const StyledTextContent = styled.div`
   width: 100%;
@@ -19,7 +20,7 @@ const StyledTitle = styled.div`
   color: ${({ theme }) => theme.colors.neutral[700]};
   font-size: ${({ theme }) => toMobile(theme.fontSizes.title[700])};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  margin-bottom: ${({ theme }) => theme.space.xxs};
+  margin-bottom: ${({ theme }) => theme.space.xxxs};
   @media not all and (min-resolution: 0.001dpcm) {
     @media {
       -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render
@@ -32,28 +33,35 @@ const StyledTitle = styled.div`
   }
 `;
 const StyledSubTitle = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
   font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};
   font-weight: ${({ theme }) => theme.fontWeights.regular};
+
+  & > * {
+    margin-top: 4px;
+  }
 `;
 const StyledIconContainer = styled.div`
-  margin-top: 10px;
   margin-right: ${({ theme }) => theme.space.xxs};
-  margin-left: ${({ theme }) => theme.space.xs};
 `;
 const StyledContent = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  margin: ${({ theme }) => theme.space.xxs2} 0;
   margin-right: ${({ showCloseButton }) => !showCloseButton ? "28px" : "0"};
 `;
 const StyledCloseButtonContainer = styled.div`
   display: flex;
   align-items: flex-start;
-  margin-top: 6px;
-  margin-right: 6px;
 `;
-const StyledCloseButton = styled(DSButton)`
+const StyledSubTitleText = styled.span`
+  margin-right: 16px;
+  line-height: 1.1;
+`;
+const StyledCloseButton = styled(DSButtonV2)`
   position: relative;
   &:focus {
     &:after {
@@ -72,8 +80,6 @@ const StyledCloseButton = styled(DSButton)`
 `;
 const StyledActionLink = styled.a`
   text-decoration: none;
-  float: right;
-  margin-left: ${({ theme }) => theme.space.xs};
   line-height: 1.1;
   font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};
   font-weight: ${({ theme }) => theme.fontWeights.regular};
@@ -93,6 +99,7 @@ export {
   StyledIconContainer,
   StyledInnerContainer,
   StyledSubTitle,
+  StyledSubTitleText,
   StyledTextContent,
   StyledTitle
 };

package/dist/esm/MobileBanner/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileBanner/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { toMobile } from '@elliemae/ds-system';\nimport DSButton from '@elliemae/ds-button';\nimport type { StyledBannerContainerT, StyledContentT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\n  display: flex;\n  min-height: 68px;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  border-bottom: 4px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n  transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledTextContent = styled.div`\n  width: 100%;\n`;\n\nexport const StyledTitle = styled.div`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => toMobile(theme.fontSizes.title[700])};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  margin-bottom: ${({ theme }) => theme.space.xxs};\n  @media not all and (min-resolution: 0.001dpcm) {\n    @media {\n      -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n      -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n    }\n  }\n  @media screen and (min--moz-device-pixel-ratio: 0) {\n    -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n    -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n  }\n`;\n\nexport const StyledSubTitle = styled.div`\n  font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledIconContainer = styled.div`\n  margin-top: 10px;\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledContent = styled.div<StyledContentT>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  margin: ${({ theme }) => theme.space.xxs2} 0;\n  margin-right: ${({ showCloseButton }) => (!showCloseButton ? '28px' : '0')};\n`;\n\nexport const StyledCloseButtonContainer = styled.div`\n  display: flex;\n  align-items: flex-start;\n  margin-top: 6px;\n  margin-right: 6px;\n`;\nexport const StyledCloseButton = styled(DSButton)`\n  position: relative;\n  &:focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledActionLink = styled.a`\n  text-decoration: none;\n  float: right;\n  margin-left: ${({ theme }) => theme.space.xs};\n  line-height: 1.1;\n  font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledBannerContainer = styled.div<StyledBannerContainerT>`\n  overflow: hidden;\n  height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEO,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,kBAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,aAAc,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,aAAa,gBAAgB,aAAa,MAAM;AAAA;AAG7D,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAIjC,MAAM,cAAc,OAAO;AAAA,WACvB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,mBAC/B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,mCAIX,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKtC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI9D,MAAM,iBAAiB,OAAO;AAAA,eACtB,CAAC,EAAE,YAAY,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,sBAAsB,OAAO;AAAA;AAAA,kBAExB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGrC,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,kBACrB,CAAC,EAAE,sBAAuB,CAAC,kBAAkB,SAAS;AAAA;AAGjE,MAAM,6BAA6B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAM1C,MAAM,oBAAoB,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWtB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA,iBAGtB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA,eAE7B,CAAC,EAAE,YAAY,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,wBAAwB,OAAO;AAAA;AAAA,YAEhC,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,gBAAgB,aAAa,QAAQ,MAAM;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { toMobile } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport type { StyledBannerContainerT, StyledContentT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\n  display: flex;\n  min-height: 60px;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  border-bottom: 4px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n  transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n  padding: 8px 8px 8px 16px;\n`;\n\nexport const StyledTextContent = styled.div`\n  width: 100%;\n`;\n\nexport const StyledTitle = styled.div`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => toMobile(theme.fontSizes.title[700])};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  margin-bottom: ${({ theme }) => theme.space.xxxs};\n  @media not all and (min-resolution: 0.001dpcm) {\n    @media {\n      -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n      -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n    }\n  }\n  @media screen and (min--moz-device-pixel-ratio: 0) {\n    -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n    -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n  }\n`;\n\nexport const StyledSubTitle = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n\n  font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n\n  & > * {\n    margin-top: 4px;\n  }\n`;\n\nexport const StyledIconContainer = styled.div`\n  margin-right: ${({ theme }) => theme.space.xxs};\n`;\n\nexport const StyledContent = styled.div<StyledContentT>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  margin-right: ${({ showCloseButton }) => (!showCloseButton ? '28px' : '0')};\n`;\n\nexport const StyledCloseButtonContainer = styled.div`\n  display: flex;\n  align-items: flex-start;\n`;\n\nexport const StyledSubTitleText = styled.span`\n  margin-right: 16px;\n  line-height: 1.1;\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2)`\n  position: relative;\n  &:focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledActionLink = styled.a`\n  text-decoration: none;\n  line-height: 1.1;\n  font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledBannerContainer = styled.div<StyledBannerContainerT>`\n  overflow: hidden;\n  height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEO,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,kBAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,aAAc,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,aAAa,gBAAgB,aAAa,MAAM;AAAA;AAAA;AAI7D,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAIjC,MAAM,cAAc,OAAO;AAAA,WACvB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,mBAC/B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,mCAIX,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKtC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI9D,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKtB,CAAC,EAAE,YAAY,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,sBAAsB,OAAO;AAAA,kBACxB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGtC,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIlB,CAAC,EAAE,sBAAuB,CAAC,kBAAkB,SAAS;AAAA;AAGjE,MAAM,6BAA6B,OAAO;AAAA;AAAA;AAAA;AAK1C,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAKlC,MAAM,oBAAoB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWxB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA,eAGxB,CAAC,EAAE,YAAY,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,wBAAwB,OAAO;AAAA;AAAA,YAEhC,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,gBAAgB,aAAa,QAAQ,MAAM;AAAA;",
   "names": []
 }

package/dist/esm/MobileBanner/utils/icons.js

@@ -3,20 +3,24 @@ import React2 from "react";
 import { AlertsDetailFill, SuccessFill, InfoFill, WarningSquare } from "@elliemae/ds-icons";
 const icons = {
   success: /* @__PURE__ */ React2.createElement(SuccessFill, {
-    fill: "#207e56"
+    color: ["success", 900],
+    width: "24px",
+    height: "24px"
   }),
   info: /* @__PURE__ */ React2.createElement(InfoFill, {
-    fill: "#1e79c2"
+    color: ["brand-primary", 600],
+    width: "24px",
+    height: "24px"
   }),
   error: /* @__PURE__ */ React2.createElement(AlertsDetailFill, {
+    color: ["danger", 900],
     width: "24px",
-    height: "24px",
-    fill: "#c64252"
+    height: "24px"
   }),
   warning: /* @__PURE__ */ React2.createElement(WarningSquare, {
+    color: ["warning", 600],
     width: "24px",
-    height: "24px",
-    fill: "#d17a00"
+    height: "24px"
   })
 };
 export {

package/dist/esm/MobileBanner/utils/icons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/MobileBanner/utils/icons.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { AlertsDetailFill, SuccessFill, InfoFill, WarningSquare } from '@elliemae/ds-icons';\n\nexport const icons = {\n  success: <SuccessFill fill=\"#207e56\" />,\n  info: <InfoFill fill=\"#1e79c2\" />,\n  error: <AlertsDetailFill width=\"24px\" height=\"24px\" fill=\"#c64252\" />,\n  warning: <WarningSquare width=\"24px\" height=\"24px\" fill=\"#d17a00\" />,\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,QAAQ;AAAA,EACnB,SAAS,qCAAC;AAAA,IAAY,MAAK;AAAA,GAAU;AAAA,EACrC,MAAM,qCAAC;AAAA,IAAS,MAAK;AAAA,GAAU;AAAA,EAC/B,OAAO,qCAAC;AAAA,IAAiB,OAAM;AAAA,IAAO,QAAO;AAAA,IAAO,MAAK;AAAA,GAAU;AAAA,EACnE,SAAS,qCAAC;AAAA,IAAc,OAAM;AAAA,IAAO,QAAO;AAAA,IAAO,MAAK;AAAA,GAAU;AACpE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { AlertsDetailFill, SuccessFill, InfoFill, WarningSquare } from '@elliemae/ds-icons';\n\nexport const icons = {\n  success: <SuccessFill color={['success', 900]} width=\"24px\" height=\"24px\" />,\n  info: <InfoFill color={['brand-primary', 600]} width=\"24px\" height=\"24px\" />,\n  error: <AlertsDetailFill color={['danger', 900]} width=\"24px\" height=\"24px\" />,\n  warning: <WarningSquare color={['warning', 600]} width=\"24px\" height=\"24px\" />,\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,QAAQ;AAAA,EACnB,SAAS,qCAAC;AAAA,IAAY,OAAO,CAAC,WAAW,GAAG;AAAA,IAAG,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO;AAAA,EAC1E,MAAM,qCAAC;AAAA,IAAS,OAAO,CAAC,iBAAiB,GAAG;AAAA,IAAG,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO;AAAA,EAC1E,OAAO,qCAAC;AAAA,IAAiB,OAAO,CAAC,UAAU,GAAG;AAAA,IAAG,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO;AAAA,EAC5E,SAAS,qCAAC;AAAA,IAAc,OAAO,CAAC,WAAW,GAAG;AAAA,IAAG,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO;AAC9E;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-mobile",
-  "version": "3.0.0-next.45",
+  "version": "3.0.0-next.48",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "files": [
@@ -435,21 +435,20 @@
     "typeSafety": false
   },
   "dependencies": {
-    "@elliemae/ds-accordion": "3.0.0-next.45",
-    "@elliemae/ds-backdrop": "3.0.0-next.45",
-    "@elliemae/ds-button": "3.0.0-next.45",
-    "@elliemae/ds-circular-progress-indicator": "3.0.0-next.45",
-    "@elliemae/ds-form": "3.0.0-next.45",
-    "@elliemae/ds-grid": "3.0.0-next.45",
-    "@elliemae/ds-icon": "3.0.0-next.45",
-    "@elliemae/ds-icons": "3.0.0-next.45",
-    "@elliemae/ds-indeterminate-progress-indicator": "3.0.0-next.45",
-    "@elliemae/ds-props-helpers": "3.0.0-next.45",
-    "@elliemae/ds-shared": "3.0.0-next.45",
-    "@elliemae/ds-system": "3.0.0-next.45",
-    "@elliemae/ds-tabs": "3.0.0-next.45",
-    "@elliemae/ds-truncated-expandable-text": "3.0.0-next.45",
-    "@elliemae/ds-utilities": "3.0.0-next.45",
+    "@elliemae/ds-accordion": "3.0.0-next.48",
+    "@elliemae/ds-backdrop": "3.0.0-next.48",
+    "@elliemae/ds-button": "3.0.0-next.48",
+    "@elliemae/ds-circular-progress-indicator": "3.0.0-next.48",
+    "@elliemae/ds-form": "3.0.0-next.48",
+    "@elliemae/ds-grid": "3.0.0-next.48",
+    "@elliemae/ds-icon": "3.0.0-next.48",
+    "@elliemae/ds-icons": "3.0.0-next.48",
+    "@elliemae/ds-indeterminate-progress-indicator": "3.0.0-next.48",
+    "@elliemae/ds-shared": "3.0.0-next.48",
+    "@elliemae/ds-system": "3.0.0-next.48",
+    "@elliemae/ds-tabs": "3.0.0-next.48",
+    "@elliemae/ds-truncated-expandable-text": "3.0.0-next.48",
+    "@elliemae/ds-utilities": "3.0.0-next.48",
     "@xstyled/styled-components": "~3.1.2",
     "polished": "~3.6.7",
     "prop-types": "~15.8.1",