@uipath/apollo-react 4.44.1 → 4.45.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.cjs +14 -13
  2. package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.d.ts.map +1 -1
  3. package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.js +12 -11
  4. package/dist/canvas/components/NodePropertiesPanel/fields/CheckboxField.cjs +14 -16
  5. package/dist/canvas/components/NodePropertiesPanel/fields/CheckboxField.d.ts.map +1 -1
  6. package/dist/canvas/components/NodePropertiesPanel/fields/CheckboxField.js +14 -16
  7. package/dist/canvas/components/NodePropertiesPanel/fields/NumberField.cjs +18 -16
  8. package/dist/canvas/components/NodePropertiesPanel/fields/NumberField.d.ts.map +1 -1
  9. package/dist/canvas/components/NodePropertiesPanel/fields/NumberField.js +18 -16
  10. package/dist/canvas/components/NodePropertiesPanel/fields/SelectField.cjs +40 -22
  11. package/dist/canvas/components/NodePropertiesPanel/fields/SelectField.d.ts.map +1 -1
  12. package/dist/canvas/components/NodePropertiesPanel/fields/SelectField.js +40 -22
  13. package/dist/canvas/components/NodePropertiesPanel/fields/TextField.cjs +24 -20
  14. package/dist/canvas/components/NodePropertiesPanel/fields/TextField.d.ts.map +1 -1
  15. package/dist/canvas/components/NodePropertiesPanel/fields/TextField.js +24 -20
  16. package/dist/canvas/components/NodePropertiesPanel/index.cjs +12 -55
  17. package/dist/canvas/components/NodePropertiesPanel/index.d.ts +0 -1
  18. package/dist/canvas/components/NodePropertiesPanel/index.d.ts.map +1 -1
  19. package/dist/canvas/components/NodePropertiesPanel/index.js +0 -1
  20. package/dist/canvas/components/index.cjs +2 -2
  21. package/dist/canvas/controls/NodePropertyTrigger/NodePropertyTrigger.cjs +395 -0
  22. package/dist/canvas/controls/NodePropertyTrigger/NodePropertyTrigger.d.ts +57 -0
  23. package/dist/canvas/controls/NodePropertyTrigger/NodePropertyTrigger.d.ts.map +1 -0
  24. package/dist/canvas/controls/NodePropertyTrigger/NodePropertyTrigger.js +349 -0
  25. package/dist/canvas/controls/NodePropertyTrigger/index.cjs +48 -0
  26. package/dist/canvas/controls/NodePropertyTrigger/index.d.ts +3 -0
  27. package/dist/canvas/controls/NodePropertyTrigger/index.d.ts.map +1 -0
  28. package/dist/canvas/controls/NodePropertyTrigger/index.js +2 -0
  29. package/dist/canvas/controls/index.cjs +18 -2
  30. package/dist/canvas/controls/index.d.ts +2 -0
  31. package/dist/canvas/controls/index.d.ts.map +1 -1
  32. package/dist/canvas/controls/index.js +2 -1
  33. package/dist/canvas/locales/en.cjs +1 -1
  34. package/dist/canvas/locales/en.d.ts.map +1 -1
  35. package/dist/canvas/locales/en.js +1 -1
  36. package/dist/canvas/styles/tailwind.canvas.css +1 -1
  37. package/package.json +1 -1
  38. package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.styles.cjs +0 -284
  39. package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.styles.d.ts +0 -69
  40. package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.styles.d.ts.map +0 -1
  41. package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.styles.js +0 -195
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "4.44.1",
3
+ "version": "4.45.1",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",
@@ -1,284 +0,0 @@
1
- "use strict";
2
- var __webpack_require__ = {};
3
- (()=>{
4
- __webpack_require__.n = (module)=>{
5
- var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
6
- __webpack_require__.d(getter, {
7
- a: getter
8
- });
9
- return getter;
10
- };
11
- })();
12
- (()=>{
13
- __webpack_require__.d = (exports1, definition)=>{
14
- for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
15
- enumerable: true,
16
- get: definition[key]
17
- });
18
- };
19
- })();
20
- (()=>{
21
- __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
22
- })();
23
- (()=>{
24
- __webpack_require__.r = (exports1)=>{
25
- if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
26
- value: 'Module'
27
- });
28
- Object.defineProperty(exports1, '__esModule', {
29
- value: true
30
- });
31
- };
32
- })();
33
- var __webpack_exports__ = {};
34
- __webpack_require__.r(__webpack_exports__);
35
- __webpack_require__.d(__webpack_exports__, {
36
- CheckboxInput: ()=>CheckboxInput,
37
- NumberInput: ()=>NumberInput,
38
- FieldError: ()=>FieldError,
39
- SectionTitle: ()=>SectionTitle,
40
- TextArea: ()=>TextArea,
41
- CheckboxHelpText: ()=>CheckboxHelpText,
42
- SelectInput: ()=>SelectInput,
43
- FieldContainer: ()=>FieldContainer,
44
- CheckboxContainer: ()=>CheckboxContainer,
45
- FieldHelpText: ()=>FieldHelpText,
46
- ConfigSection: ()=>ConfigSection,
47
- TextInput: ()=>TextInput,
48
- FieldLabel: ()=>FieldLabel,
49
- InputWrapper: ()=>InputWrapper,
50
- InputSuffix: ()=>InputSuffix,
51
- CheckboxLabel: ()=>CheckboxLabel
52
- });
53
- const styled_namespaceObject = require("@emotion/styled");
54
- var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
55
- const ConfigSection = styled_default().div`
56
- padding: 16px;
57
- border-bottom: 1px solid var(--canvas-border-de-emp);
58
-
59
- &:last-child {
60
- border-bottom: none;
61
- }
62
- `;
63
- const SectionTitle = styled_default().div`
64
- font-weight: 500;
65
- font-size: 14px;
66
- color: var(--canvas-foreground);
67
- margin-bottom: 8px;
68
- `;
69
- const FieldContainer = styled_default().div`
70
- margin-bottom: 8px;
71
-
72
- &:last-child {
73
- margin-bottom: 0;
74
- }
75
- `;
76
- const FieldLabel = styled_default().label`
77
- font-size: 14px;
78
- color: var(--canvas-foreground-de-emp);
79
- display: block;
80
- margin-bottom: 4px;
81
- `;
82
- const FieldHelpText = styled_default().span`
83
- font-size: 12px;
84
- color: var(--canvas-foreground-de-emp);
85
- display: block;
86
- margin-top: 4px;
87
- `;
88
- const FieldError = styled_default().span`
89
- font-size: 12px;
90
- color: var(--canvas-error);
91
- display: block;
92
- margin-top: 4px;
93
- `;
94
- const TextInput = styled_default().input`
95
- width: 100%;
96
- padding: 8px 12px;
97
- font-size: 14px;
98
- font-family: inherit;
99
- border: 1px solid
100
- ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
101
- border-radius: 4px;
102
- background-color: var(--canvas-background);
103
- color: var(--canvas-foreground);
104
- outline: none;
105
- transition:
106
- border-color 0.2s,
107
- box-shadow 0.2s;
108
-
109
- &:focus {
110
- border-color: var(--canvas-primary);
111
- box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
112
- }
113
-
114
- &:disabled {
115
- opacity: 0.5;
116
- cursor: not-allowed;
117
- }
118
- `;
119
- const TextArea = styled_default().textarea`
120
- width: 100%;
121
- padding: 8px 12px;
122
- font-size: 14px;
123
- font-family: inherit;
124
- border: 1px solid
125
- ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
126
- border-radius: 4px;
127
- background-color: var(--canvas-background);
128
- color: var(--canvas-foreground);
129
- outline: none;
130
- transition:
131
- border-color 0.2s,
132
- box-shadow 0.2s;
133
- resize: vertical;
134
-
135
- &:focus {
136
- border-color: var(--canvas-primary);
137
- box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
138
- }
139
-
140
- &:disabled {
141
- opacity: 0.5;
142
- cursor: not-allowed;
143
- }
144
- `;
145
- const SelectInput = styled_default().select`
146
- width: 100%;
147
- padding: 8px 36px 8px 12px;
148
- font-size: 14px;
149
- font-family: inherit;
150
- border: 1px solid
151
- ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
152
- border-radius: 4px;
153
- background-color: var(--canvas-background);
154
- color: var(--canvas-foreground);
155
- outline: none;
156
- cursor: pointer;
157
- transition:
158
- border-color 0.2s,
159
- box-shadow 0.2s;
160
- appearance: none;
161
- background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
162
- background-repeat: no-repeat;
163
- background-position: right 8px center;
164
- background-size: 20px;
165
-
166
- &:focus {
167
- border-color: var(--canvas-primary);
168
- box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
169
- }
170
-
171
- &:disabled {
172
- opacity: 0.5;
173
- cursor: not-allowed;
174
- }
175
- `;
176
- const NumberInput = styled_default().input`
177
- width: 100%;
178
- padding: 8px 12px;
179
- font-size: 14px;
180
- font-family: inherit;
181
- border: 1px solid
182
- ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
183
- border-radius: 4px;
184
- background-color: var(--canvas-background);
185
- color: var(--canvas-foreground);
186
- outline: none;
187
- transition:
188
- border-color 0.2s,
189
- box-shadow 0.2s;
190
-
191
- &:focus {
192
- border-color: var(--canvas-primary);
193
- box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
194
- }
195
-
196
- &:disabled {
197
- opacity: 0.5;
198
- cursor: not-allowed;
199
- }
200
-
201
- /* Hide spinner buttons in some browsers */
202
- &::-webkit-inner-spin-button,
203
- &::-webkit-outer-spin-button {
204
- -webkit-appearance: none;
205
- margin: 0;
206
- }
207
- `;
208
- const CheckboxContainer = styled_default().div`
209
- padding: 8px 0;
210
- border-radius: 4px;
211
- transition: background-color 0.2s;
212
-
213
- &:hover {
214
- background-color: var(--canvas-background-hover);
215
- }
216
- `;
217
- const CheckboxLabel = styled_default().label`
218
- font-size: 14px;
219
- color: var(--canvas-foreground);
220
- cursor: pointer;
221
- user-select: none;
222
- display: flex;
223
- align-items: center;
224
- `;
225
- const CheckboxInput = styled_default().input`
226
- width: 18px;
227
- height: 18px;
228
- margin-right: 8px;
229
- cursor: pointer;
230
- accent-color: var(--canvas-primary);
231
- `;
232
- const CheckboxHelpText = styled_default().span`
233
- font-size: 12px;
234
- color: var(--canvas-foreground-de-emp);
235
- margin-left: 26px;
236
- display: block;
237
- `;
238
- const InputWrapper = styled_default().div`
239
- display: flex;
240
- align-items: center;
241
- gap: 8px;
242
- `;
243
- const InputSuffix = styled_default().span`
244
- color: var(--canvas-foreground-de-emp);
245
- font-size: 14px;
246
- white-space: nowrap;
247
- `;
248
- exports.CheckboxContainer = __webpack_exports__.CheckboxContainer;
249
- exports.CheckboxHelpText = __webpack_exports__.CheckboxHelpText;
250
- exports.CheckboxInput = __webpack_exports__.CheckboxInput;
251
- exports.CheckboxLabel = __webpack_exports__.CheckboxLabel;
252
- exports.ConfigSection = __webpack_exports__.ConfigSection;
253
- exports.FieldContainer = __webpack_exports__.FieldContainer;
254
- exports.FieldError = __webpack_exports__.FieldError;
255
- exports.FieldHelpText = __webpack_exports__.FieldHelpText;
256
- exports.FieldLabel = __webpack_exports__.FieldLabel;
257
- exports.InputSuffix = __webpack_exports__.InputSuffix;
258
- exports.InputWrapper = __webpack_exports__.InputWrapper;
259
- exports.NumberInput = __webpack_exports__.NumberInput;
260
- exports.SectionTitle = __webpack_exports__.SectionTitle;
261
- exports.SelectInput = __webpack_exports__.SelectInput;
262
- exports.TextArea = __webpack_exports__.TextArea;
263
- exports.TextInput = __webpack_exports__.TextInput;
264
- for(var __rspack_i in __webpack_exports__)if (-1 === [
265
- "CheckboxContainer",
266
- "CheckboxHelpText",
267
- "CheckboxInput",
268
- "CheckboxLabel",
269
- "ConfigSection",
270
- "FieldContainer",
271
- "FieldError",
272
- "FieldHelpText",
273
- "FieldLabel",
274
- "InputSuffix",
275
- "InputWrapper",
276
- "NumberInput",
277
- "SectionTitle",
278
- "SelectInput",
279
- "TextArea",
280
- "TextInput"
281
- ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
282
- Object.defineProperty(exports, '__esModule', {
283
- value: true
284
- });
@@ -1,69 +0,0 @@
1
- export declare const ConfigSection: import("@emotion/styled").StyledComponent<{
2
- theme?: import("@emotion/react").Theme;
3
- as?: React.ElementType;
4
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
5
- export declare const SectionTitle: import("@emotion/styled").StyledComponent<{
6
- theme?: import("@emotion/react").Theme;
7
- as?: React.ElementType;
8
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
9
- export declare const FieldContainer: import("@emotion/styled").StyledComponent<{
10
- theme?: import("@emotion/react").Theme;
11
- as?: React.ElementType;
12
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
13
- export declare const FieldLabel: import("@emotion/styled").StyledComponent<{
14
- theme?: import("@emotion/react").Theme;
15
- as?: React.ElementType;
16
- }, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
17
- export declare const FieldHelpText: import("@emotion/styled").StyledComponent<{
18
- theme?: import("@emotion/react").Theme;
19
- as?: React.ElementType;
20
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
21
- export declare const FieldError: import("@emotion/styled").StyledComponent<{
22
- theme?: import("@emotion/react").Theme;
23
- as?: React.ElementType;
24
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
25
- interface InputProps {
26
- hasError?: boolean;
27
- }
28
- export declare const TextInput: import("@emotion/styled").StyledComponent<{
29
- theme?: import("@emotion/react").Theme;
30
- as?: React.ElementType;
31
- } & InputProps, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
32
- export declare const TextArea: import("@emotion/styled").StyledComponent<{
33
- theme?: import("@emotion/react").Theme;
34
- as?: React.ElementType;
35
- } & InputProps, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
36
- export declare const SelectInput: import("@emotion/styled").StyledComponent<{
37
- theme?: import("@emotion/react").Theme;
38
- as?: React.ElementType;
39
- } & InputProps, import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, {}>;
40
- export declare const NumberInput: import("@emotion/styled").StyledComponent<{
41
- theme?: import("@emotion/react").Theme;
42
- as?: React.ElementType;
43
- } & InputProps, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
44
- export declare const CheckboxContainer: import("@emotion/styled").StyledComponent<{
45
- theme?: import("@emotion/react").Theme;
46
- as?: React.ElementType;
47
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
48
- export declare const CheckboxLabel: import("@emotion/styled").StyledComponent<{
49
- theme?: import("@emotion/react").Theme;
50
- as?: React.ElementType;
51
- }, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
52
- export declare const CheckboxInput: import("@emotion/styled").StyledComponent<{
53
- theme?: import("@emotion/react").Theme;
54
- as?: React.ElementType;
55
- }, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
56
- export declare const CheckboxHelpText: import("@emotion/styled").StyledComponent<{
57
- theme?: import("@emotion/react").Theme;
58
- as?: React.ElementType;
59
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
60
- export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
61
- theme?: import("@emotion/react").Theme;
62
- as?: React.ElementType;
63
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
64
- export declare const InputSuffix: import("@emotion/styled").StyledComponent<{
65
- theme?: import("@emotion/react").Theme;
66
- as?: React.ElementType;
67
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
68
- export {};
69
- //# sourceMappingURL=NodePropertiesPanel.styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NodePropertiesPanel.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertiesPanel/NodePropertiesPanel.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;yGAOzB,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAKxB,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;kHAKtB,CAAC;AAEF,eAAO,MAAM,aAAa;;;2GAKzB,CAAC;AAEF,eAAO,MAAM,UAAU;;;2GAKtB,CAAC;AAEF,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS;;;+HAwBrB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;wIAyBpB,CAAC;AAEF,eAAO,MAAM,WAAW;;;kIA8BvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;+HA+BvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAQ7B,CAAC;AAEF,eAAO,MAAM,aAAa;;;kHAOzB,CAAC;AAEF,eAAO,MAAM,aAAa;;;kHAMzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;2GAK5B,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAIxB,CAAC;AAEF,eAAO,MAAM,WAAW;;;2GAIvB,CAAC"}
@@ -1,195 +0,0 @@
1
- import styled from "@emotion/styled";
2
- const ConfigSection = styled.div`
3
- padding: 16px;
4
- border-bottom: 1px solid var(--canvas-border-de-emp);
5
-
6
- &:last-child {
7
- border-bottom: none;
8
- }
9
- `;
10
- const SectionTitle = styled.div`
11
- font-weight: 500;
12
- font-size: 14px;
13
- color: var(--canvas-foreground);
14
- margin-bottom: 8px;
15
- `;
16
- const FieldContainer = styled.div`
17
- margin-bottom: 8px;
18
-
19
- &:last-child {
20
- margin-bottom: 0;
21
- }
22
- `;
23
- const FieldLabel = styled.label`
24
- font-size: 14px;
25
- color: var(--canvas-foreground-de-emp);
26
- display: block;
27
- margin-bottom: 4px;
28
- `;
29
- const FieldHelpText = styled.span`
30
- font-size: 12px;
31
- color: var(--canvas-foreground-de-emp);
32
- display: block;
33
- margin-top: 4px;
34
- `;
35
- const FieldError = styled.span`
36
- font-size: 12px;
37
- color: var(--canvas-error);
38
- display: block;
39
- margin-top: 4px;
40
- `;
41
- const TextInput = styled.input`
42
- width: 100%;
43
- padding: 8px 12px;
44
- font-size: 14px;
45
- font-family: inherit;
46
- border: 1px solid
47
- ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
48
- border-radius: 4px;
49
- background-color: var(--canvas-background);
50
- color: var(--canvas-foreground);
51
- outline: none;
52
- transition:
53
- border-color 0.2s,
54
- box-shadow 0.2s;
55
-
56
- &:focus {
57
- border-color: var(--canvas-primary);
58
- box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
59
- }
60
-
61
- &:disabled {
62
- opacity: 0.5;
63
- cursor: not-allowed;
64
- }
65
- `;
66
- const TextArea = styled.textarea`
67
- width: 100%;
68
- padding: 8px 12px;
69
- font-size: 14px;
70
- font-family: inherit;
71
- border: 1px solid
72
- ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
73
- border-radius: 4px;
74
- background-color: var(--canvas-background);
75
- color: var(--canvas-foreground);
76
- outline: none;
77
- transition:
78
- border-color 0.2s,
79
- box-shadow 0.2s;
80
- resize: vertical;
81
-
82
- &:focus {
83
- border-color: var(--canvas-primary);
84
- box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
85
- }
86
-
87
- &:disabled {
88
- opacity: 0.5;
89
- cursor: not-allowed;
90
- }
91
- `;
92
- const SelectInput = styled.select`
93
- width: 100%;
94
- padding: 8px 36px 8px 12px;
95
- font-size: 14px;
96
- font-family: inherit;
97
- border: 1px solid
98
- ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
99
- border-radius: 4px;
100
- background-color: var(--canvas-background);
101
- color: var(--canvas-foreground);
102
- outline: none;
103
- cursor: pointer;
104
- transition:
105
- border-color 0.2s,
106
- box-shadow 0.2s;
107
- appearance: none;
108
- background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
109
- background-repeat: no-repeat;
110
- background-position: right 8px center;
111
- background-size: 20px;
112
-
113
- &:focus {
114
- border-color: var(--canvas-primary);
115
- box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
116
- }
117
-
118
- &:disabled {
119
- opacity: 0.5;
120
- cursor: not-allowed;
121
- }
122
- `;
123
- const NumberInput = styled.input`
124
- width: 100%;
125
- padding: 8px 12px;
126
- font-size: 14px;
127
- font-family: inherit;
128
- border: 1px solid
129
- ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
130
- border-radius: 4px;
131
- background-color: var(--canvas-background);
132
- color: var(--canvas-foreground);
133
- outline: none;
134
- transition:
135
- border-color 0.2s,
136
- box-shadow 0.2s;
137
-
138
- &:focus {
139
- border-color: var(--canvas-primary);
140
- box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
141
- }
142
-
143
- &:disabled {
144
- opacity: 0.5;
145
- cursor: not-allowed;
146
- }
147
-
148
- /* Hide spinner buttons in some browsers */
149
- &::-webkit-inner-spin-button,
150
- &::-webkit-outer-spin-button {
151
- -webkit-appearance: none;
152
- margin: 0;
153
- }
154
- `;
155
- const CheckboxContainer = styled.div`
156
- padding: 8px 0;
157
- border-radius: 4px;
158
- transition: background-color 0.2s;
159
-
160
- &:hover {
161
- background-color: var(--canvas-background-hover);
162
- }
163
- `;
164
- const CheckboxLabel = styled.label`
165
- font-size: 14px;
166
- color: var(--canvas-foreground);
167
- cursor: pointer;
168
- user-select: none;
169
- display: flex;
170
- align-items: center;
171
- `;
172
- const CheckboxInput = styled.input`
173
- width: 18px;
174
- height: 18px;
175
- margin-right: 8px;
176
- cursor: pointer;
177
- accent-color: var(--canvas-primary);
178
- `;
179
- const CheckboxHelpText = styled.span`
180
- font-size: 12px;
181
- color: var(--canvas-foreground-de-emp);
182
- margin-left: 26px;
183
- display: block;
184
- `;
185
- const InputWrapper = styled.div`
186
- display: flex;
187
- align-items: center;
188
- gap: 8px;
189
- `;
190
- const InputSuffix = styled.span`
191
- color: var(--canvas-foreground-de-emp);
192
- font-size: 14px;
193
- white-space: nowrap;
194
- `;
195
- export { CheckboxContainer, CheckboxHelpText, CheckboxInput, CheckboxLabel, ConfigSection, FieldContainer, FieldError, FieldHelpText, FieldLabel, InputSuffix, InputWrapper, NumberInput, SectionTitle, SelectInput, TextArea, TextInput };