@elliemae/ds-form-checkbox 3.14.0-next.7 → 3.14.0-next.9
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 +21 -21
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/utils/styleHelpers.js +26 -26
- package/dist/cjs/utils/styleHelpers.js.map +2 -2
- package/dist/esm/styles.js +21 -21
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/utils/styleHelpers.js +26 -26
- package/dist/esm/utils/styleHelpers.js.map +2 -2
- package/package.json +4 -4
package/dist/cjs/styles.js
CHANGED
|
@@ -43,22 +43,22 @@ const StyledCheckBox = (0, import_ds_system.styled)("span")`
|
|
|
43
43
|
${({ device, theme }) => {
|
|
44
44
|
if (device === "mobile") {
|
|
45
45
|
return `
|
|
46
|
-
width:
|
|
47
|
-
height:
|
|
46
|
+
width: 1.8rem;
|
|
47
|
+
height: 1.8rem;`;
|
|
48
48
|
}
|
|
49
49
|
if (device === void 0) {
|
|
50
50
|
return `
|
|
51
51
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
52
|
-
width:
|
|
53
|
-
height:
|
|
52
|
+
width: 1.8rem;
|
|
53
|
+
height: 1.8rem;
|
|
54
54
|
}
|
|
55
|
-
width:
|
|
56
|
-
height:
|
|
55
|
+
width: 1.2rem;
|
|
56
|
+
height: 1.2rem;
|
|
57
57
|
`;
|
|
58
58
|
}
|
|
59
59
|
return `
|
|
60
|
-
width:
|
|
61
|
-
height:
|
|
60
|
+
width: 1.2rem;
|
|
61
|
+
height: 1.2rem;
|
|
62
62
|
`;
|
|
63
63
|
}}
|
|
64
64
|
|
|
@@ -121,39 +121,39 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
|
|
|
121
121
|
name: import_exported_related.DSCheckboxName,
|
|
122
122
|
slot: import_exported_related.DSCheckboxSlots.LABEL
|
|
123
123
|
})`
|
|
124
|
-
margin: 0px 0px 0px
|
|
124
|
+
margin: 0px 0px 0px 0.6rem;
|
|
125
125
|
${({ wrapLabel, theme }) => wrapLabel ? `
|
|
126
126
|
overflow-wrap: break-word;
|
|
127
127
|
white-space: pre-wrap;
|
|
128
128
|
word-break: break-word;
|
|
129
|
-
` : `margin-left:
|
|
129
|
+
` : `margin-left: 0.6rem`};
|
|
130
130
|
|
|
131
131
|
color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
132
|
-
font-size:
|
|
132
|
+
font-size: 1rem;
|
|
133
133
|
line-height: 1.1;
|
|
134
134
|
|
|
135
135
|
${({ device, theme }) => {
|
|
136
136
|
if (device === "mobile") {
|
|
137
137
|
return `
|
|
138
|
-
margin:
|
|
139
|
-
font-size:
|
|
138
|
+
margin: 0.4rem 0px -0.4rem 0.6rem;
|
|
139
|
+
font-size: 1.2rem;
|
|
140
140
|
line-height: 1.2;
|
|
141
141
|
`;
|
|
142
142
|
}
|
|
143
143
|
if (device === void 0) {
|
|
144
144
|
return `
|
|
145
145
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
146
|
-
margin:
|
|
147
|
-
font-size:
|
|
146
|
+
margin: 0.4rem 0px -0.4rem 0.6rem;
|
|
147
|
+
font-size: 1.2rem;
|
|
148
148
|
line-height: 1.2;
|
|
149
149
|
}
|
|
150
150
|
|
|
151
|
-
font-size:
|
|
151
|
+
font-size: 1rem;
|
|
152
152
|
line-height: 1.1;
|
|
153
153
|
`;
|
|
154
154
|
}
|
|
155
155
|
return `
|
|
156
|
-
font-size:
|
|
156
|
+
font-size: 1rem;
|
|
157
157
|
line-height: 1.1;
|
|
158
158
|
`;
|
|
159
159
|
}}
|
|
@@ -174,18 +174,18 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
|
174
174
|
${({ device, theme }) => {
|
|
175
175
|
if (device === "mobile") {
|
|
176
176
|
return `
|
|
177
|
-
grid-template-columns:
|
|
177
|
+
grid-template-columns: 1.8rem auto;`;
|
|
178
178
|
}
|
|
179
179
|
if (device === void 0) {
|
|
180
180
|
return `
|
|
181
181
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
182
|
-
grid-template-columns:
|
|
182
|
+
grid-template-columns: 1.8rem auto;
|
|
183
183
|
}
|
|
184
|
-
grid-template-columns:
|
|
184
|
+
grid-template-columns: 1.2rem auto;
|
|
185
185
|
`;
|
|
186
186
|
}
|
|
187
187
|
return `
|
|
188
|
-
grid-template-columns:
|
|
188
|
+
grid-template-columns: 1.2rem auto;
|
|
189
189
|
`;
|
|
190
190
|
}}
|
|
191
191
|
display: inline-grid;
|
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 type { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n width:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAEhD,0BAAuD;AACvD,8BAAgD;AAEzC,MAAM,qBAAiB,yBAAO,MAAM;AAAA;AAAA,gBAE3B,CAAC,EAAE,OAAO,SAAS,UAAM,2CAAsB,OAAO,QAAQ;AAAA;AAAA,IAE1E,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n width: 1.8rem;\n height: 1.8rem;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.8rem;\n height: 1.8rem;\n }\n width: 1.2rem;\n height: 1.2rem;\n `;\n }\n return `\n width: 1.2rem;\n height: 1.2rem;\n `;\n }}\n\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n &:hover {\n background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n }\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n }\n\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n }\n }\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`;\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`;\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 margin: 0px 0px 0px 0.6rem;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`\n : `margin-left: 0.6rem`};\n\n color: ${({ theme, disabled, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 1rem;\n line-height: 1.1;\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n margin: 0.4rem 0px -0.4rem 0.6rem;\n font-size: 1.2rem;\n line-height: 1.2;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n margin: 0.4rem 0px -0.4rem 0.6rem;\n font-size: 1.2rem;\n line-height: 1.2;\n }\n\n font-size: 1rem;\n line-height: 1.1;\n `;\n }\n return `\n font-size: 1rem;\n line-height: 1.1;\n `;\n }}\n\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n grid-template-columns: 1.8rem auto;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.8rem auto;\n }\n grid-template-columns: 1.2rem auto;\n `;\n }\n return `\n grid-template-columns: 1.2rem auto;\n `;\n }}\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: center;\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -46,54 +46,54 @@ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHoverin
|
|
|
46
46
|
const desktopMixedCheckmark = `
|
|
47
47
|
position: absolute;
|
|
48
48
|
content: '';
|
|
49
|
-
top:
|
|
50
|
-
left:
|
|
49
|
+
top: 0.525rem;
|
|
50
|
+
left: 0.3rem;
|
|
51
51
|
background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
52
|
-
width:
|
|
53
|
-
height:
|
|
52
|
+
width: 0.6rem;
|
|
53
|
+
height: 0.15rem;
|
|
54
54
|
`;
|
|
55
55
|
const normalMixedCheckmark = `
|
|
56
56
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
57
|
-
top:
|
|
58
|
-
left:
|
|
59
|
-
height:
|
|
60
|
-
width:
|
|
57
|
+
top:0.85rem;
|
|
58
|
+
left:0.45rem;
|
|
59
|
+
height:0.15rem;
|
|
60
|
+
width:0.9rem;
|
|
61
61
|
}
|
|
62
62
|
${desktopMixedCheckmark}
|
|
63
63
|
`;
|
|
64
64
|
const mobileMixedCheckmark = `
|
|
65
65
|
${desktopMixedCheckmark}
|
|
66
|
-
top:
|
|
67
|
-
left:
|
|
68
|
-
height:
|
|
69
|
-
width:
|
|
66
|
+
top:0.85rem;
|
|
67
|
+
left:0.45rem;
|
|
68
|
+
height:0.15rem;
|
|
69
|
+
width:0.9rem;
|
|
70
70
|
`;
|
|
71
71
|
const desktopCheckmark = `
|
|
72
72
|
position: absolute;
|
|
73
73
|
content: '';
|
|
74
|
-
top:
|
|
75
|
-
left:
|
|
76
|
-
border-left:
|
|
77
|
-
border-bottom:
|
|
78
|
-
height:
|
|
79
|
-
width:
|
|
74
|
+
top: 0.3rem;
|
|
75
|
+
left: 0.225rem;
|
|
76
|
+
border-left: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
77
|
+
border-bottom: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
78
|
+
height: 0.4rem;
|
|
79
|
+
width: 0.75rem;
|
|
80
80
|
transform: rotate(-45deg);
|
|
81
81
|
`;
|
|
82
82
|
const normalCheckmark = `
|
|
83
83
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
84
|
-
top:
|
|
85
|
-
left:
|
|
86
|
-
height:
|
|
87
|
-
width:
|
|
84
|
+
top: 0.45rem;
|
|
85
|
+
left: 0.3rem;
|
|
86
|
+
height: 0.6rem;
|
|
87
|
+
width: 1.2rem;
|
|
88
88
|
}
|
|
89
89
|
${desktopCheckmark}
|
|
90
90
|
`;
|
|
91
91
|
const mobileCheckmark = `
|
|
92
92
|
${desktopCheckmark}
|
|
93
|
-
top:
|
|
94
|
-
left:
|
|
95
|
-
height:
|
|
96
|
-
width:
|
|
93
|
+
top: 0.45rem;
|
|
94
|
+
left: 0.3rem;
|
|
95
|
+
height: 0.6rem;
|
|
96
|
+
width: 1.2rem;
|
|
97
97
|
`;
|
|
98
98
|
if (checked === "mixed") {
|
|
99
99
|
return `&:before {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n if (isHovering) {\n return colors.brand[800];\n }\n return colors.brand[500];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n device: string | undefined = undefined,\n): string => {\n const desktopMixedCheckmark = `\n position: absolute;\n content: '';\n top:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n if (isHovering) {\n return colors.brand[800];\n }\n return colors.brand[500];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n device: string | undefined = undefined,\n): string => {\n const desktopMixedCheckmark = `\n position: absolute;\n content: '';\n top: 0.525rem;\n left: 0.3rem;\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n width: 0.6rem;\n height: 0.15rem;\n`;\n\n const normalMixedCheckmark = `\n @media (max-width: ${theme.breakpoints.small}) {\n top:0.85rem;\n left:0.45rem;\n height:0.15rem;\n width:0.9rem;\n }\n ${desktopMixedCheckmark}\n`;\n const mobileMixedCheckmark = `\n ${desktopMixedCheckmark}\n top:0.85rem;\n left:0.45rem;\n height:0.15rem;\n width:0.9rem;\n `;\n const desktopCheckmark = `\n position: absolute;\n content: '';\n top: 0.3rem;\n left: 0.225rem;\n border-left: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n border-bottom: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n height: 0.4rem;\n width: 0.75rem;\n transform: rotate(-45deg);\n`;\n\n const normalCheckmark = `\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.45rem;\n left: 0.3rem;\n height: 0.6rem;\n width: 1.2rem;\n }\n ${desktopCheckmark}\n`;\n const mobileCheckmark = `\n ${desktopCheckmark}\n top: 0.45rem;\n left: 0.3rem;\n height: 0.6rem;\n width: 1.2rem;\n `;\n\n if (checked === 'mixed') {\n return `&:before {\n ${\n device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark\n }\n }`;\n }\n if (checked) {\n return `&:before {\n ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n }`;\n }\n return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n if (disabled) {\n return colors.neutral['080'];\n }\n\n return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAK3F,QAAM,uBAAuB;AAAA,yBACN,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,uBAAuB;AAAA,MACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMJ,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKG,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,gCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAM3G,QAAM,kBAAkB;AAAA,yBACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOJ,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,QAEH,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAGjG;AACA,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEzF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -9,22 +9,22 @@ const StyledCheckBox = styled("span")`
|
|
|
9
9
|
${({ device, theme }) => {
|
|
10
10
|
if (device === "mobile") {
|
|
11
11
|
return `
|
|
12
|
-
width:
|
|
13
|
-
height:
|
|
12
|
+
width: 1.8rem;
|
|
13
|
+
height: 1.8rem;`;
|
|
14
14
|
}
|
|
15
15
|
if (device === void 0) {
|
|
16
16
|
return `
|
|
17
17
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
18
|
-
width:
|
|
19
|
-
height:
|
|
18
|
+
width: 1.8rem;
|
|
19
|
+
height: 1.8rem;
|
|
20
20
|
}
|
|
21
|
-
width:
|
|
22
|
-
height:
|
|
21
|
+
width: 1.2rem;
|
|
22
|
+
height: 1.2rem;
|
|
23
23
|
`;
|
|
24
24
|
}
|
|
25
25
|
return `
|
|
26
|
-
width:
|
|
27
|
-
height:
|
|
26
|
+
width: 1.2rem;
|
|
27
|
+
height: 1.2rem;
|
|
28
28
|
`;
|
|
29
29
|
}}
|
|
30
30
|
|
|
@@ -87,39 +87,39 @@ const StyledLabel = styled("label", {
|
|
|
87
87
|
name: DSCheckboxName,
|
|
88
88
|
slot: DSCheckboxSlots.LABEL
|
|
89
89
|
})`
|
|
90
|
-
margin: 0px 0px 0px
|
|
90
|
+
margin: 0px 0px 0px 0.6rem;
|
|
91
91
|
${({ wrapLabel, theme }) => wrapLabel ? `
|
|
92
92
|
overflow-wrap: break-word;
|
|
93
93
|
white-space: pre-wrap;
|
|
94
94
|
word-break: break-word;
|
|
95
|
-
` : `margin-left:
|
|
95
|
+
` : `margin-left: 0.6rem`};
|
|
96
96
|
|
|
97
97
|
color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
98
|
-
font-size:
|
|
98
|
+
font-size: 1rem;
|
|
99
99
|
line-height: 1.1;
|
|
100
100
|
|
|
101
101
|
${({ device, theme }) => {
|
|
102
102
|
if (device === "mobile") {
|
|
103
103
|
return `
|
|
104
|
-
margin:
|
|
105
|
-
font-size:
|
|
104
|
+
margin: 0.4rem 0px -0.4rem 0.6rem;
|
|
105
|
+
font-size: 1.2rem;
|
|
106
106
|
line-height: 1.2;
|
|
107
107
|
`;
|
|
108
108
|
}
|
|
109
109
|
if (device === void 0) {
|
|
110
110
|
return `
|
|
111
111
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
112
|
-
margin:
|
|
113
|
-
font-size:
|
|
112
|
+
margin: 0.4rem 0px -0.4rem 0.6rem;
|
|
113
|
+
font-size: 1.2rem;
|
|
114
114
|
line-height: 1.2;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
font-size:
|
|
117
|
+
font-size: 1rem;
|
|
118
118
|
line-height: 1.1;
|
|
119
119
|
`;
|
|
120
120
|
}
|
|
121
121
|
return `
|
|
122
|
-
font-size:
|
|
122
|
+
font-size: 1rem;
|
|
123
123
|
line-height: 1.1;
|
|
124
124
|
`;
|
|
125
125
|
}}
|
|
@@ -140,18 +140,18 @@ const StyledContainer = styled("div", {
|
|
|
140
140
|
${({ device, theme }) => {
|
|
141
141
|
if (device === "mobile") {
|
|
142
142
|
return `
|
|
143
|
-
grid-template-columns:
|
|
143
|
+
grid-template-columns: 1.8rem auto;`;
|
|
144
144
|
}
|
|
145
145
|
if (device === void 0) {
|
|
146
146
|
return `
|
|
147
147
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
148
|
-
grid-template-columns:
|
|
148
|
+
grid-template-columns: 1.8rem auto;
|
|
149
149
|
}
|
|
150
|
-
grid-template-columns:
|
|
150
|
+
grid-template-columns: 1.2rem auto;
|
|
151
151
|
`;
|
|
152
152
|
}
|
|
153
153
|
return `
|
|
154
|
-
grid-template-columns:
|
|
154
|
+
grid-template-columns: 1.2rem auto;
|
|
155
155
|
`;
|
|
156
156
|
}}
|
|
157
157
|
display: inline-grid;
|
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 type { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n width:
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;AAEhD,SAAS,uBAAuB,uBAAuB;AACvD,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,iBAAiB,OAAO,MAAM;AAAA;AAAA,gBAE3B,CAAC,EAAE,OAAO,SAAS,MAAM,sBAAsB,OAAO,QAAQ;AAAA;AAAA,IAE1E,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n width: 1.8rem;\n height: 1.8rem;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.8rem;\n height: 1.8rem;\n }\n width: 1.2rem;\n height: 1.2rem;\n `;\n }\n return `\n width: 1.2rem;\n height: 1.2rem;\n `;\n }}\n\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n &:hover {\n background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n }\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n }\n\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n }\n }\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`;\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`;\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 margin: 0px 0px 0px 0.6rem;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`\n : `margin-left: 0.6rem`};\n\n color: ${({ theme, disabled, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 1rem;\n line-height: 1.1;\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n margin: 0.4rem 0px -0.4rem 0.6rem;\n font-size: 1.2rem;\n line-height: 1.2;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n margin: 0.4rem 0px -0.4rem 0.6rem;\n font-size: 1.2rem;\n line-height: 1.2;\n }\n\n font-size: 1rem;\n line-height: 1.1;\n `;\n }\n return `\n font-size: 1rem;\n line-height: 1.1;\n `;\n }}\n\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n grid-template-columns: 1.8rem auto;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.8rem auto;\n }\n grid-template-columns: 1.2rem auto;\n `;\n }\n return `\n grid-template-columns: 1.2rem auto;\n `;\n }}\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: center;\n ${xStyledCommonProps}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;AAEhD,SAAS,uBAAuB,uBAAuB;AACvD,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,iBAAiB,OAAO,MAAM;AAAA;AAAA,gBAE3B,CAAC,EAAE,OAAO,SAAS,MAAM,sBAAsB,OAAO,QAAQ;AAAA;AAAA,IAE1E,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO3C;AACA,SAAO;AAAA;AAAA;AAAA;AAIT;AAAA;AAAA,IAEE,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MACxD,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MAAM;AAAA;AAAA,kBAE7D,CAAC,EAAE,OAAO,SAAS,MAAO,CAAC,WAAW,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA,QAI1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MACxD,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,0BAIxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAYpC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI7G,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahB,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG;AAAA,IACA,CAAC,EAAE,iBAAiB,SAAS,MAC7B,WACI;AAAA;AAAA,OAGA;AAAA;AAGD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,IAEG,CAAC,EAAE,WAAW,MAAM,MACpB,YACI;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA,WAEG,CAAC,EAAE,OAAO,UAAU,SAAS,MACpC,YAAY,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIxE,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS3C;AACA,SAAO;AAAA;AAAA;AAAA;AAIT;AAAA;AAAA;AAAA;AAAA,IAIE,CAAC,EAAE,SAAS,MACZ,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,OAAO,MAAM;AAErC,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA,EAET;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAK3C;AACA,SAAO;AAAA;AAAA;AAGT;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -15,54 +15,54 @@ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHoverin
|
|
|
15
15
|
const desktopMixedCheckmark = `
|
|
16
16
|
position: absolute;
|
|
17
17
|
content: '';
|
|
18
|
-
top:
|
|
19
|
-
left:
|
|
18
|
+
top: 0.525rem;
|
|
19
|
+
left: 0.3rem;
|
|
20
20
|
background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
21
|
-
width:
|
|
22
|
-
height:
|
|
21
|
+
width: 0.6rem;
|
|
22
|
+
height: 0.15rem;
|
|
23
23
|
`;
|
|
24
24
|
const normalMixedCheckmark = `
|
|
25
25
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
26
|
-
top:
|
|
27
|
-
left:
|
|
28
|
-
height:
|
|
29
|
-
width:
|
|
26
|
+
top:0.85rem;
|
|
27
|
+
left:0.45rem;
|
|
28
|
+
height:0.15rem;
|
|
29
|
+
width:0.9rem;
|
|
30
30
|
}
|
|
31
31
|
${desktopMixedCheckmark}
|
|
32
32
|
`;
|
|
33
33
|
const mobileMixedCheckmark = `
|
|
34
34
|
${desktopMixedCheckmark}
|
|
35
|
-
top:
|
|
36
|
-
left:
|
|
37
|
-
height:
|
|
38
|
-
width:
|
|
35
|
+
top:0.85rem;
|
|
36
|
+
left:0.45rem;
|
|
37
|
+
height:0.15rem;
|
|
38
|
+
width:0.9rem;
|
|
39
39
|
`;
|
|
40
40
|
const desktopCheckmark = `
|
|
41
41
|
position: absolute;
|
|
42
42
|
content: '';
|
|
43
|
-
top:
|
|
44
|
-
left:
|
|
45
|
-
border-left:
|
|
46
|
-
border-bottom:
|
|
47
|
-
height:
|
|
48
|
-
width:
|
|
43
|
+
top: 0.3rem;
|
|
44
|
+
left: 0.225rem;
|
|
45
|
+
border-left: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
46
|
+
border-bottom: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
47
|
+
height: 0.4rem;
|
|
48
|
+
width: 0.75rem;
|
|
49
49
|
transform: rotate(-45deg);
|
|
50
50
|
`;
|
|
51
51
|
const normalCheckmark = `
|
|
52
52
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
53
|
-
top:
|
|
54
|
-
left:
|
|
55
|
-
height:
|
|
56
|
-
width:
|
|
53
|
+
top: 0.45rem;
|
|
54
|
+
left: 0.3rem;
|
|
55
|
+
height: 0.6rem;
|
|
56
|
+
width: 1.2rem;
|
|
57
57
|
}
|
|
58
58
|
${desktopCheckmark}
|
|
59
59
|
`;
|
|
60
60
|
const mobileCheckmark = `
|
|
61
61
|
${desktopCheckmark}
|
|
62
|
-
top:
|
|
63
|
-
left:
|
|
64
|
-
height:
|
|
65
|
-
width:
|
|
62
|
+
top: 0.45rem;
|
|
63
|
+
left: 0.3rem;
|
|
64
|
+
height: 0.6rem;
|
|
65
|
+
width: 1.2rem;
|
|
66
66
|
`;
|
|
67
67
|
if (checked === "mixed") {
|
|
68
68
|
return `&:before {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n if (isHovering) {\n return colors.brand[800];\n }\n return colors.brand[500];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n device: string | undefined = undefined,\n): string => {\n const desktopMixedCheckmark = `\n position: absolute;\n content: '';\n top:
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n if (isHovering) {\n return colors.brand[800];\n }\n return colors.brand[500];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n device: string | undefined = undefined,\n): string => {\n const desktopMixedCheckmark = `\n position: absolute;\n content: '';\n top: 0.525rem;\n left: 0.3rem;\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n width: 0.6rem;\n height: 0.15rem;\n`;\n\n const normalMixedCheckmark = `\n @media (max-width: ${theme.breakpoints.small}) {\n top:0.85rem;\n left:0.45rem;\n height:0.15rem;\n width:0.9rem;\n }\n ${desktopMixedCheckmark}\n`;\n const mobileMixedCheckmark = `\n ${desktopMixedCheckmark}\n top:0.85rem;\n left:0.45rem;\n height:0.15rem;\n width:0.9rem;\n `;\n const desktopCheckmark = `\n position: absolute;\n content: '';\n top: 0.3rem;\n left: 0.225rem;\n border-left: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n border-bottom: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n height: 0.4rem;\n width: 0.75rem;\n transform: rotate(-45deg);\n`;\n\n const normalCheckmark = `\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.45rem;\n left: 0.3rem;\n height: 0.6rem;\n width: 1.2rem;\n }\n ${desktopCheckmark}\n`;\n const mobileCheckmark = `\n ${desktopCheckmark}\n top: 0.45rem;\n left: 0.3rem;\n height: 0.6rem;\n width: 1.2rem;\n `;\n\n if (checked === 'mixed') {\n return `&:before {\n ${\n device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark\n }\n }`;\n }\n if (checked) {\n return `&:before {\n ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n }`;\n }\n return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n if (disabled) {\n return colors.neutral['080'];\n }\n\n return colors.neutral['000'];\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAK3F,QAAM,uBAAuB;AAAA,yBACN,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,uBAAuB;AAAA,MACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMJ,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKG,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,gCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAM3G,QAAM,kBAAkB;AAAA,yBACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOJ,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,QAEH,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAGjG;AACA,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEzF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
|
|
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.14.0-next.
|
|
3
|
+
"version": "3.14.0-next.9",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Checkbox",
|
|
6
6
|
"files": [
|
|
@@ -36,9 +36,9 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"uid": "~2.0.0",
|
|
39
|
-
"@elliemae/ds-system": "3.14.0-next.
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-system": "3.14.0-next.9",
|
|
40
|
+
"@elliemae/ds-truncated-tooltip-text": "3.14.0-next.9",
|
|
41
|
+
"@elliemae/ds-utilities": "3.14.0-next.9"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@elliemae/pui-theme": "~2.6.0",
|