@elliemae/ds-mobile 3.1.5-rc.8 → 3.2.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/GlobalHeader/styles.js +6 -6
  2. package/dist/cjs/GlobalHeader/styles.js.map +2 -2
  3. package/dist/cjs/MobileDropdownMenu/MobileDropdownInput.js +4 -2
  4. package/dist/cjs/MobileDropdownMenu/MobileDropdownInput.js.map +2 -2
  5. package/dist/cjs/MobileListItem/MobileListItem.js +2 -3
  6. package/dist/cjs/MobileListItem/MobileListItem.js.map +2 -2
  7. package/dist/cjs/MobileSeparator/Separator.js.map +1 -1
  8. package/dist/esm/GlobalHeader/styles.js +6 -6
  9. package/dist/esm/GlobalHeader/styles.js.map +2 -2
  10. package/dist/esm/MobileDropdownMenu/MobileDropdownInput.js +4 -2
  11. package/dist/esm/MobileDropdownMenu/MobileDropdownInput.js.map +2 -2
  12. package/dist/esm/MobileListItem/MobileListItem.js +2 -3
  13. package/dist/esm/MobileListItem/MobileListItem.js.map +2 -2
  14. package/dist/esm/MobileSeparator/Separator.js.map +1 -1
  15. package/package.json +20 -20
package/dist/cjs/GlobalHeader/styles.js CHANGED
@@ -33,11 +33,13 @@ var import_ds_system = require("@elliemae/ds-system");
33
33
  var import_ds_system2 = require("@elliemae/ds-system");
34
34
  const Container = import_ds_system.styled.header`
35
35
  width: auto;
36
- height: 64px;
36
+ height: 48px;
37
37
  position: fixed;
38
+ top: 0;
38
39
  width: 100%;
40
+ z-index: 1000;
39
41
  background-color: ${(props) => props.theme.colors.brand[700]};
40
- padding: ${(props) => props.theme.space.xs};
42
+ padding: ${(props) => `${props.theme.space.xxs} ${props.theme.space.xs}`};
41
43
  color: ${(props) => props.theme.colors.neutral["000"]};
42
44
  `;
43
45
  const growLeft = import_ds_system2.kfrm`
@@ -60,8 +62,7 @@ const SearchWrapper = import_ds_system.styled.div`
60
62
  input {
61
63
  border-radius: 2px 0 0 2px;
62
64
  color: ${(props) => props.theme.colors.neutral["000"]};
63
- border: calc(0.30769rem * 0.25) solid
64
- ${(props) => props.theme.colors.brand[800]} !important;
65
+ border: calc(0.30769rem * 0.25) solid ${(props) => props.theme.colors.brand[800]} !important;
65
66
  &:focus {
66
67
  border-right: none !important;
67
68
  }
@@ -70,8 +71,7 @@ const SearchWrapper = import_ds_system.styled.div`
70
71
  }
71
72
  }
72
73
  .em-ds-input__clearable {
73
- border: calc(0.30769rem * 0.25) solid
74
- ${(props) => props.theme.colors.brand[800]} !important;
74
+ border: calc(0.30769rem * 0.25) solid ${(props) => props.theme.colors.brand[800]} !important;
75
75
  }
76
76
  }
77
77
 
package/dist/cjs/GlobalHeader/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/GlobalHeader/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { kfrm, css } from '@elliemae/ds-system';\n\nexport const Container = styled.header`\n width: auto;\n height: 64px;\n position: fixed;\n width: 100%;\n background-color: ${(props) => props.theme.colors.brand[700]};\n padding: ${(props) => props.theme.space.xs};\n color: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst growLeft = kfrm`\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n`;\n\nexport const SearchWrapper = styled.div`\n background-color: ${(props) => props.theme.colors.brand[600]};\n ${css`\n animation: ${growLeft} 1s;\n `}\n float: right;\n width: 100%;\n border-radius: 4px;\n .dsInput {\n input {\n border-radius: 2px 0 0 2px;\n color: ${(props) => props.theme.colors.neutral['000']};\n border: calc(0.30769rem * 0.25) solid\n ${(props) => props.theme.colors.brand[800]} !important;\n &:focus {\n border-right: none !important;\n }\n &::placeholder {\n color: ${(props) => props.theme.colors.neutral['000']};\n }\n }\n .em-ds-input__clearable {\n border: calc(0.30769rem * 0.25) solid\n ${(props) => props.theme.colors.brand[800]} !important;\n }\n }\n\n .dsButton {\n border-color: ${(props) => props.theme.colors.brand[800]} !important;\n border-radius: 0 2px 2px 0;\n border-left: none;\n }\n svg,\n svg:not([fill]) {\n fill: ${(props) => props.theme.colors.neutral['000']};\n }\n`;\n\nexport const Icon = styled.div`\n margin-right: ${(props) => props.theme.space.xs};\n`;\n\nexport const Label = styled.div`\n font-family: ${(props) => props.theme.fonts.default};\n font-weight: ${(props) => props.theme.fontWeights.regular};\n font-size: 25px;\n line-height: 32px;\n`;\n\nexport const RightSection = styled.div`\n padding-top: 5px;\n`;\n\nexport const MainSection = styled.div`\n display: flex;\n flex-direction: row;\n height: 32px;\n span {\n flex-grow: 1;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,wBAA0B;AAEnB,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKV,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,aAC7C,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGjD,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASV,MAAM,gBAAgB,wBAAO;AAAA,sBACd,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,IACtD;AAAA,iBACa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,UAE3C,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,iBAK7B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAK7C,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,oBAK1B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM5C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,MAAM,OAAO,wBAAO;AAAA,kBACT,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGxC,MAAM,QAAQ,wBAAO;AAAA,iBACX,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC7B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAK7C,MAAM,eAAe,wBAAO;AAAA;AAAA;AAI5B,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { kfrm, css } from '@elliemae/ds-system';\n\nexport const Container = styled.header`\n width: auto;\n height: 48px;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 1000;\n background-color: ${(props) => props.theme.colors.brand[700]};\n padding: ${(props) => `${props.theme.space.xxs} ${props.theme.space.xs}`};\n color: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst growLeft = kfrm`\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n`;\n\nexport const SearchWrapper = styled.div`\n background-color: ${(props) => props.theme.colors.brand[600]};\n ${css`\n animation: ${growLeft} 1s;\n `}\n float: right;\n width: 100%;\n border-radius: 4px;\n .dsInput {\n input {\n border-radius: 2px 0 0 2px;\n color: ${(props) => props.theme.colors.neutral['000']};\n border: calc(0.30769rem * 0.25) solid ${(props) => props.theme.colors.brand[800]} !important;\n &:focus {\n border-right: none !important;\n }\n &::placeholder {\n color: ${(props) => props.theme.colors.neutral['000']};\n }\n }\n .em-ds-input__clearable {\n border: calc(0.30769rem * 0.25) solid ${(props) => props.theme.colors.brand[800]} !important;\n }\n }\n\n .dsButton {\n border-color: ${(props) => props.theme.colors.brand[800]} !important;\n border-radius: 0 2px 2px 0;\n border-left: none;\n }\n svg,\n svg:not([fill]) {\n fill: ${(props) => props.theme.colors.neutral['000']};\n }\n`;\n\nexport const Icon = styled.div`\n margin-right: ${(props) => props.theme.space.xs};\n`;\n\nexport const Label = styled.div`\n font-family: ${(props) => props.theme.fonts.default};\n font-weight: ${(props) => props.theme.fontWeights.regular};\n font-size: 25px;\n line-height: 32px;\n`;\n\nexport const RightSection = styled.div`\n padding-top: 5px;\n`;\n\nexport const MainSection = styled.div`\n display: flex;\n flex-direction: row;\n height: 32px;\n span {\n flex-grow: 1;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,wBAA0B;AAEnB,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOV,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,aAC7C,CAAC,UAAU,GAAG,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM;AAAA,WAC3D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGjD,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASV,MAAM,gBAAgB,wBAAO;AAAA,sBACd,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,IACtD;AAAA,iBACa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,8CACP,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKjE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,8CAIT,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,oBAK9D,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM5C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,MAAM,OAAO,wBAAO;AAAA,kBACT,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGxC,MAAM,QAAQ,wBAAO;AAAA,iBACX,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC7B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAK7C,MAAM,eAAe,wBAAO;AAAA;AAAA;AAI5B,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/cjs/MobileDropdownMenu/MobileDropdownInput.js CHANGED
@@ -94,10 +94,12 @@ Caret.propTypes = {
94
94
  };
95
95
  const DSMobileDropdownTriggerInput = ({
96
96
  inputProps,
97
- caretProps
97
+ caretProps,
98
+ selectedItemsText
98
99
  }) => /* @__PURE__ */ import_react.default.createElement(MobileDropdownInputWrap, {
99
100
  "data-testid": "ds-mobile-ddwn-menu"
100
101
  }, /* @__PURE__ */ import_react.default.createElement(MobileDropdownInput, __spreadProps(__spreadValues({}, inputProps), {
101
- readOnly: true
102
+ readOnly: true,
103
+ value: selectedItemsText
102
104
  })), /* @__PURE__ */ import_react.default.createElement(Caret, __spreadValues({}, caretProps)));
103
105
  //# sourceMappingURL=MobileDropdownInput.js.map
package/dist/cjs/MobileDropdownMenu/MobileDropdownInput.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/MobileDropdownMenu/MobileDropdownInput.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport PropTypes from 'prop-types';\nimport { focus } from '@elliemae/ds-system';\n\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}: {\n inputProps: Record<string, unknown>;\n caretProps: Record<string, unknown>;\n}): JSX.Element => (\n <MobileDropdownInputWrap data-testid=\"ds-mobile-ddwn-menu\">\n <MobileDropdownInput {...inputProps} readOnly />\n <Caret {...caretProps} />\n </MobileDropdownInputWrap>\n);\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAuB;AACvB,wBAAsB;AACtB,wBAAsB;AAEtB,sBAA4B;AAErB,MAAM,sBAAsB,wBAAO;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,6BAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAI7C,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWlB,MAAM,QAAQ,CAAC,EAAE,cACtB,mDAAC;AAAA,EAAU;AAAA,GACT,mDAAC;AAAA,EAAY,OAAO,CAAC,iBAAiB,KAAK;AAAA,CAAG,CAChD;AAGF,MAAM,YAAY;AAAA,EAChB,SAAS,0BAAU,KAAK;AAC1B;AAEO,MAAM,+BAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,MAKA,mDAAC;AAAA,EAAwB,eAAY;AAAA,GACnC,mDAAC,sDAAwB,aAAxB;AAAA,EAAoC,UAAQ;AAAA,EAAC,GAC9C,mDAAC,0BAAU,WAAY,CACzB;",
4
+ "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAuB;AACvB,wBAAsB;AACtB,wBAAsB;AACtB,sBAA4B;AAErB,MAAM,sBAAsB,wBAAO;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,6BAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAI7C,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWlB,MAAM,QAAQ,CAAC,EAAE,cACtB,mDAAC;AAAA,EAAU;AAAA,GACT,mDAAC;AAAA,EAAY,OAAO,CAAC,iBAAiB,KAAK;AAAA,CAAG,CAChD;AAGF,MAAM,YAAY;AAAA,EAChB,SAAS,0BAAU,KAAK;AAC1B;AAEO,MAAM,+BAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,MAMA,mDAAC;AAAA,EAAwB,eAAY;AAAA,GACnC,mDAAC,sDAAwB,aAAxB;AAAA,EAAoC,UAAQ;AAAA,EAAC,OAAO;AAAA,EAAmB,GAExE,mDAAC,0BAAU,WAAY,CACzB;",
6
6
  "names": []
7
7
  }
package/dist/cjs/MobileListItem/MobileListItem.js CHANGED
@@ -55,15 +55,14 @@ const MobileListItem = ({
55
55
  cols.push((0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.m));
56
56
  return /* @__PURE__ */ import_react.default.createElement(StyledContainer, {
57
57
  cols,
58
- height: theme.space.m,
58
+ height: "40px",
59
59
  width: "100%",
60
60
  pl: (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s),
61
61
  pr: (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s),
62
62
  gutter: "xs",
63
63
  "data-testid": `${dataTestid}--${value}`
64
64
  }, leftAddon && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
65
- alignItems: "center",
66
- justifyContent: "center"
65
+ alignItems: "center"
67
66
  }, leftAddon), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
68
67
  alignItems: "center"
69
68
  }, /* @__PURE__ */ import_react.default.createElement(StyledTitle, null, title)), rightAddon && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
package/dist/cjs/MobileListItem/MobileListItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/MobileListItem/MobileListItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\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;\nMobileListItem.displayName = 'MobileListItem';\nconst ListItemWithSchema = describe(MobileListItem);\nListItemWithSchema.propTypes = listItemProps;\n\nexport { DSMobileListItem, ListItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AACrB,wBAAsE;AAEtE,MAAM,kBAAkB,6BAAO,mBAAI;AAAA,gBACnB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,mBACnC,CAAC,UAAU,8BAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAEtE,MAAM,cAAc,wBAAO;AAAA,iBACV,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,gCAAS;AAAA;AAGb,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,CAAC;AACf,MAAI;AAAW,SAAK,QAAQ,gDAAyB,MAAM,MAAM,CAAC,CAAC;AACnE,MAAI;AAAY,SAAK,KAAK,gDAAyB,MAAM,MAAM,CAAC,CAAC;AACjE,SACE,mDAAC;AAAA,IACC;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,OAAM;AAAA,IACN,IAAI,gDAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,IAAI,gDAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,QAAO;AAAA,IACP,eAAa,GAAG,eAAe;AAAA,KAE9B,aACC,mDAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,SACH,GAEF,mDAAC;AAAA,IAAK,YAAW;AAAA,KACf,mDAAC,mBAAa,KAAM,CACtB,GACC,cACC,mDAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,UACH,CAEJ;AAEJ;AAEA,MAAM,mBAAmB,iCAAU,cAAc;AAEjD,MAAM,gBAAgB;AAAA,EACpB,WAAW,8BAAU,QAAQ,YAAY,4BAA4B;AAAA,EACrE,YAAY,8BAAU,QAAQ,YAAY,6BAA6B;AAAA,EACvE,OAAO,8BAAU,OAAO,YAAY,cAAc,EAAE;AAAA,EACpD,OAAO,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAC/D,yCACF;AAAA,EACA,YAAY,8BAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,kBAAkB;AAAA,EAC/F,OAAO,8BAAU,OAAO,YAAY,EAAE;AACxC;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,qBAAqB,kCAAS,cAAc;AAClD,mBAAmB,YAAY;",
4
+ "sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\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=\"40px\"\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 && <Grid alignItems=\"center\">{leftAddon}</Grid>}\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;\nMobileListItem.displayName = 'MobileListItem';\nconst ListItemWithSchema = describe(MobileListItem);\nListItemWithSchema.propTypes = listItemProps;\n\nexport { DSMobileListItem, ListItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AACrB,wBAAsE;AAEtE,MAAM,kBAAkB,6BAAO,mBAAI;AAAA,gBACnB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,mBACnC,CAAC,UAAU,8BAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAEtE,MAAM,cAAc,wBAAO;AAAA,iBACV,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,gCAAS;AAAA;AAGb,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,CAAC;AACf,MAAI;AAAW,SAAK,QAAQ,gDAAyB,MAAM,MAAM,CAAC,CAAC;AACnE,MAAI;AAAY,SAAK,KAAK,gDAAyB,MAAM,MAAM,CAAC,CAAC;AACjE,SACE,mDAAC;AAAA,IACC;AAAA,IACA,QAAO;AAAA,IACP,OAAM;AAAA,IACN,IAAI,gDAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,IAAI,gDAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,QAAO;AAAA,IACP,eAAa,GAAG,eAAe;AAAA,KAE9B,aAAa,mDAAC;AAAA,IAAK,YAAW;AAAA,KAAU,SAAU,GACnD,mDAAC;AAAA,IAAK,YAAW;AAAA,KACf,mDAAC,mBAAa,KAAM,CACtB,GACC,cACC,mDAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,UACH,CAEJ;AAEJ;AAEA,MAAM,mBAAmB,iCAAU,cAAc;AAEjD,MAAM,gBAAgB;AAAA,EACpB,WAAW,8BAAU,QAAQ,YAAY,4BAA4B;AAAA,EACrE,YAAY,8BAAU,QAAQ,YAAY,6BAA6B;AAAA,EACvE,OAAO,8BAAU,OAAO,YAAY,cAAc,EAAE;AAAA,EACpD,OAAO,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAC/D,yCACF;AAAA,EACA,YAAY,8BAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,kBAAkB;AAAA,EAC/F,OAAO,8BAAU,OAAO,YAAY,EAAE;AACxC;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,qBAAqB,kCAAS,cAAc;AAClD,mBAAmB,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/cjs/MobileSeparator/Separator.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/MobileSeparator/Separator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst Separator = styled(Grid)`\n border-top: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n border-left: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n`;\n\nconst MobileSeparator = ({ color = ['neutral', '800'], direction = 'horizontal', type = 'solid', margin = 'xs' }) => {\n const orientation = direction === 'vertical' ? 'height' : 'width';\n const xORy = direction === 'vertical' ? 'mx' : 'my';\n const styles = {\n width: 0,\n height: 0,\n [orientation]: '100%',\n [xORy]: margin,\n borderType: type,\n color,\n };\n return <Separator {...styles} />;\n};\n\nconst mobileSeparatorProps = {\n type: PropTypes.oneOf(['solid', 'dashed']).description('Style type of separator').defaultValue('solid'),\n direction: PropTypes.oneOf(['vertical', 'horizontal'])\n .description('Direction of the separator')\n .defaultValue('horizontal'),\n color: PropTypes.array.description('Color of the separator').defaultValue(['neutral', '800']),\n margin: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'])\n .description('Margin of the separator')\n .defaultValue('xs'),\n};\n\nMobileSeparator.propTypes = mobileSeparatorProps;\nMobileSeparator.displayName = 'MobileSeparator';\nconst MobileSeparatorWithSchema = describe(MobileSeparator);\nMobileSeparatorWithSchema.propTypes = mobileSeparatorProps;\n\nexport { MobileSeparatorWithSchema };\nexport default MobileSeparator;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AAErB,MAAM,YAAY,6BAAO,mBAAI;AAAA,gBACb,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA,iBAC5E,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA;AAG9F,MAAM,kBAAkB,CAAC,EAAE,QAAQ,CAAC,WAAW,KAAK,GAAG,YAAY,cAAc,OAAO,SAAS,SAAS,WAAW;AACnH,QAAM,cAAc,cAAc,aAAa,WAAW;AAC1D,QAAM,OAAO,cAAc,aAAa,OAAO;AAC/C,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,KACP,cAAc;AAAA,KACd,OAAO;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,EACF;AACA,SAAO,mDAAC,8BAAc,OAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,8BAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,8BAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,8BAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,8BAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAC9D,YAAY,yBAAyB,EACrC,aAAa,IAAI;AACtB;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AAErB,MAAM,YAAY,6BAAO,mBAAI;AAAA,gBACb,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA,iBAC5E,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA;AAG9F,MAAM,kBAAkB,CAAC,EAAE,QAAQ,CAAC,WAAW,KAAK,GAAG,YAAY,cAAc,OAAO,SAAS,SAAS,WAAW;AACnH,QAAM,cAAc,cAAc,aAAa,WAAW;AAC1D,QAAM,OAAO,cAAc,aAAa,OAAO;AAC/C,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,CAAC,cAAc;AAAA,IACf,CAAC,OAAO;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,EACF;AACA,SAAO,mDAAC,8BAAc,OAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,8BAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,8BAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,8BAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,8BAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAC9D,YAAY,yBAAyB,EACrC,aAAa,IAAI;AACtB;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
6
6
  "names": []
7
7
  }
package/dist/esm/GlobalHeader/styles.js CHANGED
@@ -3,11 +3,13 @@ import { styled } from "@elliemae/ds-system";
3
3
  import { kfrm, css } from "@elliemae/ds-system";
4
4
  const Container = styled.header`
5
5
  width: auto;
6
- height: 64px;
6
+ height: 48px;
7
7
  position: fixed;
8
+ top: 0;
8
9
  width: 100%;
10
+ z-index: 1000;
9
11
  background-color: ${(props) => props.theme.colors.brand[700]};
10
- padding: ${(props) => props.theme.space.xs};
12
+ padding: ${(props) => `${props.theme.space.xxs} ${props.theme.space.xs}`};
11
13
  color: ${(props) => props.theme.colors.neutral["000"]};
12
14
  `;
13
15
  const growLeft = kfrm`
@@ -30,8 +32,7 @@ const SearchWrapper = styled.div`
30
32
  input {
31
33
  border-radius: 2px 0 0 2px;
32
34
  color: ${(props) => props.theme.colors.neutral["000"]};
33
- border: calc(0.30769rem * 0.25) solid
34
- ${(props) => props.theme.colors.brand[800]} !important;
35
+ border: calc(0.30769rem * 0.25) solid ${(props) => props.theme.colors.brand[800]} !important;
35
36
  &:focus {
36
37
  border-right: none !important;
37
38
  }
@@ -40,8 +41,7 @@ const SearchWrapper = styled.div`
40
41
  }
41
42
  }
42
43
  .em-ds-input__clearable {
43
- border: calc(0.30769rem * 0.25) solid
44
- ${(props) => props.theme.colors.brand[800]} !important;
44
+ border: calc(0.30769rem * 0.25) solid ${(props) => props.theme.colors.brand[800]} !important;
45
45
  }
46
46
  }
47
47
 
package/dist/esm/GlobalHeader/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/GlobalHeader/styles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { kfrm, css } from '@elliemae/ds-system';\n\nexport const Container = styled.header`\n width: auto;\n height: 64px;\n position: fixed;\n width: 100%;\n background-color: ${(props) => props.theme.colors.brand[700]};\n padding: ${(props) => props.theme.space.xs};\n color: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst growLeft = kfrm`\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n`;\n\nexport const SearchWrapper = styled.div`\n background-color: ${(props) => props.theme.colors.brand[600]};\n ${css`\n animation: ${growLeft} 1s;\n `}\n float: right;\n width: 100%;\n border-radius: 4px;\n .dsInput {\n input {\n border-radius: 2px 0 0 2px;\n color: ${(props) => props.theme.colors.neutral['000']};\n border: calc(0.30769rem * 0.25) solid\n ${(props) => props.theme.colors.brand[800]} !important;\n &:focus {\n border-right: none !important;\n }\n &::placeholder {\n color: ${(props) => props.theme.colors.neutral['000']};\n }\n }\n .em-ds-input__clearable {\n border: calc(0.30769rem * 0.25) solid\n ${(props) => props.theme.colors.brand[800]} !important;\n }\n }\n\n .dsButton {\n border-color: ${(props) => props.theme.colors.brand[800]} !important;\n border-radius: 0 2px 2px 0;\n border-left: none;\n }\n svg,\n svg:not([fill]) {\n fill: ${(props) => props.theme.colors.neutral['000']};\n }\n`;\n\nexport const Icon = styled.div`\n margin-right: ${(props) => props.theme.space.xs};\n`;\n\nexport const Label = styled.div`\n font-family: ${(props) => props.theme.fonts.default};\n font-weight: ${(props) => props.theme.fontWeights.regular};\n font-size: 25px;\n line-height: 32px;\n`;\n\nexport const RightSection = styled.div`\n padding-top: 5px;\n`;\n\nexport const MainSection = styled.div`\n display: flex;\n flex-direction: row;\n height: 32px;\n span {\n flex-grow: 1;\n }\n`;\n"],
5
- "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKV,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,aAC7C,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGjD,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASV,MAAM,gBAAgB,OAAO;AAAA,sBACd,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,IACtD;AAAA,iBACa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,UAE3C,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,iBAK7B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAK7C,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,oBAK1B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM5C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,MAAM,OAAO,OAAO;AAAA,kBACT,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGxC,MAAM,QAAQ,OAAO;AAAA,iBACX,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC7B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAK7C,MAAM,eAAe,OAAO;AAAA;AAAA;AAI5B,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { kfrm, css } from '@elliemae/ds-system';\n\nexport const Container = styled.header`\n width: auto;\n height: 48px;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 1000;\n background-color: ${(props) => props.theme.colors.brand[700]};\n padding: ${(props) => `${props.theme.space.xxs} ${props.theme.space.xs}`};\n color: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst growLeft = kfrm`\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n`;\n\nexport const SearchWrapper = styled.div`\n background-color: ${(props) => props.theme.colors.brand[600]};\n ${css`\n animation: ${growLeft} 1s;\n `}\n float: right;\n width: 100%;\n border-radius: 4px;\n .dsInput {\n input {\n border-radius: 2px 0 0 2px;\n color: ${(props) => props.theme.colors.neutral['000']};\n border: calc(0.30769rem * 0.25) solid ${(props) => props.theme.colors.brand[800]} !important;\n &:focus {\n border-right: none !important;\n }\n &::placeholder {\n color: ${(props) => props.theme.colors.neutral['000']};\n }\n }\n .em-ds-input__clearable {\n border: calc(0.30769rem * 0.25) solid ${(props) => props.theme.colors.brand[800]} !important;\n }\n }\n\n .dsButton {\n border-color: ${(props) => props.theme.colors.brand[800]} !important;\n border-radius: 0 2px 2px 0;\n border-left: none;\n }\n svg,\n svg:not([fill]) {\n fill: ${(props) => props.theme.colors.neutral['000']};\n }\n`;\n\nexport const Icon = styled.div`\n margin-right: ${(props) => props.theme.space.xs};\n`;\n\nexport const Label = styled.div`\n font-family: ${(props) => props.theme.fonts.default};\n font-weight: ${(props) => props.theme.fontWeights.regular};\n font-size: 25px;\n line-height: 32px;\n`;\n\nexport const RightSection = styled.div`\n padding-top: 5px;\n`;\n\nexport const MainSection = styled.div`\n display: flex;\n flex-direction: row;\n height: 32px;\n span {\n flex-grow: 1;\n }\n`;\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOV,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,aAC7C,CAAC,UAAU,GAAG,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM;AAAA,WAC3D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGjD,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASV,MAAM,gBAAgB,OAAO;AAAA,sBACd,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,IACtD;AAAA,iBACa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,8CACP,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKjE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,8CAIT,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,oBAK9D,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM5C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,MAAM,OAAO,OAAO;AAAA,kBACT,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGxC,MAAM,QAAQ,OAAO;AAAA,iBACX,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC7B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAK7C,MAAM,eAAe,OAAO;AAAA;AAAA;AAI5B,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/MobileDropdownMenu/MobileDropdownInput.js CHANGED
@@ -68,11 +68,13 @@ Caret.propTypes = {
68
68
  };
69
69
  const DSMobileDropdownTriggerInput = ({
70
70
  inputProps,
71
- caretProps
71
+ caretProps,
72
+ selectedItemsText
72
73
  }) => /* @__PURE__ */ React2.createElement(MobileDropdownInputWrap, {
73
74
  "data-testid": "ds-mobile-ddwn-menu"
74
75
  }, /* @__PURE__ */ React2.createElement(MobileDropdownInput, __spreadProps(__spreadValues({}, inputProps), {
75
- readOnly: true
76
+ readOnly: true,
77
+ value: selectedItemsText
76
78
  })), /* @__PURE__ */ React2.createElement(Caret, __spreadValues({}, caretProps)));
77
79
  export {
78
80
  Caret,
package/dist/esm/MobileDropdownMenu/MobileDropdownInput.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileDropdownMenu/MobileDropdownInput.tsx"],
4
- "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';\n\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}: {\n inputProps: Record<string, unknown>;\n caretProps: Record<string, unknown>;\n}): JSX.Element => (\n <MobileDropdownInputWrap data-testid=\"ds-mobile-ddwn-menu\">\n <MobileDropdownInput {...inputProps} readOnly />\n <Caret {...caretProps} />\n </MobileDropdownInputWrap>\n);\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEA;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,MAKA,qCAAC;AAAA,EAAwB,eAAY;AAAA,GACnC,qCAAC,sDAAwB,aAAxB;AAAA,EAAoC,UAAQ;AAAA,EAAC,GAC9C,qCAAC,0BAAU,WAAY,CACzB;",
4
+ "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"],
5
+ "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,sDAAwB,aAAxB;AAAA,EAAoC,UAAQ;AAAA,EAAC,OAAO;AAAA,EAAmB,GAExE,qCAAC,0BAAU,WAAY,CACzB;",
6
6
  "names": []
7
7
  }
package/dist/esm/MobileListItem/MobileListItem.js CHANGED
@@ -29,15 +29,14 @@ const MobileListItem = ({
29
29
  cols.push(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));
30
30
  return /* @__PURE__ */ React2.createElement(StyledContainer, {
31
31
  cols,
32
- height: theme.space.m,
32
+ height: "40px",
33
33
  width: "100%",
34
34
  pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
35
35
  pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
36
36
  gutter: "xs",
37
37
  "data-testid": `${dataTestid}--${value}`
38
38
  }, leftAddon && /* @__PURE__ */ React2.createElement(Grid, {
39
- alignItems: "center",
40
- justifyContent: "center"
39
+ alignItems: "center"
41
40
  }, leftAddon), /* @__PURE__ */ React2.createElement(Grid, {
42
41
  alignItems: "center"
43
42
  }, /* @__PURE__ */ React2.createElement(StyledTitle, null, title)), rightAddon && /* @__PURE__ */ React2.createElement(Grid, {
package/dist/esm/MobileListItem/MobileListItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileListItem/MobileListItem.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\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;\nMobileListItem.displayName = 'MobileListItem';\nconst ListItemWithSchema = describe(MobileListItem);\nListItemWithSchema.propTypes = listItemProps;\n\nexport { DSMobileListItem, ListItemWithSchema };\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,mBACnC,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAEtE,MAAM,cAAc,OAAO;AAAA,iBACV,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,SAAS;AAAA;AAGb,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,CAAC;AACf,MAAI;AAAW,SAAK,QAAQ,yBAAyB,MAAM,MAAM,CAAC,CAAC;AACnE,MAAI;AAAY,SAAK,KAAK,yBAAyB,MAAM,MAAM,CAAC,CAAC;AACjE,SACE,qCAAC;AAAA,IACC;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,OAAM;AAAA,IACN,IAAI,yBAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,IAAI,yBAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,QAAO;AAAA,IACP,eAAa,GAAG,eAAe;AAAA,KAE9B,aACC,qCAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,SACH,GAEF,qCAAC;AAAA,IAAK,YAAW;AAAA,KACf,qCAAC,mBAAa,KAAM,CACtB,GACC,cACC,qCAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,UACH,CAEJ;AAEJ;AAEA,MAAM,mBAAmB,UAAU,cAAc;AAEjD,MAAM,gBAAgB;AAAA,EACpB,WAAW,UAAU,QAAQ,YAAY,4BAA4B;AAAA,EACrE,YAAY,UAAU,QAAQ,YAAY,6BAA6B;AAAA,EACvE,OAAO,UAAU,OAAO,YAAY,cAAc,EAAE;AAAA,EACpD,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAC/D,yCACF;AAAA,EACA,YAAY,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,kBAAkB;AAAA,EAC/F,OAAO,UAAU,OAAO,YAAY,EAAE;AACxC;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,qBAAqB,SAAS,cAAc;AAClD,mBAAmB,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\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=\"40px\"\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 && <Grid alignItems=\"center\">{leftAddon}</Grid>}\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;\nMobileListItem.displayName = 'MobileListItem';\nconst ListItemWithSchema = describe(MobileListItem);\nListItemWithSchema.propTypes = listItemProps;\n\nexport { DSMobileListItem, ListItemWithSchema };\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,mBACnC,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAEtE,MAAM,cAAc,OAAO;AAAA,iBACV,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,SAAS;AAAA;AAGb,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,CAAC;AACf,MAAI;AAAW,SAAK,QAAQ,yBAAyB,MAAM,MAAM,CAAC,CAAC;AACnE,MAAI;AAAY,SAAK,KAAK,yBAAyB,MAAM,MAAM,CAAC,CAAC;AACjE,SACE,qCAAC;AAAA,IACC;AAAA,IACA,QAAO;AAAA,IACP,OAAM;AAAA,IACN,IAAI,yBAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,IAAI,yBAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,QAAO;AAAA,IACP,eAAa,GAAG,eAAe;AAAA,KAE9B,aAAa,qCAAC;AAAA,IAAK,YAAW;AAAA,KAAU,SAAU,GACnD,qCAAC;AAAA,IAAK,YAAW;AAAA,KACf,qCAAC,mBAAa,KAAM,CACtB,GACC,cACC,qCAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,UACH,CAEJ;AAEJ;AAEA,MAAM,mBAAmB,UAAU,cAAc;AAEjD,MAAM,gBAAgB;AAAA,EACpB,WAAW,UAAU,QAAQ,YAAY,4BAA4B;AAAA,EACrE,YAAY,UAAU,QAAQ,YAAY,6BAA6B;AAAA,EACvE,OAAO,UAAU,OAAO,YAAY,cAAc,EAAE;AAAA,EACpD,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAC/D,yCACF;AAAA,EACA,YAAY,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,kBAAkB;AAAA,EAC/F,OAAO,UAAU,OAAO,YAAY,EAAE;AACxC;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,qBAAqB,SAAS,cAAc;AAClD,mBAAmB,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/esm/MobileSeparator/Separator.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileSeparator/Separator.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst Separator = styled(Grid)`\n border-top: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n border-left: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n`;\n\nconst MobileSeparator = ({ color = ['neutral', '800'], direction = 'horizontal', type = 'solid', margin = 'xs' }) => {\n const orientation = direction === 'vertical' ? 'height' : 'width';\n const xORy = direction === 'vertical' ? 'mx' : 'my';\n const styles = {\n width: 0,\n height: 0,\n [orientation]: '100%',\n [xORy]: margin,\n borderType: type,\n color,\n };\n return <Separator {...styles} />;\n};\n\nconst mobileSeparatorProps = {\n type: PropTypes.oneOf(['solid', 'dashed']).description('Style type of separator').defaultValue('solid'),\n direction: PropTypes.oneOf(['vertical', 'horizontal'])\n .description('Direction of the separator')\n .defaultValue('horizontal'),\n color: PropTypes.array.description('Color of the separator').defaultValue(['neutral', '800']),\n margin: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'])\n .description('Margin of the separator')\n .defaultValue('xs'),\n};\n\nMobileSeparator.propTypes = mobileSeparatorProps;\nMobileSeparator.displayName = 'MobileSeparator';\nconst MobileSeparatorWithSchema = describe(MobileSeparator);\nMobileSeparatorWithSchema.propTypes = mobileSeparatorProps;\n\nexport { MobileSeparatorWithSchema };\nexport default MobileSeparator;\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO,IAAI;AAAA,gBACb,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA,iBAC5E,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA;AAG9F,MAAM,kBAAkB,CAAC,EAAE,QAAQ,CAAC,WAAW,KAAK,GAAG,YAAY,cAAc,OAAO,SAAS,SAAS,WAAW;AACnH,QAAM,cAAc,cAAc,aAAa,WAAW;AAC1D,QAAM,OAAO,cAAc,aAAa,OAAO;AAC/C,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,KACP,cAAc;AAAA,KACd,OAAO;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,EACF;AACA,SAAO,qCAAC,8BAAc,OAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,UAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,UAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,UAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,UAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAC9D,YAAY,yBAAyB,EACrC,aAAa,IAAI;AACtB;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO,IAAI;AAAA,gBACb,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA,iBAC5E,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA;AAG9F,MAAM,kBAAkB,CAAC,EAAE,QAAQ,CAAC,WAAW,KAAK,GAAG,YAAY,cAAc,OAAO,SAAS,SAAS,WAAW;AACnH,QAAM,cAAc,cAAc,aAAa,WAAW;AAC1D,QAAM,OAAO,cAAc,aAAa,OAAO;AAC/C,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,CAAC,cAAc;AAAA,IACf,CAAC,OAAO;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,EACF;AACA,SAAO,qCAAC,8BAAc,OAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,UAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,UAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,UAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,UAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAC9D,YAAY,yBAAyB,EACrC,aAAa,IAAI;AACtB;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-mobile",
3
- "version": "3.1.5-rc.8",
3
+ "version": "3.2.0-rc.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - System",
6
6
  "files": [
@@ -435,31 +435,31 @@
435
435
  "typeSafety": false
436
436
  },
437
437
  "dependencies": {
438
- "@elliemae/ds-accordion": "3.1.5-rc.8",
439
- "@elliemae/ds-backdrop": "3.1.5-rc.8",
440
- "@elliemae/ds-button": "3.1.5-rc.8",
441
- "@elliemae/ds-circular-progress-indicator": "3.1.5-rc.8",
442
- "@elliemae/ds-form": "3.1.5-rc.8",
443
- "@elliemae/ds-grid": "3.1.5-rc.8",
444
- "@elliemae/ds-icon": "3.1.5-rc.8",
445
- "@elliemae/ds-icons": "3.1.5-rc.8",
446
- "@elliemae/ds-indeterminate-progress-indicator": "3.1.5-rc.8",
447
- "@elliemae/ds-shared": "3.1.5-rc.8",
448
- "@elliemae/ds-system": "3.1.5-rc.8",
449
- "@elliemae/ds-tabs": "3.1.5-rc.8",
450
- "@elliemae/ds-truncated-expandable-text": "3.1.5-rc.8",
451
- "@elliemae/ds-utilities": "3.1.5-rc.8",
438
+ "@elliemae/ds-accordion": "3.2.0-rc.2",
439
+ "@elliemae/ds-backdrop": "3.2.0-rc.2",
440
+ "@elliemae/ds-button": "3.2.0-rc.2",
441
+ "@elliemae/ds-circular-progress-indicator": "3.2.0-rc.2",
442
+ "@elliemae/ds-form": "3.2.0-rc.2",
443
+ "@elliemae/ds-grid": "3.2.0-rc.2",
444
+ "@elliemae/ds-icon": "3.2.0-rc.2",
445
+ "@elliemae/ds-icons": "3.2.0-rc.2",
446
+ "@elliemae/ds-indeterminate-progress-indicator": "3.2.0-rc.2",
447
+ "@elliemae/ds-shared": "3.2.0-rc.2",
448
+ "@elliemae/ds-system": "3.2.0-rc.2",
449
+ "@elliemae/ds-tabs": "3.2.0-rc.2",
450
+ "@elliemae/ds-truncated-expandable-text": "3.2.0-rc.2",
451
+ "@elliemae/ds-utilities": "3.2.0-rc.2",
452
452
  "polished": "~3.6.7",
453
453
  "prop-types": "~15.8.1",
454
- "react-window": "~1.8.6",
454
+ "react-window": "~1.8.7",
455
455
  "react-window-infinite-loader": "~1.0.7"
456
456
  },
457
457
  "devDependencies": {
458
458
  "@elliemae/pui-theme": "~2.6.0",
459
- "@testing-library/jest-dom": "~5.16.2",
460
- "@testing-library/react": "~12.1.2",
459
+ "@testing-library/jest-dom": "~5.16.4",
460
+ "@testing-library/react": "~12.1.3",
461
461
  "@testing-library/user-event": "~13.5.0",
462
- "styled-components": "~5.3.3",
462
+ "styled-components": "~5.3.5",
463
463
  "styled-system": "~5.1.5"
464
464
  },
465
465
  "peerDependencies": {
@@ -467,7 +467,7 @@
467
467
  "lodash": "^4.17.21",
468
468
  "react": "~17.0.2",
469
469
  "react-dom": "^17.0.2",
470
- "styled-components": "^5.3.3",
470
+ "styled-components": "^5.3.5",
471
471
  "styled-system": "^5.1.5"
472
472
  },
473
473
  "scripts": {