npm - @elliemae/ds-mobile - Versions diffs - 3.16.0-next.2 → 3.16.0-next.4 - Mend

@elliemae/ds-mobile 3.16.0-next.2 → 3.16.0-next.4

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 (163) hide show

package/dist/esm/MobileListItem/MobileListItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileListItem/MobileListItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\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"],
   "mappings": "AAAA,YAAY,WAAW;AC6BnB,SASgB,KAThB;AA5BJ,SAAS,UAAU,iBAAiB;AACpC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,QAAQ,UAAU,WAAW,gCAAgC;AAEtE,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;AACF,MAAM;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;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAO;AAAA,MACP,OAAM;AAAA,MACN,IAAI,yBAAyB,MAAM,MAAM,CAAC;AAAA,MAC1C,IAAI,yBAAyB,MAAM,MAAM,CAAC;AAAA,MAC1C,QAAO;AAAA,MACP,eAAa,GAAG,eAAe;AAAA,MAE9B;AAAA,qBAAa,oBAAC,QAAK,YAAW,UAAU,qBAAU;AAAA,QACnD,oBAAC,QAAK,YAAW,UACf,8BAAC,eAAa,iBAAM,GACtB;AAAA,QACC,cACC,oBAAC,QAAK,YAAW,UAAS,gBAAe,UACtC,sBACH;AAAA;AAAA;AAAA,EAEJ;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;AAAA,IAC/D;AAAA,EACF;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;",
   "names": []
 }

package/dist/esm/MobileListItem/MobileListMultipleItem.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
-import { useGetGlobalAttributes } from "@elliemae/ds-utilities";
+import { useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
 import { StyledContainer } from "./style";
 const MobileListMultipleItem = (props) => {
   const { title, isSelected } = props;

package/dist/esm/MobileListItem/MobileListMultipleItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileListItem/MobileListMultipleItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\n\nimport { StyledContainer } from './style';\ninterface MobileListMultipleItemT {\n  title: string;\n  value: string;\n  isSelected: boolean;\n}\nexport const MobileListMultipleItem: React.ComponentType<MobileListMultipleItemT> = (props) => {\n  const { title, isSelected } = props;\n  const { onClick, ...rest } = useGetGlobalAttributes(props);\n  return (\n    <StyledContainer\n      cols={['auto']}\n      minHeight=\"40px\"\n      width=\"100%\"\n      pl=\"16px\"\n      pr=\"16px\"\n      gutter=\"xs\"\n      alignItems=\"center\"\n      {...rest}\n    >\n      <DSControlledCheckbox onChange={onClick} device=\"mobile\" checked={isSelected} label={title} wrapLabel />\n    </StyledContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwBjB;AAvBN,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AAEvC,SAAS,uBAAuB;AAMzB,MAAM,yBAAuE,CAAC,UAAU;AAC7F,QAAM,EAAE,OAAO,WAAW,IAAI;AAC9B,QAAM,EAAE,YAAY,KAAK,IAAI,uBAAuB,KAAK;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,MAAM;AAAA,MACb,WAAU;AAAA,MACV,OAAM;AAAA,MACN,IAAG;AAAA,MACH,IAAG;AAAA,MACH,QAAO;AAAA,MACP,YAAW;AAAA,MACV,GAAG;AAAA,MAEJ,8BAAC,wBAAqB,UAAU,SAAS,QAAO,UAAS,SAAS,YAAY,OAAO,OAAO,WAAS,MAAC;AAAA;AAAA,EACxG;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledContainer } from './style';\ninterface MobileListMultipleItemT {\n  title: string;\n  value: string;\n  isSelected: boolean;\n}\nexport const MobileListMultipleItem: React.ComponentType<MobileListMultipleItemT> = (props) => {\n  const { title, isSelected } = props;\n  const { onClick, ...rest } = useGetGlobalAttributes(props);\n  return (\n    <StyledContainer\n      cols={['auto']}\n      minHeight=\"40px\"\n      width=\"100%\"\n      pl=\"16px\"\n      pr=\"16px\"\n      gutter=\"xs\"\n      alignItems=\"center\"\n      {...rest}\n    >\n      <DSControlledCheckbox onChange={onClick} device=\"mobile\" checked={isSelected} label={title} wrapLabel />\n    </StyledContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuBjB;AAtBN,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAMzB,MAAM,yBAAuE,CAAC,UAAU;AAC7F,QAAM,EAAE,OAAO,WAAW,IAAI;AAC9B,QAAM,EAAE,YAAY,KAAK,IAAI,uBAAuB,KAAK;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,MAAM;AAAA,MACb,WAAU;AAAA,MACV,OAAM;AAAA,MACN,IAAG;AAAA,MACH,IAAG;AAAA,MACH,QAAO;AAAA,MACP,YAAW;AAAA,MACV,GAAG;AAAA,MAEJ,8BAAC,wBAAqB,UAAU,SAAS,QAAO,UAAS,SAAS,YAAY,OAAO,OAAO,WAAS,MAAC;AAAA;AAAA,EACxG;AAEJ;",
   "names": []
 }

package/dist/esm/MobileListItem/MobileListSeparator.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Grid } from "@elliemae/ds-grid";
-import { useGetGlobalAttributes } from "@elliemae/ds-utilities";
+import { useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
 import { StyledContainer, StyledTitle } from "./style";
 const MobileListSingleItem = (props) => {
   const { title, isSelected } = props;

package/dist/esm/MobileListItem/MobileListSeparator.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileListItem/MobileListSeparator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\n\nimport { StyledContainer, StyledTitle } from './style';\n\nexport const MobileListSingleItem: React.ComponentType<MobileListSingleItemT> = (props) => {\n  const { title, isSelected } = props;\n  const globalsAttrs = useGetGlobalAttributes(props);\n  return (\n    <StyledContainer cols={['auto']} height=\"40px\" width=\"100%\" pl=\"16px\" pr=\"16px\" gutter=\"xs\" {...globalsAttrs}>\n      <Grid alignItems=\"center\">{isSelected && <Checkmark color={['brand-primary', '600']} />}</Grid>\n      <Grid alignItems=\"center\">\n        <StyledTitle>{title}</StyledTitle>\n      </Grid>\n    </StyledContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACUnB,SAC2C,KAD3C;AATJ,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,SAAS,iBAAiB,mBAAmB;AAEtC,MAAM,uBAAmE,CAAC,UAAU;AACzF,QAAM,EAAE,OAAO,WAAW,IAAI;AAC9B,QAAM,eAAe,uBAAuB,KAAK;AACjD,SACE,qBAAC,mBAAgB,MAAM,CAAC,MAAM,GAAG,QAAO,QAAO,OAAM,QAAO,IAAG,QAAO,IAAG,QAAO,QAAO,MAAM,GAAG,cAC9F;AAAA,wBAAC,QAAK,YAAW,UAAU,wBAAc,oBAAC,aAAU,OAAO,CAAC,iBAAiB,KAAK,GAAG,GAAG;AAAA,IACxF,oBAAC,QAAK,YAAW,UACf,8BAAC,eAAa,iBAAM,GACtB;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledContainer, StyledTitle } from './style';\n\nexport const MobileListSingleItem: React.ComponentType<MobileListSingleItemT> = (props) => {\n  const { title, isSelected } = props;\n  const globalsAttrs = useGetGlobalAttributes(props);\n  return (\n    <StyledContainer cols={['auto']} height=\"40px\" width=\"100%\" pl=\"16px\" pr=\"16px\" gutter=\"xs\" {...globalsAttrs}>\n      <Grid alignItems=\"center\">{isSelected && <Checkmark color={['brand-primary', '600']} />}</Grid>\n      <Grid alignItems=\"center\">\n        <StyledTitle>{title}</StyledTitle>\n      </Grid>\n    </StyledContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACSnB,SAC2C,KAD3C;AARJ,SAAS,YAAY;AACrB,SAAS,8BAA8B;AACvC,SAAS,iBAAiB,mBAAmB;AAEtC,MAAM,uBAAmE,CAAC,UAAU;AACzF,QAAM,EAAE,OAAO,WAAW,IAAI;AAC9B,QAAM,eAAe,uBAAuB,KAAK;AACjD,SACE,qBAAC,mBAAgB,MAAM,CAAC,MAAM,GAAG,QAAO,QAAO,OAAM,QAAO,IAAG,QAAO,IAAG,QAAO,QAAO,MAAM,GAAG,cAC9F;AAAA,wBAAC,QAAK,YAAW,UAAU,wBAAc,oBAAC,aAAU,OAAO,CAAC,iBAAiB,KAAK,GAAG,GAAG;AAAA,IACxF,oBAAC,QAAK,YAAW,UACf,8BAAC,eAAa,iBAAM,GACtB;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/MobileListItem/MobileListSingleItem.js CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Grid } from "@elliemae/ds-grid";
 import { Checkmark } from "@elliemae/ds-icons";
-import { useGetGlobalAttributes } from "@elliemae/ds-utilities";
+import { useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
 import { StyledContainer, StyledTitle } from "./style";
 const MobileListSingleItem = (props) => {
   const { title, isSelected } = props;

package/dist/esm/MobileListItem/MobileListSingleItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileListItem/MobileListSingleItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\n\nimport { StyledContainer, StyledTitle } from './style';\ninterface MobileListSingleItemT {\n  title: string;\n  value: string;\n  isSelected: boolean;\n}\nexport const MobileListSingleItem: React.ComponentType<MobileListSingleItemT> = (props) => {\n  const { title, isSelected } = props;\n  const globalsAttrs = useGetGlobalAttributes(props);\n  return (\n    <StyledContainer\n      cols={['16px', 'auto']}\n      height=\"40px\"\n      width=\"100%\"\n      pl=\"16px\"\n      pr=\"16px\"\n      gutter=\"xs\"\n      {...globalsAttrs}\n    >\n      <Grid alignItems=\"center\">{isSelected && <Checkmark color={['brand-primary', '600']} />}</Grid>\n      <Grid alignItems=\"center\">\n        <StyledTitle>{title}</StyledTitle>\n      </Grid>\n    </StyledContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACenB,SAS2C,KAT3C;AAdJ,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AAEvC,SAAS,iBAAiB,mBAAmB;AAMtC,MAAM,uBAAmE,CAAC,UAAU;AACzF,QAAM,EAAE,OAAO,WAAW,IAAI;AAC9B,QAAM,eAAe,uBAAuB,KAAK;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,OAAM;AAAA,MACN,IAAG;AAAA,MACH,IAAG;AAAA,MACH,QAAO;AAAA,MACN,GAAG;AAAA,MAEJ;AAAA,4BAAC,QAAK,YAAW,UAAU,wBAAc,oBAAC,aAAU,OAAO,CAAC,iBAAiB,KAAK,GAAG,GAAG;AAAA,QACxF,oBAAC,QAAK,YAAW,UACf,8BAAC,eAAa,iBAAM,GACtB;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledContainer, StyledTitle } from './style';\ninterface MobileListSingleItemT {\n  title: string;\n  value: string;\n  isSelected: boolean;\n}\nexport const MobileListSingleItem: React.ComponentType<MobileListSingleItemT> = (props) => {\n  const { title, isSelected } = props;\n  const globalsAttrs = useGetGlobalAttributes(props);\n  return (\n    <StyledContainer\n      cols={['16px', 'auto']}\n      height=\"40px\"\n      width=\"100%\"\n      pl=\"16px\"\n      pr=\"16px\"\n      gutter=\"xs\"\n      {...globalsAttrs}\n    >\n      <Grid alignItems=\"center\">{isSelected && <Checkmark color={['brand-primary', '600']} />}</Grid>\n      <Grid alignItems=\"center\">\n        <StyledTitle>{title}</StyledTitle>\n      </Grid>\n    </StyledContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACcnB,SAS2C,KAT3C;AAbJ,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AACvC,SAAS,iBAAiB,mBAAmB;AAMtC,MAAM,uBAAmE,CAAC,UAAU;AACzF,QAAM,EAAE,OAAO,WAAW,IAAI;AAC9B,QAAM,eAAe,uBAAuB,KAAK;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,OAAM;AAAA,MACN,IAAG;AAAA,MACH,IAAG;AAAA,MACH,QAAO;AAAA,MACN,GAAG;AAAA,MAEJ;AAAA,4BAAC,QAAK,YAAW,UAAU,wBAAc,oBAAC,aAAU,OAAO,CAAC,iBAAiB,KAAK,GAAG,GAAG;AAAA,QACxF,oBAAC,QAAK,YAAW,UACf,8BAAC,eAAa,iBAAM,GACtB;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/MobilePageHeader/MobilePageHeader.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2, { useMemo, useState, useCallback } from "react";
-import { describe, PropTypes } from "@elliemae/ds-utilities";
+import { describe, PropTypes } from "@elliemae/ds-props-helpers";
 import { styled, border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
 import { TruncatedExpandableText } from "@elliemae/ds-truncated-expandable-text";
 import { Grid } from "@elliemae/ds-grid";

package/dist/esm/MobilePageHeader/MobilePageHeader.js.map CHANGED Viewed

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

package/dist/esm/MobileSeparator/Separator.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { describe, PropTypes } from "@elliemae/ds-utilities";
+import { describe, PropTypes } from "@elliemae/ds-props-helpers";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 const Separator = styled(Grid)`

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

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

package/dist/esm/MobileTimePicker/MobileTimePicker.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useRef, useMemo, useEffect } from "react";
-import { PropTypes, describe } from "@elliemae/ds-utilities";
+import { PropTypes, describe } from "@elliemae/ds-props-helpers";
 import { DSIconColors } from "@elliemae/ds-icon";
 import { RecentDocuments } from "@elliemae/ds-icons";
 import DSButton from "@elliemae/ds-button";

package/dist/esm/MobileTimePicker/MobileTimePicker.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileTimePicker/MobileTimePicker.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useMemo, useEffect } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInputGroup } from '@elliemae/ds-form';\nimport { Input } from './Input';\n\nconst DSMobileTimePicker = ({ disabled, value, tabIndex, placeholder, onChange }) => {\n  const inputRef = useRef(null);\n  const valueArr = value.split(':');\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 displayValue = useMemo(() => {\n    if (!value || !valueArr[0] || !valueArr[1]) return '';\n    const ampm = valueArr[0] >= 12 ? 'pm' : 'am';\n    const h = valueArr[0] > 12 ? valueArr[0] - 12 : valueArr[0];\n\n    return `${h} : ${valueArr[1]} ${ampm}`;\n  }, [value]);\n\n  return (\n    <DSInputGroup\n      rightAddon={\n        <DSButton\n          aria-label=\"Time Picker Button\"\n          color={!disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL}\n          disabled={disabled}\n          icon={<RecentDocuments />}\n          type=\"button\"\n          buttonType=\"secondary\"\n          onClick={() => {\n            inputRef.current.focus();\n            inputRef.current.click();\n          }}\n        />\n      }\n    >\n      <Input\n        innerRef={inputRef}\n        type=\"time\"\n        data-testid=\"ds-mobile-time-picker\"\n        aria-label=\"Time Picker Input Mask\"\n        disabled={disabled}\n        placeholder={placeholder}\n        tabIndex={tabIndex}\n        value={value}\n        data-displayvalue={displayValue}\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      />\n    </DSInputGroup>\n  );\n};\n\nDSMobileTimePicker.defaultProps = {\n  disabled: false,\n  tabIndex: 0,\n  placeholder: 'HH : MM am',\n  value: '',\n};\n\nconst pickerProps = {\n  /**\n   * defaults to false\n   */\n  disabled: PropTypes.bool.description('disabled prop, defaults to false'),\n  /**\n   * 0 as default\n   */\n  tabIndex: PropTypes.number.description('focus order HTML property, 0 as default'),\n  /**\n   * HH : MM am as default\n   */\n  placeholder: PropTypes.string.description('HH : MM am 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   * HH:MM string representing the time or empty string\n   */\n  value: PropTypes.string.description('HH:MM string representing the time or empty string'),\n};\n\nDSMobileTimePicker.propTypes = pickerProps;\nDSMobileTimePicker.displayName = 'DSMobileTimePicker';\nconst DSMobileTimePickerWithSchema = describe(DSMobileTimePicker).description('Time picker for mobile & tablet');\n\nDSMobileTimePickerWithSchema.propTypes = pickerProps;\n\nexport { DSMobileTimePicker, DSMobileTimePickerWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useMemo, useEffect } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInputGroup } from '@elliemae/ds-form';\nimport { Input } from './Input';\n\nconst DSMobileTimePicker = ({ disabled, value, tabIndex, placeholder, onChange }) => {\n  const inputRef = useRef(null);\n  const valueArr = value.split(':');\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 displayValue = useMemo(() => {\n    if (!value || !valueArr[0] || !valueArr[1]) return '';\n    const ampm = valueArr[0] >= 12 ? 'pm' : 'am';\n    const h = valueArr[0] > 12 ? valueArr[0] - 12 : valueArr[0];\n\n    return `${h} : ${valueArr[1]} ${ampm}`;\n  }, [value]);\n\n  return (\n    <DSInputGroup\n      rightAddon={\n        <DSButton\n          aria-label=\"Time Picker Button\"\n          color={!disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL}\n          disabled={disabled}\n          icon={<RecentDocuments />}\n          type=\"button\"\n          buttonType=\"secondary\"\n          onClick={() => {\n            inputRef.current.focus();\n            inputRef.current.click();\n          }}\n        />\n      }\n    >\n      <Input\n        innerRef={inputRef}\n        type=\"time\"\n        data-testid=\"ds-mobile-time-picker\"\n        aria-label=\"Time Picker Input Mask\"\n        disabled={disabled}\n        placeholder={placeholder}\n        tabIndex={tabIndex}\n        value={value}\n        data-displayvalue={displayValue}\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      />\n    </DSInputGroup>\n  );\n};\n\nDSMobileTimePicker.defaultProps = {\n  disabled: false,\n  tabIndex: 0,\n  placeholder: 'HH : MM am',\n  value: '',\n};\n\nconst pickerProps = {\n  /**\n   * defaults to false\n   */\n  disabled: PropTypes.bool.description('disabled prop, defaults to false'),\n  /**\n   * 0 as default\n   */\n  tabIndex: PropTypes.number.description('focus order HTML property, 0 as default'),\n  /**\n   * HH : MM am as default\n   */\n  placeholder: PropTypes.string.description('HH : MM am 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   * HH:MM string representing the time or empty string\n   */\n  value: PropTypes.string.description('HH:MM string representing the time or empty string'),\n};\n\nDSMobileTimePicker.propTypes = pickerProps;\nDSMobileTimePicker.displayName = 'DSMobileTimePicker';\nconst DSMobileTimePickerWithSchema = describe(DSMobileTimePicker).description('Time picker for mobile & tablet');\n\nDSMobileTimePickerWithSchema.propTypes = pickerProps;\n\nexport { DSMobileTimePicker, DSMobileTimePickerWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACoCP;AApChB,SAAgB,QAAQ,SAAS,iBAAiB;AAClD,SAAS,WAAW,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,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,QAAM,WAAW,MAAM,MAAM,GAAG;AAChC,YAAU,MAAM;AAMd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,eAAe;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,SAAS,OAAO,CAAC;AACrB,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,CAAC,SAAS,CAAC,SAAS,MAAM,CAAC,SAAS;AAAI,aAAO;AACnD,UAAM,OAAO,SAAS,MAAM,KAAK,OAAO;AACxC,UAAM,IAAI,SAAS,KAAK,KAAK,SAAS,KAAK,KAAK,SAAS;AAEzD,WAAO,GAAG,OAAO,SAAS,MAAM;AAAA,EAClC,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YACE;AAAA,QAAC;AAAA;AAAA,UACC,cAAW;AAAA,UACX,OAAO,CAAC,WAAW,aAAa,UAAU,aAAa;AAAA,UACvD;AAAA,UACA,MAAM,oBAAC,mBAAgB;AAAA,UACvB,MAAK;AAAA,UACL,YAAW;AAAA,UACX,SAAS,MAAM;AACb,qBAAS,QAAQ,MAAM;AACvB,qBAAS,QAAQ,MAAM;AAAA,UACzB;AAAA;AAAA,MACF;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,cAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,qBAAmB;AAAA,UACnB,UAAU,CAAC,MAAM;AAEf,kBAAM,EAAE,OAAO,IAAI,EAAE;AACrB,qBAAS,kBAAkB;AACzB,qBAAO,eAAe;AAAA,YACxB;AACA,mBAAO,WAAW,iBAAiB,CAAC;AACpC,qBAAS,CAAC;AAAA,UACZ;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,eAAe;AAAA,EAChC,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT;AAEA,MAAM,cAAc;AAAA,EAIlB,UAAU,UAAU,KAAK,YAAY,kCAAkC;AAAA,EAIvE,UAAU,UAAU,OAAO,YAAY,yCAAyC;AAAA,EAIhF,aAAa,UAAU,OAAO,YAAY,uBAAuB;AAAA,EAIjE,UAAU,UAAU,KAAK,YAAY,2DAA2D;AAAA,EAIhG,OAAO,UAAU,OAAO,YAAY,oDAAoD;AAC1F;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB,EAAE,YAAY,iCAAiC;AAE/G,6BAA6B,YAAY;",
   "names": []
 }

package/dist/esm/Modal/Modal.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { describe, PropTypes } from "@elliemae/ds-utilities";
+import { describe, PropTypes } from "@elliemae/ds-props-helpers";
 import { noop } from "lodash";
 import { Grid } from "@elliemae/ds-grid";
 import { WarningTriangle } from "@elliemae/ds-icons";

package/dist/esm/Modal/Modal.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Modal/Modal.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { noop } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { useTheme } from '@elliemae/ds-system';\nimport { ModalPosition, ModalBox, BackShadow, ModalIcon, ModalTitle, ModalDescription, BodyFix } from './styled';\n\nconst Modal = ({\n  zIndex = 1,\n  title = '',\n  description = '',\n  onClose = noop,\n  showSecondaryAction = true,\n  secondaryActionProps = {\n    onClick: noop,\n    labelText: 'Cancel',\n  },\n  primaryActionProps = {\n    onClick: noop,\n    labelText: 'Accept',\n  },\n  isOpen = false,\n  children = undefined,\n}) => {\n  const theme = useTheme();\n  if (!isOpen) return null;\n  return (\n    <>\n      <BodyFix isOpen={isOpen} />\n      <BackShadow onClick={onClose} zIndex={zIndex} />\n      <ModalPosition zIndex={zIndex} cols={['auto']}>\n        {children !== undefined ? (\n          <>{children}</>\n        ) : (\n          <ModalBox\n            maxHeight={`${window.innerHeight * 0.75}px`}\n            rows={[1, '80px']}\n            style={{\n              overflow: 'hidden',\n            }}\n          >\n            <Grid\n              pl=\"xs\"\n              pr=\"xs\"\n              style={{\n                overflow: 'hidden',\n              }}\n            >\n              <Grid\n                rows={['auto', 'auto', 1]}\n                style={{\n                  overflow: 'hidden',\n                }}\n              >\n                <ModalIcon>\n                  <WarningTriangle size=\"xxl\" />\n                </ModalIcon>\n                <ModalTitle data-testid=\"modal-title\">{title}</ModalTitle>\n                <ModalDescription\n                  data-testid=\"modal-desc\"\n                  style={{\n                    overflow: 'auto',\n                  }}\n                >\n                  {description}\n                </ModalDescription>\n              </Grid>\n            </Grid>\n            <Grid pt=\"24px\">\n              <Grid\n                pl=\"xs\"\n                pr=\"xs\"\n                cols={showSecondaryAction ? [1, 1] : [1]}\n                gutter=\"xs\"\n                justifyContent=\"center\"\n                alignItems=\"center\"\n                style={{\n                  borderTop: `1px solid ${theme.colors.neutral[100]}`,\n                }}\n              >\n                {showSecondaryAction && (\n                  <DSButton\n                    {...secondaryActionProps}\n                    labelText={secondaryActionProps.labelText || ' Cancel'}\n                    buttonType=\"secondary\"\n                    data-testid=\"modal-secondary-btn\"\n                  />\n                )}\n                <DSButton\n                  labelText={primaryActionProps.labelText || ' Accept'}\n                  {...primaryActionProps}\n                  buttonType=\"primary\"\n                  data-testid=\"modal-primary-btn\"\n                />\n              </Grid>\n            </Grid>\n          </ModalBox>\n        )}\n      </ModalPosition>\n    </>\n  );\n};\n\nconst modalProps = {\n  isOpen: PropTypes.bool.description('Wheter the modal is open or closed').defaultValue(false),\n  zIndex: PropTypes.number.description('z-index value').defaultValue(1),\n  title: PropTypes.string.description('Modal s title').isRequired,\n  description: PropTypes.string.description('Modal s content').isRequired,\n  onClose: PropTypes.func.description('Function executed when the modal closes'),\n  showSecondaryAction: PropTypes.bool.description('Wheter to show secondary action button or not').defaultValue(true),\n  secondaryActionProps: PropTypes.shape({\n    onClick: PropTypes.func,\n    labelText: PropTypes.string,\n  }).description('Secondary action props'),\n  primaryActionProps: PropTypes.shape({\n    onClick: PropTypes.func,\n    labelText: PropTypes.string,\n  }).description('Primary action props'),\n};\n\nModal.propTypes = modalProps;\nModal.displayName = 'Modal';\nconst ModalWithSchema = describe(Modal);\nModalWithSchema.propTypes = modalProps;\n\nexport { Modal, ModalWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { noop } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { useTheme } from '@elliemae/ds-system';\nimport { ModalPosition, ModalBox, BackShadow, ModalIcon, ModalTitle, ModalDescription, BodyFix } from './styled';\n\nconst Modal = ({\n  zIndex = 1,\n  title = '',\n  description = '',\n  onClose = noop,\n  showSecondaryAction = true,\n  secondaryActionProps = {\n    onClick: noop,\n    labelText: 'Cancel',\n  },\n  primaryActionProps = {\n    onClick: noop,\n    labelText: 'Accept',\n  },\n  isOpen = false,\n  children = undefined,\n}) => {\n  const theme = useTheme();\n  if (!isOpen) return null;\n  return (\n    <>\n      <BodyFix isOpen={isOpen} />\n      <BackShadow onClick={onClose} zIndex={zIndex} />\n      <ModalPosition zIndex={zIndex} cols={['auto']}>\n        {children !== undefined ? (\n          <>{children}</>\n        ) : (\n          <ModalBox\n            maxHeight={`${window.innerHeight * 0.75}px`}\n            rows={[1, '80px']}\n            style={{\n              overflow: 'hidden',\n            }}\n          >\n            <Grid\n              pl=\"xs\"\n              pr=\"xs\"\n              style={{\n                overflow: 'hidden',\n              }}\n            >\n              <Grid\n                rows={['auto', 'auto', 1]}\n                style={{\n                  overflow: 'hidden',\n                }}\n              >\n                <ModalIcon>\n                  <WarningTriangle size=\"xxl\" />\n                </ModalIcon>\n                <ModalTitle data-testid=\"modal-title\">{title}</ModalTitle>\n                <ModalDescription\n                  data-testid=\"modal-desc\"\n                  style={{\n                    overflow: 'auto',\n                  }}\n                >\n                  {description}\n                </ModalDescription>\n              </Grid>\n            </Grid>\n            <Grid pt=\"24px\">\n              <Grid\n                pl=\"xs\"\n                pr=\"xs\"\n                cols={showSecondaryAction ? [1, 1] : [1]}\n                gutter=\"xs\"\n                justifyContent=\"center\"\n                alignItems=\"center\"\n                style={{\n                  borderTop: `1px solid ${theme.colors.neutral[100]}`,\n                }}\n              >\n                {showSecondaryAction && (\n                  <DSButton\n                    {...secondaryActionProps}\n                    labelText={secondaryActionProps.labelText || ' Cancel'}\n                    buttonType=\"secondary\"\n                    data-testid=\"modal-secondary-btn\"\n                  />\n                )}\n                <DSButton\n                  labelText={primaryActionProps.labelText || ' Accept'}\n                  {...primaryActionProps}\n                  buttonType=\"primary\"\n                  data-testid=\"modal-primary-btn\"\n                />\n              </Grid>\n            </Grid>\n          </ModalBox>\n        )}\n      </ModalPosition>\n    </>\n  );\n};\n\nconst modalProps = {\n  isOpen: PropTypes.bool.description('Wheter the modal is open or closed').defaultValue(false),\n  zIndex: PropTypes.number.description('z-index value').defaultValue(1),\n  title: PropTypes.string.description('Modal s title').isRequired,\n  description: PropTypes.string.description('Modal s content').isRequired,\n  onClose: PropTypes.func.description('Function executed when the modal closes'),\n  showSecondaryAction: PropTypes.bool.description('Wheter to show secondary action button or not').defaultValue(true),\n  secondaryActionProps: PropTypes.shape({\n    onClick: PropTypes.func,\n    labelText: PropTypes.string,\n  }).description('Secondary action props'),\n  primaryActionProps: PropTypes.shape({\n    onClick: PropTypes.func,\n    labelText: PropTypes.string,\n  }).description('Primary action props'),\n};\n\nModal.propTypes = modalProps;\nModal.displayName = 'Modal';\nconst ModalWithSchema = describe(Modal);\nModalWithSchema.propTypes = modalProps;\n\nexport { Modal, ModalWithSchema };\n"],
   "mappings": "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",
   "names": []
 }

package/dist/esm/SideNav/SideNav.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { DSBackdrop } from "@elliemae/ds-backdrop";
 import { Close } from "@elliemae/ds-icons";
 import { DSIconSizes, DSIconColors } from "@elliemae/ds-icon";
-import { PropTypes, describe } from "@elliemae/ds-utilities";
+import { PropTypes, describe } from "@elliemae/ds-props-helpers";
 import { noop } from "lodash";
 import Logo from "../Icons/EM_logo";
 import { Container, Menu, Heading, Icon, Hr, MenuList, BottomMenu, MenuWrapper } from "./styles";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/SideNav/SideNav.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useState } from 'react';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { Close } from '@elliemae/ds-icons';\nimport { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { noop } from 'lodash';\nimport Logo from '../Icons/EM_logo';\nimport { Container, Menu, Heading, Icon, Hr, MenuList, BottomMenu, MenuWrapper } from './styles';\n\nconst DSSideNav = ({ containerProps = {}, title, onClose = noop, menuItems = [], bottomMenuItems = [] }) => {\n  const [selectedMenuItemIdx, setSelectedMenuItem] = useState(-1);\n\n  const menuItemClick = (idx, text, cb) => {\n    if (cb) {\n      cb(idx, text);\n    }\n    setSelectedMenuItem(idx);\n  };\n\n  const renderMenuList = () => (\n    <>\n      {menuItems.length > 0 ? (\n        <MenuList>\n          {menuItems.map(({ icon, text, onClick }, idx) => (\n            <div key={idx} className=\"menuitem\" onClick={menuItemClick.bind(null, idx, text, onClick)}>\n              <div className=\"icon\">{icon}</div>\n              <div className={`text ${idx === selectedMenuItemIdx ? 'active' : ''}`}>{text}</div>\n            </div>\n          ))}\n        </MenuList>\n      ) : null}\n    </>\n  );\n\n  const renderBottomMenu = () => (\n    <MenuList>\n      {bottomMenuItems.map(({ icon, text, onClick }, idx) => (\n        <div key={idx} className=\"menuitem\" onClick={() => onClick(idx, text)}>\n          <div className=\"icon\">{icon}</div>\n          <div className=\"text\">{text}</div>\n        </div>\n      ))}\n    </MenuList>\n  );\n\n  return (\n    <Container data-testid={containerProps['data-testid'] || 'global-header-menu'}>\n      <DSBackdrop onClick={onClose} type=\"cover\"></DSBackdrop>\n\n      <Menu>\n        <MenuWrapper>\n          <Heading>\n            <Icon>{Logo()}</Icon>\n            <div className=\"content\">\n              <label>{title}</label>\n              <span></span>\n              <div className=\"icon\">\n                <Close onClick={onClose} size={DSIconSizes.S} color={DSIconColors.WHITE} />\n              </div>\n            </div>\n          </Heading>\n          <Hr></Hr>\n          {renderMenuList()}\n          {bottomMenuItems.length > 0 ? (\n            <BottomMenu>\n              <div className=\"content\">\n                <hr></hr>\n                {renderBottomMenu()}\n              </div>\n            </BottomMenu>\n          ) : null}\n        </MenuWrapper>\n      </Menu>\n    </Container>\n  );\n};\n\nconst menuProps = PropTypes.arrayOf(\n  PropTypes.shape({\n    icon: PropTypes.element,\n    text: PropTypes.string,\n  }),\n);\n\nconst navProps = {\n  /** inject props to wrapper element of side nav */\n  containerProps: PropTypes.object.description('inject props to wrapper element of side nav'),\n  /**\n   * Heading Title\n   */\n  title: PropTypes.string.isRequired.description('Heading Title'),\n  /**\n   * Callback function when close is menu is triggered\n   */\n  onClose: PropTypes.func.description('Callback function when close is menu is triggered'),\n  /**\n   * Top Menu items array\n   */\n  menuItems: menuProps.description('Top Menu items array'),\n  /**\n   * Bottom Menu items array\n   */\n  bottomMenuItems: menuProps.description('Bottom Menu items array'),\n};\n\nDSSideNav.propTypes = navProps;\nDSSideNav.displayName = 'DSSideNav';\nconst DSSideNavWithSchema = describe(DSSideNav).description('Side navigation for mobile and tablet');\n\nDSSideNavWithSchema.propTypes = navProps;\n\nexport { DSSideNav, DSSideNavWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useState } from 'react';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { Close } from '@elliemae/ds-icons';\nimport { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { noop } from 'lodash';\nimport Logo from '../Icons/EM_logo';\nimport { Container, Menu, Heading, Icon, Hr, MenuList, BottomMenu, MenuWrapper } from './styles';\n\nconst DSSideNav = ({ containerProps = {}, title, onClose = noop, menuItems = [], bottomMenuItems = [] }) => {\n  const [selectedMenuItemIdx, setSelectedMenuItem] = useState(-1);\n\n  const menuItemClick = (idx, text, cb) => {\n    if (cb) {\n      cb(idx, text);\n    }\n    setSelectedMenuItem(idx);\n  };\n\n  const renderMenuList = () => (\n    <>\n      {menuItems.length > 0 ? (\n        <MenuList>\n          {menuItems.map(({ icon, text, onClick }, idx) => (\n            <div key={idx} className=\"menuitem\" onClick={menuItemClick.bind(null, idx, text, onClick)}>\n              <div className=\"icon\">{icon}</div>\n              <div className={`text ${idx === selectedMenuItemIdx ? 'active' : ''}`}>{text}</div>\n            </div>\n          ))}\n        </MenuList>\n      ) : null}\n    </>\n  );\n\n  const renderBottomMenu = () => (\n    <MenuList>\n      {bottomMenuItems.map(({ icon, text, onClick }, idx) => (\n        <div key={idx} className=\"menuitem\" onClick={() => onClick(idx, text)}>\n          <div className=\"icon\">{icon}</div>\n          <div className=\"text\">{text}</div>\n        </div>\n      ))}\n    </MenuList>\n  );\n\n  return (\n    <Container data-testid={containerProps['data-testid'] || 'global-header-menu'}>\n      <DSBackdrop onClick={onClose} type=\"cover\"></DSBackdrop>\n\n      <Menu>\n        <MenuWrapper>\n          <Heading>\n            <Icon>{Logo()}</Icon>\n            <div className=\"content\">\n              <label>{title}</label>\n              <span></span>\n              <div className=\"icon\">\n                <Close onClick={onClose} size={DSIconSizes.S} color={DSIconColors.WHITE} />\n              </div>\n            </div>\n          </Heading>\n          <Hr></Hr>\n          {renderMenuList()}\n          {bottomMenuItems.length > 0 ? (\n            <BottomMenu>\n              <div className=\"content\">\n                <hr></hr>\n                {renderBottomMenu()}\n              </div>\n            </BottomMenu>\n          ) : null}\n        </MenuWrapper>\n      </Menu>\n    </Container>\n  );\n};\n\nconst menuProps = PropTypes.arrayOf(\n  PropTypes.shape({\n    icon: PropTypes.element,\n    text: PropTypes.string,\n  }),\n);\n\nconst navProps = {\n  /** inject props to wrapper element of side nav */\n  containerProps: PropTypes.object.description('inject props to wrapper element of side nav'),\n  /**\n   * Heading Title\n   */\n  title: PropTypes.string.isRequired.description('Heading Title'),\n  /**\n   * Callback function when close is menu is triggered\n   */\n  onClose: PropTypes.func.description('Callback function when close is menu is triggered'),\n  /**\n   * Top Menu items array\n   */\n  menuItems: menuProps.description('Top Menu items array'),\n  /**\n   * Bottom Menu items array\n   */\n  bottomMenuItems: menuProps.description('Bottom Menu items array'),\n};\n\nDSSideNav.propTypes = navProps;\nDSSideNav.displayName = 'DSSideNav';\nconst DSSideNavWithSchema = describe(DSSideNav).description('Side navigation for mobile and tablet');\n\nDSSideNavWithSchema.propTypes = navProps;\n\nexport { DSSideNav, DSSideNavWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACyBnB,mBAKU,KADF,YAJR;AApBJ,SAAgB,gBAAgB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,aAAa,oBAAoB;AAC1C,SAAS,WAAW,gBAAgB;AACpC,SAAS,YAAY;AACrB,OAAO,UAAU;AACjB,SAAS,WAAW,MAAM,SAAS,MAAM,IAAI,UAAU,YAAY,mBAAmB;AAEtF,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,OAAO,UAAU,MAAM,YAAY,CAAC,GAAG,kBAAkB,CAAC,EAAE,MAAM;AAC1G,QAAM,CAAC,qBAAqB,mBAAmB,IAAI,SAAS,EAAE;AAE9D,QAAM,gBAAgB,CAAC,KAAK,MAAM,OAAO;AACvC,QAAI,IAAI;AACN,SAAG,KAAK,IAAI;AAAA,IACd;AACA,wBAAoB,GAAG;AAAA,EACzB;AAEA,QAAM,iBAAiB,MACrB,gCACG,oBAAU,SAAS,IAClB,oBAAC,YACE,oBAAU,IAAI,CAAC,EAAE,MAAM,MAAM,QAAQ,GAAG,QACvC,qBAAC,SAAc,WAAU,YAAW,SAAS,cAAc,KAAK,MAAM,KAAK,MAAM,OAAO,GACtF;AAAA,wBAAC,SAAI,WAAU,QAAQ,gBAAK;AAAA,IAC5B,oBAAC,SAAI,WAAW,QAAQ,QAAQ,sBAAsB,WAAW,MAAO,gBAAK;AAAA,OAFrE,GAGV,CACD,GACH,IACE,MACN;AAGF,QAAM,mBAAmB,MACvB,oBAAC,YACE,0BAAgB,IAAI,CAAC,EAAE,MAAM,MAAM,QAAQ,GAAG,QAC7C,qBAAC,SAAc,WAAU,YAAW,SAAS,MAAM,QAAQ,KAAK,IAAI,GAClE;AAAA,wBAAC,SAAI,WAAU,QAAQ,gBAAK;AAAA,IAC5B,oBAAC,SAAI,WAAU,QAAQ,gBAAK;AAAA,OAFpB,GAGV,CACD,GACH;AAGF,SACE,qBAAC,aAAU,eAAa,eAAe,kBAAkB,sBACvD;AAAA,wBAAC,cAAW,SAAS,SAAS,MAAK,SAAQ;AAAA,IAE3C,oBAAC,QACC,+BAAC,eACC;AAAA,2BAAC,WACC;AAAA,4BAAC,QAAM,eAAK,GAAE;AAAA,QACd,qBAAC,SAAI,WAAU,WACb;AAAA,8BAAC,WAAO,iBAAM;AAAA,UACd,oBAAC,UAAK;AAAA,UACN,oBAAC,SAAI,WAAU,QACb,8BAAC,SAAM,SAAS,SAAS,MAAM,YAAY,GAAG,OAAO,aAAa,OAAO,GAC3E;AAAA,WACF;AAAA,SACF;AAAA,MACA,oBAAC,MAAG;AAAA,MACH,eAAe;AAAA,MACf,gBAAgB,SAAS,IACxB,oBAAC,cACC,+BAAC,SAAI,WAAU,WACb;AAAA,4BAAC,QAAG;AAAA,QACH,iBAAiB;AAAA,SACpB,GACF,IACE;AAAA,OACN,GACF;AAAA,KACF;AAEJ;AAEA,MAAM,YAAY,UAAU;AAAA,EAC1B,UAAU,MAAM;AAAA,IACd,MAAM,UAAU;AAAA,IAChB,MAAM,UAAU;AAAA,EAClB,CAAC;AACH;AAEA,MAAM,WAAW;AAAA,EAEf,gBAAgB,UAAU,OAAO,YAAY,6CAA6C;AAAA,EAI1F,OAAO,UAAU,OAAO,WAAW,YAAY,eAAe;AAAA,EAI9D,SAAS,UAAU,KAAK,YAAY,mDAAmD;AAAA,EAIvF,WAAW,UAAU,YAAY,sBAAsB;AAAA,EAIvD,iBAAiB,UAAU,YAAY,yBAAyB;AAClE;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,uCAAuC;AAEnG,oBAAoB,YAAY;",
   "names": []
 }

package/dist/esm/SwipeToRefresh/SwipeToRefresh.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { PropTypes, describe } from "@elliemae/ds-utilities";
+import { PropTypes, describe } from "@elliemae/ds-props-helpers";
 import { DSCircularProgressIndicator } from "@elliemae/ds-circular-progress-indicator";
 import { useTheme } from "@elliemae/ds-system";
 import { useSwipe } from "./useSwipe";

package/dist/esm/SwipeToRefresh/SwipeToRefresh.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/SwipeToRefresh/SwipeToRefresh.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { useTheme } from '@elliemae/ds-system';\nimport { useSwipe } from './useSwipe';\nimport { SwipeContainer, SwipeDrag, LoaderBox, PositionLoader } from './styled';\nimport { ProgressIndicator } from './ProgressIndicator';\n\nconst SwipeToRefresh = ({ children, loading, onRefresh }) => {\n  const breakpoint = 60;\n  const theme = useTheme();\n  const swipe = useSwipe({ onRefresh, breakpoint });\n  const progress = swipe.height > breakpoint ? 100 : (swipe.height * 100) / breakpoint;\n  return (\n    <SwipeContainer>\n      <SwipeDrag\n        onTouchStart={swipe.touchStart}\n        onTouchEnd={swipe.touchEnd}\n        onTouchCancel={swipe.touchCancel}\n        onTouchMove={swipe.touchMove}\n        ref={swipe.ref}\n      >\n        <LoaderBox\n          height={loading ? theme.space.m : `${swipe.height}px`}\n          alignItems=\"flex-start\"\n          data-testid=\"loader-box\"\n        >\n          <PositionLoader\n            height={theme.space.m}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            mt={swipe.height > 40 || loading ? 0 : `${swipe.height - 40}px`}\n          >\n            {loading ? <DSCircularProgressIndicator /> : <ProgressIndicator progress={progress} />}\n          </PositionLoader>\n        </LoaderBox>\n        <div ref={swipe.target} style={{ height: 1 }} />\n        {children}\n      </SwipeDrag>\n    </SwipeContainer>\n  );\n};\n\nconst props = {\n  /** component inside swipe to refresh container */\n  children: PropTypes.element.isRequired.description('component inside swipe to refresh container'),\n  /** toggle loading state for swipe */\n  loading: PropTypes.bool.description('toggle loading state for swipe'),\n  /** callback on refresh swipe */\n  onRefresh: PropTypes.func.description('callback on refresh swipe'),\n};\n\nSwipeToRefresh.propTypes = props;\nSwipeToRefresh.displayName = 'SwipeToRefresh';\nconst SwipeToRefreshWithSchema = describe(SwipeToRefresh);\n\nSwipeToRefreshWithSchema.propTypes = props;\n\nexport { SwipeToRefresh, SwipeToRefreshWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { useTheme } from '@elliemae/ds-system';\nimport { useSwipe } from './useSwipe';\nimport { SwipeContainer, SwipeDrag, LoaderBox, PositionLoader } from './styled';\nimport { ProgressIndicator } from './ProgressIndicator';\n\nconst SwipeToRefresh = ({ children, loading, onRefresh }) => {\n  const breakpoint = 60;\n  const theme = useTheme();\n  const swipe = useSwipe({ onRefresh, breakpoint });\n  const progress = swipe.height > breakpoint ? 100 : (swipe.height * 100) / breakpoint;\n  return (\n    <SwipeContainer>\n      <SwipeDrag\n        onTouchStart={swipe.touchStart}\n        onTouchEnd={swipe.touchEnd}\n        onTouchCancel={swipe.touchCancel}\n        onTouchMove={swipe.touchMove}\n        ref={swipe.ref}\n      >\n        <LoaderBox\n          height={loading ? theme.space.m : `${swipe.height}px`}\n          alignItems=\"flex-start\"\n          data-testid=\"loader-box\"\n        >\n          <PositionLoader\n            height={theme.space.m}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            mt={swipe.height > 40 || loading ? 0 : `${swipe.height - 40}px`}\n          >\n            {loading ? <DSCircularProgressIndicator /> : <ProgressIndicator progress={progress} />}\n          </PositionLoader>\n        </LoaderBox>\n        <div ref={swipe.target} style={{ height: 1 }} />\n        {children}\n      </SwipeDrag>\n    </SwipeContainer>\n  );\n};\n\nconst props = {\n  /** component inside swipe to refresh container */\n  children: PropTypes.element.isRequired.description('component inside swipe to refresh container'),\n  /** toggle loading state for swipe */\n  loading: PropTypes.bool.description('toggle loading state for swipe'),\n  /** callback on refresh swipe */\n  onRefresh: PropTypes.func.description('callback on refresh swipe'),\n};\n\nSwipeToRefresh.propTypes = props;\nSwipeToRefresh.displayName = 'SwipeToRefresh';\nconst SwipeToRefreshWithSchema = describe(SwipeToRefresh);\n\nSwipeToRefreshWithSchema.propTypes = props;\n\nexport { SwipeToRefresh, SwipeToRefreshWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACejB,SAkBiB,KAlBjB;AAdN,SAAS,WAAW,gBAAgB;AACpC,SAAS,mCAAmC;AAC5C,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB,WAAW,WAAW,sBAAsB;AACrE,SAAS,yBAAyB;AAElC,MAAM,iBAAiB,CAAC,EAAE,UAAU,SAAS,UAAU,MAAM;AAC3D,QAAM,aAAa;AACnB,QAAM,QAAQ,SAAS;AACvB,QAAM,QAAQ,SAAS,EAAE,WAAW,WAAW,CAAC;AAChD,QAAM,WAAW,MAAM,SAAS,aAAa,MAAO,MAAM,SAAS,MAAO;AAC1E,SACE,oBAAC,kBACC;AAAA,IAAC;AAAA;AAAA,MACC,cAAc,MAAM;AAAA,MACpB,YAAY,MAAM;AAAA,MAClB,eAAe,MAAM;AAAA,MACrB,aAAa,MAAM;AAAA,MACnB,KAAK,MAAM;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,UAAU,MAAM,MAAM,IAAI,GAAG,MAAM;AAAA,YAC3C,YAAW;AAAA,YACX,eAAY;AAAA,YAEZ;AAAA,cAAC;AAAA;AAAA,gBACC,QAAQ,MAAM,MAAM;AAAA,gBACpB,gBAAe;AAAA,gBACf,YAAW;AAAA,gBACX,IAAI,MAAM,SAAS,MAAM,UAAU,IAAI,GAAG,MAAM,SAAS;AAAA,gBAExD,oBAAU,oBAAC,+BAA4B,IAAK,oBAAC,qBAAkB,UAAoB;AAAA;AAAA,YACtF;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,SAAI,KAAK,MAAM,QAAQ,OAAO,EAAE,QAAQ,EAAE,GAAG;AAAA,QAC7C;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,UAAU,UAAU,QAAQ,WAAW,YAAY,6CAA6C;AAAA,EAEhG,SAAS,UAAU,KAAK,YAAY,gCAAgC;AAAA,EAEpE,WAAW,UAAU,KAAK,YAAY,2BAA2B;AACnE;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AAExD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/Tabs/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { describe } from "@elliemae/ds-utilities";
+import { describe } from "@elliemae/ds-props-helpers";
 import { DSTabs, DSTab } from "@elliemae/ds-tabs";
 import { MobileTabsPropTypes, MobileTabPropTypes } from "./propTypes";
 const DSMobileTabs = ({ children, ...props }) => /* @__PURE__ */ jsx(DSTabs, { ...props, isDSMobile: true, children });

package/dist/esm/Tabs/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Tabs/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { DSTabs, DSTab } from '@elliemae/ds-tabs';\nimport type { DSTabsT, DSTabT } from '@elliemae/ds-tabs';\nimport { MobileTabsPropTypes, MobileTabPropTypes } from './propTypes';\n\ntype DSMobileTabsPropsT = Omit<\n  DSTabsT.InternalProps,\n  'animated' | 'enableMouseEvents' | 'allowTextSelection' | 'type' | 'isDSMobile' | 'withCarousel'\n>;\n\ntype DSMobileTabPropsT = Omit<DSTabT.Props, 'isDSMobile'>;\n\nexport const DSMobileTabs = ({ children, ...props }: DSMobileTabsPropsT) => (\n  <DSTabs {...props} isDSMobile>\n    {children}\n  </DSTabs>\n);\n\nexport const DSMobileTab = ({ children, ...props }: DSMobileTabPropsT) => <DSTab {...props}>{children}</DSTab>;\n\nDSMobileTabs.propTypes = MobileTabsPropTypes as WeakValidationMap<unknown>;\nDSMobileTabs.displayName = 'DSMobileTabs';\nconst DSMobileTabsWithSchema = describe(DSMobileTabs);\nDSMobileTabsWithSchema.propTypes = MobileTabsPropTypes;\n\nDSMobileTab.propTypes = MobileTabPropTypes as WeakValidationMap<unknown>;\nDSMobileTab.displayName = 'DSMobileTab';\nconst DSMobileTabWithSchema = describe(DSMobileTab);\nDSMobileTabWithSchema.propTypes = MobileTabPropTypes;\n\nexport { DSMobileTabsWithSchema, DSMobileTabWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSTabs, DSTab } from '@elliemae/ds-tabs';\nimport type { DSTabsT, DSTabT } from '@elliemae/ds-tabs';\nimport { MobileTabsPropTypes, MobileTabPropTypes } from './propTypes';\n\ntype DSMobileTabsPropsT = Omit<\n  DSTabsT.InternalProps,\n  'animated' | 'enableMouseEvents' | 'allowTextSelection' | 'type' | 'isDSMobile' | 'withCarousel'\n>;\n\ntype DSMobileTabPropsT = Omit<DSTabT.Props, 'isDSMobile'>;\n\nexport const DSMobileTabs = ({ children, ...props }: DSMobileTabsPropsT) => (\n  <DSTabs {...props} isDSMobile>\n    {children}\n  </DSTabs>\n);\n\nexport const DSMobileTab = ({ children, ...props }: DSMobileTabPropsT) => <DSTab {...props}>{children}</DSTab>;\n\nDSMobileTabs.propTypes = MobileTabsPropTypes as WeakValidationMap<unknown>;\nDSMobileTabs.displayName = 'DSMobileTabs';\nconst DSMobileTabsWithSchema = describe(DSMobileTabs);\nDSMobileTabsWithSchema.propTypes = MobileTabsPropTypes;\n\nDSMobileTab.propTypes = MobileTabPropTypes as WeakValidationMap<unknown>;\nDSMobileTab.displayName = 'DSMobileTab';\nconst DSMobileTabWithSchema = describe(DSMobileTab);\nDSMobileTabWithSchema.propTypes = MobileTabPropTypes;\n\nexport { DSMobileTabsWithSchema, DSMobileTabWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACcrB;AAbF,SAAS,gBAAgB;AACzB,SAAS,QAAQ,aAAa;AAE9B,SAAS,qBAAqB,0BAA0B;AASjD,MAAM,eAAe,CAAC,EAAE,aAAa,MAAM,MAChD,oBAAC,UAAQ,GAAG,OAAO,YAAU,MAC1B,UACH;AAGK,MAAM,cAAc,CAAC,EAAE,aAAa,MAAM,MAAyB,oBAAC,SAAO,GAAG,OAAQ,UAAS;AAEtG,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;AAEnC,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/esm/Tabs/propTypes.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PropTypes } from "@elliemae/ds-utilities";
+import { PropTypes } from "@elliemae/ds-props-helpers";
 const MobileTabPropTypes = {
   tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Unique Tab id.").defaultValue(""),
   title: PropTypes.string.description("Tab title.").defaultValue(""),

package/dist/esm/Tabs/propTypes.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Tabs/propTypes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const MobileTabPropTypes = {\n  tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Unique Tab id.').defaultValue(''),\n  title: PropTypes.string.description('Tab title.').defaultValue(''),\n  required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n  disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n};\n\nexport const MobileTabsPropTypes = {\n  onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n  tabBarExtraContent: PropTypes.element.description('Extra content next to the Tabs Bar.').defaultValue(undefined),\n  onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n  fixedTabsHeaders: PropTypes.bool\n    .description('Enables fixed Tabs mode. Makes Tab Bar non scrollable and adds equal fixed widths.')\n    .defaultValue(false),\n  activeTab: PropTypes.string\n    .description('Passing a value makes DSTabs a controlled component.')\n    .defaultValue('First DSTab children.'),\n  children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n  tabsListAriaLabel: PropTypes.string.description('Aria label for the Tab list.').defaultValue('Tab list.'),\n  containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n    .description('Ref to the container.')\n    .defaultValue(undefined),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAEnB,MAAM,qBAAqB;AAAA,EAChC,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EAC9G,OAAO,UAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,UAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,sBAAsB;AAAA,EACjC,aAAa,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,oBAAoB,UAAU,QAAQ,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EAC/G,qBAAqB,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,kBAAkB,UAAU,KACzB,YAAY,oFAAoF,EAChG,aAAa,KAAK;AAAA,EACrB,WAAW,UAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,UAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,UAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,WAAW;AAAA,EACxG,gBAAgB,UAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport const MobileTabPropTypes = {\n  tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Unique Tab id.').defaultValue(''),\n  title: PropTypes.string.description('Tab title.').defaultValue(''),\n  required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n  disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n};\n\nexport const MobileTabsPropTypes = {\n  onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n  tabBarExtraContent: PropTypes.element.description('Extra content next to the Tabs Bar.').defaultValue(undefined),\n  onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n  fixedTabsHeaders: PropTypes.bool\n    .description('Enables fixed Tabs mode. Makes Tab Bar non scrollable and adds equal fixed widths.')\n    .defaultValue(false),\n  activeTab: PropTypes.string\n    .description('Passing a value makes DSTabs a controlled component.')\n    .defaultValue('First DSTab children.'),\n  children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n  tabsListAriaLabel: PropTypes.string.description('Aria label for the Tab list.').defaultValue('Tab list.'),\n  containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n    .description('Ref to the container.')\n    .defaultValue(undefined),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,iBAAiB;AAEnB,MAAM,qBAAqB;AAAA,EAChC,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EAC9G,OAAO,UAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,UAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,sBAAsB;AAAA,EACjC,aAAa,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,oBAAoB,UAAU,QAAQ,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EAC/G,qBAAqB,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,kBAAkB,UAAU,KACzB,YAAY,oFAAoF,EAChG,aAAa,KAAK;AAAA,EACrB,WAAW,UAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,UAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,UAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,WAAW;AAAA,EACxG,gBAAgB,UAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;",
   "names": []
 }

package/dist/esm/package.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-mobile",
-  "version": "3.16.0-next.2",
+  "version": "3.16.0-next.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "files": [
@@ -439,21 +439,22 @@
     "prop-types": "~15.8.1",
     "react-window": "~1.8.7",
     "react-window-infinite-loader": "~1.0.7",
-    "@elliemae/ds-accordion": "3.16.0-next.2",
-    "@elliemae/ds-backdrop": "3.16.0-next.2",
-    "@elliemae/ds-button": "3.16.0-next.2",
-    "@elliemae/ds-circular-progress-indicator": "3.16.0-next.2",
-    "@elliemae/ds-form": "3.16.0-next.2",
-    "@elliemae/ds-form-checkbox": "3.16.0-next.2",
-    "@elliemae/ds-grid": "3.16.0-next.2",
-    "@elliemae/ds-icon": "3.16.0-next.2",
-    "@elliemae/ds-indeterminate-progress-indicator": "3.16.0-next.2",
-    "@elliemae/ds-icons": "3.16.0-next.2",
-    "@elliemae/ds-shared": "3.16.0-next.2",
-    "@elliemae/ds-system": "3.16.0-next.2",
-    "@elliemae/ds-tabs": "3.16.0-next.2",
-    "@elliemae/ds-truncated-expandable-text": "3.16.0-next.2",
-    "@elliemae/ds-utilities": "3.16.0-next.2"
+    "@elliemae/ds-accordion": "3.16.0-next.4",
+    "@elliemae/ds-form": "3.16.0-next.4",
+    "@elliemae/ds-form-checkbox": "3.16.0-next.4",
+    "@elliemae/ds-grid": "3.16.0-next.4",
+    "@elliemae/ds-icon": "3.16.0-next.4",
+    "@elliemae/ds-icons": "3.16.0-next.4",
+    "@elliemae/ds-indeterminate-progress-indicator": "3.16.0-next.4",
+    "@elliemae/ds-props-helpers": "3.16.0-next.4",
+    "@elliemae/ds-shared": "3.16.0-next.4",
+    "@elliemae/ds-system": "3.16.0-next.4",
+    "@elliemae/ds-tabs": "3.16.0-next.4",
+    "@elliemae/ds-utilities": "3.16.0-next.4",
+    "@elliemae/ds-button": "3.16.0-next.4",
+    "@elliemae/ds-circular-progress-indicator": "3.16.0-next.4",
+    "@elliemae/ds-backdrop": "3.16.0-next.4",
+    "@elliemae/ds-truncated-expandable-text": "3.16.0-next.4"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.6.0",
@@ -477,7 +478,7 @@
     "eslint:fix": "exit 0 | echo",
     "dts": "exit 0 | echo",
     "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
-    "dev:build": "pnpm --filter {.}... build && pnpm --filter {.}... dts",
+    "dev:build": "pnpm --filter {.}... build",
     "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
     "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\"",
     "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch"