@elliemae/ds-mobile 3.1.4 → 3.1.5-rc.12

package/dist/cjs/CategoryBox/CategoryBox.js

@@ -39,27 +39,28 @@ const Title = import_ds_system.styled.h3`
   ${(0, import_ds_system2.truncate)()}
   font-weight: ${(props2) => props2.theme.fontWeights.semibold};
 `;
-const CategoryBox = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const CategoryBox = (0, import_ds_system.styled)(import_ds_grid.Grid, {})`
   background: ${(props2) => props2.theme.colors.neutral["0"]};
-  border-top: ${(props2) => props2.borderTop ? `1px solid ${props2.theme.colors.neutral["100"]}` : "none"};
+  border-top: ${(props2) => props2.hasBorderTop ? `1px solid ${props2.theme.colors.neutral["100"]}` : "none"};
 `;
 const DSCategoryBox = ({ borderTop = true, actionsRight = [], title, headerLevel = 3, children }) => {
   const rows = ["auto"];
   const hasActions = actionsRight.length > 0;
   if (hasActions)
     rows.push("auto");
+  const cols = import_react.default.useMemo(() => (0, import_lodash.times)(actionsRight.length, () => "auto"), [actionsRight.length]);
   return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
     rows: ["40px", "auto"]
   }, /* @__PURE__ */ import_react.default.createElement(CategoryBox, {
     cols: rows,
-    borderTop,
+    hasBorderTop: borderTop,
     alignItems: "center",
     pl: "xs",
     pr: actionsRight.length > 0 ? "xxs" : "xs"
   }, /* @__PURE__ */ import_react.default.createElement(Title, {
     as: `h${headerLevel}`
   }, title), hasActions && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
-    cols: (0, import_lodash.times)(actionsRight.length, () => "auto"),
+    cols,
     justifySelf: "end"
   }, actionsRight)), children);
 };

package/dist/cjs/CategoryBox/CategoryBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/CategoryBox/CategoryBox.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { times } from 'lodash';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { truncate } from '@elliemae/ds-system';\n\nconst Title = styled.h3`\n  font-size: 18px;\n  margin: 0;\n  color: ${(props) => props.theme.colors.neutral['700']};\n  line-height: inherit;\n  ${truncate()}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nconst CategoryBox = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['0']};\n  border-top: ${(props) => (props.borderTop ? `1px solid ${props.theme.colors.neutral['100']}` : 'none')};\n`;\n\nconst DSCategoryBox = ({ borderTop = true, actionsRight = [], title, headerLevel = 3, children }) => {\n  const rows = ['auto'];\n  const hasActions = actionsRight.length > 0;\n  if (hasActions) rows.push('auto');\n\n  return (\n    <Grid rows={['40px', 'auto']}>\n      <CategoryBox\n        cols={rows}\n        borderTop={borderTop}\n        alignItems=\"center\"\n        pl=\"xs\"\n        pr={actionsRight.length > 0 ? 'xxs' : 'xs'}\n      >\n        <Title as={`h${headerLevel}`}>{title}</Title>\n        {hasActions && (\n          <Grid cols={times(actionsRight.length, () => 'auto')} justifySelf=\"end\">\n            {actionsRight}\n          </Grid>\n        )}\n      </CategoryBox>\n      {children}\n    </Grid>\n  );\n};\n\nconst props = {\n  /**\n   * Category Box title\n   */\n  title: PropTypes.string.isRequired.description('Category Box title'),\n  /**\n   * Toggle border top of category box\n   */\n  borderTop: PropTypes.bool.description('Toggle border top of category box'),\n  /**\n   * Array of button icons\n   */\n  actionsRight: PropTypes.arrayOf(PropTypes.element).description('Array of button icons'),\n  /**\n   * semantic level of header tag for the title\n   */\n  headerLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('semantic level of header tag for the title'),\n  /**\n   * In-box children\n   */\n  children: PropTypes.element.description('In-box children'),\n};\n\nDSCategoryBox.propTypes = props;\nDSCategoryBox.displayName = 'DSCategoryBox';\nconst DSCategoryBoxWithSchema = describe(DSCategoryBox);\nDSCategoryBoxWithSchema.propTypes = props;\n\nexport { DSCategoryBox, DSCategoryBoxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAsB;AACtB,0BAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AACrB,wBAAyB;AAEzB,MAAM,QAAQ,wBAAO;AAAA;AAAA;AAAA,WAGV,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,IAE7C,gCAAS;AAAA,iBACI,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,cAAc,6BAAO,mBAAI;AAAA,gBACf,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,gBACtC,CAAC,WAAW,OAAM,YAAY,aAAa,OAAM,MAAM,OAAO,QAAQ,WAAW;AAAA;AAGjG,MAAM,gBAAgB,CAAC,EAAE,YAAY,MAAM,eAAe,CAAC,GAAG,OAAO,cAAc,GAAG,eAAe;AACnG,QAAM,OAAO,CAAC,MAAM;AACpB,QAAM,aAAa,aAAa,SAAS;AACzC,MAAI;AAAY,SAAK,KAAK,MAAM;AAEhC,SACE,mDAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,KACzB,mDAAC;AAAA,IACC,MAAM;AAAA,IACN;AAAA,IACA,YAAW;AAAA,IACX,IAAG;AAAA,IACH,IAAI,aAAa,SAAS,IAAI,QAAQ;AAAA,KAEtC,mDAAC;AAAA,IAAM,IAAI,IAAI;AAAA,KAAgB,KAAM,GACpC,cACC,mDAAC;AAAA,IAAK,MAAM,yBAAM,aAAa,QAAQ,MAAM,MAAM;AAAA,IAAG,aAAY;AAAA,KAC/D,YACH,CAEJ,GACC,QACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAIZ,OAAO,8BAAU,OAAO,WAAW,YAAY,oBAAoB;AAAA,EAInE,WAAW,8BAAU,KAAK,YAAY,mCAAmC;AAAA,EAIzE,cAAc,8BAAU,QAAQ,8BAAU,OAAO,EAAE,YAAY,uBAAuB;AAAA,EAItF,aAAa,8BAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,4CAA4C;AAAA,EAIzG,UAAU,8BAAU,QAAQ,YAAY,iBAAiB;AAC3D;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { times } from 'lodash';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { truncate } from '@elliemae/ds-system';\n\nconst Title = styled.h3`\n  font-size: 18px;\n  margin: 0;\n  color: ${(props) => props.theme.colors.neutral['700']};\n  line-height: inherit;\n  ${truncate()}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nconst CategoryBox = styled(Grid, {})`\n  background: ${(props) => props.theme.colors.neutral['0']};\n  border-top: ${(props) => (props.hasBorderTop ? `1px solid ${props.theme.colors.neutral['100']}` : 'none')};\n`;\n\nconst DSCategoryBox = ({ borderTop = true, actionsRight = [], title, headerLevel = 3, children }) => {\n  const rows = ['auto'];\n  const hasActions = actionsRight.length > 0;\n  if (hasActions) rows.push('auto');\n\n  const cols = React.useMemo(() => times(actionsRight.length, () => 'auto'), [actionsRight.length]);\n\n  return (\n    <Grid rows={['40px', 'auto']}>\n      <CategoryBox\n        cols={rows}\n        hasBorderTop={borderTop}\n        alignItems=\"center\"\n        pl=\"xs\"\n        pr={actionsRight.length > 0 ? 'xxs' : 'xs'}\n      >\n        <Title as={`h${headerLevel}`}>{title}</Title>\n        {hasActions && (\n          <Grid cols={cols} justifySelf=\"end\">\n            {actionsRight}\n          </Grid>\n        )}\n      </CategoryBox>\n      {children}\n    </Grid>\n  );\n};\n\nconst props = {\n  /**\n   * Category Box title\n   */\n  title: PropTypes.string.isRequired.description('Category Box title'),\n  /**\n   * Toggle border top of category box\n   */\n  borderTop: PropTypes.bool.description('Toggle border top of category box'),\n  /**\n   * Array of button icons\n   */\n  actionsRight: PropTypes.arrayOf(PropTypes.element).description('Array of button icons'),\n  /**\n   * semantic level of header tag for the title\n   */\n  headerLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('semantic level of header tag for the title'),\n  /**\n   * In-box children\n   */\n  children: PropTypes.element.description('In-box children'),\n};\n\nDSCategoryBox.propTypes = props;\nDSCategoryBox.displayName = 'DSCategoryBox';\nconst DSCategoryBoxWithSchema = describe(DSCategoryBox);\nDSCategoryBoxWithSchema.propTypes = props;\n\nexport { DSCategoryBox, DSCategoryBoxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAsB;AACtB,0BAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AACrB,wBAAyB;AAEzB,MAAM,QAAQ,wBAAO;AAAA;AAAA;AAAA,WAGV,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,IAE7C,gCAAS;AAAA,iBACI,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,cAAc,6BAAO,qBAAM,CAAC,CAAC;AAAA,gBACnB,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,gBACtC,CAAC,WAAW,OAAM,eAAe,aAAa,OAAM,MAAM,OAAO,QAAQ,WAAW;AAAA;AAGpG,MAAM,gBAAgB,CAAC,EAAE,YAAY,MAAM,eAAe,CAAC,GAAG,OAAO,cAAc,GAAG,eAAe;AACnG,QAAM,OAAO,CAAC,MAAM;AACpB,QAAM,aAAa,aAAa,SAAS;AACzC,MAAI;AAAY,SAAK,KAAK,MAAM;AAEhC,QAAM,OAAO,qBAAM,QAAQ,MAAM,yBAAM,aAAa,QAAQ,MAAM,MAAM,GAAG,CAAC,aAAa,MAAM,CAAC;AAEhG,SACE,mDAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,KACzB,mDAAC;AAAA,IACC,MAAM;AAAA,IACN,cAAc;AAAA,IACd,YAAW;AAAA,IACX,IAAG;AAAA,IACH,IAAI,aAAa,SAAS,IAAI,QAAQ;AAAA,KAEtC,mDAAC;AAAA,IAAM,IAAI,IAAI;AAAA,KAAgB,KAAM,GACpC,cACC,mDAAC;AAAA,IAAK;AAAA,IAAY,aAAY;AAAA,KAC3B,YACH,CAEJ,GACC,QACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAIZ,OAAO,8BAAU,OAAO,WAAW,YAAY,oBAAoB;AAAA,EAInE,WAAW,8BAAU,KAAK,YAAY,mCAAmC;AAAA,EAIzE,cAAc,8BAAU,QAAQ,8BAAU,OAAO,EAAE,YAAY,uBAAuB;AAAA,EAItF,aAAa,8BAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,4CAA4C;AAAA,EAIzG,UAAU,8BAAU,QAAQ,YAAY,iBAAiB;AAC3D;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/cjs/InfiniteLoader/Infiniteloader.js

@@ -29,40 +29,51 @@ var import_react = __toESM(require("react"));
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_Loader = require("./Loader");
-const InfiniteLoader = ({ isFetching, fetchData, children, height = window.innerHeight }) => {
-  const callback = (entries) => {
+const InfiniteLoader = ({ isFetching, fetchData, children, height }) => {
+  const [viewportHeight, setViewportHeight] = (0, import_react.useState)(height);
+  const baselineRef = (0, import_react.useRef)(null);
+  const observerRef = (0, import_react.useRef)(null);
+  const callback = (0, import_react.useCallback)((entries) => {
     const { isIntersecting } = entries[0];
     if (isIntersecting && !isFetching) {
       fetchData();
-      observer.current.disconnect();
-      observer.current = void 0;
+      observerRef.current?.disconnect();
     }
-  };
-  const target = (0, import_react.useRef)(null);
-  const observer = (0, import_react.useRef)(null);
+  }, [fetchData, isFetching]);
   (0, import_react.useEffect)(() => {
-    if (observer.current) {
-      observer.current.disconnect();
+    if (!isFetching) {
+      observerRef.current?.disconnect();
+      observerRef.current = new IntersectionObserver(callback, {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.1
+      });
+      if (baselineRef.current)
+        observerRef.current.observe(baselineRef.current);
     }
-    observer.current = new IntersectionObserver(callback, {
-      root: null,
-      rootMargin: "0px",
-      threshold: 0.25
-    });
-    if (target.current) {
-      observer.current.observe(target.current);
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [baselineRef, observerRef, fetchData, callback, isFetching]);
+  const handleResize = (0, import_react.useCallback)(() => {
+    setViewportHeight(window.innerHeight);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!height) {
+      window.addEventListener("resize", handleResize);
+      handleResize();
     }
     return () => {
-      observer.current?.unobserve(target.current);
-      observer.current?.disconnect();
+      if (!height)
+        window.removeEventListener("resize", handleResize);
     };
-  }, [target, observer, fetchData]);
+  }, [handleResize, height]);
   return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
-    style: { position: "relative", height, overflow: "hidden" }
+    style: { position: "relative", overflow: "hidden", height: viewportHeight }
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
-    style: { overflow: isFetching ? "hidden" : "auto", height }
+    style: { overflow: isFetching ? "hidden" : "auto", height: viewportHeight }
   }, children, /* @__PURE__ */ import_react.default.createElement("div", {
-    ref: target,
+    ref: baselineRef,
     style: { height: 1 }
   })), /* @__PURE__ */ import_react.default.createElement(import_Loader.Loader, {
     isOpen: isFetching
@@ -72,10 +83,8 @@ const listProps = {
   isFetching: import_ds_utilities.PropTypes.bool.description("toggle loading state"),
   fetchData: import_ds_utilities.PropTypes.func.description("callback to fetch new items"),
   children: import_ds_utilities.PropTypes.element.description("row items for infinite loader"),
-  height: import_ds_utilities.PropTypes.number.isRequired.description("infinite loader list height")
+  height: import_ds_utilities.PropTypes.number.description("infinite loader list height")
 };
-InfiniteLoader.propTypes = listProps;
-InfiniteLoader.displayName = "InfiniteLoader";
 const InfiniteLoaderWithSchema = (0, import_ds_utilities.describe)(InfiniteLoader);
 InfiniteLoaderWithSchema.propTypes = listProps;
 //# sourceMappingURL=Infiniteloader.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/InfiniteLoader/Infiniteloader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,0BAAoC;AACpC,qBAAqB;AACrB,oBAAuB;AAEvB,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,yBAAO,IAAI;AAC1B,QAAM,WAAW,yBAAO,IAAI;AAE5B,8BAAU,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,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,QAAQ,UAAU,SAAS;AAAA,KAC9D,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,OAAO;AAAA,KAC7D,UACD,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAQ,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC1C,GACA,mDAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAEhB,YAAY,8BAAU,KAAK,YAAY,sBAAsB;AAAA,EAE7D,WAAW,8BAAU,KAAK,YAAY,6BAA6B;AAAA,EAEnE,UAAU,8BAAU,QAAQ,YAAY,+BAA+B;AAAA,EAEvE,QAAQ,8BAAU,OAAO,WAAW,YAAY,6BAA6B;AAC/E;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,kCAAS,cAAc;AAExD,yBAAyB,YAAY;",
+  "sourcesContent": ["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\ninterface Props {\n  isFetching: boolean;\n  fetchData: () => void;\n  children: React.ReactNode;\n  height?: number | string;\n}\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height }: Props) => {\n  const [viewportHeight, setViewportHeight] = useState<number | undefined | string>(height);\n  const baselineRef = useRef<HTMLDivElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const callback = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const { isIntersecting } = entries[0];\n      if (isIntersecting && !isFetching) {\n        fetchData();\n        observerRef.current?.disconnect();\n      }\n    },\n    [fetchData, isFetching],\n  );\n\n  useEffect(() => {\n    if (!isFetching) {\n      observerRef.current?.disconnect();\n      observerRef.current = new IntersectionObserver(callback, {\n        root: null,\n        rootMargin: '0px',\n        threshold: 0.1,\n      });\n      if (baselineRef.current) observerRef.current.observe(baselineRef.current);\n    }\n    return () => {\n      observerRef.current?.disconnect();\n    };\n  }, [baselineRef, observerRef, fetchData, callback, isFetching]);\n\n  const handleResize = useCallback(() => {\n    setViewportHeight(window.innerHeight);\n  }, []);\n\n  useEffect(() => {\n    if (!height) {\n      window.addEventListener('resize', handleResize);\n      handleResize();\n    }\n    return () => {\n      if (!height) window.removeEventListener('resize', handleResize);\n    };\n  }, [handleResize, height]);\n\n  return (\n    <Grid style={{ position: 'relative', overflow: 'hidden', height: viewportHeight }}>\n      <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height: viewportHeight }}>\n        {children}\n        <div ref={baselineRef} style={{ height: 1 }} />\n      </Grid>\n      <Loader isOpen={isFetching} />\n    </Grid>\n  );\n};\n\nconst listProps = {\n  isFetching: PropTypes.bool.description('toggle loading state'),\n  fetchData: PropTypes.func.description('callback to fetch new items'),\n  children: PropTypes.element.description('row items for infinite loader'),\n  height: PropTypes.number.description('infinite loader list height'),\n};\n\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\nInfiniteLoaderWithSchema.propTypes = listProps;\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgE;AAChE,0BAAoC;AACpC,qBAAqB;AACrB,oBAAuB;AASvB,MAAM,iBAAiB,CAAC,EAAE,YAAY,WAAW,UAAU,aAAoB;AAC7E,QAAM,CAAC,gBAAgB,qBAAqB,2BAAsC,MAAM;AACxF,QAAM,cAAc,yBAA8B,IAAI;AACtD,QAAM,cAAc,yBAAoC,IAAI;AAE5D,QAAM,WAAW,8BACf,CAAC,YAAyC;AACxC,UAAM,EAAE,mBAAmB,QAAQ;AACnC,QAAI,kBAAkB,CAAC,YAAY;AACjC,gBAAU;AACV,kBAAY,SAAS,WAAW;AAAA,IAClC;AAAA,EACF,GACA,CAAC,WAAW,UAAU,CACxB;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,YAAY;AACf,kBAAY,SAAS,WAAW;AAChC,kBAAY,UAAU,IAAI,qBAAqB,UAAU;AAAA,QACvD,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,WAAW;AAAA,MACb,CAAC;AACD,UAAI,YAAY;AAAS,oBAAY,QAAQ,QAAQ,YAAY,OAAO;AAAA,IAC1E;AACA,WAAO,MAAM;AACX,kBAAY,SAAS,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,WAAW,UAAU,UAAU,CAAC;AAE9D,QAAM,eAAe,8BAAY,MAAM;AACrC,sBAAkB,OAAO,WAAW;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX,aAAO,iBAAiB,UAAU,YAAY;AAC9C,mBAAa;AAAA,IACf;AACA,WAAO,MAAM;AACX,UAAI,CAAC;AAAQ,eAAO,oBAAoB,UAAU,YAAY;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,cAAc,MAAM,CAAC;AAEzB,SACE,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,UAAU,UAAU,QAAQ,eAAe;AAAA,KAC9E,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,QAAQ,eAAe;AAAA,KAC7E,UACD,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAa,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC/C,GACA,mDAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAChB,YAAY,8BAAU,KAAK,YAAY,sBAAsB;AAAA,EAC7D,WAAW,8BAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,UAAU,8BAAU,QAAQ,YAAY,+BAA+B;AAAA,EACvE,QAAQ,8BAAU,OAAO,YAAY,6BAA6B;AACpE;AAEA,MAAM,2BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/cjs/InfiniteLoader/Loader.js

@@ -29,7 +29,7 @@ var import_prop_types = __toESM(require("prop-types"));
 var import_ds_indeterminate_progress_indicator = __toESM(require("@elliemae/ds-indeterminate-progress-indicator"));
 var import_styled = require("./styled");
 const Loader = ({ isOpen }) => /* @__PURE__ */ import_react.default.createElement(import_styled.LoaderBox, {
-  className: isOpen && "opened"
+  className: isOpen ? "opened" : ""
 }, /* @__PURE__ */ import_react.default.createElement(import_ds_indeterminate_progress_indicator.default, {
   processing: true,
   title: "Loading"

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/InfiniteLoader/Loader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/no-unused-state */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport { LoaderBox } from './styled';\n\nexport const Loader = ({ isOpen }) => (\n  <LoaderBox className={isOpen && 'opened'}>\n    <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n  </LoaderBox>\n);\n\nLoader.propTypes = {\n  isOpen: PropTypes.bool,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAsB;AACtB,iDAA6C;AAC7C,oBAA0B;AAEnB,MAAM,SAAS,CAAC,EAAE,aACvB,mDAAC;AAAA,EAAU,WAAW,UAAU;AAAA,GAC9B,mDAAC;AAAA,EAAiC,YAAU;AAAA,EAAC,OAAM;AAAA,CAAU,CAC/D;AAGF,OAAO,YAAY;AAAA,EACjB,QAAQ,0BAAU;AACpB;",
+  "sourcesContent": ["/* eslint-disable react/no-unused-state */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport { LoaderBox } from './styled';\n\ninterface Props {\n  isOpen: boolean;\n}\n\nexport const Loader = ({ isOpen }: Props) => (\n  <LoaderBox className={isOpen ? 'opened' : ''}>\n    <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n  </LoaderBox>\n);\n\nLoader.propTypes = {\n  isOpen: PropTypes.bool,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAsB;AACtB,iDAA6C;AAC7C,oBAA0B;AAMnB,MAAM,SAAS,CAAC,EAAE,aACvB,mDAAC;AAAA,EAAU,WAAW,SAAS,WAAW;AAAA,GACxC,mDAAC;AAAA,EAAiC,YAAU;AAAA,EAAC,OAAM;AAAA,CAAU,CAC/D;AAGF,OAAO,YAAY;AAAA,EACjB,QAAQ,0BAAU;AACpB;",
   "names": []
 }

package/dist/cjs/MobileSeparator/Separator.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/MobileSeparator/Separator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst Separator = styled(Grid)`\n  border-top: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n  border-left: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n`;\n\nconst MobileSeparator = ({ color = ['neutral', '800'], direction = 'horizontal', type = 'solid', margin = 'xs' }) => {\n  const orientation = direction === 'vertical' ? 'height' : 'width';\n  const xORy = direction === 'vertical' ? 'mx' : 'my';\n  const styles = {\n    width: 0,\n    height: 0,\n    [orientation]: '100%',\n    [xORy]: margin,\n    borderType: type,\n    color,\n  };\n  return <Separator {...styles} />;\n};\n\nconst mobileSeparatorProps = {\n  type: PropTypes.oneOf(['solid', 'dashed']).description('Style type of separator').defaultValue('solid'),\n  direction: PropTypes.oneOf(['vertical', 'horizontal'])\n    .description('Direction of the separator')\n    .defaultValue('horizontal'),\n  color: PropTypes.array.description('Color of the separator').defaultValue(['neutral', '800']),\n  margin: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'])\n    .description('Margin of the separator')\n    .defaultValue('xs'),\n};\n\nMobileSeparator.propTypes = mobileSeparatorProps;\nMobileSeparator.displayName = 'MobileSeparator';\nconst MobileSeparatorWithSchema = describe(MobileSeparator);\nMobileSeparatorWithSchema.propTypes = mobileSeparatorProps;\n\nexport { MobileSeparatorWithSchema };\nexport default MobileSeparator;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AAErB,MAAM,YAAY,6BAAO,mBAAI;AAAA,gBACb,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA,iBAC5E,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA;AAG9F,MAAM,kBAAkB,CAAC,EAAE,QAAQ,CAAC,WAAW,KAAK,GAAG,YAAY,cAAc,OAAO,SAAS,SAAS,WAAW;AACnH,QAAM,cAAc,cAAc,aAAa,WAAW;AAC1D,QAAM,OAAO,cAAc,aAAa,OAAO;AAC/C,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,KACP,cAAc;AAAA,KACd,OAAO;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,EACF;AACA,SAAO,mDAAC,8BAAc,OAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,8BAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,8BAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,8BAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,8BAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAC9D,YAAY,yBAAyB,EACrC,aAAa,IAAI;AACtB;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AAErB,MAAM,YAAY,6BAAO,mBAAI;AAAA,gBACb,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA,iBAC5E,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA;AAG9F,MAAM,kBAAkB,CAAC,EAAE,QAAQ,CAAC,WAAW,KAAK,GAAG,YAAY,cAAc,OAAO,SAAS,SAAS,WAAW;AACnH,QAAM,cAAc,cAAc,aAAa,WAAW;AAC1D,QAAM,OAAO,cAAc,aAAa,OAAO;AAC/C,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,CAAC,cAAc;AAAA,IACf,CAAC,OAAO;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,EACF;AACA,SAAO,mDAAC,8BAAc,OAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,8BAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,8BAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,8BAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,8BAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAC9D,YAAY,yBAAyB,EACrC,aAAa,IAAI;AACtB;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
   "names": []
 }

package/dist/esm/CategoryBox/CategoryBox.js

@@ -13,27 +13,28 @@ const Title = styled.h3`
   ${truncate()}
   font-weight: ${(props2) => props2.theme.fontWeights.semibold};
 `;
-const CategoryBox = styled(Grid)`
+const CategoryBox = styled(Grid, {})`
   background: ${(props2) => props2.theme.colors.neutral["0"]};
-  border-top: ${(props2) => props2.borderTop ? `1px solid ${props2.theme.colors.neutral["100"]}` : "none"};
+  border-top: ${(props2) => props2.hasBorderTop ? `1px solid ${props2.theme.colors.neutral["100"]}` : "none"};
 `;
 const DSCategoryBox = ({ borderTop = true, actionsRight = [], title, headerLevel = 3, children }) => {
   const rows = ["auto"];
   const hasActions = actionsRight.length > 0;
   if (hasActions)
     rows.push("auto");
+  const cols = React2.useMemo(() => times(actionsRight.length, () => "auto"), [actionsRight.length]);
   return /* @__PURE__ */ React2.createElement(Grid, {
     rows: ["40px", "auto"]
   }, /* @__PURE__ */ React2.createElement(CategoryBox, {
     cols: rows,
-    borderTop,
+    hasBorderTop: borderTop,
     alignItems: "center",
     pl: "xs",
     pr: actionsRight.length > 0 ? "xxs" : "xs"
   }, /* @__PURE__ */ React2.createElement(Title, {
     as: `h${headerLevel}`
   }, title), hasActions && /* @__PURE__ */ React2.createElement(Grid, {
-    cols: times(actionsRight.length, () => "auto"),
+    cols,
     justifySelf: "end"
   }, actionsRight)), children);
 };

package/dist/esm/CategoryBox/CategoryBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/CategoryBox/CategoryBox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { times } from 'lodash';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { truncate } from '@elliemae/ds-system';\n\nconst Title = styled.h3`\n  font-size: 18px;\n  margin: 0;\n  color: ${(props) => props.theme.colors.neutral['700']};\n  line-height: inherit;\n  ${truncate()}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nconst CategoryBox = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['0']};\n  border-top: ${(props) => (props.borderTop ? `1px solid ${props.theme.colors.neutral['100']}` : 'none')};\n`;\n\nconst DSCategoryBox = ({ borderTop = true, actionsRight = [], title, headerLevel = 3, children }) => {\n  const rows = ['auto'];\n  const hasActions = actionsRight.length > 0;\n  if (hasActions) rows.push('auto');\n\n  return (\n    <Grid rows={['40px', 'auto']}>\n      <CategoryBox\n        cols={rows}\n        borderTop={borderTop}\n        alignItems=\"center\"\n        pl=\"xs\"\n        pr={actionsRight.length > 0 ? 'xxs' : 'xs'}\n      >\n        <Title as={`h${headerLevel}`}>{title}</Title>\n        {hasActions && (\n          <Grid cols={times(actionsRight.length, () => 'auto')} justifySelf=\"end\">\n            {actionsRight}\n          </Grid>\n        )}\n      </CategoryBox>\n      {children}\n    </Grid>\n  );\n};\n\nconst props = {\n  /**\n   * Category Box title\n   */\n  title: PropTypes.string.isRequired.description('Category Box title'),\n  /**\n   * Toggle border top of category box\n   */\n  borderTop: PropTypes.bool.description('Toggle border top of category box'),\n  /**\n   * Array of button icons\n   */\n  actionsRight: PropTypes.arrayOf(PropTypes.element).description('Array of button icons'),\n  /**\n   * semantic level of header tag for the title\n   */\n  headerLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('semantic level of header tag for the title'),\n  /**\n   * In-box children\n   */\n  children: PropTypes.element.description('In-box children'),\n};\n\nDSCategoryBox.propTypes = props;\nDSCategoryBox.displayName = 'DSCategoryBox';\nconst DSCategoryBoxWithSchema = describe(DSCategoryBox);\nDSCategoryBoxWithSchema.propTypes = props;\n\nexport { DSCategoryBox, DSCategoryBoxWithSchema };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA,WAGV,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,IAE7C,SAAS;AAAA,iBACI,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,cAAc,OAAO,IAAI;AAAA,gBACf,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,gBACtC,CAAC,WAAW,OAAM,YAAY,aAAa,OAAM,MAAM,OAAO,QAAQ,WAAW;AAAA;AAGjG,MAAM,gBAAgB,CAAC,EAAE,YAAY,MAAM,eAAe,CAAC,GAAG,OAAO,cAAc,GAAG,eAAe;AACnG,QAAM,OAAO,CAAC,MAAM;AACpB,QAAM,aAAa,aAAa,SAAS;AACzC,MAAI;AAAY,SAAK,KAAK,MAAM;AAEhC,SACE,qCAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,KACzB,qCAAC;AAAA,IACC,MAAM;AAAA,IACN;AAAA,IACA,YAAW;AAAA,IACX,IAAG;AAAA,IACH,IAAI,aAAa,SAAS,IAAI,QAAQ;AAAA,KAEtC,qCAAC;AAAA,IAAM,IAAI,IAAI;AAAA,KAAgB,KAAM,GACpC,cACC,qCAAC;AAAA,IAAK,MAAM,MAAM,aAAa,QAAQ,MAAM,MAAM;AAAA,IAAG,aAAY;AAAA,KAC/D,YACH,CAEJ,GACC,QACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAIZ,OAAO,UAAU,OAAO,WAAW,YAAY,oBAAoB;AAAA,EAInE,WAAW,UAAU,KAAK,YAAY,mCAAmC;AAAA,EAIzE,cAAc,UAAU,QAAQ,UAAU,OAAO,EAAE,YAAY,uBAAuB;AAAA,EAItF,aAAa,UAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,4CAA4C;AAAA,EAIzG,UAAU,UAAU,QAAQ,YAAY,iBAAiB;AAC3D;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { times } from 'lodash';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { truncate } from '@elliemae/ds-system';\n\nconst Title = styled.h3`\n  font-size: 18px;\n  margin: 0;\n  color: ${(props) => props.theme.colors.neutral['700']};\n  line-height: inherit;\n  ${truncate()}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nconst CategoryBox = styled(Grid, {})`\n  background: ${(props) => props.theme.colors.neutral['0']};\n  border-top: ${(props) => (props.hasBorderTop ? `1px solid ${props.theme.colors.neutral['100']}` : 'none')};\n`;\n\nconst DSCategoryBox = ({ borderTop = true, actionsRight = [], title, headerLevel = 3, children }) => {\n  const rows = ['auto'];\n  const hasActions = actionsRight.length > 0;\n  if (hasActions) rows.push('auto');\n\n  const cols = React.useMemo(() => times(actionsRight.length, () => 'auto'), [actionsRight.length]);\n\n  return (\n    <Grid rows={['40px', 'auto']}>\n      <CategoryBox\n        cols={rows}\n        hasBorderTop={borderTop}\n        alignItems=\"center\"\n        pl=\"xs\"\n        pr={actionsRight.length > 0 ? 'xxs' : 'xs'}\n      >\n        <Title as={`h${headerLevel}`}>{title}</Title>\n        {hasActions && (\n          <Grid cols={cols} justifySelf=\"end\">\n            {actionsRight}\n          </Grid>\n        )}\n      </CategoryBox>\n      {children}\n    </Grid>\n  );\n};\n\nconst props = {\n  /**\n   * Category Box title\n   */\n  title: PropTypes.string.isRequired.description('Category Box title'),\n  /**\n   * Toggle border top of category box\n   */\n  borderTop: PropTypes.bool.description('Toggle border top of category box'),\n  /**\n   * Array of button icons\n   */\n  actionsRight: PropTypes.arrayOf(PropTypes.element).description('Array of button icons'),\n  /**\n   * semantic level of header tag for the title\n   */\n  headerLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('semantic level of header tag for the title'),\n  /**\n   * In-box children\n   */\n  children: PropTypes.element.description('In-box children'),\n};\n\nDSCategoryBox.propTypes = props;\nDSCategoryBox.displayName = 'DSCategoryBox';\nconst DSCategoryBoxWithSchema = describe(DSCategoryBox);\nDSCategoryBoxWithSchema.propTypes = props;\n\nexport { DSCategoryBox, DSCategoryBoxWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA,WAGV,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,IAE7C,SAAS;AAAA,iBACI,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,cAAc,OAAO,MAAM,CAAC,CAAC;AAAA,gBACnB,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,gBACtC,CAAC,WAAW,OAAM,eAAe,aAAa,OAAM,MAAM,OAAO,QAAQ,WAAW;AAAA;AAGpG,MAAM,gBAAgB,CAAC,EAAE,YAAY,MAAM,eAAe,CAAC,GAAG,OAAO,cAAc,GAAG,eAAe;AACnG,QAAM,OAAO,CAAC,MAAM;AACpB,QAAM,aAAa,aAAa,SAAS;AACzC,MAAI;AAAY,SAAK,KAAK,MAAM;AAEhC,QAAM,OAAO,OAAM,QAAQ,MAAM,MAAM,aAAa,QAAQ,MAAM,MAAM,GAAG,CAAC,aAAa,MAAM,CAAC;AAEhG,SACE,qCAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,KACzB,qCAAC;AAAA,IACC,MAAM;AAAA,IACN,cAAc;AAAA,IACd,YAAW;AAAA,IACX,IAAG;AAAA,IACH,IAAI,aAAa,SAAS,IAAI,QAAQ;AAAA,KAEtC,qCAAC;AAAA,IAAM,IAAI,IAAI;AAAA,KAAgB,KAAM,GACpC,cACC,qCAAC;AAAA,IAAK;AAAA,IAAY,aAAY;AAAA,KAC3B,YACH,CAEJ,GACC,QACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAIZ,OAAO,UAAU,OAAO,WAAW,YAAY,oBAAoB;AAAA,EAInE,WAAW,UAAU,KAAK,YAAY,mCAAmC;AAAA,EAIzE,cAAc,UAAU,QAAQ,UAAU,OAAO,EAAE,YAAY,uBAAuB;AAAA,EAItF,aAAa,UAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,4CAA4C;AAAA,EAIzG,UAAU,UAAU,QAAQ,YAAY,iBAAiB;AAC3D;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/esm/InfiniteLoader/Infiniteloader.js

@@ -1,42 +1,53 @@
 import * as React from "react";
-import React2, { useEffect, useRef } from "react";
+import React2, { useEffect, useRef, useCallback, useState } from "react";
 import { PropTypes, describe } from "@elliemae/ds-utilities";
 import { Grid } from "@elliemae/ds-grid";
 import { Loader } from "./Loader";
-const InfiniteLoader = ({ isFetching, fetchData, children, height = window.innerHeight }) => {
-  const callback = (entries) => {
+const InfiniteLoader = ({ isFetching, fetchData, children, height }) => {
+  const [viewportHeight, setViewportHeight] = useState(height);
+  const baselineRef = useRef(null);
+  const observerRef = useRef(null);
+  const callback = useCallback((entries) => {
     const { isIntersecting } = entries[0];
     if (isIntersecting && !isFetching) {
       fetchData();
-      observer.current.disconnect();
-      observer.current = void 0;
+      observerRef.current?.disconnect();
     }
-  };
-  const target = useRef(null);
-  const observer = useRef(null);
+  }, [fetchData, isFetching]);
   useEffect(() => {
-    if (observer.current) {
-      observer.current.disconnect();
+    if (!isFetching) {
+      observerRef.current?.disconnect();
+      observerRef.current = new IntersectionObserver(callback, {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.1
+      });
+      if (baselineRef.current)
+        observerRef.current.observe(baselineRef.current);
     }
-    observer.current = new IntersectionObserver(callback, {
-      root: null,
-      rootMargin: "0px",
-      threshold: 0.25
-    });
-    if (target.current) {
-      observer.current.observe(target.current);
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [baselineRef, observerRef, fetchData, callback, isFetching]);
+  const handleResize = useCallback(() => {
+    setViewportHeight(window.innerHeight);
+  }, []);
+  useEffect(() => {
+    if (!height) {
+      window.addEventListener("resize", handleResize);
+      handleResize();
     }
     return () => {
-      observer.current?.unobserve(target.current);
-      observer.current?.disconnect();
+      if (!height)
+        window.removeEventListener("resize", handleResize);
     };
-  }, [target, observer, fetchData]);
+  }, [handleResize, height]);
   return /* @__PURE__ */ React2.createElement(Grid, {
-    style: { position: "relative", height, overflow: "hidden" }
+    style: { position: "relative", overflow: "hidden", height: viewportHeight }
   }, /* @__PURE__ */ React2.createElement(Grid, {
-    style: { overflow: isFetching ? "hidden" : "auto", height }
+    style: { overflow: isFetching ? "hidden" : "auto", height: viewportHeight }
   }, children, /* @__PURE__ */ React2.createElement("div", {
-    ref: target,
+    ref: baselineRef,
     style: { height: 1 }
   })), /* @__PURE__ */ React2.createElement(Loader, {
     isOpen: isFetching
@@ -46,10 +57,8 @@ const listProps = {
   isFetching: PropTypes.bool.description("toggle loading state"),
   fetchData: PropTypes.func.description("callback to fetch new items"),
   children: PropTypes.element.description("row items for infinite loader"),
-  height: PropTypes.number.isRequired.description("infinite loader list height")
+  height: PropTypes.number.description("infinite loader list height")
 };
-InfiniteLoader.propTypes = listProps;
-InfiniteLoader.displayName = "InfiniteLoader";
 const InfiniteLoaderWithSchema = describe(InfiniteLoader);
 InfiniteLoaderWithSchema.propTypes = listProps;
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InfiniteLoader/Infiniteloader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useRef } from 'react';\nimport { PropTypes, describe } from '@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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\ninterface Props {\n  isFetching: boolean;\n  fetchData: () => void;\n  children: React.ReactNode;\n  height?: number | string;\n}\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height }: Props) => {\n  const [viewportHeight, setViewportHeight] = useState<number | undefined | string>(height);\n  const baselineRef = useRef<HTMLDivElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const callback = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const { isIntersecting } = entries[0];\n      if (isIntersecting && !isFetching) {\n        fetchData();\n        observerRef.current?.disconnect();\n      }\n    },\n    [fetchData, isFetching],\n  );\n\n  useEffect(() => {\n    if (!isFetching) {\n      observerRef.current?.disconnect();\n      observerRef.current = new IntersectionObserver(callback, {\n        root: null,\n        rootMargin: '0px',\n        threshold: 0.1,\n      });\n      if (baselineRef.current) observerRef.current.observe(baselineRef.current);\n    }\n    return () => {\n      observerRef.current?.disconnect();\n    };\n  }, [baselineRef, observerRef, fetchData, callback, isFetching]);\n\n  const handleResize = useCallback(() => {\n    setViewportHeight(window.innerHeight);\n  }, []);\n\n  useEffect(() => {\n    if (!height) {\n      window.addEventListener('resize', handleResize);\n      handleResize();\n    }\n    return () => {\n      if (!height) window.removeEventListener('resize', handleResize);\n    };\n  }, [handleResize, height]);\n\n  return (\n    <Grid style={{ position: 'relative', overflow: 'hidden', height: viewportHeight }}>\n      <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height: viewportHeight }}>\n        {children}\n        <div ref={baselineRef} style={{ height: 1 }} />\n      </Grid>\n      <Loader isOpen={isFetching} />\n    </Grid>\n  );\n};\n\nconst listProps = {\n  isFetching: PropTypes.bool.description('toggle loading state'),\n  fetchData: PropTypes.func.description('callback to fetch new items'),\n  children: PropTypes.element.description('row items for infinite loader'),\n  height: PropTypes.number.description('infinite loader list height'),\n};\n\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\nInfiniteLoaderWithSchema.propTypes = listProps;\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AASA,MAAM,iBAAiB,CAAC,EAAE,YAAY,WAAW,UAAU,aAAoB;AAC7E,QAAM,CAAC,gBAAgB,qBAAqB,SAAsC,MAAM;AACxF,QAAM,cAAc,OAA8B,IAAI;AACtD,QAAM,cAAc,OAAoC,IAAI;AAE5D,QAAM,WAAW,YACf,CAAC,YAAyC;AACxC,UAAM,EAAE,mBAAmB,QAAQ;AACnC,QAAI,kBAAkB,CAAC,YAAY;AACjC,gBAAU;AACV,kBAAY,SAAS,WAAW;AAAA,IAClC;AAAA,EACF,GACA,CAAC,WAAW,UAAU,CACxB;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,YAAY;AACf,kBAAY,SAAS,WAAW;AAChC,kBAAY,UAAU,IAAI,qBAAqB,UAAU;AAAA,QACvD,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,WAAW;AAAA,MACb,CAAC;AACD,UAAI,YAAY;AAAS,oBAAY,QAAQ,QAAQ,YAAY,OAAO;AAAA,IAC1E;AACA,WAAO,MAAM;AACX,kBAAY,SAAS,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,WAAW,UAAU,UAAU,CAAC;AAE9D,QAAM,eAAe,YAAY,MAAM;AACrC,sBAAkB,OAAO,WAAW;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX,aAAO,iBAAiB,UAAU,YAAY;AAC9C,mBAAa;AAAA,IACf;AACA,WAAO,MAAM;AACX,UAAI,CAAC;AAAQ,eAAO,oBAAoB,UAAU,YAAY;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,cAAc,MAAM,CAAC;AAEzB,SACE,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,UAAU,UAAU,QAAQ,eAAe;AAAA,KAC9E,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,QAAQ,eAAe;AAAA,KAC7E,UACD,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAa,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC/C,GACA,qCAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAChB,YAAY,UAAU,KAAK,YAAY,sBAAsB;AAAA,EAC7D,WAAW,UAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,UAAU,UAAU,QAAQ,YAAY,+BAA+B;AAAA,EACvE,QAAQ,UAAU,OAAO,YAAY,6BAA6B;AACpE;AAEA,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/InfiniteLoader/Loader.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import DSIndeterminateProgressIndicator from "@elliemae/ds-indeterminate-progress-indicator";
 import { LoaderBox } from "./styled";
 const Loader = ({ isOpen }) => /* @__PURE__ */ React2.createElement(LoaderBox, {
-  className: isOpen && "opened"
+  className: isOpen ? "opened" : ""
 }, /* @__PURE__ */ React2.createElement(DSIndeterminateProgressIndicator, {
   processing: true,
   title: "Loading"

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

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

package/dist/esm/MobileSeparator/Separator.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileSeparator/Separator.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst Separator = styled(Grid)`\n  border-top: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n  border-left: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n`;\n\nconst MobileSeparator = ({ color = ['neutral', '800'], direction = 'horizontal', type = 'solid', margin = 'xs' }) => {\n  const orientation = direction === 'vertical' ? 'height' : 'width';\n  const xORy = direction === 'vertical' ? 'mx' : 'my';\n  const styles = {\n    width: 0,\n    height: 0,\n    [orientation]: '100%',\n    [xORy]: margin,\n    borderType: type,\n    color,\n  };\n  return <Separator {...styles} />;\n};\n\nconst mobileSeparatorProps = {\n  type: PropTypes.oneOf(['solid', 'dashed']).description('Style type of separator').defaultValue('solid'),\n  direction: PropTypes.oneOf(['vertical', 'horizontal'])\n    .description('Direction of the separator')\n    .defaultValue('horizontal'),\n  color: PropTypes.array.description('Color of the separator').defaultValue(['neutral', '800']),\n  margin: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'])\n    .description('Margin of the separator')\n    .defaultValue('xs'),\n};\n\nMobileSeparator.propTypes = mobileSeparatorProps;\nMobileSeparator.displayName = 'MobileSeparator';\nconst MobileSeparatorWithSchema = describe(MobileSeparator);\nMobileSeparatorWithSchema.propTypes = mobileSeparatorProps;\n\nexport { MobileSeparatorWithSchema };\nexport default MobileSeparator;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO,IAAI;AAAA,gBACb,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA,iBAC5E,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA;AAG9F,MAAM,kBAAkB,CAAC,EAAE,QAAQ,CAAC,WAAW,KAAK,GAAG,YAAY,cAAc,OAAO,SAAS,SAAS,WAAW;AACnH,QAAM,cAAc,cAAc,aAAa,WAAW;AAC1D,QAAM,OAAO,cAAc,aAAa,OAAO;AAC/C,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,KACP,cAAc;AAAA,KACd,OAAO;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,EACF;AACA,SAAO,qCAAC,8BAAc,OAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,UAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,UAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,UAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,UAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAC9D,YAAY,yBAAyB,EACrC,aAAa,IAAI;AACtB;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO,IAAI;AAAA,gBACb,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA,iBAC5E,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA;AAG9F,MAAM,kBAAkB,CAAC,EAAE,QAAQ,CAAC,WAAW,KAAK,GAAG,YAAY,cAAc,OAAO,SAAS,SAAS,WAAW;AACnH,QAAM,cAAc,cAAc,aAAa,WAAW;AAC1D,QAAM,OAAO,cAAc,aAAa,OAAO;AAC/C,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,CAAC,cAAc;AAAA,IACf,CAAC,OAAO;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,EACF;AACA,SAAO,qCAAC,8BAAc,OAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,UAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,UAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,UAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,UAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAC9D,YAAY,yBAAyB,EACrC,aAAa,IAAI;AACtB;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-mobile",
-  "version": "3.1.4",
+  "version": "3.1.5-rc.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "files": [
@@ -435,20 +435,20 @@
     "typeSafety": false
   },
   "dependencies": {
-    "@elliemae/ds-accordion": "3.1.4",
-    "@elliemae/ds-backdrop": "3.1.4",
-    "@elliemae/ds-button": "3.1.4",
-    "@elliemae/ds-circular-progress-indicator": "3.1.4",
-    "@elliemae/ds-form": "3.1.4",
-    "@elliemae/ds-grid": "3.1.4",
-    "@elliemae/ds-icon": "3.1.4",
-    "@elliemae/ds-icons": "3.1.4",
-    "@elliemae/ds-indeterminate-progress-indicator": "3.1.4",
-    "@elliemae/ds-shared": "3.1.4",
-    "@elliemae/ds-system": "3.1.4",
-    "@elliemae/ds-tabs": "3.1.4",
-    "@elliemae/ds-truncated-expandable-text": "3.1.4",
-    "@elliemae/ds-utilities": "3.1.4",
+    "@elliemae/ds-accordion": "3.1.5-rc.12",
+    "@elliemae/ds-backdrop": "3.1.5-rc.12",
+    "@elliemae/ds-button": "3.1.5-rc.12",
+    "@elliemae/ds-circular-progress-indicator": "3.1.5-rc.12",
+    "@elliemae/ds-form": "3.1.5-rc.12",
+    "@elliemae/ds-grid": "3.1.5-rc.12",
+    "@elliemae/ds-icon": "3.1.5-rc.12",
+    "@elliemae/ds-icons": "3.1.5-rc.12",
+    "@elliemae/ds-indeterminate-progress-indicator": "3.1.5-rc.12",
+    "@elliemae/ds-shared": "3.1.5-rc.12",
+    "@elliemae/ds-system": "3.1.5-rc.12",
+    "@elliemae/ds-tabs": "3.1.5-rc.12",
+    "@elliemae/ds-truncated-expandable-text": "3.1.5-rc.12",
+    "@elliemae/ds-utilities": "3.1.5-rc.12",
     "polished": "~3.6.7",
     "prop-types": "~15.8.1",
     "react-window": "~1.8.6",