@elliemae/ds-mobile 3.4.3-rc.0 → 3.4.4-next.0

package/dist/esm/PageSearch/PageSearch.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
@@ -9,30 +9,47 @@ const Header = styled(Grid)`
   background: ${(props) => props.theme.colors.brand["600"]};
   padding: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};
 `;
-const DSMobilePageSearch = withTheme(({
-  HeaderContainer = Header,
-  SearchContainer = Header,
-  searchHeader = null,
-  pageTitle = "Search",
-  body = null,
-  theme
-}) => {
-  const rows = [
-    op("*", __UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 0.81),
-    op("*", __UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 1.62),
-    1
-  ];
-  return /* @__PURE__ */ React2.createElement(Grid, {
-    rows,
-    height: "100%"
-  }, /* @__PURE__ */ React2.createElement(Grid, null, /* @__PURE__ */ React2.createElement(HeaderContainer, null, pageTitle)), /* @__PURE__ */ React2.createElement(Grid, null, /* @__PURE__ */ React2.createElement(SearchContainer, null, searchHeader)), /* @__PURE__ */ React2.createElement(Grid, {
-    height: "100%",
-    style: { overflow: "hidden" }
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    height: "100%",
-    style: { overflow: "auto" }
-  }, body)));
-});
+const DSMobilePageSearch = withTheme(
+  ({
+    HeaderContainer = Header,
+    SearchContainer = Header,
+    searchHeader = null,
+    pageTitle = "Search",
+    body = null,
+    theme
+  }) => {
+    const rows = [
+      op("*", __UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 0.81),
+      op("*", __UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 1.62),
+      1
+    ];
+    return /* @__PURE__ */ jsxs(Grid, {
+      rows,
+      height: "100%",
+      children: [
+        /* @__PURE__ */ jsx(Grid, {
+          children: /* @__PURE__ */ jsx(HeaderContainer, {
+            children: pageTitle
+          })
+        }),
+        /* @__PURE__ */ jsx(Grid, {
+          children: /* @__PURE__ */ jsx(SearchContainer, {
+            children: searchHeader
+          })
+        }),
+        /* @__PURE__ */ jsx(Grid, {
+          height: "100%",
+          style: { overflow: "hidden" },
+          children: /* @__PURE__ */ jsx(Grid, {
+            height: "100%",
+            style: { overflow: "auto" },
+            children: body
+          })
+        })
+      ]
+    });
+  }
+);
 DSMobilePageSearch.propTypes = {
   header: PropTypes.element,
   pageTitle: PropTypes.element,

package/dist/esm/PageSearch/PageSearch.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/PageSearch/PageSearch.tsx"],
   "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 { Grid } from '@elliemae/ds-grid';\nimport { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\n\nconst Header = styled(Grid)`\n  height: 100%;\n  background: ${(props) => props.theme.colors.brand['600']};\n  padding: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n`;\n\nconst DSMobilePageSearch = withTheme(\n  ({\n    HeaderContainer = Header,\n    SearchContainer = Header,\n    searchHeader = null,\n    pageTitle = 'Search',\n    body = null,\n    theme,\n  }) => {\n    const rows = [\n      op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 0.81),\n      op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 1.62),\n      1,\n    ];\n    return (\n      <Grid rows={rows} height=\"100%\">\n        <Grid>\n          <HeaderContainer>{pageTitle}</HeaderContainer>\n        </Grid>\n        <Grid>\n          <SearchContainer>{searchHeader}</SearchContainer>\n        </Grid>\n        <Grid height=\"100%\" style={{ overflow: 'hidden' }}>\n          <Grid height=\"100%\" style={{ overflow: 'auto' }}>\n            {body}\n          </Grid>\n        </Grid>\n      </Grid>\n    );\n  },\n);\n\nDSMobilePageSearch.propTypes = {\n  header: PropTypes.element,\n  pageTitle: PropTypes.element,\n  filterBar: PropTypes.element,\n  body: PropTypes.element,\n  footer: PropTypes.element,\n};\n\nconst DSPageSearch = DSMobilePageSearch;\n\nexport { DSPageSearch, DSMobilePageSearch };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,SAAS,OAAO,IAAI;AAAA;AAAA,gBAEV,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,aACvC,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAGtE,MAAM,qBAAqB,UACzB,CAAC;AAAA,EACC,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,MACI;AACJ,QAAM,OAAO;AAAA,IACX,GAAG,KAAK,yBAAyB,MAAM,MAAM,CAAC,GAAG,IAAI;AAAA,IACrD,GAAG,KAAK,yBAAyB,MAAM,MAAM,CAAC,GAAG,IAAI;AAAA,IACrD;AAAA,EACF;AACA,SACE,qCAAC;AAAA,IAAK;AAAA,IAAY,QAAO;AAAA,KACvB,qCAAC,YACC,qCAAC,uBAAiB,SAAU,CAC9B,GACA,qCAAC,YACC,qCAAC,uBAAiB,YAAa,CACjC,GACA,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAO,OAAO,EAAE,UAAU,SAAS;AAAA,KAC9C,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAO,OAAO,EAAE,UAAU,OAAO;AAAA,KAC3C,IACH,CACF,CACF;AAEJ,CACF;AAEA,mBAAmB,YAAY;AAAA,EAC7B,QAAQ,UAAU;AAAA,EAClB,WAAW,UAAU;AAAA,EACrB,WAAW,UAAU;AAAA,EACrB,MAAM,UAAU;AAAA,EAChB,QAAQ,UAAU;AACpB;AAEA,MAAM,eAAe;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,OAAO,eAAe;AACtB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,IAAI,WAAW,gCAAgC;AAExD,MAAM,SAAS,OAAO,IAAI;AAAA;AAAA,gBAEV,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,aACvC,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAGtE,MAAM,qBAAqB;AAAA,EACzB,CAAC;AAAA,IACC,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,OAAO;AAAA,IACP;AAAA,EACF,MAAM;AACJ,UAAM,OAAO;AAAA,MACX,GAAG,KAAK,yBAAyB,MAAM,MAAM,CAAC,GAAG,IAAI;AAAA,MACrD,GAAG,KAAK,yBAAyB,MAAM,MAAM,CAAC,GAAG,IAAI;AAAA,MACrD;AAAA,IACF;AACA,WACE,qBAAC;AAAA,MAAK;AAAA,MAAY,QAAO;AAAA,MACvB;AAAA,4BAAC;AAAA,UACC,8BAAC;AAAA,YAAiB;AAAA,WAAU;AAAA,SAC9B;AAAA,QACA,oBAAC;AAAA,UACC,8BAAC;AAAA,YAAiB;AAAA,WAAa;AAAA,SACjC;AAAA,QACA,oBAAC;AAAA,UAAK,QAAO;AAAA,UAAO,OAAO,EAAE,UAAU,SAAS;AAAA,UAC9C,8BAAC;AAAA,YAAK,QAAO;AAAA,YAAO,OAAO,EAAE,UAAU,OAAO;AAAA,YAC3C;AAAA,WACH;AAAA,SACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,mBAAmB,YAAY;AAAA,EAC7B,QAAQ,UAAU;AAAA,EAClB,WAAW,UAAU;AAAA,EACrB,WAAW,UAAU;AAAA,EACrB,MAAM,UAAU;AAAA,EAChB,QAAQ,UAAU;AACpB;AAEA,MAAM,eAAe;",
   "names": []
 }

package/dist/esm/PageSummary/PageSummary.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
@@ -20,11 +20,32 @@ const PageSummary = ({
   actions = null,
   actionsZIndex = 1,
   bodySecondary = null
-}) => /* @__PURE__ */ React2.createElement(DSFullPageContainer, null, header && /* @__PURE__ */ React2.createElement(Header, {
-  zIndex: headerZIndex
-}, header), /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Grid, null, /* @__PURE__ */ React2.createElement(Body, null, bodyPrimary)), /* @__PURE__ */ React2.createElement(Toolbar, {
-  zIndex: actionsZIndex
-}, actions), /* @__PURE__ */ React2.createElement(BodyWrapper, null, /* @__PURE__ */ React2.createElement(Body, null, bodySecondary))));
+}) => /* @__PURE__ */ jsxs(DSFullPageContainer, {
+  children: [
+    header && /* @__PURE__ */ jsx(Header, {
+      zIndex: headerZIndex,
+      children: header
+    }),
+    /* @__PURE__ */ jsxs(Section, {
+      children: [
+        /* @__PURE__ */ jsx(Grid, {
+          children: /* @__PURE__ */ jsx(Body, {
+            children: bodyPrimary
+          })
+        }),
+        /* @__PURE__ */ jsx(Toolbar, {
+          zIndex: actionsZIndex,
+          children: actions
+        }),
+        /* @__PURE__ */ jsx(BodyWrapper, {
+          children: /* @__PURE__ */ jsx(Body, {
+            children: bodySecondary
+          })
+        })
+      ]
+    })
+  ]
+});
 PageSummary.propTypes = {
   header: PropTypes.element,
   bodyPrimary: PropTypes.element,

package/dist/esm/PageSummary/PageSummary.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/PageSummary/PageSummary.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { op, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer } from '../FullPageContainer';\nimport { Header, Toolbar, BodyWrapper, Section } from './Tags';\n\nconst Body = styled(Grid)`\n  margin: 0 auto;\n  width: 100%;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    ${({ theme }) => `width: ${op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25)};`}\n  }\n`;\n\nconst PageSummary = ({\n  header = null,\n  headerZIndex = 1,\n  bodyPrimary = null,\n  actions = null,\n  actionsZIndex = 1,\n  bodySecondary = null,\n}) => (\n  <DSFullPageContainer>\n    {header && <Header zIndex={headerZIndex}>{header}</Header>}\n    <Section>\n      <Grid>\n        <Body>{bodyPrimary}</Body>\n      </Grid>\n      <Toolbar zIndex={actionsZIndex}>{actions}</Toolbar>\n      <BodyWrapper>\n        <Body>{bodySecondary}</Body>\n      </BodyWrapper>\n    </Section>\n  </DSFullPageContainer>\n);\n\nPageSummary.propTypes = {\n  header: PropTypes.element,\n  bodyPrimary: PropTypes.element,\n  actions: PropTypes.element,\n  bodySecondary: PropTypes.element,\n  headerZIndex: PropTypes.number,\n  actionsZIndex: PropTypes.number,\n};\n\nconst DSPageSummary = PageSummary;\n\nexport { DSPageSummary };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,OAAO,OAAO,IAAI;AAAA;AAAA;AAAA,uBAGD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,MAClD,CAAC,EAAE,YAAY,UAAU,GAAG,KAAK,yBAAyB,MAAM,MAAM,GAAG,GAAG,IAAI;AAAA;AAAA;AAItF,MAAM,cAAc,CAAC;AAAA,EACnB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,MAEhB,qCAAC,2BACE,UAAU,qCAAC;AAAA,EAAO,QAAQ;AAAA,GAAe,MAAO,GACjD,qCAAC,eACC,qCAAC,YACC,qCAAC,YAAM,WAAY,CACrB,GACA,qCAAC;AAAA,EAAQ,QAAQ;AAAA,GAAgB,OAAQ,GACzC,qCAAC,mBACC,qCAAC,YAAM,aAAc,CACvB,CACF,CACF;AAGF,YAAY,YAAY;AAAA,EACtB,QAAQ,UAAU;AAAA,EAClB,aAAa,UAAU;AAAA,EACvB,SAAS,UAAU;AAAA,EACnB,eAAe,UAAU;AAAA,EACzB,cAAc,UAAU;AAAA,EACxB,eAAe,UAAU;AAC3B;AAEA,MAAM,gBAAgB;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,OAAO,eAAe;AACtB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,IAAI,gCAAgC;AAC7C,SAAS,2BAA2B;AACpC,SAAS,QAAQ,SAAS,aAAa,eAAe;AAEtD,MAAM,OAAO,OAAO,IAAI;AAAA;AAAA;AAAA,uBAGD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,MAClD,CAAC,EAAE,MAAM,MAAM,UAAU,GAAG,KAAK,yBAAyB,MAAM,MAAM,GAAG,GAAG,IAAI;AAAA;AAAA;AAItF,MAAM,cAAc,CAAC;AAAA,EACnB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,gBAAgB;AAClB,MACE,qBAAC;AAAA,EACE;AAAA,cAAU,oBAAC;AAAA,MAAO,QAAQ;AAAA,MAAe;AAAA,KAAO;AAAA,IACjD,qBAAC;AAAA,MACC;AAAA,4BAAC;AAAA,UACC,8BAAC;AAAA,YAAM;AAAA,WAAY;AAAA,SACrB;AAAA,QACA,oBAAC;AAAA,UAAQ,QAAQ;AAAA,UAAgB;AAAA,SAAQ;AAAA,QACzC,oBAAC;AAAA,UACC,8BAAC;AAAA,YAAM;AAAA,WAAc;AAAA,SACvB;AAAA;AAAA,KACF;AAAA;AAAA,CACF;AAGF,YAAY,YAAY;AAAA,EACtB,QAAQ,UAAU;AAAA,EAClB,aAAa,UAAU;AAAA,EACvB,SAAS,UAAU;AAAA,EACnB,eAAe,UAAU;AAAA,EACzB,cAAc,UAAU;AAAA,EACxB,eAAe,UAAU;AAC3B;AAEA,MAAM,gBAAgB;",
   "names": []
 }

package/dist/esm/PageSummary/Tags.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/PageSummary/Tags.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const Header = styled.div`\n  position: fixed;\n  display: grid;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 64px;\n  z-index: ${({ zIndex }) => zIndex};\n`;\nexport const Toolbar = styled.div`\n  position: sticky;\n  left: 0;\n  top: 64px;\n  background: ${(props) => props.theme.colors.neutral['000']};\n  z-index: ${({ zIndex }) => zIndex};\n`;\nexport const BodyWrapper = styled.div`\n  position: relative;\n  display: grid;\n  top: 0;\n  left: 0;\n  height: 100%;\n`;\n\nexport const Section = styled.div`\n  position: relative;\n  top: 64px;\n  height: 100%;\n`;\n"],
-  "mappings": "AAAA;ACAA;AAEO,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOhB,CAAC,EAAE,aAAa;AAAA;AAEtB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA,gBAId,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,EAAE,aAAa;AAAA;AAEtB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOhB,CAAC,EAAE,OAAO,MAAM;AAAA;AAEtB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA,gBAId,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,EAAE,OAAO,MAAM;AAAA;AAEtB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/SideNav/SideNav.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { DSBackdrop } from "@elliemae/ds-backdrop";
 import { Close } from "@elliemae/ds-icons";
 import { DSIconSizes, DSIconColors } from "@elliemae/ds-icon";
@@ -15,45 +16,97 @@ const DSSideNav = ({ containerProps = {}, title, onClose = noop, menuItems = [],
     }
     setSelectedMenuItem(idx);
   };
-  const renderMenuList = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, menuItems.length > 0 ? /* @__PURE__ */ React2.createElement(MenuList, null, menuItems.map(({ icon, text, onClick }, idx) => /* @__PURE__ */ React2.createElement("div", {
-    key: idx,
-    className: "menuitem",
-    onClick: menuItemClick.bind(null, idx, text, onClick)
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: "icon"
-  }, icon), /* @__PURE__ */ React2.createElement("div", {
-    className: `text ${idx === selectedMenuItemIdx ? "active" : ""}`
-  }, text)))) : null);
-  const renderBottomMenu = () => /* @__PURE__ */ React2.createElement(MenuList, null, bottomMenuItems.map(({ icon, text, onClick }, idx) => /* @__PURE__ */ React2.createElement("div", {
-    key: idx,
-    className: "menuitem",
-    onClick: () => onClick(idx, text)
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: "icon"
-  }, icon), /* @__PURE__ */ React2.createElement("div", {
-    className: "text"
-  }, text))));
-  return /* @__PURE__ */ React2.createElement(Container, {
-    "data-testid": containerProps["data-testid"] || "global-header-menu"
-  }, /* @__PURE__ */ React2.createElement(DSBackdrop, {
-    onClick: onClose,
-    type: "cover"
-  }), /* @__PURE__ */ React2.createElement(Menu, null, /* @__PURE__ */ React2.createElement(MenuWrapper, null, /* @__PURE__ */ React2.createElement(Heading, null, /* @__PURE__ */ React2.createElement(Icon, null, Logo()), /* @__PURE__ */ React2.createElement("div", {
-    className: "content"
-  }, /* @__PURE__ */ React2.createElement("label", null, title), /* @__PURE__ */ React2.createElement("span", null), /* @__PURE__ */ React2.createElement("div", {
-    className: "icon"
-  }, /* @__PURE__ */ React2.createElement(Close, {
-    onClick: onClose,
-    size: DSIconSizes.S,
-    color: DSIconColors.WHITE
-  })))), /* @__PURE__ */ React2.createElement(Hr, null), renderMenuList(), bottomMenuItems.length > 0 ? /* @__PURE__ */ React2.createElement(BottomMenu, null, /* @__PURE__ */ React2.createElement("div", {
-    className: "content"
-  }, /* @__PURE__ */ React2.createElement("hr", null), renderBottomMenu())) : null)));
+  const renderMenuList = () => /* @__PURE__ */ jsx(Fragment, {
+    children: menuItems.length > 0 ? /* @__PURE__ */ jsx(MenuList, {
+      children: menuItems.map(({ icon, text, onClick }, idx) => /* @__PURE__ */ jsxs("div", {
+        className: "menuitem",
+        onClick: menuItemClick.bind(null, idx, text, onClick),
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: "icon",
+            children: icon
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: `text ${idx === selectedMenuItemIdx ? "active" : ""}`,
+            children: text
+          })
+        ]
+      }, idx))
+    }) : null
+  });
+  const renderBottomMenu = () => /* @__PURE__ */ jsx(MenuList, {
+    children: bottomMenuItems.map(({ icon, text, onClick }, idx) => /* @__PURE__ */ jsxs("div", {
+      className: "menuitem",
+      onClick: () => onClick(idx, text),
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          className: "icon",
+          children: icon
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "text",
+          children: text
+        })
+      ]
+    }, idx))
+  });
+  return /* @__PURE__ */ jsxs(Container, {
+    "data-testid": containerProps["data-testid"] || "global-header-menu",
+    children: [
+      /* @__PURE__ */ jsx(DSBackdrop, {
+        onClick: onClose,
+        type: "cover"
+      }),
+      /* @__PURE__ */ jsx(Menu, {
+        children: /* @__PURE__ */ jsxs(MenuWrapper, {
+          children: [
+            /* @__PURE__ */ jsxs(Heading, {
+              children: [
+                /* @__PURE__ */ jsx(Icon, {
+                  children: Logo()
+                }),
+                /* @__PURE__ */ jsxs("div", {
+                  className: "content",
+                  children: [
+                    /* @__PURE__ */ jsx("label", {
+                      children: title
+                    }),
+                    /* @__PURE__ */ jsx("span", {}),
+                    /* @__PURE__ */ jsx("div", {
+                      className: "icon",
+                      children: /* @__PURE__ */ jsx(Close, {
+                        onClick: onClose,
+                        size: DSIconSizes.S,
+                        color: DSIconColors.WHITE
+                      })
+                    })
+                  ]
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx(Hr, {}),
+            renderMenuList(),
+            bottomMenuItems.length > 0 ? /* @__PURE__ */ jsx(BottomMenu, {
+              children: /* @__PURE__ */ jsxs("div", {
+                className: "content",
+                children: [
+                  /* @__PURE__ */ jsx("hr", {}),
+                  renderBottomMenu()
+                ]
+              })
+            }) : null
+          ]
+        })
+      })
+    ]
+  });
 };
-const menuProps = PropTypes.arrayOf(PropTypes.shape({
-  icon: PropTypes.element,
-  text: PropTypes.string
-}));
+const menuProps = PropTypes.arrayOf(
+  PropTypes.shape({
+    icon: PropTypes.element,
+    text: PropTypes.string
+  })
+);
 const navProps = {
   containerProps: PropTypes.object.description("inject props to wrapper element of side nav"),
   title: PropTypes.string.isRequired.description("Heading Title"),

package/dist/esm/SideNav/SideNav.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/SideNav/SideNav.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useState } from 'react';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { Close } from '@elliemae/ds-icons';\nimport { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { noop } from 'lodash';\nimport Logo from '../Icons/EM_logo';\nimport { Container, Menu, Heading, Icon, Hr, MenuList, BottomMenu, MenuWrapper } from './styles';\n\nconst DSSideNav = ({ containerProps = {}, title, onClose = noop, menuItems = [], bottomMenuItems = [] }) => {\n  const [selectedMenuItemIdx, setSelectedMenuItem] = useState(-1);\n\n  const menuItemClick = (idx, text, cb) => {\n    if (cb) {\n      cb(idx, text);\n    }\n    setSelectedMenuItem(idx);\n  };\n\n  const renderMenuList = () => (\n    <>\n      {menuItems.length > 0 ? (\n        <MenuList>\n          {menuItems.map(({ icon, text, onClick }, idx) => (\n            <div key={idx} className=\"menuitem\" onClick={menuItemClick.bind(null, idx, text, onClick)}>\n              <div className=\"icon\">{icon}</div>\n              <div className={`text ${idx === selectedMenuItemIdx ? 'active' : ''}`}>{text}</div>\n            </div>\n          ))}\n        </MenuList>\n      ) : null}\n    </>\n  );\n\n  const renderBottomMenu = () => (\n    <MenuList>\n      {bottomMenuItems.map(({ icon, text, onClick }, idx) => (\n        <div key={idx} className=\"menuitem\" onClick={() => onClick(idx, text)}>\n          <div className=\"icon\">{icon}</div>\n          <div className=\"text\">{text}</div>\n        </div>\n      ))}\n    </MenuList>\n  );\n\n  return (\n    <Container data-testid={containerProps['data-testid'] || 'global-header-menu'}>\n      <DSBackdrop onClick={onClose} type=\"cover\"></DSBackdrop>\n\n      <Menu>\n        <MenuWrapper>\n          <Heading>\n            <Icon>{Logo()}</Icon>\n            <div className=\"content\">\n              <label>{title}</label>\n              <span></span>\n              <div className=\"icon\">\n                <Close onClick={onClose} size={DSIconSizes.S} color={DSIconColors.WHITE} />\n              </div>\n            </div>\n          </Heading>\n          <Hr></Hr>\n          {renderMenuList()}\n          {bottomMenuItems.length > 0 ? (\n            <BottomMenu>\n              <div className=\"content\">\n                <hr></hr>\n                {renderBottomMenu()}\n              </div>\n            </BottomMenu>\n          ) : null}\n        </MenuWrapper>\n      </Menu>\n    </Container>\n  );\n};\n\nconst menuProps = PropTypes.arrayOf(\n  PropTypes.shape({\n    icon: PropTypes.element,\n    text: PropTypes.string,\n  }),\n);\n\nconst navProps = {\n  /** inject props to wrapper element of side nav */\n  containerProps: PropTypes.object.description('inject props to wrapper element of side nav'),\n  /**\n   * Heading Title\n   */\n  title: PropTypes.string.isRequired.description('Heading Title'),\n  /**\n   * Callback function when close is menu is triggered\n   */\n  onClose: PropTypes.func.description('Callback function when close is menu is triggered'),\n  /**\n   * Top Menu items array\n   */\n  menuItems: menuProps.description('Top Menu items array'),\n  /**\n   * Bottom Menu items array\n   */\n  bottomMenuItems: menuProps.description('Bottom Menu items array'),\n};\n\nDSSideNav.propTypes = navProps;\nDSSideNav.displayName = 'DSSideNav';\nconst DSSideNavWithSchema = describe(DSSideNav).description('Side navigation for mobile and tablet');\n\nDSSideNavWithSchema.propTypes = navProps;\n\nexport { DSSideNav, DSSideNavWithSchema };\n"],
-  "mappings": "AAAA;ACKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,OAAO,UAAU,MAAM,YAAY,CAAC,GAAG,kBAAkB,CAAC,QAAQ;AAC1G,QAAM,CAAC,qBAAqB,uBAAuB,SAAS,EAAE;AAE9D,QAAM,gBAAgB,CAAC,KAAK,MAAM,OAAO;AACvC,QAAI,IAAI;AACN,SAAG,KAAK,IAAI;AAAA,IACd;AACA,wBAAoB,GAAG;AAAA,EACzB;AAEA,QAAM,iBAAiB,MACrB,4DACG,UAAU,SAAS,IAClB,qCAAC,gBACE,UAAU,IAAI,CAAC,EAAE,MAAM,MAAM,WAAW,QACvC,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAK,WAAU;AAAA,IAAW,SAAS,cAAc,KAAK,MAAM,KAAK,MAAM,OAAO;AAAA,KACtF,qCAAC;AAAA,IAAI,WAAU;AAAA,KAAQ,IAAK,GAC5B,qCAAC;AAAA,IAAI,WAAW,QAAQ,QAAQ,sBAAsB,WAAW;AAAA,KAAO,IAAK,CAC/E,CACD,CACH,IACE,IACN;AAGF,QAAM,mBAAmB,MACvB,qCAAC,gBACE,gBAAgB,IAAI,CAAC,EAAE,MAAM,MAAM,WAAW,QAC7C,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAK,WAAU;AAAA,IAAW,SAAS,MAAM,QAAQ,KAAK,IAAI;AAAA,KAClE,qCAAC;AAAA,IAAI,WAAU;AAAA,KAAQ,IAAK,GAC5B,qCAAC;AAAA,IAAI,WAAU;AAAA,KAAQ,IAAK,CAC9B,CACD,CACH;AAGF,SACE,qCAAC;AAAA,IAAU,eAAa,eAAe,kBAAkB;AAAA,KACvD,qCAAC;AAAA,IAAW,SAAS;AAAA,IAAS,MAAK;AAAA,GAAQ,GAE3C,qCAAC,YACC,qCAAC,mBACC,qCAAC,eACC,qCAAC,YAAM,KAAK,CAAE,GACd,qCAAC;AAAA,IAAI,WAAU;AAAA,KACb,qCAAC,eAAO,KAAM,GACd,qCAAC,YAAK,GACN,qCAAC;AAAA,IAAI,WAAU;AAAA,KACb,qCAAC;AAAA,IAAM,SAAS;AAAA,IAAS,MAAM,YAAY;AAAA,IAAG,OAAO,aAAa;AAAA,GAAO,CAC3E,CACF,CACF,GACA,qCAAC,QAAG,GACH,eAAe,GACf,gBAAgB,SAAS,IACxB,qCAAC,kBACC,qCAAC;AAAA,IAAI,WAAU;AAAA,KACb,qCAAC,UAAG,GACH,iBAAiB,CACpB,CACF,IACE,IACN,CACF,CACF;AAEJ;AAEA,MAAM,YAAY,UAAU,QAC1B,UAAU,MAAM;AAAA,EACd,MAAM,UAAU;AAAA,EAChB,MAAM,UAAU;AAClB,CAAC,CACH;AAEA,MAAM,WAAW;AAAA,EAEf,gBAAgB,UAAU,OAAO,YAAY,6CAA6C;AAAA,EAI1F,OAAO,UAAU,OAAO,WAAW,YAAY,eAAe;AAAA,EAI9D,SAAS,UAAU,KAAK,YAAY,mDAAmD;AAAA,EAIvF,WAAW,UAAU,YAAY,sBAAsB;AAAA,EAIvD,iBAAiB,UAAU,YAAY,yBAAyB;AAClE;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,uCAAuC;AAEnG,oBAAoB,YAAY;",
+  "mappings": "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",
   "names": []
 }

package/dist/esm/SideNav/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/SideNav/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSSideNav, DSSideNavWithSchema } from './SideNav';\n"],
-  "mappings": "AAAA;ACAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,2BAA2B;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/SideNav/styles.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const Container = styled.div`\n  position: fixed;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const MenuWrapper = styled.div`\n  position: relative;\n  height: 100%;\n`;\n\nexport const Menu = styled.div`\n  position: fixed;\n  width: 80%;\n  height: 100%;\n  background-color: ${(props) => props.theme.colors.brand[700]};\n  font-family: ${(props) => props.theme.fonts.default};\n  box-shadow: 5px 0 5px ${(props) => props.theme.colors.neutral[600]};\n  padding: ${(props) => props.theme.space.xs};\n`;\n\nexport const Heading = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  .content {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    span {\n      flex-grow: 1;\n    }\n    label {\n      padding-top: 1px;\n      line-height:30px;\n      font-weight: ${(props) => props.theme.fontWeights.semibold};\n      font-size: 22px;\n      color: ${(props) => props.theme.colors.neutral['000']};\n    }\n    .icon {\n      cursor: pointer;\n      padding-top: 6px;\n    }\n  }\n`;\n\nexport const Icon = styled.div`\n  margin-right: ${(props) => props.theme.space.xxs2};\n`;\n\nexport const Hr = styled.hr`\n  margin-left: -${(props) => props.theme.space.xs};\n  margin-right: -${(props) => props.theme.space.xs};\n`;\nexport const MenuList = styled.div`\n  .menuitem {\n    display: flex;\n    flex-direction: row;\n    cursor: pointer;\n    height:22px;\n    margin-bottom: ${(props) => props.theme.space.xs};\n    .icon {\n      padding-left: 6px;\n      margin-right: ${(props) => props.theme.space.xs};\n      span{\n        height:20px;\n        width:20px;\n        svg{\n          height:20px;\n          width:20px;\n        }\n      }\n    }\n    .text {\n      font-weight: ${(props) => props.theme.fontWeights.regular};\n      font-size: 18px;\n      line-height:22px;\n      color: ${(props) => props.theme.colors.neutral['000']};\n      &.active {\n        font-weight: ${(props) => props.theme.fontWeights.semibold};\n      }\n    }\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n`;\n\nexport const BottomMenu = styled.div`\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n`;\n"],
-  "mappings": "AAAA;ACAA;AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAK3B,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIL,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,iBACzC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,0BACpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACnD,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGnC,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAcT,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,eAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9C,MAAM,OAAO,OAAO;AAAA,kBACT,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGxC,MAAM,KAAK,OAAO;AAAA,kBACP,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAEzC,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMV,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,sBAG5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAW9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA,eAGzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,uBAE9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnD,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAK3B,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIL,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,iBACzC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,0BACpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACnD,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGnC,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAcT,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,eAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9C,MAAM,OAAO,OAAO;AAAA,kBACT,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGxC,MAAM,KAAK,OAAO;AAAA,kBACP,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAEzC,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMV,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,sBAG5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAW9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA,eAGzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,uBAE9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnD,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/SwipeToRefresh/ProgressIndicator.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useTheme } from "@elliemae/ds-system";
 import PropTypes from "prop-types";
 import { Grid } from "@elliemae/ds-grid";
@@ -9,34 +9,39 @@ const ProgressIndicator = ({ progress = 0 }) => {
   const factor = progress / 100;
   const theme = useTheme();
   const dashoffset = cir * (1 - factor);
-  return /* @__PURE__ */ React2.createElement(Grid, {
+  return /* @__PURE__ */ jsx(Grid, {
     height: theme.space.s,
     width: theme.space.s,
     justifyContent: "center",
-    alignItems: "center"
-  }, /* @__PURE__ */ React2.createElement("svg", {
-    width: "23",
-    height: "23",
-    viewBox: "0 0 120 120",
-    transform: "rotate(-90)"
-  }, /* @__PURE__ */ React2.createElement("circle", {
-    cx: "60",
-    cy: "60",
-    r: "54",
-    fill: "none",
-    strokeWidth: "12",
-    stroke: `${theme.colors.neutral[100]}`
-  }), /* @__PURE__ */ React2.createElement("circle", {
-    cx: "60",
-    cy: "60",
-    r: "54",
-    strokeWidth: "12",
-    fill: "none",
-    strokeDasharray: `${cir}px`,
-    strokeDashoffset: `${dashoffset}px`,
-    stroke: `${theme.colors.brand[600]}`,
-    strokeLinecap: "round"
-  })));
+    alignItems: "center",
+    children: /* @__PURE__ */ jsxs("svg", {
+      width: "23",
+      height: "23",
+      viewBox: "0 0 120 120",
+      transform: "rotate(-90)",
+      children: [
+        /* @__PURE__ */ jsx("circle", {
+          cx: "60",
+          cy: "60",
+          r: "54",
+          fill: "none",
+          strokeWidth: "12",
+          stroke: `${theme.colors.neutral[100]}`
+        }),
+        /* @__PURE__ */ jsx("circle", {
+          cx: "60",
+          cy: "60",
+          r: "54",
+          strokeWidth: "12",
+          fill: "none",
+          strokeDasharray: `${cir}px`,
+          strokeDashoffset: `${dashoffset}px`,
+          stroke: `${theme.colors.brand[600]}`,
+          strokeLinecap: "round"
+        })
+      ]
+    })
+  });
 };
 ProgressIndicator.propTypes = {
   progress: PropTypes.number

package/dist/esm/SwipeToRefresh/ProgressIndicator.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/SwipeToRefresh/ProgressIndicator.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useTheme } from '@elliemae/ds-system';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst rad = 54;\nconst cir = 2 * Math.PI * rad;\nexport const ProgressIndicator = ({ progress = 0 }) => {\n  const factor = progress / 100;\n  const theme = useTheme();\n  const dashoffset = cir * (1 - factor);\n  return (\n    <Grid height={theme.space.s} width={theme.space.s} justifyContent=\"center\" alignItems=\"center\">\n      <svg width=\"23\" height=\"23\" viewBox=\"0 0 120 120\" transform=\"rotate(-90)\">\n        <circle cx=\"60\" cy=\"60\" r=\"54\" fill=\"none\" strokeWidth=\"12\" stroke={`${theme.colors.neutral[100]}`} />\n        <circle\n          cx=\"60\"\n          cy=\"60\"\n          r=\"54\"\n          strokeWidth=\"12\"\n          fill=\"none\"\n          strokeDasharray={`${cir}px`}\n          strokeDashoffset={`${dashoffset}px`}\n          stroke={`${theme.colors.brand[600]}`}\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    </Grid>\n  );\n};\n\nProgressIndicator.propTypes = {\n  progress: PropTypes.number,\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,MAAM;AACZ,MAAM,MAAM,IAAI,KAAK,KAAK;AACnB,MAAM,oBAAoB,CAAC,EAAE,WAAW,QAAQ;AACrD,QAAM,SAAS,WAAW;AAC1B,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,MAAO,KAAI;AAC9B,SACE,qCAAC;AAAA,IAAK,QAAQ,MAAM,MAAM;AAAA,IAAG,OAAO,MAAM,MAAM;AAAA,IAAG,gBAAe;AAAA,IAAS,YAAW;AAAA,KACpF,qCAAC;AAAA,IAAI,OAAM;AAAA,IAAK,QAAO;AAAA,IAAK,SAAQ;AAAA,IAAc,WAAU;AAAA,KAC1D,qCAAC;AAAA,IAAO,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,GAAE;AAAA,IAAK,MAAK;AAAA,IAAO,aAAY;AAAA,IAAK,QAAQ,GAAG,MAAM,OAAO,QAAQ;AAAA,GAAQ,GACpG,qCAAC;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,GAAE;AAAA,IACF,aAAY;AAAA,IACZ,MAAK;AAAA,IACL,iBAAiB,GAAG;AAAA,IACpB,kBAAkB,GAAG;AAAA,IACrB,QAAQ,GAAG,MAAM,OAAO,MAAM;AAAA,IAC9B,eAAc;AAAA,GAChB,CACF,CACF;AAEJ;AAEA,kBAAkB,YAAY;AAAA,EAC5B,UAAU,UAAU;AACtB;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,gBAAgB;AACzB,OAAO,eAAe;AACtB,SAAS,YAAY;AAErB,MAAM,MAAM;AACZ,MAAM,MAAM,IAAI,KAAK,KAAK;AACnB,MAAM,oBAAoB,CAAC,EAAE,WAAW,EAAE,MAAM;AACrD,QAAM,SAAS,WAAW;AAC1B,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,OAAO,IAAI;AAC9B,SACE,oBAAC;AAAA,IAAK,QAAQ,MAAM,MAAM;AAAA,IAAG,OAAO,MAAM,MAAM;AAAA,IAAG,gBAAe;AAAA,IAAS,YAAW;AAAA,IACpF,+BAAC;AAAA,MAAI,OAAM;AAAA,MAAK,QAAO;AAAA,MAAK,SAAQ;AAAA,MAAc,WAAU;AAAA,MAC1D;AAAA,4BAAC;AAAA,UAAO,IAAG;AAAA,UAAK,IAAG;AAAA,UAAK,GAAE;AAAA,UAAK,MAAK;AAAA,UAAO,aAAY;AAAA,UAAK,QAAQ,GAAG,MAAM,OAAO,QAAQ;AAAA,SAAQ;AAAA,QACpG,oBAAC;AAAA,UACC,IAAG;AAAA,UACH,IAAG;AAAA,UACH,GAAE;AAAA,UACF,aAAY;AAAA,UACZ,MAAK;AAAA,UACL,iBAAiB,GAAG;AAAA,UACpB,kBAAkB,GAAG;AAAA,UACrB,QAAQ,GAAG,MAAM,OAAO,MAAM;AAAA,UAC9B,eAAc;AAAA,SAChB;AAAA;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,kBAAkB,YAAY;AAAA,EAC5B,UAAU,UAAU;AACtB;",
   "names": []
 }