@utrecht/component-library-react 1.0.0-alpha.203 → 1.0.0-alpha.205
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/BreadcrumbNav.d.ts +22 -0
- package/dist/css-module/BreadcrumbNav.d.ts +22 -0
- package/dist/css-module/css-module/BreadcrumbNav.d.ts +6 -0
- package/dist/css-module/css-module/index.d.ts +1 -0
- package/dist/css-module/index.d.ts +1 -0
- package/dist/css-module/index.js +142 -57
- package/dist/css-module/index.js.map +1 -1
- package/dist/css-module/index.mjs +142 -59
- package/dist/css-module/index.mjs.map +1 -1
- package/dist/index.cjs.js +131 -49
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +131 -51
- package/dist/index.esm.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __rest } from 'tslib';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
-
import { forwardRef } from 'react';
|
|
4
|
+
import { forwardRef, useId } from 'react';
|
|
5
5
|
|
|
6
6
|
function styleInject(css, ref) {
|
|
7
7
|
if ( ref === void 0 ) ref = {};
|
|
@@ -30,8 +30,8 @@ function styleInject(css, ref) {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
var css_248z$
|
|
34
|
-
styleInject(css_248z$
|
|
33
|
+
var css_248z$S = ".utrecht-alert{background-color:var(--_utrecht-alert-background-color,var(--utrecht-alert-background-color));border-color:var(--_utrecht-alert-border-color,var(--utrecht-alert-border-color));border-style:solid;border-width:var(--_utrecht-alert-border-width,var(--utrecht-alert-border-width,0));color:var(--_utrecht-alert-color,var(--utrecht-alert-color));display:grid;gap:var(--utrecht-alert-icon-gap);grid-template-areas:\"icon message\";grid-template-columns:0fr 100fr;margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-alert-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-alert-margin-block-start, 0));padding-block-end:var(--utrecht-alert-padding-block-end);padding-block-start:var(--utrecht-alert-padding-block-start);padding-inline-end:var(--utrecht-alert-padding-inline-end);padding-inline-start:var(--utrecht-alert-padding-inline-start)}.utrecht-alert__icon{--utrecht-icon-color:var(--_utrecht-alert-icon-color,var(--utrecht-alert-icon-color));grid-area:icon}.utrecht-alert__message{grid-area:message}.utrecht-alert--info{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-info-color);--_utrecht-alert-background-color:var(--utrecht-alert-info-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-info-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-info-border-width);--_utrecht-alert-color:var(--utrecht-alert-info-color)}.utrecht-alert--ok{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-ok-color);--_utrecht-alert-background-color:var(--utrecht-alert-ok-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-ok-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-ok-border-width);--_utrecht-alert-color:var(--utrecht-alert-ok-color)}.utrecht-alert--warning{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-warning-color);--_utrecht-alert-background-color:var(--utrecht-alert-warning-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-warning-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-warning-border-width);--_utrecht-alert-color:var(--utrecht-alert-warning-color)}.utrecht-alert--error{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-error-color);--_utrecht-alert-background-color:var(--utrecht-alert-error-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-error-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-error-border-width);--_utrecht-alert-color:var(--utrecht-alert-error-color)}";
|
|
34
|
+
styleInject(css_248z$S);
|
|
35
35
|
|
|
36
36
|
var Alert = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
37
37
|
var children = _a.children,
|
|
@@ -62,8 +62,8 @@ var Alert = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
62
62
|
});
|
|
63
63
|
Alert.displayName = 'Alert';
|
|
64
64
|
|
|
65
|
-
var css_248z$
|
|
66
|
-
styleInject(css_248z$
|
|
65
|
+
var css_248z$R = ".utrecht-alert-dialog:not(dialog:not([open])){--utrecht-alert-dialog-margin-block-start:auto;--utrecht-alert-dialog-margin-block-end:auto;background-color:var(--_utrecht-alert-background-color,var(--utrecht-alert-background-color));border-color:var(--utrecht-alert-dialog-border-color);border-radius:var(--utrecht-alert-dialog-border-radius,0);border-style:solid;border-width:var(--utrecht-alert-dialog-border-width,0);box-shadow:var(--utrecht-alert-dialog-box-shadow);color:var(--_utrecht-alert-color,var(--utrecht-alert-color));display:grid;gap:var(--utrecht-alert-icon-gap);grid-template-areas:\"icon message\";grid-template-columns:0fr 100fr;margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-alert-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-alert-margin-block-start, 0));max-block-size:var(--utrecht-alert-dialog-max-block-size);max-inline-size:var(--utrecht-alert-dialog-max-inline-size);min-block-size:var(--utrecht-alert-dialog-min-block-size);min-inline-size:var(--utrecht-alert-dialog-min-inline-size);padding-block-end:var(--utrecht-alert-padding-block-end);padding-block-start:var(--utrecht-alert-padding-block-start);padding-inline-end:var(--utrecht-alert-padding-inline-end);padding-inline-start:var(--utrecht-alert-padding-inline-start)}.utrecht-alert-dialog::backdrop{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-opacity);--_utrecht-backdrop-fade-in-animation-duration:var(--utrecht-backdrop-fade-in-animation-duration,0);animation-duration:min(var(--utrecht-motion-max-animation-duration,var(--_utrecht-backdrop-fade-in-animation-duration)),var(--_utrecht-backdrop-fade-in-animation-duration,0));animation-name:utrecht-backdrop-fade-in;animation-timing-function:ease-in-out;background-color:var(--utrecht-backdrop-background-color);color:var(--utrecht-backdrop-color);opacity:var(--_utrecht-backdrop-opacity);user-select:none}@keyframes utrecht-backdrop-fade-in{0%{opacity:0}to{opacity:var(--_utrecht-backdrop-opacity)}}@media (prefers-reduced-motion:reduce){.utrecht-alert-dialog::backdrop{--_utrecht-backdrop-fade-in-animation-duration:0}}@media (prefers-reduced-transparency:reduce){.utrecht-alert-dialog::backdrop{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-reduced-transparency-opacity,100%)}}.utrecht-alert-dialog__icon{--utrecht-icon-color:var(--_utrecht-alert-icon-color,var(--utrecht-alert-icon-color));grid-area:icon}.utrecht-alert-dialog__message{grid-area:message}.utrecht-alert-dialog--error{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-error-color);--_utrecht-alert-background-color:var(--utrecht-alert-error-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-error-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-error-border-width);--_utrecht-alert-color:var(--utrecht-alert-error-color)}.utrecht-alert-dialog--info{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-info-color);--_utrecht-alert-background-color:var(--utrecht-alert-info-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-info-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-info-border-width);--_utrecht-alert-color:var(--utrecht-alert-info-color)}.utrecht-alert-dialog--warning{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-warning-color);--_utrecht-alert-background-color:var(--utrecht-alert-warning-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-warning-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-warning-border-width);--_utrecht-alert-color:var(--utrecht-alert-warning-color)}";
|
|
66
|
+
styleInject(css_248z$R);
|
|
67
67
|
|
|
68
68
|
var AlertDialog = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
69
69
|
var children = _a.children,
|
|
@@ -94,8 +94,8 @@ var AlertDialog = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
94
94
|
});
|
|
95
95
|
AlertDialog.displayName = 'AlertDialog';
|
|
96
96
|
|
|
97
|
-
var css_248z$
|
|
98
|
-
styleInject(css_248z$
|
|
97
|
+
var css_248z$Q = ".utrecht-article{max-inline-size:var(--utrecht-article-max-inline-size)}";
|
|
98
|
+
styleInject(css_248z$Q);
|
|
99
99
|
|
|
100
100
|
var Article = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
101
101
|
var children = _a.children,
|
|
@@ -111,8 +111,8 @@ var Article = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
111
111
|
});
|
|
112
112
|
Article.displayName = 'Article';
|
|
113
113
|
|
|
114
|
-
var css_248z$
|
|
115
|
-
styleInject(css_248z$
|
|
114
|
+
var css_248z$P = ".utrecht-backdrop{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-opacity);--_utrecht-backdrop-fade-in-animation-duration:var(--utrecht-backdrop-fade-in-animation-duration,0);animation-duration:min(var(--utrecht-motion-max-animation-duration,var(--_utrecht-backdrop-fade-in-animation-duration)),var(--_utrecht-backdrop-fade-in-animation-duration,0));animation-name:utrecht-backdrop-fade-in;animation-timing-function:ease-in-out;background-color:var(--utrecht-backdrop-background-color);bottom:0;color:var(--utrecht-backdrop-color);display:block;left:0;opacity:var(--_utrecht-backdrop-opacity);position:absolute;right:0;top:0;user-select:none;z-index:var(--utrecht-backdrop-z-index)}@keyframes utrecht-backdrop-fade-in{0%{opacity:0}to{opacity:var(--_utrecht-backdrop-opacity)}}@media (prefers-reduced-motion:reduce){.utrecht-backdrop{--_utrecht-backdrop-fade-in-animation-duration:0}}@media (prefers-reduced-transparency:reduce){.utrecht-backdrop{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-reduced-transparency-opacity,100%)}}.utrecht-backdrop--reduced-motion{--_utrecht-backdrop-fade-in-animation-duration:0}.utrecht-backdrop--reduced-transparency{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-reduced-transparency-opacity,100%)}.utrecht-backdrop--viewport{position:fixed}";
|
|
115
|
+
styleInject(css_248z$P);
|
|
116
116
|
|
|
117
117
|
var Backdrop = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
118
118
|
var children = _a.children,
|
|
@@ -128,6 +128,138 @@ var Backdrop = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
128
128
|
});
|
|
129
129
|
Backdrop.displayName = 'Backdrop';
|
|
130
130
|
|
|
131
|
+
var css_248z$O = ".utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:before{block-size:0;inline-size:0;inset-block-start:50%;inset-inline-start:100%}.utrecht-breadcrumb{--utrecht-focus-background-color:var(--utrecht-breadcrumb-link-focus-background-color);--utrecht-link-background-color:var(--utrecht-breadcrumb-link-background-color);--utrecht-link-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-focus-color:var(--utrecht-breadcrumb-link-focus-color,var(--utrecht-breadcrumb-link-color));--utrecht-link-focus-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-hover-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-hover-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-visited-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-visited-text-decoration:var(--utrecht-link-text-decoration);font-family:var(--utrecht-document-font-family,inherit);font-size:var(--utrecht-breadcrumb-font-size);text-transform:var(--utrecht-document-text-transform,inherit)}.utrecht-breadcrumb__heading{display:none}.utrecht-breadcrumb__list{block-size:var(--utrecht-breadcrumb-block-size);display:flex}ol.utrecht-breadcrumb__list{list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.utrecht-breadcrumb__item{block-size:100%}.utrecht-breadcrumb__link{background-color:var(--utrecht-breadcrumb-link-background-color);display:block;padding-block-end:var(--utrecht-breadcrumb-item-padding-block-end,8px);padding-block-start:var(--utrecht-breadcrumb-item-padding-block-start,8px);padding-inline-end:var(--utrecht-breadcrumb-item-padding-inline-end,8px);padding-inline-start:var(--utrecht-breadcrumb-item-padding-inline-start,8px)}.utrecht-breadcrumb--arrows{--utrecht-breadcrumb-arrow-size:24px;overflow:hidden}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link{padding-inline-end:0;position:relative}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:before{border-block-end-width:var(--utrecht-breadcrumb-block-size);border-block-start-width:var(--utrecht-breadcrumb-block-size);border-color:transparent;border-style:solid;content:\" \";display:block;height:0;left:100%;margin-block-start:calc(var(--utrecht-breadcrumb-block-size)*-1);position:absolute;top:50%;width:0}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:after{border-inline-start-color:var(--utrecht-breadcrumb-link-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);z-index:2}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:before{border-inline-start-color:var(--utrecht-document-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);margin-block-start:calc(var(--utrecht-breadcrumb-block-size)*-1);margin-inline-start:1px;z-index:1}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus{background-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus:after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus:after{border-inline-start-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__item~.utrecht-breadcrumb__item .utrecht-breadcrumb__link{padding-inline-start:calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size))}.utrecht-breadcrumb__item~.utrecht-breadcrumb__item{margin-inline-start:var(--utrecht-breadcrumb-item-divider-inline-size)}";
|
|
132
|
+
styleInject(css_248z$O);
|
|
133
|
+
|
|
134
|
+
var Heading = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
135
|
+
var appearance = _a.appearance,
|
|
136
|
+
className = _a.className,
|
|
137
|
+
level = _a.level,
|
|
138
|
+
restProps = __rest(_a, ["appearance", "className", "level"]);
|
|
139
|
+
|
|
140
|
+
var appearances = ['utrecht-heading-1', 'utrecht-heading-2', 'utrecht-heading-3', 'utrecht-heading-4', 'utrecht-heading-5', 'utrecht-heading-6'];
|
|
141
|
+
var HeadingX = level === 2 ? 'h2' : level === 3 ? 'h3' : level === 4 ? 'h4' : level === 5 ? 'h5' : level === 6 ? 'h6' : 'h1';
|
|
142
|
+
var headingClassName = appearance && appearances.indexOf(appearance) !== -1 ? appearance : appearances[level - 1] || 'utrecht-heading-1';
|
|
143
|
+
return jsx(HeadingX, Object.assign({
|
|
144
|
+
className: clsx(headingClassName, className)
|
|
145
|
+
}, restProps, {
|
|
146
|
+
ref: ref
|
|
147
|
+
}));
|
|
148
|
+
});
|
|
149
|
+
Heading.displayName = 'Heading';
|
|
150
|
+
|
|
151
|
+
var Link = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
152
|
+
var boxContent = _a.boxContent,
|
|
153
|
+
children = _a.children,
|
|
154
|
+
className = _a.className,
|
|
155
|
+
external = _a.external,
|
|
156
|
+
href = _a.href,
|
|
157
|
+
placeholder = _a.placeholder,
|
|
158
|
+
role = _a.role,
|
|
159
|
+
restProps = __rest(_a, ["boxContent", "children", "className", "external", "href", "placeholder", "role"]);
|
|
160
|
+
|
|
161
|
+
return (// "utrecht-link--telephone" does not have a corresponding API,
|
|
162
|
+
// since it is primarily a basis for implementing input[href^="tel"].
|
|
163
|
+
// Telephone number rendering in React is best achieved using composition
|
|
164
|
+
// of the TelephoneValue component.
|
|
165
|
+
jsx("a", Object.assign({
|
|
166
|
+
href: placeholder ? undefined : href,
|
|
167
|
+
ref: ref,
|
|
168
|
+
role: role || (placeholder ? 'link' : undefined),
|
|
169
|
+
className: clsx('utrecht-link', {
|
|
170
|
+
'utrecht-link--box-content': boxContent,
|
|
171
|
+
'utrecht-link--external': external,
|
|
172
|
+
'utrecht-link--placeholder': placeholder
|
|
173
|
+
}, className),
|
|
174
|
+
"aria-disabled": placeholder ? 'true' : undefined,
|
|
175
|
+
rel: external ? 'external noopener noreferrer' : undefined
|
|
176
|
+
}, restProps, {
|
|
177
|
+
children: children
|
|
178
|
+
}))
|
|
179
|
+
);
|
|
180
|
+
});
|
|
181
|
+
Link.displayName = 'Link';
|
|
182
|
+
|
|
183
|
+
var useMicrodataItem = function useMicrodataItem(_ref) {
|
|
184
|
+
var prop = _ref.prop,
|
|
185
|
+
type = _ref.type;
|
|
186
|
+
return {
|
|
187
|
+
itemScope: true,
|
|
188
|
+
itemType: type,
|
|
189
|
+
itemProp: prop
|
|
190
|
+
};
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
var useMicrodataProp = function useMicrodataProp(prop) {
|
|
194
|
+
return {
|
|
195
|
+
itemProp: prop
|
|
196
|
+
};
|
|
197
|
+
};
|
|
198
|
+
|
|
199
|
+
var BreadcrumbNav = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
200
|
+
var appearance = _a.appearance,
|
|
201
|
+
children = _a.children,
|
|
202
|
+
className = _a.className,
|
|
203
|
+
_a$headingLevel = _a.headingLevel,
|
|
204
|
+
headingLevel = _a$headingLevel === void 0 ? 2 : _a$headingLevel,
|
|
205
|
+
label = _a.label,
|
|
206
|
+
restProps = __rest(_a, ["appearance", "children", "className", "headingLevel", "label"]);
|
|
207
|
+
|
|
208
|
+
var headingId = label ? useId() : undefined;
|
|
209
|
+
return jsxs("nav", Object.assign({}, restProps, {
|
|
210
|
+
ref: ref,
|
|
211
|
+
className: clsx('utrecht-breadcrumb', {
|
|
212
|
+
'utrecht-breadcrumb--arrows': appearance === 'arrows'
|
|
213
|
+
}, className),
|
|
214
|
+
"aria-labelledby": headingId
|
|
215
|
+
}, {
|
|
216
|
+
children: [label && jsx(Heading, Object.assign({
|
|
217
|
+
id: headingId,
|
|
218
|
+
className: "utrecht-breadcrumb__heading",
|
|
219
|
+
level: headingLevel,
|
|
220
|
+
"aria-hidden": "true"
|
|
221
|
+
}, {
|
|
222
|
+
children: label
|
|
223
|
+
})), jsx("ol", Object.assign({
|
|
224
|
+
className: "utrecht-breadcrumb__list"
|
|
225
|
+
}, useMicrodataItem({
|
|
226
|
+
type: 'https://schema.org/BreadcrumbList'
|
|
227
|
+
}), {
|
|
228
|
+
children: children
|
|
229
|
+
}))]
|
|
230
|
+
}));
|
|
231
|
+
});
|
|
232
|
+
BreadcrumbNav.displayName = 'BreadcrumbNav';
|
|
233
|
+
var BreadcrumbLink = /*#__PURE__*/forwardRef(function (_ref2, ref) {
|
|
234
|
+
var children = _ref2.children,
|
|
235
|
+
current = _ref2.current,
|
|
236
|
+
href = _ref2.href,
|
|
237
|
+
index = _ref2.index;
|
|
238
|
+
return jsx("li", Object.assign({
|
|
239
|
+
className: "utrecht-breadcrumb__item"
|
|
240
|
+
}, useMicrodataItem({
|
|
241
|
+
type: 'https://schema.org/ListItem',
|
|
242
|
+
prop: 'itemListElement'
|
|
243
|
+
}), {
|
|
244
|
+
children: jsxs(Link, Object.assign({
|
|
245
|
+
className: "utrecht-breadcrumb__link",
|
|
246
|
+
href: href,
|
|
247
|
+
"aria-current": current && 'location'
|
|
248
|
+
}, useMicrodataProp('item'), {
|
|
249
|
+
ref: ref
|
|
250
|
+
}, {
|
|
251
|
+
children: [jsx("span", Object.assign({
|
|
252
|
+
className: "utrecht-breadcrumb__text"
|
|
253
|
+
}, useMicrodataProp('name'), {
|
|
254
|
+
children: children
|
|
255
|
+
})), typeof index === 'number' ? jsx("meta", Object.assign({}, useMicrodataProp('position'), {
|
|
256
|
+
content: String(index + 1)
|
|
257
|
+
})) : null]
|
|
258
|
+
}))
|
|
259
|
+
}));
|
|
260
|
+
});
|
|
261
|
+
BreadcrumbLink.displayName = 'BreadcrumbLink';
|
|
262
|
+
|
|
131
263
|
var css_248z$N = ".utrecht-button{--_utrecht-button-background-color:var(\n --_utrecht-button-hint-background-color,var(--_utrecht-button-appearance-background-color,var(--utrecht-button-background-color))\n );--_utrecht-button-color:var(\n --_utrecht-button-hint-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-color))\n );--_utrecht-button-border-color:var(\n --_utrecht-button-hint-border-color,var(--_utrecht-button-appearance-border-color,var(--utrecht-button-border-color,transparent))\n );--_utrecht-button-border-bottom-color:var(\n --_utrecht-button-hint-border-bottom-color,var(\n --_utrecht-button-hint-border-color,var(\n --_utrecht-button-appearance-border-bottom-color,var(\n --_utrecht-button-appearance-border-color,var(--utrecht-button-border-bottom-color,var(--utrecht-button-border-color,transparent))\n )\n )\n )\n );--_utrecht-button-disabled-background-color:var(\n --_utrecht-button-hint-disabled-background-color,var(\n --_utrecht-button-appearance-disabled-background-color,var(--utrecht-button-disabled-background-color,var(--utrecht-button-background-color))\n )\n );--_utrecht-button-disabled-border-color:var(\n --_utrecht-button-hint-disabled-border-color,var(\n --_utrecht-button-appearance-disabled-border-color,var(--utrecht-button-disabled-border-color,var(--utrecht-button-border-color))\n )\n );--_utrecht-button-disabled-color:var(\n --_utrecht-button-hint-disabled-color,var(--_utrecht-button-appearance-disabled-color,var(--utrecht-button-disabled-color,var(--utrecht-button-color)))\n );--_utrecht-button-focus-background-color:var(\n --_utrecht-button-hint-focus-background-color,var(\n --_utrecht-button-hint-background-color,var(\n --_utrecht-button-appearance-focus-background-color,var(\n --_utrecht-button-appearance-background-color,var(--utrecht-button-focus-background-color,var(--utrecht-button-background-color))\n )\n )\n )\n );--_utrecht-button-focus-border-color:var(\n --_utrecht-button-hint-focus-border-color,var(\n --_utrecht-button-hint-border-color,var(\n --_utrecht-button-appearance-focus-border-color,var(\n --_utrecht-button-appearance-border-color,var(--utrecht-button-focus-border-color,var(--utrecht-button-border-color))\n )\n )\n )\n );--_utrecht-button-focus-color:var(\n --_utrecht-button-hint-focus-color,var(\n --_utrecht-button-hint-color,var(\n --_utrecht-button-appearance-focus-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-focus-color,var(--utrecht-button-color)))\n )\n )\n );--_utrecht-button-hover-background-color:var(\n --_utrecht-button-hint-hover-background-color,var(\n --_utrecht-button-hint-background-color,var(\n --_utrecht-button-appearance-hover-background-color,var(\n --_utrecht-button-appearance-background-color,var(--utrecht-button-hover-background-color,var(--utrecht-button-background-color))\n )\n )\n )\n );--_utrecht-button-hover-border-color:var(\n --_utrecht-button-hint-hover-border-color,var(\n --_utrecht-button-hint-border-color,var(\n --_utrecht-button-appearance-hover-border-color,var(\n --_utrecht-button-appearance-border-color,var(--utrecht-button-hover-border-color,var(--utrecht-button-border-color))\n )\n )\n )\n );--_utrecht-button-hover-color:var(\n --_utrecht-button-hint-hover-color,var(\n --_utrecht-button-hint-color,var(\n --_utrecht-button-appearance-hover-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-hover-color,var(--utrecht-button-color)))\n )\n )\n );--_utrecht-button-active-background-color:var(\n --_utrecht-button-hint-active-background-color,var(\n --_utrecht-button-hint-background-color,var(\n --_utrecht-button-appearance-active-background-color,var(\n --_utrecht-button-appearance-background-color,var(--utrecht-button-active-background-color,var(--utrecht-button-background-color))\n )\n )\n )\n );--_utrecht-button-active-border-color:var(\n --_utrecht-button-hint-active-border-color,var(\n --_utrecht-button-hint-border-color,var(\n --_utrecht-button-appearance-active-border-color,var(\n --_utrecht-button-appearance-border-color,var(--utrecht-button-active-border-color,var(--utrecht-button-border-color))\n )\n )\n )\n );--_utrecht-button-active-color:var(\n --_utrecht-button-hint-active-color,var(\n --_utrecht-button-hint-color,var(\n --_utrecht-button-appearance-active-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-active-color,var(--utrecht-button-color)))\n )\n )\n );--_utrecht-button-border-width:var(--_utrecht-button-appearance-border-width,var(--utrecht-button-border-width,0));--_utrecht-button-border-bottom-width:var(\n --utrecht-button-border-bottom-width,var(--_utrecht-button-border-width,0)\n );--utrecht-icon-size:var(--utrecht-button-icon-size,1em);align-items:center;background-color:var(--_utrecht-button-background-color);border-color:var(--_utrecht-button-border-color);border-bottom-color:var(--_utrecht-button-border-bottom-color);border-radius:var(--utrecht-button-border-radius);border-style:solid;border-width:var(--_utrecht-button-border-width);border-bottom-width:var(--_utrecht-button-border-bottom-width);box-sizing:border-box;color:var(--_utrecht-button-color);cursor:var(--utrecht-action-activate-cursor);display:inline-flex;font-family:var(--utrecht-button-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-button-font-size,var(--utrecht-document-font-family));font-weight:var(--_utrecht-button-appearance-font-weight,var(--utrecht-button-font-weight));gap:var(--utrecht-button-icon-gap);inline-size:var(--utrecht-button-inline-size,auto);justify-content:center;letter-spacing:var(--utrecht-button-letter-spacing);line-height:var(--utrecht-button-line-height);min-block-size:var(--utrecht-button-min-block-size,44px);min-inline-size:var(--utrecht-button-min-inline-size,44px);padding-block-end:var(--utrecht-button-padding-block-end);padding-block-start:var(--utrecht-button-padding-block-start);padding-inline-end:var(--utrecht-button-padding-inline-end);padding-inline-start:var(--utrecht-button-padding-inline-start);text-transform:var(--utrecht-button-text-transform);user-select:none}.utrecht-button--distanced{margin-block-end:var(--utrecht-button-margin-block-end);margin-block-start:var(--utrecht-button-margin-block-start);margin-inline-end:var(--utrecht-button-margin-inline-end);margin-inline-start:var(--utrecht-button-margin-inline-start)}.utrecht-button--submit{cursor:var(--utrecht-action-submit-cursor)}.utrecht-button--busy{cursor:var(--utrecht-action-busy-cursor)}.utrecht-button--pressed{background-color:var(--_utrecht-button-active-background-color);border-color:var(--_utrecht-button-active-border-color);color:var(--_utrecht-button-active-color)}.utrecht-button--disabled,.utrecht-button:disabled{background-color:var(--_utrecht-button-disabled-background-color);border-color:var(--_utrecht-button-disabled-border-color);color:var(--_utrecht-button-disabled-color);cursor:var(--utrecht-action-disabled-cursor)}.utrecht-button--active,.utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled){background-color:var(--_utrecht-button-active-background-color);border-color:var(--_utrecht-button-active-border-color);color:var(--_utrecht-button-active-color)}.utrecht-button--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert)}.utrecht-button--focus:not(.utrecht-button--disabled){background-color:var(--_utrecht-button-focus-background-color);border-color:var(--_utrecht-button-focus-border-color);color:var(--_utrecht-button-focus-color)}.utrecht-button:focus,.utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled){--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert)}.utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled){background-color:var(--_utrecht-button-focus-background-color);border-color:var(--_utrecht-button-focus-border-color);color:var(--_utrecht-button-focus-color)}.utrecht-button:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-button--hover:not(:disabled):not(.utrecht-button--disabled),.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled){background-color:var(--_utrecht-button-hover-background-color);border-color:var(--_utrecht-button-hover-border-color);color:var(--_utrecht-button-hover-color);transform:scale(var(--utrecht-button-focus-transform-scale,1))}.utrecht-button--primary-action{--_utrecht-button-appearance-active-background-color:var(--utrecht-button-primary-action-active-background-color);--_utrecht-button-appearance-active-border-color:var(--utrecht-button-primary-action-active-border-color);--_utrecht-button-appearance-active-color:var(--utrecht-button-primary-action-active-color);--_utrecht-button-appearance-background-color:var(--utrecht-button-primary-action-background-color);--_utrecht-button-appearance-border-color:var(--utrecht-button-primary-action-border-color);--_utrecht-button-appearance-border-width:var(--utrecht-button-primary-action-border-width);--_utrecht-button-appearance-color:var(--utrecht-button-primary-action-color);--_utrecht-button-appearance-font-weight:var(--utrecht-button-primary-action-font-weight);--_utrecht-button-appearance-disabled-background-color:var(\n --utrecht-button-primary-action-disabled-background-color\n );--_utrecht-button-appearance-disabled-border-color:var(--utrecht-button-primary-action-disabled-border-color);--_utrecht-button-appearance-disabled-color:var(--utrecht-button-primary-action-disabled-color);--_utrecht-button-appearance-focus-background-color:var(--utrecht-button-primary-action-focus-background-color);--_utrecht-button-appearance-focus-border-color:var(--utrecht-button-primary-action-focus-border-color);--_utrecht-button-appearance-focus-color:var(--utrecht-button-primary-action-focus-color);--_utrecht-button-appearance-hover-background-color:var(--utrecht-button-primary-action-hover-background-color);--_utrecht-button-appearance-hover-border-color:var(--utrecht-button-primary-action-hover-border-color);--_utrecht-button-appearance-hover-color:var(--utrecht-button-primary-action-hover-color)}.utrecht-button--secondary-action{--_utrecht-button-appearance-active-background-color:var(--utrecht-button-secondary-action-active-background-color);--_utrecht-button-appearance-active-border-color:var(--utrecht-button-secondary-action-active-border-color);--_utrecht-button-appearance-active-color:var(--utrecht-button-secondary-action-active-color);--_utrecht-button-appearance-background-color:var(--utrecht-button-secondary-action-background-color);--_utrecht-button-appearance-border-color:var(--utrecht-button-secondary-action-border-color);--_utrecht-button-appearance-border-width:var(--utrecht-button-secondary-action-border-width);--_utrecht-button-appearance-color:var(--utrecht-button-secondary-action-color);--_utrecht-button-appearance-font-weight:var(--utrecht-button-secondary-action-font-weight);--_utrecht-button-appearance-disabled-background-color:var(\n --utrecht-button-secondary-action-disabled-background-color\n );--_utrecht-button-appearance-disabled-border-color:var(--utrecht-button-secondary-action-disabled-border-color);--_utrecht-button-appearance-disabled-color:var(--utrecht-button-secondary-action-disabled-color);--_utrecht-button-appearance-focus-background-color:var(--utrecht-button-secondary-action-focus-background-color);--_utrecht-button-appearance-focus-border-color:var(--utrecht-button-secondary-action-focus-border-color);--_utrecht-button-appearance-focus-color:var(--utrecht-button-secondary-action-focus-color);--_utrecht-button-appearance-hover-background-color:var(--utrecht-button-secondary-action-hover-background-color);--_utrecht-button-appearance-hover-border-color:var(--utrecht-button-secondary-action-hover-border-color);--_utrecht-button-appearance-hover-color:var(--utrecht-button-secondary-action-hover-color)}.utrecht-button--subtle{--_utrecht-button-appearance-active-background-color:var(--utrecht-button-subtle-active-background-color);--_utrecht-button-appearance-active-border-color:var(--utrecht-button-subtle-active-border-color);--_utrecht-button-appearance-active-color:var(--utrecht-button-subtle-active-color);--_utrecht-button-appearance-background-color:var(--utrecht-button-subtle-background-color);--_utrecht-button-appearance-border-color:var(--utrecht-button-subtle-border-color);--_utrecht-button-appearance-border-width:var(--utrecht-button-subtle-border-width);--_utrecht-button-appearance-color:var(--utrecht-button-subtle-color);--_utrecht-button-appearance-font-weight:var(--utrecht-button-subtle-font-weight);--_utrecht-button-appearance-disabled-background-color:var(\n --utrecht-button-subtle-disabled-background-color\n );--_utrecht-button-appearance-disabled-border-color:var(--utrecht-button-subtle-disabled-border-color);--_utrecht-button-appearance-disabled-color:var(--utrecht-button-subtle-disabled-color);--_utrecht-button-appearance-focus-background-color:var(--utrecht-button-subtle-focus-background-color);--_utrecht-button-appearance-focus-border-color:var(--utrecht-button-subtle-focus-border-color);--_utrecht-button-appearance-focus-color:var(--utrecht-button-subtle-focus-color);--_utrecht-button-appearance-hover-background-color:var(--utrecht-button-subtle-hover-background-color);--_utrecht-button-appearance-hover-border-color:var(--utrecht-button-subtle-hover-border-color);--_utrecht-button-appearance-hover-color:var(--utrecht-button-subtle-hover-color)}.utrecht-button--primary-action.utrecht-button--danger{--_utrecht-button-hint-active-background-color:var(--utrecht-button-primary-action-danger-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-primary-action-danger-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-primary-action-danger-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-primary-action-danger-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-primary-action-danger-border-color);--_utrecht-button-hint-color:var(--utrecht-button-primary-action-danger-color);--_utrecht-button-hint-disabled-background-color:var(\n --utrecht-button-primary-action-danger-disabled-background-color\n );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-primary-action-danger-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-primary-action-danger-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-primary-action-danger-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-primary-action-danger-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-primary-action-danger-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-primary-action-danger-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-primary-action-danger-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-primary-action-danger-hover-color)}.utrecht-button--primary-action.utrecht-button--ready{--_utrecht-button-hint-active-background-color:var(--utrecht-button-primary-action-ready-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-primary-action-ready-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-primary-action-ready-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-primary-action-ready-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-primary-action-ready-border-color);--_utrecht-button-hint-color:var(--utrecht-button-primary-action-ready-color);--_utrecht-button-hint-disabled-background-color:var(\n --utrecht-button-primary-action-ready-disabled-background-color\n );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-primary-action-ready-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-primary-action-ready-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-primary-action-ready-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-primary-action-ready-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-primary-action-ready-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-primary-action-ready-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-primary-action-ready-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-primary-action-ready-hover-color)}.utrecht-button--primary-action.utrecht-button--warning{--_utrecht-button-hint-active-background-color:var(--utrecht-button-primary-action-warning-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-primary-action-warning-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-primary-action-warning-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-primary-action-warning-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-primary-action-warning-border-color);--_utrecht-button-hint-color:var(--utrecht-button-primary-action-warning-color);--_utrecht-button-hint-disabled-background-color:var(\n --utrecht-button-primary-action-warning-disabled-background-color\n );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-primary-action-warning-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-primary-action-warning-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-primary-action-warning-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-primary-action-warning-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-primary-action-warning-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-primary-action-warning-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-primary-action-warning-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-primary-action-warning-hover-color)}.utrecht-button--secondary-action.utrecht-button--danger{--_utrecht-button-hint-active-background-color:var(--utrecht-button-secondary-action-danger-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-secondary-action-danger-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-secondary-action-danger-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-secondary-action-danger-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-secondary-action-danger-border-color);--_utrecht-button-hint-color:var(--utrecht-button-secondary-action-danger-color);--_utrecht-button-hint-disabled-background-color:var(\n --utrecht-button-secondary-action-danger-disabled-background-color\n );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-secondary-action-danger-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-secondary-action-danger-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-secondary-action-danger-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-secondary-action-danger-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-secondary-action-danger-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-secondary-action-danger-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-secondary-action-danger-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-secondary-action-danger-hover-color)}.utrecht-button--secondary-action.utrecht-button--ready{--_utrecht-button-hint-active-background-color:var(--utrecht-button-secondary-action-ready-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-secondary-action-ready-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-secondary-action-ready-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-secondary-action-ready-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-secondary-action-ready-border-color);--_utrecht-button-hint-color:var(--utrecht-button-secondary-action-ready-color);--_utrecht-button-hint-disabled-background-color:var(\n --utrecht-button-secondary-action-ready-disabled-background-color\n );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-secondary-action-ready-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-secondary-action-ready-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-secondary-action-ready-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-secondary-action-ready-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-secondary-action-ready-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-secondary-action-ready-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-secondary-action-ready-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-secondary-action-ready-hover-color)}.utrecht-button--secondary-action.utrecht-button--warning{--_utrecht-button-hint-active-background-color:var(--utrecht-button-secondary-action-warning-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-secondary-action-warning-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-secondary-action-warning-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-secondary-action-warning-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-secondary-action-warning-border-color);--_utrecht-button-hint-color:var(--utrecht-button-secondary-action-warning-color);--_utrecht-button-hint-disabled-background-color:var(\n --utrecht-button-secondary-action-warning-disabled-background-color\n );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-secondary-action-warning-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-secondary-action-warning-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-secondary-action-warning-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-secondary-action-warning-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-secondary-action-warning-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-secondary-action-warning-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-secondary-action-warning-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-secondary-action-warning-hover-color)}.utrecht-button--subtle.utrecht-button--danger{--_utrecht-button-hint-active-background-color:var(--utrecht-button-subtle-danger-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-subtle-danger-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-subtle-danger-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-subtle-danger-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-subtle-danger-border-color);--_utrecht-button-hint-color:var(--utrecht-button-subtle-danger-color);--_utrecht-button-hint-disabled-background-color:var(\n --utrecht-button-subtle-danger-disabled-background-color\n );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-subtle-danger-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-subtle-danger-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-subtle-danger-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-subtle-danger-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-subtle-danger-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-subtle-danger-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-subtle-danger-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-subtle-danger-hover-color)}.utrecht-button--subtle.utrecht-button--ready{--_utrecht-button-hint-active-background-color:var(--utrecht-button-subtle-ready-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-subtle-ready-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-subtle-ready-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-subtle-ready-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-subtle-ready-border-color);--_utrecht-button-hint-color:var(--utrecht-button-subtle-ready-color);--_utrecht-button-hint-disabled-background-color:var(\n --utrecht-button-subtle-ready-disabled-background-color\n );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-subtle-ready-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-subtle-ready-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-subtle-ready-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-subtle-ready-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-subtle-ready-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-subtle-ready-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-subtle-ready-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-subtle-ready-hover-color)}.utrecht-button--subtle.utrecht-button--warning{--_utrecht-button-hint-active-background-color:var(--utrecht-button-subtle-warning-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-subtle-warning-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-subtle-warning-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-subtle-warning-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-subtle-warning-border-color);--_utrecht-button-hint-color:var(--utrecht-button-subtle-warning-color);--_utrecht-button-hint-disabled-background-color:var(\n --utrecht-button-subtle-warning-disabled-background-color\n );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-subtle-warning-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-subtle-warning-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-subtle-warning-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-subtle-warning-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-subtle-warning-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-subtle-warning-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-subtle-warning-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-subtle-warning-hover-color)}";
|
|
132
264
|
styleInject(css_248z$N);
|
|
133
265
|
|
|
@@ -651,23 +783,6 @@ styleInject(css_248z$s);
|
|
|
651
783
|
var css_248z$r = ".utrecht-heading-6{color:var(--utrecht-heading-6-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-6-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-6-font-size,revert);font-weight:var(--utrecht-heading-6-font-weight,var(--utrecht-heading-font-weight,bold));letter-spacing:var(--utrecht-heading-6-letter-spacing);line-height:var(--utrecht-heading-6-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-6-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-6-margin-block-start, 0));page-break-after:avoid;page-break-inside:avoid;text-transform:var(--utrecht-heading-6-text-transform,inherit)}.utrecht-heading-6--distanced{--utrecht-space-around:1}";
|
|
652
784
|
styleInject(css_248z$r);
|
|
653
785
|
|
|
654
|
-
var Heading = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
655
|
-
var appearance = _a.appearance,
|
|
656
|
-
className = _a.className,
|
|
657
|
-
level = _a.level,
|
|
658
|
-
restProps = __rest(_a, ["appearance", "className", "level"]);
|
|
659
|
-
|
|
660
|
-
var appearances = ['utrecht-heading-1', 'utrecht-heading-2', 'utrecht-heading-3', 'utrecht-heading-4', 'utrecht-heading-5', 'utrecht-heading-6'];
|
|
661
|
-
var HeadingX = level === 2 ? 'h2' : level === 3 ? 'h3' : level === 4 ? 'h4' : level === 5 ? 'h5' : level === 6 ? 'h6' : 'h1';
|
|
662
|
-
var headingClassName = appearance && appearances.indexOf(appearance) !== -1 ? appearance : appearances[level - 1] || 'utrecht-heading-1';
|
|
663
|
-
return jsx(HeadingX, Object.assign({
|
|
664
|
-
className: clsx(headingClassName, className)
|
|
665
|
-
}, restProps, {
|
|
666
|
-
ref: ref
|
|
667
|
-
}));
|
|
668
|
-
});
|
|
669
|
-
Heading.displayName = 'Heading';
|
|
670
|
-
|
|
671
786
|
var Heading1 = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
672
787
|
var children = _a.children,
|
|
673
788
|
className = _a.className,
|
|
@@ -806,38 +921,6 @@ Image.displayName = 'Image';
|
|
|
806
921
|
var css_248z$n = ".utrecht-link{--utrecht-icon-size:var(--utrecht-link-icon-size,1em);color:var(--utrecht-link-color,blue);text-decoration:var(--utrecht-link-text-decoration,underline);text-decoration-skip-ink:all;text-decoration-thickness:max(var(--utrecht-link-text-decoration-thickness),1px);text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link--icon-left{background-image:var(--utrecht-link-icon-left-background-image,none);background-position:0 .25em;background-repeat:no-repeat;color:var(--utrecht-link-color,blue);font-weight:var(--utrecht-typography-weight-scale-bold-font-weight);padding-inline-start:var(--utrecht-space-block-md);text-decoration:none}.utrecht-link--visited,.utrecht-link:visited{color:var(--utrecht-link-visited-color,var(--utrecht-link-color))}.utrecht-link--hover,.utrecht-link:link:hover{text-decoration-skip:none;color:var(--utrecht-link-hover-color,var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration,var(--utrecht-link-text-decoration,underline));text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-hover-text-decoration-thickness,var(--utrecht-link-text-decoration-thickness)),1px)}.utrecht-link--active,.utrecht-link:link:active{color:var(--utrecht-link-active-color,var(--utrecht-link-color))}.utrecht-link--focus{text-decoration-skip:none;background-color:var(--utrecht-link-focus-background-color,transparent);color:var(--utrecht-link-focus-color,var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration,var(--utrecht-link-text-decoration,underline));text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness,var(--utrecht-link-text-decoration-thickness)),1px)}.utrecht-link--focus-visible,.utrecht-link:focus{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert)}.utrecht-link:focus{text-decoration-skip:none;background-color:var(--utrecht-link-focus-background-color,transparent);color:var(--utrecht-link-focus-color,var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration,var(--utrecht-link-text-decoration,underline));text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness,var(--utrecht-link-text-decoration-thickness)),1px)}.utrecht-link:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-link--telephone{white-space:nowrap}.utrecht-link--box-content{color:unset;display:inline-block;text-decoration:unset;text-decoration-skip-ink:unset;text-decoration-thickness:unset;text-underline-offset:unset}.utrecht-link--placeholder{color:var(--utrecht-link-placeholder-color,var(--utrecht-link-color));cursor:var(--utrecht-action-disabled-cursor);text-decoration:none}";
|
|
807
922
|
styleInject(css_248z$n);
|
|
808
923
|
|
|
809
|
-
var Link = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
810
|
-
var boxContent = _a.boxContent,
|
|
811
|
-
children = _a.children,
|
|
812
|
-
className = _a.className,
|
|
813
|
-
external = _a.external,
|
|
814
|
-
href = _a.href,
|
|
815
|
-
placeholder = _a.placeholder,
|
|
816
|
-
role = _a.role,
|
|
817
|
-
restProps = __rest(_a, ["boxContent", "children", "className", "external", "href", "placeholder", "role"]);
|
|
818
|
-
|
|
819
|
-
return (// "utrecht-link--telephone" does not have a corresponding API,
|
|
820
|
-
// since it is primarily a basis for implementing input[href^="tel"].
|
|
821
|
-
// Telephone number rendering in React is best achieved using composition
|
|
822
|
-
// of the TelephoneValue component.
|
|
823
|
-
jsx("a", Object.assign({
|
|
824
|
-
href: placeholder ? undefined : href,
|
|
825
|
-
ref: ref,
|
|
826
|
-
role: role || (placeholder ? 'link' : undefined),
|
|
827
|
-
className: clsx('utrecht-link', {
|
|
828
|
-
'utrecht-link--box-content': boxContent,
|
|
829
|
-
'utrecht-link--external': external,
|
|
830
|
-
'utrecht-link--placeholder': placeholder
|
|
831
|
-
}, className),
|
|
832
|
-
"aria-disabled": placeholder ? 'true' : undefined,
|
|
833
|
-
rel: external ? 'external noopener noreferrer' : undefined
|
|
834
|
-
}, restProps, {
|
|
835
|
-
children: children
|
|
836
|
-
}))
|
|
837
|
-
);
|
|
838
|
-
});
|
|
839
|
-
Link.displayName = 'Link';
|
|
840
|
-
|
|
841
924
|
var css_248z$m = ".utrecht-link-button{--utrecht-icon-size:var(--utrecht-link-icon-size,1em);--utrecht-icon-size:var(--utrecht-button-icon-size,1em);align-items:center;color:var(--utrecht-link-color,blue);cursor:pointer;display:inline-flex;font-family:var(--utrecht-button-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-button-font-size,var(--utrecht-document-font-family));font-weight:var(--utrecht-button-font-weight);gap:var(--utrecht-button-icon-gap);inline-size:var(--utrecht-button-inline-size,auto);justify-content:center;letter-spacing:var(--utrecht-button-letter-spacing);line-height:inherit;min-block-size:var(--utrecht-button-min-block-size,44px);min-inline-size:var(--utrecht-button-min-inline-size,44px);padding-block-end:var(--utrecht-button-padding-block-end);padding-block-start:var(--utrecht-button-padding-block-start);padding-inline-end:var(--utrecht-button-padding-inline-end);padding-inline-start:var(--utrecht-button-padding-inline-start);text-decoration:var(--utrecht-link-text-decoration,underline);text-decoration-skip-ink:all;text-decoration-thickness:max(var(--utrecht-link-text-decoration-thickness),1px);text-transform:var(--utrecht-button-text-transform);text-underline-offset:var(--utrecht-link-text-underline-offset);user-select:none}.utrecht-link-button--hover,.utrecht-link-button--html-button:hover{text-decoration-skip:none;color:var(--utrecht-link-hover-color,var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration,var(--utrecht-link-text-decoration,underline));text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-hover-text-decoration-thickness,var(--utrecht-link-text-decoration-thickness)),1px)}.utrecht-link-button--active,.utrecht-link-button--html-button:active{color:var(--utrecht-link-active-color,var(--utrecht-link-color))}.utrecht-link-button--disabled{color:var(--utrecht-link-placeholder-color,var(--utrecht-link-color));cursor:var(--utrecht-action-disabled-cursor);text-decoration:none}.utrecht-link-button--focus,.utrecht-link-button--html-button:focus{text-decoration-skip:none;background-color:var(--utrecht-link-focus-background-color,transparent);color:var(--utrecht-link-focus-color,var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration,var(--utrecht-link-text-decoration,underline));text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness,var(--utrecht-link-text-decoration-thickness)),1px)}.utrecht-link-button--focus-visible,.utrecht-link-button--html-button:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert)}.utrecht-link-button--inline{--utrecht-icon-inset-block-start:var(--utrecht-icon-baseline-inset-block-start);min-block-size:auto;min-inline-size:auto;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.utrecht-link-button--pressed{color:var(--utrecht-link-active-color,var(--utrecht-link-color))}.utrecht-link-button--html-button{background-color:transparent;border-width:0}";
|
|
842
925
|
styleInject(css_248z$m);
|
|
843
926
|
|
|
@@ -1465,5 +1548,5 @@ var UnorderedListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
1465
1548
|
});
|
|
1466
1549
|
UnorderedListItem.displayName = 'UnorderedListItem';
|
|
1467
1550
|
|
|
1468
|
-
export { Alert, AlertDialog, Article, Backdrop, Button, ButtonGroup, ButtonLink, Checkbox, Code, CodeBlock, CustomRadioButton, DataList, DataListActions, DataListItem, DataListKey, DataListValue, Document, Emphasis, Fieldset, FieldsetLegend, Figure, FigureCaption, FormField, FormFieldDescription, FormLabel, HTMLContent, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, HeadingGroup, Icon, Image, Link, LinkButton, LinkSocial, ListSocial, ListSocialItem, Mark, NumberValue, OrderedList, OrderedListItem, Page, PageContent, PageFooter, PageHeader, Paragraph, PreHeading, PrimaryActionButton, RadioButton, SecondaryActionButton, Select, SelectOption, Separator, SkipLink, SpotlightSection, Strong, SubtleButton, Surface, Table, TableBody, TableCaption, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Textarea, Textbox, URLValue, UnorderedList, UnorderedListItem };
|
|
1551
|
+
export { Alert, AlertDialog, Article, Backdrop, BreadcrumbLink, BreadcrumbNav, Button, ButtonGroup, ButtonLink, Checkbox, Code, CodeBlock, CustomRadioButton, DataList, DataListActions, DataListItem, DataListKey, DataListValue, Document, Emphasis, Fieldset, FieldsetLegend, Figure, FigureCaption, FormField, FormFieldDescription, FormLabel, HTMLContent, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, HeadingGroup, Icon, Image, Link, LinkButton, LinkSocial, ListSocial, ListSocialItem, Mark, NumberValue, OrderedList, OrderedListItem, Page, PageContent, PageFooter, PageHeader, Paragraph, PreHeading, PrimaryActionButton, RadioButton, SecondaryActionButton, Select, SelectOption, Separator, SkipLink, SpotlightSection, Strong, SubtleButton, Surface, Table, TableBody, TableCaption, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Textarea, Textbox, URLValue, UnorderedList, UnorderedListItem };
|
|
1469
1552
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -103,6 +103,135 @@ var Backdrop = /*#__PURE__*/react.forwardRef(function (_a, ref) {
|
|
|
103
103
|
});
|
|
104
104
|
Backdrop.displayName = 'Backdrop';
|
|
105
105
|
|
|
106
|
+
var Heading = /*#__PURE__*/react.forwardRef(function (_a, ref) {
|
|
107
|
+
var appearance = _a.appearance,
|
|
108
|
+
className = _a.className,
|
|
109
|
+
level = _a.level,
|
|
110
|
+
restProps = tslib.__rest(_a, ["appearance", "className", "level"]);
|
|
111
|
+
|
|
112
|
+
var appearances = ['utrecht-heading-1', 'utrecht-heading-2', 'utrecht-heading-3', 'utrecht-heading-4', 'utrecht-heading-5', 'utrecht-heading-6'];
|
|
113
|
+
var HeadingX = level === 2 ? 'h2' : level === 3 ? 'h3' : level === 4 ? 'h4' : level === 5 ? 'h5' : level === 6 ? 'h6' : 'h1';
|
|
114
|
+
var headingClassName = appearance && appearances.indexOf(appearance) !== -1 ? appearance : appearances[level - 1] || 'utrecht-heading-1';
|
|
115
|
+
return jsxRuntime.jsx(HeadingX, Object.assign({
|
|
116
|
+
className: clsx__default["default"](headingClassName, className)
|
|
117
|
+
}, restProps, {
|
|
118
|
+
ref: ref
|
|
119
|
+
}));
|
|
120
|
+
});
|
|
121
|
+
Heading.displayName = 'Heading';
|
|
122
|
+
|
|
123
|
+
var Link = /*#__PURE__*/react.forwardRef(function (_a, ref) {
|
|
124
|
+
var boxContent = _a.boxContent,
|
|
125
|
+
children = _a.children,
|
|
126
|
+
className = _a.className,
|
|
127
|
+
external = _a.external,
|
|
128
|
+
href = _a.href,
|
|
129
|
+
placeholder = _a.placeholder,
|
|
130
|
+
role = _a.role,
|
|
131
|
+
restProps = tslib.__rest(_a, ["boxContent", "children", "className", "external", "href", "placeholder", "role"]);
|
|
132
|
+
|
|
133
|
+
return (// "utrecht-link--telephone" does not have a corresponding API,
|
|
134
|
+
// since it is primarily a basis for implementing input[href^="tel"].
|
|
135
|
+
// Telephone number rendering in React is best achieved using composition
|
|
136
|
+
// of the TelephoneValue component.
|
|
137
|
+
jsxRuntime.jsx("a", Object.assign({
|
|
138
|
+
href: placeholder ? undefined : href,
|
|
139
|
+
ref: ref,
|
|
140
|
+
role: role || (placeholder ? 'link' : undefined),
|
|
141
|
+
className: clsx__default["default"]('utrecht-link', {
|
|
142
|
+
'utrecht-link--box-content': boxContent,
|
|
143
|
+
'utrecht-link--external': external,
|
|
144
|
+
'utrecht-link--placeholder': placeholder
|
|
145
|
+
}, className),
|
|
146
|
+
"aria-disabled": placeholder ? 'true' : undefined,
|
|
147
|
+
rel: external ? 'external noopener noreferrer' : undefined
|
|
148
|
+
}, restProps, {
|
|
149
|
+
children: children
|
|
150
|
+
}))
|
|
151
|
+
);
|
|
152
|
+
});
|
|
153
|
+
Link.displayName = 'Link';
|
|
154
|
+
|
|
155
|
+
var useMicrodataItem = function useMicrodataItem(_ref) {
|
|
156
|
+
var prop = _ref.prop,
|
|
157
|
+
type = _ref.type;
|
|
158
|
+
return {
|
|
159
|
+
itemScope: true,
|
|
160
|
+
itemType: type,
|
|
161
|
+
itemProp: prop
|
|
162
|
+
};
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
var useMicrodataProp = function useMicrodataProp(prop) {
|
|
166
|
+
return {
|
|
167
|
+
itemProp: prop
|
|
168
|
+
};
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
var BreadcrumbNav = /*#__PURE__*/react.forwardRef(function (_a, ref) {
|
|
172
|
+
var appearance = _a.appearance,
|
|
173
|
+
children = _a.children,
|
|
174
|
+
className = _a.className,
|
|
175
|
+
_a$headingLevel = _a.headingLevel,
|
|
176
|
+
headingLevel = _a$headingLevel === void 0 ? 2 : _a$headingLevel,
|
|
177
|
+
label = _a.label,
|
|
178
|
+
restProps = tslib.__rest(_a, ["appearance", "children", "className", "headingLevel", "label"]);
|
|
179
|
+
|
|
180
|
+
var headingId = label ? react.useId() : undefined;
|
|
181
|
+
return jsxRuntime.jsxs("nav", Object.assign({}, restProps, {
|
|
182
|
+
ref: ref,
|
|
183
|
+
className: clsx__default["default"]('utrecht-breadcrumb', {
|
|
184
|
+
'utrecht-breadcrumb--arrows': appearance === 'arrows'
|
|
185
|
+
}, className),
|
|
186
|
+
"aria-labelledby": headingId
|
|
187
|
+
}, {
|
|
188
|
+
children: [label && jsxRuntime.jsx(Heading, Object.assign({
|
|
189
|
+
id: headingId,
|
|
190
|
+
className: "utrecht-breadcrumb__heading",
|
|
191
|
+
level: headingLevel,
|
|
192
|
+
"aria-hidden": "true"
|
|
193
|
+
}, {
|
|
194
|
+
children: label
|
|
195
|
+
})), jsxRuntime.jsx("ol", Object.assign({
|
|
196
|
+
className: "utrecht-breadcrumb__list"
|
|
197
|
+
}, useMicrodataItem({
|
|
198
|
+
type: 'https://schema.org/BreadcrumbList'
|
|
199
|
+
}), {
|
|
200
|
+
children: children
|
|
201
|
+
}))]
|
|
202
|
+
}));
|
|
203
|
+
});
|
|
204
|
+
BreadcrumbNav.displayName = 'BreadcrumbNav';
|
|
205
|
+
var BreadcrumbLink = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
|
|
206
|
+
var children = _ref2.children,
|
|
207
|
+
current = _ref2.current,
|
|
208
|
+
href = _ref2.href,
|
|
209
|
+
index = _ref2.index;
|
|
210
|
+
return jsxRuntime.jsx("li", Object.assign({
|
|
211
|
+
className: "utrecht-breadcrumb__item"
|
|
212
|
+
}, useMicrodataItem({
|
|
213
|
+
type: 'https://schema.org/ListItem',
|
|
214
|
+
prop: 'itemListElement'
|
|
215
|
+
}), {
|
|
216
|
+
children: jsxRuntime.jsxs(Link, Object.assign({
|
|
217
|
+
className: "utrecht-breadcrumb__link",
|
|
218
|
+
href: href,
|
|
219
|
+
"aria-current": current && 'location'
|
|
220
|
+
}, useMicrodataProp('item'), {
|
|
221
|
+
ref: ref
|
|
222
|
+
}, {
|
|
223
|
+
children: [jsxRuntime.jsx("span", Object.assign({
|
|
224
|
+
className: "utrecht-breadcrumb__text"
|
|
225
|
+
}, useMicrodataProp('name'), {
|
|
226
|
+
children: children
|
|
227
|
+
})), typeof index === 'number' ? jsxRuntime.jsx("meta", Object.assign({}, useMicrodataProp('position'), {
|
|
228
|
+
content: String(index + 1)
|
|
229
|
+
})) : null]
|
|
230
|
+
}))
|
|
231
|
+
}));
|
|
232
|
+
});
|
|
233
|
+
BreadcrumbLink.displayName = 'BreadcrumbLink';
|
|
234
|
+
|
|
106
235
|
var Button = /*#__PURE__*/react.forwardRef(function (_a, ref) {
|
|
107
236
|
var appearance = _a.appearance,
|
|
108
237
|
busy = _a.busy,
|
|
@@ -975,23 +1104,6 @@ var HTMLContent = /*#__PURE__*/react.forwardRef(function (_a, ref) {
|
|
|
975
1104
|
});
|
|
976
1105
|
HTMLContent.displayName = 'HTMLContent';
|
|
977
1106
|
|
|
978
|
-
var Heading = /*#__PURE__*/react.forwardRef(function (_a, ref) {
|
|
979
|
-
var appearance = _a.appearance,
|
|
980
|
-
className = _a.className,
|
|
981
|
-
level = _a.level,
|
|
982
|
-
restProps = tslib.__rest(_a, ["appearance", "className", "level"]);
|
|
983
|
-
|
|
984
|
-
var appearances = ['utrecht-heading-1', 'utrecht-heading-2', 'utrecht-heading-3', 'utrecht-heading-4', 'utrecht-heading-5', 'utrecht-heading-6'];
|
|
985
|
-
var HeadingX = level === 2 ? 'h2' : level === 3 ? 'h3' : level === 4 ? 'h4' : level === 5 ? 'h5' : level === 6 ? 'h6' : 'h1';
|
|
986
|
-
var headingClassName = appearance && appearances.indexOf(appearance) !== -1 ? appearance : appearances[level - 1] || 'utrecht-heading-1';
|
|
987
|
-
return jsxRuntime.jsx(HeadingX, Object.assign({
|
|
988
|
-
className: clsx__default["default"](headingClassName, className)
|
|
989
|
-
}, restProps, {
|
|
990
|
-
ref: ref
|
|
991
|
-
}));
|
|
992
|
-
});
|
|
993
|
-
Heading.displayName = 'Heading';
|
|
994
|
-
|
|
995
1107
|
var Heading1 = /*#__PURE__*/react.forwardRef(function (_a, ref) {
|
|
996
1108
|
var children = _a.children,
|
|
997
1109
|
className = _a.className,
|
|
@@ -1104,38 +1216,6 @@ var Image = /*#__PURE__*/react.forwardRef(function (_a, ref) {
|
|
|
1104
1216
|
});
|
|
1105
1217
|
Image.displayName = 'Image';
|
|
1106
1218
|
|
|
1107
|
-
var Link = /*#__PURE__*/react.forwardRef(function (_a, ref) {
|
|
1108
|
-
var boxContent = _a.boxContent,
|
|
1109
|
-
children = _a.children,
|
|
1110
|
-
className = _a.className,
|
|
1111
|
-
external = _a.external,
|
|
1112
|
-
href = _a.href,
|
|
1113
|
-
placeholder = _a.placeholder,
|
|
1114
|
-
role = _a.role,
|
|
1115
|
-
restProps = tslib.__rest(_a, ["boxContent", "children", "className", "external", "href", "placeholder", "role"]);
|
|
1116
|
-
|
|
1117
|
-
return (// "utrecht-link--telephone" does not have a corresponding API,
|
|
1118
|
-
// since it is primarily a basis for implementing input[href^="tel"].
|
|
1119
|
-
// Telephone number rendering in React is best achieved using composition
|
|
1120
|
-
// of the TelephoneValue component.
|
|
1121
|
-
jsxRuntime.jsx("a", Object.assign({
|
|
1122
|
-
href: placeholder ? undefined : href,
|
|
1123
|
-
ref: ref,
|
|
1124
|
-
role: role || (placeholder ? 'link' : undefined),
|
|
1125
|
-
className: clsx__default["default"]('utrecht-link', {
|
|
1126
|
-
'utrecht-link--box-content': boxContent,
|
|
1127
|
-
'utrecht-link--external': external,
|
|
1128
|
-
'utrecht-link--placeholder': placeholder
|
|
1129
|
-
}, className),
|
|
1130
|
-
"aria-disabled": placeholder ? 'true' : undefined,
|
|
1131
|
-
rel: external ? 'external noopener noreferrer' : undefined
|
|
1132
|
-
}, restProps, {
|
|
1133
|
-
children: children
|
|
1134
|
-
}))
|
|
1135
|
-
);
|
|
1136
|
-
});
|
|
1137
|
-
Link.displayName = 'Link';
|
|
1138
|
-
|
|
1139
1219
|
var LinkButton = /*#__PURE__*/react.forwardRef(function (_a, ref) {
|
|
1140
1220
|
var children = _a.children,
|
|
1141
1221
|
disabled = _a.disabled,
|
|
@@ -1698,6 +1778,8 @@ exports.Alert = Alert;
|
|
|
1698
1778
|
exports.AlertDialog = AlertDialog;
|
|
1699
1779
|
exports.Article = Article;
|
|
1700
1780
|
exports.Backdrop = Backdrop;
|
|
1781
|
+
exports.BreadcrumbLink = BreadcrumbLink;
|
|
1782
|
+
exports.BreadcrumbNav = BreadcrumbNav;
|
|
1701
1783
|
exports.Button = Button;
|
|
1702
1784
|
exports.ButtonGroup = ButtonGroup;
|
|
1703
1785
|
exports.ButtonLink = ButtonLink;
|
package/dist/index.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ export { Alert } from './Alert';
|
|
|
6
6
|
export { AlertDialog } from './AlertDialog';
|
|
7
7
|
export { Article } from './Article';
|
|
8
8
|
export { Backdrop } from './Backdrop';
|
|
9
|
+
export { BreadcrumbNav, BreadcrumbLink } from './BreadcrumbNav';
|
|
9
10
|
export { Button, PrimaryActionButton, SecondaryActionButton, SubtleButton } from './Button';
|
|
10
11
|
export { ButtonGroup } from './ButtonGroup';
|
|
11
12
|
export { ButtonLink } from './ButtonLink';
|