@utrecht/component-library-react 1.0.0-alpha.1 → 1.0.0-alpha.101

package/README.md

@@ -27,8 +27,8 @@ npm install --save-dev --save-exact @utrecht/component-library-react
 With this package available, you can render any component from the library in your page. For example:
 
 ```jsx
-import { Document } from "@utrecht/component-library-react/dist/Document";
-import { Heading1 } from "@utrecht/component-library-react/dist/Heading1";
+import { Document } from "@utrecht/component-library-react/Document";
+import { Heading1 } from "@utrecht/component-library-react/Heading1";
 
 export const MyPage = () => (
   <Document>
@@ -41,15 +41,15 @@ Additionally you should also include the CSS for the components and the design t
 
 ```js
 // Package with the HTML rendering of components
-import { Document } from "@utrecht/component-library-react/dist/Document";
-import { Heading1 } from "@utrecht/component-library-react/dist/Heading1";
+import { Document } from "@utrecht/component-library-react/Document";
+import { Heading1 } from "@utrecht/component-library-react/Heading1";
 
 // Package with CSS for white-label components
-import "@utrecht/component-library-css/dist/bem.css";
+import "@utrecht/component-library-css";
 
 // Package with Utrecht design tokens for the white-label components
 // Substitute with your another theme for other organisations.
-import "@utrecht/design-tokens/dist/theme/index.css";
+import "@utrecht/design-tokens/dist/index.css";
 
 export const MyPage = () => (
   // Class name to apply the design tokens from the theme
@@ -66,48 +66,48 @@ We make components for React available when needed in a project. Not every compo
 Currently the following components are available:
 
 ```js
-import { Article } from "@utrecht/component-library-react/dist/Article";
-import { Backdrop } from "@utrecht/component-library-react/dist/Backdrop";
-import { Button } from "@utrecht/component-library-react/dist/Button";
-import { Checkbox } from "@utrecht/component-library-react/dist/Checkbox";
-import { Document } from "@utrecht/component-library-react/dist/Document";
-import { Fieldset } from "@utrecht/component-library-react/dist/Fieldset";
-import { FieldsetLegend } from "@utrecht/component-library-react/dist/FieldsetLegend";
-import { FormField } from "@utrecht/component-library-react/dist/FormField";
-import { FormFieldDescription } from "@utrecht/component-library-react/dist/FormFieldDescription";
-import { FormLabel } from "@utrecht/component-library-react/dist/FormLabel";
-import { HTMLContent } from "@utrecht/component-library-react/dist/HTMLContent";
-import { Heading1 } from "@utrecht/component-library-react/dist/Heading1";
-import { Heading2 } from "@utrecht/component-library-react/dist/Heading2";
-import { Heading3 } from "@utrecht/component-library-react/dist/Heading3";
-import { Heading4 } from "@utrecht/component-library-react/dist/Heading4";
-import { Heading5 } from "@utrecht/component-library-react/dist/Heading5";
-import { Heading6 } from "@utrecht/component-library-react/dist/Heading6";
-import { Link } from "@utrecht/component-library-react/dist/Link";
-import { OrderedList } from "@utrecht/component-library-react/dist/OrderedList";
-import { OrderedListItem } from "@utrecht/component-library-react/dist/OrderedListItem";
-import { Page } from "@utrecht/component-library-react/dist/Page";
-import { PageContent } from "@utrecht/component-library-react/dist/PageContent";
-import { PageFooter } from "@utrecht/component-library-react/dist/PageFooter";
-import { PageHeader } from "@utrecht/component-library-react/dist/PageHeader";
-import { Paragraph } from "@utrecht/component-library-react/dist/Paragraph";
-import { RadioButton } from "@utrecht/component-library-react/dist/RadioButton";
-import { Select, SelectOption } from "@utrecht/component-library-react/dist/Select";
-import { Separator } from "@utrecht/component-library-react/dist/Separator";
-import { Surface } from "@utrecht/component-library-react/dist/Surface";
-import { Table } from "@utrecht/component-library-react/dist/Table";
-import { TableBody } from "@utrecht/component-library-react/dist/TableBody";
-import { TableCaption } from "@utrecht/component-library-react/dist/TableCaption";
-import { TableCell } from "@utrecht/component-library-react/dist/TableCell";
-import { TableFooter } from "@utrecht/component-library-react/dist/TableFooter";
-import { TableHeader } from "@utrecht/component-library-react/dist/TableHeader";
-import { TableHeaderCell } from "@utrecht/component-library-react/dist/TableHeaderCell";
-import { TableRow } from "@utrecht/component-library-react/dist/TableRow";
-import { Textarea } from "@utrecht/component-library-react/dist/Textarea";
-import { Textbox } from "@utrecht/component-library-react/dist/Textbox";
-import { URLValue } from "@utrecht/component-library-react/dist/URLValue";
-import { UnorderedList } from "@utrecht/component-library-react/dist/UnorderedList";
-import { UnorderedListItem } from "@utrecht/component-library-react/dist/UnorderedListItem";
+import { Article } from "@utrecht/component-library-react/Article";
+import { Backdrop } from "@utrecht/component-library-react/Backdrop";
+import { Button } from "@utrecht/component-library-react/Button";
+import { Checkbox } from "@utrecht/component-library-react/Checkbox";
+import { Document } from "@utrecht/component-library-react/Document";
+import { Fieldset } from "@utrecht/component-library-react/Fieldset";
+import { FieldsetLegend } from "@utrecht/component-library-react/FieldsetLegend";
+import { FormField } from "@utrecht/component-library-react/FormField";
+import { FormFieldDescription } from "@utrecht/component-library-react/FormFieldDescription";
+import { FormLabel } from "@utrecht/component-library-react/FormLabel";
+import { HTMLContent } from "@utrecht/component-library-react/HTMLContent";
+import { Heading1 } from "@utrecht/component-library-react/Heading1";
+import { Heading2 } from "@utrecht/component-library-react/Heading2";
+import { Heading3 } from "@utrecht/component-library-react/Heading3";
+import { Heading4 } from "@utrecht/component-library-react/Heading4";
+import { Heading5 } from "@utrecht/component-library-react/Heading5";
+import { Heading6 } from "@utrecht/component-library-react/Heading6";
+import { Link } from "@utrecht/component-library-react/Link";
+import { OrderedList } from "@utrecht/component-library-react/OrderedList";
+import { OrderedListItem } from "@utrecht/component-library-react/OrderedListItem";
+import { Page } from "@utrecht/component-library-react/Page";
+import { PageContent } from "@utrecht/component-library-react/PageContent";
+import { PageFooter } from "@utrecht/component-library-react/PageFooter";
+import { PageHeader } from "@utrecht/component-library-react/PageHeader";
+import { Paragraph } from "@utrecht/component-library-react/Paragraph";
+import { RadioButton } from "@utrecht/component-library-react/RadioButton";
+import { Select, SelectOption } from "@utrecht/component-library-react/Select";
+import { Separator } from "@utrecht/component-library-react/Separator";
+import { Surface } from "@utrecht/component-library-react/Surface";
+import { Table } from "@utrecht/component-library-react/Table";
+import { TableBody } from "@utrecht/component-library-react/TableBody";
+import { TableCaption } from "@utrecht/component-library-react/TableCaption";
+import { TableCell } from "@utrecht/component-library-react/TableCell";
+import { TableFooter } from "@utrecht/component-library-react/TableFooter";
+import { TableHeader } from "@utrecht/component-library-react/TableHeader";
+import { TableHeaderCell } from "@utrecht/component-library-react/TableHeaderCell";
+import { TableRow } from "@utrecht/component-library-react/TableRow";
+import { Textarea } from "@utrecht/component-library-react/Textarea";
+import { Textbox } from "@utrecht/component-library-react/Textbox";
+import { URLValue } from "@utrecht/component-library-react/URLValue";
+import { UnorderedList } from "@utrecht/component-library-react/UnorderedList";
+import { UnorderedListItem } from "@utrecht/component-library-react/UnorderedListItem";
 ```
 
 Alternatively it is possible to include them via the collection of components too, but be careful: you will likely need to take additional steps prevent your site from also including the code for components you don't actually use. Including unused components would negatively impact the performance of your site.

package/dist/{Article.d.ts → cjs/Article.d.ts}

@@ -3,6 +3,5 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 import { HTMLAttributes } from 'react';
-declare type ArticleProps = HTMLAttributes<HTMLElement>;
+export declare type ArticleProps = HTMLAttributes<HTMLElement>;
 export declare const Article: import("react").ForwardRefExoticComponent<ArticleProps & import("react").RefAttributes<HTMLElement>>;
-export {};

package/dist/{Article.js → cjs/Article.js}

@@ -1,3 +1,4 @@
+"use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,15 +10,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Article = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-export const Article = forwardRef((_a, ref) => {
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+exports.Article = react_1.forwardRef((_a, ref) => {
     var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
-    return (_jsx("article", Object.assign({}, restProps, { ref: ref, className: clsx('utrecht-article', className) }, { children: children }), void 0));
+    return (jsx_runtime_1.jsx("article", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-article', className) }, { children: children }), void 0));
 });
-Article.displayName = 'utrecht-article';
+exports.Article.displayName = 'Article';

package/dist/{Backdrop.js → cjs/Backdrop.js}

@@ -1,3 +1,4 @@
+"use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,15 +10,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Backdrop = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-export const Backdrop = forwardRef((_a, ref) => {
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+exports.Backdrop = react_1.forwardRef((_a, ref) => {
     var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
-    return (_jsx("div", Object.assign({}, restProps, { ref: ref, className: clsx('utrecht-backdrop', className) }, { children: children }), void 0));
+    return (jsx_runtime_1.jsx("div", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-backdrop', className) }, { children: children }), void 0));
 });
-Backdrop.displayName = 'utrecht-backdrop';
+exports.Backdrop.displayName = 'Backdrop';

package/dist/cjs/Button.d.ts

@@ -0,0 +1,24 @@
+import { ButtonHTMLAttributes } from 'react';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    appearance?: string;
+    busy?: boolean;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PrimaryActionButton: {
+    ({ ...args }: {
+        [x: string]: any;
+    }): JSX.Element;
+    displayName: string;
+};
+export declare const SecondaryActionButton: {
+    ({ ...args }: {
+        [x: string]: any;
+    }): JSX.Element;
+    displayName: string;
+};
+export declare const SubtleButton: {
+    ({ ...args }: {
+        [x: string]: any;
+    }): JSX.Element;
+    displayName: string;
+};

package/dist/cjs/Button.js

@@ -0,0 +1,43 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubtleButton = exports.SecondaryActionButton = exports.PrimaryActionButton = exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+exports.Button = react_1.forwardRef((_a, ref) => {
+    var { appearance, busy, disabled, children, className, type } = _a, restProps = __rest(_a, ["appearance", "busy", "disabled", "children", "className", "type"]);
+    return (jsx_runtime_1.jsx("button", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-button', busy && 'utrecht-button--busy', disabled && 'utrecht-button--disabled', type === 'submit' && 'utrecht-button--submit', appearance === 'primary-action-button' && 'utrecht-button--primary-action', appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', appearance === 'subtle-button' && 'utrecht-button--subtle', className), "aria-busy": busy || undefined, disabled: disabled, type: type || 'button' }, { children: children }), void 0));
+});
+exports.Button.displayName = 'Button';
+const PrimaryActionButton = (_a) => {
+    var args = __rest(_a, []);
+    return jsx_runtime_1.jsx(exports.Button, Object.assign({}, args, { appearance: "primary-action-button" }), void 0);
+};
+exports.PrimaryActionButton = PrimaryActionButton;
+exports.PrimaryActionButton.displayName = 'PrimaryActionButton';
+const SecondaryActionButton = (_a) => {
+    var args = __rest(_a, []);
+    return jsx_runtime_1.jsx(exports.Button, Object.assign({}, args, { appearance: "secondary-action-button" }), void 0);
+};
+exports.SecondaryActionButton = SecondaryActionButton;
+exports.SecondaryActionButton.displayName = 'SecondaryActionButton';
+const SubtleButton = (_a) => {
+    var args = __rest(_a, []);
+    return jsx_runtime_1.jsx(exports.Button, Object.assign({}, args, { appearance: "subtle-button" }), void 0);
+};
+exports.SubtleButton = SubtleButton;
+exports.SubtleButton.displayName = 'SubtleButton';

package/dist/cjs/ButtonLink.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { AnchorHTMLAttributes } from 'react';
+interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    external?: boolean;
+}
+export declare const ButtonLink: import("react").ForwardRefExoticComponent<ButtonLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/cjs/ButtonLink.js

@@ -0,0 +1,47 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const onKeyDown = (evt) => {
+    var _a;
+    if (evt.key === ' ' && typeof ((_a = evt.target) === null || _a === void 0 ? void 0 : _a.click) === 'function') {
+        // Prevent other side-effects, such as scrolling
+        evt.preventDefault();
+        // Navigate to the link target
+        evt.target.click();
+    }
+};
+exports.ButtonLink = react_1.forwardRef((_a, ref) => {
+    var { children, className, external, role } = _a, restProps = __rest(_a, ["children", "className", "external", "role"]);
+    let props = restProps;
+    if (role === 'button') {
+        // When this link is announced as button by accessibility tools,
+        // it should also behave like a button. Links are not activated
+        // using `Space`, so we need to implement that behaviour here
+        // to reach parity with the `button` element.
+        props = Object.assign(Object.assign({}, restProps), { onKeyDown });
+    }
+    return (jsx_runtime_1.jsx("a", Object.assign({}, props, { ref: ref, role: role, className: clsx_1.default('utrecht-button-link', 'utrecht-button-link--html-button', { 'utrecht-button-link--external': external }, className), rel: external ? 'external noopener noreferrer' : undefined }, { children: children }), void 0));
+});
+exports.ButtonLink.displayName = 'ButtonLink';

package/dist/{Checkbox.d.ts → cjs/Checkbox.d.ts}

@@ -1,6 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'readOnly'> {
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'readOnly'> {
     invalid?: boolean;
 }
 export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/dist/cjs/Checkbox.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+exports.Checkbox = react_1.forwardRef((_a, ref) => {
+    var { disabled, invalid, required, className } = _a, restProps = __rest(_a, ["disabled", "invalid", "required", "className"]);
+    return (jsx_runtime_1.jsx("input", Object.assign({}, restProps, { ref: ref, type: "checkbox", className: clsx_1.default('utrecht-checkbox', 'utrecht-checkbox--html-input', disabled && 'utrecht-checkbox--disabled', invalid && 'utrecht-checkbox--invalid', required && 'utrecht-checkbox--required', className), "aria-invalid": invalid || undefined, disabled: disabled, required: required }), void 0));
+});
+exports.Checkbox.displayName = 'Checkbox';

package/dist/cjs/CustomRadioButton.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { InputHTMLAttributes } from 'react';
+export declare type CustomRadioButtonProps = InputHTMLAttributes<HTMLInputElement> & {
+    invalid?: boolean;
+};
+export declare const CustomRadioButton: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    invalid?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/CustomRadioButton.js

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomRadioButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+exports.CustomRadioButton = react_1.forwardRef((_a, ref) => {
+    var { disabled, required, className, invalid } = _a, restProps = __rest(_a, ["disabled", "required", "className", "invalid"]);
+    return (jsx_runtime_1.jsx("input", Object.assign({ type: "radio", "aria-invalid": invalid || undefined, disabled: disabled, required: required, ref: ref, className: clsx_1.default('utrecht-custom-radio-button', disabled && 'utrecht-custom-radio-button--disabled', invalid && 'utrecht-custom-radio-button--invalid', className) }, restProps), void 0));
+});
+exports.CustomRadioButton.displayName = 'CustomRadioButton';

package/dist/{Document.js → cjs/Document.js}

@@ -1,3 +1,4 @@
+"use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,15 +10,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Document = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-export const Document = forwardRef((_a, ref) => {
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+exports.Document = react_1.forwardRef((_a, ref) => {
     var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
-    return (_jsx("div", Object.assign({}, restProps, { ref: ref, className: clsx('utrecht-document', className) }, { children: children }), void 0));
+    return (jsx_runtime_1.jsx("div", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-document', className) }, { children: children }), void 0));
 });
-Document.displayName = 'utrecht-document';
+exports.Document.displayName = 'Document';

package/dist/{Fieldset.d.ts → cjs/Fieldset.d.ts}

@@ -1,4 +1,3 @@
 import { FieldsetHTMLAttributes } from 'react';
-declare type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>;
+export declare type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>;
 export declare const Fieldset: import("react").ForwardRefExoticComponent<FieldsetProps & import("react").RefAttributes<HTMLFieldSetElement>>;
-export {};

package/dist/cjs/Fieldset.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fieldset = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+exports.Fieldset = react_1.forwardRef((_a, ref) => {
+    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
+    return (jsx_runtime_1.jsx("fieldset", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-form-fieldset', 'utrecht-form-fieldset--reset-fieldset', className) }, { children: children }), void 0));
+});
+exports.Fieldset.displayName = 'Fieldset';

package/dist/{FieldsetLegend.d.ts → cjs/FieldsetLegend.d.ts}

@@ -1,4 +1,3 @@
 import { HTMLAttributes } from 'react';
-declare type FieldsetLegendProps = HTMLAttributes<HTMLLegendElement>;
+export declare type FieldsetLegendProps = HTMLAttributes<HTMLLegendElement>;
 export declare const FieldsetLegend: import("react").ForwardRefExoticComponent<FieldsetLegendProps & import("react").RefAttributes<HTMLLegendElement>>;
-export {};

package/dist/cjs/FieldsetLegend.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldsetLegend = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+exports.FieldsetLegend = react_1.forwardRef((_a, ref) => {
+    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
+    return (jsx_runtime_1.jsx("legend", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-form-fieldset__legend', 'utrecht-form-fieldset__legend--reset-legend', className) }, { children: children }), void 0));
+});
+exports.FieldsetLegend.displayName = 'FieldsetLegend';

package/dist/{FormField.d.ts → cjs/FormField.d.ts}

@@ -1,4 +1,3 @@
 import { HTMLAttributes } from 'react';
-declare type FormFieldProps = HTMLAttributes<HTMLDivElement>;
+export declare type FormFieldProps = HTMLAttributes<HTMLDivElement>;
 export declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/dist/cjs/FormField.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+exports.FormField = react_1.forwardRef((_a, ref) => {
+    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
+    return (jsx_runtime_1.jsx("div", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-form-field', 'utrecht-form-field--distanced', className) }, { children: children }), void 0));
+});
+exports.FormField.displayName = 'FormField';

package/dist/{FormFieldDescription.d.ts → cjs/FormFieldDescription.d.ts}

@@ -1,8 +1,7 @@
 import { HTMLAttributes } from 'react';
-interface FormFieldDescriptionProps extends HTMLAttributes<HTMLDivElement> {
+export interface FormFieldDescriptionProps extends HTMLAttributes<HTMLDivElement> {
     invalid?: boolean;
     valid?: boolean;
     warning?: boolean;
 }
 export declare const FormFieldDescription: import("react").ForwardRefExoticComponent<FormFieldDescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/dist/cjs/FormFieldDescription.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldDescription = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+exports.FormFieldDescription = react_1.forwardRef((_a, ref) => {
+    var { invalid, valid, warning, className, children } = _a, restProps = __rest(_a, ["invalid", "valid", "warning", "className", "children"]);
+    return (jsx_runtime_1.jsx("div", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-form-field-description', invalid && 'utrecht-form-field-description--invalid', valid && 'utrecht-form-field-description--valid', warning && 'utrecht-form-field-description--warning', className) }, { children: children }), void 0));
+});
+exports.FormFieldDescription.displayName = 'FormFieldDescription';

package/dist/{FormLabel.d.ts → cjs/FormLabel.d.ts}

@@ -1,9 +1,8 @@
 import { LabelHTMLAttributes } from 'react';
-interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     htmlFor: string;
     type?: 'checkbox' | 'radio';
     disabled?: boolean;
     checked?: boolean;
 }
 export declare const FormLabel: import("react").ForwardRefExoticComponent<FormLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
-export {};

package/dist/cjs/FormLabel.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+exports.FormLabel = react_1.forwardRef((_a, ref) => {
+    var { children, className, type, disabled, checked } = _a, restProps = __rest(_a, ["children", "className", "type", "disabled", "checked"]);
+    return (jsx_runtime_1.jsx("label", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-form-label', type && `utrecht-form-label--${type}`, disabled && 'utrecht-form-label--disabled', checked && 'utrecht-form-label--checked', className) }, { children: children }), void 0));
+});
+exports.FormLabel.displayName = 'FormLabel';