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

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,8 +41,8 @@ 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";
@@ -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/cjs/Article.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.Article = 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.Article = react_1.forwardRef((_a, ref) => {
+    var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
+    return (jsx_runtime_1.jsx("article", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-article', className) }, { children: children }), void 0));
+});
+exports.Article.displayName = 'utrecht-article';

package/dist/cjs/Backdrop.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.Backdrop = 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.Backdrop = react_1.forwardRef((_a, ref) => {
+    var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
+    return (jsx_runtime_1.jsx("div", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-backdrop', className) }, { children: children }), void 0));
+});
+exports.Backdrop.displayName = 'utrecht-backdrop';

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

@@ -1,6 +1,5 @@
 import { ButtonHTMLAttributes } from 'react';
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     busy?: boolean;
 }
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/cjs/Button.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.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 { busy, disabled, children, className, type } = _a, restProps = __rest(_a, ["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', className), "aria-busy": busy || undefined, disabled: disabled, type: type || 'button' }, { children: children }), void 0));
+});
+exports.Button.displayName = 'utrecht-button';

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 = 'utrecht-checkbox';

package/dist/cjs/Document.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.Document = 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.Document = react_1.forwardRef((_a, ref) => {
+    var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
+    return (jsx_runtime_1.jsx("div", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-document', className) }, { children: children }), void 0));
+});
+exports.Document.displayName = 'utrecht-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 = 'utrecht-form-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 = 'utrecht-form-fieldset-legend';

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 = 'utrecht-form-field';

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 = 'utrecht-form-field-description';

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 = 'utrecht-form-label';

package/dist/cjs/HTMLContent.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.HTMLContent = 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.HTMLContent = react_1.forwardRef((_a, ref) => {
+    var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
+    return (jsx_runtime_1.jsx("div", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-html', className) }, { children: children }), void 0));
+});
+exports.HTMLContent.displayName = 'utrecht-html';

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

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

package/dist/cjs/Heading1.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.Heading1 = 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.Heading1 = react_1.forwardRef((_a, ref) => {
+    var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
+    return (jsx_runtime_1.jsx("h1", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-heading-1', className) }, { children: children }), void 0));
+});
+exports.Heading1.displayName = 'utrecht-heading-1';

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

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

package/dist/cjs/Heading2.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.Heading2 = 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.Heading2 = react_1.forwardRef((_a, ref) => {
+    var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
+    return (jsx_runtime_1.jsx("h2", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-heading-2', className) }, { children: children }), void 0));
+});
+exports.Heading2.displayName = 'utrecht-heading-2';

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

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

package/dist/cjs/Heading3.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.Heading3 = 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.Heading3 = react_1.forwardRef((_a, ref) => {
+    var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
+    return (jsx_runtime_1.jsx("h3", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-heading-3', className) }, { children: children }), void 0));
+});
+exports.Heading3.displayName = 'utrecht-heading-3';

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

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