@sproutsocial/seeds-react-checkbox 1.2.0 → 1.3.0

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.
Files changed (7) hide show
  1. package/dist/esm/index.js +27 -7
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +32 -1
  4. package/dist/index.d.ts +32 -1
  5. package/dist/index.js +37 -8
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/esm/index.js CHANGED
@@ -19,6 +19,9 @@ var Container = styled.span`
19
19
  ${COMMON}
20
20
  `;
21
21
  Container.displayName = "Checkbox";
22
+ var inputWrapperHoverStyles = css`
23
+ background-color: ${(props) => props.theme.colors.app.background.base};
24
+ `;
22
25
  var InputWrapper = styled(Box)`
23
26
  box-sizing: border-box;
24
27
  position: relative;
@@ -37,7 +40,7 @@ var InputWrapper = styled(Box)`
37
40
  ${pill}
38
41
 
39
42
  &:hover {
40
- background-color: ${props.theme.colors.app.background.base};
43
+ ${inputWrapperHoverStyles}
41
44
  }
42
45
 
43
46
  ${PillInput} {
@@ -82,6 +85,12 @@ var CheckIcon = styled(Icon).attrs({ "aria-hidden": true })`
82
85
  }
83
86
  `;
84
87
  CheckIcon.displayName = "CheckIcon";
88
+ var pillInputHoverStyles = css`
89
+ ~ ${CheckboxBox} ${CheckIcon} {
90
+ opacity: ${(props) => props.disabled ? 0 : 1};
91
+ color: ${(props) => props.theme.colors.form.border.base};
92
+ }
93
+ `;
85
94
  var PillInput = styled.input`
86
95
  position: absolute;
87
96
  top: 0;
@@ -105,10 +114,7 @@ var PillInput = styled.input`
105
114
  ${(props) => !props.checked && css`
106
115
  &:hover,
107
116
  &:focus {
108
- ~ ${CheckboxBox} ${CheckIcon} {
109
- opacity: ${props.disabled ? 0 : 1};
110
- color: ${props.theme.colors.form.border.base};
111
- }
117
+ ${pillInputHoverStyles}
112
118
  }
113
119
  `}
114
120
 
@@ -158,6 +164,11 @@ var getIcon = (type, color) => {
158
164
  const icon = type === "indeterminate" ? indeterminateSVG(escapedColor) : checkSVG(escapedColor);
159
165
  return icon;
160
166
  };
167
+ var checkboxContainerHoverStyles = css`
168
+ &:before {
169
+ opacity: ${(props) => props.disabled && !props.checked ? 0 : 1};
170
+ }
171
+ `;
161
172
  var CheckboxContainer = styled.span(
162
173
  (props) => css`
163
174
  display: inline-flex;
@@ -191,7 +202,7 @@ var CheckboxContainer = styled.span(
191
202
  }
192
203
 
193
204
  &:hover:before {
194
- opacity: ${props.disabled && !props.checked ? 0 : 1};
205
+ ${checkboxContainerHoverStyles}
195
206
  }
196
207
 
197
208
  ${props.disabled && css`
@@ -357,7 +368,16 @@ import "react";
357
368
  // src/index.ts
358
369
  var src_default = Checkbox;
359
370
  export {
371
+ CheckIcon,
360
372
  Checkbox,
361
- src_default as default
373
+ CheckboxBox,
374
+ CheckboxContainer,
375
+ InputWrapper,
376
+ LabelText,
377
+ PillInput,
378
+ checkboxContainerHoverStyles,
379
+ src_default as default,
380
+ inputWrapperHoverStyles,
381
+ pillInputHoverStyles
362
382
  };
363
383
  //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Checkbox.tsx","../../src/styles.tsx","../../src/types/CheckboxTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container, {\n CheckboxBox,\n CheckIcon,\n PillInput,\n InputWrapper,\n LabelText,\n CheckboxContainer,\n} from \"./styles\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nexport default class Checkbox extends React.Component<TypeCheckboxProps> {\n el: HTMLInputElement | null | undefined;\n static defaultProps = {\n indeterminate: false,\n disabled: false,\n };\n\n override componentDidUpdate(prevProps: TypeCheckboxProps) {\n if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n override componentDidMount() {\n if (this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {\n this.props.onChange(event);\n };\n\n override render() {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled,\n indeterminate,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange,\n ariaLabel,\n appearance = \"default\",\n qa = {},\n tabIndex,\n inputProps = {},\n ...rest\n } = this.props;\n const isPill = appearance === \"pill\";\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n // TODO: Refactor pill checkboxes to use fewer elements for performance gains\n if (!isPill) {\n return (\n <CheckboxContainer\n as={label && \"label\"}\n disabled={disabled}\n indeterminate={indeterminate}\n checked={checked}\n {...rest}\n >\n <input\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n {label && (\n <LabelText {...labelProps} disabled={disabled}>\n {label}\n </LabelText>\n )}\n </CheckboxContainer>\n );\n }\n\n return (\n <Container as={label && \"label\"} {...rest}>\n <InputWrapper appearance={appearance}>\n <PillInput\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n <CheckboxBox>\n <CheckIcon\n name={indeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </CheckboxBox>\n </InputWrapper>\n </Container>\n );\n }\n}\n","import * as React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nconst Container = styled.span`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n\n ${COMMON}\n`;\nContainer.displayName = \"Checkbox\";\n\nexport const InputWrapper = styled(Box)<Pick<TypeCheckboxProps, \"appearance\">>`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n background-color: transparent;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n /* This solution is temporary. DS-1095 */\n mix-blend-mode: ${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"};\n ${pill}\n\n &:hover {\n background-color: ${props.theme.colors.app.background.base};\n }\n\n ${PillInput} {\n ${pill}\n }\n `}\n`;\nInputWrapper.displayName = \"InputWrapper\";\n\nexport const CheckboxBox = styled.div`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.form.background.base};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n background-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n pointer-events: none;\n`;\nCheckboxBox.displayName = \"CheckboxBox\";\n\nexport const CheckIcon = styled(Icon).attrs({ \"aria-hidden\": true })`\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n transition: all\n ${({ theme }) => `${theme.duration.fast} ${theme.easing.ease_inout}`};\n\n &,\n & .Icon-svg {\n width: 10px;\n height: 10px;\n line-height: 10px;\n }\n`;\nCheckIcon.displayName = \"CheckIcon\";\n\nexport const PillInput = styled.input`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n border-radius: 4px;\n\n /* IE 11 overrides */\n &::-ms-check {\n display: none;\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${(props) =>\n !props.checked &&\n css`\n &:hover,\n &:focus {\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.disabled ? 0 : 1};\n color: ${props.theme.colors.form.border.base};\n }\n }\n `}\n\n ${(props) =>\n props.checked &&\n css`\n ~ ${CheckboxBox} {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: 1;\n color: ${props.theme.colors.icon.inverse};\n }\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ~ ${CheckboxBox} {\n opacity: 0.4;\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.checked ? 1 : 0};\n }\n `}\n`;\nPillInput.displayName = \"PillInput\";\n\nexport const LabelText = styled(Text)<Pick<TypeCheckboxProps, \"disabled\">>`\n margin-left: ${(props) => props.theme.space[300]};\n font-size: ${(props) => props.theme.typography[200].fontSize};\n line-height: 1;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n color: ${(props) => props.theme.colors.text.headline};\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n `}\n`;\nLabelText.displayName = \"LabelText\";\n\nconst checkSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46\"\n fill={color}\n />\n </svg>\n);\n\nconst indeterminateSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"10\" height=\"2\" x=\"2\" y=\"6\" rx=\"1\" ry=\"1\" fill={color} />\n </svg>\n);\n\nconst getIcon = (type: \"indeterminate\" | \"check\", color: string) => {\n const escapedColor = encodeURIComponent(color);\n const icon =\n type === \"indeterminate\"\n ? indeterminateSVG(escapedColor)\n : checkSVG(escapedColor);\n return icon;\n};\n/* stylelint-disable eslint-disable */\nexport const CheckboxContainer = styled.span<\n Pick<TypeCheckboxProps, \"indeterminate\" | \"checked\" | \"disabled\">\n>(\n (props) => css`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};\n\n @supports (-webkit-appearance: none) {\n &:before {\n /* The following line cannot have multiple lint exclusions, otherwise it will not work\n the svg data url MUST be single quoted */\n /* prettier-ignore */\n content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(\n getIcon(\n props.indeterminate ? \"indeterminate\" : \"check\",\n props.checked\n ? props.theme.colors.form.background.base\n : props.theme.colors.form.border.base\n )\n )}');\n opacity: ${props.checked ? 1 : 0};\n position: absolute;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n text-align: center;\n transform: translateY(1px);\n line-height: 1;\n margin: auto;\n pointer-events: none;\n transition: ${props.theme.duration.fast}\n ${props.theme.easing.ease_inout};\n }\n\n &:hover:before {\n opacity: ${props.disabled && !props.checked ? 0 : 1};\n }\n\n ${props.disabled &&\n css`\n opacity: 0.4;\n `}\n\n input[type='checkbox'] {\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n padding: 0;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n border: 1px solid ${props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${props.theme.colors.form.background.base};\n transition: all ${props.theme.duration.fast}\n ${props.theme.easing.ease_in};\n cursor: ${props.disabled ? \"not-allowed\" : \"pointer\"};\n flex-shrink: 0;\n\n &:not(:checked) {\n ${!props.indeterminate &&\n css`\n border-color: ${props.theme.colors.form.border\n .base} !important; /* We don't want the focus ring to remove the border */\n background-color: ${props.theme.colors.form.background.base};\n `}\n }\n\n &:checked {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n\n ${props.indeterminate &&\n props.checked &&\n css`\n border-color: ${props.theme.colors.form.border.selected} !important;\n background-color: ${props.theme.colors.form.background\n .selected} !important;\n `}\n\n &:focus {\n ${focusRing}\n }\n }\n }\n\n ${COMMON}\n `\n);\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeCheckboxProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** ID of the form element, should match the \"for\" value of the associated label */\n id: string;\n value?: string;\n name?: string;\n\n /** Label text to display next to the checkbox */\n label?: string;\n\n /** Label used to describe the input (if not used with an accompanying visual label) */\n ariaLabel?: string;\n labelProps?: TypeTextProps;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;\n appearance?: \"pill\" | \"default\";\n qa?: object;\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n}\n","import Checkbox from \"./Checkbox\";\n\nexport default Checkbox;\nexport { Checkbox };\nexport * from \"./types/CheckboxTypes\";\n"],"mappings":"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","names":["React","props","jsx"]}
1
+ {"version":3,"sources":["../../src/Checkbox.tsx","../../src/styles.tsx","../../src/types/CheckboxTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container, {\n CheckboxBox,\n CheckIcon,\n PillInput,\n InputWrapper,\n LabelText,\n CheckboxContainer,\n} from \"./styles\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nexport default class Checkbox extends React.Component<TypeCheckboxProps> {\n el: HTMLInputElement | null | undefined;\n static defaultProps = {\n indeterminate: false,\n disabled: false,\n };\n\n override componentDidUpdate(prevProps: TypeCheckboxProps) {\n if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n override componentDidMount() {\n if (this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {\n this.props.onChange(event);\n };\n\n override render() {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled,\n indeterminate,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange,\n ariaLabel,\n appearance = \"default\",\n qa = {},\n tabIndex,\n inputProps = {},\n ...rest\n } = this.props;\n const isPill = appearance === \"pill\";\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n // TODO: Refactor pill checkboxes to use fewer elements for performance gains\n if (!isPill) {\n return (\n <CheckboxContainer\n as={label && \"label\"}\n disabled={disabled}\n indeterminate={indeterminate}\n checked={checked}\n {...rest}\n >\n <input\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n {label && (\n <LabelText {...labelProps} disabled={disabled}>\n {label}\n </LabelText>\n )}\n </CheckboxContainer>\n );\n }\n\n return (\n <Container as={label && \"label\"} {...rest}>\n <InputWrapper appearance={appearance}>\n <PillInput\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n <CheckboxBox>\n <CheckIcon\n name={indeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </CheckboxBox>\n </InputWrapper>\n </Container>\n );\n }\n}\n","import * as React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nconst Container = styled.span`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n\n ${COMMON}\n`;\nContainer.displayName = \"Checkbox\";\n\nexport const inputWrapperHoverStyles = css`\n background-color: ${(props) => props.theme.colors.app.background.base};\n`;\n\nexport const InputWrapper = styled(Box)<Pick<TypeCheckboxProps, \"appearance\">>`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n background-color: transparent;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n /* This solution is temporary. DS-1095 */\n mix-blend-mode: ${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"};\n ${pill}\n\n &:hover {\n ${inputWrapperHoverStyles}\n }\n\n ${PillInput} {\n ${pill}\n }\n `}\n`;\nInputWrapper.displayName = \"InputWrapper\";\n\nexport const CheckboxBox = styled.div`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.form.background.base};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n background-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n pointer-events: none;\n`;\nCheckboxBox.displayName = \"CheckboxBox\";\n\nexport const CheckIcon = styled(Icon).attrs({ \"aria-hidden\": true })`\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n transition: all\n ${({ theme }) => `${theme.duration.fast} ${theme.easing.ease_inout}`};\n\n &,\n & .Icon-svg {\n width: 10px;\n height: 10px;\n line-height: 10px;\n }\n`;\nCheckIcon.displayName = \"CheckIcon\";\n\nexport const pillInputHoverStyles = css<Pick<TypeCheckboxProps, \"disabled\">>`\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${(props) => (props.disabled ? 0 : 1)};\n color: ${(props) => props.theme.colors.form.border.base};\n }\n`;\n\nexport const PillInput = styled.input`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n border-radius: 4px;\n\n /* IE 11 overrides */\n &::-ms-check {\n display: none;\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${(props) =>\n !props.checked &&\n css`\n &:hover,\n &:focus {\n ${pillInputHoverStyles}\n }\n `}\n\n ${(props) =>\n props.checked &&\n css`\n ~ ${CheckboxBox} {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: 1;\n color: ${props.theme.colors.icon.inverse};\n }\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ~ ${CheckboxBox} {\n opacity: 0.4;\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.checked ? 1 : 0};\n }\n `}\n`;\nPillInput.displayName = \"PillInput\";\n\nexport const LabelText = styled(Text)<Pick<TypeCheckboxProps, \"disabled\">>`\n margin-left: ${(props) => props.theme.space[300]};\n font-size: ${(props) => props.theme.typography[200].fontSize};\n line-height: 1;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n color: ${(props) => props.theme.colors.text.headline};\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n `}\n`;\nLabelText.displayName = \"LabelText\";\n\nconst checkSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46\"\n fill={color}\n />\n </svg>\n);\n\nconst indeterminateSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"10\" height=\"2\" x=\"2\" y=\"6\" rx=\"1\" ry=\"1\" fill={color} />\n </svg>\n);\n\nconst getIcon = (type: \"indeterminate\" | \"check\", color: string) => {\n const escapedColor = encodeURIComponent(color);\n const icon =\n type === \"indeterminate\"\n ? indeterminateSVG(escapedColor)\n : checkSVG(escapedColor);\n return icon;\n};\n\nexport const checkboxContainerHoverStyles = css<\n Pick<TypeCheckboxProps, \"disabled\" | \"checked\">\n>`\n &:before {\n opacity: ${(props) => (props.disabled && !props.checked ? 0 : 1)};\n }\n`;\n/* stylelint-disable eslint-disable */\nexport const CheckboxContainer = styled.span<\n Pick<TypeCheckboxProps, \"indeterminate\" | \"checked\" | \"disabled\">\n>(\n (props) => css`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};\n\n @supports (-webkit-appearance: none) {\n &:before {\n /* The following line cannot have multiple lint exclusions, otherwise it will not work\n the svg data url MUST be single quoted */\n /* prettier-ignore */\n content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(\n getIcon(\n props.indeterminate ? \"indeterminate\" : \"check\",\n props.checked\n ? props.theme.colors.form.background.base\n : props.theme.colors.form.border.base\n )\n )}');\n opacity: ${props.checked ? 1 : 0};\n position: absolute;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n text-align: center;\n transform: translateY(1px);\n line-height: 1;\n margin: auto;\n pointer-events: none;\n transition: ${props.theme.duration.fast}\n ${props.theme.easing.ease_inout};\n }\n\n &:hover:before {\n ${checkboxContainerHoverStyles}\n }\n\n ${props.disabled &&\n css`\n opacity: 0.4;\n `}\n\n input[type='checkbox'] {\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n padding: 0;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n border: 1px solid ${props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${props.theme.colors.form.background.base};\n transition: all ${props.theme.duration.fast}\n ${props.theme.easing.ease_in};\n cursor: ${props.disabled ? \"not-allowed\" : \"pointer\"};\n flex-shrink: 0;\n\n &:not(:checked) {\n ${!props.indeterminate &&\n css`\n border-color: ${props.theme.colors.form.border\n .base} !important; /* We don't want the focus ring to remove the border */\n background-color: ${props.theme.colors.form.background.base};\n `}\n }\n\n &:checked {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n\n ${props.indeterminate &&\n props.checked &&\n css`\n border-color: ${props.theme.colors.form.border.selected} !important;\n background-color: ${props.theme.colors.form.background\n .selected} !important;\n `}\n\n &:focus {\n ${focusRing}\n }\n }\n }\n\n ${COMMON}\n `\n);\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeCheckboxProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** ID of the form element, should match the \"for\" value of the associated label */\n id: string;\n value?: string;\n name?: string;\n\n /** Label text to display next to the checkbox */\n label?: string;\n\n /** Label used to describe the input (if not used with an accompanying visual label) */\n ariaLabel?: string;\n labelProps?: TypeTextProps;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;\n appearance?: \"pill\" | \"default\";\n qa?: object;\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n}\n","import Checkbox from \"./Checkbox\";\n\nexport default Checkbox;\nexport { Checkbox };\nexport * from \"./types/CheckboxTypes\";\nexport * from \"./styles\";\n"],"mappings":"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","names":["React","props","jsx"]}
package/dist/index.d.mts CHANGED
@@ -1,7 +1,11 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
4
+ import * as _sproutsocial_seeds_react_text from '@sproutsocial/seeds-react-text';
4
5
  import { TypeTextProps } from '@sproutsocial/seeds-react-text';
6
+ import * as _sproutsocial_seeds_react_icon from '@sproutsocial/seeds-react-icon';
7
+ import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
8
+ import * as styled_components from 'styled-components';
5
9
 
6
10
  interface TypeCheckboxProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
7
11
  /** ID of the form element, should match the "for" value of the associated label */
@@ -34,4 +38,31 @@ declare class Checkbox extends React.Component<TypeCheckboxProps> {
34
38
  render(): react_jsx_runtime.JSX.Element;
35
39
  }
36
40
 
37
- export { Checkbox, type TypeCheckboxProps, Checkbox as default };
41
+ declare const inputWrapperHoverStyles: styled_components.FlattenInterpolation<styled_components.ThemeProps<any>>;
42
+ declare const InputWrapper: styled_components.StyledComponent<React.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>, any, Pick<TypeCheckboxProps, "appearance">, never>;
43
+ declare const CheckboxBox: styled_components.StyledComponent<"div", any, {}, never>;
44
+ declare const CheckIcon: styled_components.StyledComponent<{
45
+ ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: _sproutsocial_seeds_react_icon.TypeIconProps): react_jsx_runtime.JSX.Element;
46
+ Toggle: {
47
+ ({ activeName, inactiveName, isActive, size, fixedWidth, ariaLabel, ...rest }: _sproutsocial_seeds_react_icon.TypeToggleProps): react_jsx_runtime.JSX.Element;
48
+ displayName: string;
49
+ };
50
+ }, any, {
51
+ "aria-hidden": true;
52
+ }, "aria-hidden">;
53
+ declare const pillInputHoverStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Pick<TypeCheckboxProps, "disabled">, any>>;
54
+ declare const PillInput: styled_components.StyledComponent<"input", any, {}, never>;
55
+ declare const LabelText: styled_components.StyledComponent<{
56
+ ({ fontSize, children, qa, color, ...rest }: _sproutsocial_seeds_react_text.TypeTextProps): react_jsx_runtime.JSX.Element;
57
+ Headline: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
58
+ SubHeadline: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
59
+ SmallSubHeadline: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
60
+ Byline: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
61
+ SmallByline: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
62
+ BodyCopy: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
63
+ SmallBodyCopy: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
64
+ }, any, Pick<TypeCheckboxProps, "disabled">, never>;
65
+ declare const checkboxContainerHoverStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Pick<TypeCheckboxProps, "disabled" | "checked">, any>>;
66
+ declare const CheckboxContainer: styled_components.StyledComponent<"span", any, Pick<TypeCheckboxProps, "disabled" | "checked" | "indeterminate">, never>;
67
+
68
+ export { CheckIcon, Checkbox, CheckboxBox, CheckboxContainer, InputWrapper, LabelText, PillInput, type TypeCheckboxProps, checkboxContainerHoverStyles, Checkbox as default, inputWrapperHoverStyles, pillInputHoverStyles };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,11 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
4
+ import * as _sproutsocial_seeds_react_text from '@sproutsocial/seeds-react-text';
4
5
  import { TypeTextProps } from '@sproutsocial/seeds-react-text';
6
+ import * as _sproutsocial_seeds_react_icon from '@sproutsocial/seeds-react-icon';
7
+ import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
8
+ import * as styled_components from 'styled-components';
5
9
 
6
10
  interface TypeCheckboxProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
7
11
  /** ID of the form element, should match the "for" value of the associated label */
@@ -34,4 +38,31 @@ declare class Checkbox extends React.Component<TypeCheckboxProps> {
34
38
  render(): react_jsx_runtime.JSX.Element;
35
39
  }
36
40
 
37
- export { Checkbox, type TypeCheckboxProps, Checkbox as default };
41
+ declare const inputWrapperHoverStyles: styled_components.FlattenInterpolation<styled_components.ThemeProps<any>>;
42
+ declare const InputWrapper: styled_components.StyledComponent<React.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>, any, Pick<TypeCheckboxProps, "appearance">, never>;
43
+ declare const CheckboxBox: styled_components.StyledComponent<"div", any, {}, never>;
44
+ declare const CheckIcon: styled_components.StyledComponent<{
45
+ ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: _sproutsocial_seeds_react_icon.TypeIconProps): react_jsx_runtime.JSX.Element;
46
+ Toggle: {
47
+ ({ activeName, inactiveName, isActive, size, fixedWidth, ariaLabel, ...rest }: _sproutsocial_seeds_react_icon.TypeToggleProps): react_jsx_runtime.JSX.Element;
48
+ displayName: string;
49
+ };
50
+ }, any, {
51
+ "aria-hidden": true;
52
+ }, "aria-hidden">;
53
+ declare const pillInputHoverStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Pick<TypeCheckboxProps, "disabled">, any>>;
54
+ declare const PillInput: styled_components.StyledComponent<"input", any, {}, never>;
55
+ declare const LabelText: styled_components.StyledComponent<{
56
+ ({ fontSize, children, qa, color, ...rest }: _sproutsocial_seeds_react_text.TypeTextProps): react_jsx_runtime.JSX.Element;
57
+ Headline: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
58
+ SubHeadline: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
59
+ SmallSubHeadline: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
60
+ Byline: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
61
+ SmallByline: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
62
+ BodyCopy: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
63
+ SmallBodyCopy: styled_components.StyledComponent<"span", any, _sproutsocial_seeds_react_text.TypeTextProps, never>;
64
+ }, any, Pick<TypeCheckboxProps, "disabled">, never>;
65
+ declare const checkboxContainerHoverStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Pick<TypeCheckboxProps, "disabled" | "checked">, any>>;
66
+ declare const CheckboxContainer: styled_components.StyledComponent<"span", any, Pick<TypeCheckboxProps, "disabled" | "checked" | "indeterminate">, never>;
67
+
68
+ export { CheckIcon, Checkbox, CheckboxBox, CheckboxContainer, InputWrapper, LabelText, PillInput, type TypeCheckboxProps, checkboxContainerHoverStyles, Checkbox as default, inputWrapperHoverStyles, pillInputHoverStyles };
package/dist/index.js CHANGED
@@ -30,8 +30,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
30
30
  // src/index.ts
31
31
  var src_exports = {};
32
32
  __export(src_exports, {
33
+ CheckIcon: () => CheckIcon,
33
34
  Checkbox: () => Checkbox,
34
- default: () => src_default
35
+ CheckboxBox: () => CheckboxBox,
36
+ CheckboxContainer: () => CheckboxContainer,
37
+ InputWrapper: () => InputWrapper,
38
+ LabelText: () => LabelText,
39
+ PillInput: () => PillInput,
40
+ checkboxContainerHoverStyles: () => checkboxContainerHoverStyles,
41
+ default: () => src_default,
42
+ inputWrapperHoverStyles: () => inputWrapperHoverStyles,
43
+ pillInputHoverStyles: () => pillInputHoverStyles
35
44
  });
36
45
  module.exports = __toCommonJS(src_exports);
37
46
 
@@ -56,6 +65,9 @@ var Container = import_styled_components.default.span`
56
65
  ${import_seeds_react_system_props.COMMON}
57
66
  `;
58
67
  Container.displayName = "Checkbox";
68
+ var inputWrapperHoverStyles = import_styled_components.css`
69
+ background-color: ${(props) => props.theme.colors.app.background.base};
70
+ `;
59
71
  var InputWrapper = (0, import_styled_components.default)(import_seeds_react_box.default)`
60
72
  box-sizing: border-box;
61
73
  position: relative;
@@ -74,7 +86,7 @@ var InputWrapper = (0, import_styled_components.default)(import_seeds_react_box.
74
86
  ${import_seeds_react_mixins.pill}
75
87
 
76
88
  &:hover {
77
- background-color: ${props.theme.colors.app.background.base};
89
+ ${inputWrapperHoverStyles}
78
90
  }
79
91
 
80
92
  ${PillInput} {
@@ -119,6 +131,12 @@ var CheckIcon = (0, import_styled_components.default)(import_seeds_react_icon.de
119
131
  }
120
132
  `;
121
133
  CheckIcon.displayName = "CheckIcon";
134
+ var pillInputHoverStyles = import_styled_components.css`
135
+ ~ ${CheckboxBox} ${CheckIcon} {
136
+ opacity: ${(props) => props.disabled ? 0 : 1};
137
+ color: ${(props) => props.theme.colors.form.border.base};
138
+ }
139
+ `;
122
140
  var PillInput = import_styled_components.default.input`
123
141
  position: absolute;
124
142
  top: 0;
@@ -142,10 +160,7 @@ var PillInput = import_styled_components.default.input`
142
160
  ${(props) => !props.checked && import_styled_components.css`
143
161
  &:hover,
144
162
  &:focus {
145
- ~ ${CheckboxBox} ${CheckIcon} {
146
- opacity: ${props.disabled ? 0 : 1};
147
- color: ${props.theme.colors.form.border.base};
148
- }
163
+ ${pillInputHoverStyles}
149
164
  }
150
165
  `}
151
166
 
@@ -195,6 +210,11 @@ var getIcon = (type, color) => {
195
210
  const icon = type === "indeterminate" ? indeterminateSVG(escapedColor) : checkSVG(escapedColor);
196
211
  return icon;
197
212
  };
213
+ var checkboxContainerHoverStyles = import_styled_components.css`
214
+ &:before {
215
+ opacity: ${(props) => props.disabled && !props.checked ? 0 : 1};
216
+ }
217
+ `;
198
218
  var CheckboxContainer = import_styled_components.default.span(
199
219
  (props) => import_styled_components.css`
200
220
  display: inline-flex;
@@ -228,7 +248,7 @@ var CheckboxContainer = import_styled_components.default.span(
228
248
  }
229
249
 
230
250
  &:hover:before {
231
- opacity: ${props.disabled && !props.checked ? 0 : 1};
251
+ ${checkboxContainerHoverStyles}
232
252
  }
233
253
 
234
254
  ${props.disabled && import_styled_components.css`
@@ -395,6 +415,15 @@ var React3 = require("react");
395
415
  var src_default = Checkbox;
396
416
  // Annotate the CommonJS export names for ESM import in node:
397
417
  0 && (module.exports = {
398
- Checkbox
418
+ CheckIcon,
419
+ Checkbox,
420
+ CheckboxBox,
421
+ CheckboxContainer,
422
+ InputWrapper,
423
+ LabelText,
424
+ PillInput,
425
+ checkboxContainerHoverStyles,
426
+ inputWrapperHoverStyles,
427
+ pillInputHoverStyles
399
428
  });
400
429
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/Checkbox.tsx","../src/styles.tsx","../src/types/CheckboxTypes.ts"],"sourcesContent":["import Checkbox from \"./Checkbox\";\n\nexport default Checkbox;\nexport { Checkbox };\nexport * from \"./types/CheckboxTypes\";\n","import * as React from \"react\";\nimport Container, {\n CheckboxBox,\n CheckIcon,\n PillInput,\n InputWrapper,\n LabelText,\n CheckboxContainer,\n} from \"./styles\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nexport default class Checkbox extends React.Component<TypeCheckboxProps> {\n el: HTMLInputElement | null | undefined;\n static defaultProps = {\n indeterminate: false,\n disabled: false,\n };\n\n override componentDidUpdate(prevProps: TypeCheckboxProps) {\n if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n override componentDidMount() {\n if (this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {\n this.props.onChange(event);\n };\n\n override render() {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled,\n indeterminate,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange,\n ariaLabel,\n appearance = \"default\",\n qa = {},\n tabIndex,\n inputProps = {},\n ...rest\n } = this.props;\n const isPill = appearance === \"pill\";\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n // TODO: Refactor pill checkboxes to use fewer elements for performance gains\n if (!isPill) {\n return (\n <CheckboxContainer\n as={label && \"label\"}\n disabled={disabled}\n indeterminate={indeterminate}\n checked={checked}\n {...rest}\n >\n <input\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n {label && (\n <LabelText {...labelProps} disabled={disabled}>\n {label}\n </LabelText>\n )}\n </CheckboxContainer>\n );\n }\n\n return (\n <Container as={label && \"label\"} {...rest}>\n <InputWrapper appearance={appearance}>\n <PillInput\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n <CheckboxBox>\n <CheckIcon\n name={indeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </CheckboxBox>\n </InputWrapper>\n </Container>\n );\n }\n}\n","import * as React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nconst Container = styled.span`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n\n ${COMMON}\n`;\nContainer.displayName = \"Checkbox\";\n\nexport const InputWrapper = styled(Box)<Pick<TypeCheckboxProps, \"appearance\">>`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n background-color: transparent;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n /* This solution is temporary. DS-1095 */\n mix-blend-mode: ${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"};\n ${pill}\n\n &:hover {\n background-color: ${props.theme.colors.app.background.base};\n }\n\n ${PillInput} {\n ${pill}\n }\n `}\n`;\nInputWrapper.displayName = \"InputWrapper\";\n\nexport const CheckboxBox = styled.div`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.form.background.base};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n background-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n pointer-events: none;\n`;\nCheckboxBox.displayName = \"CheckboxBox\";\n\nexport const CheckIcon = styled(Icon).attrs({ \"aria-hidden\": true })`\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n transition: all\n ${({ theme }) => `${theme.duration.fast} ${theme.easing.ease_inout}`};\n\n &,\n & .Icon-svg {\n width: 10px;\n height: 10px;\n line-height: 10px;\n }\n`;\nCheckIcon.displayName = \"CheckIcon\";\n\nexport const PillInput = styled.input`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n border-radius: 4px;\n\n /* IE 11 overrides */\n &::-ms-check {\n display: none;\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${(props) =>\n !props.checked &&\n css`\n &:hover,\n &:focus {\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.disabled ? 0 : 1};\n color: ${props.theme.colors.form.border.base};\n }\n }\n `}\n\n ${(props) =>\n props.checked &&\n css`\n ~ ${CheckboxBox} {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: 1;\n color: ${props.theme.colors.icon.inverse};\n }\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ~ ${CheckboxBox} {\n opacity: 0.4;\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.checked ? 1 : 0};\n }\n `}\n`;\nPillInput.displayName = \"PillInput\";\n\nexport const LabelText = styled(Text)<Pick<TypeCheckboxProps, \"disabled\">>`\n margin-left: ${(props) => props.theme.space[300]};\n font-size: ${(props) => props.theme.typography[200].fontSize};\n line-height: 1;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n color: ${(props) => props.theme.colors.text.headline};\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n `}\n`;\nLabelText.displayName = \"LabelText\";\n\nconst checkSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46\"\n fill={color}\n />\n </svg>\n);\n\nconst indeterminateSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"10\" height=\"2\" x=\"2\" y=\"6\" rx=\"1\" ry=\"1\" fill={color} />\n </svg>\n);\n\nconst getIcon = (type: \"indeterminate\" | \"check\", color: string) => {\n const escapedColor = encodeURIComponent(color);\n const icon =\n type === \"indeterminate\"\n ? indeterminateSVG(escapedColor)\n : checkSVG(escapedColor);\n return icon;\n};\n/* stylelint-disable eslint-disable */\nexport const CheckboxContainer = styled.span<\n Pick<TypeCheckboxProps, \"indeterminate\" | \"checked\" | \"disabled\">\n>(\n (props) => css`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};\n\n @supports (-webkit-appearance: none) {\n &:before {\n /* The following line cannot have multiple lint exclusions, otherwise it will not work\n the svg data url MUST be single quoted */\n /* prettier-ignore */\n content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(\n getIcon(\n props.indeterminate ? \"indeterminate\" : \"check\",\n props.checked\n ? props.theme.colors.form.background.base\n : props.theme.colors.form.border.base\n )\n )}');\n opacity: ${props.checked ? 1 : 0};\n position: absolute;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n text-align: center;\n transform: translateY(1px);\n line-height: 1;\n margin: auto;\n pointer-events: none;\n transition: ${props.theme.duration.fast}\n ${props.theme.easing.ease_inout};\n }\n\n &:hover:before {\n opacity: ${props.disabled && !props.checked ? 0 : 1};\n }\n\n ${props.disabled &&\n css`\n opacity: 0.4;\n `}\n\n input[type='checkbox'] {\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n padding: 0;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n border: 1px solid ${props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${props.theme.colors.form.background.base};\n transition: all ${props.theme.duration.fast}\n ${props.theme.easing.ease_in};\n cursor: ${props.disabled ? \"not-allowed\" : \"pointer\"};\n flex-shrink: 0;\n\n &:not(:checked) {\n ${!props.indeterminate &&\n css`\n border-color: ${props.theme.colors.form.border\n .base} !important; /* We don't want the focus ring to remove the border */\n background-color: ${props.theme.colors.form.background.base};\n `}\n }\n\n &:checked {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n\n ${props.indeterminate &&\n props.checked &&\n css`\n border-color: ${props.theme.colors.form.border.selected} !important;\n background-color: ${props.theme.colors.form.background\n .selected} !important;\n `}\n\n &:focus {\n ${focusRing}\n }\n }\n }\n\n ${COMMON}\n `\n);\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeCheckboxProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** ID of the form element, should match the \"for\" value of the associated label */\n id: string;\n value?: string;\n name?: string;\n\n /** Label text to display next to the checkbox */\n label?: string;\n\n /** Label used to describe the input (if not used with an accompanying visual label) */\n ariaLabel?: string;\n labelProps?: TypeTextProps;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;\n appearance?: \"pill\" | \"default\";\n qa?: object;\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n}\n"],"mappings":"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","names":["React","styled","Box","props","Icon","Text","import_jsx_runtime","React"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/Checkbox.tsx","../src/styles.tsx","../src/types/CheckboxTypes.ts"],"sourcesContent":["import Checkbox from \"./Checkbox\";\n\nexport default Checkbox;\nexport { Checkbox };\nexport * from \"./types/CheckboxTypes\";\nexport * from \"./styles\";\n","import * as React from \"react\";\nimport Container, {\n CheckboxBox,\n CheckIcon,\n PillInput,\n InputWrapper,\n LabelText,\n CheckboxContainer,\n} from \"./styles\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nexport default class Checkbox extends React.Component<TypeCheckboxProps> {\n el: HTMLInputElement | null | undefined;\n static defaultProps = {\n indeterminate: false,\n disabled: false,\n };\n\n override componentDidUpdate(prevProps: TypeCheckboxProps) {\n if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n override componentDidMount() {\n if (this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {\n this.props.onChange(event);\n };\n\n override render() {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled,\n indeterminate,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange,\n ariaLabel,\n appearance = \"default\",\n qa = {},\n tabIndex,\n inputProps = {},\n ...rest\n } = this.props;\n const isPill = appearance === \"pill\";\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n // TODO: Refactor pill checkboxes to use fewer elements for performance gains\n if (!isPill) {\n return (\n <CheckboxContainer\n as={label && \"label\"}\n disabled={disabled}\n indeterminate={indeterminate}\n checked={checked}\n {...rest}\n >\n <input\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n {label && (\n <LabelText {...labelProps} disabled={disabled}>\n {label}\n </LabelText>\n )}\n </CheckboxContainer>\n );\n }\n\n return (\n <Container as={label && \"label\"} {...rest}>\n <InputWrapper appearance={appearance}>\n <PillInput\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n <CheckboxBox>\n <CheckIcon\n name={indeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </CheckboxBox>\n </InputWrapper>\n </Container>\n );\n }\n}\n","import * as React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nconst Container = styled.span`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n\n ${COMMON}\n`;\nContainer.displayName = \"Checkbox\";\n\nexport const inputWrapperHoverStyles = css`\n background-color: ${(props) => props.theme.colors.app.background.base};\n`;\n\nexport const InputWrapper = styled(Box)<Pick<TypeCheckboxProps, \"appearance\">>`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n background-color: transparent;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n /* This solution is temporary. DS-1095 */\n mix-blend-mode: ${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"};\n ${pill}\n\n &:hover {\n ${inputWrapperHoverStyles}\n }\n\n ${PillInput} {\n ${pill}\n }\n `}\n`;\nInputWrapper.displayName = \"InputWrapper\";\n\nexport const CheckboxBox = styled.div`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.form.background.base};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n background-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n pointer-events: none;\n`;\nCheckboxBox.displayName = \"CheckboxBox\";\n\nexport const CheckIcon = styled(Icon).attrs({ \"aria-hidden\": true })`\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n transition: all\n ${({ theme }) => `${theme.duration.fast} ${theme.easing.ease_inout}`};\n\n &,\n & .Icon-svg {\n width: 10px;\n height: 10px;\n line-height: 10px;\n }\n`;\nCheckIcon.displayName = \"CheckIcon\";\n\nexport const pillInputHoverStyles = css<Pick<TypeCheckboxProps, \"disabled\">>`\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${(props) => (props.disabled ? 0 : 1)};\n color: ${(props) => props.theme.colors.form.border.base};\n }\n`;\n\nexport const PillInput = styled.input`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n border-radius: 4px;\n\n /* IE 11 overrides */\n &::-ms-check {\n display: none;\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${(props) =>\n !props.checked &&\n css`\n &:hover,\n &:focus {\n ${pillInputHoverStyles}\n }\n `}\n\n ${(props) =>\n props.checked &&\n css`\n ~ ${CheckboxBox} {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: 1;\n color: ${props.theme.colors.icon.inverse};\n }\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ~ ${CheckboxBox} {\n opacity: 0.4;\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.checked ? 1 : 0};\n }\n `}\n`;\nPillInput.displayName = \"PillInput\";\n\nexport const LabelText = styled(Text)<Pick<TypeCheckboxProps, \"disabled\">>`\n margin-left: ${(props) => props.theme.space[300]};\n font-size: ${(props) => props.theme.typography[200].fontSize};\n line-height: 1;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n color: ${(props) => props.theme.colors.text.headline};\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n `}\n`;\nLabelText.displayName = \"LabelText\";\n\nconst checkSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46\"\n fill={color}\n />\n </svg>\n);\n\nconst indeterminateSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"10\" height=\"2\" x=\"2\" y=\"6\" rx=\"1\" ry=\"1\" fill={color} />\n </svg>\n);\n\nconst getIcon = (type: \"indeterminate\" | \"check\", color: string) => {\n const escapedColor = encodeURIComponent(color);\n const icon =\n type === \"indeterminate\"\n ? indeterminateSVG(escapedColor)\n : checkSVG(escapedColor);\n return icon;\n};\n\nexport const checkboxContainerHoverStyles = css<\n Pick<TypeCheckboxProps, \"disabled\" | \"checked\">\n>`\n &:before {\n opacity: ${(props) => (props.disabled && !props.checked ? 0 : 1)};\n }\n`;\n/* stylelint-disable eslint-disable */\nexport const CheckboxContainer = styled.span<\n Pick<TypeCheckboxProps, \"indeterminate\" | \"checked\" | \"disabled\">\n>(\n (props) => css`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};\n\n @supports (-webkit-appearance: none) {\n &:before {\n /* The following line cannot have multiple lint exclusions, otherwise it will not work\n the svg data url MUST be single quoted */\n /* prettier-ignore */\n content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(\n getIcon(\n props.indeterminate ? \"indeterminate\" : \"check\",\n props.checked\n ? props.theme.colors.form.background.base\n : props.theme.colors.form.border.base\n )\n )}');\n opacity: ${props.checked ? 1 : 0};\n position: absolute;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n text-align: center;\n transform: translateY(1px);\n line-height: 1;\n margin: auto;\n pointer-events: none;\n transition: ${props.theme.duration.fast}\n ${props.theme.easing.ease_inout};\n }\n\n &:hover:before {\n ${checkboxContainerHoverStyles}\n }\n\n ${props.disabled &&\n css`\n opacity: 0.4;\n `}\n\n input[type='checkbox'] {\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n padding: 0;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n border: 1px solid ${props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${props.theme.colors.form.background.base};\n transition: all ${props.theme.duration.fast}\n ${props.theme.easing.ease_in};\n cursor: ${props.disabled ? \"not-allowed\" : \"pointer\"};\n flex-shrink: 0;\n\n &:not(:checked) {\n ${!props.indeterminate &&\n css`\n border-color: ${props.theme.colors.form.border\n .base} !important; /* We don't want the focus ring to remove the border */\n background-color: ${props.theme.colors.form.background.base};\n `}\n }\n\n &:checked {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n\n ${props.indeterminate &&\n props.checked &&\n css`\n border-color: ${props.theme.colors.form.border.selected} !important;\n background-color: ${props.theme.colors.form.background\n .selected} !important;\n `}\n\n &:focus {\n ${focusRing}\n }\n }\n }\n\n ${COMMON}\n `\n);\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeCheckboxProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** ID of the form element, should match the \"for\" value of the associated label */\n id: string;\n value?: string;\n name?: string;\n\n /** Label text to display next to the checkbox */\n label?: string;\n\n /** Label used to describe the input (if not used with an accompanying visual label) */\n ariaLabel?: string;\n labelProps?: TypeTextProps;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;\n appearance?: \"pill\" | \"default\";\n qa?: object;\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACAvB,YAAuB;AACvB,oBAAqC;AACrC,+BAA4B;AAC5B,sCAAuB;AACvB,gCAAgC;AAChC,6BAAgB;AAChB,8BAAiB;AACjB,8BAAiB;AAmKb;AAhKJ,IAAM,YAAY,yBAAAC,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrB,sCAAM;AAAA;AAEV,UAAU,cAAc;AAEjB,IAAM,0BAA0B;AAAA,sBACjB,CAAC,UAAU,MAAM,MAAM,OAAO,IAAI,WAAW,IAAI;AAAA;AAGhE,IAAM,mBAAe,yBAAAA,SAAO,uBAAAC,OAAG;AAAA;AAAA;AAAA,WAG3B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,YAChC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKzC,CAAC,UACD,MAAM,eAAe,UACrB;AAAA;AAAA,wBAEoB,CAACC,WAAUA,OAAM,MAAM,SAAS,IAAI;AAAA,UAClD,CAACA,WAAUA,OAAM,MAAM,OAAO,UAAU;AAAA;AAAA,wBAE1B,MAAM,MAAM,SAAS,SAAS,WAAW,UAAU;AAAA,QACnE,8BAAI;AAAA;AAAA;AAAA,UAGF,uBAAuB;AAAA;AAAA;AAAA,QAGzB,SAAS;AAAA,UACP,8BAAI;AAAA;AAAA,KAET;AAAA;AAEL,aAAa,cAAc;AAEpB,IAAM,cAAc,yBAAAF,QAAO;AAAA;AAAA;AAAA,WAGvB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,YAChC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,sBACvB,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,OAAO,IAAI;AAAA;AAAA,sBAE9C,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,WAAW,IAAI;AAAA,6BAC3C,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA,QACzD,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA,uBACtB,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA,QACnD,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAG7C,YAAY,cAAc;AAEnB,IAAM,gBAAY,yBAAAA,SAAO,wBAAAG,OAAI,EAAE,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAW7D,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,SAAS,IAAI,IAAI,MAAM,OAAO,UAAU,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASxE,UAAU,cAAc;AAEjB,IAAM,uBAAuB;AAAA,MAC9B,WAAW,IAAI,SAAS;AAAA,eACf,CAAC,UAAW,MAAM,WAAW,IAAI,CAAE;AAAA,aACrC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,OAAO,IAAI;AAAA;AAAA;AAIpD,IAAM,YAAY,yBAAAH,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQpB,CAAC,UAAW,MAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAS7D,mCAAS;AAAA;AAAA;AAAA,IAGX,CAAC,UACD,CAAC,MAAM,WACP;AAAA;AAAA;AAAA,UAGM,oBAAoB;AAAA;AAAA,KAEzB;AAAA;AAAA,IAED,CAAC,UACD,MAAM,WACN;AAAA,UACM,WAAW;AAAA,wBACG,MAAM,MAAM,OAAO,KAAK,OAAO,QAAQ;AAAA,4BACnC,MAAM,MAAM,OAAO,KAAK,WAAW,QAAQ;AAAA;AAAA,UAE7D,WAAW,IAAI,SAAS;AAAA;AAAA,iBAEjB,MAAM,MAAM,OAAO,KAAK,OAAO;AAAA;AAAA,KAE3C;AAAA;AAAA,MAEC,CAAC,UACH,MAAM,YACN;AAAA,UACM,WAAW;AAAA;AAAA;AAAA,UAGX,WAAW,IAAI,SAAS;AAAA,mBACf,MAAM,UAAU,IAAI,CAAC;AAAA;AAAA,KAEnC;AAAA;AAEL,UAAU,cAAc;AAEjB,IAAM,gBAAY,yBAAAA,SAAO,wBAAAI,OAAI;AAAA,iBACnB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,eACnC,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,EAAE,QAAQ;AAAA;AAAA,YAElD,CAAC,UAAW,MAAM,WAAW,gBAAgB,SAAU;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,QAAQ;AAAA;AAAA,IAElD,CAAC,UACD,MAAM,YACN;AAAA;AAAA,KAEC;AAAA;AAEL,UAAU,cAAc;AAExB,IAAM,WAAW,CAAC,UAChB,4CAAC,SAAI,OAAM,MAAK,QAAO,MAAK,OAAM,8BAChC;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAM;AAAA;AACR,GACF;AAGF,IAAM,mBAAmB,CAAC,UACxB,4CAAC,SAAI,OAAM,MAAK,QAAO,MAAK,OAAM,8BAChC,sDAAC,UAAK,OAAM,MAAK,QAAO,KAAI,GAAE,KAAI,GAAE,KAAI,IAAG,KAAI,IAAG,KAAI,MAAM,OAAO,GACrE;AAGF,IAAM,UAAU,CAAC,MAAiC,UAAkB;AAClE,QAAM,eAAe,mBAAmB,KAAK;AAC7C,QAAM,OACJ,SAAS,kBACL,iBAAiB,YAAY,IAC7B,SAAS,YAAY;AAC3B,SAAO;AACT;AAEO,IAAM,+BAA+B;AAAA;AAAA,eAI7B,CAAC,UAAW,MAAM,YAAY,CAAC,MAAM,UAAU,IAAI,CAAE;AAAA;AAAA;AAI7D,IAAM,oBAAoB,yBAAAJ,QAAO;AAAA,EAGtC,CAAC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKS,MAAM,MAAM,SAAS,IAAI,IAAI,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oDAO7B;AAAA,IACtC;AAAA,MACE,MAAM,gBAAgB,kBAAkB;AAAA,MACxC,MAAM,UACF,MAAM,MAAM,OAAO,KAAK,WAAW,OACnC,MAAM,MAAM,OAAO,KAAK,OAAO;AAAA,IACrC;AAAA,EACF,CAAC;AAAA,mBACU,MAAM,UAAU,IAAI,CAAC;AAAA;AAAA,iBAEvB,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,kBACrB,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMlB,MAAM,MAAM,SAAS,IAAI;AAAA,YACnC,MAAM,MAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,UAI/B,4BAA4B;AAAA;AAAA;AAAA,QAG9B,MAAM,YACR;AAAA;AAAA,OAEC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,kBACrB,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,4BACZ,MAAM,MAAM,OAAO,KAAK,OAAO,IAAI;AAAA;AAAA,4BAEnC,MAAM,MAAM,OAAO,KAAK,WAAW,IAAI;AAAA,0BACzC,MAAM,MAAM,SAAS,IAAI;AAAA,YACvC,MAAM,MAAM,OAAO,OAAO;AAAA,kBACpB,MAAM,WAAW,gBAAgB,SAAS;AAAA;AAAA;AAAA;AAAA,YAIhD,CAAC,MAAM,iBACT;AAAA,4BACkB,MAAM,MAAM,OAAO,KAAK,OACrC,IAAI;AAAA,gCACa,MAAM,MAAM,OAAO,KAAK,WAAW,IAAI;AAAA,WAC5D;AAAA;AAAA;AAAA;AAAA,0BAIe,MAAM,MAAM,OAAO,KAAK,OAAO,QAAQ;AAAA,8BACnC,MAAM,MAAM,OAAO,KAAK,WAAW,QAAQ;AAAA;AAAA;AAAA,UAG/D,MAAM,iBACR,MAAM,WACN;AAAA,0BACkB,MAAM,MAAM,OAAO,KAAK,OAAO,QAAQ;AAAA,8BACnC,MAAM,MAAM,OAAO,KAAK,WACzC,QAAQ;AAAA,SACZ;AAAA;AAAA;AAAA,YAGG,mCAAS;AAAA;AAAA;AAAA;AAAA;AAAA,MAKf,sCAAM;AAAA;AAEZ;AAEA,IAAO,iBAAQ;;;ADvOP,IAAAK,sBAAA;AAlDR,IAAqB,WAArB,cAA4C,iBAA6B;AAAA,EACvE;AAAA,EACA,OAAO,eAAe;AAAA,IACpB,eAAe;AAAA,IACf,UAAU;AAAA,EACZ;AAAA,EAES,mBAAmB,WAA8B;AACxD,QAAI,UAAU,kBAAkB,CAAC,CAAC,KAAK,MAAM,iBAAiB,KAAK,IAAI;AACrE,WAAK,GAAG,gBAAgB,CAAC,CAAC,KAAK,MAAM;AAAA,IACvC;AAAA,EACF;AAAA,EAES,oBAAoB;AAC3B,QAAI,KAAK,IAAI;AACX,WAAK,GAAG,gBAAgB,CAAC,CAAC,KAAK,MAAM;AAAA,IACvC;AAAA,EACF;AAAA,EAEA,eAAe,CAAC,UAAkD;AAChE,SAAK,MAAM,SAAS,KAAK;AAAA,EAC3B;AAAA,EAES,SAAS;AAChB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,KAAK,CAAC;AAAA,MACN;AAAA,MACA,aAAa,CAAC;AAAA,MACd,GAAG;AAAA,IACL,IAAI,KAAK;AACT,UAAM,SAAS,eAAe;AAE9B,UAAM,cACJ,OAAO,aAAa,WAAW,SAAS,UAAU,EAAE,IAAI;AAG1D,QAAI,CAAC,QAAQ;AACX,aACE;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,SAAS;AAAA,UACb;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UAEJ;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL;AAAA,gBACA,cAAY;AAAA,gBACZ;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,KAAK,CAAC,OAAQ,KAAK,KAAK;AAAA,gBACxB;AAAA,gBACA,UAAU,KAAK;AAAA,gBACf,oBAAkB;AAAA,gBAClB,8BACE,gBAAgB,kBAAkB,YAAY;AAAA,gBAEhD,+BAA6B,aAAa;AAAA,gBAC1C,UAAU;AAAA,gBACT,GAAG;AAAA,gBACH,GAAG;AAAA;AAAA,YACN;AAAA,YACC,SACC,6CAAC,aAAW,GAAG,YAAY,UACxB,iBACH;AAAA;AAAA;AAAA,MAEJ;AAAA,IAEJ;AAEA,WACE,6CAAC,kBAAU,IAAI,SAAS,SAAU,GAAG,MACnC,wDAAC,gBAAa,YACZ;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,cAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA,UACA,KAAK,CAAC,OAAQ,KAAK,KAAK;AAAA,UACxB;AAAA,UACA,UAAU,KAAK;AAAA,UACf,oBAAkB;AAAA,UAClB,8BACE,gBAAgB,kBAAkB,YAAY;AAAA,UAEhD,+BAA6B,aAAa;AAAA,UAC1C,UAAU;AAAA,UACT,GAAG;AAAA,UACH,GAAG;AAAA;AAAA,MACN;AAAA,MACA,6CAAC,eACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,gBAAgB,gBAAgB;AAAA,UACtC,MAAK;AAAA,UACL,YAAU;AAAA;AAAA,MACZ,GACF;AAAA,OACF,GACF;AAAA,EAEJ;AACF;;;AEjIA,IAAAC,SAAuB;;;AHEvB,IAAO,cAAQ;","names":["React","styled","Box","props","Icon","Text","import_jsx_runtime","React"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-checkbox",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "description": "Seeds Checkbox",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/esm/index.js",