@mrshmllw/smores-react 3.3.1 → 3.3.2

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 (75) hide show
  1. package/README.md +4 -0
  2. package/dist/Banner/BannerItem.js.map +1 -1
  3. package/dist/Datepicker/Datepicker.js.map +1 -1
  4. package/dist/Datepicker/DatesList.js.map +1 -1
  5. package/dist/IconStrict/IconStrict.js.map +1 -1
  6. package/dist/Modal/useBodyScrollLock.js.map +1 -1
  7. package/dist/NumberInput/NumberInput.js.map +1 -1
  8. package/dist/Pagination/Pagination.js.map +1 -1
  9. package/dist/RadioGroup/RadioGroup.js.map +1 -1
  10. package/dist/SearchInput/SearchInput.js.map +1 -1
  11. package/dist/Table/components/RowActions.js.map +1 -1
  12. package/dist/Table/components/TableRow.js.map +1 -1
  13. package/dist/Toggle/Toggle.js +3 -3
  14. package/dist/Toggle/Toggle.js.map +1 -1
  15. package/dist/Tooltip/Tooltip.js.map +1 -1
  16. package/dist/hooks/useClickOutside/index.js.map +1 -1
  17. package/dist/theme.js +29 -29
  18. package/dist/theme.js.map +1 -1
  19. package/dist/tokenTest.spec.d.ts +0 -0
  20. package/dist/tokenTest.spec.js +8 -0
  21. package/dist/tokenTest.spec.js.map +1 -0
  22. package/dist/utils/debounce.js.map +1 -1
  23. package/dist/utils/deprecated.js.map +1 -1
  24. package/dist/utils/responsiveProp.js.map +1 -1
  25. package/dist/utils/space.js.map +1 -1
  26. package/dist/utils/useControlledState.js.map +1 -1
  27. package/package.json +3 -2
  28. package/dist/Button/LegacyButton.d.ts +0 -15
  29. package/dist/Button/LegacyButton.js +0 -50
  30. package/dist/Button/LegacyButton.js.map +0 -1
  31. package/dist/ConfirmationRadioButtons/Confirmation.d.ts +0 -17
  32. package/dist/ConfirmationRadioButtons/Confirmation.js +0 -100
  33. package/dist/ConfirmationRadioButtons/Confirmation.js.map +0 -1
  34. package/dist/ConfirmationRadioButtons/Confirmation.stories.d.ts +0 -21
  35. package/dist/ConfirmationRadioButtons/Confirmation.stories.js +0 -76
  36. package/dist/ConfirmationRadioButtons/Confirmation.stories.js.map +0 -1
  37. package/dist/ConfirmationRadioButtons/Container.d.ts +0 -2
  38. package/dist/ConfirmationRadioButtons/Container.js +0 -8
  39. package/dist/ConfirmationRadioButtons/Container.js.map +0 -1
  40. package/dist/ConfirmationRadioButtons/RadioButtonStyled.d.ts +0 -17
  41. package/dist/ConfirmationRadioButtons/RadioButtonStyled.js +0 -41
  42. package/dist/ConfirmationRadioButtons/RadioButtonStyled.js.map +0 -1
  43. package/dist/ConfirmationRadioButtons/__tests__/Confirmation.d.ts +0 -1
  44. package/dist/ConfirmationRadioButtons/__tests__/Confirmation.js +0 -8
  45. package/dist/ConfirmationRadioButtons/__tests__/Confirmation.js.map +0 -1
  46. package/dist/ConfirmationRadioButtons/index.d.ts +0 -1
  47. package/dist/ConfirmationRadioButtons/index.js +0 -2
  48. package/dist/ConfirmationRadioButtons/index.js.map +0 -1
  49. package/dist/Message/Message.d.ts +0 -21
  50. package/dist/Message/Message.js +0 -45
  51. package/dist/Message/Message.js.map +0 -1
  52. package/dist/Message/Message.stories.d.ts +0 -13
  53. package/dist/Message/Message.stories.js +0 -38
  54. package/dist/Message/Message.stories.js.map +0 -1
  55. package/dist/Message/__tests__/Message.d.ts +0 -1
  56. package/dist/Message/__tests__/Message.js +0 -26
  57. package/dist/Message/__tests__/Message.js.map +0 -1
  58. package/dist/Message/index.d.ts +0 -1
  59. package/dist/Message/index.js +0 -2
  60. package/dist/Message/index.js.map +0 -1
  61. package/dist/RadioButton/Container.d.ts +0 -2
  62. package/dist/RadioButton/Container.js +0 -9
  63. package/dist/RadioButton/Container.js.map +0 -1
  64. package/dist/RadioButton/RadioButton.d.ts +0 -10
  65. package/dist/RadioButton/RadioButton.js +0 -68
  66. package/dist/RadioButton/RadioButton.js.map +0 -1
  67. package/dist/RadioButton/RadioButton.stories.d.ts +0 -15
  68. package/dist/RadioButton/RadioButton.stories.js +0 -29
  69. package/dist/RadioButton/RadioButton.stories.js.map +0 -1
  70. package/dist/RadioButton/__tests__/RadioButton.d.ts +0 -1
  71. package/dist/RadioButton/__tests__/RadioButton.js +0 -13
  72. package/dist/RadioButton/__tests__/RadioButton.js.map +0 -1
  73. package/dist/RadioButton/index.d.ts +0 -1
  74. package/dist/RadioButton/index.js +0 -2
  75. package/dist/RadioButton/index.js.map +0 -1
@@ -1,100 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import React from 'react';
13
- import styled, { css } from 'styled-components';
14
- import { theme } from '../theme';
15
- import { Box } from '../Box';
16
- import { Text } from '../Text';
17
- import { RadioButton } from './RadioButtonStyled';
18
- import { useUniqueId } from '../utils/id';
19
- import { useDeprecatedWarning } from '../utils/deprecated';
20
- export const Confirmation = (props) => {
21
- const { checked, onChange, id: idProp, error = false, errorMsg = '', label, onBlur, sublabel, yesLabel = 'Yes', noLabel = 'No', required = false, disabled = false } = props, marginProps = __rest(props, ["checked", "onChange", "id", "error", "errorMsg", "label", "onBlur", "sublabel", "yesLabel", "noLabel", "required", "disabled"]);
22
- useDeprecatedWarning({
23
- title: 'Confirmation',
24
- message: 'The Confirmation component has been deprecated. Please use the new RadioGroup component instead.',
25
- componentProps: props,
26
- });
27
- const id = useUniqueId(idProp);
28
- return (React.createElement(ConfirmationWrapper, Object.assign({}, marginProps),
29
- (label || sublabel) && (React.createElement(TextWrapper, null,
30
- label && (React.createElement(SectionHeadingText, { tag: "h3" },
31
- label,
32
- required && React.createElement(Asterisk, null, "*"))),
33
- sublabel && (React.createElement(Text, { tag: "p", typo: "base-small", color: "subtext" }, sublabel)))),
34
- React.createElement(RadioButtonGroupWrapper, null,
35
- React.createElement(RadioButtonGroup, null,
36
- React.createElement(RadioButtonWrapper, { checked: checked === true, error: error, disabled: disabled },
37
- React.createElement(RadioButton, { id: id, label: yesLabel, checked: checked === true, onChange: () => onChange(true), value: id, onBlur: onBlur, disabled: disabled })),
38
- React.createElement(RadioButtonWrapper, { checked: checked === false, error: error, disabled: disabled },
39
- React.createElement(RadioButton, { id: `${id}-1`, label: noLabel, checked: checked === false, onChange: () => onChange(false), value: `${id}-1`, onBlur: onBlur, disabled: disabled }))),
40
- error && React.createElement(ErrorBox, null, errorMsg))));
41
- };
42
- const RadioButtonGroupWrapper = styled.div `
43
- display: flex;
44
- flex-direction: column;
45
- `;
46
- const RadioButtonGroup = styled.div `
47
- display: flex;
48
- flex-direction: row;
49
- `;
50
- const getColor = (checked, error) => {
51
- if (error) {
52
- return `2px solid ${theme.colors.error}`;
53
- }
54
- else if (checked) {
55
- return `2px solid ${theme.colors.secondary}`;
56
- }
57
- else {
58
- return 'none';
59
- }
60
- };
61
- const RadioButtonWrapper = styled.div `
62
- background-color: ${({ checked }) => !checked && `${theme.colors.background}`};
63
- border: ${({ checked, error }) => getColor(checked, error)};
64
- margin-right: 10px;
65
- width: 139px;
66
- display: flex;
67
- align-items: center;
68
- height: 56px;
69
- padding-left: 12px;
70
- border-radius: 5px;
71
- font-weight: bold;
72
- ${({ disabled }) => disabled &&
73
- css `
74
- border-color: ${theme.colors.secondary};
75
- opacity: 0.5;
76
- `}
77
- `;
78
- const ErrorBox = styled.span `
79
- margin-top: 7px;
80
- margin-left: 12px;
81
- font-size: 12px;
82
- color: ${theme.colors.error};
83
- `;
84
- const ConfirmationWrapper = styled(Box) `
85
- display: flex;
86
- flex-direction: column;
87
- `;
88
- const SectionHeadingText = styled(Text) `
89
- font-weight: bold;
90
- `;
91
- const TextWrapper = styled.div `
92
- display: flex;
93
- flex-direction: column;
94
- margin-bottom: 8px;
95
- `;
96
- const Asterisk = styled.span `
97
- font-size: 14px;
98
- color: ${theme.colors.error};
99
- `;
100
- //# sourceMappingURL=Confirmation.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.tsx"],"names":[],"mappings":"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"}
@@ -1,21 +0,0 @@
1
- import React from 'react';
2
- import { ConfirmationProps } from './Confirmation';
3
- declare const _default: {
4
- title: string;
5
- component: React.FC<ConfirmationProps>;
6
- argTypes: {
7
- onChange: {
8
- action: string;
9
- };
10
- };
11
- };
12
- export default _default;
13
- export declare const Default: any;
14
- export declare const WithError: any;
15
- export declare const WithSublabel: any;
16
- export declare const WorkingExample: any;
17
- export declare const WithCustomLabel: any;
18
- export declare const WithNoLabel: any;
19
- export declare const Required: any;
20
- export declare const RequiredWithLongLabel: any;
21
- export declare const Disabled: any;
@@ -1,76 +0,0 @@
1
- import React from 'react';
2
- import { noop } from '../utils/noop';
3
- import { Confirmation } from './Confirmation';
4
- import { Container } from './Container';
5
- export default {
6
- title: 'Confirmation Radio Button',
7
- component: Confirmation,
8
- argTypes: { onChange: { action: 'clicked' } },
9
- };
10
- const Template = (props) => React.createElement(Confirmation, Object.assign({}, props));
11
- export const Default = Template.bind({});
12
- Default.args = {
13
- id: 'radioButton',
14
- onChange: noop,
15
- checked: false,
16
- label: 'Do you like marshmallows?',
17
- };
18
- export const WithError = Template.bind({});
19
- WithError.args = {
20
- id: 'radioButton',
21
- onChange: noop,
22
- checked: undefined,
23
- label: 'Do you like marshmallows?',
24
- error: true,
25
- errorMsg: 'This field is required.',
26
- };
27
- export const WithSublabel = Template.bind({});
28
- WithSublabel.args = {
29
- id: 'radioButton',
30
- onChange: noop,
31
- checked: undefined,
32
- label: 'Do you like marshmallows?',
33
- sublabel: 'This includes smores and hot chocolate topped with marshmallows.',
34
- };
35
- const ContainerTemplate = () => React.createElement(Container, null);
36
- export const WorkingExample = ContainerTemplate.bind({});
37
- export const WithCustomLabel = Template.bind({});
38
- WithCustomLabel.args = {
39
- id: 'radioButton',
40
- onChange: noop,
41
- checked: undefined,
42
- label: 'Do you like marshmallows?',
43
- yesLabel: 'Correct',
44
- };
45
- export const WithNoLabel = Template.bind({});
46
- WithNoLabel.args = {
47
- id: 'radioButton',
48
- onChange: noop,
49
- checked: undefined,
50
- yesLabel: 'Yes',
51
- };
52
- export const Required = Template.bind({});
53
- Required.args = {
54
- id: 'radioButton',
55
- label: 'Do you like ice cream?',
56
- onChange: noop,
57
- checked: undefined,
58
- required: true,
59
- };
60
- export const RequiredWithLongLabel = Template.bind({});
61
- RequiredWithLongLabel.args = {
62
- id: 'radioButton',
63
- label: 'This is a really long label to test the placement of the required asterisk. Do you like ice cream, pie, marshmallows, smores, cupcakes, cookies, and muffins?',
64
- onChange: noop,
65
- checked: undefined,
66
- required: true,
67
- };
68
- export const Disabled = Template.bind({});
69
- Disabled.args = {
70
- id: 'radioButton',
71
- label: 'Do you like marshmallows?',
72
- onChange: noop,
73
- checked: true,
74
- disabled: true,
75
- };
76
- //# sourceMappingURL=Confirmation.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.stories.tsx"],"names":[],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const Container: () => JSX.Element;
@@ -1,8 +0,0 @@
1
- import React, { useState } from 'react';
2
- import { Confirmation } from './Confirmation';
3
- export const Container = () => {
4
- const [checked, setChecked] = useState(undefined);
5
- return (React.createElement("form", null,
6
- React.createElement(Confirmation, { id: "radioButton", onChange: (selection) => setChecked(selection), checked: checked, label: 'Do you like marshmallows?', error: checked === undefined, errorMsg: "This field is required." })));
7
- };
8
- //# sourceMappingURL=Container.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAA;IAEtE,OAAO,CACL;QACE,oBAAC,YAAY,IACX,EAAE,EAAC,aAAa,EAChB,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,EAC9C,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,2BAA2B,EAClC,KAAK,EAAE,OAAO,KAAK,SAAS,EAC5B,QAAQ,EAAC,yBAAyB,GAClC,CACG,CACR,CAAA;AACH,CAAC,CAAA"}
@@ -1,17 +0,0 @@
1
- import { FC, ChangeEvent, FocusEvent, ReactElement } from 'react';
2
- export interface FakeInput {
3
- checked?: boolean;
4
- error?: boolean;
5
- disabled?: boolean;
6
- }
7
- type RadioButtonProps = {
8
- id: string;
9
- label: string | ReactElement;
10
- checked?: boolean;
11
- value: string;
12
- onChange: (event: ChangeEvent<HTMLInputElement>) => void;
13
- onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
14
- disabled?: boolean;
15
- };
16
- export declare const RadioButton: FC<RadioButtonProps>;
17
- export {};
@@ -1,41 +0,0 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import { theme } from '../theme';
4
- import { Box } from '../Box';
5
- export const RadioButton = ({ id, label, checked, value, onChange, onBlur, disabled = false, }) => (React.createElement(Box, { flex: true, alignItems: "center" },
6
- React.createElement(RadioInput, { id: id, type: "radio", checked: checked, value: value, onChange: onChange, onBlur: onBlur, disabled: disabled }),
7
- React.createElement(RadioLabel, { htmlFor: id },
8
- React.createElement(FakeInput, { checked: checked }),
9
- React.createElement(Text, null, label))));
10
- const FakeInput = styled.div `
11
- width: 24px;
12
- height: 24px;
13
- border-radius: 50%;
14
- background-color: ${theme.colors.white};
15
- margin-right: 10px;
16
- border: ${({ checked }) => checked
17
- ? `8px solid ${theme.colors.secondary}`
18
- : `1px solid ${theme.colors.secondary}`};
19
- `;
20
- const RadioInput = styled.input `
21
- position: absolute;
22
- opacity: 0;
23
- height: 0;
24
- width: 0;
25
- `;
26
- const RadioLabel = styled.label `
27
- font-family: 'Gordita', sans-serif;
28
- text-transform: none;
29
- font-size: 16px;
30
- line-height: 17px;
31
- color: ${theme.colors.secondary};
32
- margin-bottom: 0;
33
- display: flex;
34
- cursor: pointer;
35
- `;
36
- // needed because the text is top aligned in its viewbox
37
- const Text = styled.span `
38
- position: relative;
39
- bottom: -5px;
40
- `;
41
- //# sourceMappingURL=RadioButtonStyled.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"RadioButtonStyled.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/RadioButtonStyled.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAA;AACxE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAkB5B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAChD,EAAE,EACF,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,GAAG,KAAK,GACC,EAAE,EAAE,CAAC,CACtB,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;IAC3B,oBAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GAClB;IACF,oBAAC,UAAU,IAAC,OAAO,EAAE,EAAE;QACrB,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO,GAAI;QAC/B,oBAAC,IAAI,QAAE,KAAK,CAAQ,CACT,CACT,CACP,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAW;;;;sBAIjB,KAAK,CAAC,MAAM,CAAC,KAAK;;YAE5B,CAAC,EAAE,OAAO,EAAa,EAAE,EAAE,CACnC,OAAO;IACL,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;IACvC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;CAC5C,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;CAK9B,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;WAKpB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;CAIhC,CAAA;AAED,wDAAwD;AACxD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAGvB,CAAA"}
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import { render } from '@testing-library/react';
3
- import { Confirmation } from '../Confirmation';
4
- test('renders', () => {
5
- const { container } = render(React.createElement(Confirmation, null));
6
- expect(container.firstChild).toMatchSnapshot();
7
- });
8
- //# sourceMappingURL=Confirmation.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/ConfirmationRadioButtons/__tests__/Confirmation.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;IACnB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,YAAY,OAAG,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA"}
@@ -1 +0,0 @@
1
- export { Confirmation } from './Confirmation';
@@ -1,2 +0,0 @@
1
- export { Confirmation } from './Confirmation';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}
@@ -1,21 +0,0 @@
1
- import { FC, ReactNode } from 'react';
2
- type BorderProps = {
3
- hasBorder?: false;
4
- borderColor?: never;
5
- } | {
6
- hasBorder: true;
7
- borderColor: string;
8
- };
9
- export type MessageProps = {
10
- className?: string;
11
- children: ReactNode;
12
- type?: 'info' | 'warning' | 'warning-bubble' | string;
13
- alignIcon?: 'center' | 'flex-start' | 'flex-end';
14
- backgroundColor?: string;
15
- sizeSmall?: boolean;
16
- } & BorderProps;
17
- /**
18
- * @deprecated Use Support Message instead
19
- */
20
- export declare const Message: FC<MessageProps>;
21
- export {};
@@ -1,45 +0,0 @@
1
- import React from 'react';
2
- import styled, { css } from 'styled-components';
3
- import { Box } from '../Box';
4
- import { Icon } from '../Icon';
5
- import { theme } from '../theme';
6
- import { useDeprecatedWarning } from '../utils/deprecated';
7
- /**
8
- * @deprecated Use Support Message instead
9
- */
10
- export const Message = ({ className, children, type = 'info', alignIcon = 'center', backgroundColor, sizeSmall, hasBorder, borderColor, }) => {
11
- useDeprecatedWarning({
12
- title: 'Legacy Message component',
13
- message: "You're using the legacy Message component. Please use the new Support Message component.",
14
- });
15
- return (React.createElement(Wrapper, { className: className, type: type, backgroundColor: backgroundColor, sizeSmall: sizeSmall, hasBorder: hasBorder, borderColor: borderColor },
16
- React.createElement(IconWrapper, { alignIcon: alignIcon },
17
- React.createElement(Icon, { size: sizeSmall ? 24 : 32, render: type, color: type === 'warning' ? 'error' : 'secondary' })),
18
- children));
19
- };
20
- const IconWrapper = styled(Box) `
21
- align-self: ${({ alignIcon }) => alignIcon};
22
- `;
23
- const Wrapper = styled.div(({ type, backgroundColor, sizeSmall, hasBorder, borderColor }) => css `
24
- align-items: center;
25
- background-color: ${backgroundColor
26
- ? backgroundColor
27
- : type === 'warning'
28
- ? theme.colors.white
29
- : theme.colors.background};
30
- box-sizing: border-box;
31
- ${type === 'warning'
32
- ? `border: 1px solid ${theme.colors.error};`
33
- : hasBorder && `border: 1px solid ${borderColor};`}
34
- border-radius: 8px;
35
- margin-bottom: 24px;
36
- padding: 16px;
37
- display: flex;
38
- font-family: ${theme.font.system};
39
- color: ${type === 'warning' ? theme.colors.error : theme.colors.secondary};
40
- font-size: ${sizeSmall ? '12px' : '16px'};
41
- span {
42
- margin: 0 16px 0 0;
43
- }
44
- `);
45
- //# sourceMappingURL=Message.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Message.js","sourceRoot":"","sources":["../../src/Message/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAe1D;;GAEG;AAEH,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EACxC,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,MAAM,EACb,SAAS,GAAG,QAAQ,EACpB,eAAe,EACf,SAAS,EACT,SAAS,EACT,WAAW,GACZ,EAAE,EAAE;IACH,oBAAoB,CAAC;QACnB,KAAK,EAAE,0BAA0B;QACjC,OAAO,EACL,0FAA0F;KAC7F,CAAC,CAAA;IACF,OAAO,CACL,oBAAC,OAAO,IACN,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW;QAExB,oBAAC,WAAW,IAAC,SAAS,EAAE,SAAS;YAC/B,oBAAC,IAAI,IACH,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACzB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,GACjD,CACU;QAEb,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAA;AAcD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;gBAC7B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;CAC3C,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CACxB,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;wBAE/C,eAAe;IACjC,CAAC,CAAC,eAAe;IACjB,CAAC,CAAC,IAAI,KAAK,SAAS;QACpB,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;QACpB,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;;MAEzB,IAAI,KAAK,SAAS;IAClB,CAAC,CAAC,qBAAqB,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG;IAC5C,CAAC,CAAC,SAAS,IAAI,qBAAqB,WAAW,GAAG;;;;;mBAKrC,KAAK,CAAC,IAAI,CAAC,MAAM;aACvB,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS;iBAC5D,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;;GAIzC,CACF,CAAA"}
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import { MessageProps } from './Message';
3
- declare const _default: {
4
- title: string;
5
- component: React.FC<MessageProps>;
6
- };
7
- export default _default;
8
- export declare const Default: any;
9
- export declare const Info: any;
10
- export declare const Warning: any;
11
- export declare const WarningBubbleSmall: any;
12
- export declare const InfoBubbleSmall: any;
13
- export declare const CardWithBorder: any;
@@ -1,38 +0,0 @@
1
- import React from 'react';
2
- import { Message } from './Message';
3
- import { theme } from '../theme';
4
- export default {
5
- title: 'Message',
6
- component: Message,
7
- };
8
- const Template = (props) => (React.createElement(Message, Object.assign({}, props), "Customer currently in BACS queue"));
9
- export const Default = Template.bind({});
10
- export const Info = Template.bind({});
11
- Info.args = {
12
- type: 'info',
13
- };
14
- export const Warning = Template.bind({});
15
- Warning.args = {
16
- type: 'warning',
17
- };
18
- export const WarningBubbleSmall = Template.bind({});
19
- WarningBubbleSmall.args = {
20
- type: 'warning',
21
- backgroundColor: theme.colors.bgSecondary,
22
- sizeSmall: true,
23
- };
24
- export const InfoBubbleSmall = Template.bind({});
25
- InfoBubbleSmall.args = {
26
- type: 'info',
27
- backgroundColor: theme.colors.bgSecondary,
28
- sizeSmall: true,
29
- };
30
- export const CardWithBorder = Template.bind({});
31
- CardWithBorder.args = {
32
- type: 'card',
33
- alignIcon: 'flex-start',
34
- backgroundColor: theme.colors.white,
35
- hasBorder: true,
36
- borderColor: theme.colors.secondary,
37
- };
38
- //# sourceMappingURL=Message.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Message.stories.js","sourceRoot":"","sources":["../../src/Message/Message.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,eAAe;IACb,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,OAAO;CACnB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAmB,EAAE,EAAE,CAAC,CACxC,oBAAC,OAAO,oBAAK,KAAK,sCAA4C,CAC/D,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAErC,IAAI,CAAC,IAAI,GAAG;IACV,IAAI,EAAE,MAAM;CACb,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEnD,kBAAkB,CAAC,IAAI,GAAG;IACxB,IAAI,EAAE,SAAS;IACf,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;IACzC,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEhD,eAAe,CAAC,IAAI,GAAG;IACrB,IAAI,EAAE,MAAM;IACZ,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;IACzC,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE/C,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,YAAY;IACvB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;IACnC,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS;CACpC,CAAA"}
@@ -1 +0,0 @@
1
- export {};
@@ -1,26 +0,0 @@
1
- import React from 'react';
2
- import { render } from '@testing-library/react';
3
- import '@testing-library/jest-dom/extend-expect';
4
- import 'jest-styled-components';
5
- import { Message } from '../Message';
6
- it('default renders correctly', () => {
7
- const { container } = render(React.createElement(Message, null, "This is an infomation message for the customer!"));
8
- expect(container).toMatchSnapshot();
9
- });
10
- it('warning renders correctly', () => {
11
- const { container } = render(React.createElement(Message, { type: "warning", sizeSmall: false }, "This is a warning message for the customer!"));
12
- expect(container).toMatchSnapshot();
13
- });
14
- it('info renders correctly', () => {
15
- const { container } = render(React.createElement(Message, { type: "info" }, "This is a infomational message for the customer!"));
16
- expect(container).toMatchSnapshot();
17
- });
18
- it('icon prop render correctly', () => {
19
- const { container } = render(React.createElement(Message, { type: "warning" }, "This is a warning message for the customer!"));
20
- expect(container).toHaveTextContent('This is a warning message for the customer!');
21
- });
22
- it('warning bubble size small renders correctly', () => {
23
- const { container } = render(React.createElement(Message, { type: "warning-bubble", backgroundColor: "#FAF3EE", sizeSmall: true }, "This is a warning bubble message for the customer!"));
24
- expect(container).toHaveTextContent('This is a warning bubble message for the customer!');
25
- });
26
- //# sourceMappingURL=Message.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/Message/__tests__/Message.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,yCAAyC,CAAA;AAChD,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACnC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,OAAO,0DAA0D,CACnE,CAAA;IAED,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;AACrC,CAAC,CAAC,CAAA;AAEF,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACnC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,OAAO,IAAC,IAAI,EAAC,SAAS,EAAC,SAAS,EAAE,KAAK,kDAE9B,CACX,CAAA;IAED,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;AACrC,CAAC,CAAC,CAAA;AAEF,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;IAChC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,OAAO,IAAC,IAAI,EAAC,MAAM,uDAEV,CACX,CAAA;IAED,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;AACrC,CAAC,CAAC,CAAA;AAEF,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;IACpC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,OAAO,IAAC,IAAI,EAAC,SAAS,kDAEb,CACX,CAAA;IAED,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,CACjC,6CAA6C,CAC9C,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;IACrD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,OAAO,IAAC,IAAI,EAAC,gBAAgB,EAAC,eAAe,EAAC,SAAS,EAAC,SAAS,EAAE,IAAI,yDAE9D,CACX,CAAA;IAED,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,CACjC,oDAAoD,CACrD,CAAA;AACH,CAAC,CAAC,CAAA"}
@@ -1 +0,0 @@
1
- export * from './Message';
@@ -1,2 +0,0 @@
1
- export * from './Message';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Message/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}
@@ -1,2 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const Container: () => JSX.Element;
@@ -1,9 +0,0 @@
1
- import React, { useState } from 'react';
2
- import { RadioButton } from './RadioButton';
3
- export const Container = () => {
4
- const [checked, setChecked] = useState('');
5
- return (React.createElement("form", null,
6
- React.createElement(RadioButton, { id: "radioButtonOne", label: "What a lovely label", value: checked, onChange: () => setChecked('radioButtonOne'), checked: checked === 'radioButtonOne' }),
7
- React.createElement(RadioButton, { id: "radioButtonTwo", label: "What a lovely second label", value: checked, onChange: () => setChecked('radioButtonTwo'), checked: checked === 'radioButtonTwo' })));
8
- };
9
- //# sourceMappingURL=Container.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/RadioButton/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAE1C,OAAO,CACL;QACE,oBAAC,WAAW,IACV,EAAE,EAAC,gBAAgB,EACnB,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAC5C,OAAO,EAAE,OAAO,KAAK,gBAAgB,GACrC;QAEF,oBAAC,WAAW,IACV,EAAE,EAAC,gBAAgB,EACnB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAC5C,OAAO,EAAE,OAAO,KAAK,gBAAgB,GACrC,CACG,CACR,CAAA;AACH,CAAC,CAAA"}
@@ -1,10 +0,0 @@
1
- import { FC, ChangeEvent } from 'react';
2
- import { MarginProps } from '../utils/space';
3
- export type RadioButtonProps = {
4
- id?: string;
5
- label: string;
6
- checked?: boolean;
7
- value: string;
8
- onChange: (event: ChangeEvent<HTMLInputElement>) => void;
9
- } & MarginProps;
10
- export declare const RadioButton: FC<RadioButtonProps>;
@@ -1,68 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import React from 'react';
13
- import styled from 'styled-components';
14
- import { focusOutline } from '../utils/focusOutline';
15
- import { Box } from '../Box';
16
- import { theme } from '../theme';
17
- import { useUniqueId } from '../utils/id';
18
- import { useDeprecatedWarning } from '../utils/deprecated';
19
- export const RadioButton = (props) => {
20
- const { id: idProp, label, checked, value, onChange } = props, marginProps = __rest(props, ["id", "label", "checked", "value", "onChange"]);
21
- useDeprecatedWarning({
22
- title: 'RadioButton',
23
- message: 'The RadioButton component has been deprecated. Please use the new RadioGroup component instead.',
24
- componentProps: props,
25
- });
26
- const id = useUniqueId(idProp);
27
- return (React.createElement(Box, Object.assign({ flex: true, alignItems: "center" }, marginProps),
28
- React.createElement(RadioInput, { id: id, type: "radio", checked: checked, value: value, onChange: onChange }),
29
- React.createElement(RadioLabel, { htmlFor: id },
30
- React.createElement(FakeInput, { checked: checked }),
31
- React.createElement(Text, null, label))));
32
- };
33
- const FakeInput = styled.div `
34
- width: 24px;
35
- height: 24px;
36
- border-radius: 50%;
37
- background-color: ${theme.colors.white};
38
- margin-right: 10px;
39
- border: ${({ checked }) => checked
40
- ? `8px solid ${theme.colors.success}`
41
- : `1px solid ${theme.colors.outline}`};
42
- `;
43
- const RadioLabel = styled.label `
44
- font-family: 'Gordita', sans-serif;
45
- text-transform: none;
46
- font-size: 16px;
47
- line-height: 17px;
48
- color: ${theme.colors.secondary};
49
- margin-bottom: 0;
50
- display: flex;
51
- cursor: pointer;
52
- `;
53
- const RadioInput = styled.input `
54
- position: absolute;
55
- opacity: 0;
56
- height: 0;
57
- width: 0;
58
-
59
- ${focusOutline({
60
- selector: `&:focus-visible ~ ${RadioLabel} ${FakeInput}`,
61
- })}
62
- `;
63
- // needed because the text is top aligned in its viewbox
64
- const Text = styled.span `
65
- position: relative;
66
- bottom: -5px;
67
- `;
68
- //# sourceMappingURL=RadioButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../src/RadioButton/RadioButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAc1D,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,KAAK,EAAE,EAAE;IACzD,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,KAAqB,KAAK,EAArB,WAAW,UAAK,KAAK,EAAvE,+CAA+D,CAAQ,CAAA;IAE7E,oBAAoB,CAAC;QACnB,KAAK,EAAE,aAAa;QACpB,OAAO,EACL,iGAAiG;QACnG,cAAc,EAAE,KAAK;KACtB,CAAC,CAAA;IAEF,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAE9B,OAAO,CACL,oBAAC,GAAG,kBAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,IAAK,WAAW;QAC3C,oBAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB;QAEF,oBAAC,UAAU,IAAC,OAAO,EAAE,EAAE;YACrB,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO,GAAI;YAC/B,oBAAC,IAAI,QAAE,KAAK,CAAQ,CACT,CACT,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAY;;;;sBAIlB,KAAK,CAAC,MAAM,CAAC,KAAK;;YAE5B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CACxB,OAAO;IACL,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;IACrC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;CAC1C,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;WAKpB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;CAIhC,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;IAM3B,YAAY,CAAC;IACb,QAAQ,EAAE,qBAAqB,UAAU,IAAI,SAAS,EAAE;CACzD,CAAC;CACH,CAAA;AAED,wDAAwD;AACxD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAGvB,CAAA"}
@@ -1,15 +0,0 @@
1
- import React from 'react';
2
- import { RadioButtonProps } from './RadioButton';
3
- declare const _default: {
4
- title: string;
5
- component: React.FC<RadioButtonProps>;
6
- argTypes: {
7
- onChange: {
8
- action: string;
9
- };
10
- };
11
- };
12
- export default _default;
13
- export declare const Default: any;
14
- export declare const Checked: any;
15
- export declare const WorkingExample: any;