@elliemae/ds-mobile 3.0.0-next.1 → 3.0.0-next.5

package/dist/cjs/MobileFooter/Action.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MobileFooter/Action.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { typography } from '@xstyled/styled-components';\nimport { color, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe, PropTypes } from 'react-desc';\n\nconst Label = styled.span`\n  ${typography}\n  ${color('neutral', '800')}\n  padding-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  padding-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} / 2);\n`;\n\nconst DSMobileFooterAction = ({ label, icon, onClick }) => (\n  <Grid\n    data-testid=\"ds-mobile-footer-action\"\n    rows={['auto'].concat(label ? 'min-content' : 'none')}\n    justifyContent=\"center\"\n    role=\"button\"\n    onClick={onClick}\n  >\n    <Grid justifyContent=\"center\" alignItems=\"center\">\n      {React.cloneElement(icon, {\n        'data-testid': 'ds-mobile-footer-action-icon',\n        size: !label ? 'l' : 'm',\n      })}\n    </Grid>\n\n    {label && (\n      <Grid justifyContent=\"center\">\n        <Label fontSize=\"11px\">{label}</Label>\n      </Grid>\n    )}\n  </Grid>\n);\n\nconst actionProps = {\n  /** Action label */\n  label: PropTypes.string.description('Action label'),\n  /** Action icon */\n  icon: PropTypes.element.description('Action icon'),\n  /** onClick callback */\n  onClick: PropTypes.func.description('onClick callback'),\n};\n\nDSMobileFooterAction.propTypes = actionProps;\n\nconst DSMobileFooterActionWithSchema = describe(DSMobileFooterAction).description('Mobile footer action');\nDSMobileFooterActionWithSchema.propTypes = actionProps;\n\nexport { DSMobileFooterAction, DSMobileFooterActionWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,+BAAmB;AACnB,gCAA2B;AAC3B,uBAAgD;AAChD,qBAAqB;AACrB,wBAAoC;AAEpC,MAAM,QAAQ,iCAAO;AAAA,IACjB;AAAA,IACA,4BAAM,WAAW;AAAA,oBACD,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM;AAAA,sBACpD,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM;AAAA;AAG5E,MAAM,uBAAuB,CAAC,EAAE,OAAO,MAAM,cAC3C,mDAAC,qBAAD;AAAA,EACE,eAAY;AAAA,EACZ,MAAM,CAAC,QAAQ,OAAO,QAAQ,gBAAgB;AAAA,EAC9C,gBAAe;AAAA,EACf,MAAK;AAAA,EACL;AAAA,GAEA,mDAAC,qBAAD;AAAA,EAAM,gBAAe;AAAA,EAAS,YAAW;AAAA,GACtC,qBAAM,aAAa,MAAM;AAAA,EACxB,eAAe;AAAA,EACf,MAAM,CAAC,QAAQ,MAAM;AAAA,KAIxB,SACC,mDAAC,qBAAD;AAAA,EAAM,gBAAe;AAAA,GACnB,mDAAC,OAAD;AAAA,EAAO,UAAS;AAAA,GAAQ;AAMhC,MAAM,cAAc;AAAA,EAElB,OAAO,4BAAU,OAAO,YAAY;AAAA,EAEpC,MAAM,4BAAU,QAAQ,YAAY;AAAA,EAEpC,SAAS,4BAAU,KAAK,YAAY;AAAA;AAGtC,qBAAqB,YAAY;AAEjC,MAAM,iCAAiC,gCAAS,sBAAsB,YAAY;AAClF,+BAA+B,YAAY;",
+  "names": []
+}

package/dist/cjs/MobileFooter/Footer.js

@@ -0,0 +1,72 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var Footer_exports = {};
+__export(Footer_exports, {
+  MobileFooterWithSchema: () => MobileFooterWithSchema,
+  default: () => Footer_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_button = __toESM(require("@elliemae/ds-button"));
+var import_react_desc = require("react-desc");
+var import_Text = require("./Text");
+const FooterWrap = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  background-color: ${(props) => props.theme.colors.neutral["000"]};
+  border-top: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral[100])};
+  height: ${(props) => `calc(${(0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xs)} * 7)`};
+`;
+const MobileFooter = ({ children }) => {
+  const childArr = import_react.default.Children.toArray(children);
+  const isButtonType = childArr[0].type === import_Text.DSMobileFooterText || childArr[0].type === import_ds_button.default;
+  const setCols = () => {
+    if (isButtonType) {
+      return childArr.length === 1 ? ["90%"] : ["45%", "45%"];
+    }
+    return childArr.map(() => `${100 / childArr.length}%`);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(FooterWrap, null, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    cols: setCols(),
+    gutter: isButtonType ? "xs" : void 0,
+    justifyContent: "center",
+    alignItems: isButtonType ? "center" : void 0
+  }, childArr.map((c, i) => /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    key: i
+  }, c))));
+};
+const footerProps = {
+  children: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.element, import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.element)]).isRequired.description("Instance of DSButton, DSMobileFooterText or DSMobileFooterAction")
+};
+MobileFooter.propTypes = footerProps;
+const MobileFooterWithSchema = (0, import_react_desc.describe)(MobileFooter);
+MobileFooterWithSchema.propTypes = footerProps;
+var Footer_default = MobileFooter;
+module.exports = __toCommonJS(Footer_exports);
+//# sourceMappingURL=Footer.js.map

package/dist/cjs/MobileFooter/Footer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MobileFooter/Footer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { border, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport DSButton from '@elliemae/ds-button';\nimport { describe, PropTypes } from 'react-desc';\nimport { DSMobileFooterText } from './Text';\n\nconst FooterWrap = styled(Grid)`\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n  border-top: ${(props) => border(props.theme.colors.neutral[100])};\n  height: ${(props) => `calc(${__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)} * 7)`};\n`;\n\nconst MobileFooter = ({ children }) => {\n  const childArr = React.Children.toArray(children);\n  const isButtonType = childArr[0].type === DSMobileFooterText || childArr[0].type === DSButton;\n  const setCols = () => {\n    if (isButtonType) {\n      return childArr.length === 1 ? ['90%'] : ['45%', '45%'];\n    }\n    return childArr.map(() => `${100 / childArr.length}%`);\n  };\n  return (\n    <FooterWrap>\n      <Grid\n        cols={setCols()}\n        gutter={isButtonType ? 'xs' : undefined}\n        justifyContent=\"center\"\n        alignItems={isButtonType ? 'center' : undefined}\n      >\n        {childArr.map((c, i) => (\n          // eslint-disable-next-line react/no-array-index-key\n          <Grid key={i}>{c}</Grid>\n        ))}\n      </Grid>\n    </FooterWrap>\n  );\n};\n\nconst footerProps = {\n  /**\n   * Instance of DSButton, DSMobileFooterText or DSMobileFooterAction\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description(\n    'Instance of DSButton, DSMobileFooterText or DSMobileFooterAction',\n  ),\n};\n\nMobileFooter.propTypes = footerProps;\n\nconst MobileFooterWithSchema = describe(MobileFooter);\nMobileFooterWithSchema.propTypes = footerProps;\n\nexport default MobileFooter;\n\nexport { MobileFooterWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,+BAAmB;AACnB,uBAAiD;AACjD,qBAAqB;AACrB,uBAAqB;AACrB,wBAAoC;AACpC,kBAAmC;AAEnC,MAAM,aAAa,sCAAO;AAAA,sBACJ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBAC5C,CAAC,UAAU,6BAAO,MAAM,MAAM,OAAO,QAAQ;AAAA,YACjD,CAAC,UAAU,QAAQ,+CAAyB,MAAM,MAAM,MAAM;AAAA;AAG1E,MAAM,eAAe,CAAC,EAAE,eAAe;AACrC,QAAM,WAAW,qBAAM,SAAS,QAAQ;AACxC,QAAM,eAAe,SAAS,GAAG,SAAS,kCAAsB,SAAS,GAAG,SAAS;AACrF,QAAM,UAAU,MAAM;AACpB,QAAI,cAAc;AAChB,aAAO,SAAS,WAAW,IAAI,CAAC,SAAS,CAAC,OAAO;AAAA;AAEnD,WAAO,SAAS,IAAI,MAAM,GAAG,MAAM,SAAS;AAAA;AAE9C,SACE,mDAAC,YAAD,MACE,mDAAC,qBAAD;AAAA,IACE,MAAM;AAAA,IACN,QAAQ,eAAe,OAAO;AAAA,IAC9B,gBAAe;AAAA,IACf,YAAY,eAAe,WAAW;AAAA,KAErC,SAAS,IAAI,CAAC,GAAG,MAEhB,mDAAC,qBAAD;AAAA,IAAM,KAAK;AAAA,KAAI;AAAA;AAOzB,MAAM,cAAc;AAAA,EAIlB,UAAU,4BAAU,UAAU,CAAC,4BAAU,SAAS,4BAAU,QAAQ,4BAAU,WAAW,WAAW,YAClG;AAAA;AAIJ,aAAa,YAAY;AAEzB,MAAM,yBAAyB,gCAAS;AACxC,uBAAuB,YAAY;AAEnC,IAAO,iBAAQ;",
+  "names": []
+}

package/dist/cjs/MobileFooter/Text.js

@@ -0,0 +1,52 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var Text_exports = {};
+__export(Text_exports, {
+  DSMobileFooterText: () => DSMobileFooterText,
+  DSMobileFooterTextWithSchema: () => DSMobileFooterTextWithSchema
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_react_desc = require("react-desc");
+const Text = import_styled_components.default.p`
+  margin: auto 0;
+  ${(0, import_ds_system.truncate)()}
+  ${(0, import_ds_system.textStyle)("body")}
+  ${(0, import_ds_system.color)("neutral", "800")}
+`;
+const DSMobileFooterText = ({ children }) => /* @__PURE__ */ import_react.default.createElement(Text, null, children);
+const props = {
+  children: import_react_desc.PropTypes.string.isRequired.description("Children")
+};
+DSMobileFooterText.propTypes = props;
+const DSMobileFooterTextWithSchema = (0, import_react_desc.describe)(DSMobileFooterText);
+DSMobileFooterTextWithSchema.propTypes = props;
+module.exports = __toCommonJS(Text_exports);
+//# sourceMappingURL=Text.js.map

package/dist/cjs/MobileFooter/Text.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MobileFooter/Text.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { textStyle, truncate, color } from '@elliemae/ds-system';\nimport { describe, PropTypes } from 'react-desc';\n\nconst Text = styled.p`\n  margin: auto 0;\n  ${truncate()}\n  ${textStyle('body')}\n  ${color('neutral', '800')}\n`;\n\nconst DSMobileFooterText = ({ children }) => <Text>{children}</Text>;\n\nconst props = {\n  children: PropTypes.string.isRequired.description('Children'),\n};\n\nDSMobileFooterText.propTypes = props;\n\nconst DSMobileFooterTextWithSchema = describe(DSMobileFooterText);\nDSMobileFooterTextWithSchema.propTypes = props;\n\nexport { DSMobileFooterText, DSMobileFooterTextWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,+BAAmB;AACnB,uBAA2C;AAC3C,wBAAoC;AAEpC,MAAM,OAAO,iCAAO;AAAA;AAAA,IAEhB;AAAA,IACA,gCAAU;AAAA,IACV,4BAAM,WAAW;AAAA;AAGrB,MAAM,qBAAqB,CAAC,EAAE,eAAe,mDAAC,MAAD,MAAO;AAEpD,MAAM,QAAQ;AAAA,EACZ,UAAU,4BAAU,OAAO,WAAW,YAAY;AAAA;AAGpD,mBAAmB,YAAY;AAE/B,MAAM,+BAA+B,gCAAS;AAC9C,6BAA6B,YAAY;",
+  "names": []
+}

package/dist/cjs/MobileFooter/index.js

@@ -0,0 +1,42 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var MobileFooter_exports = {};
+__export(MobileFooter_exports, {
+  DSMobileFooter: () => import_Footer.default,
+  DSMobileFooterAction: () => import_Action.DSMobileFooterAction,
+  DSMobileFooterActionWithSchema: () => import_Action.DSMobileFooterActionWithSchema,
+  DSMobileFooterText: () => import_Text.DSMobileFooterText,
+  DSMobileFooterTextWithSchema: () => import_Text.DSMobileFooterTextWithSchema,
+  MobileFooterWithSchema: () => import_Footer.MobileFooterWithSchema
+});
+var React = __toESM(require("react"));
+var import_Footer = __toESM(require("./Footer"));
+var import_Text = require("./Text");
+var import_Action = require("./Action");
+module.exports = __toCommonJS(MobileFooter_exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/MobileFooter/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MobileFooter/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import DSMobileFooter, { MobileFooterWithSchema } from './Footer';\nimport { DSMobileFooterText, DSMobileFooterTextWithSchema } from './Text';\nimport { DSMobileFooterAction, DSMobileFooterActionWithSchema } from './Action';\n\nexport {\n  DSMobileFooterText,\n  DSMobileFooterAction,\n  DSMobileFooter,\n  DSMobileFooterActionWithSchema,\n  DSMobileFooterTextWithSchema,\n  MobileFooterWithSchema,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAuD;AACvD,kBAAiE;AACjE,oBAAqE;",
+  "names": []
+}

package/dist/cjs/MobileListItem/MobileListItem.js

@@ -0,0 +1,93 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var MobileListItem_exports = {};
+__export(MobileListItem_exports, {
+  DSMobileListItem: () => DSMobileListItem,
+  ListItemWithSchema: () => ListItemWithSchema
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system = require("@elliemae/ds-system");
+const StyledContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  background: ${(props) => props.theme.colors.neutral["000"]};
+  border-bottom: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
+`;
+const StyledTitle = import_styled_components.default.div`
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  font-size: 13px;
+  color: ${(props) => props.theme.colors.neutral["800"]};
+  ${(0, import_ds_system.truncate)()}
+`;
+const MobileListItem = ({
+  leftAddon = null,
+  rightAddon = null,
+  title = "",
+  value = "",
+  dataTestid = "mobile-list-item",
+  theme
+}) => {
+  const cols = [1];
+  if (leftAddon)
+    cols.unshift((0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.m));
+  if (rightAddon)
+    cols.push((0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.m));
+  return /* @__PURE__ */ import_react.default.createElement(StyledContainer, {
+    cols,
+    height: theme.space.m,
+    width: "100%",
+    pl: (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s),
+    pr: (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s),
+    gutter: "xs",
+    "data-testid": `${dataTestid}--${value}`
+  }, leftAddon && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, leftAddon), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    alignItems: "center"
+  }, /* @__PURE__ */ import_react.default.createElement(StyledTitle, null, title)), rightAddon && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, rightAddon));
+};
+const DSMobileListItem = (0, import_ds_system.withTheme)(MobileListItem);
+const listItemProps = {
+  leftAddon: import_react_desc.PropTypes.element.description("Element placed at the left"),
+  rightAddon: import_react_desc.PropTypes.element.description("Element placed at the right"),
+  title: import_react_desc.PropTypes.string.description("Item s title").isRequired,
+  value: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("Item s value, used for data-testid attr"),
+  dataTestid: import_react_desc.PropTypes.string.description("ID used for testing").defaultValue("mobile-list-item"),
+  theme: import_react_desc.PropTypes.object.description("")
+};
+MobileListItem.propTypes = listItemProps;
+const ListItemWithSchema = (0, import_react_desc.describe)(MobileListItem);
+ListItemWithSchema.propTypes = listItemProps;
+module.exports = __toCommonJS(MobileListItem_exports);
+//# sourceMappingURL=MobileListItem.js.map

package/dist/cjs/MobileListItem/MobileListItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MobileListItem/MobileListItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\n\nconst StyledContainer = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\nconst StyledTitle = styled.div`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral['800']};\n  ${truncate()}\n`;\n\nconst MobileListItem = ({\n  leftAddon = null,\n  rightAddon = null,\n  title = '',\n  value = '',\n  dataTestid = 'mobile-list-item',\n  theme,\n}) => {\n  const cols = [1];\n  if (leftAddon) cols.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));\n  if (rightAddon) cols.push(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));\n  return (\n    <StyledContainer\n      cols={cols}\n      height={theme.space.m}\n      width=\"100%\"\n      pl={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n      pr={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n      gutter=\"xs\"\n      data-testid={`${dataTestid}--${value}`}\n    >\n      {leftAddon && (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          {leftAddon}\n        </Grid>\n      )}\n      <Grid alignItems=\"center\">\n        <StyledTitle>{title}</StyledTitle>\n      </Grid>\n      {rightAddon && (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          {rightAddon}\n        </Grid>\n      )}\n    </StyledContainer>\n  );\n};\n\nconst DSMobileListItem = withTheme(MobileListItem);\n\nconst listItemProps = {\n  leftAddon: PropTypes.element.description('Element placed at the left'),\n  rightAddon: PropTypes.element.description('Element placed at the right'),\n  title: PropTypes.string.description('Item s title').isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Item s value, used for data-testid attr',\n  ),\n  dataTestid: PropTypes.string.description('ID used for testing').defaultValue('mobile-list-item'),\n  theme: PropTypes.object.description(''),\n};\n\nMobileListItem.propTypes = listItemProps;\n\nconst ListItemWithSchema = describe(MobileListItem);\nListItemWithSchema.propTypes = listItemProps;\n\nexport { DSMobileListItem, ListItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,+BAAmB;AACnB,qBAAqB;AACrB,uBAAsE;AAEtE,MAAM,kBAAkB,sCAAO;AAAA,gBACf,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,mBACnC,CAAC,UAAU,6BAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAEhE,MAAM,cAAc,iCAAO;AAAA,iBACV,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C;AAAA;AAGJ,MAAM,iBAAiB,CAAC;AAAA,EACtB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,MACI;AACJ,QAAM,OAAO,CAAC;AACd,MAAI;AAAW,SAAK,QAAQ,+CAAyB,MAAM,MAAM;AACjE,MAAI;AAAY,SAAK,KAAK,+CAAyB,MAAM,MAAM;AAC/D,SACE,mDAAC,iBAAD;AAAA,IACE;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,OAAM;AAAA,IACN,IAAI,+CAAyB,MAAM,MAAM;AAAA,IACzC,IAAI,+CAAyB,MAAM,MAAM;AAAA,IACzC,QAAO;AAAA,IACP,eAAa,GAAG,eAAe;AAAA,KAE9B,aACC,mDAAC,qBAAD;AAAA,IAAM,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,YAGL,mDAAC,qBAAD;AAAA,IAAM,YAAW;AAAA,KACf,mDAAC,aAAD,MAAc,SAEf,cACC,mDAAC,qBAAD;AAAA,IAAM,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC;AAAA;AAOX,MAAM,mBAAmB,gCAAU;AAEnC,MAAM,gBAAgB;AAAA,EACpB,WAAW,4BAAU,QAAQ,YAAY;AAAA,EACzC,YAAY,4BAAU,QAAQ,YAAY;AAAA,EAC1C,OAAO,4BAAU,OAAO,YAAY,gBAAgB;AAAA,EACpD,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAC/D;AAAA,EAEF,YAAY,4BAAU,OAAO,YAAY,uBAAuB,aAAa;AAAA,EAC7E,OAAO,4BAAU,OAAO,YAAY;AAAA;AAGtC,eAAe,YAAY;AAE3B,MAAM,qBAAqB,gCAAS;AACpC,mBAAmB,YAAY;",
+  "names": []
+}

package/dist/cjs/MobileListItem/index.js

@@ -0,0 +1,28 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var MobileListItem_exports = {};
+var React = __toESM(require("react"));
+__reExport(MobileListItem_exports, require("./MobileListItem"));
+module.exports = __toCommonJS(MobileListItem_exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/MobileListItem/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MobileListItem/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './MobileListItem';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,mCAAc;",
+  "names": []
+}

package/dist/cjs/MobilePageHeader/MobilePageHeader.js

@@ -0,0 +1,202 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var MobilePageHeader_exports = {};
+__export(MobilePageHeader_exports, {
+  DSMobilePageHeader: () => DSMobilePageHeader,
+  PageHeaderWithSchema: () => PageHeaderWithSchema
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_truncated_expandable_text = require("@elliemae/ds-truncated-expandable-text");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_button = __toESM(require("@elliemae/ds-button"));
+var import_MobileSeparator = __toESM(require("../MobileSeparator"));
+const StyledTitle = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  font-size: 22px;
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+  color: ${(props) => props.theme.colors.neutral["700"]};
+  min-height: ${(props) => props.withBreadcrumb ? "auto" : "44px"};
+  padding-top: ${(props) => props.withBreadcrumb ? "0" : "6px"};
+`;
+const StyledBreadCrumb = import_styled_components.default.div`
+  font-size: 16px;
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+  color: ${(props) => props.theme.colors.neutral["600"]};
+  ${(0, import_ds_system.truncate)()}
+`;
+const Label = import_styled_components.default.div`
+  color: ${(props) => props.theme.colors.neutral["500"]};
+  ${(0, import_ds_system.truncate)()}
+`;
+const Value = import_styled_components.default.div`
+  ${(0, import_ds_system.truncate)()}
+  color: ${(props) => props.theme.colors.neutral["600"]};
+  ${(props) => props.withMarginRight ? `margin-right: 4px;` : ""}
+  margin-top: ${(props) => props.withBreadcrumb ? "12px" : "0"};
+`;
+const Wrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  border-bottom: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
+`;
+const MobilePageHeader = ({
+  pageTitle = null,
+  contextMenu = null,
+  firstAction = null,
+  secondAction = null,
+  backArrow = null,
+  breadCrumb = null,
+  onOpenContextMenu = () => null,
+  value,
+  label,
+  theme
+}) => {
+  const hasValue = value === 0 || value;
+  const countActions = (0, import_react.useMemo)(() => {
+    let count = 0;
+    if (firstAction)
+      count++;
+    if (secondAction)
+      count++;
+    return count;
+  }, [firstAction, secondAction]);
+  const [open, setOpen] = (0, import_react.useState)();
+  const handleContext = (0, import_react.useCallback)(() => {
+    setOpen(!open);
+  }, [open]);
+  const separator = /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    height: "32px",
+    alignItems: "center"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    height: "24px"
+  }, /* @__PURE__ */ import_react.default.createElement(import_MobileSeparator.default, {
+    direction: "vertical",
+    margin: "xxs",
+    color: ["neutral", "300"]
+  })));
+  const cols = [1, "auto"];
+  const cols2 = ["auto"];
+  if (countActions)
+    cols.push("auto");
+  if (hasValue)
+    cols2.push("auto");
+  if (label)
+    cols2.push("auto");
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, {
+    cols,
+    pl: theme.space.xs,
+    pr: theme.space.xs,
+    alignItems: "flex-start",
+    width: "100%",
+    "data-testid": "page-header-wrapper"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    cols: cols2
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    cols: backArrow ? ["auto", 1] : [1],
+    alignItems: "flex-start",
+    pr: countActions === 0 && !hasValue && !label ? (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s) : 0
+  }, backArrow && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    height: breadCrumb ? "56px" : "44px",
+    alignItems: "center"
+  }, backArrow), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    flexGrow: 0,
+    pt: !breadCrumb ? 0 : theme.space.xxs
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    cols: ["auto", "auto"],
+    alignItems: "flex-start"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, breadCrumb && /* @__PURE__ */ import_react.default.createElement(StyledBreadCrumb, {
+    "data-testid": "page-header-breadcrum"
+  }, breadCrumb), /* @__PURE__ */ import_react.default.createElement(StyledTitle, {
+    maxWidth: "100%",
+    alignItems: "flex-start",
+    withBreadcrumb: !!breadCrumb,
+    "data-testid": "page-header-title"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    pt: breadCrumb ? 0 : theme.space.xxxs
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_expandable_text.TruncatedExpandableText, {
+    value: pageTitle
+  })))), contextMenu && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    alignItems: "center",
+    mt: breadCrumb ? "20px" : "8px"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
+    buttonType: "text",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, null),
+    size: "s",
+    onClick: () => {
+      handleContext();
+      onOpenContextMenu();
+    },
+    containerProps: { "data-testid": "trigger-context-menu" }
+  }), import_react.default.cloneElement(contextMenu, {
+    open: contextMenu.props.open !== void 0 ? contextMenu.props.open : open,
+    onChange: (event, item) => {
+      if (contextMenu.props.onChange)
+        contextMenu.props.onChange(event, item);
+      handleContext();
+    }
+  }))))), hasValue && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    height: breadCrumb ? "56px" : "44px",
+    alignItems: "center",
+    cols: ["auto", "auto"]
+  }, separator, /* @__PURE__ */ import_react.default.createElement(Value, {
+    withMarginRight: !!label,
+    "data-testid": "page-header-value"
+  }, value)), label && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    height: breadCrumb ? "56px" : "44px",
+    alignItems: "center"
+  }, /* @__PURE__ */ import_react.default.createElement(Label, {
+    withBreadcrumb: !!breadCrumb,
+    "data-testid": "page-header-label"
+  }, label))), countActions > 0 && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    height: breadCrumb ? "56px" : "44px",
+    alignItems: "center",
+    cols: countActions === 1 ? ["auto"] : ["auto", "auto", "auto"]
+  }, firstAction && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, firstAction), countActions === 2 && separator, secondAction && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, secondAction)));
+};
+const pageHeaderProps = {
+  pageTitle: import_react_desc.PropTypes.string.description("Page title").isRequired,
+  contextMenu: import_react_desc.PropTypes.element.description("Context Menu to open"),
+  onOpenContextMenu: import_react_desc.PropTypes.func.description("function called when context menu opens"),
+  firstAction: import_react_desc.PropTypes.element.description("Action Button"),
+  secondAction: import_react_desc.PropTypes.element.description("Action Button"),
+  backArrow: import_react_desc.PropTypes.element.description("Back Arrow Button"),
+  breadCrumb: import_react_desc.PropTypes.string.description("BreadCrumbs title"),
+  value: import_react_desc.PropTypes.number.description("Page summary value"),
+  label: import_react_desc.PropTypes.string.description("Page summary label"),
+  theme: import_react_desc.PropTypes.object.description("dimsum theme")
+};
+MobilePageHeader.propTypes = pageHeaderProps;
+const PageHeaderWithSchema = (0, import_react_desc.describe)(MobilePageHeader);
+PageHeaderWithSchema.propTypes = pageHeaderProps;
+const DSMobilePageHeader = (0, import_ds_system.withTheme)(MobilePageHeader);
+module.exports = __toCommonJS(MobilePageHeader_exports);
+//# sourceMappingURL=MobilePageHeader.js.map

package/dist/cjs/MobilePageHeader/MobilePageHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MobilePageHeader/MobilePageHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable no-plusplus */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useState, useCallback } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { TruncatedExpandableText } from '@elliemae/ds-truncated-expandable-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport MobileSeparator from '../MobileSeparator';\n\nconst StyledTitle = styled(Grid)`\n  font-size: 22px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  min-height: ${(props) => (props.withBreadcrumb ? 'auto' : '44px')};\n  padding-top: ${(props) => (props.withBreadcrumb ? '0' : '6px')};\n`;\n\nconst StyledBreadCrumb = styled.div`\n  font-size: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['600']};\n  ${truncate()}\n`;\n\nconst Label = styled.div`\n  color: ${(props) => props.theme.colors.neutral['500']};\n  ${truncate()}\n`;\n\nconst Value = styled.div`\n  ${truncate()}\n  color: ${(props) => props.theme.colors.neutral['600']};\n  ${(props) => (props.withMarginRight ? `margin-right: 4px;` : '')}\n  margin-top: ${(props) => (props.withBreadcrumb ? '12px' : '0')};\n`;\n\nconst Wrapper = styled(Grid)`\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst MobilePageHeader = ({\n  pageTitle = null,\n  contextMenu = null,\n  firstAction = null,\n  secondAction = null,\n  backArrow = null,\n  breadCrumb = null,\n  onOpenContextMenu = () => null,\n  value,\n  label,\n  theme,\n}) => {\n  const hasValue = value === 0 || value;\n\n  const countActions = useMemo(() => {\n    let count = 0;\n    if (firstAction) count++;\n    if (secondAction) count++;\n    return count;\n  }, [firstAction, secondAction]);\n  const [open, setOpen] = useState();\n  const handleContext = useCallback(() => {\n    setOpen(!open);\n  }, [open]);\n\n  const separator = (\n    <Grid height=\"32px\" alignItems=\"center\">\n      <Grid height=\"24px\">\n        <MobileSeparator direction=\"vertical\" margin=\"xxs\" color={['neutral', '300']} />\n      </Grid>\n    </Grid>\n  );\n  const cols = [1, 'auto'];\n  const cols2 = ['auto'];\n  if (countActions) cols.push('auto');\n  if (hasValue) cols2.push('auto');\n  if (label) cols2.push('auto');\n\n  return (\n    <Wrapper\n      cols={cols}\n      pl={theme.space.xs}\n      pr={theme.space.xs}\n      alignItems=\"flex-start\"\n      width=\"100%\"\n      data-testid=\"page-header-wrapper\"\n    >\n      <Grid alignItems=\"flex-start\" justifyContent=\"flex-start\" cols={cols2}>\n        <Grid\n          cols={backArrow ? ['auto', 1] : [1]}\n          alignItems=\"flex-start\"\n          pr={countActions === 0 && !hasValue && !label ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : 0}\n        >\n          {backArrow && (\n            <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\">\n              {backArrow}\n            </Grid>\n          )}\n          <Grid flexGrow={0} pt={!breadCrumb ? 0 : theme.space.xxs}>\n            <Grid cols={['auto', 'auto']} alignItems=\"flex-start\">\n              <Grid>\n                {breadCrumb && <StyledBreadCrumb data-testid=\"page-header-breadcrum\">{breadCrumb}</StyledBreadCrumb>}\n                <StyledTitle\n                  maxWidth=\"100%\"\n                  alignItems=\"flex-start\"\n                  withBreadcrumb={!!breadCrumb}\n                  data-testid=\"page-header-title\"\n                >\n                  <Grid pt={breadCrumb ? 0 : theme.space.xxxs}>\n                    <TruncatedExpandableText value={pageTitle} />\n                  </Grid>\n                </StyledTitle>\n              </Grid>\n              {contextMenu && (\n                <Grid alignItems=\"center\" mt={breadCrumb ? '20px' : '8px'}>\n                  <DSButton\n                    buttonType=\"text\"\n                    icon={<ChevronSmallDown />}\n                    size=\"s\"\n                    onClick={() => {\n                      handleContext();\n                      onOpenContextMenu();\n                    }}\n                    containerProps={{ 'data-testid': 'trigger-context-menu' }}\n                  />\n                  {React.cloneElement(contextMenu, {\n                    open: contextMenu.props.open !== undefined ? contextMenu.props.open : open,\n                    onChange: (event, item) => {\n                      if (contextMenu.props.onChange) contextMenu.props.onChange(event, item);\n                      handleContext();\n                    },\n                  })}\n                </Grid>\n              )}\n            </Grid>\n          </Grid>\n        </Grid>\n        {hasValue && (\n          <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\" cols={['auto', 'auto']}>\n            {separator}\n            <Value withMarginRight={!!label} data-testid=\"page-header-value\">\n              {value}\n            </Value>\n          </Grid>\n        )}\n        {label && (\n          <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\">\n            <Label withBreadcrumb={!!breadCrumb} data-testid=\"page-header-label\">\n              {label}\n            </Label>\n          </Grid>\n        )}\n      </Grid>\n      {countActions > 0 && (\n        <Grid\n          height={breadCrumb ? '56px' : '44px'}\n          alignItems=\"center\"\n          cols={countActions === 1 ? ['auto'] : ['auto', 'auto', 'auto']}\n        >\n          {firstAction && <Grid>{firstAction}</Grid>}\n          {countActions === 2 && separator}\n          {secondAction && <Grid>{secondAction}</Grid>}\n        </Grid>\n      )}\n    </Wrapper>\n  );\n};\n\nconst pageHeaderProps = {\n  pageTitle: PropTypes.string.description('Page title').isRequired,\n  contextMenu: PropTypes.element.description('Context Menu to open'),\n  onOpenContextMenu: PropTypes.func.description('function called when context menu opens'),\n  firstAction: PropTypes.element.description('Action Button'),\n  secondAction: PropTypes.element.description('Action Button'),\n  backArrow: PropTypes.element.description('Back Arrow Button'),\n  breadCrumb: PropTypes.string.description('BreadCrumbs title'),\n  value: PropTypes.number.description('Page summary value'),\n  label: PropTypes.string.description('Page summary label'),\n  theme: PropTypes.object.description('dimsum theme'),\n};\n\nMobilePageHeader.propTypes = pageHeaderProps;\n\nconst PageHeaderWithSchema = describe(MobilePageHeader);\nPageHeaderWithSchema.propTypes = pageHeaderProps;\n\nconst DSMobilePageHeader = withTheme(MobilePageHeader);\n\nexport { DSMobilePageHeader, PageHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/MobilePageHeader/index.js

@@ -0,0 +1,28 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var MobilePageHeader_exports = {};
+var React = __toESM(require("react"));
+__reExport(MobilePageHeader_exports, require("./MobilePageHeader"));
+module.exports = __toCommonJS(MobilePageHeader_exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/MobilePageHeader/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MobilePageHeader/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './MobilePageHeader';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,qCAAc;",
+  "names": []
+}