@norges-domstoler/dds-components 13.0.0 → 13.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Select/Select.tokens.d.ts +3 -5
- package/dist/cjs/components/Stack/Stack.d.ts +3 -5
- package/dist/cjs/index.js +76 -84
- package/dist/components/Select/Select.styles.js +7 -7
- package/dist/components/Select/Select.tokens.d.ts +3 -5
- package/dist/components/Select/Select.tokens.js +7 -16
- package/dist/components/Stack/Stack.d.ts +3 -5
- package/package.json +1 -1
|
@@ -35,6 +35,9 @@ export declare const selectTokens: {
|
|
|
35
35
|
small: {
|
|
36
36
|
padding: string;
|
|
37
37
|
};
|
|
38
|
+
tiny: {
|
|
39
|
+
padding: string;
|
|
40
|
+
};
|
|
38
41
|
};
|
|
39
42
|
};
|
|
40
43
|
sizes: {
|
|
@@ -98,11 +101,6 @@ export declare const selectTokens: {
|
|
|
98
101
|
gap: string;
|
|
99
102
|
};
|
|
100
103
|
};
|
|
101
|
-
inputContainer: {
|
|
102
|
-
isMulti: {
|
|
103
|
-
minHeight: string;
|
|
104
|
-
};
|
|
105
|
-
};
|
|
106
104
|
multiValue: {
|
|
107
105
|
borderRadius: string;
|
|
108
106
|
backgroundColor: string;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { stackTokens } from './Stack.tokens';
|
|
3
3
|
import { BaseComponentPropsWithChildren } from '../../types';
|
|
4
|
-
|
|
5
|
-
type Justify = 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
|
|
4
|
+
import { StandardProperties } from 'csstype';
|
|
6
5
|
export interface StackStyleProps {
|
|
7
6
|
/**
|
|
8
7
|
* Hvilken retning elementene skal plasseres i.
|
|
@@ -12,12 +11,12 @@ export interface StackStyleProps {
|
|
|
12
11
|
* CSS `align-items`.
|
|
13
12
|
* @default 'center'
|
|
14
13
|
*/
|
|
15
|
-
align?:
|
|
14
|
+
align?: StandardProperties['alignItems'];
|
|
16
15
|
/**
|
|
17
16
|
* CSS `justify-content`.
|
|
18
17
|
* @default 'flex-start'
|
|
19
18
|
*/
|
|
20
|
-
justify?:
|
|
19
|
+
justify?: StandardProperties['justifyContent'];
|
|
21
20
|
/**
|
|
22
21
|
* Hvilken spacing token som skal brukes som CSS `gap`.
|
|
23
22
|
*/
|
|
@@ -38,4 +37,3 @@ export declare const VStack: import("react").ForwardRefExoticComponent<Pick<impo
|
|
|
38
37
|
} & {
|
|
39
38
|
htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
|
|
40
39
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
41
|
-
export {};
|
package/dist/cjs/index.js
CHANGED
|
@@ -20,7 +20,7 @@ var ReactSelect__default = /*#__PURE__*/_interopDefaultCompat(ReactSelect);
|
|
|
20
20
|
var accepted__default = /*#__PURE__*/_interopDefaultCompat(accepted);
|
|
21
21
|
|
|
22
22
|
var colors$w = ddsDesignTokens.ddsBaseTokens.colors,
|
|
23
|
-
fontPackages$
|
|
23
|
+
fontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages,
|
|
24
24
|
spacing$D = ddsDesignTokens.ddsBaseTokens.spacing;
|
|
25
25
|
var textDefault$5 = ddsDesignTokens.ddsReferenceTokens.textDefault;
|
|
26
26
|
var a = {
|
|
@@ -29,7 +29,7 @@ var a = {
|
|
|
29
29
|
},
|
|
30
30
|
margins: {
|
|
31
31
|
marginTop: 0,
|
|
32
|
-
marginBottom: fontPackages$
|
|
32
|
+
marginBottom: fontPackages$4.body_sans_02.paragraph.paragraphSpacing
|
|
33
33
|
},
|
|
34
34
|
hover: {
|
|
35
35
|
color: colors$w.DdsColorInteractiveDark
|
|
@@ -45,256 +45,256 @@ var bold = {
|
|
|
45
45
|
var headingSans01 = {
|
|
46
46
|
base: {
|
|
47
47
|
color: textDefault$5.textColor,
|
|
48
|
-
font: fontPackages$
|
|
48
|
+
font: fontPackages$4.heading_sans_01.base
|
|
49
49
|
},
|
|
50
50
|
margins: {
|
|
51
51
|
marginTop: 0,
|
|
52
|
-
marginBottom: fontPackages$
|
|
52
|
+
marginBottom: fontPackages$4.heading_sans_01.paragraph.paragraphSpacing,
|
|
53
53
|
paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans01Top
|
|
54
54
|
}
|
|
55
55
|
};
|
|
56
56
|
var headingSans02 = {
|
|
57
57
|
base: {
|
|
58
58
|
color: textDefault$5.textColor,
|
|
59
|
-
font: fontPackages$
|
|
59
|
+
font: fontPackages$4.heading_sans_02.base
|
|
60
60
|
},
|
|
61
61
|
margins: {
|
|
62
62
|
marginTop: 0,
|
|
63
|
-
marginBottom: fontPackages$
|
|
63
|
+
marginBottom: fontPackages$4.heading_sans_02.paragraph.paragraphSpacing,
|
|
64
64
|
paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans02Top
|
|
65
65
|
}
|
|
66
66
|
};
|
|
67
67
|
var headingSans03 = {
|
|
68
68
|
base: {
|
|
69
69
|
color: textDefault$5.textColor,
|
|
70
|
-
font: fontPackages$
|
|
70
|
+
font: fontPackages$4.heading_sans_03.base
|
|
71
71
|
},
|
|
72
72
|
margins: {
|
|
73
73
|
marginTop: 0,
|
|
74
|
-
marginBottom: fontPackages$
|
|
74
|
+
marginBottom: fontPackages$4.heading_sans_03.paragraph.paragraphSpacing,
|
|
75
75
|
paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans03Top
|
|
76
76
|
}
|
|
77
77
|
};
|
|
78
78
|
var headingSans04 = {
|
|
79
79
|
base: {
|
|
80
80
|
color: textDefault$5.textColor,
|
|
81
|
-
font: fontPackages$
|
|
81
|
+
font: fontPackages$4.heading_sans_04.base
|
|
82
82
|
},
|
|
83
83
|
margins: {
|
|
84
84
|
marginTop: 0,
|
|
85
|
-
marginBottom: fontPackages$
|
|
85
|
+
marginBottom: fontPackages$4.heading_sans_04.paragraph.paragraphSpacing,
|
|
86
86
|
paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans04Top
|
|
87
87
|
}
|
|
88
88
|
};
|
|
89
89
|
var headingSans05 = {
|
|
90
90
|
base: {
|
|
91
91
|
color: textDefault$5.textColor,
|
|
92
|
-
font: fontPackages$
|
|
92
|
+
font: fontPackages$4.heading_sans_05.base
|
|
93
93
|
},
|
|
94
94
|
margins: {
|
|
95
95
|
marginTop: 0,
|
|
96
|
-
marginBottom: fontPackages$
|
|
96
|
+
marginBottom: fontPackages$4.heading_sans_05.paragraph.paragraphSpacing,
|
|
97
97
|
paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans05Top
|
|
98
98
|
}
|
|
99
99
|
};
|
|
100
100
|
var headingSans06 = {
|
|
101
101
|
base: {
|
|
102
102
|
color: textDefault$5.textColor,
|
|
103
|
-
font: fontPackages$
|
|
103
|
+
font: fontPackages$4.heading_sans_06.base
|
|
104
104
|
},
|
|
105
105
|
margins: {
|
|
106
106
|
marginTop: 0,
|
|
107
|
-
marginBottom: fontPackages$
|
|
107
|
+
marginBottom: fontPackages$4.heading_sans_06.paragraph.paragraphSpacing,
|
|
108
108
|
paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans06Top
|
|
109
109
|
}
|
|
110
110
|
};
|
|
111
111
|
var headingSans07 = {
|
|
112
112
|
base: {
|
|
113
113
|
color: textDefault$5.textColor,
|
|
114
|
-
font: fontPackages$
|
|
114
|
+
font: fontPackages$4.heading_sans_07.base
|
|
115
115
|
},
|
|
116
116
|
margins: {
|
|
117
117
|
marginTop: 0,
|
|
118
|
-
marginBottom: fontPackages$
|
|
118
|
+
marginBottom: fontPackages$4.heading_sans_07.paragraph.paragraphSpacing,
|
|
119
119
|
paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans07Top
|
|
120
120
|
}
|
|
121
121
|
};
|
|
122
122
|
var headingSans08 = {
|
|
123
123
|
base: {
|
|
124
124
|
color: textDefault$5.textColor,
|
|
125
|
-
font: fontPackages$
|
|
125
|
+
font: fontPackages$4.heading_sans_08.base
|
|
126
126
|
},
|
|
127
127
|
margins: {
|
|
128
128
|
marginTop: 0,
|
|
129
|
-
marginBottom: fontPackages$
|
|
129
|
+
marginBottom: fontPackages$4.heading_sans_08.paragraph.paragraphSpacing,
|
|
130
130
|
paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans08Top
|
|
131
131
|
}
|
|
132
132
|
};
|
|
133
133
|
var bodySans01 = {
|
|
134
134
|
base: {
|
|
135
135
|
color: textDefault$5.textColor,
|
|
136
|
-
font: fontPackages$
|
|
136
|
+
font: fontPackages$4.body_sans_01.base
|
|
137
137
|
},
|
|
138
138
|
margins: {
|
|
139
139
|
marginTop: 0,
|
|
140
|
-
marginBottom: fontPackages$
|
|
140
|
+
marginBottom: fontPackages$4.body_sans_01.paragraph.paragraphSpacing
|
|
141
141
|
}
|
|
142
142
|
};
|
|
143
143
|
var bodySans02 = {
|
|
144
144
|
base: {
|
|
145
145
|
color: textDefault$5.textColor,
|
|
146
|
-
font: fontPackages$
|
|
146
|
+
font: fontPackages$4.body_sans_02.base
|
|
147
147
|
},
|
|
148
148
|
margins: {
|
|
149
149
|
marginTop: 0,
|
|
150
|
-
marginBottom: fontPackages$
|
|
150
|
+
marginBottom: fontPackages$4.body_sans_02.paragraph.paragraphSpacing
|
|
151
151
|
}
|
|
152
152
|
};
|
|
153
153
|
var bodySans03 = {
|
|
154
154
|
base: {
|
|
155
155
|
color: textDefault$5.textColor,
|
|
156
|
-
font: fontPackages$
|
|
156
|
+
font: fontPackages$4.body_sans_03.base
|
|
157
157
|
},
|
|
158
158
|
margins: {
|
|
159
159
|
marginTop: 0,
|
|
160
|
-
marginBottom: fontPackages$
|
|
160
|
+
marginBottom: fontPackages$4.body_sans_03.paragraph.paragraphSpacing
|
|
161
161
|
}
|
|
162
162
|
};
|
|
163
163
|
var bodySans04 = {
|
|
164
164
|
base: {
|
|
165
165
|
color: textDefault$5.textColor,
|
|
166
|
-
font: fontPackages$
|
|
166
|
+
font: fontPackages$4.body_sans_04.base
|
|
167
167
|
},
|
|
168
168
|
margins: {
|
|
169
169
|
marginTop: 0,
|
|
170
|
-
marginBottom: fontPackages$
|
|
170
|
+
marginBottom: fontPackages$4.body_sans_04.paragraph.paragraphSpacing
|
|
171
171
|
}
|
|
172
172
|
};
|
|
173
173
|
var leadSans01 = {
|
|
174
174
|
base: {
|
|
175
175
|
color: textDefault$5.textColor,
|
|
176
|
-
font: fontPackages$
|
|
176
|
+
font: fontPackages$4.lead_sans_01.base
|
|
177
177
|
},
|
|
178
178
|
margins: {
|
|
179
179
|
marginTop: 0,
|
|
180
|
-
marginBottom: fontPackages$
|
|
180
|
+
marginBottom: fontPackages$4.lead_sans_01.paragraph.paragraphSpacing
|
|
181
181
|
}
|
|
182
182
|
};
|
|
183
183
|
var leadSans02 = {
|
|
184
184
|
base: {
|
|
185
185
|
color: textDefault$5.textColor,
|
|
186
|
-
font: fontPackages$
|
|
186
|
+
font: fontPackages$4.lead_sans_02.base
|
|
187
187
|
},
|
|
188
188
|
margins: {
|
|
189
189
|
marginTop: 0,
|
|
190
|
-
marginBottom: fontPackages$
|
|
190
|
+
marginBottom: fontPackages$4.lead_sans_02.paragraph.paragraphSpacing
|
|
191
191
|
}
|
|
192
192
|
};
|
|
193
193
|
var leadSans03 = {
|
|
194
194
|
base: {
|
|
195
195
|
color: textDefault$5.textColor,
|
|
196
|
-
font: fontPackages$
|
|
196
|
+
font: fontPackages$4.lead_sans_03.base
|
|
197
197
|
},
|
|
198
198
|
margins: {
|
|
199
199
|
marginTop: 0,
|
|
200
|
-
marginBottom: fontPackages$
|
|
200
|
+
marginBottom: fontPackages$4.lead_sans_03.paragraph.paragraphSpacing
|
|
201
201
|
}
|
|
202
202
|
};
|
|
203
203
|
var leadSans04 = {
|
|
204
204
|
base: {
|
|
205
205
|
color: textDefault$5.textColor,
|
|
206
|
-
font: fontPackages$
|
|
206
|
+
font: fontPackages$4.lead_sans_04.base
|
|
207
207
|
},
|
|
208
208
|
margins: {
|
|
209
209
|
marginTop: 0,
|
|
210
|
-
marginBottom: fontPackages$
|
|
210
|
+
marginBottom: fontPackages$4.lead_sans_04.paragraph.paragraphSpacing
|
|
211
211
|
}
|
|
212
212
|
};
|
|
213
213
|
var leadSans05 = {
|
|
214
214
|
base: {
|
|
215
215
|
color: textDefault$5.textColor,
|
|
216
|
-
font: fontPackages$
|
|
216
|
+
font: fontPackages$4.lead_sans_05.base
|
|
217
217
|
},
|
|
218
218
|
margins: {
|
|
219
219
|
marginTop: 0,
|
|
220
|
-
marginBottom: fontPackages$
|
|
220
|
+
marginBottom: fontPackages$4.lead_sans_05.paragraph.paragraphSpacing
|
|
221
221
|
}
|
|
222
222
|
};
|
|
223
223
|
var supportingStyleLabel01 = {
|
|
224
224
|
base: {
|
|
225
225
|
color: colors$w.DdsColorNeutralsGray7,
|
|
226
|
-
font: fontPackages$
|
|
226
|
+
font: fontPackages$4.supportingStyle_label_01.base,
|
|
227
227
|
margin: 0
|
|
228
228
|
},
|
|
229
229
|
margins: {
|
|
230
|
-
marginTop: fontPackages$
|
|
231
|
-
marginBottom: fontPackages$
|
|
230
|
+
marginTop: fontPackages$4.supportingStyle_label_01.paragraph.paragraphSpacing,
|
|
231
|
+
marginBottom: fontPackages$4.supportingStyle_label_01.paragraph.paragraphSpacing
|
|
232
232
|
}
|
|
233
233
|
};
|
|
234
234
|
var supportingStyleHelperText01 = {
|
|
235
235
|
base: {
|
|
236
236
|
color: colors$w.DdsColorNeutralsGray6,
|
|
237
|
-
font: fontPackages$
|
|
237
|
+
font: fontPackages$4.supportingStyle_helpertext_01.base,
|
|
238
238
|
margin: 0
|
|
239
239
|
},
|
|
240
240
|
margins: {
|
|
241
|
-
marginTop: fontPackages$
|
|
242
|
-
marginBottom: fontPackages$
|
|
241
|
+
marginTop: fontPackages$4.supportingStyle_helpertext_01.paragraph.paragraphSpacing,
|
|
242
|
+
marginBottom: fontPackages$4.supportingStyle_helpertext_01.paragraph.paragraphSpacing
|
|
243
243
|
}
|
|
244
244
|
};
|
|
245
245
|
var supportingStylePlaceholderText01 = {
|
|
246
246
|
base: {
|
|
247
247
|
color: colors$w.DdsColorNeutralsGray6,
|
|
248
|
-
font: fontPackages$
|
|
248
|
+
font: fontPackages$4.supportingStyle_placeholdertext_01.base,
|
|
249
249
|
margin: 0
|
|
250
250
|
},
|
|
251
251
|
margins: {
|
|
252
|
-
marginTop: fontPackages$
|
|
253
|
-
marginBottom: fontPackages$
|
|
252
|
+
marginTop: fontPackages$4.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
|
|
253
|
+
marginBottom: fontPackages$4.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
|
|
254
254
|
}
|
|
255
255
|
};
|
|
256
256
|
var supportingStylePlaceholderText02 = {
|
|
257
257
|
base: {
|
|
258
258
|
color: colors$w.DdsColorNeutralsGray6,
|
|
259
|
-
font: fontPackages$
|
|
259
|
+
font: fontPackages$4.supportingStyle_placeholdertext_02.base,
|
|
260
260
|
margin: 0
|
|
261
261
|
},
|
|
262
262
|
margins: {
|
|
263
|
-
marginTop: fontPackages$
|
|
264
|
-
marginBottom: fontPackages$
|
|
263
|
+
marginTop: fontPackages$4.supportingStyle_placeholdertext_02.paragraph.paragraphSpacing,
|
|
264
|
+
marginBottom: fontPackages$4.supportingStyle_placeholdertext_02.paragraph.paragraphSpacing
|
|
265
265
|
}
|
|
266
266
|
};
|
|
267
267
|
var supportingStylePlaceholderText03 = {
|
|
268
268
|
base: {
|
|
269
269
|
color: colors$w.DdsColorNeutralsGray6,
|
|
270
|
-
font: fontPackages$
|
|
270
|
+
font: fontPackages$4.supportingStyle_placeholdertext_03.base,
|
|
271
271
|
margin: 0
|
|
272
272
|
},
|
|
273
273
|
margins: {
|
|
274
|
-
marginTop: fontPackages$
|
|
275
|
-
marginBottom: fontPackages$
|
|
274
|
+
marginTop: fontPackages$4.supportingStyle_placeholdertext_03.paragraph.paragraphSpacing,
|
|
275
|
+
marginBottom: fontPackages$4.supportingStyle_placeholdertext_03.paragraph.paragraphSpacing
|
|
276
276
|
}
|
|
277
277
|
};
|
|
278
278
|
var supportingStyleTiny01 = {
|
|
279
279
|
base: {
|
|
280
280
|
color: textDefault$5.textColor,
|
|
281
|
-
font: fontPackages$
|
|
281
|
+
font: fontPackages$4.supportingStyle_tiny_01.base,
|
|
282
282
|
margin: 0
|
|
283
283
|
},
|
|
284
284
|
margins: {
|
|
285
|
-
marginTop: fontPackages$
|
|
286
|
-
marginBottom: fontPackages$
|
|
285
|
+
marginTop: fontPackages$4.supportingStyle_tiny_01.paragraph.paragraphSpacing,
|
|
286
|
+
marginBottom: fontPackages$4.supportingStyle_tiny_01.paragraph.paragraphSpacing
|
|
287
287
|
}
|
|
288
288
|
};
|
|
289
289
|
var supportingStyleTiny02 = {
|
|
290
290
|
base: {
|
|
291
291
|
color: textDefault$5.textColor,
|
|
292
|
-
font: fontPackages$
|
|
292
|
+
font: fontPackages$4.supportingStyle_tiny_02.base,
|
|
293
293
|
margin: 0
|
|
294
294
|
},
|
|
295
295
|
margins: {
|
|
296
|
-
marginTop: fontPackages$
|
|
297
|
-
marginBottom: fontPackages$
|
|
296
|
+
marginTop: fontPackages$4.supportingStyle_tiny_02.paragraph.paragraphSpacing,
|
|
297
|
+
marginBottom: fontPackages$4.supportingStyle_tiny_02.paragraph.paragraphSpacing
|
|
298
298
|
}
|
|
299
299
|
};
|
|
300
300
|
var typographyTokens = {
|
|
@@ -3644,7 +3644,7 @@ var CheckboxGroup = function CheckboxGroup(props) {
|
|
|
3644
3644
|
var colors$p = ddsDesignTokens.ddsBaseTokens.colors,
|
|
3645
3645
|
border$b = ddsDesignTokens.ddsBaseTokens.border,
|
|
3646
3646
|
spacing$y = ddsDesignTokens.ddsBaseTokens.spacing,
|
|
3647
|
-
fontPackages$
|
|
3647
|
+
fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages,
|
|
3648
3648
|
borderRadius$7 = ddsDesignTokens.ddsBaseTokens.borderRadius,
|
|
3649
3649
|
outerShadow$1 = ddsDesignTokens.ddsBaseTokens.outerShadow;
|
|
3650
3650
|
var typographyTypes$6 = {
|
|
@@ -3653,10 +3653,10 @@ var typographyTypes$6 = {
|
|
|
3653
3653
|
small: 'bodySans01',
|
|
3654
3654
|
tiny: 'supportingStyleTiny01'
|
|
3655
3655
|
};
|
|
3656
|
-
var iconSizeTinyPx = calculateHeightWithLineHeight(fontPackages$
|
|
3657
|
-
var iconSizeSmallPx = calculateHeightWithLineHeight(fontPackages$
|
|
3658
|
-
var iconSizeMediumPx = calculateHeightWithLineHeight(fontPackages$
|
|
3659
|
-
var iconSizeLargePx = calculateHeightWithLineHeight(fontPackages$
|
|
3656
|
+
var iconSizeTinyPx = calculateHeightWithLineHeight(fontPackages$3.supportingStyle_tiny_01.numbers.lineHeightNumber, fontPackages$3.supportingStyle_tiny_01.numbers.fontSizeNumber);
|
|
3657
|
+
var iconSizeSmallPx = calculateHeightWithLineHeight(fontPackages$3.body_sans_01.numbers.lineHeightNumber, fontPackages$3.body_sans_01.numbers.fontSizeNumber);
|
|
3658
|
+
var iconSizeMediumPx = calculateHeightWithLineHeight(fontPackages$3.body_sans_02.numbers.lineHeightNumber, fontPackages$3.body_sans_02.numbers.fontSizeNumber);
|
|
3659
|
+
var iconSizeLargePx = calculateHeightWithLineHeight(fontPackages$3.body_sans_04.numbers.lineHeightNumber, fontPackages$3.body_sans_04.numbers.fontSizeNumber);
|
|
3660
3660
|
var svgOffset = spacing$y.SizesDdsSpacingLocalX0125NumberPx;
|
|
3661
3661
|
var filledButtonColors = {
|
|
3662
3662
|
primary: {
|
|
@@ -4667,7 +4667,6 @@ var scrollbarStyling = {
|
|
|
4667
4667
|
|
|
4668
4668
|
var colors$m = ddsDesignTokens.ddsBaseTokens.colors,
|
|
4669
4669
|
spacing$v = ddsDesignTokens.ddsBaseTokens.spacing,
|
|
4670
|
-
fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages,
|
|
4671
4670
|
borderRadius$6 = ddsDesignTokens.ddsBaseTokens.borderRadius,
|
|
4672
4671
|
border$a = ddsDesignTokens.ddsBaseTokens.border;
|
|
4673
4672
|
var textDefault$3 = ddsDesignTokens.ddsReferenceTokens.textDefault;
|
|
@@ -4684,10 +4683,6 @@ var typographyTypes$5 = {
|
|
|
4684
4683
|
groupHeading: 'supportingStyleHelperText01',
|
|
4685
4684
|
multiValueLabel: 'bodySans01'
|
|
4686
4685
|
};
|
|
4687
|
-
//custom spacing so that multiselect has same height as single value select
|
|
4688
|
-
var controlPaddingBottomMultiMedium = "".concat(spacing$v.SizesDdsSpacingLocalX075NumberPx - 1, "px");
|
|
4689
|
-
var controlPaddingBottomMultiSmall = "".concat(spacing$v.SizesDdsSpacingLocalX05NumberPx - 1, "px");
|
|
4690
|
-
var inputContainerMinHeightMulti = "".concat(spacing$v.SizesDdsSpacingLocalX0125NumberPx * 2 + calculateHeightWithLineHeight(fontPackages$3.body_sans_01.numbers.lineHeightNumber, fontPackages$3.body_sans_01.numbers.fontSizeNumber), "px");
|
|
4691
4686
|
var control = {
|
|
4692
4687
|
borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
|
|
4693
4688
|
border: "".concat(border$a.BordersDdsBorderStyleLightStrokeWeight, " solid"),
|
|
@@ -4705,10 +4700,13 @@ var control = {
|
|
|
4705
4700
|
isMulti: {
|
|
4706
4701
|
sizes: {
|
|
4707
4702
|
medium: {
|
|
4708
|
-
padding: "".concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(
|
|
4703
|
+
padding: "".concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
|
|
4709
4704
|
},
|
|
4710
4705
|
small: {
|
|
4711
|
-
padding: "".concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(
|
|
4706
|
+
padding: "".concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
|
|
4707
|
+
},
|
|
4708
|
+
tiny: {
|
|
4709
|
+
padding: "".concat(spacing$v.SizesDdsSpacingLocalX025, " ").concat(spacing$v.SizesDdsSpacingLocalX05)
|
|
4712
4710
|
}
|
|
4713
4711
|
}
|
|
4714
4712
|
},
|
|
@@ -4788,13 +4786,13 @@ var multiValue = {
|
|
|
4788
4786
|
backgroundColor: colors$m.DdsColorNeutralsGray2
|
|
4789
4787
|
};
|
|
4790
4788
|
var multiValueLabel = {
|
|
4791
|
-
padding: "
|
|
4789
|
+
padding: "0 ".concat(spacing$v.SizesDdsSpacingLocalX025),
|
|
4792
4790
|
color: colors$m.DdsColorNeutralsGray9
|
|
4793
4791
|
};
|
|
4794
4792
|
var multiValueRemove = {
|
|
4795
4793
|
base: {
|
|
4796
4794
|
color: colors$m.DdsColorNeutralsGray9,
|
|
4797
|
-
padding: spacing$v.SizesDdsSpacingLocalX025,
|
|
4795
|
+
padding: "0 ".concat(spacing$v.SizesDdsSpacingLocalX025),
|
|
4798
4796
|
borderTopRightRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
|
|
4799
4797
|
borderBottomRightRadius: borderRadius$6.RadiiDdsBorderRadius1Radius
|
|
4800
4798
|
},
|
|
@@ -4809,11 +4807,6 @@ var valueContainer = {
|
|
|
4809
4807
|
gap: spacing$v.SizesDdsSpacingLocalX025
|
|
4810
4808
|
}
|
|
4811
4809
|
};
|
|
4812
|
-
var inputContainer$1 = {
|
|
4813
|
-
isMulti: {
|
|
4814
|
-
minHeight: inputContainerMinHeightMulti
|
|
4815
|
-
}
|
|
4816
|
-
};
|
|
4817
4810
|
var icon$7 = {
|
|
4818
4811
|
marginRight: spacing$v.SizesDdsSpacingLocalX05
|
|
4819
4812
|
};
|
|
@@ -4825,7 +4818,6 @@ var selectTokens = {
|
|
|
4825
4818
|
groupHeading: groupHeading,
|
|
4826
4819
|
option: option,
|
|
4827
4820
|
valueContainer: valueContainer,
|
|
4828
|
-
inputContainer: inputContainer$1,
|
|
4829
4821
|
multiValue: multiValue,
|
|
4830
4822
|
multiValueLabel: multiValueLabel,
|
|
4831
4823
|
multiValueRemove: multiValueRemove,
|
|
@@ -4848,9 +4840,11 @@ var _control = selectTokens.control,
|
|
|
4848
4840
|
_noOptionsMessage = selectTokens.noOptionsMessage,
|
|
4849
4841
|
_placeholder = selectTokens.placeholder,
|
|
4850
4842
|
icon$6 = selectTokens.icon,
|
|
4851
|
-
_valueContainer = selectTokens.valueContainer
|
|
4852
|
-
inputContainer = selectTokens.inputContainer;
|
|
4843
|
+
_valueContainer = selectTokens.valueContainer;
|
|
4853
4844
|
var prefix = 'dds-select';
|
|
4845
|
+
function getContainerControlPadding(componentSize, isMulti) {
|
|
4846
|
+
return isMulti ? _control.isMulti.sizes[componentSize].padding : _control.sizes[componentSize].padding;
|
|
4847
|
+
}
|
|
4854
4848
|
var Container$e = styled__default.default.div.withConfig({
|
|
4855
4849
|
displayName: "Selectstyles__Container",
|
|
4856
4850
|
componentId: "sc-19jkd5s-0"
|
|
@@ -4860,7 +4854,7 @@ var Container$e = styled__default.default.div.withConfig({
|
|
|
4860
4854
|
}, selection, function (_ref2) {
|
|
4861
4855
|
var componentSize = _ref2.componentSize,
|
|
4862
4856
|
isMulti = _ref2.isMulti;
|
|
4863
|
-
return styled.css([".", "__control{padding:", ";", "}.", "__option{", "}.", "__placeholder{", "}.", "__menu-notice--no-options{", "}"], prefix,
|
|
4857
|
+
return styled.css([".", "__control{padding:", ";", "}.", "__option{", "}.", "__placeholder{", "}.", "__menu-notice--no-options{", "}"], prefix, getContainerControlPadding(componentSize, isMulti), getFontStyling(typographyTypes$5.control[componentSize], true), prefix, getFontStyling(typographyTypes$5.option[componentSize], true), prefix, getFontStyling(typographyTypes$5.placeholder[componentSize]), prefix, getFontStyling(typographyTypes$5.noOptionsMessage[componentSize]));
|
|
4864
4858
|
}, function (_ref3) {
|
|
4865
4859
|
var errorMessage = _ref3.errorMessage;
|
|
4866
4860
|
return errorMessage && styled.css([".", "__control{", "}.", "__control:hover{", "}.", "__control:focus-within{", "}"], prefix, dangerInputfield, prefix, hoverDangerInputfield, prefix, focusInputfield);
|
|
@@ -4900,12 +4894,10 @@ var getCustomStyles = function getCustomStyles() {
|
|
|
4900
4894
|
margin: 0
|
|
4901
4895
|
});
|
|
4902
4896
|
},
|
|
4903
|
-
input: function input(provided
|
|
4904
|
-
return Object.assign(Object.assign(
|
|
4897
|
+
input: function input(provided) {
|
|
4898
|
+
return Object.assign(Object.assign({}, provided), {
|
|
4905
4899
|
margin: 0,
|
|
4906
4900
|
padding: 0
|
|
4907
|
-
}), state.isMulti && {
|
|
4908
|
-
minHeight: inputContainer.isMulti.minHeight
|
|
4909
4901
|
});
|
|
4910
4902
|
},
|
|
4911
4903
|
indicatorSeparator: function indicatorSeparator() {
|
|
@@ -24,9 +24,11 @@ var _control = selectTokens.control,
|
|
|
24
24
|
_noOptionsMessage = selectTokens.noOptionsMessage,
|
|
25
25
|
_placeholder = selectTokens.placeholder,
|
|
26
26
|
icon = selectTokens.icon,
|
|
27
|
-
_valueContainer = selectTokens.valueContainer
|
|
28
|
-
inputContainer = selectTokens.inputContainer;
|
|
27
|
+
_valueContainer = selectTokens.valueContainer;
|
|
29
28
|
var prefix = 'dds-select';
|
|
29
|
+
function getContainerControlPadding(componentSize, isMulti) {
|
|
30
|
+
return isMulti ? _control.isMulti.sizes[componentSize].padding : _control.sizes[componentSize].padding;
|
|
31
|
+
}
|
|
30
32
|
var Container = styled.div.withConfig({
|
|
31
33
|
displayName: "Selectstyles__Container",
|
|
32
34
|
componentId: "sc-19jkd5s-0"
|
|
@@ -36,7 +38,7 @@ var Container = styled.div.withConfig({
|
|
|
36
38
|
}, selection, function (_ref2) {
|
|
37
39
|
var componentSize = _ref2.componentSize,
|
|
38
40
|
isMulti = _ref2.isMulti;
|
|
39
|
-
return css([".", "__control{padding:", ";", "}.", "__option{", "}.", "__placeholder{", "}.", "__menu-notice--no-options{", "}"], prefix,
|
|
41
|
+
return css([".", "__control{padding:", ";", "}.", "__option{", "}.", "__placeholder{", "}.", "__menu-notice--no-options{", "}"], prefix, getContainerControlPadding(componentSize, isMulti), getFontStyling(typographyTypes.control[componentSize], true), prefix, getFontStyling(typographyTypes.option[componentSize], true), prefix, getFontStyling(typographyTypes.placeholder[componentSize]), prefix, getFontStyling(typographyTypes.noOptionsMessage[componentSize]));
|
|
40
42
|
}, function (_ref3) {
|
|
41
43
|
var errorMessage = _ref3.errorMessage;
|
|
42
44
|
return errorMessage && css([".", "__control{", "}.", "__control:hover{", "}.", "__control:focus-within{", "}"], prefix, dangerInputfield, prefix, hoverDangerInputfield, prefix, focusInputfield);
|
|
@@ -76,12 +78,10 @@ var getCustomStyles = function getCustomStyles() {
|
|
|
76
78
|
margin: 0
|
|
77
79
|
});
|
|
78
80
|
},
|
|
79
|
-
input: function input(provided
|
|
80
|
-
return Object.assign(Object.assign(
|
|
81
|
+
input: function input(provided) {
|
|
82
|
+
return Object.assign(Object.assign({}, provided), {
|
|
81
83
|
margin: 0,
|
|
82
84
|
padding: 0
|
|
83
|
-
}), state.isMulti && {
|
|
84
|
-
minHeight: inputContainer.isMulti.minHeight
|
|
85
85
|
});
|
|
86
86
|
},
|
|
87
87
|
indicatorSeparator: function indicatorSeparator() {
|
|
@@ -35,6 +35,9 @@ export declare const selectTokens: {
|
|
|
35
35
|
small: {
|
|
36
36
|
padding: string;
|
|
37
37
|
};
|
|
38
|
+
tiny: {
|
|
39
|
+
padding: string;
|
|
40
|
+
};
|
|
38
41
|
};
|
|
39
42
|
};
|
|
40
43
|
sizes: {
|
|
@@ -98,11 +101,6 @@ export declare const selectTokens: {
|
|
|
98
101
|
gap: string;
|
|
99
102
|
};
|
|
100
103
|
};
|
|
101
|
-
inputContainer: {
|
|
102
|
-
isMulti: {
|
|
103
|
-
minHeight: string;
|
|
104
|
-
};
|
|
105
|
-
};
|
|
106
104
|
multiValue: {
|
|
107
105
|
borderRadius: string;
|
|
108
106
|
backgroundColor: string;
|
|
@@ -10,13 +10,11 @@ import '../../helpers/Paper/Paper.js';
|
|
|
10
10
|
import '../../helpers/RequiredMarker/RequiredMarker.js';
|
|
11
11
|
import 'react';
|
|
12
12
|
import '../../hooks/useFloatPosition.js';
|
|
13
|
-
import { calculateHeightWithLineHeight } from '../../utils/text.js';
|
|
14
13
|
import '../../utils/color.js';
|
|
15
14
|
import '../../hooks/useScreenSize.js';
|
|
16
15
|
|
|
17
16
|
var colors = ddsBaseTokens.colors,
|
|
18
17
|
spacing = ddsBaseTokens.spacing,
|
|
19
|
-
fontPackages = ddsBaseTokens.fontPackages,
|
|
20
18
|
borderRadius = ddsBaseTokens.borderRadius,
|
|
21
19
|
border = ddsBaseTokens.border;
|
|
22
20
|
var textDefault = ddsReferenceTokens.textDefault;
|
|
@@ -33,10 +31,6 @@ var typographyTypes = {
|
|
|
33
31
|
groupHeading: 'supportingStyleHelperText01',
|
|
34
32
|
multiValueLabel: 'bodySans01'
|
|
35
33
|
};
|
|
36
|
-
//custom spacing so that multiselect has same height as single value select
|
|
37
|
-
var controlPaddingBottomMultiMedium = "".concat(spacing.SizesDdsSpacingLocalX075NumberPx - 1, "px");
|
|
38
|
-
var controlPaddingBottomMultiSmall = "".concat(spacing.SizesDdsSpacingLocalX05NumberPx - 1, "px");
|
|
39
|
-
var inputContainerMinHeightMulti = "".concat(spacing.SizesDdsSpacingLocalX0125NumberPx * 2 + calculateHeightWithLineHeight(fontPackages.body_sans_01.numbers.lineHeightNumber, fontPackages.body_sans_01.numbers.fontSizeNumber), "px");
|
|
40
34
|
var control = {
|
|
41
35
|
borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
|
|
42
36
|
border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid"),
|
|
@@ -54,10 +48,13 @@ var control = {
|
|
|
54
48
|
isMulti: {
|
|
55
49
|
sizes: {
|
|
56
50
|
medium: {
|
|
57
|
-
padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(
|
|
51
|
+
padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX075)
|
|
58
52
|
},
|
|
59
53
|
small: {
|
|
60
|
-
padding: "".concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(
|
|
54
|
+
padding: "".concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX075)
|
|
55
|
+
},
|
|
56
|
+
tiny: {
|
|
57
|
+
padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05)
|
|
61
58
|
}
|
|
62
59
|
}
|
|
63
60
|
},
|
|
@@ -137,13 +134,13 @@ var multiValue = {
|
|
|
137
134
|
backgroundColor: colors.DdsColorNeutralsGray2
|
|
138
135
|
};
|
|
139
136
|
var multiValueLabel = {
|
|
140
|
-
padding: "
|
|
137
|
+
padding: "0 ".concat(spacing.SizesDdsSpacingLocalX025),
|
|
141
138
|
color: colors.DdsColorNeutralsGray9
|
|
142
139
|
};
|
|
143
140
|
var multiValueRemove = {
|
|
144
141
|
base: {
|
|
145
142
|
color: colors.DdsColorNeutralsGray9,
|
|
146
|
-
padding: spacing.SizesDdsSpacingLocalX025,
|
|
143
|
+
padding: "0 ".concat(spacing.SizesDdsSpacingLocalX025),
|
|
147
144
|
borderTopRightRadius: borderRadius.RadiiDdsBorderRadius1Radius,
|
|
148
145
|
borderBottomRightRadius: borderRadius.RadiiDdsBorderRadius1Radius
|
|
149
146
|
},
|
|
@@ -158,11 +155,6 @@ var valueContainer = {
|
|
|
158
155
|
gap: spacing.SizesDdsSpacingLocalX025
|
|
159
156
|
}
|
|
160
157
|
};
|
|
161
|
-
var inputContainer = {
|
|
162
|
-
isMulti: {
|
|
163
|
-
minHeight: inputContainerMinHeightMulti
|
|
164
|
-
}
|
|
165
|
-
};
|
|
166
158
|
var icon = {
|
|
167
159
|
marginRight: spacing.SizesDdsSpacingLocalX05
|
|
168
160
|
};
|
|
@@ -174,7 +166,6 @@ var selectTokens = {
|
|
|
174
166
|
groupHeading: groupHeading,
|
|
175
167
|
option: option,
|
|
176
168
|
valueContainer: valueContainer,
|
|
177
|
-
inputContainer: inputContainer,
|
|
178
169
|
multiValue: multiValue,
|
|
179
170
|
multiValueLabel: multiValueLabel,
|
|
180
171
|
multiValueRemove: multiValueRemove,
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { stackTokens } from './Stack.tokens';
|
|
3
3
|
import { BaseComponentPropsWithChildren } from '../../types';
|
|
4
|
-
|
|
5
|
-
type Justify = 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
|
|
4
|
+
import { StandardProperties } from 'csstype';
|
|
6
5
|
export interface StackStyleProps {
|
|
7
6
|
/**
|
|
8
7
|
* Hvilken retning elementene skal plasseres i.
|
|
@@ -12,12 +11,12 @@ export interface StackStyleProps {
|
|
|
12
11
|
* CSS `align-items`.
|
|
13
12
|
* @default 'center'
|
|
14
13
|
*/
|
|
15
|
-
align?:
|
|
14
|
+
align?: StandardProperties['alignItems'];
|
|
16
15
|
/**
|
|
17
16
|
* CSS `justify-content`.
|
|
18
17
|
* @default 'flex-start'
|
|
19
18
|
*/
|
|
20
|
-
justify?:
|
|
19
|
+
justify?: StandardProperties['justifyContent'];
|
|
21
20
|
/**
|
|
22
21
|
* Hvilken spacing token som skal brukes som CSS `gap`.
|
|
23
22
|
*/
|
|
@@ -38,4 +37,3 @@ export declare const VStack: import("react").ForwardRefExoticComponent<Pick<impo
|
|
|
38
37
|
} & {
|
|
39
38
|
htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
|
|
40
39
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
41
|
-
export {};
|