@elliemae/ds-form-checkbox 3.14.0-next.1 → 3.14.0-next.11
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/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/styles.js +29 -23
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/utils/styleHelpers.js +32 -29
- package/dist/cjs/utils/styleHelpers.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/styles.js +29 -23
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/utils/styleHelpers.js +32 -29
- package/dist/esm/utils/styleHelpers.js.map +2 -2
- package/package.json +4 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react';\nimport type { GlobalAttributesT } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { DEVICE } from './constants/device';\n\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = typeof DEVICE[DevicesKeys];\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown?: React.KeyboardEventHandler;\n innerRef?: React.RefObject<HTMLInputElement>;\n 'data-testid'?: string;\n device?: Devices;\n }\n\n export interface LegacyAriaProps {\n ariaControls?: string;\n ariaLabel?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: Devices;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: Devices;\n }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n .description('Wheter the checkbox is set as bool or mixed')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly)\n .defaultValue(false),\n onChange: PropTypes.func\n .description('function executed when the checkbox changes state')\n .signature('(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly),\n 'aria-controls': PropTypes.string\n .description('a11y required attribute when \"mixed\" state is to be supported')\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props.ariaControls !== 'string',\n ),\n ariaControls: PropTypes.string\n .description('deprecated equivalent of \"aria-controls\", please use \"aria-controls\" instead')\n .deprecated({ version: '3.x', message: 'use \"aria-controls\" instead' })\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props['aria-controls'] !== 'string',\n ),\n label: PropTypes.string.description(\n 'Checkbox Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n hasError: PropTypes.bool.description('Whether the checkbox has error or not.').defaultValue(false),\n disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label').defaultValue(false),\n device: PropTypes.oneOf(Object.values(DEVICE)).description(\n 'When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration',\n ),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["import type React from 'react';\nimport type { GlobalAttributesT } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { DEVICE } from './constants/device';\n\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = (typeof DEVICE)[DevicesKeys];\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown?: React.KeyboardEventHandler;\n innerRef?: React.RefObject<HTMLInputElement>;\n 'data-testid'?: string;\n device?: Devices;\n }\n\n export interface LegacyAriaProps {\n ariaControls?: string;\n ariaLabel?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: Devices;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: Devices;\n }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n .description('Wheter the checkbox is set as bool or mixed')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly)\n .defaultValue(false),\n onChange: PropTypes.func\n .description('function executed when the checkbox changes state')\n .signature('(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly),\n 'aria-controls': PropTypes.string\n .description('a11y required attribute when \"mixed\" state is to be supported')\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props.ariaControls !== 'string',\n ),\n ariaControls: PropTypes.string\n .description('deprecated equivalent of \"aria-controls\", please use \"aria-controls\" instead')\n .deprecated({ version: '3.x', message: 'use \"aria-controls\" instead' })\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props['aria-controls'] !== 'string',\n ),\n label: PropTypes.string.description(\n 'Checkbox Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n hasError: PropTypes.bool.description('Whether the checkbox has error or not.').defaultValue(false),\n disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label').defaultValue(false),\n device: PropTypes.oneOf(Object.values(DEVICE)).description(\n 'When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration',\n ),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,0BAAuE;AACvE,oBAAuB;AAgEhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAC5D,YAAY,6CAA6C,EACzD,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,8BAAU,KACjB,YAAY,mDAAmD,EAC/D,UAAU,+DAA+D,EACzE,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ;AAAA,EAC1F,iBAAiB,8BAAU,OACxB,YAAY,+DAA+D,EAC3E;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,iBAAiB;AAAA,EACrG;AAAA,EACF,cAAc,8BAAU,OACrB,YAAY,8EAA8E,EAC1F,WAAW,EAAE,SAAS,OAAO,SAAS,8BAA8B,CAAC,EACrE;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,qBAAqB;AAAA,EACzG;AAAA,EACF,OAAO,8BAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,UAAU,8BAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,KAAK;AAAA,EACjG,UAAU,8BAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,UAAU,8BAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,WAAW,8BAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,8BAAU,MAAM,OAAO,OAAO,oBAAM,CAAC,EAAE;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AACrG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -43,34 +43,40 @@ 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.23rem;
|
|
56
|
+
height: 1.23rem;
|
|
57
57
|
`;
|
|
58
58
|
}
|
|
59
59
|
return `
|
|
60
|
-
width:
|
|
61
|
-
height:
|
|
60
|
+
width: 1.23rem;
|
|
61
|
+
height: 1.23rem;
|
|
62
62
|
`;
|
|
63
63
|
}}
|
|
64
64
|
|
|
65
65
|
${({ theme, checked, disabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, false, device)}
|
|
66
66
|
&:hover {
|
|
67
|
-
background: ${({ theme,
|
|
67
|
+
background: ${({ theme, disabled }) => !disabled ? theme.colors.brand[200] : void 0};
|
|
68
68
|
}
|
|
69
69
|
&:focus-within {
|
|
70
70
|
&:hover {
|
|
71
71
|
${({ theme, checked, disabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, true, device)}
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
+
&:after {
|
|
75
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&:active {
|
|
74
80
|
&:after {
|
|
75
81
|
border: 2px solid ${({ theme }) => theme.colors.brand[600]};
|
|
76
82
|
}
|
|
@@ -121,39 +127,39 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
|
|
|
121
127
|
name: import_exported_related.DSCheckboxName,
|
|
122
128
|
slot: import_exported_related.DSCheckboxSlots.LABEL
|
|
123
129
|
})`
|
|
124
|
-
margin:
|
|
130
|
+
margin: 0px 0px 0px 0.6rem;
|
|
125
131
|
${({ wrapLabel, theme }) => wrapLabel ? `
|
|
126
132
|
overflow-wrap: break-word;
|
|
127
133
|
white-space: pre-wrap;
|
|
128
134
|
word-break: break-word;
|
|
129
|
-
` : `margin-left:
|
|
135
|
+
` : `margin-left: 0.6rem`};
|
|
130
136
|
|
|
131
|
-
color: ${({ theme, disabled
|
|
132
|
-
font-size:
|
|
137
|
+
color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
138
|
+
font-size: 1rem;
|
|
133
139
|
line-height: 1.1;
|
|
134
140
|
|
|
135
141
|
${({ device, theme }) => {
|
|
136
142
|
if (device === "mobile") {
|
|
137
143
|
return `
|
|
138
|
-
margin:
|
|
139
|
-
font-size:
|
|
144
|
+
margin: 0.4rem 0px -0.4rem 0.6rem;
|
|
145
|
+
font-size: 1.23rem;
|
|
140
146
|
line-height: 1.2;
|
|
141
147
|
`;
|
|
142
148
|
}
|
|
143
149
|
if (device === void 0) {
|
|
144
150
|
return `
|
|
145
151
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
146
|
-
margin:
|
|
147
|
-
font-size:
|
|
152
|
+
margin: 0.4rem 0px -0.4rem 0.6rem;
|
|
153
|
+
font-size: 1.23rem;
|
|
148
154
|
line-height: 1.2;
|
|
149
155
|
}
|
|
150
156
|
|
|
151
|
-
font-size:
|
|
157
|
+
font-size: 1rem;
|
|
152
158
|
line-height: 1.1;
|
|
153
159
|
`;
|
|
154
160
|
}
|
|
155
161
|
return `
|
|
156
|
-
font-size:
|
|
162
|
+
font-size: 1rem;
|
|
157
163
|
line-height: 1.1;
|
|
158
164
|
`;
|
|
159
165
|
}}
|
|
@@ -174,18 +180,18 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
|
174
180
|
${({ device, theme }) => {
|
|
175
181
|
if (device === "mobile") {
|
|
176
182
|
return `
|
|
177
|
-
grid-template-columns:
|
|
183
|
+
grid-template-columns: 1.8rem auto;`;
|
|
178
184
|
}
|
|
179
185
|
if (device === void 0) {
|
|
180
186
|
return `
|
|
181
187
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
182
|
-
grid-template-columns:
|
|
188
|
+
grid-template-columns: 1.8rem auto;
|
|
183
189
|
}
|
|
184
|
-
grid-template-columns:
|
|
190
|
+
grid-template-columns: 1.23rem auto;
|
|
185
191
|
`;
|
|
186
192
|
}
|
|
187
193
|
return `
|
|
188
|
-
grid-template-columns:
|
|
194
|
+
grid-template-columns: 1.23rem auto;
|
|
189
195
|
`;
|
|
190
196
|
}}
|
|
191
197
|
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.23rem;\n height: 1.23rem;\n `;\n }\n return `\n width: 1.23rem;\n height: 1.23rem;\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[700]};\n }\n }\n\n &:active {\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 }) => (disabled ? 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.23rem;\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.23rem;\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.23rem auto;\n `;\n }\n return `\n grid-template-columns: 1.23rem auto;\n `;\n }}\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: flex-start;\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,66 +34,69 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
|
|
|
34
34
|
if (hasError) {
|
|
35
35
|
return colors.danger[900];
|
|
36
36
|
}
|
|
37
|
-
if (
|
|
37
|
+
if (readOnly) {
|
|
38
|
+
return colors.neutral[500];
|
|
39
|
+
}
|
|
40
|
+
if (disabled) {
|
|
38
41
|
return colors.neutral[500];
|
|
39
42
|
}
|
|
40
43
|
if (isHovering) {
|
|
41
|
-
return colors.brand[
|
|
44
|
+
return colors.brand[400];
|
|
42
45
|
}
|
|
43
|
-
return colors.brand[
|
|
46
|
+
return colors.brand[600];
|
|
44
47
|
};
|
|
45
48
|
const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = void 0) => {
|
|
46
49
|
const desktopMixedCheckmark = `
|
|
47
50
|
position: absolute;
|
|
48
51
|
content: '';
|
|
49
|
-
top:
|
|
50
|
-
left:
|
|
52
|
+
top: 0.525rem;
|
|
53
|
+
left: 0.3rem;
|
|
51
54
|
background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
52
|
-
width:
|
|
53
|
-
height:
|
|
55
|
+
width: 0.6rem;
|
|
56
|
+
height: 0.15rem;
|
|
54
57
|
`;
|
|
55
58
|
const normalMixedCheckmark = `
|
|
56
59
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
57
|
-
top:
|
|
58
|
-
left:
|
|
59
|
-
height:
|
|
60
|
-
width:
|
|
60
|
+
top:0.85rem;
|
|
61
|
+
left:0.45rem;
|
|
62
|
+
height:0.15rem;
|
|
63
|
+
width:0.9rem;
|
|
61
64
|
}
|
|
62
65
|
${desktopMixedCheckmark}
|
|
63
66
|
`;
|
|
64
67
|
const mobileMixedCheckmark = `
|
|
65
68
|
${desktopMixedCheckmark}
|
|
66
|
-
top:
|
|
67
|
-
left:
|
|
68
|
-
height:
|
|
69
|
-
width:
|
|
69
|
+
top:0.85rem;
|
|
70
|
+
left:0.45rem;
|
|
71
|
+
height:0.15rem;
|
|
72
|
+
width:0.9rem;
|
|
70
73
|
`;
|
|
71
74
|
const desktopCheckmark = `
|
|
72
75
|
position: absolute;
|
|
73
76
|
content: '';
|
|
74
|
-
top:
|
|
75
|
-
left:
|
|
76
|
-
border-left:
|
|
77
|
-
border-bottom:
|
|
78
|
-
height:
|
|
79
|
-
width:
|
|
77
|
+
top: 0.3rem;
|
|
78
|
+
left: 0.225rem;
|
|
79
|
+
border-left: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
80
|
+
border-bottom: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
81
|
+
height: 0.4rem;
|
|
82
|
+
width: 0.75rem;
|
|
80
83
|
transform: rotate(-45deg);
|
|
81
84
|
`;
|
|
82
85
|
const normalCheckmark = `
|
|
83
86
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
84
|
-
top:
|
|
85
|
-
left:
|
|
86
|
-
height:
|
|
87
|
-
width:
|
|
87
|
+
top: 0.45rem;
|
|
88
|
+
left: 0.3rem;
|
|
89
|
+
height: 0.6rem;
|
|
90
|
+
width: 1.23rem;
|
|
88
91
|
}
|
|
89
92
|
${desktopCheckmark}
|
|
90
93
|
`;
|
|
91
94
|
const mobileCheckmark = `
|
|
92
95
|
${desktopCheckmark}
|
|
93
|
-
top:
|
|
94
|
-
left:
|
|
95
|
-
height:
|
|
96
|
-
width:
|
|
96
|
+
top: 0.45rem;
|
|
97
|
+
left: 0.3rem;
|
|
98
|
+
height: 0.6rem;
|
|
99
|
+
width: 1.23rem;
|
|
97
100
|
`;
|
|
98
101
|
if (checked === "mixed") {
|
|
99
102
|
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 (
|
|
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,
|
|
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 (readOnly) {\n return colors.neutral[500];\n }\n if (disabled) {\n return colors.neutral[500];\n }\n if (isHovering) {\n return colors.brand[400];\n }\n return colors.brand[600];\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.23rem;\n }\n ${desktopCheckmark}\n`;\n const mobileCheckmark = `\n ${desktopCheckmark}\n top: 0.45rem;\n left: 0.3rem;\n height: 0.6rem;\n width: 1.23rem;\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,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,UAAU;AACZ,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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { GlobalAttributesT } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { DEVICE } from './constants/device';\n\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = typeof DEVICE[DevicesKeys];\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown?: React.KeyboardEventHandler;\n innerRef?: React.RefObject<HTMLInputElement>;\n 'data-testid'?: string;\n device?: Devices;\n }\n\n export interface LegacyAriaProps {\n ariaControls?: string;\n ariaLabel?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: Devices;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: Devices;\n }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n .description('Wheter the checkbox is set as bool or mixed')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly)\n .defaultValue(false),\n onChange: PropTypes.func\n .description('function executed when the checkbox changes state')\n .signature('(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly),\n 'aria-controls': PropTypes.string\n .description('a11y required attribute when \"mixed\" state is to be supported')\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props.ariaControls !== 'string',\n ),\n ariaControls: PropTypes.string\n .description('deprecated equivalent of \"aria-controls\", please use \"aria-controls\" instead')\n .deprecated({ version: '3.x', message: 'use \"aria-controls\" instead' })\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props['aria-controls'] !== 'string',\n ),\n label: PropTypes.string.description(\n 'Checkbox Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n hasError: PropTypes.bool.description('Whether the checkbox has error or not.').defaultValue(false),\n disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label').defaultValue(false),\n device: PropTypes.oneOf(Object.values(DEVICE)).description(\n 'When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration',\n ),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n};\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { GlobalAttributesT } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { DEVICE } from './constants/device';\n\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = (typeof DEVICE)[DevicesKeys];\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown?: React.KeyboardEventHandler;\n innerRef?: React.RefObject<HTMLInputElement>;\n 'data-testid'?: string;\n device?: Devices;\n }\n\n export interface LegacyAriaProps {\n ariaControls?: string;\n ariaLabel?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: Devices;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: Devices;\n }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n .description('Wheter the checkbox is set as bool or mixed')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly)\n .defaultValue(false),\n onChange: PropTypes.func\n .description('function executed when the checkbox changes state')\n .signature('(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly),\n 'aria-controls': PropTypes.string\n .description('a11y required attribute when \"mixed\" state is to be supported')\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props.ariaControls !== 'string',\n ),\n ariaControls: PropTypes.string\n .description('deprecated equivalent of \"aria-controls\", please use \"aria-controls\" instead')\n .deprecated({ version: '3.x', message: 'use \"aria-controls\" instead' })\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props['aria-controls'] !== 'string',\n ),\n label: PropTypes.string.description(\n 'Checkbox Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n hasError: PropTypes.bool.description('Whether the checkbox has error or not.').defaultValue(false),\n disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label').defaultValue(false),\n device: PropTypes.oneOf(Object.values(DEVICE)).description(\n 'When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration',\n ),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,cAAc;AAgEhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAC5D,YAAY,6CAA6C,EACzD,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KACjB,YAAY,mDAAmD,EAC/D,UAAU,+DAA+D,EACzE,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ;AAAA,EAC1F,iBAAiB,UAAU,OACxB,YAAY,+DAA+D,EAC3E;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,iBAAiB;AAAA,EACrG;AAAA,EACF,cAAc,UAAU,OACrB,YAAY,8EAA8E,EAC1F,WAAW,EAAE,SAAS,OAAO,SAAS,8BAA8B,CAAC,EACrE;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,qBAAqB;AAAA,EACzG;AAAA,EACF,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,KAAK;AAAA,EACjG,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,WAAW,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,UAAU,MAAM,OAAO,OAAO,MAAM,CAAC,EAAE;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AACrG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -9,34 +9,40 @@ 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.23rem;
|
|
22
|
+
height: 1.23rem;
|
|
23
23
|
`;
|
|
24
24
|
}
|
|
25
25
|
return `
|
|
26
|
-
width:
|
|
27
|
-
height:
|
|
26
|
+
width: 1.23rem;
|
|
27
|
+
height: 1.23rem;
|
|
28
28
|
`;
|
|
29
29
|
}}
|
|
30
30
|
|
|
31
31
|
${({ theme, checked, disabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}
|
|
32
32
|
&:hover {
|
|
33
|
-
background: ${({ theme,
|
|
33
|
+
background: ${({ theme, disabled }) => !disabled ? theme.colors.brand[200] : void 0};
|
|
34
34
|
}
|
|
35
35
|
&:focus-within {
|
|
36
36
|
&:hover {
|
|
37
37
|
${({ theme, checked, disabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
+
&:after {
|
|
41
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:active {
|
|
40
46
|
&:after {
|
|
41
47
|
border: 2px solid ${({ theme }) => theme.colors.brand[600]};
|
|
42
48
|
}
|
|
@@ -87,39 +93,39 @@ const StyledLabel = styled("label", {
|
|
|
87
93
|
name: DSCheckboxName,
|
|
88
94
|
slot: DSCheckboxSlots.LABEL
|
|
89
95
|
})`
|
|
90
|
-
margin:
|
|
96
|
+
margin: 0px 0px 0px 0.6rem;
|
|
91
97
|
${({ wrapLabel, theme }) => wrapLabel ? `
|
|
92
98
|
overflow-wrap: break-word;
|
|
93
99
|
white-space: pre-wrap;
|
|
94
100
|
word-break: break-word;
|
|
95
|
-
` : `margin-left:
|
|
101
|
+
` : `margin-left: 0.6rem`};
|
|
96
102
|
|
|
97
|
-
color: ${({ theme, disabled
|
|
98
|
-
font-size:
|
|
103
|
+
color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
104
|
+
font-size: 1rem;
|
|
99
105
|
line-height: 1.1;
|
|
100
106
|
|
|
101
107
|
${({ device, theme }) => {
|
|
102
108
|
if (device === "mobile") {
|
|
103
109
|
return `
|
|
104
|
-
margin:
|
|
105
|
-
font-size:
|
|
110
|
+
margin: 0.4rem 0px -0.4rem 0.6rem;
|
|
111
|
+
font-size: 1.23rem;
|
|
106
112
|
line-height: 1.2;
|
|
107
113
|
`;
|
|
108
114
|
}
|
|
109
115
|
if (device === void 0) {
|
|
110
116
|
return `
|
|
111
117
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
112
|
-
margin:
|
|
113
|
-
font-size:
|
|
118
|
+
margin: 0.4rem 0px -0.4rem 0.6rem;
|
|
119
|
+
font-size: 1.23rem;
|
|
114
120
|
line-height: 1.2;
|
|
115
121
|
}
|
|
116
122
|
|
|
117
|
-
font-size:
|
|
123
|
+
font-size: 1rem;
|
|
118
124
|
line-height: 1.1;
|
|
119
125
|
`;
|
|
120
126
|
}
|
|
121
127
|
return `
|
|
122
|
-
font-size:
|
|
128
|
+
font-size: 1rem;
|
|
123
129
|
line-height: 1.1;
|
|
124
130
|
`;
|
|
125
131
|
}}
|
|
@@ -140,18 +146,18 @@ const StyledContainer = styled("div", {
|
|
|
140
146
|
${({ device, theme }) => {
|
|
141
147
|
if (device === "mobile") {
|
|
142
148
|
return `
|
|
143
|
-
grid-template-columns:
|
|
149
|
+
grid-template-columns: 1.8rem auto;`;
|
|
144
150
|
}
|
|
145
151
|
if (device === void 0) {
|
|
146
152
|
return `
|
|
147
153
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
148
|
-
grid-template-columns:
|
|
154
|
+
grid-template-columns: 1.8rem auto;
|
|
149
155
|
}
|
|
150
|
-
grid-template-columns:
|
|
156
|
+
grid-template-columns: 1.23rem auto;
|
|
151
157
|
`;
|
|
152
158
|
}
|
|
153
159
|
return `
|
|
154
|
-
grid-template-columns:
|
|
160
|
+
grid-template-columns: 1.23rem auto;
|
|
155
161
|
`;
|
|
156
162
|
}}
|
|
157
163
|
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.23rem;\n height: 1.23rem;\n `;\n }\n return `\n width: 1.23rem;\n height: 1.23rem;\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[700]};\n }\n }\n\n &:active {\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 }) => (disabled ? 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.23rem;\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.23rem;\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.23rem auto;\n `;\n }\n return `\n grid-template-columns: 1.23rem auto;\n `;\n }}\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: flex-start;\n ${xStyledCommonProps}\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,66 +3,69 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
|
|
|
3
3
|
if (hasError) {
|
|
4
4
|
return colors.danger[900];
|
|
5
5
|
}
|
|
6
|
-
if (
|
|
6
|
+
if (readOnly) {
|
|
7
|
+
return colors.neutral[500];
|
|
8
|
+
}
|
|
9
|
+
if (disabled) {
|
|
7
10
|
return colors.neutral[500];
|
|
8
11
|
}
|
|
9
12
|
if (isHovering) {
|
|
10
|
-
return colors.brand[
|
|
13
|
+
return colors.brand[400];
|
|
11
14
|
}
|
|
12
|
-
return colors.brand[
|
|
15
|
+
return colors.brand[600];
|
|
13
16
|
};
|
|
14
17
|
const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = void 0) => {
|
|
15
18
|
const desktopMixedCheckmark = `
|
|
16
19
|
position: absolute;
|
|
17
20
|
content: '';
|
|
18
|
-
top:
|
|
19
|
-
left:
|
|
21
|
+
top: 0.525rem;
|
|
22
|
+
left: 0.3rem;
|
|
20
23
|
background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
21
|
-
width:
|
|
22
|
-
height:
|
|
24
|
+
width: 0.6rem;
|
|
25
|
+
height: 0.15rem;
|
|
23
26
|
`;
|
|
24
27
|
const normalMixedCheckmark = `
|
|
25
28
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
26
|
-
top:
|
|
27
|
-
left:
|
|
28
|
-
height:
|
|
29
|
-
width:
|
|
29
|
+
top:0.85rem;
|
|
30
|
+
left:0.45rem;
|
|
31
|
+
height:0.15rem;
|
|
32
|
+
width:0.9rem;
|
|
30
33
|
}
|
|
31
34
|
${desktopMixedCheckmark}
|
|
32
35
|
`;
|
|
33
36
|
const mobileMixedCheckmark = `
|
|
34
37
|
${desktopMixedCheckmark}
|
|
35
|
-
top:
|
|
36
|
-
left:
|
|
37
|
-
height:
|
|
38
|
-
width:
|
|
38
|
+
top:0.85rem;
|
|
39
|
+
left:0.45rem;
|
|
40
|
+
height:0.15rem;
|
|
41
|
+
width:0.9rem;
|
|
39
42
|
`;
|
|
40
43
|
const desktopCheckmark = `
|
|
41
44
|
position: absolute;
|
|
42
45
|
content: '';
|
|
43
|
-
top:
|
|
44
|
-
left:
|
|
45
|
-
border-left:
|
|
46
|
-
border-bottom:
|
|
47
|
-
height:
|
|
48
|
-
width:
|
|
46
|
+
top: 0.3rem;
|
|
47
|
+
left: 0.225rem;
|
|
48
|
+
border-left: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
49
|
+
border-bottom: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
50
|
+
height: 0.4rem;
|
|
51
|
+
width: 0.75rem;
|
|
49
52
|
transform: rotate(-45deg);
|
|
50
53
|
`;
|
|
51
54
|
const normalCheckmark = `
|
|
52
55
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
53
|
-
top:
|
|
54
|
-
left:
|
|
55
|
-
height:
|
|
56
|
-
width:
|
|
56
|
+
top: 0.45rem;
|
|
57
|
+
left: 0.3rem;
|
|
58
|
+
height: 0.6rem;
|
|
59
|
+
width: 1.23rem;
|
|
57
60
|
}
|
|
58
61
|
${desktopCheckmark}
|
|
59
62
|
`;
|
|
60
63
|
const mobileCheckmark = `
|
|
61
64
|
${desktopCheckmark}
|
|
62
|
-
top:
|
|
63
|
-
left:
|
|
64
|
-
height:
|
|
65
|
-
width:
|
|
65
|
+
top: 0.45rem;
|
|
66
|
+
left: 0.3rem;
|
|
67
|
+
height: 0.6rem;
|
|
68
|
+
width: 1.23rem;
|
|
66
69
|
`;
|
|
67
70
|
if (checked === "mixed") {
|
|
68
71
|
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 (
|
|
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,
|
|
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 (readOnly) {\n return colors.neutral[500];\n }\n if (disabled) {\n return colors.neutral[500];\n }\n if (isHovering) {\n return colors.brand[400];\n }\n return colors.brand[600];\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.23rem;\n }\n ${desktopCheckmark}\n`;\n const mobileCheckmark = `\n ${desktopCheckmark}\n top: 0.45rem;\n left: 0.3rem;\n height: 0.6rem;\n width: 1.23rem;\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,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,UAAU;AACZ,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.11",
|
|
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-truncated-tooltip-text": "3.14.0-next.
|
|
41
|
-
"@elliemae/ds-utilities": "3.14.0-next.
|
|
39
|
+
"@elliemae/ds-system": "3.14.0-next.11",
|
|
40
|
+
"@elliemae/ds-truncated-tooltip-text": "3.14.0-next.11",
|
|
41
|
+
"@elliemae/ds-utilities": "3.14.0-next.11"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@elliemae/pui-theme": "~2.6.0",
|