@mrshmllw/smores-react 2.4.2 → 2.4.5
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/README.md +4 -4
- package/dist/Accordion/Accordion.js +1 -1
- package/dist/CheckBoxGroup/CheckBox.d.ts +9 -0
- package/dist/CheckBoxGroup/CheckBox.js +67 -0
- package/dist/CheckBoxGroup/CheckBox.js.map +1 -0
- package/dist/ConfirmationRadioButtons/Confirmation.js +3 -3
- package/dist/ConfirmationRadioButtons/Confirmation.js.map +1 -1
- package/dist/Datepicker/DatesList.js +2 -2
- package/dist/Datepicker/DatesList.js.map +1 -1
- package/dist/Field/Field.js +5 -3
- package/dist/Field/Field.js.map +1 -1
- package/dist/NumberInput/NumberInput.d.ts +18 -32
- package/dist/NumberInput/NumberInput.js +73 -63
- package/dist/NumberInput/NumberInput.js.map +1 -1
- package/dist/NumberInput/NumberInput.stories.d.ts +1 -1
- package/dist/SupportMessage/Collection.js +44 -29
- package/dist/SupportMessage/Collection.js.map +1 -1
- package/dist/SupportMessage/SupportMessage.js +9 -10
- package/dist/SupportMessage/SupportMessage.js.map +1 -1
- package/dist/TextInput/TextInput.js +2 -1
- package/dist/TextInput/TextInput.js.map +1 -1
- package/dist/Textarea/Textarea.stories.d.ts +1 -0
- package/dist/Textarea/Textarea.stories.js +11 -0
- package/dist/Textarea/Textarea.stories.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/utils/space.d.ts +2 -2
- package/dist/utils/space.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -35,10 +35,10 @@ $ npm install @mrshmllw/smores-react
|
|
|
35
35
|
|
|
36
36
|
Before starting, make sure that `CHANGELOG.md` is updated according to [keepachangelog.com](https://keepachangelog.com/en/1.0.0/) with the latest release notes. If not, make a PR updating it before continuing.
|
|
37
37
|
|
|
38
|
-
1. Checkout a new branch from the `
|
|
38
|
+
1. Checkout a new branch from the `main` branch, update Changelog and _bump_ the project version.
|
|
39
39
|
|
|
40
40
|
```
|
|
41
|
-
git checkout
|
|
41
|
+
git checkout main
|
|
42
42
|
git pull
|
|
43
43
|
git checkout -b [branch_name]
|
|
44
44
|
```
|
|
@@ -49,10 +49,10 @@ git checkout -b [branch_name]
|
|
|
49
49
|
npm version [major | minor | patch]
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
-
3. When merged, go the the `
|
|
52
|
+
3. When merged, go the the `main` branch, pull and push the new tag to `origin`
|
|
53
53
|
|
|
54
54
|
```
|
|
55
|
-
git checkout
|
|
55
|
+
git checkout main
|
|
56
56
|
git pull
|
|
57
57
|
git push origin --tags
|
|
58
58
|
```
|
|
@@ -0,0 +1,67 @@
|
|
|
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: center;
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -71,9 +71,8 @@ const ErrorBox = styled.span `
|
|
|
71
71
|
color: ${theme.colors.error};
|
|
72
72
|
`;
|
|
73
73
|
const ConfirmationWrapper = styled(Box) `
|
|
74
|
-
display:
|
|
75
|
-
|
|
76
|
-
align-items: center;
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-direction: column;
|
|
77
76
|
`;
|
|
78
77
|
const SectionHeadingText = styled(Text) `
|
|
79
78
|
font-weight: bold;
|
|
@@ -81,6 +80,7 @@ const SectionHeadingText = styled(Text) `
|
|
|
81
80
|
const TextWrapper = styled.div `
|
|
82
81
|
display: flex;
|
|
83
82
|
flex-direction: column;
|
|
83
|
+
margin-bottom: 8px;
|
|
84
84
|
`;
|
|
85
85
|
const Asterisk = styled.span `
|
|
86
86
|
font-size: 14px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,11 +6,11 @@ const getBlankDaysCount = (firstDayOfTheMonth) => {
|
|
|
6
6
|
const dayOfTheWeek = getISODay(firstDayOfTheMonth);
|
|
7
7
|
return dayOfTheWeek - 1;
|
|
8
8
|
};
|
|
9
|
-
export const DatesList = ({ items, handleDateSelect
|
|
9
|
+
export const DatesList = ({ items, handleDateSelect }) => {
|
|
10
10
|
return (React.createElement(Container, null,
|
|
11
11
|
Array(getBlankDaysCount(items[0].date))
|
|
12
12
|
.fill(null)
|
|
13
|
-
.map((_, index) => React.createElement(ListItem, { key: `blankItem-${index}`, disabled: true })),
|
|
13
|
+
.map((_, index) => (React.createElement(ListItem, { key: `blankItem-${index}`, disabled: true }))),
|
|
14
14
|
items.map((item, i) => (React.createElement(ListItem, { key: i, disabled: item.disabled, className: `ListItem ${item.active ? 'active' : ''}`, onClick: () => handleDateSelect(item.date) }, item.label)))));
|
|
15
15
|
};
|
|
16
16
|
const Container = styled.ul `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatesList.js","sourceRoot":"","sources":["../../src/Datepicker/DatesList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAShC,MAAM,iBAAiB,GAAG,CAAC,kBAAwB,EAAE,EAAE;IACrD,MAAM,YAAY,GAAG,SAAS,CAAC,kBAAkB,CAAC,CAAA;IAClD,OAAO,YAAY,GAAG,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"DatesList.js","sourceRoot":"","sources":["../../src/Datepicker/DatesList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAShC,MAAM,iBAAiB,GAAG,CAAC,kBAAwB,EAAE,EAAE;IACrD,MAAM,YAAY,GAAG,SAAS,CAAC,kBAAkB,CAAC,CAAA;IAClD,OAAO,YAAY,GAAG,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAc,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAClE,OAAO,CACL,oBAAC,SAAS;QACP,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;aACrC,IAAI,CAAC,IAAI,CAAC;aACV,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACjB,oBAAC,QAAQ,IAAC,GAAG,EAAE,aAAa,KAAK,EAAE,EAAE,QAAQ,SAAG,CACjD,CAAC;QACH,KAAK,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,oBAAC,QAAQ,IACP,GAAG,EAAE,CAAC,EACN,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,YAAY,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAEzC,IAAI,CAAC,KAAK,CACF,CACZ,CAAC,CACQ,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;;;;;;;;CAgB1B,CAAA;AAMD,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAW;;;;;;;;iBAQpB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;WAG9B,KAAK,CAAC,MAAM,CAAC,SAAS;;oBAEb,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;aACjD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;;;;wBAI/B,KAAK,CAAC,MAAM,CAAC,UAAU;;;;aAIlC,KAAK,CAAC,MAAM,CAAC,KAAK;wBACP,KAAK,CAAC,MAAM,CAAC,SAAS;;;CAG7C,CAAA"}
|
package/dist/Field/Field.js
CHANGED
|
@@ -19,7 +19,7 @@ import { theme } from '../theme';
|
|
|
19
19
|
export const Field = (_a) => {
|
|
20
20
|
var { children, renderAsTitle, className = '', error, id, label, outlined = false, value, trailingIcon, errorMsg, dropdownKey, required, showCaret, fullHeight = false } = _a, marginProps = __rest(_a, ["children", "renderAsTitle", "className", "error", "id", "label", "outlined", "value", "trailingIcon", "errorMsg", "dropdownKey", "required", "showCaret", "fullHeight"]);
|
|
21
21
|
return (React.createElement(Container, Object.assign({ className: className }, marginProps),
|
|
22
|
-
label && (React.createElement(Box, { mb: { custom: outlined ? 4 : 0 } }, renderAsTitle ? (React.createElement(Title,
|
|
22
|
+
label && (React.createElement(Box, { mb: { custom: outlined ? 4 : 0 } }, renderAsTitle ? (React.createElement(Title, { htmlFor: id }, label)) : (React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id },
|
|
23
23
|
label,
|
|
24
24
|
required && React.createElement(Asterisk, null, "*"))))),
|
|
25
25
|
React.createElement(Content, { fullHeight: fullHeight, value: value, outlined: outlined, error: error, key: dropdownKey !== null && dropdownKey !== void 0 ? dropdownKey : null },
|
|
@@ -63,8 +63,10 @@ const ErrorBox = styled.span `
|
|
|
63
63
|
color: ${theme.colors.error};
|
|
64
64
|
font-size: 12px;
|
|
65
65
|
`;
|
|
66
|
-
const Title = styled.
|
|
67
|
-
font-
|
|
66
|
+
const Title = styled.label `
|
|
67
|
+
font-size: 20px;
|
|
68
|
+
line-height: 26px;
|
|
69
|
+
font-weight: 500;
|
|
68
70
|
padding-bottom: 8px;
|
|
69
71
|
`;
|
|
70
72
|
const Caret = styled.div `
|
package/dist/Field/Field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAYhC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAgBT,EAAE,EAAE;QAhBK,EACpB,QAAQ,EACR,aAAa,EACb,SAAS,GAAG,EAAE,EACd,KAAK,EACL,EAAE,EACF,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,KAAK,OAEP,EADR,WAAW,cAfM,yKAgBrB,CADe;IAEd,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,SAAS,IAAM,WAAW;QAC7C,KAAK,IAAI,CACR,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,IAClC,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,45 +1,31 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
export
|
|
4
|
-
id?: string;
|
|
5
|
-
className?: string;
|
|
6
|
-
/** Input type enum for proper browser support */
|
|
1
|
+
import React, { FormEvent } from 'react';
|
|
2
|
+
import { CommonFieldTypes } from '../Field';
|
|
3
|
+
export interface Props extends CommonFieldTypes {
|
|
7
4
|
type?: 'number' | 'tel';
|
|
8
|
-
/** Placeholder */
|
|
9
5
|
placeholder: string;
|
|
10
|
-
/** label displayed above the input */
|
|
11
|
-
label?: string;
|
|
12
|
-
/** used for label - input connection */
|
|
13
6
|
name?: string;
|
|
14
|
-
/** value of the input */
|
|
15
7
|
value: string;
|
|
16
|
-
|
|
17
|
-
error?: boolean;
|
|
18
|
-
/** error text message */
|
|
19
|
-
errorMsg?: string;
|
|
20
|
-
/** onChange listener */
|
|
21
|
-
onChange: (e: string | number) => void;
|
|
22
|
-
/** onChange listener */
|
|
8
|
+
onBlur?: (e: FormEvent<HTMLInputElement>) => void;
|
|
23
9
|
trailingIcon?: string;
|
|
24
|
-
/** toggle for the prefix (i.e. currency symbol) */
|
|
25
10
|
prefix?: string;
|
|
26
|
-
/** toggle for the suffix (i.e. miles or kilometre symbol) */
|
|
27
11
|
suffix?: string;
|
|
28
|
-
/** Required flag */
|
|
29
|
-
required?: boolean;
|
|
30
|
-
/** Minimum allowed number */
|
|
31
12
|
min?: number;
|
|
32
|
-
/** Maximum allowed number */
|
|
33
13
|
max?: number;
|
|
34
|
-
/** Adjust value if entering a number beyond the specified min or max */
|
|
35
14
|
strict?: boolean;
|
|
36
|
-
/** Round currency to two decimal places if true */
|
|
37
15
|
roundCurrency?: boolean;
|
|
38
|
-
/** Increment and decrement the value by the following step count */
|
|
39
16
|
step?: number;
|
|
40
|
-
/** Disabled flag */
|
|
41
17
|
disabled?: boolean;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
18
|
+
}
|
|
19
|
+
/** on change or on input required */
|
|
20
|
+
declare type InputProps = {
|
|
21
|
+
/** on change is required and on input optional */
|
|
22
|
+
onChange: (e: string | number) => void;
|
|
23
|
+
onInputChange?: (e: FormEvent<HTMLInputElement>) => void;
|
|
24
|
+
} | {
|
|
25
|
+
/** on input is required and on change optional */
|
|
26
|
+
onChange?: (e: string | number) => void;
|
|
27
|
+
onInputChange: (e: FormEvent<HTMLInputElement>) => void;
|
|
28
|
+
};
|
|
29
|
+
export declare type NumberInputProps = Props & InputProps;
|
|
30
|
+
export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
31
|
+
export {};
|
|
@@ -9,15 +9,16 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import React from 'react';
|
|
12
|
+
import React, { forwardRef } from 'react';
|
|
13
13
|
import styled from 'styled-components';
|
|
14
14
|
import { Box } from '../Box';
|
|
15
15
|
import { Text } from '../Text';
|
|
16
16
|
import { Icon } from '../Icon';
|
|
17
|
+
import { Field } from '../Field';
|
|
17
18
|
import { theme } from '../theme';
|
|
18
19
|
import { useUniqueId } from '../utils/id';
|
|
19
|
-
export const NumberInput = (_a)
|
|
20
|
-
var { id: idProp,
|
|
20
|
+
export const NumberInput = forwardRef(function NumberInput(_a, ref) {
|
|
21
|
+
var { id: idProp, type = 'number', placeholder, name, value, trailingIcon, onChange, onInputChange, onBlur, prefix, suffix, roundCurrency, min = -999999, max = 999999, strict, step = 0, disabled = false, error = false, outlined = false } = _a, fieldProps = __rest(_a, ["id", "type", "placeholder", "name", "value", "trailingIcon", "onChange", "onInputChange", "onBlur", "prefix", "suffix", "roundCurrency", "min", "max", "strict", "step", "disabled", "error", "outlined"]);
|
|
21
22
|
const id = useUniqueId(idProp);
|
|
22
23
|
// Check whether the min/max value exists is within the specified range
|
|
23
24
|
const isInRange = (value) => {
|
|
@@ -53,6 +54,8 @@ export const NumberInput = (_a) => {
|
|
|
53
54
|
return Math.abs(dMax) < Math.abs(dMin) ? max : min;
|
|
54
55
|
};
|
|
55
56
|
const handleChange = (event) => {
|
|
57
|
+
if (onChange === undefined)
|
|
58
|
+
return;
|
|
56
59
|
const EMPTY_INPUT = '';
|
|
57
60
|
if (event === EMPTY_INPUT) {
|
|
58
61
|
onChange(event);
|
|
@@ -72,6 +75,8 @@ export const NumberInput = (_a) => {
|
|
|
72
75
|
};
|
|
73
76
|
// Increment or decrement the value when clicking the Spinner controls
|
|
74
77
|
const incrementValue = (event) => {
|
|
78
|
+
if (onChange === undefined)
|
|
79
|
+
return;
|
|
75
80
|
event.preventDefault();
|
|
76
81
|
const currentValue = Number(value) + step;
|
|
77
82
|
if (isInRange(currentValue)) {
|
|
@@ -79,73 +84,44 @@ export const NumberInput = (_a) => {
|
|
|
79
84
|
}
|
|
80
85
|
};
|
|
81
86
|
const decrementValue = (event) => {
|
|
87
|
+
if (onChange === undefined)
|
|
88
|
+
return;
|
|
82
89
|
event.preventDefault();
|
|
83
90
|
const currentValue = Number(value) - step;
|
|
84
91
|
if (isInRange(currentValue)) {
|
|
85
92
|
onChange(roundNumber(currentValue));
|
|
86
93
|
}
|
|
87
94
|
};
|
|
88
|
-
return (React.createElement(
|
|
89
|
-
|
|
90
|
-
React.createElement(
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
suffix && (React.createElement(
|
|
98
|
-
|
|
99
|
-
step > 0 && (React.createElement(Spinner, null,
|
|
95
|
+
return (React.createElement(Field, Object.assign({}, fieldProps, { id: id, error: error, outlined: outlined, value: value }),
|
|
96
|
+
React.createElement(Box, { flex: true },
|
|
97
|
+
prefix && (React.createElement(SymbolText, { tag: "span", color: "secondary", outlined: outlined, prefix: prefix }, prefix)),
|
|
98
|
+
React.createElement(Input, { error: error, outlined: outlined, disabled: disabled, type: type, id: id, name: name, placeholder: placeholder, value: value, prefix: prefix, onChange: (e) => {
|
|
99
|
+
onChange && handleChange(e.currentTarget.value);
|
|
100
|
+
onInputChange && onInputChange(e);
|
|
101
|
+
}, onBlur: (e) => {
|
|
102
|
+
onBlur && onBlur(e);
|
|
103
|
+
} }),
|
|
104
|
+
suffix && (React.createElement(SymbolText, { tag: "span", color: "secondary", outlined: outlined, suffix: suffix }, suffix)),
|
|
105
|
+
onChange && step > 0 && (React.createElement(Spinner, { outlined: outlined },
|
|
100
106
|
React.createElement(SpinnerButton, { onClick: incrementValue, disabled: disabled },
|
|
101
107
|
React.createElement(Icon, { render: "caret", rotate: 180, color: "subtext", size: 24 })),
|
|
102
108
|
React.createElement(SpinnerButton, { onClick: decrementValue, disabled: disabled },
|
|
103
109
|
React.createElement(Icon, { render: "caret", color: "subtext", size: 24 })))),
|
|
104
|
-
trailingIcon && React.createElement(
|
|
105
|
-
|
|
106
|
-
};
|
|
107
|
-
const Container = styled(Box) `
|
|
108
|
-
font-family: 'Gordita', san-serif;
|
|
109
|
-
display: flex;
|
|
110
|
-
flex-direction: column;
|
|
111
|
-
height: auto;
|
|
112
|
-
`;
|
|
113
|
-
const Content = styled.div `
|
|
114
|
-
border-bottom: 1px solid;
|
|
115
|
-
border-color: ${({ error }) => theme.colors[`${error ? 'error' : 'outline'}`]};
|
|
116
|
-
display: flex;
|
|
117
|
-
align-items: center;
|
|
118
|
-
height: 32px;
|
|
119
|
-
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
|
120
|
-
opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
|
|
121
|
-
|
|
122
|
-
&:hover,
|
|
123
|
-
&:focus-within {
|
|
124
|
-
border-color: ${({ error }) => theme.colors[`${error ? 'error' : 'outline'}`]};
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
${({ outlined }) => outlined &&
|
|
128
|
-
`
|
|
129
|
-
border: 2px solid ${theme.colors.outline};
|
|
130
|
-
border-radius: 8px;
|
|
131
|
-
padding: 16px 12px;
|
|
132
|
-
height: auto;
|
|
133
|
-
`}
|
|
134
|
-
|
|
135
|
-
${({ value }) => value &&
|
|
136
|
-
value !== '' &&
|
|
137
|
-
`
|
|
138
|
-
border-color: ${theme.colors.outline};
|
|
139
|
-
`}
|
|
140
|
-
`;
|
|
110
|
+
trailingIcon && React.createElement(StyledIcon, { render: trailingIcon, color: "subtext" }))));
|
|
111
|
+
});
|
|
141
112
|
const Input = styled.input `
|
|
142
|
-
font-family: '
|
|
113
|
+
font-family: 'Circular', san-serif;
|
|
143
114
|
border: none;
|
|
115
|
+
border-bottom: 1px solid;
|
|
116
|
+
border-color: ${({ error }) => theme.colors[`${error ? 'error' : 'outline'}`]};
|
|
144
117
|
color: ${({ error }) => theme.colors[`${error ? 'error' : 'secondary'}`]};
|
|
145
118
|
font-size: 16px;
|
|
146
119
|
width: 100%;
|
|
147
120
|
outline: none;
|
|
148
121
|
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
|
122
|
+
opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
|
|
123
|
+
padding: ${({ outlined }) => (outlined ? '17px 14px' : '1px 2px')};
|
|
124
|
+
padding-right: 60px;
|
|
149
125
|
|
|
150
126
|
&::placeholder {
|
|
151
127
|
color: ${theme.colors.subtext};
|
|
@@ -159,25 +135,59 @@ const Input = styled.input `
|
|
|
159
135
|
-webkit-appearance: none;
|
|
160
136
|
margin: 0;
|
|
161
137
|
}
|
|
138
|
+
|
|
139
|
+
&:hover,
|
|
140
|
+
&:focus-within {
|
|
141
|
+
border-color: ${({ error }) => theme.colors[`${error ? 'error' : 'outline'}`]};
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
${({ outlined, error }) => outlined &&
|
|
145
|
+
`
|
|
146
|
+
border: 2px solid ${error ? theme.colors.error : theme.colors.outline};
|
|
147
|
+
border-radius: 8px;
|
|
148
|
+
height: auto;
|
|
149
|
+
`}
|
|
150
|
+
|
|
151
|
+
${({ value }) => value &&
|
|
152
|
+
value !== '' &&
|
|
153
|
+
`
|
|
154
|
+
border-color: ${theme.colors.outline};
|
|
155
|
+
`}
|
|
156
|
+
|
|
157
|
+
${({ prefix }) => prefix &&
|
|
158
|
+
`
|
|
159
|
+
padding-left: 12px;
|
|
160
|
+
left: -10px;
|
|
161
|
+
position: relative;
|
|
162
|
+
`}
|
|
162
163
|
`;
|
|
163
|
-
const
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
font-size: 12px;
|
|
164
|
+
const StyledIcon = styled(Icon) `
|
|
165
|
+
position: relative;
|
|
166
|
+
left: -24px;
|
|
167
167
|
`;
|
|
168
168
|
const SymbolText = styled(Text) `
|
|
169
|
-
font-family: '
|
|
169
|
+
font-family: 'Circular', san-serif;
|
|
170
170
|
font-size: 16px;
|
|
171
171
|
line-height: 19px;
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
172
|
+
position: relative;
|
|
173
|
+
z-index: 1;
|
|
174
|
+
|
|
175
|
+
${({ outlined, prefix }) => outlined &&
|
|
176
|
+
`
|
|
177
|
+
top: 20px;
|
|
178
|
+
left: ${prefix ? '1px' : '0'};
|
|
179
|
+
`}
|
|
180
|
+
|
|
181
|
+
${({ suffix, outlined }) => suffix &&
|
|
182
|
+
`
|
|
183
|
+
left: ${outlined ? '-25px' : '-10px'};
|
|
184
|
+
`}
|
|
176
185
|
`;
|
|
177
186
|
const Spinner = styled.div `
|
|
178
187
|
display: flex;
|
|
179
188
|
position: relative;
|
|
180
|
-
top: -3px;
|
|
189
|
+
top: ${({ outlined }) => (outlined ? '17px' : '-3px')};
|
|
190
|
+
left: -60px;
|
|
181
191
|
`;
|
|
182
192
|
const SpinnerButton = styled.button `
|
|
183
193
|
width: 24px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { NumberInputProps } from './NumberInput';
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: React.
|
|
5
|
+
component: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
6
6
|
argTypes: {
|
|
7
7
|
onChange: {
|
|
8
8
|
action: string;
|
|
@@ -3,38 +3,53 @@ import styled from 'styled-components';
|
|
|
3
3
|
import { Text } from '../Text';
|
|
4
4
|
import { Box } from '../Box';
|
|
5
5
|
import { SupportMessage } from './SupportMessage';
|
|
6
|
+
const variationList = [
|
|
7
|
+
{
|
|
8
|
+
type: 'info',
|
|
9
|
+
title: 'Additional information',
|
|
10
|
+
description: 'Information needs to be communicated to the user.',
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
type: 'info-outline',
|
|
14
|
+
title: 'Additional information',
|
|
15
|
+
description: 'Information needs to be communicated to the user.',
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
type: 'alert',
|
|
19
|
+
title: 'Potential issue',
|
|
20
|
+
description: 'The user should be aware and possibly exercise caution.',
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
type: 'warning',
|
|
24
|
+
title: 'Error encountered',
|
|
25
|
+
description: "An error has occurred, here's feedback on how to proceed.",
|
|
26
|
+
},
|
|
27
|
+
];
|
|
6
28
|
export const CollectionPage = () => {
|
|
7
|
-
return (React.createElement(Box, { flex: true, direction: "column" },
|
|
8
|
-
React.createElement(
|
|
9
|
-
React.createElement(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
React.createElement(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
React.createElement(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
React.createElement(SupportMessage, { type: "alert", description: "Alert support message" })),
|
|
20
|
-
React.createElement(ContainerBox, null,
|
|
21
|
-
React.createElement(Label, { tag: "span", typo: "header-small" }, "Type alert - With title"),
|
|
22
|
-
React.createElement(SupportMessage, { type: "alert", title: "General alert title", description: "Alert support message" })),
|
|
23
|
-
React.createElement(ContainerBox, null,
|
|
24
|
-
React.createElement(Label, { tag: "span", typo: "header-small" }, "Type warning - Default"),
|
|
25
|
-
React.createElement(SupportMessage, { type: "warning", description: "Warning support message" })),
|
|
26
|
-
React.createElement(ContainerBox, null,
|
|
27
|
-
React.createElement(Label, { tag: "span", typo: "header-small" }, "Type warning - With title"),
|
|
28
|
-
React.createElement(SupportMessage, { type: "warning", title: "General warning title", description: "Warning support message" }))));
|
|
29
|
+
return (React.createElement(Box, { flex: true, direction: "column" }, variationList.map(({ type, title, description }) => {
|
|
30
|
+
return (React.createElement(Box, { key: type, flex: true, direction: "column", mb: "32px" },
|
|
31
|
+
React.createElement(Title, { tag: "span", typo: "header-medium" },
|
|
32
|
+
"Type: ",
|
|
33
|
+
type),
|
|
34
|
+
React.createElement(Box, { flex: true },
|
|
35
|
+
React.createElement(Label, { tag: "span", typo: "header-small" }, "Without title"),
|
|
36
|
+
React.createElement(SupportMessage, { type: type, description: description })),
|
|
37
|
+
React.createElement(Box, { flex: true, mt: "8px" },
|
|
38
|
+
React.createElement(Label, { tag: "span", typo: "header-small" }, "With title"),
|
|
39
|
+
React.createElement(SupportMessage, { type: type, title: title, description: description }))));
|
|
40
|
+
})));
|
|
29
41
|
};
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
42
|
+
const LABEL_WIDTH = '140px';
|
|
43
|
+
const Title = styled(Text) `
|
|
44
|
+
margin-bottom: 12px;
|
|
45
|
+
font-size: 18px;
|
|
46
|
+
line-height: 20px;
|
|
47
|
+
margin-left: ${LABEL_WIDTH};
|
|
35
48
|
`;
|
|
36
49
|
const Label = styled(Text) `
|
|
37
|
-
margin-
|
|
38
|
-
|
|
50
|
+
margin-bottom: 4px;
|
|
51
|
+
font-size: 14px;
|
|
52
|
+
width: ${LABEL_WIDTH};
|
|
53
|
+
flex-shrink: 0;
|
|
39
54
|
`;
|
|
40
55
|
//# sourceMappingURL=Collection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collection.js","sourceRoot":"","sources":["../../src/SupportMessage/Collection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"Collection.js","sourceRoot":"","sources":["../../src/SupportMessage/Collection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAA;AAEtE,MAAM,aAAa,GAA0B;IAC3C;QACE,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,wBAAwB;QAC/B,WAAW,EAAE,mDAAmD;KACjE;IACD;QACE,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,wBAAwB;QAC/B,WAAW,EAAE,mDAAmD;KACjE;IACD;QACE,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,yDAAyD;KACvE;IACD;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,mBAAmB;QAC1B,WAAW,EAAE,2DAA2D;KACzE;CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAO,GAAG,EAAE;IACrC,OAAO,CACL,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,IACzB,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;QAClD,OAAO,CACL,oBAAC,GAAG,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAC,MAAM;YAC/C,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe;;gBAC7B,IAAI,CACL;YACR,oBAAC,GAAG,IAAC,IAAI;gBACP,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,oBAE7B;gBACR,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,GAAI,CACpD;YACN,oBAAC,GAAG,IAAC,IAAI,QAAC,EAAE,EAAC,KAAK;gBAChB,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,iBAE7B;gBACR,oBAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,GACxB,CACE,CACF,CACP,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,OAAO,CAAA;AAE3B,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;iBAIT,WAAW;CAC3B,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;WAGf,WAAW;;CAErB,CAAA"}
|
|
@@ -14,8 +14,8 @@ import styled, { css } from 'styled-components';
|
|
|
14
14
|
import { lighten } from 'polished';
|
|
15
15
|
import { Box } from '../Box';
|
|
16
16
|
import { Icon } from '../Icon';
|
|
17
|
+
import { Text } from '../Text';
|
|
17
18
|
import { theme } from '../theme';
|
|
18
|
-
import { margin } from '../utils/space';
|
|
19
19
|
const styles = {
|
|
20
20
|
info: {
|
|
21
21
|
iconColor: 'secondary',
|
|
@@ -43,15 +43,14 @@ export const SupportMessage = (_a) => {
|
|
|
43
43
|
return (React.createElement(Wrapper, Object.assign({ className: className, type: type }, marginProps),
|
|
44
44
|
React.createElement(IconWrapper, null,
|
|
45
45
|
React.createElement(Icon, { size: 24, render: styles[type].icon, color: styles[type].iconColor })),
|
|
46
|
-
React.createElement(
|
|
46
|
+
React.createElement(Box, { flex: true, direction: "column", ml: "16px" },
|
|
47
47
|
title && React.createElement(Title, null, title),
|
|
48
|
-
description)));
|
|
48
|
+
React.createElement(Description, { tag: "p", typo: "base" }, description))));
|
|
49
49
|
};
|
|
50
50
|
const IconWrapper = styled(Box) `
|
|
51
51
|
align-self: flex-start;
|
|
52
52
|
`;
|
|
53
|
-
const Wrapper = styled
|
|
54
|
-
${margin}
|
|
53
|
+
const Wrapper = styled(Box)(({ type }) => css `
|
|
55
54
|
align-items: center;
|
|
56
55
|
background-color: ${styles[type].backgroundColor};
|
|
57
56
|
${type === 'info-outline' && `border: 1px solid ${theme.colors.secondary}`};
|
|
@@ -60,11 +59,6 @@ const Wrapper = styled.div(({ type }) => css `
|
|
|
60
59
|
display: flex;
|
|
61
60
|
width: 100%;
|
|
62
61
|
`);
|
|
63
|
-
const ContentBox = styled(Box) `
|
|
64
|
-
margin-left: 16px;
|
|
65
|
-
color: ${theme.colors.secondary};
|
|
66
|
-
font-size: 14px;
|
|
67
|
-
`;
|
|
68
62
|
const Title = styled.p `
|
|
69
63
|
font-size: 16px;
|
|
70
64
|
font-weight: ${theme.font.weight.medium};
|
|
@@ -72,4 +66,9 @@ const Title = styled.p `
|
|
|
72
66
|
line-height: 20.8px;
|
|
73
67
|
margin-bottom: 4px;
|
|
74
68
|
`;
|
|
69
|
+
const Description = styled(Text) `
|
|
70
|
+
color: ${theme.colors.secondary};
|
|
71
|
+
font-size: 14px;
|
|
72
|
+
line-height: 20px;
|
|
73
|
+
`;
|
|
75
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,
|
|
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"}
|
|
@@ -14,13 +14,14 @@ 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';
|
|
17
18
|
import { Icon } from '../Icon';
|
|
18
19
|
import { useUniqueId } from '../utils/id';
|
|
19
20
|
export const TextInput = forwardRef(function TextInput(_a, ref) {
|
|
20
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"]);
|
|
21
22
|
const id = useUniqueId(idProp);
|
|
22
23
|
return (React.createElement(Field, Object.assign({}, fieldProps, { id: id, error: error, outlined: outlined, value: value }),
|
|
23
|
-
React.createElement(
|
|
24
|
+
React.createElement(Box, { flex: true },
|
|
24
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) => {
|
|
25
26
|
onChange && onChange(e.currentTarget.value);
|
|
26
27
|
onInputChange && onInputChange(e);
|
|
@@ -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,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AA2BzC,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,SAAS,CACpD,EAciB,EACjB,GAAmC;QAfnC,EACE,EAAE,EAAE,MAAM,EACV,IAAI,GAAG,MAAM,EACb,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EACb,MAAM,EACN,QAAQ,EACR,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,YAAY,OAEG,EADZ,UAAU,cAbf,sIAcC,CADc;IAIf,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAE9B,OAAO,CACL,oBAAC,KAAK,oBACA,UAAU,IACd,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK;QAEZ;
|
|
1
|
+
{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -48,6 +48,17 @@ Required.args = {
|
|
|
48
48
|
placeholder: 'Here is some placeholder text.',
|
|
49
49
|
required: true,
|
|
50
50
|
};
|
|
51
|
+
export const WithTitleAsLabel = Template.bind({});
|
|
52
|
+
WithTitleAsLabel.args = {
|
|
53
|
+
id: 'textarea_id',
|
|
54
|
+
label: 'Textarea label',
|
|
55
|
+
value: '',
|
|
56
|
+
onChange: noop,
|
|
57
|
+
disabled: false,
|
|
58
|
+
placeholder: 'Here is some placeholder text.',
|
|
59
|
+
required: false,
|
|
60
|
+
renderAsTitle: true,
|
|
61
|
+
};
|
|
51
62
|
const WorkingExampleTemplate = () => React.createElement(Container, null);
|
|
52
63
|
export const WorkingExample = WorkingExampleTemplate.bind({});
|
|
53
64
|
//# sourceMappingURL=Textarea.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.stories.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,KAAK,EAAI,CAAA;AAElE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,IAAI;IACd,WAAW,EAAE,gCAAgC;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtC,KAAK,CAAC,IAAI,GAAG;IACX,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;IAC7C,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,sDAAsD;CACjE,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;IAC7C,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,oBAAC,SAAS,OAAG,CAAA;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
1
|
+
{"version":3,"file":"Textarea.stories.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,KAAK,EAAI,CAAA;AAElE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,IAAI;IACd,WAAW,EAAE,gCAAgC;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtC,KAAK,CAAC,IAAI,GAAG;IACX,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;IAC7C,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,sDAAsD;CACjE,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;IAC7C,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,gBAAgB,CAAC,IAAI,GAAG;IACtB,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;IAC7C,QAAQ,EAAE,KAAK;IACf,aAAa,EAAE,IAAI;CACpB,CAAA;AAED,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,oBAAC,SAAS,OAAG,CAAA;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,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;
|
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"}
|