@elliemae/ds-mobile 3.4.2 → 3.4.3

package/dist/esm/MobileContextMenu/MobileContextMenuItem.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { PropTypes, describe } from "@elliemae/ds-utilities";
 import { Grid } from "@elliemae/ds-grid";
 import { styled, truncate } from "@elliemae/ds-system";
@@ -7,12 +7,12 @@ import { GroupItem } from "@elliemae/ds-shared";
 import { DSCheckbox } from "@elliemae/ds-form";
 import { Checkmark } from "@elliemae/ds-icons";
 import { DSMobileTouchable } from "../MobileTouchable";
-const Wrap = styled((props2) => /* @__PURE__ */ React2.createElement(DSMobileTouchable, {
+const Wrap = styled((props2) => /* @__PURE__ */ jsx(DSMobileTouchable, {
   ...props2
 }))`
   border-bottom: none;
 `;
-const PropWrap = styled((props2) => /* @__PURE__ */ React2.createElement(Grid, {
+const PropWrap = styled((props2) => /* @__PURE__ */ jsx(Grid, {
   ...props2
 }))`
   ${(props2) => {
@@ -56,7 +56,7 @@ const DSMobileContextMenuItem = ({
   onClick = () => {
   },
   value
-}) => /* @__PURE__ */ React2.createElement(GroupItem, {
+}) => /* @__PURE__ */ jsx(GroupItem, {
   render: (context) => {
     const { activeValue } = context;
     let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);
@@ -67,48 +67,63 @@ const DSMobileContextMenuItem = ({
       showLeftAddon = true;
     let leftAddon = leftProp || null;
     if (isMulti)
-      leftAddon = /* @__PURE__ */ React2.createElement(DSCheckbox, {
+      leftAddon = /* @__PURE__ */ jsx(DSCheckbox, {
         checked: isSelected,
         "data-testid": "leftAddon-checkbox"
       });
     if (singleSelect)
-      leftAddon = /* @__PURE__ */ React2.createElement(CheckMark, {
+      leftAddon = /* @__PURE__ */ jsx(CheckMark, {
         "data-testid": "leftAddon-checkmark"
       });
     const cols = singleSelect && someItemSelected || leftAddon && !singleSelect || isMulti ? ["40px", "auto"] : ["auto"];
     if (rightAddon)
       cols.push("40px");
-    return /* @__PURE__ */ React2.createElement(Wrap, {
+    return /* @__PURE__ */ jsxs(Wrap, {
       "data-testid": "ds-contextmenu-item",
       onClick: (e) => {
         if (singleSelect || isMulti)
           context.onChange(value, e, { value, label, title });
         onClick(e);
       },
-      cols
-    }, (singleSelect && someItemSelected || isMulti || leftAddon) && /* @__PURE__ */ React2.createElement(PropWrap, {
-      "data-testid": "left-addon",
-      isMulti,
-      alignItems: "center",
-      justifyContent: "center",
-      pl: "16px"
-    }, showLeftAddon && leftAddon), /* @__PURE__ */ React2.createElement(Grid, {
-      height: "44px",
-      pr: "xs",
-      pl: !leftAddon && isGroup ? "24px" : "xs"
-    }, label && /* @__PURE__ */ React2.createElement(Grid, {
-      alignItems: "center"
-    }, /* @__PURE__ */ React2.createElement(Label, {
-      "data-testid": "contextMenuItem-label"
-    }, label)), /* @__PURE__ */ React2.createElement(Grid, {
-      alignItems: !label ? "center" : void 0
-    }, /* @__PURE__ */ React2.createElement(Title, {
-      "data-testid": "contextMenuItem-title"
-    }, title))), rightAddon ? /* @__PURE__ */ React2.createElement(PropWrap, {
-      "data-testid": "right-addon",
-      alignItems: "center",
-      justifyContent: "center"
-    }, rightAddon) : null);
+      cols,
+      children: [
+        (singleSelect && someItemSelected || isMulti || leftAddon) && /* @__PURE__ */ jsx(PropWrap, {
+          "data-testid": "left-addon",
+          isMulti,
+          alignItems: "center",
+          justifyContent: "center",
+          pl: "16px",
+          children: showLeftAddon && leftAddon
+        }),
+        /* @__PURE__ */ jsxs(Grid, {
+          height: "44px",
+          pr: "xs",
+          pl: !leftAddon && isGroup ? "24px" : "xs",
+          children: [
+            label && /* @__PURE__ */ jsx(Grid, {
+              alignItems: "center",
+              children: /* @__PURE__ */ jsx(Label, {
+                "data-testid": "contextMenuItem-label",
+                children: label
+              })
+            }),
+            /* @__PURE__ */ jsx(Grid, {
+              alignItems: !label ? "center" : void 0,
+              children: /* @__PURE__ */ jsx(Title, {
+                "data-testid": "contextMenuItem-title",
+                children: title
+              })
+            })
+          ]
+        }),
+        rightAddon ? /* @__PURE__ */ jsx(PropWrap, {
+          "data-testid": "right-addon",
+          alignItems: "center",
+          justifyContent: "center",
+          children: rightAddon
+        }) : null
+      ]
+    });
   }
 });
 const props = {

package/dist/esm/MobileContextMenu/MobileContextMenuItem.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileContextMenu/MobileContextMenuItem.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, truncate } from '@elliemae/ds-system';\nimport { GroupItem } from '@elliemae/ds-shared';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { DSMobileTouchable } from '../MobileTouchable';\n\nconst Wrap = styled((props) => <DSMobileTouchable {...props} />)`\n  border-bottom: none;\n`;\n\nconst PropWrap = styled((props) => <Grid {...props} />)`\n  ${(props) => {\n    if (!props.isMulti) {\n      return `\n      & > span {\n        height: 18px;\n        width: 18px;\n      }\n\n      & > span > svg {\n        height: 18px;\n        width: 18px;\n      }\n      `;\n    }\n    return '';\n  }}\n`;\n\nconst Title = styled.span`\n  font-size: 16px;\n  color: ${(props) => props.theme.colors.brand['600']};\n  ${truncate()}\n`;\n\nconst Label = styled.span`\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nconst CheckMark = styled(Checkmark)`\n  fill: ${(props) => props.theme.colors.brand['600']};\n`;\ninterface DSMobileContextMenuItemPropsT {\n  label: string;\n  title: string;\n  leftProp: JSX.Element;\n  isGroup: boolean;\n  isMulti: boolean;\n  isSelected: boolean;\n  singleSelect: boolean;\n  onClick: (e: any) => void;\n  value: string;\n}\nconst DSMobileContextMenuItem = ({\n  label,\n  title,\n  leftProp,\n  rightAddon,\n  isGroup,\n  isMulti,\n  singleSelect,\n  isSelected,\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  onClick = () => {},\n  value,\n}: DSMobileContextMenuItemPropsT): JSX.Element => (\n  <GroupItem\n    render={(context) => {\n      const { activeValue } = context;\n      let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);\n      if (isGroup) someItemSelected = typeof activeValue === 'string';\n\n      let showLeftAddon = isSelected;\n      if (isMulti || !singleSelect) showLeftAddon = true;\n\n      let leftAddon = leftProp || null;\n      if (isMulti) leftAddon = <DSCheckbox checked={isSelected} data-testid=\"leftAddon-checkbox\" />;\n      if (singleSelect) leftAddon = <CheckMark data-testid=\"leftAddon-checkmark\" />;\n\n      const cols =\n        (singleSelect && someItemSelected) || (leftAddon && !singleSelect) || isMulti ? ['40px', 'auto'] : ['auto'];\n      if (rightAddon) cols.push('40px');\n      return (\n        <Wrap\n          data-testid=\"ds-contextmenu-item\"\n          onClick={(e) => {\n            if (singleSelect || isMulti) context.onChange(value, e, { value, label, title });\n            onClick(e);\n          }}\n          cols={cols}\n        >\n          {((singleSelect && someItemSelected) || isMulti || leftAddon) && (\n            <PropWrap data-testid=\"left-addon\" isMulti={isMulti} alignItems=\"center\" justifyContent=\"center\" pl=\"16px\">\n              {showLeftAddon && leftAddon}\n            </PropWrap>\n          )}\n          <Grid height=\"44px\" pr=\"xs\" pl={!leftAddon && isGroup ? '24px' : 'xs'}>\n            {label && (\n              <Grid alignItems=\"center\">\n                <Label data-testid=\"contextMenuItem-label\">{label}</Label>\n              </Grid>\n            )}\n            <Grid alignItems={!label ? 'center' : undefined}>\n              <Title data-testid=\"contextMenuItem-title\">{title}</Title>\n            </Grid>\n          </Grid>\n          {rightAddon ? (\n            <PropWrap data-testid=\"right-addon\" alignItems=\"center\" justifyContent=\"center\">\n              {rightAddon}\n            </PropWrap>\n          ) : null}\n        </Wrap>\n      );\n    }}\n  />\n);\n\nconst props = {\n  /** label */\n  label: PropTypes.string.description('label'),\n  /** menu item title */\n  title: PropTypes.string.isRequired.description('menu item title'),\n  /**  */\n  leftProp: PropTypes.element.description(''),\n  /** multi select */\n  isMulti: PropTypes.bool.description('multi select'),\n  /**  */\n  singleSelect: PropTypes.bool.description(''),\n  /**  */\n  isGroup: PropTypes.bool.description(''),\n  /** on click handler */\n  onClick: PropTypes.func.description('on click handler'),\n  /** value for select */\n  value: PropTypes.number.description('value for select'),\n  /** selected value */\n  isSelected: PropTypes.bool.description('selected value'),\n};\n\nDSMobileContextMenuItem.propTypes = props;\nDSMobileContextMenuItem.displayName = 'DSMobileContextMenuItem';\nconst DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);\n\nDSMobileContextMenuItemWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };\n"],
-  "mappings": "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",
-  "names": []
+  "mappings": "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",
+  "names": ["props"]
 }

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

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

package/dist/esm/MobileDatePicker/Input.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx } from "react/jsx-runtime";
 import { styled } from "@elliemae/ds-system";
 import { focus, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
 const StyledInput = styled.input`
@@ -39,7 +39,7 @@ const StyledInput = styled.input`
     display: none;
   }
 `;
-const Input = ({ innerRef, ...props }) => /* @__PURE__ */ React2.createElement(StyledInput, {
+const Input = ({ innerRef, ...props }) => /* @__PURE__ */ jsx(StyledInput, {
   ref: innerRef,
   ...props
 });

package/dist/esm/MobileDatePicker/Input.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileDatePicker/Input.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { focus, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\n\nconst StyledInput = styled.input`\n  input[type=date]& {   \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    -webkit-tap-highlight-color: transparent;\n    appearance: none;\n    color: transparent;\n\n    white-space: nowrap;\n    position: relative;\n    height: ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l)};\n    width: 100%;\n    max-width: calc(100% - 32px);\n    outline: none;\n    box-sizing: border-box;\n    display: flex;\n    background: ${props => props.theme.colors.neutral['000']};\n    padding: 0 ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n    z-index: 1;\n    border-radius: 2px;\n    border: solid 1px ${props => props.theme.colors.neutral[200]};\n  }\n\n  input[type=date]&:active, input[type=date]&:focus {\n    ${props => focus(props.theme.colors.brand[700])}\n  }\n\n  &:before {\n    color: ${props =>\n      props.value === ''\n        ? props.theme.colors.neutral['500']\n        : props.theme.colors.neutral['800']};\n    content: '${props =>\n      props.value === '' ? props.placeholder : props['data-displayvalue']}';\n  }\n\n  input[type=date]&::-webkit-datetime-edit, input[type=date]&::-webkit-inner-spin-button, input[type=date]&::-webkit-clear-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n`;\n\nexport const Input = ({ innerRef, ...props }) => (\n  <StyledInput ref={innerRef} {...props} />\n);\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUb,WAAS,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMjD,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,iBACrC,WAAS,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA,wBAG/C,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,WAAS,MAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA,aAIrC,WACP,MAAM,UAAU,KACZ,MAAM,MAAM,OAAO,QAAQ,SAC3B,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACrB,WACV,MAAM,UAAU,KAAK,MAAM,cAAc,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9C,MAAM,QAAQ,CAAC,EAAE,aAAa,YACnC,qCAAC;AAAA,EAAY,KAAK;AAAA,EAAW,GAAG;AAAA,CAAO;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,cAAc;AACvB,SAAS,OAAO,gCAAgC;AAEhD,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUb,WAAS,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMjD,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,iBACrC,WAAS,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA,wBAG/C,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,WAAS,MAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA,aAIrC,WACP,MAAM,UAAU,KACZ,MAAM,MAAM,OAAO,QAAQ,SAC3B,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACrB,WACV,MAAM,UAAU,KAAK,MAAM,cAAc,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9C,MAAM,QAAQ,CAAC,EAAE,aAAa,MAAM,MACzC,oBAAC;AAAA,EAAY,KAAK;AAAA,EAAW,GAAG;AAAA,CAAO;",
   "names": []
 }

package/dist/esm/MobileDatePicker/MobileDatePicker.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useRef, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
 import { PropTypes, describe } from "@elliemae/ds-utilities";
 import { DSIconColors } from "@elliemae/ds-icon";
 import { DatePicker } from "@elliemae/ds-icons";
@@ -15,39 +16,40 @@ const DSMobileDatePicker = ({ disabled, value, tabIndex, placeholder, onChange }
   }, [inputRef.current]);
   const valueArr = value.split("-");
   const displayValue = value && `${valueArr[1]} / ${valueArr[2]} / ${valueArr[0]}`;
-  return /* @__PURE__ */ React2.createElement(DSInputGroup, {
-    rightAddon: /* @__PURE__ */ React2.createElement(DSButton, {
+  return /* @__PURE__ */ jsx(DSInputGroup, {
+    rightAddon: /* @__PURE__ */ jsx(DSButton, {
       "aria-label": "Date Picker Button",
       color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
       disabled,
-      icon: /* @__PURE__ */ React2.createElement(DatePicker, null),
+      icon: /* @__PURE__ */ jsx(DatePicker, {}),
       type: "button",
       buttonType: "secondary",
       onClick: () => {
         inputRef.current.focus();
         inputRef.current.click();
       }
+    }),
+    children: /* @__PURE__ */ jsx(Input, {
+      "data-testid": "ds-mobile-date-picker",
+      innerRef: inputRef,
+      "aria-label": "Date Picker Input Mask",
+      disabled,
+      onKeyDown: (e) => e.preventDefault(),
+      type: "date",
+      placeholder,
+      onChange: (e) => {
+        const { target } = e.nativeEvent;
+        function iosClearDefault() {
+          target.defaultValue = "";
+        }
+        window.setTimeout(iosClearDefault, 0);
+        onChange(e);
+      },
+      tabIndex,
+      value,
+      "data-displayvalue": displayValue
     })
-  }, /* @__PURE__ */ React2.createElement(Input, {
-    "data-testid": "ds-mobile-date-picker",
-    innerRef: inputRef,
-    "aria-label": "Date Picker Input Mask",
-    disabled,
-    onKeyDown: (e) => e.preventDefault(),
-    type: "date",
-    placeholder,
-    onChange: (e) => {
-      const { target } = e.nativeEvent;
-      function iosClearDefault() {
-        target.defaultValue = "";
-      }
-      window.setTimeout(iosClearDefault, 0);
-      onChange(e);
-    },
-    tabIndex,
-    value,
-    "data-displayvalue": displayValue
-  }));
+  });
 };
 DSMobileDatePicker.defaultProps = {
   disabled: false,

package/dist/esm/MobileDatePicker/MobileDatePicker.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileDatePicker/MobileDatePicker.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInputGroup } from '@elliemae/ds-form';\nimport { Input } from './Input';\n\nconst DSMobileDatePicker = ({ disabled, value, tabIndex, placeholder, onChange }) => {\n  const inputRef = useRef(null);\n  useEffect(() => {\n    /*\n      necessary if value is being set in mount, \n      otherwise the clear won't work on the first click\n      [SEE input onChange comment]\n    */\n    if (inputRef.current) {\n      inputRef.current.defaultValue = '';\n    }\n  }, [inputRef.current]);\n  const valueArr = value.split('-');\n  const displayValue = value && `${valueArr[1]} / ${valueArr[2]} / ${valueArr[0]}`;\n  return (\n    <DSInputGroup\n      rightAddon={\n        <DSButton\n          aria-label=\"Date Picker Button\"\n          color={!disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL}\n          disabled={disabled}\n          icon={<DatePicker />}\n          type=\"button\"\n          buttonType=\"secondary\"\n          onClick={() => {\n            inputRef.current.focus();\n            inputRef.current.click();\n          }}\n        />\n      }\n    >\n      <Input\n        data-testid=\"ds-mobile-date-picker\"\n        innerRef={inputRef}\n        aria-label=\"Date Picker Input Mask\"\n        disabled={disabled}\n        onKeyDown={(e) => e.preventDefault()}\n        type=\"date\"\n        placeholder={placeholder}\n        onChange={(e) => {\n          // https://github.com/facebook/react/issues/8938#issuecomment-360573204\n          const { target } = e.nativeEvent;\n          function iosClearDefault() {\n            target.defaultValue = '';\n          }\n          window.setTimeout(iosClearDefault, 0);\n          onChange(e);\n        }}\n        tabIndex={tabIndex}\n        value={value}\n        data-displayvalue={displayValue}\n      />\n    </DSInputGroup>\n  );\n};\n\nDSMobileDatePicker.defaultProps = {\n  disabled: false,\n  tabIndex: 0,\n  placeholder: 'MM / DD / YYYY',\n};\n\nconst props = {\n  /**\n   * defaults to false\n   */\n  disabled: PropTypes.bool.description('defaults to false'),\n  /**\n   * 0 as default\n   */\n  tabIndex: PropTypes.number.description('0 as default'),\n  /**\n   * MM / DD / YYYY as default\n   */\n  placeholder: PropTypes.string.description('MM / DD / YYYY as default'),\n  /**\n   * onChange handler, receives change event as first argument\n   */\n  onChange: PropTypes.func.description('onChange handler, receives change event as first argument'),\n  /**\n   * ISO8601 string representing the date in format YYYY-MM-DD or empty string\n   */\n  value: PropTypes.string.description('ISO8601 string representing the date in format YYYY-MM-DD or empty string'),\n};\n\nDSMobileDatePicker.propTypes = props;\nDSMobileDatePicker.displayName = 'DSMobileDatePicker';\nconst DSMobileDatePickerWithSchema = describe(DSMobileDatePicker);\n\nDSMobileDatePickerWithSchema.propTypes = props;\n\nexport { DSMobileDatePicker, DSMobileDatePickerWithSchema };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,qBAAqB,CAAC,EAAE,UAAU,OAAO,UAAU,aAAa,eAAe;AACnF,QAAM,WAAW,OAAO,IAAI;AAC5B,YAAU,MAAM;AAMd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,eAAe;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,SAAS,OAAO,CAAC;AACrB,QAAM,WAAW,MAAM,MAAM,GAAG;AAChC,QAAM,eAAe,SAAS,GAAG,SAAS,QAAQ,SAAS,QAAQ,SAAS;AAC5E,SACE,qCAAC;AAAA,IACC,YACE,qCAAC;AAAA,MACC,cAAW;AAAA,MACX,OAAO,CAAC,WAAW,aAAa,UAAU,aAAa;AAAA,MACvD;AAAA,MACA,MAAM,qCAAC,gBAAW;AAAA,MAClB,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS,MAAM;AACb,iBAAS,QAAQ,MAAM;AACvB,iBAAS,QAAQ,MAAM;AAAA,MACzB;AAAA,KACF;AAAA,KAGF,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAW;AAAA,IACX;AAAA,IACA,WAAW,CAAC,MAAM,EAAE,eAAe;AAAA,IACnC,MAAK;AAAA,IACL;AAAA,IACA,UAAU,CAAC,MAAM;AAEf,YAAM,EAAE,WAAW,EAAE;AACrB,iCAA2B;AACzB,eAAO,eAAe;AAAA,MACxB;AACA,aAAO,WAAW,iBAAiB,CAAC;AACpC,eAAS,CAAC;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAmB;AAAA,GACrB,CACF;AAEJ;AAEA,mBAAmB,eAAe;AAAA,EAChC,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AACf;AAEA,MAAM,QAAQ;AAAA,EAIZ,UAAU,UAAU,KAAK,YAAY,mBAAmB;AAAA,EAIxD,UAAU,UAAU,OAAO,YAAY,cAAc;AAAA,EAIrD,aAAa,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAIrE,UAAU,UAAU,KAAK,YAAY,2DAA2D;AAAA,EAIhG,OAAO,UAAU,OAAO,YAAY,2EAA2E;AACjH;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAEhE,6BAA6B,YAAY;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,QAAQ,iBAAiB;AACzC,SAAS,WAAW,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AACrB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAEtB,MAAM,qBAAqB,CAAC,EAAE,UAAU,OAAO,UAAU,aAAa,SAAS,MAAM;AACnF,QAAM,WAAW,OAAO,IAAI;AAC5B,YAAU,MAAM;AAMd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,eAAe;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,SAAS,OAAO,CAAC;AACrB,QAAM,WAAW,MAAM,MAAM,GAAG;AAChC,QAAM,eAAe,SAAS,GAAG,SAAS,QAAQ,SAAS,QAAQ,SAAS;AAC5E,SACE,oBAAC;AAAA,IACC,YACE,oBAAC;AAAA,MACC,cAAW;AAAA,MACX,OAAO,CAAC,WAAW,aAAa,UAAU,aAAa;AAAA,MACvD;AAAA,MACA,MAAM,oBAAC,cAAW;AAAA,MAClB,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS,MAAM;AACb,iBAAS,QAAQ,MAAM;AACvB,iBAAS,QAAQ,MAAM;AAAA,MACzB;AAAA,KACF;AAAA,IAGF,8BAAC;AAAA,MACC,eAAY;AAAA,MACZ,UAAU;AAAA,MACV,cAAW;AAAA,MACX;AAAA,MACA,WAAW,CAAC,MAAM,EAAE,eAAe;AAAA,MACnC,MAAK;AAAA,MACL;AAAA,MACA,UAAU,CAAC,MAAM;AAEf,cAAM,EAAE,OAAO,IAAI,EAAE;AACrB,iBAAS,kBAAkB;AACzB,iBAAO,eAAe;AAAA,QACxB;AACA,eAAO,WAAW,iBAAiB,CAAC;AACpC,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAmB;AAAA,KACrB;AAAA,GACF;AAEJ;AAEA,mBAAmB,eAAe;AAAA,EAChC,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AACf;AAEA,MAAM,QAAQ;AAAA,EAIZ,UAAU,UAAU,KAAK,YAAY,mBAAmB;AAAA,EAIxD,UAAU,UAAU,OAAO,YAAY,cAAc;AAAA,EAIrD,aAAa,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAIrE,UAAU,UAAU,KAAK,YAAY,2DAA2D;AAAA,EAIhG,OAAO,UAAU,OAAO,YAAY,2EAA2E;AACjH;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAEhE,6BAA6B,YAAY;",
   "names": []
 }

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

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

package/dist/esm/MobileDropdownMenu/MobileDropdownInput.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { styled } from "@elliemae/ds-system";
 import PropTypes from "prop-types";
 import { focus } from "@elliemae/ds-system";
@@ -39,11 +39,12 @@ const CaretWrap = styled.span`
   justify-content: center;
   align-items: center;
 `;
-const Caret = ({ onClick }) => /* @__PURE__ */ React2.createElement(CaretWrap, {
-  onClick
-}, /* @__PURE__ */ React2.createElement(ChevronDown, {
-  color: ["brand-primary", "600"]
-}));
+const Caret = ({ onClick }) => /* @__PURE__ */ jsx(CaretWrap, {
+  onClick,
+  children: /* @__PURE__ */ jsx(ChevronDown, {
+    color: ["brand-primary", "600"]
+  })
+});
 Caret.propTypes = {
   onClick: PropTypes.func.isRequired
 };
@@ -51,15 +52,19 @@ const DSMobileDropdownTriggerInput = ({
   inputProps,
   caretProps,
   selectedItemsText
-}) => /* @__PURE__ */ React2.createElement(MobileDropdownInputWrap, {
-  "data-testid": "ds-mobile-ddwn-menu"
-}, /* @__PURE__ */ React2.createElement(MobileDropdownInput, {
-  ...inputProps,
-  readOnly: true,
-  value: selectedItemsText
-}), /* @__PURE__ */ React2.createElement(Caret, {
-  ...caretProps
-}));
+}) => /* @__PURE__ */ jsxs(MobileDropdownInputWrap, {
+  "data-testid": "ds-mobile-ddwn-menu",
+  children: [
+    /* @__PURE__ */ jsx(MobileDropdownInput, {
+      ...inputProps,
+      readOnly: true,
+      value: selectedItemsText ?? inputProps.value
+    }),
+    /* @__PURE__ */ jsx(Caret, {
+      ...caretProps
+    })
+  ]
+});
 export {
   Caret,
   DSMobileDropdownTriggerInput,

package/dist/esm/MobileDropdownMenu/MobileDropdownInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileDropdownMenu/MobileDropdownInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport PropTypes from 'prop-types';\nimport { focus } from '@elliemae/ds-system';\nimport { ChevronDown } from '@elliemae/ds-icons';\n\nexport const MobileDropdownInput = styled.input`\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  caret-color: transparent;\n  padding-right: 32px;\n  padding-left: 10px;\n  border-radius: 2px;\n  width: 100%;\n  background: ${(props) => props.theme.colors.neutral['000']};\n  height: 32px;\n  line-height: 32px;\n  border: solid 1px ${(props) => props.theme.colors.neutral[200]};\n\n  &:active,\n  &:focus {\n    ${(props) => focus(props.theme.colors.brand[700])}\n  }\n`;\n\nexport const MobileDropdownInputWrap = styled.span`\n  position: relative;\n  width: 100%;\n  display: inline-block;\n  height: 32px;\n`;\n\nconst CaretWrap = styled.span`\n  width: 32px;\n  height: 32px;\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const Caret = ({ onClick }): JSX.Element => (\n  <CaretWrap onClick={onClick}>\n    <ChevronDown color={['brand-primary', '600']} />\n  </CaretWrap>\n);\n\nCaret.propTypes = {\n  onClick: PropTypes.func.isRequired,\n};\n\nexport const DSMobileDropdownTriggerInput = ({\n  inputProps,\n  caretProps,\n  selectedItemsText,\n}: {\n  inputProps: Record<string, unknown>;\n  caretProps: Record<string, unknown>;\n  selectedItemsText?: string;\n}): JSX.Element => (\n  <MobileDropdownInputWrap data-testid=\"ds-mobile-ddwn-menu\">\n    <MobileDropdownInput {...inputProps} readOnly value={selectedItemsText} />\n\n    <Caret {...caretProps} />\n  </MobileDropdownInputWrap>\n);\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEO,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,sBAGhC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,CAAC,UAAU,MAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAI7C,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWlB,MAAM,QAAQ,CAAC,EAAE,cACtB,qCAAC;AAAA,EAAU;AAAA,GACT,qCAAC;AAAA,EAAY,OAAO,CAAC,iBAAiB,KAAK;AAAA,CAAG,CAChD;AAGF,MAAM,YAAY;AAAA,EAChB,SAAS,UAAU,KAAK;AAC1B;AAEO,MAAM,+BAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,MAMA,qCAAC;AAAA,EAAwB,eAAY;AAAA,GACnC,qCAAC;AAAA,EAAqB,GAAG;AAAA,EAAY,UAAQ;AAAA,EAAC,OAAO;AAAA,CAAmB,GAExE,qCAAC;AAAA,EAAO,GAAG;AAAA,CAAY,CACzB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport PropTypes from 'prop-types';\nimport { focus } from '@elliemae/ds-system';\nimport { ChevronDown } from '@elliemae/ds-icons';\n\nexport const MobileDropdownInput = styled.input`\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  caret-color: transparent;\n  padding-right: 32px;\n  padding-left: 10px;\n  border-radius: 2px;\n  width: 100%;\n  background: ${(props) => props.theme.colors.neutral['000']};\n  height: 32px;\n  line-height: 32px;\n  border: solid 1px ${(props) => props.theme.colors.neutral[200]};\n\n  &:active,\n  &:focus {\n    ${(props) => focus(props.theme.colors.brand[700])}\n  }\n`;\n\nexport const MobileDropdownInputWrap = styled.span`\n  position: relative;\n  width: 100%;\n  display: inline-block;\n  height: 32px;\n`;\n\nconst CaretWrap = styled.span`\n  width: 32px;\n  height: 32px;\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const Caret = ({ onClick }): JSX.Element => (\n  <CaretWrap onClick={onClick}>\n    <ChevronDown color={['brand-primary', '600']} />\n  </CaretWrap>\n);\n\nCaret.propTypes = {\n  onClick: PropTypes.func.isRequired,\n};\n\nexport const DSMobileDropdownTriggerInput = ({\n  inputProps,\n  caretProps,\n  selectedItemsText,\n}: {\n  inputProps: Record<string, unknown>;\n  caretProps: Record<string, unknown>;\n  selectedItemsText?: string;\n}): JSX.Element => (\n  <MobileDropdownInputWrap data-testid=\"ds-mobile-ddwn-menu\">\n    <MobileDropdownInput {...inputProps} readOnly value={selectedItemsText ?? inputProps.value} />\n\n    <Caret {...caretProps} />\n  </MobileDropdownInputWrap>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,cAAc;AACvB,OAAO,eAAe;AACtB,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAErB,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,sBAGhC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,CAAC,UAAU,MAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAI7C,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWlB,MAAM,QAAQ,CAAC,EAAE,QAAQ,MAC9B,oBAAC;AAAA,EAAU;AAAA,EACT,8BAAC;AAAA,IAAY,OAAO,CAAC,iBAAiB,KAAK;AAAA,GAAG;AAAA,CAChD;AAGF,MAAM,YAAY;AAAA,EAChB,SAAS,UAAU,KAAK;AAC1B;AAEO,MAAM,+BAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AACF,MAKE,qBAAC;AAAA,EAAwB,eAAY;AAAA,EACnC;AAAA,wBAAC;AAAA,MAAqB,GAAG;AAAA,MAAY,UAAQ;AAAA,MAAC,OAAO,qBAAqB,WAAW;AAAA,KAAO;AAAA,IAE5F,oBAAC;AAAA,MAAO,GAAG;AAAA,KAAY;AAAA;AAAA,CACzB;",
   "names": []
 }

package/dist/esm/MobileDropdownMenu/MobileDropdownMenu.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React2, { useRef, useState } from "react";
 import { PropTypes, describe } from "@elliemae/ds-utilities";
 import {
@@ -24,49 +25,62 @@ const DSMobileDropdownMenu = ({
 }) => {
   const [menuOpen, setMenuOpen] = useState(false);
   const inputRef = useRef(null);
-  const inputProps = React2.useMemo(() => ({
-    readOnly: true,
-    value,
-    onClick: () => setMenuOpen(true),
-    ref: inputRef,
-    placeholder
-  }), [value, placeholder]);
-  const caretProps = React2.useMemo(() => ({
-    onClick: () => {
-      inputRef.current.focus();
-      setMenuOpen(true);
-    }
-  }), []);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DSMobileDropdownTriggerInput, {
-    inputProps,
-    caretProps
-  }), menuOpen ? /* @__PURE__ */ React2.createElement(DSMobileContextMenu, {
-    title,
-    open: true,
-    onChange: (_, e) => {
-      setMenuOpen(false);
-    },
-    onClickOutside: () => setMenuOpen(false)
-  }, options.map((opt, i) => /* @__PURE__ */ React2.createElement(DSMobileContextMenuItem, {
-    key: "ddwn".concat(`${i}`),
-    title: opt.label,
-    value: opt.value,
-    isSelected: itemsProps.isItemSelected(opt),
-    onClick: (e) => {
-      setMenuOpen(false);
-      itemsProps.onClick(opt, e);
-    },
-    label: itemsProps.label,
-    leftProp: itemsProps.leftProp,
-    isGroup: itemsProps.isGroup,
-    isMulti: itemsProps.isMulti,
-    singleSelect: itemsProps.singleSelect
-  }))) : null);
+  const inputProps = React2.useMemo(
+    () => ({
+      readOnly: true,
+      value,
+      onClick: () => setMenuOpen(true),
+      ref: inputRef,
+      placeholder
+    }),
+    [value, placeholder]
+  );
+  const caretProps = React2.useMemo(
+    () => ({
+      onClick: () => {
+        inputRef.current.focus();
+        setMenuOpen(true);
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx(DSMobileDropdownTriggerInput, {
+        inputProps,
+        caretProps
+      }),
+      menuOpen ? /* @__PURE__ */ jsx(DSMobileContextMenu, {
+        title,
+        open: true,
+        onChange: (_, e) => {
+          setMenuOpen(false);
+        },
+        onClickOutside: () => setMenuOpen(false),
+        children: options.map((opt, i) => /* @__PURE__ */ jsx(DSMobileContextMenuItem, {
+          title: opt.label,
+          value: opt.value,
+          isSelected: itemsProps.isItemSelected(opt),
+          onClick: (e) => {
+            setMenuOpen(false);
+            itemsProps.onClick(opt, e);
+          },
+          label: itemsProps.label,
+          leftProp: itemsProps.leftProp,
+          isGroup: itemsProps.isGroup,
+          isMulti: itemsProps.isMulti,
+          singleSelect: itemsProps.singleSelect
+        }, "ddwn".concat(`${i}`)))
+      }) : null
+    ]
+  });
 };
 const props = {
   placeholder: PropTypes.string.description("dropdown menu placeholder"),
   title: PropTypes.string.description("context menu menu title"),
-  options: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })).description("context menu options / items")
+  options: PropTypes.arrayOf(
+    PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })
+  ).description("context menu options / items")
 };
 DSMobileDropdownMenu.propTypes = props;
 DSMobileDropdownMenu.displayName = "DSMobileDropdownMenu";

package/dist/esm/MobileDropdownMenu/MobileDropdownMenu.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileDropdownMenu/MobileDropdownMenu.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport {\n  DSMobileContextMenu,\n  DSMobileContextMenuItem,\n} from '../MobileContextMenu';\n\nimport { DSMobileDropdownTriggerInput } from './MobileDropdownInput';\ninterface OptionT {\n  label: string;\n  value: string;\n}\ninterface DSMobileDropdownMenuPropsT {\n  placeholder: string;\n  value: string;\n  options: OptionT[];\n  title: string;\n  itemsProps: {\n    label?: string;\n    leftProp?: JSX.Element;\n    isGroup?: boolean;\n    isMulti?: boolean;\n    singleSelect?: boolean;\n    isItemSelected?: (opt: OptionT) => boolean;\n    onClick?: (opt: OptionT, e: any) => void;\n  };\n}\nconst DSMobileDropdownMenu = ({\n  placeholder,\n  options = [],\n  title,\n  value,\n  itemsProps = {\n    label: undefined,\n    leftProp: undefined,\n    isGroup: false,\n    isMulti: false,\n    singleSelect: false,\n    isItemSelected: () => false,\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onClick: () => {},\n  },\n}: DSMobileDropdownMenuPropsT): JSX.Element => {\n  const [menuOpen, setMenuOpen] = useState(false);\n  const inputRef = useRef(null);\n  const inputProps = React.useMemo(\n    () => ({\n      readOnly: true,\n      value,\n      onClick: () => setMenuOpen(true),\n      ref: inputRef,\n      placeholder,\n    }),\n    [value, placeholder],\n  );\n  const caretProps = React.useMemo(\n    () => ({\n      onClick: () => {\n        inputRef.current.focus();\n        setMenuOpen(true);\n      },\n    }),\n    [],\n  );\n  return (\n    <>\n      <DSMobileDropdownTriggerInput\n        inputProps={inputProps}\n        caretProps={caretProps}\n      />\n      {menuOpen ? (\n        <DSMobileContextMenu\n          title={title}\n          open\n          onChange={(_, e) => {\n            setMenuOpen(false);\n          }}\n          onClickOutside={() => setMenuOpen(false)}\n        >\n          {options.map((opt, i) => (\n            <DSMobileContextMenuItem\n              key={'ddwn'.concat(`${i}`)}\n              title={opt.label}\n              value={opt.value}\n              isSelected={itemsProps.isItemSelected(opt)}\n              onClick={(e) => {\n                setMenuOpen(false);\n                itemsProps.onClick(opt, e);\n              }}\n              label={itemsProps.label}\n              leftProp={itemsProps.leftProp}\n              isGroup={itemsProps.isGroup}\n              isMulti={itemsProps.isMulti}\n              singleSelect={itemsProps.singleSelect}\n            />\n          ))}\n        </DSMobileContextMenu>\n      ) : null}\n    </>\n  );\n};\n\nconst props = {\n  /** dropdown menu placeholder */\n  placeholder: PropTypes.string.description('dropdown menu placeholder'),\n  /** context menu menu title */\n  title: PropTypes.string.description('context menu menu title'),\n  /** context menu options / items */\n  options: PropTypes.arrayOf(\n    PropTypes.shape({ value: PropTypes.string, label: PropTypes.string }),\n  ).description('context menu options / items'),\n};\n\nDSMobileDropdownMenu.propTypes = props;\nDSMobileDropdownMenu.displayName = 'DSMobileDropdownMenu';\nconst DSMobileDropdownMenuWithSchema = describe(DSMobileDropdownMenu);\nDSMobileDropdownMenuWithSchema.propTypes = props;\n\nexport { DSMobileDropdownMenu, DSMobileDropdownMenuWithSchema };\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AAAA;AAAA;AAAA;AAKA;AAoBA,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,IACT,cAAc;AAAA,IACd,gBAAgB,MAAM;AAAA,IAEtB,SAAS,MAAM;AAAA,IAAC;AAAA,EAClB;AAAA,MAC6C;AAC7C,QAAM,CAAC,UAAU,eAAe,SAAS,KAAK;AAC9C,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,aAAa,OAAM,QACvB,MAAO;AAAA,IACL,UAAU;AAAA,IACV;AAAA,IACA,SAAS,MAAM,YAAY,IAAI;AAAA,IAC/B,KAAK;AAAA,IACL;AAAA,EACF,IACA,CAAC,OAAO,WAAW,CACrB;AACA,QAAM,aAAa,OAAM,QACvB,MAAO;AAAA,IACL,SAAS,MAAM;AACb,eAAS,QAAQ,MAAM;AACvB,kBAAY,IAAI;AAAA,IAClB;AAAA,EACF,IACA,CAAC,CACH;AACA,SACE,4DACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,GACF,GACC,WACC,qCAAC;AAAA,IACC;AAAA,IACA,MAAI;AAAA,IACJ,UAAU,CAAC,GAAG,MAAM;AAClB,kBAAY,KAAK;AAAA,IACnB;AAAA,IACA,gBAAgB,MAAM,YAAY,KAAK;AAAA,KAEtC,QAAQ,IAAI,CAAC,KAAK,MACjB,qCAAC;AAAA,IACC,KAAK,OAAO,OAAO,GAAG,GAAG;AAAA,IACzB,OAAO,IAAI;AAAA,IACX,OAAO,IAAI;AAAA,IACX,YAAY,WAAW,eAAe,GAAG;AAAA,IACzC,SAAS,CAAC,MAAM;AACd,kBAAY,KAAK;AACjB,iBAAW,QAAQ,KAAK,CAAC;AAAA,IAC3B;AAAA,IACA,OAAO,WAAW;AAAA,IAClB,UAAU,WAAW;AAAA,IACrB,SAAS,WAAW;AAAA,IACpB,SAAS,WAAW;AAAA,IACpB,cAAc,WAAW;AAAA,GAC3B,CACD,CACH,IACE,IACN;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,aAAa,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAErE,OAAO,UAAU,OAAO,YAAY,yBAAyB;AAAA,EAE7D,SAAS,UAAU,QACjB,UAAU,MAAM,EAAE,OAAO,UAAU,QAAQ,OAAO,UAAU,OAAO,CAAC,CACtE,EAAE,YAAY,8BAA8B;AAC9C;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
-  "names": []
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,OAAOA,UAAS,QAAQ,gBAAgB;AACxC,SAAS,WAAW,gBAAgB;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oCAAoC;AAoB7C,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,IACT,cAAc;AAAA,IACd,gBAAgB,MAAM;AAAA,IAEtB,SAAS,MAAM;AAAA,IAAC;AAAA,EAClB;AACF,MAA+C;AAC7C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,aAAaA,OAAM;AAAA,IACvB,OAAO;AAAA,MACL,UAAU;AAAA,MACV;AAAA,MACA,SAAS,MAAM,YAAY,IAAI;AAAA,MAC/B,KAAK;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AACA,QAAM,aAAaA,OAAM;AAAA,IACvB,OAAO;AAAA,MACL,SAAS,MAAM;AACb,iBAAS,QAAQ,MAAM;AACvB,oBAAY,IAAI;AAAA,MAClB;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AACA,SACE;AAAA,IACE;AAAA,0BAAC;AAAA,QACC;AAAA,QACA;AAAA,OACF;AAAA,MACC,WACC,oBAAC;AAAA,QACC;AAAA,QACA,MAAI;AAAA,QACJ,UAAU,CAAC,GAAG,MAAM;AAClB,sBAAY,KAAK;AAAA,QACnB;AAAA,QACA,gBAAgB,MAAM,YAAY,KAAK;AAAA,QAEtC,kBAAQ,IAAI,CAAC,KAAK,MACjB,oBAAC;AAAA,UAEC,OAAO,IAAI;AAAA,UACX,OAAO,IAAI;AAAA,UACX,YAAY,WAAW,eAAe,GAAG;AAAA,UACzC,SAAS,CAAC,MAAM;AACd,wBAAY,KAAK;AACjB,uBAAW,QAAQ,KAAK,CAAC;AAAA,UAC3B;AAAA,UACA,OAAO,WAAW;AAAA,UAClB,UAAU,WAAW;AAAA,UACrB,SAAS,WAAW;AAAA,UACpB,SAAS,WAAW;AAAA,UACpB,cAAc,WAAW;AAAA,WAZpB,OAAO,OAAO,GAAG,GAAG,CAa3B,CACD;AAAA,OACH,IACE;AAAA;AAAA,GACN;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,aAAa,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAErE,OAAO,UAAU,OAAO,YAAY,yBAAyB;AAAA,EAE7D,SAAS,UAAU;AAAA,IACjB,UAAU,MAAM,EAAE,OAAO,UAAU,QAAQ,OAAO,UAAU,OAAO,CAAC;AAAA,EACtE,EAAE,YAAY,8BAA8B;AAC9C;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
+  "names": ["React"]
 }

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

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

package/dist/esm/MobileEmtpyState/MobileEmptyState.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { styled } from "@elliemae/ds-system";
 import { PropTypes, describe } from "@elliemae/ds-utilities";
 import { Search } from "@elliemae/ds-icons";
@@ -14,14 +14,21 @@ const Label = styled.p`
   color: ${(props2) => props2.theme.colors.neutral["600"]};
   font-size: ${(props2) => props2.theme.space.xs};
   font-weight: ${(props2) => props2.theme.fontWeights.semibold};
-  min-width: 132px;
 `;
-const DSMobileEmptyState = ({ label = "No search results found." }) => /* @__PURE__ */ React2.createElement(Wrapper, null, /* @__PURE__ */ React2.createElement(Search, {
-  size: "xxl",
-  color: ["neutral", 400]
-}), /* @__PURE__ */ React2.createElement(Label, null, label));
+const DSMobileEmptyState = ({ label = "No search results found.", Icon }) => /* @__PURE__ */ jsxs(Wrapper, {
+  children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, {}) : /* @__PURE__ */ jsx(Search, {
+      size: "xxl",
+      color: ["neutral", 400]
+    }),
+    /* @__PURE__ */ jsx(Label, {
+      children: label
+    })
+  ]
+});
 const props = {
-  label: PropTypes.string.description("empty state label")
+  label: PropTypes.string.description("empty state label"),
+  icon: PropTypes.node.description("empty state icon")
 };
 DSMobileEmptyState.propTypes = props;
 DSMobileEmptyState.displayName = "DSMobileEmptyState";

package/dist/esm/MobileEmtpyState/MobileEmptyState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileEmtpyState/MobileEmptyState.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Search } from '@elliemae/ds-icons';\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n`;\n\nconst Label = styled.p`\n  color: ${(props) => props.theme.colors.neutral['600']};\n  font-size: ${(props) => props.theme.space.xs};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  min-width: 132px;\n`;\n\nconst DSMobileEmptyState = ({ label = 'No search results found.' }) => (\n  <Wrapper>\n    <Search size=\"xxl\" color={['neutral', 400]} />\n    <Label>{label}</Label>\n  </Wrapper>\n);\n\nconst props = {\n  /** empty state label */\n  label: PropTypes.string.description('empty state label'),\n};\n\nDSMobileEmptyState.propTypes = props;\nDSMobileEmptyState.displayName = 'DSMobileEmptyState';\nconst DSMobileEmptyStateWithSchema = describe(DSMobileEmptyState);\nDSMobileEmptyStateWithSchema.propTypes = props;\n\nexport { DSMobileEmptyState, DSMobileEmptyStateWithSchema };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,QAAQ,OAAO;AAAA,WACV,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,eAClC,CAAC,WAAU,OAAM,MAAM,MAAM;AAAA,iBAC3B,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAAA;AAIpD,MAAM,qBAAqB,CAAC,EAAE,QAAQ,iCACpC,qCAAC,eACC,qCAAC;AAAA,EAAO,MAAK;AAAA,EAAM,OAAO,CAAC,WAAW,GAAG;AAAA,CAAG,GAC5C,qCAAC,aAAO,KAAM,CAChB;AAGF,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY,mBAAmB;AACzD;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Search } from '@elliemae/ds-icons';\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n`;\n\nconst Label = styled.p`\n  color: ${(props) => props.theme.colors.neutral['600']};\n  font-size: ${(props) => props.theme.space.xs};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\ninterface EmptyStateT {\n  label: string;\n  Icon: () => JSX.Element;\n}\n\nconst DSMobileEmptyState: React.ComponentType<EmptyStateT> = ({ label = 'No search results found.', Icon }) => (\n  <Wrapper>\n    {Icon ? <Icon /> : <Search size=\"xxl\" color={['neutral', 400]} />}\n    <Label>{label}</Label>\n  </Wrapper>\n);\n\nconst props = {\n  /** empty state label */\n  label: PropTypes.string.description('empty state label'),\n  icon: PropTypes.node.description('empty state icon'),\n};\n\nDSMobileEmptyState.propTypes = props;\nDSMobileEmptyState.displayName = 'DSMobileEmptyState';\nconst DSMobileEmptyStateWithSchema = describe(DSMobileEmptyState);\nDSMobileEmptyStateWithSchema.propTypes = props;\n\nexport { DSMobileEmptyState, DSMobileEmptyStateWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,cAAc;AACvB,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AAEvB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,QAAQ,OAAO;AAAA,WACV,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA,eAClC,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,iBAC3B,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA;AAQpD,MAAM,qBAAuD,CAAC,EAAE,QAAQ,4BAA4B,KAAK,MACvG,qBAAC;AAAA,EACE;AAAA,WAAO,oBAAC,QAAK,IAAK,oBAAC;AAAA,MAAO,MAAK;AAAA,MAAM,OAAO,CAAC,WAAW,GAAG;AAAA,KAAG;AAAA,IAC/D,oBAAC;AAAA,MAAO;AAAA,KAAM;AAAA;AAAA,CAChB;AAGF,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY,mBAAmB;AAAA,EACvD,MAAM,UAAU,KAAK,YAAY,kBAAkB;AACrD;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
+  "names": ["props"]
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileEmtpyState/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSMobileEmptyState } from './MobileEmptyState';\n\nexport * from './MobileEmptyState';\nexport default DSMobileEmptyState;\n"],
-  "mappings": "AAAA;ACAA;AAEA;AACA,IAAO,2BAAQ;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,0BAA0B;AAEnC,cAAc;AACd,IAAO,2BAAQ;",
   "names": []
 }

package/dist/esm/MobileFilterbar/Filterbar.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { styled } from "@elliemae/ds-system";
 import { describe, PropTypes } from "@elliemae/ds-utilities";
 import { __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
@@ -23,13 +23,21 @@ const Separator = styled.div`
     margin: 0;
   }
 `;
-const DSMobileFilterbar = ({ children }) => /* @__PURE__ */ React2.createElement(Grid, {
+const DSMobileFilterbar = ({ children }) => /* @__PURE__ */ jsxs(Grid, {
   rows: ["auto", "auto"],
-  "data-testid": "filter-bar-wrapper"
-}, /* @__PURE__ */ React2.createElement(Bar, null, children), /* @__PURE__ */ React2.createElement(Separator, null, /* @__PURE__ */ React2.createElement(MobileSeparator, {
-  margin: "xxs",
-  color: ["neutral", "300"]
-})));
+  "data-testid": "filter-bar-wrapper",
+  children: [
+    /* @__PURE__ */ jsx(Bar, {
+      children
+    }),
+    /* @__PURE__ */ jsx(Separator, {
+      children: /* @__PURE__ */ jsx(MobileSeparator, {
+        margin: "xxs",
+        color: ["neutral", "300"]
+      })
+    })
+  ]
+});
 const filterbarProps = {
   children: PropTypes.element.description("FilterBar Items").isRequired
 };