@elliemae/ds-form-checkbox 3.70.0-next.48 → 3.70.0-next.50
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 +4 -28
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/styles.js +5 -29
- package/dist/esm/styles.js.map +2 -2
- package/package.json +8 -8
package/dist/cjs/styles.js
CHANGED
|
@@ -105,6 +105,7 @@ const StyledCheckBox = (0, import_ds_system.styled)("span", {
|
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
107
|
&:focus-within {
|
|
108
|
+
background: ${({ theme, checked, disabled, applyAriaDisabled, readOnly }) => checked === true && !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : void 0};
|
|
108
109
|
&:hover {
|
|
109
110
|
${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}
|
|
110
111
|
}
|
|
@@ -114,7 +115,7 @@ const StyledCheckBox = (0, import_ds_system.styled)("span", {
|
|
|
114
115
|
}
|
|
115
116
|
&:active {
|
|
116
117
|
&:after {
|
|
117
|
-
border: ${({ disabled, theme }) => disabled ? `1px solid ${theme.colors.neutral[400]}` : `
|
|
118
|
+
border: ${({ disabled, theme }) => disabled ? `1px solid ${theme.colors.neutral[400]}` : `1px solid ${theme.colors.brand[600]}`};
|
|
118
119
|
}
|
|
119
120
|
}
|
|
120
121
|
`;
|
|
@@ -162,32 +163,7 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
|
|
|
162
163
|
`};
|
|
163
164
|
width: fit-content;
|
|
164
165
|
color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};
|
|
165
|
-
|
|
166
|
-
@media (max-width: ${import_ds_system.th.breakpoint("small")}) {
|
|
167
|
-
line-height: 1rem; /* 13px / 16 */
|
|
168
|
-
}
|
|
169
|
-
${({ device, theme }) => {
|
|
170
|
-
if (device === "mobile") {
|
|
171
|
-
return `
|
|
172
|
-
@media (max-width: ${theme.breakpoints.small}) {
|
|
173
|
-
font-size: 1rem; /* 16px / 16 */
|
|
174
|
-
}
|
|
175
|
-
font-size: 1.2307rem; /* 16px / 13 */
|
|
176
|
-
`;
|
|
177
|
-
}
|
|
178
|
-
if (device === void 0) {
|
|
179
|
-
return `
|
|
180
|
-
font-size: 1rem;
|
|
181
|
-
`;
|
|
182
|
-
}
|
|
183
|
-
return `
|
|
184
|
-
@media (max-width: ${theme.breakpoints.small}) {
|
|
185
|
-
font-size: 0.8125rem; /* 13px / 16 */
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
font-size: 1rem; /* 13px / 13 */
|
|
189
|
-
`;
|
|
190
|
-
}}
|
|
166
|
+
/* Typography metrics delegated to child DSTypography b2 */
|
|
191
167
|
display: inherit;
|
|
192
168
|
${({ disabled }) => disabled ? `&:hover {
|
|
193
169
|
cursor: not-allowed;
|
|
@@ -228,7 +204,7 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
|
228
204
|
|
|
229
205
|
`;
|
|
230
206
|
}}
|
|
231
|
-
column-gap: ${({ hasLabel }) => hasLabel ? "8px" : "0px
|
|
207
|
+
column-gap: ${({ hasLabel }) => hasLabel ? "8px" : "0px"};
|
|
232
208
|
display: inline-grid;
|
|
233
209
|
grid-template-rows: min-content;
|
|
234
210
|
align-items: ${({ wrapLabel }) => wrapLabel ? "flex-start" : "center"};
|
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": ["/* eslint-disable max-lines */\nimport { styled,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './constants/index.js';\n\nexport const StyledCheckBox = styled('span', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n handleBackgroundColor(theme, disabled, applyAriaDisabled, readOnly)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.846rem; /* 24px / 13 */\n height: 1.846rem; /* 24px / 13 */`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.2307rem;\n height: 1.2307rem;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1rem; /* 16px / 16 */\n height: 1rem; /* 16px / 16 */\n }\n width: 1.2307rem; /* 16px / 13 */\n height: 1.2307rem; /* 16px / 13 */\n `;\n }}\n\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, false, device)}\n\n &:after {\n content: '';\n border-radius: 2px;\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n }\n &:hover {\n background: ${({ theme, applyAriaDisabled, disabled, readOnly }) =>\n !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : undefined};\n\n &:after {\n border: 1px solid\n ${({ theme, hasError, disabled, applyAriaDisabled, readOnly }) => {\n if (hasError) return theme.colors.danger[900];\n if (applyAriaDisabled || readOnly) return theme.colors.brand[700];\n if (disabled) return theme.colors.neutral[400];\n return theme.colors.brand[600];\n }};\n }\n }\n &:focus-within {\n background: ${({ theme, checked, disabled, applyAriaDisabled, readOnly }) =>\n checked === true && !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : undefined};\n &:hover {\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}\n }\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n &:active {\n &:after {\n border: ${({ disabled, theme }) =>\n disabled ? `1px solid ${theme.colors.neutral[400]}` : `1px solid ${theme.colors.brand[600]}`};\n }\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ 'aria-disabled': disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n width: fit-content;\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n /* Typography metrics delegated to child DSTypography b2 */\n display: inherit;\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledLabelTypography = styled(DSTypography, {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL_TYPOGRAPHY,\n})``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop'; wrapLabel?: boolean; hasLabel: boolean }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto; /* 24px / 16px */\n }\n grid-template-columns: 1.846rem auto;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto;\n }\n grid-template-columns: 1.23rem auto;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1rem auto; /* 16px / 16px */\n }\n grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n `;\n }}\n column-gap: ${({ hasLabel }) => (hasLabel ? '8px' : '0px')};\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledHiddenP = styled('p', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.READ_ONLY_HELPER,\n})`\n display: none;\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
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled,
|
|
2
|
+
import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
3
|
import { DSTypography } from "@elliemae/ds-typography";
|
|
4
4
|
import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers.js";
|
|
5
5
|
import { DSCheckboxName, DSCheckboxSlots } from "./constants/index.js";
|
|
@@ -66,6 +66,7 @@ const StyledCheckBox = styled("span", {
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
&:focus-within {
|
|
69
|
+
background: ${({ theme, checked, disabled, applyAriaDisabled, readOnly }) => checked === true && !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : void 0};
|
|
69
70
|
&:hover {
|
|
70
71
|
${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}
|
|
71
72
|
}
|
|
@@ -75,7 +76,7 @@ const StyledCheckBox = styled("span", {
|
|
|
75
76
|
}
|
|
76
77
|
&:active {
|
|
77
78
|
&:after {
|
|
78
|
-
border: ${({ disabled, theme }) => disabled ? `1px solid ${theme.colors.neutral[400]}` : `
|
|
79
|
+
border: ${({ disabled, theme }) => disabled ? `1px solid ${theme.colors.neutral[400]}` : `1px solid ${theme.colors.brand[600]}`};
|
|
79
80
|
}
|
|
80
81
|
}
|
|
81
82
|
`;
|
|
@@ -123,32 +124,7 @@ const StyledLabel = styled("label", {
|
|
|
123
124
|
`};
|
|
124
125
|
width: fit-content;
|
|
125
126
|
color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};
|
|
126
|
-
|
|
127
|
-
@media (max-width: ${th.breakpoint("small")}) {
|
|
128
|
-
line-height: 1rem; /* 13px / 16 */
|
|
129
|
-
}
|
|
130
|
-
${({ device, theme }) => {
|
|
131
|
-
if (device === "mobile") {
|
|
132
|
-
return `
|
|
133
|
-
@media (max-width: ${theme.breakpoints.small}) {
|
|
134
|
-
font-size: 1rem; /* 16px / 16 */
|
|
135
|
-
}
|
|
136
|
-
font-size: 1.2307rem; /* 16px / 13 */
|
|
137
|
-
`;
|
|
138
|
-
}
|
|
139
|
-
if (device === void 0) {
|
|
140
|
-
return `
|
|
141
|
-
font-size: 1rem;
|
|
142
|
-
`;
|
|
143
|
-
}
|
|
144
|
-
return `
|
|
145
|
-
@media (max-width: ${theme.breakpoints.small}) {
|
|
146
|
-
font-size: 0.8125rem; /* 13px / 16 */
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
font-size: 1rem; /* 13px / 13 */
|
|
150
|
-
`;
|
|
151
|
-
}}
|
|
127
|
+
/* Typography metrics delegated to child DSTypography b2 */
|
|
152
128
|
display: inherit;
|
|
153
129
|
${({ disabled }) => disabled ? `&:hover {
|
|
154
130
|
cursor: not-allowed;
|
|
@@ -189,7 +165,7 @@ const StyledContainer = styled("div", {
|
|
|
189
165
|
|
|
190
166
|
`;
|
|
191
167
|
}}
|
|
192
|
-
column-gap: ${({ hasLabel }) => hasLabel ? "8px" : "0px
|
|
168
|
+
column-gap: ${({ hasLabel }) => hasLabel ? "8px" : "0px"};
|
|
193
169
|
display: inline-grid;
|
|
194
170
|
grid-template-rows: min-content;
|
|
195
171
|
align-items: ${({ wrapLabel }) => wrapLabel ? "flex-start" : "center"};
|
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", "/* eslint-disable max-lines */\nimport { styled,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './constants/index.js';\n\nexport const StyledCheckBox = styled('span', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n handleBackgroundColor(theme, disabled, applyAriaDisabled, readOnly)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.846rem; /* 24px / 13 */\n height: 1.846rem; /* 24px / 13 */`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.2307rem;\n height: 1.2307rem;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1rem; /* 16px / 16 */\n height: 1rem; /* 16px / 16 */\n }\n width: 1.2307rem; /* 16px / 13 */\n height: 1.2307rem; /* 16px / 13 */\n `;\n }}\n\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, false, device)}\n\n &:after {\n content: '';\n border-radius: 2px;\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n }\n &:hover {\n background: ${({ theme, applyAriaDisabled, disabled, readOnly }) =>\n !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : undefined};\n\n &:after {\n border: 1px solid\n ${({ theme, hasError, disabled, applyAriaDisabled, readOnly }) => {\n if (hasError) return theme.colors.danger[900];\n if (applyAriaDisabled || readOnly) return theme.colors.brand[700];\n if (disabled) return theme.colors.neutral[400];\n return theme.colors.brand[600];\n }};\n }\n }\n &:focus-within {\n background: ${({ theme, checked, disabled, applyAriaDisabled, readOnly }) =>\n checked === true && !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : undefined};\n &:hover {\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}\n }\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n &:active {\n &:after {\n border: ${({ disabled, theme }) =>\n disabled ? `1px solid ${theme.colors.neutral[400]}` : `1px solid ${theme.colors.brand[600]}`};\n }\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ 'aria-disabled': disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n width: fit-content;\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n /* Typography metrics delegated to child DSTypography b2 */\n display: inherit;\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledLabelTypography = styled(DSTypography, {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL_TYPOGRAPHY,\n})``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop'; wrapLabel?: boolean; hasLabel: boolean }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto; /* 24px / 16px */\n }\n grid-template-columns: 1.846rem auto;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto;\n }\n grid-template-columns: 1.23rem auto;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1rem auto; /* 16px / 16px */\n }\n grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n `;\n }}\n column-gap: ${({ hasLabel }) => (hasLabel ? '8px' : '0px')};\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledHiddenP = styled('p', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.READ_ONLY_HELPER,\n})`\n display: none;\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-checkbox",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.50",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Checkbox",
|
|
6
6
|
"files": [
|
|
@@ -37,19 +37,19 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"uid": "^2.0.2",
|
|
40
|
-
"@elliemae/ds-floating-context": "3.70.0-next.
|
|
41
|
-
"@elliemae/ds-props-helpers": "3.70.0-next.
|
|
42
|
-
"@elliemae/ds-system": "3.70.0-next.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-floating-context": "3.70.0-next.50",
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.50",
|
|
42
|
+
"@elliemae/ds-system": "3.70.0-next.50",
|
|
43
|
+
"@elliemae/ds-typography": "3.70.0-next.50",
|
|
44
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.50"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@elliemae/pui-theme": "~2.13.0",
|
|
48
48
|
"@playwright/experimental-ct-react": "^1.60.0",
|
|
49
49
|
"jest": "^30.0.0",
|
|
50
50
|
"styled-components": "~5.3.9",
|
|
51
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
52
|
-
"@elliemae/ds-test-utils": "3.70.0-next.
|
|
51
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.50",
|
|
52
|
+
"@elliemae/ds-test-utils": "3.70.0-next.50"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"@elliemae/pui-theme": "~2.13.0",
|