@utrecht/component-library-react 1.0.0-alpha.11 → 1.0.0-alpha.110

package/README.md

@@ -45,11 +45,11 @@ 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";
+// Substitute with your another theme for other organizations.
+import "@utrecht/design-tokens/dist/index.css";
 
 export const MyPage = () => (
   // Class name to apply the design tokens from the theme
@@ -59,6 +59,30 @@ export const MyPage = () => (
 );
 ```
 
+Only when you use the `<HTMLContent/>` component, you should import the `html.css` from the `component-library-css`
+
+```jsx
+import { HTMLContent } from "@utrecht/component-library-react";
+
+import "@utrecht/component-library-css/dist/html.css";
+import "@utrecht/design-tokens/dist/index.css";
+
+export const MyPage = () => (
+  // Class name to apply the design tokens from the theme
+  <HTMLContent
+    className="utrecht-theme"
+    dangerouslySetInnerHTML={{
+      _html: `<h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>`,
+    }}
+  />
+);
+```
+
 ## Components overview
 
 We make components for React available when needed in a project. Not every component is available yet, and we welcome you to discuss contributions.

package/dist/cjs/Article.d.ts

@@ -4,4 +4,6 @@
  */
 import { HTMLAttributes } from 'react';
 export declare type ArticleProps = HTMLAttributes<HTMLElement>;
-export declare const Article: import("react").ForwardRefExoticComponent<ArticleProps & import("react").RefAttributes<HTMLElement>>;
+export declare const Article: import("react").ForwardRefExoticComponent<ArticleProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/cjs/Article.js

@@ -26,4 +26,4 @@ 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';
+exports.Article.displayName = 'Article';

package/dist/cjs/Backdrop.d.ts

@@ -4,4 +4,6 @@
  */
 import { HTMLAttributes } from 'react';
 export declare type BackdropProps = HTMLAttributes<HTMLDivElement>;
-export declare const Backdrop: import("react").ForwardRefExoticComponent<BackdropProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Backdrop: import("react").ForwardRefExoticComponent<BackdropProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/Backdrop.js

@@ -26,4 +26,4 @@ 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';
+exports.Backdrop.displayName = 'Backdrop';

package/dist/cjs/Button.d.ts

@@ -1,5 +1,26 @@
 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 Button: import("react").ForwardRefExoticComponent<ButtonProps & {
+    children?: import("react").ReactNode;
+} & 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

@@ -14,12 +14,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
+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 { 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));
+    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 = 'utrecht-button';
+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,13 @@
+/**
+ * @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 & {
+    children?: import("react").ReactNode;
+} & 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/cjs/Checkbox.js

@@ -22,4 +22,4 @@ 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';
+exports.Checkbox.displayName = 'Checkbox';

package/dist/cjs/CustomRadioButton.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @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;
+} & {
+    children?: import("react").ReactNode;
+} & 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/cjs/Document.d.ts

@@ -4,4 +4,6 @@
  */
 import { HTMLAttributes } from 'react';
 export declare type DocumentProps = HTMLAttributes<HTMLDivElement>;
-export declare const Document: import("react").ForwardRefExoticComponent<DocumentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Document: import("react").ForwardRefExoticComponent<DocumentProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/Document.js

@@ -26,4 +26,4 @@ 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';
+exports.Document.displayName = 'Document';

package/dist/cjs/Fieldset.d.ts

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

package/dist/cjs/Fieldset.js

@@ -22,4 +22,4 @@ 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';
+exports.Fieldset.displayName = 'Fieldset';

package/dist/cjs/FieldsetLegend.d.ts

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

package/dist/cjs/FieldsetLegend.js

@@ -22,4 +22,4 @@ 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';
+exports.FieldsetLegend.displayName = 'FieldsetLegend';

package/dist/cjs/FormField.d.ts

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

package/dist/cjs/FormField.js

@@ -22,4 +22,4 @@ 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';
+exports.FormField.displayName = 'FormField';

package/dist/cjs/FormFieldDescription.d.ts

@@ -4,4 +4,6 @@ export interface FormFieldDescriptionProps extends HTMLAttributes<HTMLDivElement
     valid?: boolean;
     warning?: boolean;
 }
-export declare const FormFieldDescription: import("react").ForwardRefExoticComponent<FormFieldDescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const FormFieldDescription: import("react").ForwardRefExoticComponent<FormFieldDescriptionProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/FormFieldDescription.js

@@ -22,4 +22,4 @@ 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';
+exports.FormFieldDescription.displayName = 'FormFieldDescription';

package/dist/cjs/FormLabel.d.ts

@@ -5,4 +5,6 @@ export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     disabled?: boolean;
     checked?: boolean;
 }
-export declare const FormLabel: import("react").ForwardRefExoticComponent<FormLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const FormLabel: import("react").ForwardRefExoticComponent<FormLabelProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/cjs/FormLabel.js

@@ -22,4 +22,4 @@ 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';
+exports.FormLabel.displayName = 'FormLabel';

package/dist/cjs/HTMLContent.d.ts

@@ -4,4 +4,6 @@
  */
 import { HTMLAttributes } from 'react';
 export declare type HTMLContentProps = HTMLAttributes<HTMLDivElement>;
-export declare const HTMLContent: import("react").ForwardRefExoticComponent<HTMLContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const HTMLContent: import("react").ForwardRefExoticComponent<HTMLContentProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/HTMLContent.js

@@ -26,4 +26,4 @@ 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';
+exports.HTMLContent.displayName = 'HTMLContent';

package/dist/cjs/Heading1.d.ts

@@ -4,4 +4,6 @@
  */
 import { HTMLAttributes } from 'react';
 export declare type Heading1Props = HTMLAttributes<HTMLHeadingElement>;
-export declare const Heading1: import("react").ForwardRefExoticComponent<Heading1Props & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const Heading1: import("react").ForwardRefExoticComponent<Heading1Props & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/cjs/Heading1.js

@@ -26,4 +26,4 @@ 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';
+exports.Heading1.displayName = 'Heading1';

package/dist/cjs/Heading2.d.ts

@@ -4,4 +4,6 @@
  */
 import { HTMLAttributes } from 'react';
 export declare type Heading2Props = HTMLAttributes<HTMLHeadingElement>;
-export declare const Heading2: import("react").ForwardRefExoticComponent<Heading2Props & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const Heading2: import("react").ForwardRefExoticComponent<Heading2Props & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/cjs/Heading2.js

@@ -26,4 +26,4 @@ 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';
+exports.Heading2.displayName = 'Heading2';

package/dist/cjs/Heading3.d.ts

@@ -4,4 +4,6 @@
  */
 import { HTMLAttributes } from 'react';
 export declare type Heading3Props = HTMLAttributes<HTMLHeadingElement>;
-export declare const Heading3: import("react").ForwardRefExoticComponent<Heading3Props & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const Heading3: import("react").ForwardRefExoticComponent<Heading3Props & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/cjs/Heading3.js

@@ -26,4 +26,4 @@ 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';
+exports.Heading3.displayName = 'Heading3';

package/dist/cjs/Heading4.d.ts

@@ -4,4 +4,6 @@
  */
 import { HTMLAttributes } from 'react';
 export declare type Heading4Props = HTMLAttributes<HTMLHeadingElement>;
-export declare const Heading4: import("react").ForwardRefExoticComponent<Heading4Props & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const Heading4: import("react").ForwardRefExoticComponent<Heading4Props & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/cjs/Heading4.js

@@ -26,4 +26,4 @@ exports.Heading4 = react_1.forwardRef((_a, ref) => {
     var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
     return (jsx_runtime_1.jsx("h4", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-heading-4', className) }, { children: children }), void 0));
 });
-exports.Heading4.displayName = 'utrecht-heading-4';
+exports.Heading4.displayName = 'Heading4';

package/dist/cjs/Heading5.d.ts

@@ -4,4 +4,6 @@
  */
 import { HTMLAttributes } from 'react';
 export declare type Heading5Props = HTMLAttributes<HTMLHeadingElement>;
-export declare const Heading5: import("react").ForwardRefExoticComponent<Heading5Props & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const Heading5: import("react").ForwardRefExoticComponent<Heading5Props & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/cjs/Heading5.js

@@ -26,4 +26,4 @@ exports.Heading5 = react_1.forwardRef((_a, ref) => {
     var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
     return (jsx_runtime_1.jsx("h5", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-heading-5', className) }, { children: children }), void 0));
 });
-exports.Heading5.displayName = 'utrecht-heading-5';
+exports.Heading5.displayName = 'Heading5';

package/dist/cjs/Heading6.d.ts

@@ -4,4 +4,6 @@
  */
 import { HTMLAttributes } from 'react';
 export declare type Heading6Props = HTMLAttributes<HTMLHeadingElement>;
-export declare const Heading6: import("react").ForwardRefExoticComponent<Heading6Props & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const Heading6: import("react").ForwardRefExoticComponent<Heading6Props & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/cjs/Heading6.js

@@ -26,4 +26,4 @@ exports.Heading6 = react_1.forwardRef((_a, ref) => {
     var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
     return (jsx_runtime_1.jsx("h6", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-heading-6', className) }, { children: children }), void 0));
 });
-exports.Heading6.displayName = 'utrecht-heading-6';
+exports.Heading6.displayName = 'Heading6';

package/dist/cjs/Link.d.ts

@@ -5,11 +5,8 @@
  */
 import { AnchorHTMLAttributes } from 'react';
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    activeStyle?: boolean;
     external?: boolean;
-    focusStyle?: boolean;
-    focusVisibleStyle?: boolean;
-    hoverStyle?: boolean;
-    visitedStyle?: boolean;
 }
-export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/cjs/Link.js

@@ -24,19 +24,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
 exports.Link = react_1.forwardRef((_a, ref) => {
-    var { children, className, activeStyle, external, focusStyle, focusVisibleStyle, hoverStyle, visitedStyle } = _a, restProps = __rest(_a, ["children", "className", "activeStyle", "external", "focusStyle", "focusVisibleStyle", "hoverStyle", "visitedStyle"]);
+    var { children, className, external } = _a, restProps = __rest(_a, ["children", "className", "external"]);
     return (
     // "utrecht-link--telephone" does not have a corresponding API,
     // since it is primarily a basis for implementing input[href^="tel"].
     // Telephone number rendering in React is best achieved using composition
     // of the TelephoneValue component.
-    jsx_runtime_1.jsx("a", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-link', {
-            'utrecht-link--active': activeStyle,
-            'utrecht-link--external': external,
-            'utrecht-link--focus': focusStyle,
-            'utrecht-link--focus-visible': focusVisibleStyle,
-            'utrecht-link--hover': hoverStyle,
-            'utrecht-link--visited': visitedStyle,
-        }, className), rel: external ? 'external noopener noreferrer' : undefined }, { children: children }), void 0));
+    jsx_runtime_1.jsx("a", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-link', { 'utrecht-link--external': external }, className), rel: external ? 'external noopener noreferrer' : undefined }, { children: children }), void 0));
 });
-exports.Link.displayName = 'utrecht-link';
+exports.Link.displayName = 'Link';

package/dist/cjs/OrderedList.d.ts

@@ -4,4 +4,6 @@
  */
 import { OlHTMLAttributes } from 'react';
 export declare type OrderedListProps = OlHTMLAttributes<HTMLOListElement>;
-export declare const OrderedList: import("react").ForwardRefExoticComponent<OrderedListProps & import("react").RefAttributes<HTMLOListElement>>;
+export declare const OrderedList: import("react").ForwardRefExoticComponent<OrderedListProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLOListElement>>;

package/dist/cjs/OrderedList.js

@@ -26,4 +26,4 @@ exports.OrderedList = react_1.forwardRef((_a, ref) => {
     var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
     return (jsx_runtime_1.jsx("ol", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-ordered-list', className) }, { children: children }), void 0));
 });
-exports.OrderedList.displayName = 'utrecht-ordered-list';
+exports.OrderedList.displayName = 'OrderedList';

package/dist/cjs/OrderedListItem.d.ts

@@ -4,4 +4,6 @@
  */
 import { LiHTMLAttributes } from 'react';
 export declare type OrderedListItemProps = LiHTMLAttributes<HTMLLIElement>;
-export declare const OrderedListItem: import("react").ForwardRefExoticComponent<OrderedListItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export declare const OrderedListItem: import("react").ForwardRefExoticComponent<OrderedListItemProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLLIElement>>;

package/dist/cjs/OrderedListItem.js

@@ -26,4 +26,4 @@ exports.OrderedListItem = react_1.forwardRef((_a, ref) => {
     var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
     return (jsx_runtime_1.jsx("li", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-ordered-list__item', className) }, { children: children }), void 0));
 });
-exports.OrderedListItem.displayName = 'utrecht-ordered-list-item';
+exports.OrderedListItem.displayName = 'OrderedListItem';

package/dist/cjs/Page.d.ts

@@ -4,4 +4,6 @@
  */
 import { HTMLAttributes } from 'react';
 export declare type PageProps = HTMLAttributes<HTMLDivElement>;
-export declare const Page: import("react").ForwardRefExoticComponent<PageProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Page: import("react").ForwardRefExoticComponent<PageProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/Page.js

@@ -26,4 +26,4 @@ exports.Page = 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-page', className) }, { children: children }), void 0));
 });
-exports.Page.displayName = 'utrecht-page';
+exports.Page.displayName = 'Page';

package/dist/cjs/PageContent.d.ts

@@ -4,6 +4,10 @@
  */
 import { HTMLAttributes } from 'react';
 export declare type PageContentProps = HTMLAttributes<HTMLDivElement>;
-export declare const PageContent: import("react").ForwardRefExoticComponent<PageContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PageContent: import("react").ForwardRefExoticComponent<PageContentProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export declare type PageContentMainProps = HTMLAttributes<HTMLDivElement>;
-export declare const PageContentMain: import("react").ForwardRefExoticComponent<PageContentMainProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PageContentMain: import("react").ForwardRefExoticComponent<PageContentMainProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/PageContent.js

@@ -26,9 +26,9 @@ exports.PageContent = 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-page-content', className) }, { children: children }), void 0));
 });
-exports.PageContent.displayName = 'utrecht-page-content';
+exports.PageContent.displayName = 'PageContent';
 exports.PageContentMain = react_1.forwardRef((_a, ref) => {
     var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
     return (jsx_runtime_1.jsx("main", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-page-content__main', className) }, { children: children }), void 0));
 });
-exports.PageContentMain.displayName = 'utrecht-page-content-main';
+exports.PageContentMain.displayName = 'PageContentMain';

package/dist/cjs/PageFooter.d.ts

@@ -4,4 +4,6 @@
  */
 import { HTMLAttributes } from 'react';
 export declare type PageFooterProps = HTMLAttributes<HTMLDivElement>;
-export declare const PageFooter: import("react").ForwardRefExoticComponent<PageFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PageFooter: import("react").ForwardRefExoticComponent<PageFooterProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;