@elliemae/ds-form-toggle 3.13.1-rc.1 → 3.14.0-next.10
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.
- package/dist/cjs/styles.js +28 -18
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/styles.js +28 -18
- package/dist/esm/styles.js.map +2 -2
- package/package.json +5 -5
package/dist/cjs/styles.js
CHANGED
|
@@ -39,10 +39,33 @@ var import_ds_button = require("@elliemae/ds-button");
|
|
|
39
39
|
var import_styleHelpers = require("./utils/styleHelpers");
|
|
40
40
|
const focusBorders = import_ds_system.css`
|
|
41
41
|
&:focus-within {
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
&:after {
|
|
43
|
+
content: '';
|
|
44
|
+
top: -3px;
|
|
45
|
+
right: -3px;
|
|
46
|
+
bottom: -3px;
|
|
47
|
+
left: -3px;
|
|
48
|
+
border: 2px solid ${({ theme }) => theme.colors.brand["700"]};
|
|
49
|
+
border-radius: 20px;
|
|
50
|
+
position: absolute;
|
|
51
|
+
}
|
|
44
52
|
}
|
|
45
53
|
`;
|
|
54
|
+
const hoverStyled = import_ds_system.css`
|
|
55
|
+
background-color: ${({ checked, theme }) => {
|
|
56
|
+
if (checked)
|
|
57
|
+
return theme.colors.brand["800"];
|
|
58
|
+
else
|
|
59
|
+
return theme.colors.neutral["600"];
|
|
60
|
+
}};
|
|
61
|
+
|
|
62
|
+
border-color: ${({ checked, theme }) => {
|
|
63
|
+
if (checked)
|
|
64
|
+
return theme.colors.brand["800"];
|
|
65
|
+
else
|
|
66
|
+
return theme.colors.neutral["700"];
|
|
67
|
+
}};
|
|
68
|
+
`;
|
|
46
69
|
const StyledContainer = (0, import_ds_system.styled)("div")`
|
|
47
70
|
display: inline-flex;
|
|
48
71
|
width: fit-content;
|
|
@@ -52,6 +75,7 @@ const StyledContainer = (0, import_ds_system.styled)("div")`
|
|
|
52
75
|
border-radius: ${({ size }) => import_styleHelpers.borderRadius[size]};
|
|
53
76
|
outline: none;
|
|
54
77
|
position: relative;
|
|
78
|
+
z-index: 0;
|
|
55
79
|
border: 2px solid transparent;
|
|
56
80
|
${({ disabled }) => !disabled && focusBorders};
|
|
57
81
|
${import_ds_system.xStyledCommonProps}
|
|
@@ -78,20 +102,7 @@ const StyledVisibleContent = import_ds_system.styled.div`
|
|
|
78
102
|
background-color: ${import_styleHelpers.getInterpolatedBgDsToggleColorByProps};
|
|
79
103
|
&:hover {
|
|
80
104
|
cursor: ${({ disabled, readOnly }) => (0, import_styleHelpers.handleCursors)(disabled, readOnly)};
|
|
81
|
-
|
|
82
|
-
background-color: ${({ checked, theme }) => {
|
|
83
|
-
if (checked)
|
|
84
|
-
return theme.colors.brand["800"];
|
|
85
|
-
else
|
|
86
|
-
return theme.colors.neutral["600"];
|
|
87
|
-
}};
|
|
88
|
-
|
|
89
|
-
border-color: ${({ checked, theme }) => {
|
|
90
|
-
if (checked)
|
|
91
|
-
return theme.colors.brand["800"];
|
|
92
|
-
else
|
|
93
|
-
return theme.colors.neutral["700"];
|
|
94
|
-
}};
|
|
105
|
+
${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}
|
|
95
106
|
}
|
|
96
107
|
`;
|
|
97
108
|
const StyledCircle = import_ds_system.styled.div`
|
|
@@ -103,8 +114,7 @@ const StyledCircle = import_ds_system.styled.div`
|
|
|
103
114
|
const StyledText = import_ds_system.styled.div`
|
|
104
115
|
display: flex;
|
|
105
116
|
flex-grow: 1;
|
|
106
|
-
line-height:
|
|
107
|
-
margin-bottom: -0.12rem;
|
|
117
|
+
line-height: ${({ theme, size }) => (0, import_styleHelpers.handleFontSize)(size, theme)};
|
|
108
118
|
align-items: center;
|
|
109
119
|
justify-content: ${({ isLongerTextRendering }) => isLongerTextRendering ? "flex-start" : "center"};
|
|
110
120
|
font-size: ${({ theme, size }) => (0, import_styleHelpers.handleFontSize)(size, theme)};
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport type { DSControlledToggleT } from './propTypes';\n\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\n}\ninterface StyledLabelT {\n width: number;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n}\ninterface StyledVisibleContentT {\n checked: boolean;\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n readOnly: boolean;\n as: 'p' | 'label';\n htmlFor: string;\n}\ninterface StyledCircleT {\n size: DSControlledToggleT.ToggleSize;\n readOnly: boolean;\n checked: boolean;\n disabled: boolean;\n}\ninterface StyledTextT {\n isLongerTextRendering: boolean;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n disabled: boolean;\n}\ninterface SetLabelWidthT {\n size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n &:focus-within {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAChD,uBAA2B;AAG3B,0BAUO;AAkCP,MAAM,eAAe;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport type { DSControlledToggleT } from './propTypes';\n\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\n}\ninterface StyledLabelT {\n width: number;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n}\ninterface StyledVisibleContentT {\n checked: boolean;\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n readOnly: boolean;\n as: 'p' | 'label';\n htmlFor: string;\n}\ninterface StyledCircleT {\n size: DSControlledToggleT.ToggleSize;\n readOnly: boolean;\n checked: boolean;\n disabled: boolean;\n}\ninterface StyledTextT {\n isLongerTextRendering: boolean;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n disabled: boolean;\n}\ninterface SetLabelWidthT {\n size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n &:focus-within {\n &:after {\n content: '';\n top: -3px;\n right: -3px;\n bottom: -3px;\n left: -3px;\n border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n border-radius: 20px;\n position: absolute;\n }\n }\n`;\n\nconst hoverStyled = css`\n background-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n else return theme.colors.neutral['600'];\n }};\n\n border-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n else return theme.colors.neutral['700'];\n }};\n`;\n\nexport const StyledContainer = styled('div')<StyledContainerT>`\n display: inline-flex;\n width: fit-content;\n justify-content: center;\n align-items: center;\n height: ${({ size }) => containerHeight[size]};\n border-radius: ${({ size }) => borderRadius[size]};\n outline: none;\n position: relative;\n z-index: 0;\n border: 2px solid transparent;\n ${({ disabled }) => !disabled && focusBorders};\n ${xStyledCommonProps}\n`;\n\nexport const StyledLabel = styled.div<StyledLabelT>`\n width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};\n height: ${({ size }) => labelHeight[size]};\n z-index: 2;\n outline: none;\n border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled.div<StyledVisibleContentT>`\n display: flex;\n margin: 0;\n padding: 0;\n align-items: center;\n height: 100%;\n flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n border: ${(props) =>\n props.size === 's'\n ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n : `\n 2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n `};\n transition: background-color 0.2s;\n background-color: ${getInterpolatedBgDsToggleColorByProps};\n &:hover {\n cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n ${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}\n }\n`;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n height: ${({ size }) => circleValues[size]};\n width: ${({ size }) => circleValues[size]};\n border-radius: 50%;\n background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n display: flex;\n flex-grow: 1;\n line-height: ${({ theme, size }) => handleFontSize(size, theme)};\n align-items: center;\n justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme, disabled }) => (disabled ? '#5c6574' : theme.colors.neutral['000'])};\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledButton = styled(DSButtonV2)`\n margin: 0;\n padding: 0;\n z-index: 20;\n border-radius: 20px;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n width: auto;\n position: absolute;\n white-space: nowrap;\n visibility: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -14,10 +14,33 @@ import {
|
|
|
14
14
|
} from "./utils/styleHelpers";
|
|
15
15
|
const focusBorders = css`
|
|
16
16
|
&:focus-within {
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
&:after {
|
|
18
|
+
content: '';
|
|
19
|
+
top: -3px;
|
|
20
|
+
right: -3px;
|
|
21
|
+
bottom: -3px;
|
|
22
|
+
left: -3px;
|
|
23
|
+
border: 2px solid ${({ theme }) => theme.colors.brand["700"]};
|
|
24
|
+
border-radius: 20px;
|
|
25
|
+
position: absolute;
|
|
26
|
+
}
|
|
19
27
|
}
|
|
20
28
|
`;
|
|
29
|
+
const hoverStyled = css`
|
|
30
|
+
background-color: ${({ checked, theme }) => {
|
|
31
|
+
if (checked)
|
|
32
|
+
return theme.colors.brand["800"];
|
|
33
|
+
else
|
|
34
|
+
return theme.colors.neutral["600"];
|
|
35
|
+
}};
|
|
36
|
+
|
|
37
|
+
border-color: ${({ checked, theme }) => {
|
|
38
|
+
if (checked)
|
|
39
|
+
return theme.colors.brand["800"];
|
|
40
|
+
else
|
|
41
|
+
return theme.colors.neutral["700"];
|
|
42
|
+
}};
|
|
43
|
+
`;
|
|
21
44
|
const StyledContainer = styled("div")`
|
|
22
45
|
display: inline-flex;
|
|
23
46
|
width: fit-content;
|
|
@@ -27,6 +50,7 @@ const StyledContainer = styled("div")`
|
|
|
27
50
|
border-radius: ${({ size }) => borderRadius[size]};
|
|
28
51
|
outline: none;
|
|
29
52
|
position: relative;
|
|
53
|
+
z-index: 0;
|
|
30
54
|
border: 2px solid transparent;
|
|
31
55
|
${({ disabled }) => !disabled && focusBorders};
|
|
32
56
|
${xStyledCommonProps}
|
|
@@ -53,20 +77,7 @@ const StyledVisibleContent = styled.div`
|
|
|
53
77
|
background-color: ${getInterpolatedBgDsToggleColorByProps};
|
|
54
78
|
&:hover {
|
|
55
79
|
cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};
|
|
56
|
-
|
|
57
|
-
background-color: ${({ checked, theme }) => {
|
|
58
|
-
if (checked)
|
|
59
|
-
return theme.colors.brand["800"];
|
|
60
|
-
else
|
|
61
|
-
return theme.colors.neutral["600"];
|
|
62
|
-
}};
|
|
63
|
-
|
|
64
|
-
border-color: ${({ checked, theme }) => {
|
|
65
|
-
if (checked)
|
|
66
|
-
return theme.colors.brand["800"];
|
|
67
|
-
else
|
|
68
|
-
return theme.colors.neutral["700"];
|
|
69
|
-
}};
|
|
80
|
+
${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}
|
|
70
81
|
}
|
|
71
82
|
`;
|
|
72
83
|
const StyledCircle = styled.div`
|
|
@@ -78,8 +89,7 @@ const StyledCircle = styled.div`
|
|
|
78
89
|
const StyledText = styled.div`
|
|
79
90
|
display: flex;
|
|
80
91
|
flex-grow: 1;
|
|
81
|
-
line-height:
|
|
82
|
-
margin-bottom: -0.12rem;
|
|
92
|
+
line-height: ${({ theme, size }) => handleFontSize(size, theme)};
|
|
83
93
|
align-items: center;
|
|
84
94
|
justify-content: ${({ isLongerTextRendering }) => isLongerTextRendering ? "flex-start" : "center"};
|
|
85
95
|
font-size: ${({ theme, size }) => handleFontSize(size, theme)};
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport type { DSControlledToggleT } from './propTypes';\n\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\n}\ninterface StyledLabelT {\n width: number;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n}\ninterface StyledVisibleContentT {\n checked: boolean;\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n readOnly: boolean;\n as: 'p' | 'label';\n htmlFor: string;\n}\ninterface StyledCircleT {\n size: DSControlledToggleT.ToggleSize;\n readOnly: boolean;\n checked: boolean;\n disabled: boolean;\n}\ninterface StyledTextT {\n isLongerTextRendering: boolean;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n disabled: boolean;\n}\ninterface SetLabelWidthT {\n size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n &:focus-within {\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,kBAAkB;AAG3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAkCP,MAAM,eAAe;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport type { DSControlledToggleT } from './propTypes';\n\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\n}\ninterface StyledLabelT {\n width: number;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n}\ninterface StyledVisibleContentT {\n checked: boolean;\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n readOnly: boolean;\n as: 'p' | 'label';\n htmlFor: string;\n}\ninterface StyledCircleT {\n size: DSControlledToggleT.ToggleSize;\n readOnly: boolean;\n checked: boolean;\n disabled: boolean;\n}\ninterface StyledTextT {\n isLongerTextRendering: boolean;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n disabled: boolean;\n}\ninterface SetLabelWidthT {\n size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n &:focus-within {\n &:after {\n content: '';\n top: -3px;\n right: -3px;\n bottom: -3px;\n left: -3px;\n border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n border-radius: 20px;\n position: absolute;\n }\n }\n`;\n\nconst hoverStyled = css`\n background-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n else return theme.colors.neutral['600'];\n }};\n\n border-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n else return theme.colors.neutral['700'];\n }};\n`;\n\nexport const StyledContainer = styled('div')<StyledContainerT>`\n display: inline-flex;\n width: fit-content;\n justify-content: center;\n align-items: center;\n height: ${({ size }) => containerHeight[size]};\n border-radius: ${({ size }) => borderRadius[size]};\n outline: none;\n position: relative;\n z-index: 0;\n border: 2px solid transparent;\n ${({ disabled }) => !disabled && focusBorders};\n ${xStyledCommonProps}\n`;\n\nexport const StyledLabel = styled.div<StyledLabelT>`\n width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};\n height: ${({ size }) => labelHeight[size]};\n z-index: 2;\n outline: none;\n border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled.div<StyledVisibleContentT>`\n display: flex;\n margin: 0;\n padding: 0;\n align-items: center;\n height: 100%;\n flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n border: ${(props) =>\n props.size === 's'\n ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n : `\n 2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n `};\n transition: background-color 0.2s;\n background-color: ${getInterpolatedBgDsToggleColorByProps};\n &:hover {\n cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n ${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}\n }\n`;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n height: ${({ size }) => circleValues[size]};\n width: ${({ size }) => circleValues[size]};\n border-radius: 50%;\n background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n display: flex;\n flex-grow: 1;\n line-height: ${({ theme, size }) => handleFontSize(size, theme)};\n align-items: center;\n justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme, disabled }) => (disabled ? '#5c6574' : theme.colors.neutral['000'])};\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledButton = styled(DSButtonV2)`\n margin: 0;\n padding: 0;\n z-index: 20;\n border-radius: 20px;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n width: auto;\n position: absolute;\n white-space: nowrap;\n visibility: hidden;\n`;\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-form-toggle",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.14.0-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Toggle",
|
|
6
6
|
"files": [
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"styled-components": "~5.3.6",
|
|
39
39
|
"uid": "~2.0.0",
|
|
40
|
-
"@elliemae/ds-button": "3.
|
|
41
|
-
"@elliemae/ds-system": "3.
|
|
42
|
-
"@elliemae/ds-tooltip": "3.
|
|
43
|
-
"@elliemae/ds-utilities": "3.
|
|
40
|
+
"@elliemae/ds-button": "3.14.0-next.10",
|
|
41
|
+
"@elliemae/ds-system": "3.14.0-next.10",
|
|
42
|
+
"@elliemae/ds-tooltip": "3.14.0-next.10",
|
|
43
|
+
"@elliemae/ds-utilities": "3.14.0-next.10"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@elliemae/pui-theme": "~2.6.0",
|