@utrecht/component-library-react 1.0.0-alpha.10 → 1.0.0-alpha.102

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.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.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,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

@@ -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,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/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,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/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.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.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.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.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.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.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.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.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.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.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.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.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,6 @@
  */
 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>>;

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.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.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.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.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.js

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

package/dist/cjs/PageHeader.js

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

package/dist/cjs/Paragraph.js

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

package/dist/cjs/RadioButton.js

@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
 exports.RadioButton = react_1.forwardRef((_a, ref) => {
     var { checked, disabled, invalid, required, className } = _a, restProps = __rest(_a, ["checked", "disabled", "invalid", "required", "className"]);
-    return (jsx_runtime_1.jsx("input", Object.assign({}, restProps, { ref: ref, type: "radio", checked: checked, className: clsx_1.default('utrecht-radio-button', 'utrecht-radio-button--html-input', checked && 'utrecht-radio-button--checked', disabled && 'utrecht-radio-button--disabled', invalid && 'utrecht-radio-button--invalid', required && 'utrecht-radio-button--required', className), disabled: disabled, required: required }), void 0));
+    return (jsx_runtime_1.jsx("input", Object.assign({}, restProps, { ref: ref, type: "radio", className: clsx_1.default('utrecht-radio-button', 'utrecht-radio-button--html-input', checked && 'utrecht-radio-button--checked', disabled && 'utrecht-radio-button--disabled', invalid && 'utrecht-radio-button--invalid', required && 'utrecht-radio-button--required', className), disabled: disabled, required: required }), void 0));
 });
-exports.RadioButton.displayName = 'utrecht-radio-button';
+exports.RadioButton.displayName = 'RadioButton';

package/dist/cjs/Select.js

@@ -23,9 +23,9 @@ exports.Select = react_1.forwardRef((_a, ref) => {
     const noscript = true;
     return (jsx_runtime_1.jsx("select", Object.assign({}, restProps, { ref: ref, "aria-invalid": invalid || undefined, disabled: disabled, required: noscript ? required : false, "aria-required": noscript ? undefined : required, className: clsx_1.default('utrecht-select', disabled && 'utrecht-select--disabled', invalid && 'utrecht-select--invalid', required && 'utrecht-select--required', className) }, { children: children }), void 0));
 });
-exports.Select.displayName = 'utrecht-radio-button';
+exports.Select.displayName = 'Select';
 exports.SelectOption = react_1.forwardRef((_a, ref) => {
     var { disabled, invalid, value, children, className } = _a, restProps = __rest(_a, ["disabled", "invalid", "value", "children", "className"]);
     return (jsx_runtime_1.jsx("option", Object.assign({}, restProps, { ref: ref, disabled: disabled, value: value, className: clsx_1.default('utrecht-select__option', disabled && 'utrecht-select__option--disabled', invalid && 'utrecht-select__option--invalid', className) }, { children: children }), void 0));
 });
-exports.SelectOption.displayName = 'utrecht-select-option';
+exports.SelectOption.displayName = 'SelectOption';

package/dist/cjs/Separator.js

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

package/dist/cjs/Surface.js

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

package/dist/cjs/Table.js

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

package/dist/cjs/TableBody.js

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

package/dist/cjs/TableCaption.js

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

package/dist/cjs/TableCell.js

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

package/dist/cjs/TableFooter.js

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

package/dist/cjs/TableHeader.js

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

package/dist/cjs/TableHeaderCell.js

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

package/dist/cjs/TableRow.js

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

package/dist/cjs/Textarea.js

@@ -22,4 +22,4 @@ exports.Textarea = react_1.forwardRef((_a, ref) => {
     var { disabled, invalid, readOnly, required, className } = _a, restProps = __rest(_a, ["disabled", "invalid", "readOnly", "required", "className"]);
     return (jsx_runtime_1.jsx("textarea", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly', required && 'utrecht-textarea--required', className), disabled: disabled, readOnly: readOnly, required: required, "aria-invalid": invalid || undefined }), void 0));
 });
-exports.Textarea.displayName = 'utrecht-textarea';
+exports.Textarea.displayName = 'Textarea';

package/dist/cjs/Textbox.js

@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
 exports.Textbox = react_1.forwardRef((_a, ref) => {
     var { disabled, invalid, readOnly, required, className, type = 'text', maxLength, inputMode } = _a, restProps = __rest(_a, ["disabled", "invalid", "readOnly", "required", "className", "type", "maxLength", "inputMode"]);
-    return (jsx_runtime_1.jsx("input", Object.assign({}, restProps, { ref: ref, type: type, className: clsx_1.default('utrecht-textbox', 'utrecht-textbox--html-input', type === 'email' && 'utrecht-textbox--url', type === 'password' && 'utrecht-textbox--password', type === 'number' && 'utrecht-textbox--numeric', type === 'tel' && 'utrecht-textbox--numeric', type === 'url' && 'utrecht-textbox--url', inputMode === 'numeric' && 'utrecht-textbox--numeric', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly', required && 'utrecht-textbox--required', className), maxLength: maxLength, disabled: disabled, readOnly: readOnly, required: required, "aria-invalid": invalid || undefined, inputMode: inputMode || (type === 'number' ? 'numeric' : undefined) }), void 0));
+    return (jsx_runtime_1.jsx("input", Object.assign({}, restProps, { ref: ref, type: type, className: clsx_1.default('utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly', required && 'utrecht-textbox--required', className), maxLength: maxLength, disabled: disabled, readOnly: readOnly, required: required, "aria-invalid": invalid || undefined, inputMode: inputMode || (type === 'number' ? 'numeric' : undefined) }), void 0));
 });
-exports.Textbox.displayName = 'utrecht-textbox';
+exports.Textbox.displayName = 'Textbox';

package/dist/cjs/URLValue.js

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

package/dist/cjs/UnorderedList.js

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

package/dist/cjs/UnorderedListItem.js

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

package/dist/cjs/index.d.ts

@@ -4,8 +4,10 @@
  */
 export { Article } from './Article';
 export { Backdrop } from './Backdrop';
-export { Button } from './Button';
+export { Button, PrimaryActionButton, SecondaryActionButton, SubtleButton } from './Button';
+export { ButtonLink } from './ButtonLink';
 export { Checkbox } from './Checkbox';
+export { CustomRadioButton } from './CustomRadioButton';
 export { Document } from './Document';
 export { Fieldset } from './Fieldset';
 export { FieldsetLegend } from './FieldsetLegend';