@mrshmllw/smores-react 2.4.0 → 2.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion/Accordion.d.ts +2 -1
- package/dist/Accordion/Accordion.js +14 -2
- package/dist/Accordion/Accordion.js.map +1 -1
- package/dist/ActionDropdown/ActionDropdown.d.ts +2 -1
- package/dist/ActionDropdown/ActionDropdown.js +19 -6
- package/dist/ActionDropdown/ActionDropdown.js.map +1 -1
- package/dist/Box/Box.d.ts +3 -3
- package/dist/Box/Box.js +3 -2
- package/dist/Box/Box.js.map +1 -1
- package/dist/Button/Button.d.ts +2 -2
- package/dist/Button/Button.js +10 -12
- package/dist/Button/Button.js.map +1 -1
- package/dist/Card/Card.d.ts +2 -1
- package/dist/Card/Card.js +17 -2
- package/dist/Card/Card.js.map +1 -1
- package/dist/CheckBoxGroup/CheckBoxGroup.d.ts +4 -3
- package/dist/CheckBoxGroup/CheckBoxGroup.js +17 -2
- package/dist/CheckBoxGroup/CheckBoxGroup.js.map +1 -1
- package/dist/CheckBoxGroup/CheckBoxGroup.stories.d.ts +1 -1
- package/dist/Chip/Chip.d.ts +2 -1
- package/dist/Chip/Chip.js +3 -2
- package/dist/Chip/Chip.js.map +1 -1
- package/dist/ConfirmationRadioButtons/Confirmation.d.ts +2 -1
- package/dist/ConfirmationRadioButtons/Confirmation.js +17 -5
- package/dist/ConfirmationRadioButtons/Confirmation.js.map +1 -1
- package/dist/Datepicker/Datepicker.d.ts +2 -2
- package/dist/Datepicker/Datepicker.js +15 -3
- package/dist/Datepicker/Datepicker.js.map +1 -1
- package/dist/Datepicker/DatesList.d.ts +0 -1
- package/dist/Datepicker/DatesList.js +4 -5
- package/dist/Datepicker/DatesList.js.map +1 -1
- package/dist/Dropdown/Dropdown.d.ts +2 -2
- package/dist/Dropdown/Dropdown.js +1 -1
- package/dist/Dropdown/Dropdown.stories.d.ts +2 -2
- package/dist/Emoji/Emoji.d.ts +2 -6
- package/dist/Emoji/Emoji.js +17 -6
- package/dist/Emoji/Emoji.js.map +1 -1
- package/dist/Field/Field.d.ts +1 -1
- package/dist/Field/Field.js +14 -3
- package/dist/Field/Field.js.map +1 -1
- package/dist/Field/types/commonFieldTypes.d.ts +2 -1
- package/dist/Fieldset/Fieldset.d.ts +4 -3
- package/dist/Fieldset/Fieldset.js +14 -2
- package/dist/Fieldset/Fieldset.js.map +1 -1
- package/dist/Icon/Icon.d.ts +2 -6
- package/dist/Icon/Icon.js +819 -808
- package/dist/Icon/Icon.js.map +1 -1
- package/dist/IconWrapper/IconWrapper.d.ts +2 -1
- package/dist/IconWrapper/IconWrapper.js +21 -6
- package/dist/IconWrapper/IconWrapper.js.map +1 -1
- package/dist/LabelledText/LabelledText.d.ts +2 -1
- package/dist/LabelledText/LabelledText.js +19 -4
- package/dist/LabelledText/LabelledText.js.map +1 -1
- package/dist/NumberInput/NumberInput.d.ts +17 -30
- package/dist/NumberInput/NumberInput.js +84 -62
- package/dist/NumberInput/NumberInput.js.map +1 -1
- package/dist/NumberInput/NumberInput.stories.d.ts +1 -1
- package/dist/Pagination/Pagination.d.ts +2 -1
- package/dist/Pagination/Pagination.js +14 -2
- package/dist/Pagination/Pagination.js.map +1 -1
- package/dist/RadioButton/RadioButton.d.ts +2 -1
- package/dist/RadioButton/RadioButton.js +14 -2
- package/dist/RadioButton/RadioButton.js.map +1 -1
- package/dist/Row/Row.d.ts +2 -1
- package/dist/Row/Row.js +15 -3
- package/dist/Row/Row.js.map +1 -1
- package/dist/SearchInput/SearchInput.d.ts +0 -1
- package/dist/SearchInput/SearchInput.js +15 -3
- package/dist/SearchInput/SearchInput.js.map +1 -1
- package/dist/SupportMessage/Collection.js +44 -29
- package/dist/SupportMessage/Collection.js.map +1 -1
- package/dist/SupportMessage/SupportMessage.d.ts +2 -1
- package/dist/SupportMessage/SupportMessage.js +27 -12
- package/dist/SupportMessage/SupportMessage.js.map +1 -1
- package/dist/Tag/Tag.d.ts +2 -1
- package/dist/Tag/Tag.js +18 -3
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Text/Text.d.ts +2 -1
- package/dist/Text/Text.js +2 -1
- package/dist/Text/Text.js.map +1 -1
- package/dist/TextInput/TextInput.js +17 -3
- package/dist/TextInput/TextInput.js.map +1 -1
- package/dist/Textarea/Textarea.d.ts +3 -5
- package/dist/Textarea/Textarea.js +1 -1
- package/dist/Textarea/Textarea.js.map +1 -1
- package/dist/Toggle/Toggle.d.ts +2 -1
- package/dist/Toggle/Toggle.js +16 -3
- package/dist/Toggle/Toggle.js.map +1 -1
- package/dist/Toggle/Toggle.stories.d.ts +1 -1
- package/dist/utils/space.d.ts +4 -4
- package/dist/utils/space.js +7 -2
- package/dist/utils/space.js.map +1 -1
- package/package.json +1 -1
- package/dist/CheckBoxGroup/CheckBox.d.ts +0 -9
- package/dist/CheckBoxGroup/CheckBox.js +0 -67
- package/dist/CheckBoxGroup/CheckBox.js.map +0 -1
@@ -1,10 +1,11 @@
|
|
1
1
|
import { FC, ReactElement } from 'react';
|
2
|
+
import { MarginProps } from '../utils/space';
|
2
3
|
declare type SupportMessageType = 'info' | 'info-outline' | 'alert' | 'warning';
|
3
4
|
export declare type SupportMessageProps = {
|
4
5
|
className?: string;
|
5
6
|
description: string | ReactElement;
|
6
7
|
type: SupportMessageType;
|
7
8
|
title?: string;
|
8
|
-
};
|
9
|
+
} & MarginProps;
|
9
10
|
export declare const SupportMessage: FC<SupportMessageProps>;
|
10
11
|
export {};
|
@@ -1,8 +1,20 @@
|
|
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
|
+
};
|
1
12
|
import React from 'react';
|
2
13
|
import styled, { css } from 'styled-components';
|
3
14
|
import { lighten } from 'polished';
|
4
15
|
import { Box } from '../Box';
|
5
16
|
import { Icon } from '../Icon';
|
17
|
+
import { Text } from '../Text';
|
6
18
|
import { theme } from '../theme';
|
7
19
|
const styles = {
|
8
20
|
info: {
|
@@ -26,16 +38,19 @@ const styles = {
|
|
26
38
|
icon: 'warning',
|
27
39
|
},
|
28
40
|
};
|
29
|
-
export const SupportMessage = (
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
41
|
+
export const SupportMessage = (_a) => {
|
42
|
+
var { className, description, type = 'info', title } = _a, marginProps = __rest(_a, ["className", "description", "type", "title"]);
|
43
|
+
return (React.createElement(Wrapper, Object.assign({ className: className, type: type }, marginProps),
|
44
|
+
React.createElement(IconWrapper, null,
|
45
|
+
React.createElement(Icon, { size: 24, render: styles[type].icon, color: styles[type].iconColor })),
|
46
|
+
React.createElement(Box, { flex: true, direction: "column", ml: "16px" },
|
47
|
+
title && React.createElement(Title, null, title),
|
48
|
+
React.createElement(Description, { tag: "p", typo: "base" }, description))));
|
49
|
+
};
|
35
50
|
const IconWrapper = styled(Box) `
|
36
51
|
align-self: flex-start;
|
37
52
|
`;
|
38
|
-
const Wrapper = styled
|
53
|
+
const Wrapper = styled(Box)(({ type }) => css `
|
39
54
|
align-items: center;
|
40
55
|
background-color: ${styles[type].backgroundColor};
|
41
56
|
${type === 'info-outline' && `border: 1px solid ${theme.colors.secondary}`};
|
@@ -44,11 +59,6 @@ const Wrapper = styled.div(({ type }) => css `
|
|
44
59
|
display: flex;
|
45
60
|
width: 100%;
|
46
61
|
`);
|
47
|
-
const ContentBox = styled(Box) `
|
48
|
-
margin-left: 16px;
|
49
|
-
color: ${theme.colors.secondary};
|
50
|
-
font-size: 14px;
|
51
|
-
`;
|
52
62
|
const Title = styled.p `
|
53
63
|
font-size: 16px;
|
54
64
|
font-weight: ${theme.font.weight.medium};
|
@@ -56,4 +66,9 @@ const Title = styled.p `
|
|
56
66
|
line-height: 20.8px;
|
57
67
|
margin-bottom: 4px;
|
58
68
|
`;
|
69
|
+
const Description = styled(Text) `
|
70
|
+
color: ${theme.colors.secondary};
|
71
|
+
font-size: 14px;
|
72
|
+
line-height: 20px;
|
73
|
+
`;
|
59
74
|
//# sourceMappingURL=SupportMessage.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAC/C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAS,MAAM,UAAU,CAAA;
|
1
|
+
{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAC/C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAS,MAAM,UAAU,CAAA;AASvC,MAAM,MAAM,GAA2C;IACrD,IAAI,EAAE;QACJ,SAAS,EAAE,WAAW;QACtB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;QACxC,IAAI,EAAE,MAAM;KACb;IACD,cAAc,EAAE;QACd,SAAS,EAAE,WAAW;QACtB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACnC,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,SAAS,EAAE,cAAc;QACzB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;QACzC,IAAI,EAAE,OAAO;KACd;IACD,OAAO,EAAE;QACP,SAAS,EAAE,OAAO;QAClB,eAAe,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAClD,IAAI,EAAE,SAAS;KAChB;CACF,CAAA;AAWD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAMvD,EAAE,EAAE;QANmD,EACtD,SAAS,EACT,WAAW,EACX,IAAI,GAAG,MAAM,EACb,KAAK,OAEN,EADI,WAAW,cALwC,6CAMvD,CADe;IACV,OAAA,CACJ,oBAAC,OAAO,kBAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,IAAM,WAAW;QACxD,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,EACzB,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,GAC7B,CACU;QACd,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAC,MAAM;YACnC,KAAK,IAAI,oBAAC,KAAK,QAAE,KAAK,CAAS;YAChC,oBAAC,WAAW,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,IAC7B,WAAW,CACA,CACV,CACE,CACX,CAAA;CAAA,CAAA;AAMD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE9B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CACzB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;wBAEK,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe;MAC9C,IAAI,KAAK,cAAc,IAAI,qBAAqB,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;;;;;GAK3E,CACF,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAA;;iBAEL,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;WAC9B,KAAK,CAAC,MAAM,CAAC,SAAS;;;CAGhC,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;WACrB,KAAK,CAAC,MAAM,CAAC,SAAS;;;CAGhC,CAAA"}
|
package/dist/Tag/Tag.d.ts
CHANGED
@@ -1,11 +1,12 @@
|
|
1
1
|
import { FC } from 'react';
|
2
|
+
import { MarginProps } from '../utils/space';
|
2
3
|
import { Color } from '../theme';
|
3
4
|
export declare type DefaultProps = {
|
4
5
|
label: string;
|
5
6
|
className?: string;
|
6
7
|
color: Color;
|
7
8
|
typo?: string;
|
8
|
-
};
|
9
|
+
} & MarginProps;
|
9
10
|
declare type GradientProps = {
|
10
11
|
bgColor: Color;
|
11
12
|
borderColor: Color;
|
package/dist/Tag/Tag.js
CHANGED
@@ -1,10 +1,25 @@
|
|
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
|
+
};
|
1
12
|
import React from 'react';
|
2
13
|
import styled from 'styled-components';
|
3
14
|
import { Text } from '../Text';
|
4
15
|
import { theme } from '../theme';
|
5
|
-
|
6
|
-
|
7
|
-
|
16
|
+
import { Box } from '../Box';
|
17
|
+
export const Tag = (_a) => {
|
18
|
+
var { label, color, borderColor, bgColor, className, typo, bgGradient = false } = _a, marginProps = __rest(_a, ["label", "color", "borderColor", "bgColor", "className", "typo", "bgGradient"]);
|
19
|
+
return (React.createElement(Wrapper, Object.assign({ bgColor: bgColor, className: className, borderColor: borderColor, bgGradient: bgGradient }, marginProps),
|
20
|
+
React.createElement(TagText, { tag: "span", typo: typo !== null && typo !== void 0 ? typo : 'label', color: color }, label)));
|
21
|
+
};
|
22
|
+
const Wrapper = styled(Box) `
|
8
23
|
background-color: ${({ bgColor }) => bgColor && theme.colors[bgColor]};
|
9
24
|
background: ${({ bgGradient }) => bgGradient &&
|
10
25
|
`linear-gradient(90deg, rgba(247, 46, 73, 1) 0%, rgba(246, 148, 210, 1) 100%)`};
|
package/dist/Tag/Tag.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAGtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAyB5B,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EASjC,EAAE,EAAE;QAT6B,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,UAAU,GAAG,KAAK,OAEnB,EADI,WAAW,cARkB,+EASjC,CADe;IACV,OAAA,CACJ,oBAAC,OAAO,kBACN,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,IAClB,WAAW;QAEf,oBAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,OAAO,EAAE,KAAK,EAAE,KAAK,IACpD,KAAK,CACE,CACF,CACX,CAAA;CAAA,CAAA;AAID,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;sBACnB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;gBACvD,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAC/B,UAAU;IACV,8EAA8E;;YAEtE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAC5B,WAAW,IAAI,aAAa,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE;;;;;CAK1D,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAK3B,CAAA"}
|
package/dist/Text/Text.d.ts
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
import { FC, LabelHTMLAttributes, ReactNode } from 'react';
|
2
2
|
import { Color } from '../theme';
|
3
|
+
import { MarginProps } from '../utils/space';
|
3
4
|
declare type Props = {
|
4
5
|
children: ReactNode;
|
5
6
|
tag: any;
|
@@ -9,7 +10,7 @@ declare type Props = {
|
|
9
10
|
color?: Color;
|
10
11
|
cursor?: string;
|
11
12
|
title?: string;
|
12
|
-
};
|
13
|
+
} & MarginProps;
|
13
14
|
export declare type TextProps = Props & Omit<LabelHTMLAttributes<HTMLElement>, 'color'>;
|
14
15
|
export declare const Text: FC<TextProps>;
|
15
16
|
export {};
|
package/dist/Text/Text.js
CHANGED
@@ -13,12 +13,13 @@ import React, { forwardRef } from 'react';
|
|
13
13
|
import styled, { css } from 'styled-components';
|
14
14
|
import { theme } from '../theme';
|
15
15
|
import { linkStyleOverride } from '../Link/Link';
|
16
|
+
import { Box } from '../Box';
|
16
17
|
export const Text = forwardRef((_a, ref) => {
|
17
18
|
var { children, typo, className = '', tag = 'p', align = 'left', color = 'secondary', cursor = 'inherit', title = '' } = _a, props = __rest(_a, ["children", "typo", "className", "tag", "align", "color", "cursor", "title"]);
|
18
19
|
return (React.createElement(Container, Object.assign({ as: tag, className: className, typo: typo || 'base', align: align, color: color, cursor: cursor, title: title }, props, { ref: ref }), children));
|
19
20
|
});
|
20
21
|
Text.displayName = 'Text';
|
21
|
-
const Container = styled
|
22
|
+
const Container = styled(Box)(({ align, color, cursor, typo }) => css `
|
22
23
|
/** PREDEFINED TYPOGRAPHY STYLES */
|
23
24
|
|
24
25
|
/* Header Large */
|
package/dist/Text/Text.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAA;AAC7E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAA;AAC7E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AA4B5B,MAAM,CAAC,MAAM,IAAI,GAAkB,UAAU,CAC3C,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,EAAE,EACd,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,MAAM,EACd,KAAK,GAAG,WAAW,EACnB,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,OAEX,EADI,KAAK,cATV,6EAUC,CADS;IAGP,OAAA,CACH,oBAAC,SAAS,kBACR,EAAE,EAAE,GAAG,EACP,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,IAAI,MAAM,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,IACR,KAAK,IACT,GAAG,EAAE,GAAG,KAEP,QAAQ,CACC,CACb,CAAA;CAAA,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;MAInC,IAAI,KAAK,cAAc;IACzB,GAAG,CAAA;;;;;;;;;KASF;;;IAGD,IAAI,KAAK,eAAe;IACxB,GAAG,CAAA;;;;;;;;;KASF;;;IAGD,IAAI,KAAK,cAAc;IACvB,GAAG,CAAA;;;;;;;;;KASF;;;IAGD,IAAI,KAAK,YAAY;IACrB,GAAG,CAAA;;;;;;;;;KASF;;;IAGD,IAAI,KAAK,aAAa;IACtB,GAAG,CAAA;;;;;;;;;KASF;;;IAGD,IAAI,KAAK,YAAY;IACrB,GAAG,CAAA;;;;;;;;;KASF;;;IAGD,IAAI,KAAK,YAAY;IACrB,GAAG,CAAA;;;;;;;;;KASF;;;IAGD,IAAI,KAAK,MAAM;IACf,GAAG,CAAA;;;;;;;;;KASF;;;IAGD,IAAI,KAAK,YAAY;IACrB,GAAG,CAAA;;;;;;;;;KASF;;;IAGD,IAAI,KAAK,aAAa;IACtB,GAAG,CAAA;;;;;;;;;KASF;;;IAGD,IAAI,KAAK,OAAO;IAChB,GAAG,CAAA;;;;;;;;;;KAUF;;;IAGD,IAAI,KAAK,aAAa;IACtB,GAAG,CAAA;;;;;;KAMF;;;;kBAIa,KAAK;cACT,MAAM;;aAEP,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;MAC1B,iBAAiB,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;GACpD,CACF,CAAA"}
|
@@ -14,18 +14,21 @@ import styled from 'styled-components';
|
|
14
14
|
import { darken } from 'polished';
|
15
15
|
import { theme } from '../theme';
|
16
16
|
import { Field } from '../Field';
|
17
|
+
import { Box } from '../Box';
|
18
|
+
import { Icon } from '../Icon';
|
17
19
|
import { useUniqueId } from '../utils/id';
|
18
20
|
export const TextInput = forwardRef(function TextInput(_a, ref) {
|
19
|
-
var { id: idProp, type = 'text', placeholder, name, value, outlined = false, error = false, onBlur, onChange, onInputChange, disabled = false } = _a, fieldProps = __rest(_a, ["id", "type", "placeholder", "name", "value", "outlined", "error", "onBlur", "onChange", "onInputChange", "disabled"]);
|
21
|
+
var { id: idProp, type = 'text', placeholder, name, value, outlined = false, error = false, onBlur, onChange, onInputChange, disabled = false, trailingIcon } = _a, fieldProps = __rest(_a, ["id", "type", "placeholder", "name", "value", "outlined", "error", "onBlur", "onChange", "onInputChange", "disabled", "trailingIcon"]);
|
20
22
|
const id = useUniqueId(idProp);
|
21
23
|
return (React.createElement(Field, Object.assign({}, fieldProps, { id: id, error: error, outlined: outlined, value: value }),
|
22
|
-
React.createElement(
|
24
|
+
React.createElement(Box, { flex: true },
|
23
25
|
React.createElement(StyledInput, { disabled: disabled, type: type, id: id, name: name, ref: ref, placeholder: placeholder, value: value, error: error, outlined: outlined, autoComplete: "off", onChange: (e) => {
|
24
26
|
onChange && onChange(e.currentTarget.value);
|
25
27
|
onInputChange && onInputChange(e);
|
26
28
|
}, onBlur: (e) => {
|
27
29
|
onBlur && onBlur(e);
|
28
|
-
} })
|
30
|
+
} }),
|
31
|
+
trailingIcon && React.createElement(StyledIcon, { render: trailingIcon, color: "subtext" }))));
|
29
32
|
});
|
30
33
|
const StyledInput = styled.input `
|
31
34
|
border: none;
|
@@ -50,12 +53,19 @@ const StyledInput = styled.input `
|
|
50
53
|
border-radius: 8px;
|
51
54
|
height: auto;
|
52
55
|
`}
|
56
|
+
|
53
57
|
${({ value }) => value &&
|
54
58
|
value != '' &&
|
55
59
|
`
|
56
60
|
border-color: ${theme.colors.outline};
|
57
61
|
`}
|
58
62
|
|
63
|
+
${({ trailingIcon }) => trailingIcon &&
|
64
|
+
trailingIcon != '' &&
|
65
|
+
`
|
66
|
+
padding-right: 24px;
|
67
|
+
`}
|
68
|
+
|
59
69
|
${({ outlined }) => outlined &&
|
60
70
|
`
|
61
71
|
border-radius: 8px;
|
@@ -66,4 +76,8 @@ const StyledInput = styled.input `
|
|
66
76
|
color: ${theme.colors.subtext};
|
67
77
|
}
|
68
78
|
`;
|
79
|
+
const StyledIcon = styled(Icon) `
|
80
|
+
position: relative;
|
81
|
+
left: -24px;
|
82
|
+
`;
|
69
83
|
//# sourceMappingURL=TextInput.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAa,UAAU,EAAgB,MAAM,OAAO,CAAA;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,KAAK,EAAoB,MAAM,UAAU,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AA2BzC,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,SAAS,CACpD,
|
1
|
+
{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import React, { FormEvent } from 'react';
|
2
|
+
import { CommonFieldTypes } from '../Field';
|
3
|
+
import { MarginProps } from '../utils/space';
|
2
4
|
declare type BaseProps = {
|
3
5
|
id?: string;
|
4
|
-
className?: string;
|
5
6
|
placeholder?: string;
|
6
|
-
label?: string;
|
7
7
|
name?: string;
|
8
8
|
value: string;
|
9
9
|
error?: boolean;
|
@@ -13,9 +13,7 @@ declare type BaseProps = {
|
|
13
13
|
maxLength?: number;
|
14
14
|
onBlur?: (e: FormEvent<HTMLTextAreaElement>) => void;
|
15
15
|
rows?: number;
|
16
|
-
|
17
|
-
renderAsTitle?: boolean;
|
18
|
-
};
|
16
|
+
} & CommonFieldTypes & MarginProps;
|
19
17
|
declare type TruncateProps = {
|
20
18
|
onChange: (e: string) => void;
|
21
19
|
onInputChange?: (e: FormEvent<HTMLTextAreaElement>) => void;
|
@@ -19,7 +19,7 @@ export const Textarea = forwardRef(function Textarea(_a, ref) {
|
|
19
19
|
var { id: idProp, name, value, onChange, onInputChange, resize = 'none', error = false, placeholder, disabled = false, maxLength, onBlur, rows = 4 } = _a, fieldProps = __rest(_a, ["id", "name", "value", "onChange", "onInputChange", "resize", "error", "placeholder", "disabled", "maxLength", "onBlur", "rows"]);
|
20
20
|
const id = useUniqueId(idProp);
|
21
21
|
return (React.createElement(Field, Object.assign({}, fieldProps, { id: id, error: error, value: value, fullHeight: true }),
|
22
|
-
React.createElement(StyledTextArea, { error: error, id: id, name: name, disabled: disabled, resize: resize, placeholder: placeholder, value: value, onChange: (e) => {
|
22
|
+
React.createElement(StyledTextArea, { ref: ref, error: error, id: id, name: name, disabled: disabled, resize: resize, placeholder: placeholder, value: value, onChange: (e) => {
|
23
23
|
onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.value);
|
24
24
|
onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
|
25
25
|
}, maxLength: maxLength, onBlur: onBlur, rows: rows })));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAA2B,UAAU,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAA2B,UAAU,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAoB,KAAK,EAAE,MAAM,UAAU,CAAA;AA8BlD,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EAcgB,EAChB,GAAsC;QAftC,EACE,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,GAAG,MAAM,EACf,KAAK,GAAG,KAAK,EACb,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,EACN,IAAI,GAAG,CAAC,OAEM,EADX,UAAU,cAbf,iIAcC,CADc;IAIf,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,oBAAC,KAAK,oBAAK,UAAU,IAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU;QACnE,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;gBAC9C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;gBACjC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,CAAC,CAAC,CAAA;YACpB,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,GACV,CACI,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AASF,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAU;;;gBAGhC,KAAK,CAAC,MAAM,CAAC,KAAK;sBACZ,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;WAK/B,KAAK,CAAC,MAAM,CAAC,SAAS;YACrB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;YACtB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;aACpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;kBACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;;;;;;oBAM9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;IAGhE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,KAAK;IACL,KAAK,IAAI,EAAE;IACX;sBACkB,KAAK,CAAC,MAAM,CAAC,OAAO;KACrC;CACJ,CAAA"}
|
package/dist/Toggle/Toggle.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import { FC } from 'react';
|
2
|
+
import { MarginProps } from '../utils/space';
|
2
3
|
declare type Props = {
|
3
4
|
/** unique ID */
|
4
5
|
id?: string;
|
@@ -6,6 +7,6 @@ declare type Props = {
|
|
6
7
|
checked: boolean;
|
7
8
|
/** onToggle listener */
|
8
9
|
onToggle: () => void;
|
9
|
-
};
|
10
|
+
} & MarginProps;
|
10
11
|
export declare const Toggle: FC<Props>;
|
11
12
|
export {};
|
package/dist/Toggle/Toggle.js
CHANGED
@@ -1,13 +1,26 @@
|
|
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
|
+
};
|
1
12
|
import React from 'react';
|
2
13
|
import styled from 'styled-components';
|
3
14
|
import { focusOutline } from '../utils/focusOutline';
|
4
15
|
import { theme } from '../theme';
|
5
|
-
|
6
|
-
|
16
|
+
import { Box } from '../Box';
|
17
|
+
export const Toggle = (_a) => {
|
18
|
+
var { id, checked, onToggle } = _a, marginProps = __rest(_a, ["id", "checked", "onToggle"]);
|
19
|
+
return (React.createElement(Switch, Object.assign({ as: "label", id: id }, marginProps),
|
7
20
|
React.createElement(Checkbox, { type: "checkbox", checked: checked, onChange: onToggle }),
|
8
21
|
React.createElement(Slider, null)));
|
9
22
|
};
|
10
|
-
const Switch = styled
|
23
|
+
const Switch = styled(Box) `
|
11
24
|
position: relative;
|
12
25
|
display: inline-block;
|
13
26
|
width: 50px;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;
|
1
|
+
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAW5B,MAAM,CAAC,MAAM,MAAM,GAAc,CAAC,EAKjC,EAAE,EAAE;QAL6B,EAChC,EAAE,EACF,OAAO,EACP,QAAQ,OAET,EADI,WAAW,cAJkB,6BAKjC,CADe;IAEd,OAAO,CACL,oBAAC,MAAM,kBAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,IAAM,WAAW;QACxC,oBAAC,QAAQ,IAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI;QAClE,oBAAC,MAAM,OAAG,CACH,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAWzB,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;sBAOJ,KAAK,CAAC,MAAM,CAAC,SAAS;;kBAE1B,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;;;;;;wBAYhB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;CAIzC,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAA;IACzB,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,MAAM,EAAE,EAAE,CAAC;;gBAE7C,MAAM;wBACE,KAAK,CAAC,MAAM,CAAC,OAAO;;oBAExB,KAAK,CAAC,MAAM,CAAC,OAAO;;;gBAGxB,MAAM;;;CAGrB,CAAA"}
|
package/dist/utils/space.d.ts
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
declare type Spacing = '8px' | '12px' | '16px' | '24px' | '32px' | '48px' | '64px';
|
2
|
-
declare type SpacingProp = Spacing | {
|
2
|
+
declare type SpacingProp = '0' | Spacing | {
|
3
3
|
custom: number | string;
|
4
4
|
};
|
5
5
|
export interface MarginProps {
|
6
6
|
m?: SpacingProp;
|
7
|
-
mx?: SpacingProp;
|
7
|
+
mx?: SpacingProp | 'auto';
|
8
8
|
my?: SpacingProp;
|
9
9
|
ml?: SpacingProp;
|
10
10
|
mr?: SpacingProp;
|
@@ -20,6 +20,6 @@ export interface PaddingProps {
|
|
20
20
|
pt?: SpacingProp;
|
21
21
|
pb?: SpacingProp;
|
22
22
|
}
|
23
|
-
export declare
|
24
|
-
export declare const
|
23
|
+
export declare const margin: (props: MarginProps) => string;
|
24
|
+
export declare const padding: (props: PaddingProps) => string;
|
25
25
|
export {};
|
package/dist/utils/space.js
CHANGED
@@ -7,8 +7,8 @@ const resolveSpacing = (value) => {
|
|
7
7
|
}
|
8
8
|
return `${value.custom}px`;
|
9
9
|
};
|
10
|
-
export const
|
11
|
-
const { m, mx, my, ml, mr, mt, mb
|
10
|
+
export const margin = (props) => {
|
11
|
+
const { m, mx, my, ml, mr, mt, mb } = props;
|
12
12
|
return `
|
13
13
|
${m ? `margin: ${resolveSpacing(m)};` : ''}
|
14
14
|
${mx
|
@@ -27,6 +27,11 @@ export const space = (props) => {
|
|
27
27
|
${mr ? `margin-right: ${resolveSpacing(mr)};` : ''}
|
28
28
|
${mt ? `margin-top: ${resolveSpacing(mt)};` : ''}
|
29
29
|
${mb ? `margin-bottom: ${resolveSpacing(mb)};` : ''}
|
30
|
+
`;
|
31
|
+
};
|
32
|
+
export const padding = (props) => {
|
33
|
+
const { p, px, py, pl, pr, pt, pb } = props;
|
34
|
+
return `
|
30
35
|
${p ? `padding: ${resolveSpacing(p)};` : ''}
|
31
36
|
${px
|
32
37
|
? `
|
package/dist/utils/space.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"space.js","sourceRoot":"","sources":["../../src/utils/space.tsx"],"names":[],"mappings":"AAIA,MAAM,cAAc,GAAG,CAAC,
|
1
|
+
{"version":3,"file":"space.js","sourceRoot":"","sources":["../../src/utils/space.tsx"],"names":[],"mappings":"AAIA,MAAM,cAAc,GAAG,CAAC,KAA2B,EAAE,EAAE;IACrD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAA;KACb;IAED,IAAI,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ,EAAE;QACpC,OAAO,KAAK,CAAC,MAAM,CAAA;KACpB;IAED,OAAO,GAAG,KAAK,CAAC,MAAM,IAAI,CAAA;AAC5B,CAAC,CAAA;AAsBD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAU,EAAE;IACnD,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,KAAK,CAAA;IAE3C,OAAO;MACH,CAAC,CAAC,CAAC,CAAC,WAAW,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAExC,EAAE;QACA,CAAC,CAAC;qBACW,cAAc,CAAC,EAAE,CAAC;sBACjB,cAAc,CAAC,EAAE,CAAC;KACnC;QACG,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC;oBACU,cAAc,CAAC,EAAE,CAAC;uBACf,cAAc,CAAC,EAAE,CAAC;KACpC;QACG,CAAC,CAAC,EACN;MACE,EAAE,CAAC,CAAC,CAAC,gBAAgB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAC/C,EAAE,CAAC,CAAC,CAAC,iBAAiB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAChD,EAAE,CAAC,CAAC,CAAC,eAAe,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAC9C,EAAE,CAAC,CAAC,CAAC,kBAAkB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;GACpD,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAU,EAAE;IACrD,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,KAAK,CAAA;IAE3C,OAAO;MACH,CAAC,CAAC,CAAC,CAAC,YAAY,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAEzC,EAAE;QACA,CAAC,CAAC;sBACY,cAAc,CAAC,EAAE,CAAC;uBACjB,cAAc,CAAC,EAAE,CAAC;KACpC;QACG,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC;qBACW,cAAc,CAAC,EAAE,CAAC;wBACf,cAAc,CAAC,EAAE,CAAC;KACrC;QACG,CAAC,CAAC,EACN;MACE,EAAE,CAAC,CAAC,CAAC,iBAAiB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAChD,EAAE,CAAC,CAAC,CAAC,kBAAkB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MACjD,EAAE,CAAC,CAAC,CAAC,gBAAgB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAC/C,EAAE,CAAC,CAAC,CAAC,mBAAmB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;GACrD,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
@@ -1,67 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import styled from 'styled-components';
|
3
|
-
import { Text } from '../Text';
|
4
|
-
import { theme } from '../theme';
|
5
|
-
export const CheckBox = ({ id, checked, children, toggle }) => (React.createElement(BoxContainer, { id: id },
|
6
|
-
React.createElement(Text, { tag: "span", typo: "base" }, children),
|
7
|
-
React.createElement("input", { type: "checkbox", checked: checked, onChange: toggle }),
|
8
|
-
React.createElement(Checkmark, null)));
|
9
|
-
const Checkmark = styled.span `
|
10
|
-
position: absolute;
|
11
|
-
left: 0;
|
12
|
-
width: 24px;
|
13
|
-
height: 24px;
|
14
|
-
border: solid 1px ${theme.colors.secondary};
|
15
|
-
box-sizing: border-box;
|
16
|
-
border-radius: 1px;
|
17
|
-
|
18
|
-
&:after {
|
19
|
-
content: '';
|
20
|
-
position: absolute;
|
21
|
-
display: none;
|
22
|
-
top: 3px;
|
23
|
-
left: 7px;
|
24
|
-
width: 5px;
|
25
|
-
height: 12px;
|
26
|
-
border: solid white;
|
27
|
-
border-width: 0 2px 2px 0;
|
28
|
-
-webkit-transform: rotate(45deg);
|
29
|
-
-ms-transform: rotate(45deg);
|
30
|
-
transform: rotate(45deg);
|
31
|
-
}
|
32
|
-
`;
|
33
|
-
const BoxContainer = styled.label `
|
34
|
-
position: relative;
|
35
|
-
display: flex;
|
36
|
-
align-items: flex-start;
|
37
|
-
padding-left: 32px;
|
38
|
-
user-select: none;
|
39
|
-
cursor: pointer;
|
40
|
-
|
41
|
-
input {
|
42
|
-
position: absolute;
|
43
|
-
opacity: 0;
|
44
|
-
cursor: pointer;
|
45
|
-
|
46
|
-
&:checked ~ ${Checkmark} {
|
47
|
-
background-color: ${theme.colors.secondary};
|
48
|
-
border: solid 1px ${theme.colors.secondary};
|
49
|
-
}
|
50
|
-
|
51
|
-
&:checked ~ ${Checkmark}:after {
|
52
|
-
display: block;
|
53
|
-
}
|
54
|
-
}
|
55
|
-
|
56
|
-
&:hover {
|
57
|
-
${Checkmark} {
|
58
|
-
background-color: ${theme.colors.background};
|
59
|
-
border: solid 1px ${theme.colors.secondary};
|
60
|
-
}
|
61
|
-
}
|
62
|
-
|
63
|
-
@media (min-width: 768px) {
|
64
|
-
padding-left: 32px;
|
65
|
-
}
|
66
|
-
`;
|
67
|
-
//# sourceMappingURL=CheckBox.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../src/CheckBoxGroup/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAShC,MAAM,CAAC,MAAM,QAAQ,GAAc,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACxE,oBAAC,YAAY,IAAC,EAAE,EAAE,EAAE;IAClB,oBAAC,IAAI,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IACzB,QAAQ,CACJ;IAEP,+BAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAI;IAC7D,oBAAC,SAAS,OAAG,CACA,CAChB,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;sBAKP,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;CAkB3C,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;;;;;kBAaf,SAAS;0BACD,KAAK,CAAC,MAAM,CAAC,SAAS;0BACtB,KAAK,CAAC,MAAM,CAAC,SAAS;;;kBAG9B,SAAS;;;;;;MAMrB,SAAS;0BACW,KAAK,CAAC,MAAM,CAAC,UAAU;0BACvB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;CAO/C,CAAA"}
|