npm - @elliemae/ds-mobile - Versions diffs - 3.1.0-next.2 → 3.1.0-next.5 - Mend

@elliemae/ds-mobile 3.1.0-next.2 → 3.1.0-next.5

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

Files changed (235) hide show

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

@@ -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;\nInfiniteLoader.displayName = 'InfiniteLoader';\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\n\nInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useRef } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\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/VirtualizedInfiniteLoader.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2, { useState } from "react";
-import { PropTypes, describe } from "react-desc";
+import { PropTypes, describe } from "@elliemae/ds-utilities";
 import RWInfiniteLoader from "react-window-infinite-loader";
 import { VariableSizeList as List } from "react-window";
 const VirtualizedInfiniteLoader = ({

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

@@ -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;\nVirtualizedInfiniteLoader.displayName = 'VirtualizedInfiniteLoader';\nconst VirtualizedInfiniteLoaderWithSchema = describe(VirtualizedInfiniteLoader);\n\nVirtualizedInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { VirtualizedInfiniteLoader, VirtualizedInfiniteLoaderWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\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/InfiniteLoader/styled.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 const LoaderBox = styled.div`
   position: absolute;
   width: 100%;

package/dist/esm/InfiniteLoader/styled.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InfiniteLoader/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\n\nexport const LoaderBox = styled.div`\n  position: absolute;\n  width: 100%;\n  z-index: 10;\n  background-color: white;\n  height: 50px;\n  bottom: -50px;\n  border-top: 1px solid #e0e3e8;\n  align-items: center;\n  transition: 400ms cubic-bezier(0, 0, 0.42, 1);\n  &.opened {\n    transition: 400ms cubic-bezier(0.36, 0, 1, 1);\n    bottom: 0;\n  }\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const LoaderBox = styled.div`\n  position: absolute;\n  width: 100%;\n  z-index: 10;\n  background-color: white;\n  height: 50px;\n  bottom: -50px;\n  border-top: 1px solid #e0e3e8;\n  align-items: center;\n  transition: 400ms cubic-bezier(0, 0, 0.42, 1);\n  &.opened {\n    transition: 400ms cubic-bezier(0.36, 0, 1, 1);\n    bottom: 0;\n  }\n`;\n"],
   "mappings": "AAAA;ACAA;AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/LoadingPage/Page.js CHANGED Viewed

@@ -22,7 +22,7 @@ import React2, { useRef, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { withTheme } from "@elliemae/ds-system";
 import { get } from "lodash";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import Backdrop from "@elliemae/ds-backdrop";
 const LoadingPageLoader = styled.div`
   ${({ type }) => type === "cover" ? "position: fixed" : "position: absolute"};

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

@@ -1,7 +1,7 @@
 {
   "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"],
+  "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 '@elliemae/ds-system';\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,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 CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as React from "react";
 import React2 from "react";
-import { PropTypes, describe } from "react-desc";
+import { PropTypes, describe } from "@elliemae/ds-utilities";
 import { Grid } from "@elliemae/ds-grid";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { withTheme } from "@elliemae/ds-system";
 import ToolbarItem from "./MobileActionToolbarItem";
 const ToolStrip = styled(Grid)`

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

@@ -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);\nDSMobileActionToolbar.displayName = 'DSMobileActionToolbar';\nconst DSMobileActionToolbarWithSchema = describe(DSMobileActionToolbar);\nDSMobileActionToolbarWithSchema.propTypes = props;\n\nexport { ToolbarItem, DSMobileActionToolbarWithSchema };\nexport default DSMobileActionToolbar;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\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 CHANGED Viewed

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
 };
 import * as React from "react";
 import React2 from "react";
-import { PropTypes, describe } from "react-desc";
+import { PropTypes, describe } from "@elliemae/ds-utilities";
 import DSButton from "@elliemae/ds-button";
 const ToolbarItem = (_a) => {
   var _b = _a, { icon } = _b, otherProps = __objRest(_b, ["icon"]);

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

@@ -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;\nToolbarItem.displayName = 'ToolbarItem';\nconst DSToolbarItemWithSchema = describe(ToolbarItem);\n\nDSToolbarItemWithSchema.propTypes = props;\n\nexport default ToolbarItem;\n\nexport { DSToolbarItemWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\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 CHANGED Viewed

@@ -20,7 +20,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import React2, { useLayoutEffect, useEffect, useRef, useState } from "react";
 import { CloseX } from "@elliemae/ds-icons";
-import { describe } from "react-desc";
+import { describe } from "@elliemae/ds-utilities";
 import { icons } from "./utils/icons";
 import { propTypes } from "./propTypes";
 import { defaultProps } from "./defaultProps";

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

@@ -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';\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"],
+  "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 '@elliemae/ds-utilities';\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/propTypes.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from "@elliemae/ds-utilities";
 const propTypes = {
   type: PropTypes.oneOf(["info", "success", "warning", "error"]).description("Type of banner"),
   isOpen: PropTypes.bool.description("Whether the banner is open or not"),

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

@@ -1,7 +1,7 @@
 {
   "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\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,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 CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { toMobile } from "@elliemae/ds-system";
 import { DSButtonV2 } from "@elliemae/ds-button";
 import { handleAnimation, handleBorderColor } from "./utils/styleHelpers";

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

@@ -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 { 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\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/styleHelpers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from '@elliemae/ds-system';\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;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 CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React2 from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { ChevronSmallDown } from "@elliemae/ds-icons";
 import Button from "@elliemae/ds-button";
 const Addon = styled(Button)`

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

@@ -1,7 +1,7 @@
 {
   "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\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,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 CHANGED Viewed

@@ -1,9 +1,17 @@
 import * as React from "react";
 import React2, { useRef } from "react";
-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 { describe } from "@elliemae/ds-utilities";
+import {
+  styled,
+  space,
+  color,
+  border,
+  op,
+  truncate,
+  withTheme,
+  __UNSAFE_SPACE_TO_DIMSUM,
+  toMobile
+} from "@elliemae/ds-system";
 import { GroupItem } from "@elliemae/ds-shared";
 import { Grid } from "@elliemae/ds-grid";
 import { StyledCard as Card } from "./StyledCard";

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

@@ -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';\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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",
+  "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 '@elliemae/ds-utilities';\nimport {\n  styled,\n  space,\n  color,\n  border,\n  op,\n  truncate,\n  withTheme,\n  __UNSAFE_SPACE_TO_DIMSUM,\n  toMobile,\n} 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 CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React2 from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 const CardIconsWrapper = styled(Grid)`
   align-items: center;

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

@@ -1,7 +1,7 @@
 {
   "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"],
+  "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 '@elliemae/ds-system';\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,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 CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React2 from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { ChevronDown, ChevronRight } from "@elliemae/ds-icons";
 const ChevronWrap = styled.div`
   margin-top: ${(props) => props.align === "top" ? "18px" : "0"};

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

@@ -1,7 +1,7 @@
 {
   "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\nimport { ChevronDown, ChevronRight } from '@elliemae/ds-icons';\n\nconst ChevronWrap = styled.div`\n  margin-top: ${(props) => (props.align === 'top' ? '18px' : '0')};\n  align-self: ${(props) => (props.align === 'top' ? 'flex-start' : 'center')};\n  margin-left: ${(props) => props.theme.space.xs};\n`;\n\nexport const ExpandChevron = ({ isExpanded, onClick, align }) => {\n  const Chevron = isExpanded ? ChevronDown : ChevronRight;\n  return (\n    <ChevronWrap data-testid=\"ds-card-expand-chevron\" align={align}>\n      <Chevron size=\"s\" color={['brand-primary', 800]} onClick={onClick} />\n    </ChevronWrap>\n  );\n};\n\nExpandChevron.propTypes = {\n  /**\n   * Whether if the chevron is expanded or not\n   */\n  isExpanded: PropTypes.bool,\n  /**\n   * click callback\n   */\n  onClick: PropTypes.func.isRequired,\n  /**\n   * top or center\n   */\n  align: PropTypes.string.isRequired,\n};\n"],
   "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": []
 }

package/dist/esm/MobileCard/ExpandableRegion.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React2, { useEffect, useState, useRef } from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { border, truncate } from "@elliemae/ds-system";
 const RegionWrapper = styled.div`
   width: 100%;

package/dist/esm/MobileCard/ExpandableRegion.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/ExpandableRegion.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { border, truncate } from '@elliemae/ds-system';\n\nconst RegionWrapper = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\nconst Region = styled.div<{ hide: boolean; animate: boolean; refHeight: number }>`\n  display: flex;\n  ${(props) => (props.hide ? 'visibility: hidden;' : '')}\n  transition: max-height ${(props) => (props.animate ? '0.25s' : '0.20s')} linear;\n  max-height: 0;\n  ${(props) =>\n    props.animate\n      ? `\n      max-height: ${props.refHeight}px;\n    `\n      : ''}\n  align-items: center;\n  ${truncate()};\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n`;\n\nexport const ExpandableRegion = ({ show, content }: { show: boolean; content: JSX.Element | JSX.Element[] }) => {\n  const ref = useRef<HTMLDivElement>(null);\n  // triggers transition\n  const [animate, setAnimate] = useState(show);\n  // needed to properly handle the transition. Hide after transition ends\n  const [hide, setHide] = useState(!show);\n  useEffect(() => {\n    setAnimate(show);\n    if (show) setHide(false);\n  }, [show]);\n\n  const hideOnAnimationEnd = () => {\n    if (!show) setHide(true);\n  };\n\n  return (\n    <Region\n      hide={hide}\n      // needed to handle transition, `auto` max-height isn't supported\n      refHeight={ref?.current?.scrollHeight || 9999}\n      onTransitionEnd={hideOnAnimationEnd}\n      animate={animate}\n    >\n      <RegionWrapper ref={ref}>{content}</RegionWrapper>\n    </Region>\n  );\n};\n\nExpandableRegion.propTypes = {\n  show: PropTypes.bool,\n  content: PropTypes.element,\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\nimport { border, truncate } from '@elliemae/ds-system';\n\nconst RegionWrapper = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\nconst Region = styled.div<{ hide: boolean; animate: boolean; refHeight: number }>`\n  display: flex;\n  ${(props) => (props.hide ? 'visibility: hidden;' : '')}\n  transition: max-height ${(props) => (props.animate ? '0.25s' : '0.20s')} linear;\n  max-height: 0;\n  ${(props) =>\n    props.animate\n      ? `\n      max-height: ${props.refHeight}px;\n    `\n      : ''}\n  align-items: center;\n  ${truncate()};\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n`;\n\nexport const ExpandableRegion = ({ show, content }: { show: boolean; content: JSX.Element | JSX.Element[] }) => {\n  const ref = useRef<HTMLDivElement>(null);\n  // triggers transition\n  const [animate, setAnimate] = useState(show);\n  // needed to properly handle the transition. Hide after transition ends\n  const [hide, setHide] = useState(!show);\n  useEffect(() => {\n    setAnimate(show);\n    if (show) setHide(false);\n  }, [show]);\n\n  const hideOnAnimationEnd = () => {\n    if (!show) setHide(true);\n  };\n\n  return (\n    <Region\n      hide={hide}\n      // needed to handle transition, `auto` max-height isn't supported\n      refHeight={ref?.current?.scrollHeight || 9999}\n      onTransitionEnd={hideOnAnimationEnd}\n      animate={animate}\n    >\n      <RegionWrapper ref={ref}>{content}</RegionWrapper>\n    </Region>\n  );\n};\n\nExpandableRegion.propTypes = {\n  show: PropTypes.bool,\n  content: PropTypes.element,\n};\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAK7B,MAAM,SAAS,OAAO;AAAA;AAAA,IAElB,CAAC,UAAW,MAAM,OAAO,wBAAwB;AAAA,2BAC1B,CAAC,UAAW,MAAM,UAAU,UAAU;AAAA;AAAA,IAE7D,CAAC,UACD,MAAM,UACF;AAAA,oBACY,MAAM;AAAA,QAElB;AAAA;AAAA,IAEJ,SAAS;AAAA,gBACG,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA,iBAClD,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAG7C,MAAM,mBAAmB,CAAC,EAAE,MAAM,cAAuE;AAC9G,QAAM,MAAM,OAAuB,IAAI;AAEvC,QAAM,CAAC,SAAS,cAAc,SAAS,IAAI;AAE3C,QAAM,CAAC,MAAM,WAAW,SAAS,CAAC,IAAI;AACtC,YAAU,MAAM;AACd,eAAW,IAAI;AACf,QAAI;AAAM,cAAQ,KAAK;AAAA,EACzB,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC;AAAM,cAAQ,IAAI;AAAA,EACzB;AAEA,SACE,qCAAC;AAAA,IACC;AAAA,IAEA,WAAW,KAAK,SAAS,gBAAgB;AAAA,IACzC,iBAAiB;AAAA,IACjB;AAAA,KAEA,qCAAC;AAAA,IAAc;AAAA,KAAW,OAAQ,CACpC;AAEJ;AAEA,iBAAiB,YAAY;AAAA,EAC3B,MAAM,UAAU;AAAA,EAChB,SAAS,UAAU;AACrB;",
   "names": []
 }

package/dist/esm/MobileCard/Group.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React2 from "react";
-import { describe, PropTypes } from "react-desc";
-import styled from "styled-components";
+import { describe, PropTypes } from "@elliemae/ds-utilities";
+import { styled } from "@elliemae/ds-system";
 import { Group } from "@elliemae/ds-shared";
 import { Grid } from "@elliemae/ds-grid";
 import { color, border, withTheme, truncate, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";

package/dist/esm/MobileCard/Group.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/Group.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-array-index-key */\nimport React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { Group } from '@elliemae/ds-shared';\nimport { Grid } from '@elliemae/ds-grid';\nimport { color, border, withTheme, truncate, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { StyledCard as Card } from './StyledCard';\n\nconst GroupGrid = styled(Grid)`\n  ${Card} {\n    border-top: none;\n  }\n\n  ${({ theme, withTopBorder }) => (withTopBorder ? `border-top: ${border(theme.colors.neutral['100'])}` : '')}\n`;\n\nconst GroupTitle = styled.span`\n  ${truncate()}\n`;\n\nconst GroupTitleGrid = styled.div`\n  display: flex;\n  justify-content: space-between;\n  padding: 0 ${(props) => props.theme.space.xs};\n  font-size: ${(props) => `calc(${__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)} / 2)`};\n  ${color('neutral', '700')}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  background-color: ${(props) => props.theme.colors.brand['200']};\n  border-top: ${(props) => border(props.theme.colors.brand['300'])};\n  line-height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  @media (min-width: 1024px) {\n    background-color: ${(props) => props.theme.colors.neutral['080']};\n    border-top: ${(props) => border(props.theme.colors.neutral['080'])};\n  }\n`;\n\nconst MobileCardGroup = ({\n  children,\n  theme,\n  title,\n  action,\n  activeValue,\n  allowMultipleOpen = false,\n  onChange = () => null,\n}) => {\n  const rows = !title ? ['auto'] : [__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];\n\n  return (\n    <Group activeValue={activeValue} multiple={allowMultipleOpen} onChange={onChange}>\n      <GroupGrid withTopBorder={!title} rows={rows}>\n        {!!title && (\n          <GroupTitleGrid pl=\"xxs\">\n            <GroupTitle>{title}</GroupTitle>\n            {action}\n          </GroupTitleGrid>\n        )}\n        <Grid>\n          {React.Children.map(\n            children,\n            (child, idx) =>\n              React.cloneElement(child, {\n                key: idx,\n                value: idx,\n                idx,\n              }),\n            null,\n          )}\n        </Grid>\n      </GroupGrid>\n    </Group>\n  );\n};\n\nconst props = {\n  theme: PropTypes.object.isRequired.description(''),\n  /**\n   * Defines group title\n   */\n  title: PropTypes.string.description(''),\n  /**\n   * Pass one or more Mobile Cards to render as a group\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description(''),\n  /**\n   * Group header addon\n   */\n  action: PropTypes.element.description(''),\n  /**  */\n  activeValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).description(''),\n  /**  */\n  allowMultipleOpen: PropTypes.bool.description(''),\n  /**  */\n  onChange: PropTypes.func.description(''),\n};\n\nMobileCardGroup.propTypes = props;\nMobileCardGroup.displayName = 'MobileCardGroup';\nconst DSMobileCardGroupWithSchema = describe(MobileCardGroup);\n\nDSMobileCardGroupWithSchema.propTypes = props;\n\nexport { DSMobileCardGroupWithSchema };\n\nexport default withTheme(MobileCardGroup);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-array-index-key */\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Group } from '@elliemae/ds-shared';\nimport { Grid } from '@elliemae/ds-grid';\nimport { color, border, withTheme, truncate, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { StyledCard as Card } from './StyledCard';\n\nconst GroupGrid = styled(Grid)`\n  ${Card} {\n    border-top: none;\n  }\n\n  ${({ theme, withTopBorder }) => (withTopBorder ? `border-top: ${border(theme.colors.neutral['100'])}` : '')}\n`;\n\nconst GroupTitle = styled.span`\n  ${truncate()}\n`;\n\nconst GroupTitleGrid = styled.div`\n  display: flex;\n  justify-content: space-between;\n  padding: 0 ${(props) => props.theme.space.xs};\n  font-size: ${(props) => `calc(${__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)} / 2)`};\n  ${color('neutral', '700')}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  background-color: ${(props) => props.theme.colors.brand['200']};\n  border-top: ${(props) => border(props.theme.colors.brand['300'])};\n  line-height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  @media (min-width: 1024px) {\n    background-color: ${(props) => props.theme.colors.neutral['080']};\n    border-top: ${(props) => border(props.theme.colors.neutral['080'])};\n  }\n`;\n\nconst MobileCardGroup = ({\n  children,\n  theme,\n  title,\n  action,\n  activeValue,\n  allowMultipleOpen = false,\n  onChange = () => null,\n}) => {\n  const rows = !title ? ['auto'] : [__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];\n\n  return (\n    <Group activeValue={activeValue} multiple={allowMultipleOpen} onChange={onChange}>\n      <GroupGrid withTopBorder={!title} rows={rows}>\n        {!!title && (\n          <GroupTitleGrid pl=\"xxs\">\n            <GroupTitle>{title}</GroupTitle>\n            {action}\n          </GroupTitleGrid>\n        )}\n        <Grid>\n          {React.Children.map(\n            children,\n            (child, idx) =>\n              React.cloneElement(child, {\n                key: idx,\n                value: idx,\n                idx,\n              }),\n            null,\n          )}\n        </Grid>\n      </GroupGrid>\n    </Group>\n  );\n};\n\nconst props = {\n  theme: PropTypes.object.isRequired.description(''),\n  /**\n   * Defines group title\n   */\n  title: PropTypes.string.description(''),\n  /**\n   * Pass one or more Mobile Cards to render as a group\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description(''),\n  /**\n   * Group header addon\n   */\n  action: PropTypes.element.description(''),\n  /**  */\n  activeValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).description(''),\n  /**  */\n  allowMultipleOpen: PropTypes.bool.description(''),\n  /**  */\n  onChange: PropTypes.func.description(''),\n};\n\nMobileCardGroup.propTypes = props;\nMobileCardGroup.displayName = 'MobileCardGroup';\nconst DSMobileCardGroupWithSchema = describe(MobileCardGroup);\n\nDSMobileCardGroupWithSchema.propTypes = props;\n\nexport { DSMobileCardGroupWithSchema };\n\nexport default withTheme(MobileCardGroup);\n"],
   "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO,IAAI;AAAA,IACzB;AAAA;AAAA;AAAA;AAAA,IAIA,CAAC,EAAE,OAAO,oBAAqB,gBAAgB,eAAe,OAAO,MAAM,OAAO,QAAQ,MAAM,MAAM;AAAA;AAG1G,MAAM,aAAa,OAAO;AAAA,IACtB,SAAS;AAAA;AAGb,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,eAGf,CAAC,WAAU,OAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,WAAU,QAAQ,yBAAyB,OAAM,MAAM,MAAM,CAAC;AAAA,IAC1E,MAAM,WAAW,KAAK;AAAA,iBACT,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA,sBAC9B,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA,gBAC1C,CAAC,WAAU,OAAO,OAAM,MAAM,OAAO,MAAM,MAAM;AAAA,iBAChD,CAAC,WAAU,yBAAyB,OAAM,MAAM,MAAM,CAAC;AAAA;AAAA,wBAEhD,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,kBAC5C,CAAC,WAAU,OAAO,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAIrE,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,WAAW,MAAM;AAAA,MACb;AACJ,QAAM,OAAO,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,yBAAyB,MAAM,MAAM,CAAC,GAAG,MAAM;AAEjF,SACE,qCAAC;AAAA,IAAM;AAAA,IAA0B,UAAU;AAAA,IAAmB;AAAA,KAC5D,qCAAC;AAAA,IAAU,eAAe,CAAC;AAAA,IAAO;AAAA,KAC/B,CAAC,CAAC,SACD,qCAAC;AAAA,IAAe,IAAG;AAAA,KACjB,qCAAC,kBAAY,KAAM,GAClB,MACH,GAEF,qCAAC,YACE,OAAM,SAAS,IACd,UACA,CAAC,OAAO,QACN,OAAM,aAAa,OAAO;AAAA,IACxB,KAAK;AAAA,IACL,OAAO;AAAA,IACP;AAAA,EACF,CAAC,GACH,IACF,CACF,CACF,CACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,OAAO,UAAU,OAAO,WAAW,YAAY,EAAE;AAAA,EAIjD,OAAO,UAAU,OAAO,YAAY,EAAE;AAAA,EAItC,UAAU,UAAU,UAAU,CAAC,UAAU,SAAS,UAAU,QAAQ,UAAU,OAAO,CAAC,CAAC,EAAE,WAAW,YAAY,EAAE;AAAA,EAIlH,QAAQ,UAAU,QAAQ,YAAY,EAAE;AAAA,EAExC,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,EAAE;AAAA,EAExG,mBAAmB,UAAU,KAAK,YAAY,EAAE;AAAA,EAEhD,UAAU,UAAU,KAAK,YAAY,EAAE;AACzC;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,8BAA8B,SAAS,eAAe;AAE5D,4BAA4B,YAAY;AAIxC,IAAO,gBAAQ,UAAU,eAAe;",
   "names": []
 }

package/dist/esm/MobileCard/StyledCard.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { border } from "@elliemae/ds-system";
 const StyledCard = styled.div`
   display: flex;

package/dist/esm/MobileCard/StyledCard.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/StyledCard.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { border } from '@elliemae/ds-system';\n\nexport const StyledCard = styled.div<{ minHeight: string }>`\n  display: flex;\n  align-items: center;\n  height: fit-content;\n  min-height: ${(props) => props.minHeight};\n  border: ${(props) => border(props.theme.colors.neutral['100'])};\n  border-bottom: ${(props) => border('.5px', props.theme.colors.neutral['500'])};\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { border } from '@elliemae/ds-system';\n\nexport const StyledCard = styled.div<{ minHeight: string }>`\n  display: flex;\n  align-items: center;\n  height: fit-content;\n  min-height: ${(props) => props.minHeight};\n  border: ${(props) => border(props.theme.colors.neutral['100'])};\n  border-bottom: ${(props) => border('.5px', props.theme.colors.neutral['500'])};\n`;\n"],
   "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIjB,CAAC,UAAU,MAAM;AAAA,YACrB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA,mBAC5C,CAAC,UAAU,OAAO,QAAQ,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;",
   "names": []
 }

package/dist/esm/MobileCard/props.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from "@elliemae/ds-utilities";
 const cardPropsTypes = {
   height: PropTypes.oneOf(["s", "m"]).description("card height"),
   children: PropTypes.string.description("Defines mobile card title").isRequired,

package/dist/esm/MobileCard/props.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/props.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes } from 'react-desc';\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport interface MobileCardProps {\n  children: React.ReactNode | React.ReactNode[];\n  height: 's' | 'm';\n  leftAddOn: JSX.Element | JSX.Element[];\n  leftProp: JSX.Element | JSX.Element[];\n  rightProp: JSX.Element[];\n  subText: string[];\n  subIcons: JSX.Element | JSX.Element[];\n  details: string[];\n  theme: Theme;\n  value: number;\n  expandable: boolean;\n  expandedContent: JSX.Element | JSX.Element[];\n  cardContent: JSX.Element | JSX.Element[];\n}\n\nexport const cardPropsTypes = {\n  /**\n   * card height\n   */\n  height: PropTypes.oneOf(['s', 'm']).description('card height'),\n  /**\n   * Defines mobile card title\n   */\n  children: PropTypes.string.description('Defines mobile card title').isRequired,\n  /**\n   * Wheter if the card is expandable or not\n   */\n  expandable: PropTypes.bool.description('Wheter if the card is expandable or not'),\n  /**\n   * content to display in expand card section\n   */\n  expandedContent: PropTypes.element.description('content to display in expand card section'),\n  /**\n   * Icon to the left of the card. Size is adjusted automatically.\n   */\n  leftAddOn: PropTypes.element.description('Icon to the left of the card. Size is adjusted automatically.'),\n  /**\n   * Pass an element to render left. For example a Button with an icon\n   */\n  leftProp: PropTypes.element.description('Pass an element to render left. For example a Button with an icon'),\n  /**\n   * Pass an array of 1 or 2 elements to render right. For example a Button with an icon\n   */\n  rightProp: PropTypes.arrayOf(PropTypes.element).description(\n    'Pass an array of 1 or 2 elements to render right. For example a Button with an icon',\n  ),\n  /**\n   * Pass an array of 1 or 2 strings\n   */\n  subText: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1 or 2 strings'),\n  /**\n   * SubIcons component\n   */\n  subIcons: PropTypes.element.description('SubIcons component'),\n  /**\n   * Pass an array of 1, 2 or 3 strings\n   */\n  details: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),\n  theme: PropTypes.object.description('').isRequired,\n  value: PropTypes.number.description(''),\n  cardContent: PropTypes.node.description('JSX content for the card'),\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport interface MobileCardProps {\n  children: React.ReactNode | React.ReactNode[];\n  height: 's' | 'm';\n  leftAddOn: JSX.Element | JSX.Element[];\n  leftProp: JSX.Element | JSX.Element[];\n  rightProp: JSX.Element[];\n  subText: string[];\n  subIcons: JSX.Element | JSX.Element[];\n  details: string[];\n  theme: Theme;\n  value: number;\n  expandable: boolean;\n  expandedContent: JSX.Element | JSX.Element[];\n  cardContent: JSX.Element | JSX.Element[];\n}\n\nexport const cardPropsTypes = {\n  /**\n   * card height\n   */\n  height: PropTypes.oneOf(['s', 'm']).description('card height'),\n  /**\n   * Defines mobile card title\n   */\n  children: PropTypes.string.description('Defines mobile card title').isRequired,\n  /**\n   * Wheter if the card is expandable or not\n   */\n  expandable: PropTypes.bool.description('Wheter if the card is expandable or not'),\n  /**\n   * content to display in expand card section\n   */\n  expandedContent: PropTypes.element.description('content to display in expand card section'),\n  /**\n   * Icon to the left of the card. Size is adjusted automatically.\n   */\n  leftAddOn: PropTypes.element.description('Icon to the left of the card. Size is adjusted automatically.'),\n  /**\n   * Pass an element to render left. For example a Button with an icon\n   */\n  leftProp: PropTypes.element.description('Pass an element to render left. For example a Button with an icon'),\n  /**\n   * Pass an array of 1 or 2 elements to render right. For example a Button with an icon\n   */\n  rightProp: PropTypes.arrayOf(PropTypes.element).description(\n    'Pass an array of 1 or 2 elements to render right. For example a Button with an icon',\n  ),\n  /**\n   * Pass an array of 1 or 2 strings\n   */\n  subText: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1 or 2 strings'),\n  /**\n   * SubIcons component\n   */\n  subIcons: PropTypes.element.description('SubIcons component'),\n  /**\n   * Pass an array of 1, 2 or 3 strings\n   */\n  details: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),\n  theme: PropTypes.object.description('').isRequired,\n  value: PropTypes.number.description(''),\n  cardContent: PropTypes.node.description('JSX content for the card'),\n};\n"],
   "mappings": "AAAA;ACCA;AAmBO,MAAM,iBAAiB;AAAA,EAI5B,QAAQ,UAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,aAAa;AAAA,EAI7D,UAAU,UAAU,OAAO,YAAY,2BAA2B,EAAE;AAAA,EAIpE,YAAY,UAAU,KAAK,YAAY,yCAAyC;AAAA,EAIhF,iBAAiB,UAAU,QAAQ,YAAY,2CAA2C;AAAA,EAI1F,WAAW,UAAU,QAAQ,YAAY,+DAA+D;AAAA,EAIxG,UAAU,UAAU,QAAQ,YAAY,mEAAmE;AAAA,EAI3G,WAAW,UAAU,QAAQ,UAAU,OAAO,EAAE,YAC9C,qFACF;AAAA,EAIA,SAAS,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,iCAAiC;AAAA,EAI1F,UAAU,UAAU,QAAQ,YAAY,oBAAoB;AAAA,EAI5D,SAAS,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,oCAAoC;AAAA,EAC7F,OAAO,UAAU,OAAO,YAAY,EAAE,EAAE;AAAA,EACxC,OAAO,UAAU,OAAO,YAAY,EAAE;AAAA,EACtC,aAAa,UAAU,KAAK,YAAY,0BAA0B;AACpE;",
   "names": []
 }