@activecollab/components 1.0.73 → 1.0.74
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Input/Styles.js +6 -2
- package/dist/cjs/components/Input/Styles.js.map +1 -1
- package/dist/cjs/components/Textarea/Styles.js +3 -1
- package/dist/cjs/components/Textarea/Styles.js.map +1 -1
- package/dist/cjs/components/Typography/Styles.js +51 -17
- package/dist/cjs/components/Typography/Styles.js.map +1 -1
- package/dist/esm/components/Input/Styles.js +6 -2
- package/dist/esm/components/Input/Styles.js.map +1 -1
- package/dist/esm/components/Textarea/Styles.js +3 -1
- package/dist/esm/components/Textarea/Styles.js.map +1 -1
- package/dist/esm/components/Typography/Styles.js +51 -17
- package/dist/esm/components/Typography/Styles.js.map +1 -1
- package/dist/index.js +60 -20
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -20,10 +20,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
20
20
|
var StyledInput = _styledComponents.default.input.withConfig({
|
|
21
21
|
displayName: "Styles__StyledInput",
|
|
22
22
|
componentId: "sc-ce8kcp-0"
|
|
23
|
-
})(["border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);
|
|
23
|
+
})(["", " border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);padding:4px 10px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " &::placeholder{color:var(--color-theme-600);}"], {
|
|
24
|
+
"fontSize": "0.875rem"
|
|
25
|
+
}, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
24
26
|
return props.$size === "small" && (0, _styledComponents.css)(["border-radius:6px;height:24px;"]);
|
|
25
27
|
}, function (props) {
|
|
26
|
-
return props.$size === "big" && (0, _styledComponents.css)(["height:40px;
|
|
28
|
+
return props.$size === "big" && (0, _styledComponents.css)(["", " height:40px;"], {
|
|
29
|
+
"fontSize": "1rem"
|
|
30
|
+
});
|
|
27
31
|
}, function (props) {
|
|
28
32
|
return props.disabled ? (0, _styledComponents.css)(["", ""], {
|
|
29
33
|
"cursor": "not-allowed",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Input/Styles.ts"],"names":["StyledInput","styled","input","FontStyle","BoxSizingStyle","props","$size","css","disabled","displayName"],"mappings":";;;;;;;;;AAAA;;AAGA;;AACA;;;;;;AAEO,IAAMA,WAAW,GAAGC,0BAAOC,KAAV;AAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Input/Styles.ts"],"names":["StyledInput","styled","input","FontStyle","BoxSizingStyle","props","$size","css","disabled","displayName"],"mappings":";;;;;;;;;AAAA;;AAGA;;AACA;;;;;;AAEO,IAAMA,WAAW,GAAGC,0BAAOC,KAAV;AAAA;AAAA;AAAA,iTAGlB;AAAA;AAAA,CAHkB,EAcpBC,oBAdoB,EAepBC,8BAfoB,EAiBpB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,QACAC,qBADA,qCADA;AAAA,CAjBoB,EAwBpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,QACAC,qBADA,yBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAxBoB,EA+BpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,OACID,qBADJ,YAEU;AAAA;AAAA;AAAA;AAAA,GAFV,QAIIA,qBAJJ,gDAMY;AAAA;AAAA,GANZ,EAUY;AAAA;AAAA,GAVZ,EAcY;AAAA;AAAA,GAdZ,CADA;AAAA,CA/BoB,CAAjB;;;AAuDPP,WAAW,CAACS,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { InputSize } from \"./Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledInput = styled.input<{\n $size?: InputSize;\n}>`\n ${tw`tw-text-body-2`}\n border: 1px solid var(--border-primary);\n border-radius: 10px;\n color: var(--color-theme-900);\n padding: 4px 10px 6px 8px;\n height: 32px;\n background-color: var(--input-background-color);\n transition: all 0.3s ease;\n width: 360px;\n outline: none;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n ${tw`tw-text-body-1`}\n height: 40px;\n `}\n\n ${(props) =>\n props.disabled\n ? css`\n ${tw`tw-cursor-not-allowed tw-opacity-50 tw-border-theme-400`}\n `\n : css`\n &:hover {\n ${tw`tw-border-primary`}\n }\n\n &:active {\n ${tw`tw-border-primary`}\n }\n\n &:focus {\n ${tw`tw-border-primary`}\n }\n `}\n\n &::placeholder {\n color: var(--color-theme-600);\n }\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}
|
|
@@ -20,7 +20,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
20
20
|
var StyledTextarea = _styledComponents.default.textarea.withConfig({
|
|
21
21
|
displayName: "Styles__StyledTextarea",
|
|
22
22
|
componentId: "sc-m6jqw8-0"
|
|
23
|
-
})(["border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);
|
|
23
|
+
})(["", " border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);padding:4px 10px 6px 8px;height:auto;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;min-height:90px;", " ", " ", " &:active,&:focus{outline:none !important;", "}&:focus{box-shadow:none;}&::placeholder{color:var(--color-theme-600);}", ""], {
|
|
24
|
+
"fontSize": "0.875rem"
|
|
25
|
+
}, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
24
26
|
return !props.disabled && (0, _styledComponents.css)(["&:hover{outline:none !important;", "}"], {
|
|
25
27
|
"borderColor": "var(--color-primary)"
|
|
26
28
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Textarea/Styles.ts"],"names":["StyledTextarea","styled","textarea","FontStyle","BoxSizingStyle","props","disabled","css","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAOO,IAAMA,cAAc,GAAGC,0BAAOC,QAAV;AAAA;AAAA;AAAA
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Textarea/Styles.ts"],"names":["StyledTextarea","styled","textarea","FontStyle","BoxSizingStyle","props","disabled","css","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAOO,IAAMA,cAAc,GAAGC,0BAAOC,QAAV;AAAA;AAAA;AAAA,qXACrB;AAAA;AAAA,CADqB,EAWvBC,oBAXuB,EAYvBC,8BAZuB,EAcvB,UAACC,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,QAAP,QACAC,qBADA,6CAIQ;AAAA;AAAA,GAJR,CADA;AAAA,CAduB,EAyBnB;AAAA;AAAA,CAzBmB,EAoCvB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,sEAGM;AAAA;AAAA;AAAA;AAAA,GAHN,CADA;AAAA,CApCuB,CAApB;;;AAgDPP,cAAc,CAACQ,WAAf,GAA6B,gBAA7B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport tw from \"twin.macro\";\n\ninterface StyledTextareaProps {\n disabled: boolean;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n ${tw`tw-text-body-2`}\n border: 1px solid var(--border-primary);\n border-radius: 10px;\n color: var(--color-theme-900);\n padding: 4px 10px 6px 8px;\n height: auto;\n background-color: var(--input-background-color);\n transition: all 0.3s ease;\n width: 360px;\n min-height: 90px;\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n !props.disabled &&\n css`\n &:hover {\n outline: none !important;\n ${tw`tw-border-primary`}\n }\n `}\n\n &:active, &:focus {\n outline: none !important;\n ${tw`tw-border-primary`}\n }\n\n &:focus {\n box-shadow: none;\n }\n\n &::placeholder {\n color: var(--color-theme-600);\n }\n\n ${(props) =>\n props.disabled &&\n css`\n outline: none;\n ${tw`tw-cursor-not-allowed tw-opacity-50 tw-border-theme-400`}\n\n &:hover {\n border-color: var(--border-primary);\n }\n `}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"file":"Styles.js"}
|
|
@@ -59,35 +59,61 @@ var StyledTypography = _styledComponents.default.div.withConfig({
|
|
|
59
59
|
})(["", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
60
60
|
return colors[props.$color];
|
|
61
61
|
}, function (props) {
|
|
62
|
-
return props.$variant === "Title 1" && (0, _styledComponents.css)(["
|
|
62
|
+
return props.$variant === "Title 1" && (0, _styledComponents.css)(["", ""], {
|
|
63
|
+
"fontSize": "2rem"
|
|
64
|
+
});
|
|
63
65
|
}, function (props) {
|
|
64
|
-
return props.$variant === "Title 2" && (0, _styledComponents.css)(["
|
|
66
|
+
return props.$variant === "Title 2" && (0, _styledComponents.css)(["", ""], {
|
|
67
|
+
"fontSize": "1.675rem"
|
|
68
|
+
});
|
|
65
69
|
}, function (props) {
|
|
66
|
-
return props.$variant === "Header 2" && (0, _styledComponents.css)(["
|
|
70
|
+
return props.$variant === "Header 2" && (0, _styledComponents.css)(["", ""], {
|
|
71
|
+
"fontSize": "1.125rem"
|
|
72
|
+
});
|
|
67
73
|
}, function (props) {
|
|
68
|
-
return (props.$variant === "Header 3" || props.$variant === "Body 1") && (0, _styledComponents.css)(["
|
|
74
|
+
return (props.$variant === "Header 3" || props.$variant === "Body 1") && (0, _styledComponents.css)(["", ""], {
|
|
75
|
+
"fontSize": "1rem"
|
|
76
|
+
});
|
|
69
77
|
}, function (props) {
|
|
70
|
-
return props.$variant === "Body 2" && (0, _styledComponents.css)(["
|
|
78
|
+
return props.$variant === "Body 2" && (0, _styledComponents.css)(["", ""], {
|
|
79
|
+
"fontSize": "0.875rem"
|
|
80
|
+
});
|
|
71
81
|
}, function (props) {
|
|
72
|
-
return props.$variant === "Caption 1" && (0, _styledComponents.css)(["
|
|
82
|
+
return props.$variant === "Caption 1" && (0, _styledComponents.css)(["", ""], {
|
|
83
|
+
"fontSize": "0.75rem"
|
|
84
|
+
});
|
|
73
85
|
}, function (props) {
|
|
74
|
-
return props.$variant === "Caption 2" && (0, _styledComponents.css)(["
|
|
86
|
+
return props.$variant === "Caption 2" && (0, _styledComponents.css)(["", ""], {
|
|
87
|
+
"fontSize": "0.625rem"
|
|
88
|
+
});
|
|
75
89
|
}, function (props) {
|
|
76
90
|
return props.$italic ? (0, _styledComponents.css)(["font-style:italic;"]) : (0, _styledComponents.css)(["font-style:normal;"]);
|
|
77
91
|
}, function (props) {
|
|
78
92
|
return props.$tabularNums ? (0, _styledComponents.css)(["font-variant-numeric:tabular-nums;"]) : (0, _styledComponents.css)(["font-variant-numeric:normal;"]);
|
|
79
93
|
}, function (props) {
|
|
80
|
-
return props.$letterSpacing === "regular" && (0, _styledComponents.css)(["
|
|
94
|
+
return props.$letterSpacing === "regular" && (0, _styledComponents.css)(["", ""], {
|
|
95
|
+
"letterSpacing": "0.02em"
|
|
96
|
+
});
|
|
81
97
|
}, function (props) {
|
|
82
|
-
return props.$letterSpacing === "tight" && (0, _styledComponents.css)(["
|
|
98
|
+
return props.$letterSpacing === "tight" && (0, _styledComponents.css)(["", ""], {
|
|
99
|
+
"letterSpacing": "0em"
|
|
100
|
+
});
|
|
83
101
|
}, function (props) {
|
|
84
|
-
return props.$letterSpacing === "wide" && (0, _styledComponents.css)(["
|
|
102
|
+
return props.$letterSpacing === "wide" && (0, _styledComponents.css)(["", ""], {
|
|
103
|
+
"letterSpacing": "0.08em"
|
|
104
|
+
});
|
|
85
105
|
}, function (props) {
|
|
86
|
-
return props.$lineHeight === "regular" && (0, _styledComponents.css)(["
|
|
106
|
+
return props.$lineHeight === "regular" && (0, _styledComponents.css)(["", ""], {
|
|
107
|
+
"lineHeight": "1.375"
|
|
108
|
+
});
|
|
87
109
|
}, function (props) {
|
|
88
|
-
return props.$lineHeight === "tight" && (0, _styledComponents.css)(["
|
|
110
|
+
return props.$lineHeight === "tight" && (0, _styledComponents.css)(["", ""], {
|
|
111
|
+
"lineHeight": "1"
|
|
112
|
+
});
|
|
89
113
|
}, function (props) {
|
|
90
|
-
return props.$lineHeight === "loose" && (0, _styledComponents.css)(["
|
|
114
|
+
return props.$lineHeight === "loose" && (0, _styledComponents.css)(["", ""], {
|
|
115
|
+
"lineHeight": "1.625"
|
|
116
|
+
});
|
|
91
117
|
}, function (props) {
|
|
92
118
|
return props.$align === "left" && (0, _styledComponents.css)(["text-align:left;"]);
|
|
93
119
|
}, function (props) {
|
|
@@ -135,13 +161,21 @@ var StyledTypography = _styledComponents.default.div.withConfig({
|
|
|
135
161
|
}, function (props) {
|
|
136
162
|
return props.$wordBreak === "all" && (0, _styledComponents.css)(["word-break:break-all;"]);
|
|
137
163
|
}, function (props) {
|
|
138
|
-
return props.$weight === "regular" && (0, _styledComponents.css)(["
|
|
164
|
+
return props.$weight === "regular" && (0, _styledComponents.css)(["", ""], {
|
|
165
|
+
"fontWeight": "400"
|
|
166
|
+
});
|
|
139
167
|
}, function (props) {
|
|
140
|
-
return props.$weight === "light" && (0, _styledComponents.css)(["
|
|
168
|
+
return props.$weight === "light" && (0, _styledComponents.css)(["", ""], {
|
|
169
|
+
"fontWeight": "300"
|
|
170
|
+
});
|
|
141
171
|
}, function (props) {
|
|
142
|
-
return props.$weight === "medium" && (0, _styledComponents.css)(["
|
|
172
|
+
return props.$weight === "medium" && (0, _styledComponents.css)(["", ""], {
|
|
173
|
+
"fontWeight": "500"
|
|
174
|
+
});
|
|
143
175
|
}, function (props) {
|
|
144
|
-
return props.$weight === "bold" && (0, _styledComponents.css)(["
|
|
176
|
+
return props.$weight === "bold" && (0, _styledComponents.css)(["", ""], {
|
|
177
|
+
"fontWeight": "700"
|
|
178
|
+
});
|
|
145
179
|
});
|
|
146
180
|
|
|
147
181
|
exports.StyledTypography = StyledTypography;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Typography/Styles.ts"],"names":["colors","primary","secondary","tertiary","quaternary","success","alert","StyledTypography","styled","div","FontStyle","BoxSizingStyle","props","$color","$variant","css","$italic","$tabularNums","$letterSpacing","$lineHeight","$align","$decoration","$transform","$overflow","$whitespace","$wordBreak","$weight","displayName"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface IStyledTypographyProps {\n $variant:\n | \"Title 1\"\n | \"Title 2\"\n | \"Header 2\"\n | \"Header 3\"\n | \"Body 1\"\n | \"Body 2\"\n | \"Caption 1\"\n | \"Caption 2\";\n $italic: boolean;\n $tabularNums: boolean;\n $letterSpacing: \"tight\" | \"regular\" | \"wide\";\n $lineHeight: \"tight\" | \"regular\" | \"loose\";\n $align: \"left\" | \"center\" | \"right\" | \"justify\";\n $decoration: \"underline\" | \"line-through\" | \"none\";\n $transform: \"uppercase\" | \"lowercase\" | \"capitalize\" | \"regular\";\n $overflow: \"truncate\" | \"ellipsis\" | \"visible\";\n $whitespace?:\n | \"regular\"\n | \"no-wrap\"\n | \"pre\"\n | \"pre-wrap\"\n | \"pre-line\"\n | \"break-spaces\";\n $wordBreak: \"regular\" | \"smart\" | \"all\";\n $color:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"quaternary\"\n | \"theme-primary\"\n | \"theme-secondary\"\n | \"only-white\"\n | \"only-black\"\n | \"page-paper\"\n | \"success\"\n | \"alert\";\n $weight?: \"light\" | \"regular\" | \"medium\" | \"bold\";\n}\n\nconst colors = {\n primary: tw`tw-text-theme-900`,\n secondary: tw`tw-text-theme-700`,\n tertiary: tw`tw-text-theme-600`,\n quaternary: tw`tw-text-theme-transparent-500`,\n \"theme-primary\": tw`tw-text-primary`,\n \"theme-secondary\": tw`tw-text-secondary`,\n \"page-paper\": tw`tw-text-page-paper-main`,\n \"only-white\": tw`tw-text-only-white`,\n \"only-black\": tw`tw-text-only-black`,\n success: tw`tw-text-success`,\n alert: tw`tw-text-alert`,\n};\n\nexport const StyledTypography = styled.div<IStyledTypographyProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n\n //color\n ${(props) => colors[props.$color]}\n\n //variant - font size\n ${(props) =>\n props.$variant === \"Title 1\" &&\n css`\n font-size: 2rem;\n `}\n ${(props) =>\n props.$variant === \"Title 2\" &&\n css`\n font-size: 1.625rem;\n `}\n ${(props) =>\n props.$variant === \"Header 2\" &&\n css`\n font-size: 1.125rem;\n `}\n ${(props) =>\n (props.$variant === \"Header 3\" || props.$variant === \"Body 1\") &&\n css`\n font-size: 1rem;\n `}\n ${(props) =>\n props.$variant === \"Body 2\" &&\n css`\n font-size: 0.875rem;\n `}\n ${(props) =>\n props.$variant === \"Caption 1\" &&\n css`\n font-size: 0.75rem;\n `}\n ${(props) =>\n props.$variant === \"Caption 2\" &&\n css`\n font-size: 0.625rem;\n `}\n\n //italic\n ${(props) =>\n props.$italic\n ? css`\n font-style: italic;\n `\n : css`\n font-style: normal;\n `}\n\n //tabularNums\n ${(props) =>\n props.$tabularNums\n ? css`\n font-variant-numeric: tabular-nums;\n `\n : css`\n font-variant-numeric: normal;\n `}\n\n //letterSpacing\n ${(props) =>\n props.$letterSpacing === \"regular\" &&\n css`\n letter-spacing: 0.02em;\n `}\n ${(props) =>\n props.$letterSpacing === \"tight\" &&\n css`\n letter-spacing: 0em;\n `}\n ${(props) =>\n props.$letterSpacing === \"wide\" &&\n css`\n letter-spacing: 0.08em;\n `}\n\n //lineHeight\n ${(props) =>\n props.$lineHeight === \"regular\" &&\n css`\n line-height: 1.375;\n `}\n ${(props) =>\n props.$lineHeight === \"tight\" &&\n css`\n line-height: 1;\n `}\n ${(props) =>\n props.$lineHeight === \"loose\" &&\n css`\n line-height: 1.625;\n `}\n\n //align\n ${(props) =>\n props.$align === \"left\" &&\n css`\n text-align: left;\n `}\n ${(props) =>\n props.$align === \"right\" &&\n css`\n text-align: right;\n `}\n ${(props) =>\n props.$align === \"center\" &&\n css`\n text-align: center;\n `}\n ${(props) =>\n props.$align === \"justify\" &&\n css`\n text-align: justify;\n `}\n\n //decoration\n ${(props) =>\n props.$decoration === \"none\" &&\n css`\n text-decoration: none;\n `}\n ${(props) =>\n props.$decoration === \"underline\" &&\n css`\n text-decoration: underline;\n `}\n ${(props) =>\n props.$decoration === \"line-through\" &&\n css`\n text-decoration: line-through;\n `}\n\n //transform\n ${(props) =>\n props.$transform === \"regular\" &&\n css`\n text-transform: none;\n `}\n ${(props) =>\n props.$transform === \"uppercase\" &&\n css`\n text-transform: uppercase;\n `}\n ${(props) =>\n props.$transform === \"lowercase\" &&\n css`\n text-transform: lowercase;\n `}\n ${(props) =>\n props.$transform === \"capitalize\" &&\n css`\n text-transform: capitalize;\n `}\n\n //overflow\n ${(props) =>\n props.$overflow === \"visible\" &&\n css`\n overflow: visible;\n `}\n ${(props) =>\n props.$overflow === \"ellipsis\" &&\n css`\n text-overflow: ellipsis;\n `}\n ${(props) =>\n props.$overflow === \"truncate\" &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `}\n\n //whitespace\n ${(props) =>\n props.$whitespace === \"regular\" &&\n css`\n white-space: normal;\n `}\n ${(props) =>\n props.$whitespace === \"no-wrap\" &&\n css`\n white-space: nowrap;\n `}\n ${(props) =>\n props.$whitespace === \"pre\" &&\n css`\n white-space: pre;\n `}\n ${(props) =>\n props.$whitespace === \"pre-wrap\" &&\n css`\n white-space: pre-wrap;\n `}\n ${(props) =>\n props.$whitespace === \"pre-line\" &&\n css`\n white-space: pre-line;\n `}\n ${(props) =>\n props.$whitespace === \"break-spaces\" &&\n css`\n white-space: break-spaces;\n `}\n\n //wordBreak\n ${(props) =>\n props.$wordBreak === \"regular\" &&\n css`\n overflow-wrap: normal;\n word-break: normal;\n `}\n ${(props) =>\n props.$wordBreak === \"smart\" &&\n css`\n overflow-wrap: break-word;\n `}\n ${(props) =>\n props.$wordBreak === \"all\" &&\n css`\n word-break: break-all;\n `}\n\n //weight\n ${(props) =>\n props.$weight === \"regular\" &&\n css`\n font-weight: 400;\n `}\n ${(props) =>\n props.$weight === \"light\" &&\n css`\n font-weight: 300;\n `}\n ${(props) =>\n props.$weight === \"medium\" &&\n css`\n font-weight: 500;\n `}\n ${(props) =>\n props.$weight === \"bold\" &&\n css`\n font-weight: 700;\n `}\n`;\n\nStyledTypography.displayName = \"StyledTypography\";\n"],"file":"Styles.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Typography/Styles.ts"],"names":["colors","primary","secondary","tertiary","quaternary","success","alert","StyledTypography","styled","div","FontStyle","BoxSizingStyle","props","$color","$variant","css","$italic","$tabularNums","$letterSpacing","$lineHeight","$align","$decoration","$transform","$overflow","$whitespace","$wordBreak","$weight","displayName"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface IStyledTypographyProps {\n $variant:\n | \"Title 1\"\n | \"Title 2\"\n | \"Header 2\"\n | \"Header 3\"\n | \"Body 1\"\n | \"Body 2\"\n | \"Caption 1\"\n | \"Caption 2\";\n $italic: boolean;\n $tabularNums: boolean;\n $letterSpacing: \"tight\" | \"regular\" | \"wide\";\n $lineHeight: \"tight\" | \"regular\" | \"loose\";\n $align: \"left\" | \"center\" | \"right\" | \"justify\";\n $decoration: \"underline\" | \"line-through\" | \"none\";\n $transform: \"uppercase\" | \"lowercase\" | \"capitalize\" | \"regular\";\n $overflow: \"truncate\" | \"ellipsis\" | \"visible\";\n $whitespace?:\n | \"regular\"\n | \"no-wrap\"\n | \"pre\"\n | \"pre-wrap\"\n | \"pre-line\"\n | \"break-spaces\";\n $wordBreak: \"regular\" | \"smart\" | \"all\";\n $color:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"quaternary\"\n | \"theme-primary\"\n | \"theme-secondary\"\n | \"only-white\"\n | \"only-black\"\n | \"page-paper\"\n | \"success\"\n | \"alert\";\n $weight?: \"light\" | \"regular\" | \"medium\" | \"bold\";\n}\n\nconst colors = {\n primary: tw`tw-text-theme-900`,\n secondary: tw`tw-text-theme-700`,\n tertiary: tw`tw-text-theme-600`,\n quaternary: tw`tw-text-theme-transparent-500`,\n \"theme-primary\": tw`tw-text-primary`,\n \"theme-secondary\": tw`tw-text-secondary`,\n \"page-paper\": tw`tw-text-page-paper-main`,\n \"only-white\": tw`tw-text-only-white`,\n \"only-black\": tw`tw-text-only-black`,\n success: tw`tw-text-success`,\n alert: tw`tw-text-alert`,\n};\n\nexport const StyledTypography = styled.div<IStyledTypographyProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n\n //color\n ${(props) => colors[props.$color]}\n\n //variant - font size\n ${(props) =>\n props.$variant === \"Title 1\" &&\n css`\n ${tw`tw-text-title-1`}\n `}\n ${(props) =>\n props.$variant === \"Title 2\" &&\n css`\n ${tw`tw-text-title-2`}\n `}\n ${(props) =>\n props.$variant === \"Header 2\" &&\n css`\n ${tw`tw-text-header-2`}\n `}\n ${(props) =>\n (props.$variant === \"Header 3\" || props.$variant === \"Body 1\") &&\n css`\n ${tw`tw-text-body-1`}\n `}\n ${(props) =>\n props.$variant === \"Body 2\" &&\n css`\n ${tw`tw-text-body-2`}\n `}\n ${(props) =>\n props.$variant === \"Caption 1\" &&\n css`\n ${tw`tw-text-caption-1`}\n `}\n ${(props) =>\n props.$variant === \"Caption 2\" &&\n css`\n ${tw`tw-text-caption-2`}\n `}\n\n //italic\n ${(props) =>\n props.$italic\n ? css`\n font-style: italic;\n `\n : css`\n font-style: normal;\n `}\n\n //tabularNums\n ${(props) =>\n props.$tabularNums\n ? css`\n font-variant-numeric: tabular-nums;\n `\n : css`\n font-variant-numeric: normal;\n `}\n\n //letterSpacing\n ${(props) =>\n props.$letterSpacing === \"regular\" &&\n css`\n ${tw`tw-tracking-regular`}\n `}\n ${(props) =>\n props.$letterSpacing === \"tight\" &&\n css`\n ${tw`tw-tracking-tight`}\n `}\n ${(props) =>\n props.$letterSpacing === \"wide\" &&\n css`\n ${tw`tw-tracking-wide`}\n `}\n\n //lineHeight\n ${(props) =>\n props.$lineHeight === \"regular\" &&\n css`\n ${tw`tw-leading-regular`}\n `}\n ${(props) =>\n props.$lineHeight === \"tight\" &&\n css`\n ${tw`tw-leading-tight`}\n `}\n ${(props) =>\n props.$lineHeight === \"loose\" &&\n css`\n ${tw`tw-leading-loose`}\n `}\n\n //align\n ${(props) =>\n props.$align === \"left\" &&\n css`\n text-align: left;\n `}\n ${(props) =>\n props.$align === \"right\" &&\n css`\n text-align: right;\n `}\n ${(props) =>\n props.$align === \"center\" &&\n css`\n text-align: center;\n `}\n ${(props) =>\n props.$align === \"justify\" &&\n css`\n text-align: justify;\n `}\n\n //decoration\n ${(props) =>\n props.$decoration === \"none\" &&\n css`\n text-decoration: none;\n `}\n ${(props) =>\n props.$decoration === \"underline\" &&\n css`\n text-decoration: underline;\n `}\n ${(props) =>\n props.$decoration === \"line-through\" &&\n css`\n text-decoration: line-through;\n `}\n\n //transform\n ${(props) =>\n props.$transform === \"regular\" &&\n css`\n text-transform: none;\n `}\n ${(props) =>\n props.$transform === \"uppercase\" &&\n css`\n text-transform: uppercase;\n `}\n ${(props) =>\n props.$transform === \"lowercase\" &&\n css`\n text-transform: lowercase;\n `}\n ${(props) =>\n props.$transform === \"capitalize\" &&\n css`\n text-transform: capitalize;\n `}\n\n //overflow\n ${(props) =>\n props.$overflow === \"visible\" &&\n css`\n overflow: visible;\n `}\n ${(props) =>\n props.$overflow === \"ellipsis\" &&\n css`\n text-overflow: ellipsis;\n `}\n ${(props) =>\n props.$overflow === \"truncate\" &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `}\n\n //whitespace\n ${(props) =>\n props.$whitespace === \"regular\" &&\n css`\n white-space: normal;\n `}\n ${(props) =>\n props.$whitespace === \"no-wrap\" &&\n css`\n white-space: nowrap;\n `}\n ${(props) =>\n props.$whitespace === \"pre\" &&\n css`\n white-space: pre;\n `}\n ${(props) =>\n props.$whitespace === \"pre-wrap\" &&\n css`\n white-space: pre-wrap;\n `}\n ${(props) =>\n props.$whitespace === \"pre-line\" &&\n css`\n white-space: pre-line;\n `}\n ${(props) =>\n props.$whitespace === \"break-spaces\" &&\n css`\n white-space: break-spaces;\n `}\n\n //wordBreak\n ${(props) =>\n props.$wordBreak === \"regular\" &&\n css`\n overflow-wrap: normal;\n word-break: normal;\n `}\n ${(props) =>\n props.$wordBreak === \"smart\" &&\n css`\n overflow-wrap: break-word;\n `}\n ${(props) =>\n props.$wordBreak === \"all\" &&\n css`\n word-break: break-all;\n `}\n\n //weight\n ${(props) =>\n props.$weight === \"regular\" &&\n css`\n ${tw`tw-font-regular`}\n `}\n ${(props) =>\n props.$weight === \"light\" &&\n css`\n ${tw`tw-font-light`}\n `}\n ${(props) =>\n props.$weight === \"medium\" &&\n css`\n ${tw`tw-font-medium`}\n `}\n ${(props) =>\n props.$weight === \"bold\" &&\n css`\n ${tw`tw-font-bold`}\n `}\n`;\n\nStyledTypography.displayName = \"StyledTypography\";\n"],"file":"Styles.js"}
|
|
@@ -4,10 +4,14 @@ import { FontStyle } from "../FontStyle";
|
|
|
4
4
|
export var StyledInput = styled.input.withConfig({
|
|
5
5
|
displayName: "Styles__StyledInput",
|
|
6
6
|
componentId: "sc-ce8kcp-0"
|
|
7
|
-
})(["border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);
|
|
7
|
+
})(["", " border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);padding:4px 10px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " &::placeholder{color:var(--color-theme-600);}"], {
|
|
8
|
+
"fontSize": "0.875rem"
|
|
9
|
+
}, FontStyle, BoxSizingStyle, function (props) {
|
|
8
10
|
return props.$size === "small" && css(["border-radius:6px;height:24px;"]);
|
|
9
11
|
}, function (props) {
|
|
10
|
-
return props.$size === "big" && css(["height:40px;
|
|
12
|
+
return props.$size === "big" && css(["", " height:40px;"], {
|
|
13
|
+
"fontSize": "1rem"
|
|
14
|
+
});
|
|
11
15
|
}, function (props) {
|
|
12
16
|
return props.disabled ? css(["", ""], {
|
|
13
17
|
"cursor": "not-allowed",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Input/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","StyledInput","input","props","$size","disabled","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAGA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA,OAAO,IAAMC,WAAW,GAAGJ,MAAM,CAACK,KAAV;AAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Input/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","StyledInput","input","props","$size","disabled","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAGA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA,OAAO,IAAMC,WAAW,GAAGJ,MAAM,CAACK,KAAV;AAAA;AAAA;AAAA,iTAGlB;AAAA;AAAA,CAHkB,EAcpBF,SAdoB,EAepBD,cAfoB,EAiBpB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,IACAN,GADA,oCADA;AAAA,CAjBoB,EAwBpB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,IACAN,GADA,wBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAxBoB,EA+BpB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACE,QAAN,GACIP,GADJ,WAEU;AAAA;AAAA;AAAA;AAAA,GAFV,IAIIA,GAJJ,+CAMY;AAAA;AAAA,GANZ,EAUY;AAAA;AAAA,GAVZ,EAcY;AAAA;AAAA,GAdZ,CADA;AAAA,CA/BoB,CAAjB;AAuDPG,WAAW,CAACK,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { InputSize } from \"./Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledInput = styled.input<{\n $size?: InputSize;\n}>`\n ${tw`tw-text-body-2`}\n border: 1px solid var(--border-primary);\n border-radius: 10px;\n color: var(--color-theme-900);\n padding: 4px 10px 6px 8px;\n height: 32px;\n background-color: var(--input-background-color);\n transition: all 0.3s ease;\n width: 360px;\n outline: none;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n ${tw`tw-text-body-1`}\n height: 40px;\n `}\n\n ${(props) =>\n props.disabled\n ? css`\n ${tw`tw-cursor-not-allowed tw-opacity-50 tw-border-theme-400`}\n `\n : css`\n &:hover {\n ${tw`tw-border-primary`}\n }\n\n &:active {\n ${tw`tw-border-primary`}\n }\n\n &:focus {\n ${tw`tw-border-primary`}\n }\n `}\n\n &::placeholder {\n color: var(--color-theme-600);\n }\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}
|
|
@@ -4,7 +4,9 @@ import { FontStyle } from "../FontStyle";
|
|
|
4
4
|
export var StyledTextarea = styled.textarea.withConfig({
|
|
5
5
|
displayName: "Styles__StyledTextarea",
|
|
6
6
|
componentId: "sc-m6jqw8-0"
|
|
7
|
-
})(["border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);
|
|
7
|
+
})(["", " border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);padding:4px 10px 6px 8px;height:auto;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;min-height:90px;", " ", " ", " &:active,&:focus{outline:none !important;", "}&:focus{box-shadow:none;}&::placeholder{color:var(--color-theme-600);}", ""], {
|
|
8
|
+
"fontSize": "0.875rem"
|
|
9
|
+
}, FontStyle, BoxSizingStyle, function (props) {
|
|
8
10
|
return !props.disabled && css(["&:hover{outline:none !important;", "}"], {
|
|
9
11
|
"borderColor": "var(--color-primary)"
|
|
10
12
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Textarea/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","StyledTextarea","textarea","props","disabled","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAOA,OAAO,IAAMC,cAAc,GAAGJ,MAAM,CAACK,QAAV;AAAA;AAAA;AAAA
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Textarea/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","StyledTextarea","textarea","props","disabled","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAOA,OAAO,IAAMC,cAAc,GAAGJ,MAAM,CAACK,QAAV;AAAA;AAAA;AAAA,qXACrB;AAAA;AAAA,CADqB,EAWvBF,SAXuB,EAYvBD,cAZuB,EAcvB,UAACI,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,QAAP,IACAN,GADA,4CAIQ;AAAA;AAAA,GAJR,CADA;AAAA,CAduB,EAyBnB;AAAA;AAAA,CAzBmB,EAoCvB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,IACAN,GADA,qEAGM;AAAA;AAAA;AAAA;AAAA,GAHN,CADA;AAAA,CApCuB,CAApB;AAgDPG,cAAc,CAACI,WAAf,GAA6B,gBAA7B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport tw from \"twin.macro\";\n\ninterface StyledTextareaProps {\n disabled: boolean;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n ${tw`tw-text-body-2`}\n border: 1px solid var(--border-primary);\n border-radius: 10px;\n color: var(--color-theme-900);\n padding: 4px 10px 6px 8px;\n height: auto;\n background-color: var(--input-background-color);\n transition: all 0.3s ease;\n width: 360px;\n min-height: 90px;\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n !props.disabled &&\n css`\n &:hover {\n outline: none !important;\n ${tw`tw-border-primary`}\n }\n `}\n\n &:active, &:focus {\n outline: none !important;\n ${tw`tw-border-primary`}\n }\n\n &:focus {\n box-shadow: none;\n }\n\n &::placeholder {\n color: var(--color-theme-600);\n }\n\n ${(props) =>\n props.disabled &&\n css`\n outline: none;\n ${tw`tw-cursor-not-allowed tw-opacity-50 tw-border-theme-400`}\n\n &:hover {\n border-color: var(--border-primary);\n }\n `}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"file":"Styles.js"}
|
|
@@ -42,35 +42,61 @@ export var StyledTypography = styled.div.withConfig({
|
|
|
42
42
|
})(["", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
43
43
|
return colors[props.$color];
|
|
44
44
|
}, function (props) {
|
|
45
|
-
return props.$variant === "Title 1" && css(["
|
|
45
|
+
return props.$variant === "Title 1" && css(["", ""], {
|
|
46
|
+
"fontSize": "2rem"
|
|
47
|
+
});
|
|
46
48
|
}, function (props) {
|
|
47
|
-
return props.$variant === "Title 2" && css(["
|
|
49
|
+
return props.$variant === "Title 2" && css(["", ""], {
|
|
50
|
+
"fontSize": "1.675rem"
|
|
51
|
+
});
|
|
48
52
|
}, function (props) {
|
|
49
|
-
return props.$variant === "Header 2" && css(["
|
|
53
|
+
return props.$variant === "Header 2" && css(["", ""], {
|
|
54
|
+
"fontSize": "1.125rem"
|
|
55
|
+
});
|
|
50
56
|
}, function (props) {
|
|
51
|
-
return (props.$variant === "Header 3" || props.$variant === "Body 1") && css(["
|
|
57
|
+
return (props.$variant === "Header 3" || props.$variant === "Body 1") && css(["", ""], {
|
|
58
|
+
"fontSize": "1rem"
|
|
59
|
+
});
|
|
52
60
|
}, function (props) {
|
|
53
|
-
return props.$variant === "Body 2" && css(["
|
|
61
|
+
return props.$variant === "Body 2" && css(["", ""], {
|
|
62
|
+
"fontSize": "0.875rem"
|
|
63
|
+
});
|
|
54
64
|
}, function (props) {
|
|
55
|
-
return props.$variant === "Caption 1" && css(["
|
|
65
|
+
return props.$variant === "Caption 1" && css(["", ""], {
|
|
66
|
+
"fontSize": "0.75rem"
|
|
67
|
+
});
|
|
56
68
|
}, function (props) {
|
|
57
|
-
return props.$variant === "Caption 2" && css(["
|
|
69
|
+
return props.$variant === "Caption 2" && css(["", ""], {
|
|
70
|
+
"fontSize": "0.625rem"
|
|
71
|
+
});
|
|
58
72
|
}, function (props) {
|
|
59
73
|
return props.$italic ? css(["font-style:italic;"]) : css(["font-style:normal;"]);
|
|
60
74
|
}, function (props) {
|
|
61
75
|
return props.$tabularNums ? css(["font-variant-numeric:tabular-nums;"]) : css(["font-variant-numeric:normal;"]);
|
|
62
76
|
}, function (props) {
|
|
63
|
-
return props.$letterSpacing === "regular" && css(["
|
|
77
|
+
return props.$letterSpacing === "regular" && css(["", ""], {
|
|
78
|
+
"letterSpacing": "0.02em"
|
|
79
|
+
});
|
|
64
80
|
}, function (props) {
|
|
65
|
-
return props.$letterSpacing === "tight" && css(["
|
|
81
|
+
return props.$letterSpacing === "tight" && css(["", ""], {
|
|
82
|
+
"letterSpacing": "0em"
|
|
83
|
+
});
|
|
66
84
|
}, function (props) {
|
|
67
|
-
return props.$letterSpacing === "wide" && css(["
|
|
85
|
+
return props.$letterSpacing === "wide" && css(["", ""], {
|
|
86
|
+
"letterSpacing": "0.08em"
|
|
87
|
+
});
|
|
68
88
|
}, function (props) {
|
|
69
|
-
return props.$lineHeight === "regular" && css(["
|
|
89
|
+
return props.$lineHeight === "regular" && css(["", ""], {
|
|
90
|
+
"lineHeight": "1.375"
|
|
91
|
+
});
|
|
70
92
|
}, function (props) {
|
|
71
|
-
return props.$lineHeight === "tight" && css(["
|
|
93
|
+
return props.$lineHeight === "tight" && css(["", ""], {
|
|
94
|
+
"lineHeight": "1"
|
|
95
|
+
});
|
|
72
96
|
}, function (props) {
|
|
73
|
-
return props.$lineHeight === "loose" && css(["
|
|
97
|
+
return props.$lineHeight === "loose" && css(["", ""], {
|
|
98
|
+
"lineHeight": "1.625"
|
|
99
|
+
});
|
|
74
100
|
}, function (props) {
|
|
75
101
|
return props.$align === "left" && css(["text-align:left;"]);
|
|
76
102
|
}, function (props) {
|
|
@@ -118,13 +144,21 @@ export var StyledTypography = styled.div.withConfig({
|
|
|
118
144
|
}, function (props) {
|
|
119
145
|
return props.$wordBreak === "all" && css(["word-break:break-all;"]);
|
|
120
146
|
}, function (props) {
|
|
121
|
-
return props.$weight === "regular" && css(["
|
|
147
|
+
return props.$weight === "regular" && css(["", ""], {
|
|
148
|
+
"fontWeight": "400"
|
|
149
|
+
});
|
|
122
150
|
}, function (props) {
|
|
123
|
-
return props.$weight === "light" && css(["
|
|
151
|
+
return props.$weight === "light" && css(["", ""], {
|
|
152
|
+
"fontWeight": "300"
|
|
153
|
+
});
|
|
124
154
|
}, function (props) {
|
|
125
|
-
return props.$weight === "medium" && css(["
|
|
155
|
+
return props.$weight === "medium" && css(["", ""], {
|
|
156
|
+
"fontWeight": "500"
|
|
157
|
+
});
|
|
126
158
|
}, function (props) {
|
|
127
|
-
return props.$weight === "bold" && css(["
|
|
159
|
+
return props.$weight === "bold" && css(["", ""], {
|
|
160
|
+
"fontWeight": "700"
|
|
161
|
+
});
|
|
128
162
|
});
|
|
129
163
|
StyledTypography.displayName = "StyledTypography";
|
|
130
164
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Typography/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","colors","primary","secondary","tertiary","quaternary","success","alert","StyledTypography","div","props","$color","$variant","$italic","$tabularNums","$letterSpacing","$lineHeight","$align","$decoration","$transform","$overflow","$whitespace","$wordBreak","$weight","displayName"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface IStyledTypographyProps {\n $variant:\n | \"Title 1\"\n | \"Title 2\"\n | \"Header 2\"\n | \"Header 3\"\n | \"Body 1\"\n | \"Body 2\"\n | \"Caption 1\"\n | \"Caption 2\";\n $italic: boolean;\n $tabularNums: boolean;\n $letterSpacing: \"tight\" | \"regular\" | \"wide\";\n $lineHeight: \"tight\" | \"regular\" | \"loose\";\n $align: \"left\" | \"center\" | \"right\" | \"justify\";\n $decoration: \"underline\" | \"line-through\" | \"none\";\n $transform: \"uppercase\" | \"lowercase\" | \"capitalize\" | \"regular\";\n $overflow: \"truncate\" | \"ellipsis\" | \"visible\";\n $whitespace?:\n | \"regular\"\n | \"no-wrap\"\n | \"pre\"\n | \"pre-wrap\"\n | \"pre-line\"\n | \"break-spaces\";\n $wordBreak: \"regular\" | \"smart\" | \"all\";\n $color:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"quaternary\"\n | \"theme-primary\"\n | \"theme-secondary\"\n | \"only-white\"\n | \"only-black\"\n | \"page-paper\"\n | \"success\"\n | \"alert\";\n $weight?: \"light\" | \"regular\" | \"medium\" | \"bold\";\n}\n\nconst colors = {\n primary: tw`tw-text-theme-900`,\n secondary: tw`tw-text-theme-700`,\n tertiary: tw`tw-text-theme-600`,\n quaternary: tw`tw-text-theme-transparent-500`,\n \"theme-primary\": tw`tw-text-primary`,\n \"theme-secondary\": tw`tw-text-secondary`,\n \"page-paper\": tw`tw-text-page-paper-main`,\n \"only-white\": tw`tw-text-only-white`,\n \"only-black\": tw`tw-text-only-black`,\n success: tw`tw-text-success`,\n alert: tw`tw-text-alert`,\n};\n\nexport const StyledTypography = styled.div<IStyledTypographyProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n\n //color\n ${(props) => colors[props.$color]}\n\n //variant - font size\n ${(props) =>\n props.$variant === \"Title 1\" &&\n css`\n font-size: 2rem;\n `}\n ${(props) =>\n props.$variant === \"Title 2\" &&\n css`\n font-size: 1.625rem;\n `}\n ${(props) =>\n props.$variant === \"Header 2\" &&\n css`\n font-size: 1.125rem;\n `}\n ${(props) =>\n (props.$variant === \"Header 3\" || props.$variant === \"Body 1\") &&\n css`\n font-size: 1rem;\n `}\n ${(props) =>\n props.$variant === \"Body 2\" &&\n css`\n font-size: 0.875rem;\n `}\n ${(props) =>\n props.$variant === \"Caption 1\" &&\n css`\n font-size: 0.75rem;\n `}\n ${(props) =>\n props.$variant === \"Caption 2\" &&\n css`\n font-size: 0.625rem;\n `}\n\n //italic\n ${(props) =>\n props.$italic\n ? css`\n font-style: italic;\n `\n : css`\n font-style: normal;\n `}\n\n //tabularNums\n ${(props) =>\n props.$tabularNums\n ? css`\n font-variant-numeric: tabular-nums;\n `\n : css`\n font-variant-numeric: normal;\n `}\n\n //letterSpacing\n ${(props) =>\n props.$letterSpacing === \"regular\" &&\n css`\n letter-spacing: 0.02em;\n `}\n ${(props) =>\n props.$letterSpacing === \"tight\" &&\n css`\n letter-spacing: 0em;\n `}\n ${(props) =>\n props.$letterSpacing === \"wide\" &&\n css`\n letter-spacing: 0.08em;\n `}\n\n //lineHeight\n ${(props) =>\n props.$lineHeight === \"regular\" &&\n css`\n line-height: 1.375;\n `}\n ${(props) =>\n props.$lineHeight === \"tight\" &&\n css`\n line-height: 1;\n `}\n ${(props) =>\n props.$lineHeight === \"loose\" &&\n css`\n line-height: 1.625;\n `}\n\n //align\n ${(props) =>\n props.$align === \"left\" &&\n css`\n text-align: left;\n `}\n ${(props) =>\n props.$align === \"right\" &&\n css`\n text-align: right;\n `}\n ${(props) =>\n props.$align === \"center\" &&\n css`\n text-align: center;\n `}\n ${(props) =>\n props.$align === \"justify\" &&\n css`\n text-align: justify;\n `}\n\n //decoration\n ${(props) =>\n props.$decoration === \"none\" &&\n css`\n text-decoration: none;\n `}\n ${(props) =>\n props.$decoration === \"underline\" &&\n css`\n text-decoration: underline;\n `}\n ${(props) =>\n props.$decoration === \"line-through\" &&\n css`\n text-decoration: line-through;\n `}\n\n //transform\n ${(props) =>\n props.$transform === \"regular\" &&\n css`\n text-transform: none;\n `}\n ${(props) =>\n props.$transform === \"uppercase\" &&\n css`\n text-transform: uppercase;\n `}\n ${(props) =>\n props.$transform === \"lowercase\" &&\n css`\n text-transform: lowercase;\n `}\n ${(props) =>\n props.$transform === \"capitalize\" &&\n css`\n text-transform: capitalize;\n `}\n\n //overflow\n ${(props) =>\n props.$overflow === \"visible\" &&\n css`\n overflow: visible;\n `}\n ${(props) =>\n props.$overflow === \"ellipsis\" &&\n css`\n text-overflow: ellipsis;\n `}\n ${(props) =>\n props.$overflow === \"truncate\" &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `}\n\n //whitespace\n ${(props) =>\n props.$whitespace === \"regular\" &&\n css`\n white-space: normal;\n `}\n ${(props) =>\n props.$whitespace === \"no-wrap\" &&\n css`\n white-space: nowrap;\n `}\n ${(props) =>\n props.$whitespace === \"pre\" &&\n css`\n white-space: pre;\n `}\n ${(props) =>\n props.$whitespace === \"pre-wrap\" &&\n css`\n white-space: pre-wrap;\n `}\n ${(props) =>\n props.$whitespace === \"pre-line\" &&\n css`\n white-space: pre-line;\n `}\n ${(props) =>\n props.$whitespace === \"break-spaces\" &&\n css`\n white-space: break-spaces;\n `}\n\n //wordBreak\n ${(props) =>\n props.$wordBreak === \"regular\" &&\n css`\n overflow-wrap: normal;\n word-break: normal;\n `}\n ${(props) =>\n props.$wordBreak === \"smart\" &&\n css`\n overflow-wrap: break-word;\n `}\n ${(props) =>\n props.$wordBreak === \"all\" &&\n css`\n word-break: break-all;\n `}\n\n //weight\n ${(props) =>\n props.$weight === \"regular\" &&\n css`\n font-weight: 400;\n `}\n ${(props) =>\n props.$weight === \"light\" &&\n css`\n font-weight: 300;\n `}\n ${(props) =>\n props.$weight === \"medium\" &&\n css`\n font-weight: 500;\n `}\n ${(props) =>\n props.$weight === \"bold\" &&\n css`\n font-weight: 700;\n `}\n`;\n\nStyledTypography.displayName = \"StyledTypography\";\n"],"file":"Styles.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Typography/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","colors","primary","secondary","tertiary","quaternary","success","alert","StyledTypography","div","props","$color","$variant","$italic","$tabularNums","$letterSpacing","$lineHeight","$align","$decoration","$transform","$overflow","$whitespace","$wordBreak","$weight","displayName"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface IStyledTypographyProps {\n $variant:\n | \"Title 1\"\n | \"Title 2\"\n | \"Header 2\"\n | \"Header 3\"\n | \"Body 1\"\n | \"Body 2\"\n | \"Caption 1\"\n | \"Caption 2\";\n $italic: boolean;\n $tabularNums: boolean;\n $letterSpacing: \"tight\" | \"regular\" | \"wide\";\n $lineHeight: \"tight\" | \"regular\" | \"loose\";\n $align: \"left\" | \"center\" | \"right\" | \"justify\";\n $decoration: \"underline\" | \"line-through\" | \"none\";\n $transform: \"uppercase\" | \"lowercase\" | \"capitalize\" | \"regular\";\n $overflow: \"truncate\" | \"ellipsis\" | \"visible\";\n $whitespace?:\n | \"regular\"\n | \"no-wrap\"\n | \"pre\"\n | \"pre-wrap\"\n | \"pre-line\"\n | \"break-spaces\";\n $wordBreak: \"regular\" | \"smart\" | \"all\";\n $color:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"quaternary\"\n | \"theme-primary\"\n | \"theme-secondary\"\n | \"only-white\"\n | \"only-black\"\n | \"page-paper\"\n | \"success\"\n | \"alert\";\n $weight?: \"light\" | \"regular\" | \"medium\" | \"bold\";\n}\n\nconst colors = {\n primary: tw`tw-text-theme-900`,\n secondary: tw`tw-text-theme-700`,\n tertiary: tw`tw-text-theme-600`,\n quaternary: tw`tw-text-theme-transparent-500`,\n \"theme-primary\": tw`tw-text-primary`,\n \"theme-secondary\": tw`tw-text-secondary`,\n \"page-paper\": tw`tw-text-page-paper-main`,\n \"only-white\": tw`tw-text-only-white`,\n \"only-black\": tw`tw-text-only-black`,\n success: tw`tw-text-success`,\n alert: tw`tw-text-alert`,\n};\n\nexport const StyledTypography = styled.div<IStyledTypographyProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n\n //color\n ${(props) => colors[props.$color]}\n\n //variant - font size\n ${(props) =>\n props.$variant === \"Title 1\" &&\n css`\n ${tw`tw-text-title-1`}\n `}\n ${(props) =>\n props.$variant === \"Title 2\" &&\n css`\n ${tw`tw-text-title-2`}\n `}\n ${(props) =>\n props.$variant === \"Header 2\" &&\n css`\n ${tw`tw-text-header-2`}\n `}\n ${(props) =>\n (props.$variant === \"Header 3\" || props.$variant === \"Body 1\") &&\n css`\n ${tw`tw-text-body-1`}\n `}\n ${(props) =>\n props.$variant === \"Body 2\" &&\n css`\n ${tw`tw-text-body-2`}\n `}\n ${(props) =>\n props.$variant === \"Caption 1\" &&\n css`\n ${tw`tw-text-caption-1`}\n `}\n ${(props) =>\n props.$variant === \"Caption 2\" &&\n css`\n ${tw`tw-text-caption-2`}\n `}\n\n //italic\n ${(props) =>\n props.$italic\n ? css`\n font-style: italic;\n `\n : css`\n font-style: normal;\n `}\n\n //tabularNums\n ${(props) =>\n props.$tabularNums\n ? css`\n font-variant-numeric: tabular-nums;\n `\n : css`\n font-variant-numeric: normal;\n `}\n\n //letterSpacing\n ${(props) =>\n props.$letterSpacing === \"regular\" &&\n css`\n ${tw`tw-tracking-regular`}\n `}\n ${(props) =>\n props.$letterSpacing === \"tight\" &&\n css`\n ${tw`tw-tracking-tight`}\n `}\n ${(props) =>\n props.$letterSpacing === \"wide\" &&\n css`\n ${tw`tw-tracking-wide`}\n `}\n\n //lineHeight\n ${(props) =>\n props.$lineHeight === \"regular\" &&\n css`\n ${tw`tw-leading-regular`}\n `}\n ${(props) =>\n props.$lineHeight === \"tight\" &&\n css`\n ${tw`tw-leading-tight`}\n `}\n ${(props) =>\n props.$lineHeight === \"loose\" &&\n css`\n ${tw`tw-leading-loose`}\n `}\n\n //align\n ${(props) =>\n props.$align === \"left\" &&\n css`\n text-align: left;\n `}\n ${(props) =>\n props.$align === \"right\" &&\n css`\n text-align: right;\n `}\n ${(props) =>\n props.$align === \"center\" &&\n css`\n text-align: center;\n `}\n ${(props) =>\n props.$align === \"justify\" &&\n css`\n text-align: justify;\n `}\n\n //decoration\n ${(props) =>\n props.$decoration === \"none\" &&\n css`\n text-decoration: none;\n `}\n ${(props) =>\n props.$decoration === \"underline\" &&\n css`\n text-decoration: underline;\n `}\n ${(props) =>\n props.$decoration === \"line-through\" &&\n css`\n text-decoration: line-through;\n `}\n\n //transform\n ${(props) =>\n props.$transform === \"regular\" &&\n css`\n text-transform: none;\n `}\n ${(props) =>\n props.$transform === \"uppercase\" &&\n css`\n text-transform: uppercase;\n `}\n ${(props) =>\n props.$transform === \"lowercase\" &&\n css`\n text-transform: lowercase;\n `}\n ${(props) =>\n props.$transform === \"capitalize\" &&\n css`\n text-transform: capitalize;\n `}\n\n //overflow\n ${(props) =>\n props.$overflow === \"visible\" &&\n css`\n overflow: visible;\n `}\n ${(props) =>\n props.$overflow === \"ellipsis\" &&\n css`\n text-overflow: ellipsis;\n `}\n ${(props) =>\n props.$overflow === \"truncate\" &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `}\n\n //whitespace\n ${(props) =>\n props.$whitespace === \"regular\" &&\n css`\n white-space: normal;\n `}\n ${(props) =>\n props.$whitespace === \"no-wrap\" &&\n css`\n white-space: nowrap;\n `}\n ${(props) =>\n props.$whitespace === \"pre\" &&\n css`\n white-space: pre;\n `}\n ${(props) =>\n props.$whitespace === \"pre-wrap\" &&\n css`\n white-space: pre-wrap;\n `}\n ${(props) =>\n props.$whitespace === \"pre-line\" &&\n css`\n white-space: pre-line;\n `}\n ${(props) =>\n props.$whitespace === \"break-spaces\" &&\n css`\n white-space: break-spaces;\n `}\n\n //wordBreak\n ${(props) =>\n props.$wordBreak === \"regular\" &&\n css`\n overflow-wrap: normal;\n word-break: normal;\n `}\n ${(props) =>\n props.$wordBreak === \"smart\" &&\n css`\n overflow-wrap: break-word;\n `}\n ${(props) =>\n props.$wordBreak === \"all\" &&\n css`\n word-break: break-all;\n `}\n\n //weight\n ${(props) =>\n props.$weight === \"regular\" &&\n css`\n ${tw`tw-font-regular`}\n `}\n ${(props) =>\n props.$weight === \"light\" &&\n css`\n ${tw`tw-font-light`}\n `}\n ${(props) =>\n props.$weight === \"medium\" &&\n css`\n ${tw`tw-font-medium`}\n `}\n ${(props) =>\n props.$weight === \"bold\" &&\n css`\n ${tw`tw-font-bold`}\n `}\n`;\n\nStyledTypography.displayName = \"StyledTypography\";\n"],"file":"Styles.js"}
|
package/dist/index.js
CHANGED
|
@@ -780,35 +780,61 @@
|
|
|
780
780
|
})(["", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
781
781
|
return colors[props.$color];
|
|
782
782
|
}, function (props) {
|
|
783
|
-
return props.$variant === "Title 1" && styled.css(["
|
|
783
|
+
return props.$variant === "Title 1" && styled.css(["", ""], {
|
|
784
|
+
"fontSize": "2rem"
|
|
785
|
+
});
|
|
784
786
|
}, function (props) {
|
|
785
|
-
return props.$variant === "Title 2" && styled.css(["
|
|
787
|
+
return props.$variant === "Title 2" && styled.css(["", ""], {
|
|
788
|
+
"fontSize": "1.675rem"
|
|
789
|
+
});
|
|
786
790
|
}, function (props) {
|
|
787
|
-
return props.$variant === "Header 2" && styled.css(["
|
|
791
|
+
return props.$variant === "Header 2" && styled.css(["", ""], {
|
|
792
|
+
"fontSize": "1.125rem"
|
|
793
|
+
});
|
|
788
794
|
}, function (props) {
|
|
789
|
-
return (props.$variant === "Header 3" || props.$variant === "Body 1") && styled.css(["
|
|
795
|
+
return (props.$variant === "Header 3" || props.$variant === "Body 1") && styled.css(["", ""], {
|
|
796
|
+
"fontSize": "1rem"
|
|
797
|
+
});
|
|
790
798
|
}, function (props) {
|
|
791
|
-
return props.$variant === "Body 2" && styled.css(["
|
|
799
|
+
return props.$variant === "Body 2" && styled.css(["", ""], {
|
|
800
|
+
"fontSize": "0.875rem"
|
|
801
|
+
});
|
|
792
802
|
}, function (props) {
|
|
793
|
-
return props.$variant === "Caption 1" && styled.css(["
|
|
803
|
+
return props.$variant === "Caption 1" && styled.css(["", ""], {
|
|
804
|
+
"fontSize": "0.75rem"
|
|
805
|
+
});
|
|
794
806
|
}, function (props) {
|
|
795
|
-
return props.$variant === "Caption 2" && styled.css(["
|
|
807
|
+
return props.$variant === "Caption 2" && styled.css(["", ""], {
|
|
808
|
+
"fontSize": "0.625rem"
|
|
809
|
+
});
|
|
796
810
|
}, function (props) {
|
|
797
811
|
return props.$italic ? styled.css(["font-style:italic;"]) : styled.css(["font-style:normal;"]);
|
|
798
812
|
}, function (props) {
|
|
799
813
|
return props.$tabularNums ? styled.css(["font-variant-numeric:tabular-nums;"]) : styled.css(["font-variant-numeric:normal;"]);
|
|
800
814
|
}, function (props) {
|
|
801
|
-
return props.$letterSpacing === "regular" && styled.css(["
|
|
815
|
+
return props.$letterSpacing === "regular" && styled.css(["", ""], {
|
|
816
|
+
"letterSpacing": "0.02em"
|
|
817
|
+
});
|
|
802
818
|
}, function (props) {
|
|
803
|
-
return props.$letterSpacing === "tight" && styled.css(["
|
|
819
|
+
return props.$letterSpacing === "tight" && styled.css(["", ""], {
|
|
820
|
+
"letterSpacing": "0em"
|
|
821
|
+
});
|
|
804
822
|
}, function (props) {
|
|
805
|
-
return props.$letterSpacing === "wide" && styled.css(["
|
|
823
|
+
return props.$letterSpacing === "wide" && styled.css(["", ""], {
|
|
824
|
+
"letterSpacing": "0.08em"
|
|
825
|
+
});
|
|
806
826
|
}, function (props) {
|
|
807
|
-
return props.$lineHeight === "regular" && styled.css(["
|
|
827
|
+
return props.$lineHeight === "regular" && styled.css(["", ""], {
|
|
828
|
+
"lineHeight": "1.375"
|
|
829
|
+
});
|
|
808
830
|
}, function (props) {
|
|
809
|
-
return props.$lineHeight === "tight" && styled.css(["
|
|
831
|
+
return props.$lineHeight === "tight" && styled.css(["", ""], {
|
|
832
|
+
"lineHeight": "1"
|
|
833
|
+
});
|
|
810
834
|
}, function (props) {
|
|
811
|
-
return props.$lineHeight === "loose" && styled.css(["
|
|
835
|
+
return props.$lineHeight === "loose" && styled.css(["", ""], {
|
|
836
|
+
"lineHeight": "1.625"
|
|
837
|
+
});
|
|
812
838
|
}, function (props) {
|
|
813
839
|
return props.$align === "left" && styled.css(["text-align:left;"]);
|
|
814
840
|
}, function (props) {
|
|
@@ -856,13 +882,21 @@
|
|
|
856
882
|
}, function (props) {
|
|
857
883
|
return props.$wordBreak === "all" && styled.css(["word-break:break-all;"]);
|
|
858
884
|
}, function (props) {
|
|
859
|
-
return props.$weight === "regular" && styled.css(["
|
|
885
|
+
return props.$weight === "regular" && styled.css(["", ""], {
|
|
886
|
+
"fontWeight": "400"
|
|
887
|
+
});
|
|
860
888
|
}, function (props) {
|
|
861
|
-
return props.$weight === "light" && styled.css(["
|
|
889
|
+
return props.$weight === "light" && styled.css(["", ""], {
|
|
890
|
+
"fontWeight": "300"
|
|
891
|
+
});
|
|
862
892
|
}, function (props) {
|
|
863
|
-
return props.$weight === "medium" && styled.css(["
|
|
893
|
+
return props.$weight === "medium" && styled.css(["", ""], {
|
|
894
|
+
"fontWeight": "500"
|
|
895
|
+
});
|
|
864
896
|
}, function (props) {
|
|
865
|
-
return props.$weight === "bold" && styled.css(["
|
|
897
|
+
return props.$weight === "bold" && styled.css(["", ""], {
|
|
898
|
+
"fontWeight": "700"
|
|
899
|
+
});
|
|
866
900
|
});
|
|
867
901
|
StyledTypography.displayName = "StyledTypography";
|
|
868
902
|
|
|
@@ -4596,10 +4630,14 @@
|
|
|
4596
4630
|
var StyledInput = styled__default["default"].input.withConfig({
|
|
4597
4631
|
displayName: "Styles__StyledInput",
|
|
4598
4632
|
componentId: "sc-ce8kcp-0"
|
|
4599
|
-
})(["border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);
|
|
4633
|
+
})(["", " border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);padding:4px 10px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " &::placeholder{color:var(--color-theme-600);}"], {
|
|
4634
|
+
"fontSize": "0.875rem"
|
|
4635
|
+
}, FontStyle, BoxSizingStyle, function (props) {
|
|
4600
4636
|
return props.$size === "small" && styled.css(["border-radius:6px;height:24px;"]);
|
|
4601
4637
|
}, function (props) {
|
|
4602
|
-
return props.$size === "big" && styled.css(["height:40px;
|
|
4638
|
+
return props.$size === "big" && styled.css(["", " height:40px;"], {
|
|
4639
|
+
"fontSize": "1rem"
|
|
4640
|
+
});
|
|
4603
4641
|
}, function (props) {
|
|
4604
4642
|
return props.disabled ? styled.css(["", ""], {
|
|
4605
4643
|
"cursor": "not-allowed",
|
|
@@ -7705,7 +7743,9 @@
|
|
|
7705
7743
|
var StyledTextarea = styled__default["default"].textarea.withConfig({
|
|
7706
7744
|
displayName: "Styles__StyledTextarea",
|
|
7707
7745
|
componentId: "sc-m6jqw8-0"
|
|
7708
|
-
})(["border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);
|
|
7746
|
+
})(["", " border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);padding:4px 10px 6px 8px;height:auto;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;min-height:90px;", " ", " ", " &:active,&:focus{outline:none !important;", "}&:focus{box-shadow:none;}&::placeholder{color:var(--color-theme-600);}", ""], {
|
|
7747
|
+
"fontSize": "0.875rem"
|
|
7748
|
+
}, FontStyle, BoxSizingStyle, function (props) {
|
|
7709
7749
|
return !props.disabled && styled.css(["&:hover{outline:none !important;", "}"], {
|
|
7710
7750
|
"borderColor": "var(--color-primary)"
|
|
7711
7751
|
});
|