@elliemae/ds-mobile 3.3.0-next.8 → 3.3.0-rc.1
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.
|
@@ -31,7 +31,6 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
|
31
31
|
var import_ds_system = require("@elliemae/ds-system");
|
|
32
32
|
var import_ds_truncated_expandable_text = require("@elliemae/ds-truncated-expandable-text");
|
|
33
33
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
34
|
-
var import_ds_system2 = require("@elliemae/ds-system");
|
|
35
34
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
36
35
|
var import_ds_button = __toESM(require("@elliemae/ds-button"));
|
|
37
36
|
var import_MobileSeparator = __toESM(require("../MobileSeparator"));
|
|
@@ -41,25 +40,26 @@ const StyledTitle = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
41
40
|
color: ${(props) => props.theme.colors.neutral["700"]};
|
|
42
41
|
min-height: ${(props) => props.withBreadcrumb ? "auto" : "44px"};
|
|
43
42
|
padding-top: ${(props) => props.withBreadcrumb ? "0" : "6px"};
|
|
43
|
+
line-height: 1.15;
|
|
44
44
|
`;
|
|
45
45
|
const StyledBreadCrumb = import_ds_system.styled.div`
|
|
46
46
|
font-size: 16px;
|
|
47
47
|
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
48
48
|
color: ${(props) => props.theme.colors.neutral["600"]};
|
|
49
|
-
${(0,
|
|
49
|
+
${(0, import_ds_system.truncate)()}
|
|
50
50
|
`;
|
|
51
51
|
const Label = import_ds_system.styled.div`
|
|
52
52
|
color: ${(props) => props.theme.colors.neutral["500"]};
|
|
53
|
-
${(0,
|
|
53
|
+
${(0, import_ds_system.truncate)()}
|
|
54
54
|
`;
|
|
55
55
|
const Value = import_ds_system.styled.div`
|
|
56
|
-
${(0,
|
|
56
|
+
${(0, import_ds_system.truncate)()}
|
|
57
57
|
color: ${(props) => props.theme.colors.neutral["600"]};
|
|
58
58
|
${(props) => props.withMarginRight ? `margin-right: 4px;` : ""}
|
|
59
59
|
margin-top: ${(props) => props.withBreadcrumb ? "12px" : "0"};
|
|
60
60
|
`;
|
|
61
61
|
const Wrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
62
|
-
border-bottom: ${({ theme, withBlueBorder }) => (0,
|
|
62
|
+
border-bottom: ${({ theme, withBlueBorder }) => (0, import_ds_system.border)(withBlueBorder ? theme.colors.brand["700"] : theme.colors.neutral["300"])};
|
|
63
63
|
`;
|
|
64
64
|
const MobilePageHeader = ({
|
|
65
65
|
pageTitle = null,
|
|
@@ -120,7 +120,7 @@ const MobilePageHeader = ({
|
|
|
120
120
|
}, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
|
|
121
121
|
cols: backArrow ? ["auto", 1] : [1],
|
|
122
122
|
alignItems: "flex-start",
|
|
123
|
-
pr: countActions === 0 && !hasValue && !label ? (0,
|
|
123
|
+
pr: countActions === 0 && !hasValue && !label ? (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s) : 0
|
|
124
124
|
}, backArrow && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
|
|
125
125
|
height: breadCrumb ? "56px" : "44px",
|
|
126
126
|
alignItems: "center",
|
|
@@ -196,5 +196,5 @@ MobilePageHeader.propTypes = pageHeaderProps;
|
|
|
196
196
|
MobilePageHeader.displayName = "MobilePageHeader";
|
|
197
197
|
const PageHeaderWithSchema = (0, import_ds_utilities.describe)(MobilePageHeader);
|
|
198
198
|
PageHeaderWithSchema.propTypes = pageHeaderProps;
|
|
199
|
-
const DSMobilePageHeader = (0,
|
|
199
|
+
const DSMobilePageHeader = (0, import_ds_system.withTheme)(MobilePageHeader);
|
|
200
200
|
//# sourceMappingURL=MobilePageHeader.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/MobilePageHeader/MobilePageHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable no-plusplus */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useState, useCallback } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { TruncatedExpandableText } from '@elliemae/ds-truncated-expandable-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAsD;AACtD,0BAAoC;AACpC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable no-plusplus */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useState, useCallback } from 'react';\nimport { describe, PropTypes } from '@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 cols={['auto', 'auto']} alignItems=\"flex-start\">\n <Grid>\n {breadCrumb && <StyledBreadCrumb data-testid=\"page-header-breadcrum\">{breadCrumb}</StyledBreadCrumb>}\n <StyledTitle\n maxWidth=\"100%\"\n alignItems=\"flex-start\"\n withBreadcrumb={!!breadCrumb}\n data-testid=\"page-header-title\"\n >\n <Grid pt={breadCrumb ? 0 : theme.space.xxxs}>\n <TruncatedExpandableText value={pageTitle} />\n </Grid>\n </StyledTitle>\n </Grid>\n {contextMenu && (\n <Grid alignItems=\"center\" mt={breadCrumb ? '20px' : '8px'}>\n <DSButton\n buttonType=\"text\"\n icon={<ChevronSmallDown />}\n size=\"s\"\n onClick={() => {\n handleContext();\n onOpenContextMenu();\n }}\n containerProps={{ 'data-testid': 'trigger-context-menu' }}\n />\n {React.cloneElement(contextMenu, {\n open: contextMenu.props.open !== undefined ? contextMenu.props.open : open,\n onChange: (event, item) => {\n if (contextMenu.props.onChange) contextMenu.props.onChange(event, item);\n handleContext();\n },\n })}\n </Grid>\n )}\n </Grid>\n </Grid>\n </Grid>\n {hasValue && (\n <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\" cols={['auto', 'auto']}>\n {separator}\n <Value withMarginRight={!!label} data-testid=\"page-header-value\">\n {value}\n </Value>\n </Grid>\n )}\n {label && (\n <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\">\n <Label withBreadcrumb={!!breadCrumb} data-testid=\"page-header-label\">\n {label}\n </Label>\n </Grid>\n )}\n </Grid>\n {countActions > 0 && (\n <Grid\n height={breadCrumb ? '56px' : '44px'}\n alignItems=\"center\"\n cols={countActions === 1 ? ['auto'] : ['auto', 'auto', 'auto']}\n >\n {firstAction && <Grid>{firstAction}</Grid>}\n {countActions === 2 && separator}\n {secondAction && <Grid>{secondAction}</Grid>}\n </Grid>\n )}\n </Wrapper>\n );\n};\n\nconst pageHeaderProps = {\n pageTitle: PropTypes.string.description('Page title').isRequired,\n contextMenu: PropTypes.element.description('Context Menu to open'),\n onOpenContextMenu: PropTypes.func.description('function called when context menu opens'),\n firstAction: PropTypes.element.description('Action Button'),\n secondAction: PropTypes.element.description('Action Button'),\n backArrow: PropTypes.element.description('Back Arrow Button'),\n breadCrumb: PropTypes.string.description('BreadCrumbs title'),\n value: PropTypes.number.description('Page summary value'),\n label: PropTypes.string.description('Page summary label'),\n theme: PropTypes.object.description('dimsum theme'),\n};\n\nMobilePageHeader.propTypes = pageHeaderProps;\nMobilePageHeader.displayName = 'MobilePageHeader';\nconst PageHeaderWithSchema = describe(MobilePageHeader);\nPageHeaderWithSchema.propTypes = pageHeaderProps;\n\nconst DSMobilePageHeader = withTheme(MobilePageHeader);\n\nexport { DSMobilePageHeader, PageHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,10 +2,9 @@
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import React2, { useMemo, useState, useCallback } from "react";
|
|
4
4
|
import { describe, PropTypes } from "@elliemae/ds-utilities";
|
|
5
|
-
import { styled } from "@elliemae/ds-system";
|
|
5
|
+
import { styled, border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
|
|
6
6
|
import { TruncatedExpandableText } from "@elliemae/ds-truncated-expandable-text";
|
|
7
7
|
import { Grid } from "@elliemae/ds-grid";
|
|
8
|
-
import { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
|
|
9
8
|
import { ChevronSmallDown } from "@elliemae/ds-icons";
|
|
10
9
|
import DSButton from "@elliemae/ds-button";
|
|
11
10
|
import MobileSeparator from "../MobileSeparator";
|
|
@@ -15,6 +14,7 @@ const StyledTitle = styled(Grid)`
|
|
|
15
14
|
color: ${(props) => props.theme.colors.neutral["700"]};
|
|
16
15
|
min-height: ${(props) => props.withBreadcrumb ? "auto" : "44px"};
|
|
17
16
|
padding-top: ${(props) => props.withBreadcrumb ? "0" : "6px"};
|
|
17
|
+
line-height: 1.15;
|
|
18
18
|
`;
|
|
19
19
|
const StyledBreadCrumb = styled.div`
|
|
20
20
|
font-size: 16px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobilePageHeader/MobilePageHeader.tsx"],
|
|
4
|
-
"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 } from '@elliemae/ds-system';\nimport { TruncatedExpandableText } from '@elliemae/ds-truncated-expandable-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport {
|
|
5
|
-
"mappings": ";AAAA;ACIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
4
|
+
"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 cols={['auto', 'auto']} alignItems=\"flex-start\">\n <Grid>\n {breadCrumb && <StyledBreadCrumb data-testid=\"page-header-breadcrum\">{breadCrumb}</StyledBreadCrumb>}\n <StyledTitle\n maxWidth=\"100%\"\n alignItems=\"flex-start\"\n withBreadcrumb={!!breadCrumb}\n data-testid=\"page-header-title\"\n >\n <Grid pt={breadCrumb ? 0 : theme.space.xxxs}>\n <TruncatedExpandableText value={pageTitle} />\n </Grid>\n </StyledTitle>\n </Grid>\n {contextMenu && (\n <Grid alignItems=\"center\" mt={breadCrumb ? '20px' : '8px'}>\n <DSButton\n buttonType=\"text\"\n icon={<ChevronSmallDown />}\n size=\"s\"\n onClick={() => {\n handleContext();\n onOpenContextMenu();\n }}\n containerProps={{ 'data-testid': 'trigger-context-menu' }}\n />\n {React.cloneElement(contextMenu, {\n open: contextMenu.props.open !== undefined ? contextMenu.props.open : open,\n onChange: (event, item) => {\n if (contextMenu.props.onChange) contextMenu.props.onChange(event, item);\n handleContext();\n },\n })}\n </Grid>\n )}\n </Grid>\n </Grid>\n </Grid>\n {hasValue && (\n <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\" cols={['auto', 'auto']}>\n {separator}\n <Value withMarginRight={!!label} data-testid=\"page-header-value\">\n {value}\n </Value>\n </Grid>\n )}\n {label && (\n <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\">\n <Label withBreadcrumb={!!breadCrumb} data-testid=\"page-header-label\">\n {label}\n </Label>\n </Grid>\n )}\n </Grid>\n {countActions > 0 && (\n <Grid\n height={breadCrumb ? '56px' : '44px'}\n alignItems=\"center\"\n cols={countActions === 1 ? ['auto'] : ['auto', 'auto', 'auto']}\n >\n {firstAction && <Grid>{firstAction}</Grid>}\n {countActions === 2 && separator}\n {secondAction && <Grid>{secondAction}</Grid>}\n </Grid>\n )}\n </Wrapper>\n );\n};\n\nconst pageHeaderProps = {\n pageTitle: PropTypes.string.description('Page title').isRequired,\n contextMenu: PropTypes.element.description('Context Menu to open'),\n onOpenContextMenu: PropTypes.func.description('function called when context menu opens'),\n firstAction: PropTypes.element.description('Action Button'),\n secondAction: PropTypes.element.description('Action Button'),\n backArrow: PropTypes.element.description('Back Arrow Button'),\n breadCrumb: PropTypes.string.description('BreadCrumbs title'),\n value: PropTypes.number.description('Page summary value'),\n label: PropTypes.string.description('Page summary label'),\n theme: PropTypes.object.description('dimsum theme'),\n};\n\nMobilePageHeader.propTypes = pageHeaderProps;\nMobilePageHeader.displayName = 'MobilePageHeader';\nconst PageHeaderWithSchema = describe(MobilePageHeader);\nPageHeaderWithSchema.propTypes = pageHeaderProps;\n\nconst DSMobilePageHeader = withTheme(MobilePageHeader);\n\nexport { DSMobilePageHeader, PageHeaderWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-mobile",
|
|
3
|
-
"version": "3.3.0-
|
|
3
|
+
"version": "3.3.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - System",
|
|
6
6
|
"files": [
|
|
@@ -435,21 +435,21 @@
|
|
|
435
435
|
"typeSafety": false
|
|
436
436
|
},
|
|
437
437
|
"dependencies": {
|
|
438
|
-
"@elliemae/ds-accordion": "3.3.0-
|
|
439
|
-
"@elliemae/ds-backdrop": "3.3.0-
|
|
440
|
-
"@elliemae/ds-button": "3.3.0-
|
|
441
|
-
"@elliemae/ds-circular-progress-indicator": "3.3.0-
|
|
442
|
-
"@elliemae/ds-form": "3.3.0-
|
|
443
|
-
"@elliemae/ds-form-checkbox": "3.3.0-
|
|
444
|
-
"@elliemae/ds-grid": "3.3.0-
|
|
445
|
-
"@elliemae/ds-icon": "3.3.0-
|
|
446
|
-
"@elliemae/ds-icons": "3.3.0-
|
|
447
|
-
"@elliemae/ds-indeterminate-progress-indicator": "3.3.0-
|
|
448
|
-
"@elliemae/ds-shared": "3.3.0-
|
|
449
|
-
"@elliemae/ds-system": "3.3.0-
|
|
450
|
-
"@elliemae/ds-tabs": "3.3.0-
|
|
451
|
-
"@elliemae/ds-truncated-expandable-text": "3.3.0-
|
|
452
|
-
"@elliemae/ds-utilities": "3.3.0-
|
|
438
|
+
"@elliemae/ds-accordion": "3.3.0-rc.1",
|
|
439
|
+
"@elliemae/ds-backdrop": "3.3.0-rc.1",
|
|
440
|
+
"@elliemae/ds-button": "3.3.0-rc.1",
|
|
441
|
+
"@elliemae/ds-circular-progress-indicator": "3.3.0-rc.1",
|
|
442
|
+
"@elliemae/ds-form": "3.3.0-rc.1",
|
|
443
|
+
"@elliemae/ds-form-checkbox": "3.3.0-rc.1",
|
|
444
|
+
"@elliemae/ds-grid": "3.3.0-rc.1",
|
|
445
|
+
"@elliemae/ds-icon": "3.3.0-rc.1",
|
|
446
|
+
"@elliemae/ds-icons": "3.3.0-rc.1",
|
|
447
|
+
"@elliemae/ds-indeterminate-progress-indicator": "3.3.0-rc.1",
|
|
448
|
+
"@elliemae/ds-shared": "3.3.0-rc.1",
|
|
449
|
+
"@elliemae/ds-system": "3.3.0-rc.1",
|
|
450
|
+
"@elliemae/ds-tabs": "3.3.0-rc.1",
|
|
451
|
+
"@elliemae/ds-truncated-expandable-text": "3.3.0-rc.1",
|
|
452
|
+
"@elliemae/ds-utilities": "3.3.0-rc.1",
|
|
453
453
|
"polished": "~3.6.7",
|
|
454
454
|
"prop-types": "~15.8.1",
|
|
455
455
|
"react-window": "~1.8.7",
|