@elliemae/ds-mobile 3.0.0-next.9 → 3.0.0-rc.0

package/dist/esm/InfiniteLoader/Infiniteloader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InfiniteLoader/Infiniteloader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useRef } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height = window.innerHeight }) => {\n  const callback = (entries) => {\n    const { isIntersecting } = entries[0];\n    if (isIntersecting && !isFetching) {\n      fetchData();\n      // observer.current.unobserve(target.current);\n      observer.current.disconnect();\n      observer.current = undefined;\n    }\n  };\n  // const [target, setTarget] = useState(null);\n  const target = useRef(null);\n  const observer = useRef(null);\n\n  useEffect(() => {\n    if (observer.current) {\n      observer.current.disconnect();\n    }\n    observer.current = new IntersectionObserver(callback, {\n      root: null,\n      rootMargin: '0px',\n      threshold: 0.25,\n    });\n    if (target.current) {\n      observer.current.observe(target.current);\n    }\n    return () => {\n      observer.current?.unobserve(target.current);\n      observer.current?.disconnect();\n    };\n  }, [target, observer, fetchData]);\n\n  return (\n    <Grid style={{ position: 'relative', height, overflow: 'hidden' }}>\n      <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height }}>\n        {children}\n        <div ref={target} style={{ height: 1 }} />\n      </Grid>\n      <Loader isOpen={isFetching} />\n    </Grid>\n  );\n};\n\nconst listProps = {\n  /** toggle loading state */\n  isFetching: PropTypes.bool.description('toggle loading state'),\n  /** callback to fetch new items */\n  fetchData: PropTypes.func.description('callback to fetch new items'),\n  /** row items for infinite loader */\n  children: PropTypes.element.description('row items for infinite loader'),\n  /** infinite loader list height */\n  height: PropTypes.number.isRequired.description('infinite loader list height'),\n};\n\nInfiniteLoader.propTypes = listProps;\n\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\n\nInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,iBAAiB,CAAC,EAAE,YAAY,WAAW,UAAU,SAAS,OAAO,kBAAkB;AAC3F,QAAM,WAAW,CAAC,YAAY;AAC5B,UAAM,EAAE,mBAAmB,QAAQ;AACnC,QAAI,kBAAkB,CAAC,YAAY;AACjC;AAEA,eAAS,QAAQ;AACjB,eAAS,UAAU;AAAA;AAAA;AAIvB,QAAM,SAAS,OAAO;AACtB,QAAM,WAAW,OAAO;AAExB,YAAU,MAAM;AACd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ;AAAA;AAEnB,aAAS,UAAU,IAAI,qBAAqB,UAAU;AAAA,MACpD,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,WAAW;AAAA;AAEb,QAAI,OAAO,SAAS;AAClB,eAAS,QAAQ,QAAQ,OAAO;AAAA;AAElC,WAAO,MAAM;AACX,eAAS,SAAS,UAAU,OAAO;AACnC,eAAS,SAAS;AAAA;AAAA,KAEnB,CAAC,QAAQ,UAAU;AAEtB,SACE,qCAAC,MAAD;AAAA,IAAM,OAAO,EAAE,UAAU,YAAY,QAAQ,UAAU;AAAA,KACrD,qCAAC,MAAD;AAAA,IAAM,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ;AAAA,KACtD,UACD,qCAAC,OAAD;AAAA,IAAK,KAAK;AAAA,IAAQ,OAAO,EAAE,QAAQ;AAAA,OAErC,qCAAC,QAAD;AAAA,IAAQ,QAAQ;AAAA;AAAA;AAKtB,MAAM,YAAY;AAAA,EAEhB,YAAY,UAAU,KAAK,YAAY;AAAA,EAEvC,WAAW,UAAU,KAAK,YAAY;AAAA,EAEtC,UAAU,UAAU,QAAQ,YAAY;AAAA,EAExC,QAAQ,UAAU,OAAO,WAAW,YAAY;AAAA;AAGlD,eAAe,YAAY;AAE3B,MAAM,2BAA2B,SAAS;AAE1C,yBAAyB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useRef } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height = window.innerHeight }) => {\n  const callback = (entries) => {\n    const { isIntersecting } = entries[0];\n    if (isIntersecting && !isFetching) {\n      fetchData();\n      // observer.current.unobserve(target.current);\n      observer.current.disconnect();\n      observer.current = undefined;\n    }\n  };\n  // const [target, setTarget] = useState(null);\n  const target = useRef(null);\n  const observer = useRef(null);\n\n  useEffect(() => {\n    if (observer.current) {\n      observer.current.disconnect();\n    }\n    observer.current = new IntersectionObserver(callback, {\n      root: null,\n      rootMargin: '0px',\n      threshold: 0.25,\n    });\n    if (target.current) {\n      observer.current.observe(target.current);\n    }\n    return () => {\n      observer.current?.unobserve(target.current);\n      observer.current?.disconnect();\n    };\n  }, [target, observer, fetchData]);\n\n  return (\n    <Grid style={{ position: 'relative', height, overflow: 'hidden' }}>\n      <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height }}>\n        {children}\n        <div ref={target} style={{ height: 1 }} />\n      </Grid>\n      <Loader isOpen={isFetching} />\n    </Grid>\n  );\n};\n\nconst listProps = {\n  /** toggle loading state */\n  isFetching: PropTypes.bool.description('toggle loading state'),\n  /** callback to fetch new items */\n  fetchData: PropTypes.func.description('callback to fetch new items'),\n  /** row items for infinite loader */\n  children: PropTypes.element.description('row items for infinite loader'),\n  /** infinite loader list height */\n  height: PropTypes.number.isRequired.description('infinite loader list height'),\n};\n\nInfiniteLoader.propTypes = listProps;\nInfiniteLoader.displayName = 'InfiniteLoader';\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\n\nInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,iBAAiB,CAAC,EAAE,YAAY,WAAW,UAAU,SAAS,OAAO,kBAAkB;AAC3F,QAAM,WAAW,CAAC,YAAY;AAC5B,UAAM,EAAE,mBAAmB,QAAQ;AACnC,QAAI,kBAAkB,CAAC,YAAY;AACjC,gBAAU;AAEV,eAAS,QAAQ,WAAW;AAC5B,eAAS,UAAU;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,SAAS,OAAO,IAAI;AAC1B,QAAM,WAAW,OAAO,IAAI;AAE5B,YAAU,MAAM;AACd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,WAAW;AAAA,IAC9B;AACA,aAAS,UAAU,IAAI,qBAAqB,UAAU;AAAA,MACpD,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,WAAW;AAAA,IACb,CAAC;AACD,QAAI,OAAO,SAAS;AAClB,eAAS,QAAQ,QAAQ,OAAO,OAAO;AAAA,IACzC;AACA,WAAO,MAAM;AACX,eAAS,SAAS,UAAU,OAAO,OAAO;AAC1C,eAAS,SAAS,WAAW;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,QAAQ,UAAU,SAAS,CAAC;AAEhC,SACE,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,QAAQ,UAAU,SAAS;AAAA,KAC9D,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,OAAO;AAAA,KAC7D,UACD,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAQ,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC1C,GACA,qCAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAEhB,YAAY,UAAU,KAAK,YAAY,sBAAsB;AAAA,EAE7D,WAAW,UAAU,KAAK,YAAY,6BAA6B;AAAA,EAEnE,UAAU,UAAU,QAAQ,YAAY,+BAA+B;AAAA,EAEvE,QAAQ,UAAU,OAAO,WAAW,YAAY,6BAA6B;AAC/E;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AAExD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/InfiniteLoader/Loader.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InfiniteLoader/Loader.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-unused-state */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport { LoaderBox } from './styled';\n\nexport const Loader = ({ isOpen }) => (\n  <LoaderBox className={isOpen && 'opened'}>\n    <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n  </LoaderBox>\n);\n\nLoader.propTypes = {\n  isOpen: PropTypes.bool,\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEO,MAAM,SAAS,CAAC,EAAE,aACvB,qCAAC,WAAD;AAAA,EAAW,WAAW,UAAU;AAAA,GAC9B,qCAAC,kCAAD;AAAA,EAAkC,YAAU;AAAA,EAAC,OAAM;AAAA;AAIvD,OAAO,YAAY;AAAA,EACjB,QAAQ,UAAU;AAAA;",
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEO,MAAM,SAAS,CAAC,EAAE,aACvB,qCAAC;AAAA,EAAU,WAAW,UAAU;AAAA,GAC9B,qCAAC;AAAA,EAAiC,YAAU;AAAA,EAAC,OAAM;AAAA,CAAU,CAC/D;AAGF,OAAO,YAAY;AAAA,EACjB,QAAQ,UAAU;AACpB;",
   "names": []
 }

package/dist/esm/InfiniteLoader/VirtualizedInfiniteLoader.js

@@ -51,6 +51,7 @@ const listProps = {
   hasNextPage: PropTypes.bool.description("flag for virtualized list")
 };
 VirtualizedInfiniteLoader.propTypes = listProps;
+VirtualizedInfiniteLoader.displayName = "VirtualizedInfiniteLoader";
 const VirtualizedInfiniteLoaderWithSchema = describe(VirtualizedInfiniteLoader);
 VirtualizedInfiniteLoaderWithSchema.propTypes = listProps;
 export {

package/dist/esm/InfiniteLoader/VirtualizedInfiniteLoader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InfiniteLoader/VirtualizedInfiniteLoader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport RWInfiniteLoader from 'react-window-infinite-loader';\nimport { VariableSizeList as List } from 'react-window';\n\nconst VirtualizedInfiniteLoader = ({\n  moreItemsLoading = false,\n  hasNextPage = false,\n  isItemLoaded = () => true,\n  loadMoreItems,\n  getItemSize = () => 38,\n  height,\n  item: Row,\n}) => {\n  const [itemCount, setItemCount] = useState(10);\n\n  const loadMore = (startIndex, stopIndex) => {\n    if (hasNextPage) setItemCount(itemCount + 1);\n    return loadMoreItems(startIndex, stopIndex);\n  };\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <RWInfiniteLoader\n        isItemLoaded={isItemLoaded}\n        itemCount={itemCount}\n        loadMoreItems={loadMore}\n      >\n        {({ onItemsRendered, ref }) => (\n          <List\n            className=\"List\"\n            height={height}\n            itemCount={itemCount}\n            itemSize={getItemSize}\n            onItemsRendered={onItemsRendered}\n            ref={ref}\n            width=\"100%\"\n          >\n            {Row}\n          </List>\n        )}\n      </RWInfiniteLoader>\n      {moreItemsLoading && (\n        <div\n          style={{\n            position: 'absolute',\n            bottom: 0,\n            background: 'blue',\n            zIndex: 1,\n          }}\n        >\n          Loading\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst listProps = {\n  /** Function responsible for tracking the loaded state of each item. */\n  isItemLoaded: PropTypes.bool.description(\n    'Function responsible for tracking the loaded state of each item.',\n  ),\n  /**  Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading. */\n  loadMoreItems: PropTypes.func.description(\n    'Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading.',\n  ),\n  /** callback to get row item size */\n  getItemSize: PropTypes.func.description('callback to get row item size'),\n  /** height for the list */\n  height: PropTypes.number.description('height for the list'),\n  /** flag to know if virtual list should be on loading state */\n  moreItemsLoading: PropTypes.bool.description(\n    'flag to know if virtual list s',\n  ),\n  /** Row item to render */\n  item: PropTypes.element.description('Row item to render'),\n  /** flag for virtualized list */\n  hasNextPage: PropTypes.bool.description('flag for virtualized list'),\n};\n\nVirtualizedInfiniteLoader.propTypes = listProps;\n\nconst VirtualizedInfiniteLoaderWithSchema = describe(VirtualizedInfiniteLoader);\n\nVirtualizedInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { VirtualizedInfiniteLoader, VirtualizedInfiniteLoaderWithSchema };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,4BAA4B,CAAC;AAAA,EACjC,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,eAAe,MAAM;AAAA,EACrB;AAAA,EACA,cAAc,MAAM;AAAA,EACpB;AAAA,EACA,MAAM;AAAA,MACF;AACJ,QAAM,CAAC,WAAW,gBAAgB,SAAS;AAE3C,QAAM,WAAW,CAAC,YAAY,cAAc;AAC1C,QAAI;AAAa,mBAAa,YAAY;AAC1C,WAAO,cAAc,YAAY;AAAA;AAGnC,SACE,qCAAC,OAAD;AAAA,IAAK,OAAO,EAAE,UAAU;AAAA,KACtB,qCAAC,kBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,KAEd,CAAC,EAAE,iBAAiB,UACnB,qCAAC,MAAD;AAAA,IACE,WAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAM;AAAA,KAEL,OAIN,oBACC,qCAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,QAAQ;AAAA;AAAA,KAEX;AAAA;AAQT,MAAM,YAAY;AAAA,EAEhB,cAAc,UAAU,KAAK,YAC3B;AAAA,EAGF,eAAe,UAAU,KAAK,YAC5B;AAAA,EAGF,aAAa,UAAU,KAAK,YAAY;AAAA,EAExC,QAAQ,UAAU,OAAO,YAAY;AAAA,EAErC,kBAAkB,UAAU,KAAK,YAC/B;AAAA,EAGF,MAAM,UAAU,QAAQ,YAAY;AAAA,EAEpC,aAAa,UAAU,KAAK,YAAY;AAAA;AAG1C,0BAA0B,YAAY;AAEtC,MAAM,sCAAsC,SAAS;AAErD,oCAAoC,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport RWInfiniteLoader from 'react-window-infinite-loader';\nimport { VariableSizeList as List } from 'react-window';\n\nconst VirtualizedInfiniteLoader = ({\n  moreItemsLoading = false,\n  hasNextPage = false,\n  isItemLoaded = () => true,\n  loadMoreItems,\n  getItemSize = () => 38,\n  height,\n  item: Row,\n}) => {\n  const [itemCount, setItemCount] = useState(10);\n\n  const loadMore = (startIndex, stopIndex) => {\n    if (hasNextPage) setItemCount(itemCount + 1);\n    return loadMoreItems(startIndex, stopIndex);\n  };\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <RWInfiniteLoader\n        isItemLoaded={isItemLoaded}\n        itemCount={itemCount}\n        loadMoreItems={loadMore}\n      >\n        {({ onItemsRendered, ref }) => (\n          <List\n            className=\"List\"\n            height={height}\n            itemCount={itemCount}\n            itemSize={getItemSize}\n            onItemsRendered={onItemsRendered}\n            ref={ref}\n            width=\"100%\"\n          >\n            {Row}\n          </List>\n        )}\n      </RWInfiniteLoader>\n      {moreItemsLoading && (\n        <div\n          style={{\n            position: 'absolute',\n            bottom: 0,\n            background: 'blue',\n            zIndex: 1,\n          }}\n        >\n          Loading\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst listProps = {\n  /** Function responsible for tracking the loaded state of each item. */\n  isItemLoaded: PropTypes.bool.description(\n    'Function responsible for tracking the loaded state of each item.',\n  ),\n  /**  Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading. */\n  loadMoreItems: PropTypes.func.description(\n    'Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading.',\n  ),\n  /** callback to get row item size */\n  getItemSize: PropTypes.func.description('callback to get row item size'),\n  /** height for the list */\n  height: PropTypes.number.description('height for the list'),\n  /** flag to know if virtual list should be on loading state */\n  moreItemsLoading: PropTypes.bool.description(\n    'flag to know if virtual list s',\n  ),\n  /** Row item to render */\n  item: PropTypes.element.description('Row item to render'),\n  /** flag for virtualized list */\n  hasNextPage: PropTypes.bool.description('flag for virtualized list'),\n};\n\nVirtualizedInfiniteLoader.propTypes = listProps;\nVirtualizedInfiniteLoader.displayName = 'VirtualizedInfiniteLoader';\nconst VirtualizedInfiniteLoaderWithSchema = describe(VirtualizedInfiniteLoader);\n\nVirtualizedInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { VirtualizedInfiniteLoader, VirtualizedInfiniteLoaderWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,4BAA4B,CAAC;AAAA,EACjC,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,eAAe,MAAM;AAAA,EACrB;AAAA,EACA,cAAc,MAAM;AAAA,EACpB;AAAA,EACA,MAAM;AAAA,MACF;AACJ,QAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;AAE7C,QAAM,WAAW,CAAC,YAAY,cAAc;AAC1C,QAAI;AAAa,mBAAa,YAAY,CAAC;AAC3C,WAAO,cAAc,YAAY,SAAS;AAAA,EAC5C;AAEA,SACE,qCAAC;AAAA,IAAI,OAAO,EAAE,UAAU,WAAW;AAAA,KACjC,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAe;AAAA,KAEd,CAAC,EAAE,iBAAiB,UACnB,qCAAC;AAAA,IACC,WAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAM;AAAA,KAEL,GACH,CAEJ,GACC,oBACC,qCAAC;AAAA,IACC,OAAO;AAAA,MACL,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,KACD,SAED,CAEJ;AAEJ;AAEA,MAAM,YAAY;AAAA,EAEhB,cAAc,UAAU,KAAK,YAC3B,kEACF;AAAA,EAEA,eAAe,UAAU,KAAK,YAC5B,uIACF;AAAA,EAEA,aAAa,UAAU,KAAK,YAAY,+BAA+B;AAAA,EAEvE,QAAQ,UAAU,OAAO,YAAY,qBAAqB;AAAA,EAE1D,kBAAkB,UAAU,KAAK,YAC/B,gCACF;AAAA,EAEA,MAAM,UAAU,QAAQ,YAAY,oBAAoB;AAAA,EAExD,aAAa,UAAU,KAAK,YAAY,2BAA2B;AACrE;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,sCAAsC,SAAS,yBAAyB;AAE9E,oCAAoC,YAAY;",
   "names": []
 }

package/dist/esm/LoadingPage/Page.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/LoadingPage/Page.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { withTheme } from '@elliemae/ds-system';\nimport { get } from 'lodash';\nimport styled from 'styled-components';\nimport Backdrop from '@elliemae/ds-backdrop';\n\nconst LoadingPageLoader = styled.div`\n  ${({ type }) => (type === 'cover' ? 'position: fixed' : 'position: absolute')};\n\n  z-index: ${(props) => props.zIndex};\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 75%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\nconst LoadingPage = ({ backdropZIndex, children, loader, loading, type = 'fill', zIndex = 1 }) => {\n  const [position, setPosition] = useState(null);\n  const childRef = useRef(null);\n  useEffect(() => {\n    if (childRef && childRef.current) {\n      const style = childRef && window.getComputedStyle(childRef.current);\n      setPosition(style.getPropertyValue('position'));\n    }\n  }, [childRef]);\n\n  const Back = loading && <Backdrop type={type} zIndex={backdropZIndex} />;\n  const Loader = loader && loading && (\n    <LoadingPageLoader zIndex={zIndex} type={type} hide={!loading}>\n      {loader}\n    </LoadingPageLoader>\n  );\n\n  const injectRefPosition = (child) =>\n    React.cloneElement(React.Children.only(child), {\n      ref: childRef,\n      children: React.Children.toArray(child.props.children).concat([Loader, Back]),\n      style: {\n        ...get(child, 'props.style', {}),\n        position: position === 'static' ? 'relative' : position,\n      },\n    });\n\n  if (React.Children.count(children) === 0) {\n    return (\n      <>\n        {Loader}\n        {Back}\n      </>\n    );\n  }\n  return injectRefPosition(children);\n};\n\nLoadingPage.propTypes = {\n  /**\n   * z-index of dimmer background\n   */\n  backdropZIndex: PropTypes.number,\n  /**\n   * Children page to show behind the loader\n   */\n  children: PropTypes.element,\n  /**\n   * Array of elements centrally aligned\n   */\n  loader: PropTypes.arrayOf(PropTypes.element),\n  /**\n   * Show / hide loader\n   */\n  loading: PropTypes.bool,\n  /**\n   * ['cover', 'fill']\n   */\n  type: PropTypes.oneOf(['fill', 'cover']),\n  /**\n   * z-index of loader, should be higher than the backdropZIndex\n   */\n  zIndex: PropTypes.number,\n};\n\nconst DSMobileLoadingPage = withTheme(LoadingPage);\n\nexport { DSMobileLoadingPage };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,oBAAoB,OAAO;AAAA,IAC7B,CAAC,EAAE,WAAY,SAAS,UAAU,oBAAoB;AAAA;AAAA,aAE7C,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU9B,MAAM,cAAc,CAAC,EAAE,gBAAgB,UAAU,QAAQ,SAAS,OAAO,QAAQ,SAAS,QAAQ;AAChG,QAAM,CAAC,UAAU,eAAe,SAAS;AACzC,QAAM,WAAW,OAAO;AACxB,YAAU,MAAM;AACd,QAAI,YAAY,SAAS,SAAS;AAChC,YAAM,QAAQ,YAAY,OAAO,iBAAiB,SAAS;AAC3D,kBAAY,MAAM,iBAAiB;AAAA;AAAA,KAEpC,CAAC;AAEJ,QAAM,OAAO,WAAW,qCAAC,UAAD;AAAA,IAAU;AAAA,IAAY,QAAQ;AAAA;AACtD,QAAM,SAAS,UAAU,WACvB,qCAAC,mBAAD;AAAA,IAAmB;AAAA,IAAgB;AAAA,IAAY,MAAM,CAAC;AAAA,KACnD;AAIL,QAAM,oBAAoB,CAAC,UACzB,OAAM,aAAa,OAAM,SAAS,KAAK,QAAQ;AAAA,IAC7C,KAAK;AAAA,IACL,UAAU,OAAM,SAAS,QAAQ,MAAM,MAAM,UAAU,OAAO,CAAC,QAAQ;AAAA,IACvE,OAAO,iCACF,IAAI,OAAO,eAAe,MADxB;AAAA,MAEL,UAAU,aAAa,WAAW,aAAa;AAAA;AAAA;AAIrD,MAAI,OAAM,SAAS,MAAM,cAAc,GAAG;AACxC,WACE,4DACG,QACA;AAAA;AAIP,SAAO,kBAAkB;AAAA;AAG3B,YAAY,YAAY;AAAA,EAItB,gBAAgB,UAAU;AAAA,EAI1B,UAAU,UAAU;AAAA,EAIpB,QAAQ,UAAU,QAAQ,UAAU;AAAA,EAIpC,SAAS,UAAU;AAAA,EAInB,MAAM,UAAU,MAAM,CAAC,QAAQ;AAAA,EAI/B,QAAQ,UAAU;AAAA;AAGpB,MAAM,sBAAsB,UAAU;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,oBAAoB,OAAO;AAAA,IAC7B,CAAC,EAAE,WAAY,SAAS,UAAU,oBAAoB;AAAA;AAAA,aAE7C,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU9B,MAAM,cAAc,CAAC,EAAE,gBAAgB,UAAU,QAAQ,SAAS,OAAO,QAAQ,SAAS,QAAQ;AAChG,QAAM,CAAC,UAAU,eAAe,SAAS,IAAI;AAC7C,QAAM,WAAW,OAAO,IAAI;AAC5B,YAAU,MAAM;AACd,QAAI,YAAY,SAAS,SAAS;AAChC,YAAM,QAAQ,YAAY,OAAO,iBAAiB,SAAS,OAAO;AAClE,kBAAY,MAAM,iBAAiB,UAAU,CAAC;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,OAAO,WAAW,qCAAC;AAAA,IAAS;AAAA,IAAY,QAAQ;AAAA,GAAgB;AACtE,QAAM,SAAS,UAAU,WACvB,qCAAC;AAAA,IAAkB;AAAA,IAAgB;AAAA,IAAY,MAAM,CAAC;AAAA,KACnD,MACH;AAGF,QAAM,oBAAoB,CAAC,UACzB,OAAM,aAAa,OAAM,SAAS,KAAK,KAAK,GAAG;AAAA,IAC7C,KAAK;AAAA,IACL,UAAU,OAAM,SAAS,QAAQ,MAAM,MAAM,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,CAAC;AAAA,IAC5E,OAAO,iCACF,IAAI,OAAO,eAAe,CAAC,CAAC,IAD1B;AAAA,MAEL,UAAU,aAAa,WAAW,aAAa;AAAA,IACjD;AAAA,EACF,CAAC;AAEH,MAAI,OAAM,SAAS,MAAM,QAAQ,MAAM,GAAG;AACxC,WACE,4DACG,QACA,IACH;AAAA,EAEJ;AACA,SAAO,kBAAkB,QAAQ;AACnC;AAEA,YAAY,YAAY;AAAA,EAItB,gBAAgB,UAAU;AAAA,EAI1B,UAAU,UAAU;AAAA,EAIpB,QAAQ,UAAU,QAAQ,UAAU,OAAO;AAAA,EAI3C,SAAS,UAAU;AAAA,EAInB,MAAM,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC;AAAA,EAIvC,QAAQ,UAAU;AACpB;AAEA,MAAM,sBAAsB,UAAU,WAAW;",
   "names": []
 }

package/dist/esm/MobileActionToolbar/MobileActionToolbar.js

@@ -27,6 +27,7 @@ const props = {
 };
 Toolbar.propTypes = props;
 const DSMobileActionToolbar = withTheme(Toolbar);
+DSMobileActionToolbar.displayName = "DSMobileActionToolbar";
 const DSMobileActionToolbarWithSchema = describe(DSMobileActionToolbar);
 DSMobileActionToolbarWithSchema.propTypes = props;
 var MobileActionToolbar_default = DSMobileActionToolbar;

package/dist/esm/MobileActionToolbar/MobileActionToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileActionToolbar/MobileActionToolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport { withTheme } from '@elliemae/ds-system';\nimport ToolbarItem from './MobileActionToolbarItem';\n\nconst ToolStrip = styled(Grid)`\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n`;\nconst Toolbar = ({ withDepth = true, buttons = [], theme }) => {\n  const rows = [1];\n  const toolbarHeight = theme.space.m;\n  const borderStyle = withDepth ? { boxShadow: '0 1px 5px 0 rgba(0,0,0,0.5)' } : { boxShadow: 'none' };\n  return (\n    <ToolStrip rows={rows} height={toolbarHeight} style={borderStyle}>\n      {buttons}\n    </ToolStrip>\n  );\n};\n\nconst props = {\n  /** toggle box shadow for buttons border */\n  withDepth: PropTypes.bool.description('toggle box shadow for buttons border'),\n  /** button array for the mobile action toolbar */\n  buttons: PropTypes.arrayOf(PropTypes.element).description('button array for the mobile action toolbar'),\n};\n\nToolbar.propTypes = props;\n\nconst DSMobileActionToolbar = withTheme(Toolbar);\n\nconst DSMobileActionToolbarWithSchema = describe(DSMobileActionToolbar);\nDSMobileActionToolbarWithSchema.propTypes = props;\n\nexport { ToolbarItem, DSMobileActionToolbarWithSchema };\nexport default DSMobileActionToolbar;\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIH,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAE5D,MAAM,UAAU,CAAC,EAAE,YAAY,MAAM,UAAU,IAAI,YAAY;AAC7D,QAAM,OAAO,CAAC;AACd,QAAM,gBAAgB,MAAM,MAAM;AAClC,QAAM,cAAc,YAAY,EAAE,WAAW,kCAAkC,EAAE,WAAW;AAC5F,SACE,qCAAC,WAAD;AAAA,IAAW;AAAA,IAAY,QAAQ;AAAA,IAAe,OAAO;AAAA,KAClD;AAAA;AAKP,MAAM,QAAQ;AAAA,EAEZ,WAAW,UAAU,KAAK,YAAY;AAAA,EAEtC,SAAS,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA;AAG5D,QAAQ,YAAY;AAEpB,MAAM,wBAAwB,UAAU;AAExC,MAAM,kCAAkC,SAAS;AACjD,gCAAgC,YAAY;AAG5C,IAAO,8BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport { withTheme } from '@elliemae/ds-system';\nimport ToolbarItem from './MobileActionToolbarItem';\n\nconst ToolStrip = styled(Grid)`\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n`;\nconst Toolbar = ({ withDepth = true, buttons = [], theme }) => {\n  const rows = [1];\n  const toolbarHeight = theme.space.m;\n  const borderStyle = withDepth ? { boxShadow: '0 1px 5px 0 rgba(0,0,0,0.5)' } : { boxShadow: 'none' };\n  return (\n    <ToolStrip rows={rows} height={toolbarHeight} style={borderStyle}>\n      {buttons}\n    </ToolStrip>\n  );\n};\n\nconst props = {\n  /** toggle box shadow for buttons border */\n  withDepth: PropTypes.bool.description('toggle box shadow for buttons border'),\n  /** button array for the mobile action toolbar */\n  buttons: PropTypes.arrayOf(PropTypes.element).description('button array for the mobile action toolbar'),\n};\n\nToolbar.propTypes = props;\n\nconst DSMobileActionToolbar = withTheme(Toolbar);\nDSMobileActionToolbar.displayName = 'DSMobileActionToolbar';\nconst DSMobileActionToolbarWithSchema = describe(DSMobileActionToolbar);\nDSMobileActionToolbarWithSchema.propTypes = props;\n\nexport { ToolbarItem, DSMobileActionToolbarWithSchema };\nexport default DSMobileActionToolbar;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,sBAIP,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAE5D,MAAM,UAAU,CAAC,EAAE,YAAY,MAAM,UAAU,CAAC,GAAG,YAAY;AAC7D,QAAM,OAAO,CAAC,CAAC;AACf,QAAM,gBAAgB,MAAM,MAAM;AAClC,QAAM,cAAc,YAAY,EAAE,WAAW,8BAA8B,IAAI,EAAE,WAAW,OAAO;AACnG,SACE,qCAAC;AAAA,IAAU;AAAA,IAAY,QAAQ;AAAA,IAAe,OAAO;AAAA,KAClD,OACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,WAAW,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAE5E,SAAS,UAAU,QAAQ,UAAU,OAAO,EAAE,YAAY,4CAA4C;AACxG;AAEA,QAAQ,YAAY;AAEpB,MAAM,wBAAwB,UAAU,OAAO;AAC/C,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;AAG5C,IAAO,8BAAQ;",
   "names": []
 }

package/dist/esm/MobileActionToolbar/MobileActionToolbarItem.js

@@ -47,6 +47,7 @@ const props = {
   icon: PropTypes.element.description("Toolbar item icon")
 };
 ToolbarItem.propTypes = props;
+ToolbarItem.displayName = "ToolbarItem";
 const DSToolbarItemWithSchema = describe(ToolbarItem);
 DSToolbarItemWithSchema.propTypes = props;
 var MobileActionToolbarItem_default = ToolbarItem;

package/dist/esm/MobileActionToolbar/MobileActionToolbarItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileActionToolbar/MobileActionToolbarItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport DSButton from '@elliemae/ds-button';\n\nconst ToolbarItem = ({ icon, ...otherProps }) => {\n  const displayIcon = React.cloneElement(icon, { size: 'm' });\n  return <DSButton {...otherProps} buttonType=\"text\" icon={displayIcon} size=\"m\" />;\n};\n\nToolbarItem.displayName = 'ToolbarItem';\n\nconst props = {\n  /** toolbar item icon */\n  icon: PropTypes.element.description('Toolbar item icon'),\n};\n\nToolbarItem.propTypes = props;\n\nconst DSToolbarItemWithSchema = describe(ToolbarItem);\n\nDSToolbarItemWithSchema.propTypes = props;\n\nexport default ToolbarItem;\n\nexport { DSToolbarItemWithSchema };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA,MAAM,cAAc,CAAC,OAA4B;AAA5B,eAAE,WAAF,IAAW,uBAAX,IAAW,CAAT;AACrB,QAAM,cAAc,OAAM,aAAa,MAAM,EAAE,MAAM;AACrD,SAAO,qCAAC,UAAD,iCAAc,aAAd;AAAA,IAA0B,YAAW;AAAA,IAAO,MAAM;AAAA,IAAa,MAAK;AAAA;AAAA;AAG7E,YAAY,cAAc;AAE1B,MAAM,QAAQ;AAAA,EAEZ,MAAM,UAAU,QAAQ,YAAY;AAAA;AAGtC,YAAY,YAAY;AAExB,MAAM,0BAA0B,SAAS;AAEzC,wBAAwB,YAAY;AAEpC,IAAO,kCAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport DSButton from '@elliemae/ds-button';\n\nconst ToolbarItem = ({ icon, ...otherProps }) => {\n  const displayIcon = React.cloneElement(icon, { size: 'm' });\n  return <DSButton {...otherProps} buttonType=\"text\" icon={displayIcon} size=\"m\" />;\n};\n\nToolbarItem.displayName = 'ToolbarItem';\n\nconst props = {\n  /** toolbar item icon */\n  icon: PropTypes.element.description('Toolbar item icon'),\n};\n\nToolbarItem.propTypes = props;\nToolbarItem.displayName = 'ToolbarItem';\nconst DSToolbarItemWithSchema = describe(ToolbarItem);\n\nDSToolbarItemWithSchema.propTypes = props;\n\nexport default ToolbarItem;\n\nexport { DSToolbarItemWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA,MAAM,cAAc,CAAC,OAA4B;AAA5B,eAAE,WAAF,IAAW,uBAAX,IAAW,CAAT;AACrB,QAAM,cAAc,OAAM,aAAa,MAAM,EAAE,MAAM,IAAI,CAAC;AAC1D,SAAO,qCAAC,2CAAa,aAAb;AAAA,IAAyB,YAAW;AAAA,IAAO,MAAM;AAAA,IAAa,MAAK;AAAA,IAAI;AACjF;AAEA,YAAY,cAAc;AAE1B,MAAM,QAAQ;AAAA,EAEZ,MAAM,UAAU,QAAQ,YAAY,mBAAmB;AACzD;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,0BAA0B,SAAS,WAAW;AAEpD,wBAAwB,YAAY;AAEpC,IAAO,kCAAQ;",
   "names": []
 }

package/dist/esm/MobileBanner/MobileBanner.js

@@ -33,6 +33,7 @@ import {
   StyledIconContainer,
   StyledSubTitle,
   StyledTitle,
+  StyledSubTitleText,
   StyledCloseButtonContainer
 } from "./styles";
 const DSMobileBanner = ({
@@ -89,24 +90,25 @@ 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;
+DSMobileBanner.displayName = "DSMobileBanner";
 const DSMobileBannerWithSchema = describe(DSMobileBanner);
 DSMobileBannerWithSchema.propTypes = propTypes;
 export {

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;AACxD,QAAM,WAAW,OAA8B;AAC/C,QAAM,CAAC,SAAS,cAAc,SAAkB;AAChD,QAAM,CAAC,aAAa,kBAAkB,SAAkB;AACxD,QAAM,CAAC,QAAQ,aAAa,SAAiB;AAE7C,YAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,gBAAU,kBAAkB,QAAQ;AAAA;AAAA,KAErC,CAAC,aAAa;AAEjB,YAAU,MAAM;AACd,QAAI,eAAe,SAAS,WAAW,QAAQ;AAC7C,eAAS,SAAS;AAAA;AAAA,KAEnB,CAAC,aAAa;AAEjB,kBAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe;AAAA;AAC5C,qBAAe;AAAA,KACnB,CAAC,QAAQ;AAEZ,MAAI,CAAC,eAAe,CAAC;AAAQ,WAAO;AAEpC,SACE,qCAAC,uBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM,WAAW;AAAA,IACjC;AAAA,KACI,iBANN;AAAA,IAOE,eAAY;AAAA,IACZ,MAAK;AAAA,MAEL,qCAAC,sBAAD;AAAA,IAAsB;AAAA,IAAY;AAAA,IAAgB,KAAK;AAAA,IAAmB;AAAA,KACxE,qCAAC,qBAAD;AAAA,IAAqB,eAAY;AAAA,KAAyB,MAAM,QAChE,qCAAC,eAAD;AAAA,IAAe;AAAA,KACb,qCAAC,aAAD,MAAc,QACd,qCAAC,gBAAD,MACG,MACA,mBACC,qCAAC,kBAAD;AAAA,IAAkB,MAAM;AAAA,IAAgB,eAAY;AAAA,IAAwB,SAAS;AAAA,KAClF,oBAKR,mBACC,qCAAC,4BAAD,MACE,qCAAC,mBAAD;AAAA,IACE,eAAY;AAAA,IACZ,YAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAW;AAAA,IACX,MAAM,qCAAC,QAAD;AAAA,MAAQ,OAAM;AAAA,MAAO,QAAO;AAAA;AAAA,IAClC,UAAU;AAAA;AAAA;AASxB,eAAe,eAAe;AAC9B,eAAe,YAAY;AAC3B,MAAM,2BAA2B,SAAS;AAC1C,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;\nDSMobileBanner.displayName = 'DSMobileBanner';\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,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileBanner/defaultProps.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { MOBILE_BANNER_TYPES } from './utils/bannerTypes';\n\nexport const defaultProps = {\n  type: MOBILE_BANNER_TYPES.SUCCESS,\n  isOpen: false,\n  closeButtonOnClick: () => null,\n  actionLinkLabel: null,\n  actionLinkHref: null,\n  actionLinkOnClick: () => null,\n  label: '',\n  body: '',\n  showCloseButton: true,\n  containerProps: {},\n  focusOnOpen: false,\n};\n"],
-  "mappings": "AAAA;ACAA;AAEO,MAAM,eAAe;AAAA,EAC1B,MAAM,oBAAoB;AAAA,EAC1B,QAAQ;AAAA,EACR,oBAAoB,MAAM;AAAA,EAC1B,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,mBAAmB,MAAM;AAAA,EACzB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,aAAa;AAAA;",
+  "mappings": "AAAA;ACAA;AAEO,MAAM,eAAe;AAAA,EAC1B,MAAM,oBAAoB;AAAA,EAC1B,QAAQ;AAAA,EACR,oBAAoB,MAAM;AAAA,EAC1B,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,mBAAmB,MAAM;AAAA,EACzB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,aAAa;AACf;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileBanner/propTypes.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const propTypes = {\n  type: PropTypes.oneOf(['info', 'success', 'warning', 'error']).description('Type of banner'),\n  isOpen: PropTypes.bool.description('Whether the banner is open or not'),\n  closeButtonOnClick: PropTypes.func.description('OnClick function used in the close button'),\n  actionLinkLabel: PropTypes.string.description('Label used in the the action link'),\n  actionLinkHref: PropTypes.string.description('Href used in the the action link'),\n  actionLinkOnClick: PropTypes.string.description('OnClick function used in the action link'),\n  label: PropTypes.string.description('Label text for the banner'),\n  body: PropTypes.string.description('Body text for the banner'),\n  showCloseButton: PropTypes.bool.description('Whether the close button should be visible or not'),\n  containerProps: PropTypes.shape({}).description('Set of properties attached to the banner container'),\n  focusOnOpen: PropTypes.bool.description(\n    \"Whether the banner should get focus when its openedWhether the banner should get focus when it's opened\",\n  ),\n};\n"],
-  "mappings": "AAAA;ACAA;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM,UAAU,MAAM,CAAC,QAAQ,WAAW,WAAW,UAAU,YAAY;AAAA,EAC3E,QAAQ,UAAU,KAAK,YAAY;AAAA,EACnC,oBAAoB,UAAU,KAAK,YAAY;AAAA,EAC/C,iBAAiB,UAAU,OAAO,YAAY;AAAA,EAC9C,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAC7C,mBAAmB,UAAU,OAAO,YAAY;AAAA,EAChD,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,MAAM,UAAU,OAAO,YAAY;AAAA,EACnC,iBAAiB,UAAU,KAAK,YAAY;AAAA,EAC5C,gBAAgB,UAAU,MAAM,IAAI,YAAY;AAAA,EAChD,aAAa,UAAU,KAAK,YAC1B;AAAA;",
+  "mappings": "AAAA;ACAA;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM,UAAU,MAAM,CAAC,QAAQ,WAAW,WAAW,OAAO,CAAC,EAAE,YAAY,gBAAgB;AAAA,EAC3F,QAAQ,UAAU,KAAK,YAAY,mCAAmC;AAAA,EACtE,oBAAoB,UAAU,KAAK,YAAY,2CAA2C;AAAA,EAC1F,iBAAiB,UAAU,OAAO,YAAY,mCAAmC;AAAA,EACjF,gBAAgB,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAC/E,mBAAmB,UAAU,OAAO,YAAY,0CAA0C;AAAA,EAC1F,OAAO,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAC/D,MAAM,UAAU,OAAO,YAAY,0BAA0B;AAAA,EAC7D,iBAAiB,UAAU,KAAK,YAAY,mDAAmD;AAAA,EAC/F,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,oDAAoD;AAAA,EACpG,aAAa,UAAU,KAAK,YAC1B,yGACF;AACF;",
   "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;AAAA,0BAChD,CAAC,EAAE,aAAc,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,aAAa,gBAAgB,aAAa;AAAA;AAGvD,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;AAAA,iBAC5C,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;AAAA,iBAC5C,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWd,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;AAAA,iBAC5C,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;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/bannerTypes.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/MobileBanner/utils/bannerTypes.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const MOBILE_BANNER_TYPES = {\n  INFO: 'info',\n  SUCCESS: 'success',\n  WARNING: 'warning',\n  ERROR: 'error',\n} as const;\n"],
-  "mappings": "AAAA;ACAO,MAAM,sBAAsB;AAAA,EACjC,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA;",
+  "mappings": "AAAA;ACAO,MAAM,sBAAsB;AAAA,EACjC,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;",
   "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", 900],
     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,aAAD;AAAA,IAAa,MAAK;AAAA;AAAA,EAC3B,MAAM,qCAAC,UAAD;AAAA,IAAU,MAAK;AAAA;AAAA,EACrB,OAAO,qCAAC,kBAAD;AAAA,IAAkB,OAAM;AAAA,IAAO,QAAO;AAAA,IAAO,MAAK;AAAA;AAAA,EACzD,SAAS,qCAAC,eAAD;AAAA,IAAe,OAAM;AAAA,IAAO,QAAO;AAAA,IAAO,MAAK;AAAA;AAAA;",
+  "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', 900]} 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/dist/esm/MobileBanner/utils/styleHelpers.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/MobileBanner/utils/styleHelpers.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport type { MobileBannerTypesT } from '../index.d';\nimport { MOBILE_BANNER_TYPES } from './bannerTypes';\n\nexport const slideIn = kfrm`\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n`;\n\nexport const slideOut = kfrm`\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`;\n\nexport const spanContainer = (height: number) => kfrm`\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ${height}px;\n  }\n`;\n\nexport const shrinkContainer = (height: number) => kfrm`\n  0% {\n    height: ${height}px;\n  }\n  100% {\n    height: 0px;\n  }\n`;\n\nexport const handleBorderColor = (type: MobileBannerTypesT, { colors }): string => {\n  switch (type) {\n    case MOBILE_BANNER_TYPES.SUCCESS:\n      return colors.success[900];\n    case MOBILE_BANNER_TYPES.INFO:\n      return colors.brand[600];\n    case MOBILE_BANNER_TYPES.WARNING:\n      return colors.warning[900];\n    case MOBILE_BANNER_TYPES.ERROR:\n      return colors.danger[900];\n  }\n};\n\nexport const handleAnimation = (\n  isAnimating: boolean,\n  isOpen: boolean,\n  height: number | null = null,\n): FlattenSimpleInterpolation => {\n  if (isAnimating) {\n    if (isOpen) {\n      return css`\n        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;\n      `;\n    } else {\n      return css`\n        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;\n      `;\n    }\n  }\n};\n"],
-  "mappings": "AAAA;ACAA;AAGA;AAEO,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAKnC;AAAA;AAAA;AAIP,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAErC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAAC,MAA0B,EAAE,aAAqB;AACjF,UAAQ;AAAA,SACD,oBAAoB;AACvB,aAAO,OAAO,QAAQ;AAAA,SACnB,oBAAoB;AACvB,aAAO,OAAO,MAAM;AAAA,SACjB,oBAAoB;AACvB,aAAO,OAAO,QAAQ;AAAA,SACnB,oBAAoB;AACvB,aAAO,OAAO,OAAO;AAAA;AAAA;AAIpB,MAAM,kBAAkB,CAC7B,aACA,QACA,SAAwB,SACO;AAC/B,MAAI,aAAa;AACf,QAAI,QAAQ;AACV,aAAO;AAAA,qBACQ,SAAS,cAAc,UAAU;AAAA;AAAA,WAE3C;AACL,aAAO;AAAA,qBACQ,SAAS,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA;",
+  "mappings": "AAAA;ACAA;AAGA;AAEO,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAKnC;AAAA;AAAA;AAIP,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAErC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAAC,MAA0B,EAAE,aAAqB;AACjF,UAAQ;AAAA,SACD,oBAAoB;AACvB,aAAO,OAAO,QAAQ;AAAA,SACnB,oBAAoB;AACvB,aAAO,OAAO,MAAM;AAAA,SACjB,oBAAoB;AACvB,aAAO,OAAO,QAAQ;AAAA,SACnB,oBAAoB;AACvB,aAAO,OAAO,OAAO;AAAA;AAE3B;AAEO,MAAM,kBAAkB,CAC7B,aACA,QACA,SAAwB,SACO;AAC/B,MAAI,aAAa;AACf,QAAI,QAAQ;AACV,aAAO;AAAA,qBACQ,SAAS,cAAc,MAAM,IAAI;AAAA;AAAA,IAElD,OAAO;AACL,aAAO;AAAA,qBACQ,SAAS,gBAAgB,MAAM,IAAI;AAAA;AAAA,IAEpD;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/MobileCard/ActionAddon.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/ActionAddon.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport Button from '@elliemae/ds-button';\n\nconst Addon = styled(Button)`\n  background-color: transparent;\n  padding-right: 4px;\n  height: 100%;\n  border: none;\n  font-size: 12px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.brand['700']};\n  cursor: pointer;\n  &:focus,\n  &::after {\n    background-color: transparent;\n    box-shadow: none !important; /* needed */\n    border: none !important; /* needed */\n  }\n`;\n\nexport const ActionAddon = ({ label, onClick, icon }) => (\n  <Addon onClick={onClick} labelText={label} icon={icon || <ChevronSmallDown color={['brand-primary', 700]} />} />\n);\n\nActionAddon.propTypes = {\n  /**\n   * Addon label\n   */\n  label: PropTypes.string,\n  /**\n   * On click callback\n   */\n  onClick: PropTypes.func,\n  /**\n   * Icon to display after the label\n   */\n  icon: PropTypes.element,\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMJ,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUxC,MAAM,cAAc,CAAC,EAAE,OAAO,SAAS,WAC5C,qCAAC,OAAD;AAAA,EAAO;AAAA,EAAkB,WAAW;AAAA,EAAO,MAAM,QAAQ,qCAAC,kBAAD;AAAA,IAAkB,OAAO,CAAC,iBAAiB;AAAA;AAAA;AAGtG,YAAY,YAAY;AAAA,EAItB,OAAO,UAAU;AAAA,EAIjB,SAAS,UAAU;AAAA,EAInB,MAAM,UAAU;AAAA;",
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMV,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUxC,MAAM,cAAc,CAAC,EAAE,OAAO,SAAS,WAC5C,qCAAC;AAAA,EAAM;AAAA,EAAkB,WAAW;AAAA,EAAO,MAAM,QAAQ,qCAAC;AAAA,IAAiB,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG;AAAA,CAAI;AAGhH,YAAY,YAAY;AAAA,EAItB,OAAO,UAAU;AAAA,EAIjB,SAAS,UAAU;AAAA,EAInB,MAAM,UAAU;AAClB;",
   "names": []
 }

package/dist/esm/MobileCard/Card.js

@@ -4,7 +4,7 @@ import { describe } from "react-desc";
 import styled from "styled-components";
 import { space } from "@xstyled/styled-components";
 import { color, border, op, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM, toMobile } from "@elliemae/ds-system";
-import GroupItem from "@elliemae/ds-shared/GroupContext/GroupItem";
+import { GroupItem } from "@elliemae/ds-shared";
 import { Grid } from "@elliemae/ds-grid";
 import { StyledCard as Card } from "./StyledCard";
 import { ExpandChevron } from "./ExpandChevron";
@@ -142,6 +142,7 @@ const MobileCard = ({
   });
 };
 MobileCard.propTypes = cardPropsTypes;
+MobileCard.displayName = "MobileCard";
 const DSMobileCardWithSchema = describe(MobileCard);
 DSMobileCardWithSchema.propTypes = cardPropsTypes;
 var Card_default = withTheme(MobileCard);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/Card.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useRef } from 'react';\nimport { describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { space } from '@xstyled/styled-components';\nimport { color, border, op, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';\nimport GroupItem from '@elliemae/ds-shared/GroupContext/GroupItem';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledCard as Card } from './StyledCard';\nimport { ExpandChevron } from './ExpandChevron';\nimport { useHeight } from './useHeight';\nimport { ExpandableRegion } from './ExpandableRegion';\nimport { cardPropsTypes, MobileCardProps } from './props';\n\nconst TitleEllipsis = styled.div`\n  ${truncate()}\n`;\n\nconst Title = styled.div`\n  ${space}\n  ${truncate()}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: ${(props) => toMobile(props.theme.fontSizes.title[600])};\n  width: 100%;\n  ${color('neutral', 800)}\n`;\nconst Detail = styled.span`\n  ${space}\n  ${truncate()}\n  font-size: ${(props) => toMobile(props.theme.fontSizes.title[500])};\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n`;\nconst SubText = styled.span`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n  ${truncate()}\n  &:nth-child(2) {\n    padding-left: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  }\n`;\nconst SubTextWrap = styled.div`\n  ${truncate()}\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n  margin-top: 6px;\n  margin-bottom: 2px;\n  padding-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  font-size: ${(props) => toMobile(props.theme.fontSizes.subTitle[400])};\n  ${color('neutral', 500)}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  display: flex;\n  justify-content: space-between;\n`;\nconst LeftIcon = styled(Grid)<{ halfM: string }>`\n  & > span {\n    height: ${(props) => props.halfM};\n    width: ${(props) => props.halfM};\n  }\n\n  & > span > svg,\n  svg:not([fill]) {\n    height: ${(props) => props.halfM};\n    width: ${(props) => props.halfM};\n  }\n`;\nconst CenterWrap = styled.div`\n  display: flex;\n  align-items: center;\n  ${truncate()}\n`;\n\nconst MobileCard: React.ComponentType<MobileCardProps> = ({\n  children,\n  height = 'm',\n  leftAddOn,\n  leftProp,\n  rightProp,\n  subText,\n  subIcons,\n  details,\n  theme,\n  expandable = false,\n  expandedContent,\n  value,\n  cardContent,\n}) => {\n  const subTextRef = useRef(null);\n  const subTextHeight = useHeight(subTextRef);\n  const isJustChildren = !(subText || subIcons || details);\n  const halfM = op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 2);\n\n  return (\n    <GroupItem\n      render={(context = {}) => {\n        const { activeValue, onChange } = context;\n        const selected =\n          activeValue !== undefined && (activeValue === value || (activeValue?.length && activeValue?.includes(value)));\n\n        return (\n          <Card\n            data-testid=\"card-wrapper\"\n            minHeight={\n              height === 'm' ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl) : __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl)\n            }\n          >\n            {expandable && (\n              <ExpandChevron\n                isExpanded={selected}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onChange({ target: { value } });\n                }}\n                align={subText || subIcons ? 'top' : 'center'}\n              />\n            )}\n            <Grid pb={(subText || subIcons) && subTextHeight} cols={['auto', 'auto']} alignItems=\"center\">\n              {leftProp && <Grid ml={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}>{leftProp}</Grid>}\n              {leftAddOn && (\n                <LeftIcon ml={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)} halfM={halfM}>\n                  {leftAddOn}\n                </LeftIcon>\n              )}\n            </Grid>\n            <Grid\n              pl={!leftAddOn ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : __UNSAFE_SPACE_TO_DIMSUM(theme.space.xs)}\n              pr={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n              width=\"100%\"\n            >\n              <CenterWrap>\n                <Title pt={!isJustChildren && halfM} data-testid=\"card-title\">\n                  <TitleEllipsis>{children}</TitleEllipsis>\n                  {details && (\n                    <Grid\n                      data-testid=\"card-details\"\n                      cols={details.map(() => 'min-content')}\n                      mb={(!(subText || subIcons) && halfM) || 0}\n                      pt={op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)}\n                    >\n                      {details.map((d, i) => (\n                        <Detail key={i}>\n                          {d}\n                          {i < details.length - 1 && <Detail px={__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)}>\u2022</Detail>}\n                        </Detail>\n                      ))}\n                    </Grid>\n                  )}\n                </Title>\n                {rightProp &&\n                  rightProp.map((prop, i) => (\n                    <Grid ml={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)} key={i}>\n                      {prop}\n                    </Grid>\n                  ))}\n              </CenterWrap>\n              {subIcons && (\n                <SubTextWrap ref={subTextRef}>\n                  <SubText>{subIcons}</SubText>\n                  {subText && subText[1] && <SubText data-testid=\"card-subText\">{subText[1]}</SubText>}\n                </SubTextWrap>\n              )}\n              {subText && !subIcons && (\n                <SubTextWrap ref={subTextRef}>\n                  {subText.map((s, i) => (\n                    <SubText data-testid=\"card-subText\" key={i}>\n                      {s}\n                    </SubText>\n                  ))}\n                </SubTextWrap>\n              )}\n              <ExpandableRegion show={selected} content={expandedContent} />\n              {cardContent && <Grid>{cardContent}</Grid>}\n            </Grid>\n          </Card>\n        );\n      }}\n    />\n  );\n};\n\nMobileCard.propTypes = cardPropsTypes;\n\nconst DSMobileCardWithSchema = describe(MobileCard);\n\nDSMobileCardWithSchema.propTypes = cardPropsTypes;\n\nexport { DSMobileCardWithSchema };\n\nexport default withTheme(MobileCard);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useRef } from 'react';\nimport { describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { space } from '@xstyled/styled-components';\nimport { color, border, op, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';\nimport { GroupItem } from '@elliemae/ds-shared';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledCard as Card } from './StyledCard';\nimport { ExpandChevron } from './ExpandChevron';\nimport { useHeight } from './useHeight';\nimport { ExpandableRegion } from './ExpandableRegion';\nimport { cardPropsTypes, MobileCardProps } from './props';\n\nconst TitleEllipsis = styled.div`\n  ${truncate()}\n`;\n\nconst Title = styled.div`\n  ${space}\n  ${truncate()}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: ${(props) => toMobile(props.theme.fontSizes.title[600])};\n  width: 100%;\n  ${color('neutral', 800)}\n`;\nconst Detail = styled.span`\n  ${space}\n  ${truncate()}\n  font-size: ${(props) => toMobile(props.theme.fontSizes.title[500])};\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n`;\nconst SubText = styled.span`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n  ${truncate()}\n  &:nth-child(2) {\n    padding-left: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  }\n`;\nconst SubTextWrap = styled.div`\n  ${truncate()}\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n  margin-top: 6px;\n  margin-bottom: 2px;\n  padding-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  font-size: ${(props) => toMobile(props.theme.fontSizes.subTitle[400])};\n  ${color('neutral', 500)}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  display: flex;\n  justify-content: space-between;\n`;\nconst LeftIcon = styled(Grid)<{ halfM: string }>`\n  & > span {\n    height: ${(props) => props.halfM};\n    width: ${(props) => props.halfM};\n  }\n\n  & > span > svg,\n  svg:not([fill]) {\n    height: ${(props) => props.halfM};\n    width: ${(props) => props.halfM};\n  }\n`;\nconst CenterWrap = styled.div`\n  display: flex;\n  align-items: center;\n  ${truncate()}\n`;\n\nconst MobileCard: React.ComponentType<MobileCardProps> = ({\n  children,\n  height = 'm',\n  leftAddOn,\n  leftProp,\n  rightProp,\n  subText,\n  subIcons,\n  details,\n  theme,\n  expandable = false,\n  expandedContent,\n  value,\n  cardContent,\n}) => {\n  const subTextRef = useRef(null);\n  const subTextHeight = useHeight(subTextRef);\n  const isJustChildren = !(subText || subIcons || details);\n  const halfM = op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 2);\n\n  return (\n    <GroupItem\n      render={(context = {}) => {\n        const { activeValue, onChange } = context;\n        const selected =\n          activeValue !== undefined && (activeValue === value || (activeValue?.length && activeValue?.includes(value)));\n\n        return (\n          <Card\n            data-testid=\"card-wrapper\"\n            minHeight={\n              height === 'm' ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl) : __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl)\n            }\n          >\n            {expandable && (\n              <ExpandChevron\n                isExpanded={selected}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onChange({ target: { value } });\n                }}\n                align={subText || subIcons ? 'top' : 'center'}\n              />\n            )}\n            <Grid pb={(subText || subIcons) && subTextHeight} cols={['auto', 'auto']} alignItems=\"center\">\n              {leftProp && <Grid ml={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}>{leftProp}</Grid>}\n              {leftAddOn && (\n                <LeftIcon ml={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)} halfM={halfM}>\n                  {leftAddOn}\n                </LeftIcon>\n              )}\n            </Grid>\n            <Grid\n              pl={!leftAddOn ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : __UNSAFE_SPACE_TO_DIMSUM(theme.space.xs)}\n              pr={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n              width=\"100%\"\n            >\n              <CenterWrap>\n                <Title pt={!isJustChildren && halfM} data-testid=\"card-title\">\n                  <TitleEllipsis>{children}</TitleEllipsis>\n                  {details && (\n                    <Grid\n                      data-testid=\"card-details\"\n                      cols={details.map(() => 'min-content')}\n                      mb={(!(subText || subIcons) && halfM) || 0}\n                      pt={op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)}\n                    >\n                      {details.map((d, i) => (\n                        <Detail key={i}>\n                          {d}\n                          {i < details.length - 1 && <Detail px={__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)}>\u2022</Detail>}\n                        </Detail>\n                      ))}\n                    </Grid>\n                  )}\n                </Title>\n                {rightProp &&\n                  rightProp.map((prop, i) => (\n                    <Grid ml={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)} key={i}>\n                      {prop}\n                    </Grid>\n                  ))}\n              </CenterWrap>\n              {subIcons && (\n                <SubTextWrap ref={subTextRef}>\n                  <SubText>{subIcons}</SubText>\n                  {subText && subText[1] && <SubText data-testid=\"card-subText\">{subText[1]}</SubText>}\n                </SubTextWrap>\n              )}\n              {subText && !subIcons && (\n                <SubTextWrap ref={subTextRef}>\n                  {subText.map((s, i) => (\n                    <SubText data-testid=\"card-subText\" key={i}>\n                      {s}\n                    </SubText>\n                  ))}\n                </SubTextWrap>\n              )}\n              <ExpandableRegion show={selected} content={expandedContent} />\n              {cardContent && <Grid>{cardContent}</Grid>}\n            </Grid>\n          </Card>\n        );\n      }}\n    />\n  );\n};\n\nMobileCard.propTypes = cardPropsTypes;\nMobileCard.displayName = 'MobileCard';\nconst DSMobileCardWithSchema = describe(MobileCard);\n\nDSMobileCardWithSchema.propTypes = cardPropsTypes;\n\nexport { DSMobileCardWithSchema };\n\nexport default withTheme(MobileCard);\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/CardIcons.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst CardIconsWrapper = styled(Grid)`\n  align-items: center;\n  span,\n  svg {\n    width: 12px !important;\n    height: 12px !important;\n  }\n  span.icon-color-muted svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.neutral['600']};\n    height: 12px !important;\n    width: 12px !important;\n\n    & * {\n      fill: ${(props) => props.theme.colors.neutral['600']};\n    }\n  }\n  span.icon-color-warn svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.warning['600']};\n    height: 12px !important;\n    width: 12px !important;\n\n    & * {\n      fill: ${(props) => props.theme.colors.warning['600']};\n    }\n  }\n  span.icon-color-error svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.danger['900']};\n    height: 12px !important;\n    width: 12px !important;\n\n    & * {\n      fill: ${(props) => props.theme.colors.danger['900']};\n    }\n  }\n  span.icon-color-success svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.success['900']};\n    height: 12px !important;\n    width: 12px !important;\n\n    & * {\n      fill: ${(props) => props.theme.colors.success['900']};\n    }\n  }\n  span.icon-color-primary svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.brand[600]};\n  }\n  span.icon-color-primary svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.brand[600]};\n  }\n`;\n\nexport const SubIcons = ({ icons = [], colors = [] }) => (\n  <CardIconsWrapper cols={icons.map(() => '12px')} gutter=\"6px\" height=\"14px\" data-testid=\"card-subIcons\">\n    {icons.map((Icon, i) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Icon key={i} className={`icon-color-${colors[i] || 'muted'}`} />\n    ))}\n  </CardIconsWrapper>\n);\n\nSubIcons.propTypes = {\n  /**\n   * Array of  Icons\n   */\n  icons: PropTypes.arrayOf(PropTypes.func),\n  /**\n   * Color Types: muted, warn, error, success\n   */\n  colors: PropTypes.arrayOf(PropTypes.oneOf(['muted', 'warn', 'error', 'success', 'primary'])),\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,cAKpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,cAKpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKnC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAKvC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,cAKpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,YAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzC,MAAM,WAAW,CAAC,EAAE,QAAQ,IAAI,SAAS,SAC9C,qCAAC,kBAAD;AAAA,EAAkB,MAAM,MAAM,IAAI,MAAM;AAAA,EAAS,QAAO;AAAA,EAAM,QAAO;AAAA,EAAO,eAAY;AAAA,GACrF,MAAM,IAAI,CAAC,MAAM,MAEhB,qCAAC,MAAD;AAAA,EAAM,KAAK;AAAA,EAAG,WAAW,cAAc,OAAO,MAAM;AAAA;AAK1D,SAAS,YAAY;AAAA,EAInB,OAAO,UAAU,QAAQ,UAAU;AAAA,EAInC,QAAQ,UAAU,QAAQ,UAAU,MAAM,CAAC,SAAS,QAAQ,SAAS,WAAW;AAAA;",
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASxB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,cAKpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,cAKpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKnC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAKvC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,cAKpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,YAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzC,MAAM,WAAW,CAAC,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC,QAC/C,qCAAC;AAAA,EAAiB,MAAM,MAAM,IAAI,MAAM,MAAM;AAAA,EAAG,QAAO;AAAA,EAAM,QAAO;AAAA,EAAO,eAAY;AAAA,GACrF,MAAM,IAAI,CAAC,MAAM,MAEhB,qCAAC;AAAA,EAAK,KAAK;AAAA,EAAG,WAAW,cAAc,OAAO,MAAM;AAAA,CAAW,CAChE,CACH;AAGF,SAAS,YAAY;AAAA,EAInB,OAAO,UAAU,QAAQ,UAAU,IAAI;AAAA,EAIvC,QAAQ,UAAU,QAAQ,UAAU,MAAM,CAAC,SAAS,QAAQ,SAAS,WAAW,SAAS,CAAC,CAAC;AAC7F;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/ExpandChevron.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { ChevronDown, ChevronRight } from '@elliemae/ds-icons';\n\nconst ChevronWrap = styled.div`\n  margin-top: ${(props) => (props.align === 'top' ? '18px' : '0')};\n  align-self: ${(props) => (props.align === 'top' ? 'flex-start' : 'center')};\n  margin-left: ${(props) => props.theme.space.xs};\n`;\n\nexport const ExpandChevron = ({ isExpanded, onClick, align }) => {\n  const Chevron = isExpanded ? ChevronDown : ChevronRight;\n  return (\n    <ChevronWrap data-testid=\"ds-card-expand-chevron\" align={align}>\n      <Chevron size=\"s\" color={['brand-primary', 800]} onClick={onClick} />\n    </ChevronWrap>\n  );\n};\n\nExpandChevron.propTypes = {\n  /**\n   * Whether if the chevron is expanded or not\n   */\n  isExpanded: PropTypes.bool,\n  /**\n   * click callback\n   */\n  onClick: PropTypes.func.isRequired,\n  /**\n   * top or center\n   */\n  align: PropTypes.string.isRequired,\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA,gBACX,CAAC,UAAW,MAAM,UAAU,QAAQ,SAAS;AAAA,gBAC7C,CAAC,UAAW,MAAM,UAAU,QAAQ,eAAe;AAAA,iBAClD,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGvC,MAAM,gBAAgB,CAAC,EAAE,YAAY,SAAS,YAAY;AAC/D,QAAM,UAAU,aAAa,cAAc;AAC3C,SACE,qCAAC,aAAD;AAAA,IAAa,eAAY;AAAA,IAAyB;AAAA,KAChD,qCAAC,SAAD;AAAA,IAAS,MAAK;AAAA,IAAI,OAAO,CAAC,iBAAiB;AAAA,IAAM;AAAA;AAAA;AAKvD,cAAc,YAAY;AAAA,EAIxB,YAAY,UAAU;AAAA,EAItB,SAAS,UAAU,KAAK;AAAA,EAIxB,OAAO,UAAU,OAAO;AAAA;",
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA,gBACX,CAAC,UAAW,MAAM,UAAU,QAAQ,SAAS;AAAA,gBAC7C,CAAC,UAAW,MAAM,UAAU,QAAQ,eAAe;AAAA,iBAClD,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGvC,MAAM,gBAAgB,CAAC,EAAE,YAAY,SAAS,YAAY;AAC/D,QAAM,UAAU,aAAa,cAAc;AAC3C,SACE,qCAAC;AAAA,IAAY,eAAY;AAAA,IAAyB;AAAA,KAChD,qCAAC;AAAA,IAAQ,MAAK;AAAA,IAAI,OAAO,CAAC,iBAAiB,GAAG;AAAA,IAAG;AAAA,GAAkB,CACrE;AAEJ;AAEA,cAAc,YAAY;AAAA,EAIxB,YAAY,UAAU;AAAA,EAItB,SAAS,UAAU,KAAK;AAAA,EAIxB,OAAO,UAAU,OAAO;AAC1B;",
   "names": []
 }