@utrecht/component-library-react 1.0.0-alpha.3 → 1.0.0-alpha.32

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";
+import "@utrecht/design-tokens/dist/index.css";
 
 export const MyPage = () => (
   // Class name to apply the design tokens from the theme

package/dist/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/Button.d.ts

@@ -1,6 +1,24 @@
 import { ButtonHTMLAttributes } from 'react';
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    appearance?: string;
     busy?: boolean;
 }
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export {};
+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';
+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 = 'utrecht-primary-action-button';
+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 = 'utrecht-secondary-action-button';
+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 = 'utrecht-subtle-button';

package/dist/cjs/ButtonLink.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @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;
+    focusStyle?: boolean;
+    focusVisibleStyle?: boolean;
+    hoverStyle?: boolean;
+    visitedStyle?: boolean;
+}
+export declare const ButtonLink: import("react").ForwardRefExoticComponent<ButtonLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/cjs/ButtonLink.js

@@ -0,0 +1,52 @@
+"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, focusStyle, focusVisibleStyle, hoverStyle, role } = _a, restProps = __rest(_a, ["children", "className", "external", "focusStyle", "focusVisibleStyle", "hoverStyle", "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--external': external,
+            'utrecht-button-link--focus': focusStyle,
+            'utrecht-button-link--focus-visible': focusVisibleStyle,
+            'utrecht-button-link--hover': hoverStyle,
+        }, className), rel: external ? 'external noopener noreferrer' : undefined }, { children: children }), void 0));
+});
+exports.ButtonLink.displayName = 'utrecht-button-link';

package/dist/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/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/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

@@ -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 = 'utrecht-form-fieldset-legend';

package/dist/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/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/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/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/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/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/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 {};

package/dist/cjs/Heading5.d.ts

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

package/dist/cjs/Heading6.d.ts

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

package/dist/cjs/Link.d.ts

@@ -4,7 +4,7 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 import { AnchorHTMLAttributes } from 'react';
-interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     activeStyle?: boolean;
     external?: boolean;
     focusStyle?: boolean;
@@ -13,4 +13,3 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     visitedStyle?: boolean;
 }
 export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
-export {};

package/dist/cjs/OrderedList.d.ts

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

package/dist/cjs/OrderedListItem.d.ts

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

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 = 'utrecht-ordered-list-item';

package/dist/cjs/PageContent.d.ts

@@ -3,8 +3,7 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 import { HTMLAttributes } from 'react';
-declare type PageContentProps = HTMLAttributes<HTMLDivElement>;
+export declare type PageContentProps = HTMLAttributes<HTMLDivElement>;
 export declare const PageContent: import("react").ForwardRefExoticComponent<PageContentProps & import("react").RefAttributes<HTMLDivElement>>;
-declare type PageContentMainProps = HTMLAttributes<HTMLDivElement>;
+export declare type PageContentMainProps = HTMLAttributes<HTMLDivElement>;
 export declare const PageContentMain: import("react").ForwardRefExoticComponent<PageContentMainProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/dist/cjs/PageContent.js

@@ -31,4 +31,4 @@ 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 = 'utrecht-page-content-main';

package/dist/cjs/Paragraph.d.ts

@@ -3,8 +3,7 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 import { HTMLAttributes } from 'react';
-interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
+export interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
     lead?: boolean;
 }
 export declare const Paragraph: import("react").ForwardRefExoticComponent<ParagraphProps & import("react").RefAttributes<HTMLParagraphElement>>;
-export {};

package/dist/cjs/RadioButton.d.ts

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

package/dist/cjs/Select.d.ts

@@ -1,12 +1,11 @@
 import { OptionHTMLAttributes, SelectHTMLAttributes } from 'react';
-interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
     invalid?: boolean;
 }
 export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;
-interface SelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
+export interface SelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
     disabled?: boolean;
     invalid?: boolean;
     value?: string;
 }
 export declare const SelectOption: import("react").ForwardRefExoticComponent<SelectOptionProps & import("react").RefAttributes<HTMLOptionElement>>;
-export {};

package/dist/cjs/Separator.d.ts

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

package/dist/cjs/Table.d.ts

@@ -3,6 +3,5 @@
  * Copyright (c) 2022 Robbert Broersma
  */
 import { TableHTMLAttributes } from 'react';
-declare type TableProps = TableHTMLAttributes<HTMLTableElement>;
+export declare type TableProps = TableHTMLAttributes<HTMLTableElement>;
 export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
-export {};

package/dist/cjs/TableBody.d.ts

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

package/dist/cjs/TableCaption.d.ts

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

package/dist/cjs/TableCell.d.ts

@@ -3,6 +3,5 @@
  * Copyright (c) 2022 Robbert Broersma
  */
 import { TdHTMLAttributes } from 'react';
-declare type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+export declare type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
 export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
-export {};

package/dist/cjs/TableFooter.d.ts

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

package/dist/cjs/TableHeader.d.ts

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

package/dist/cjs/TableHeaderCell.d.ts

@@ -3,6 +3,5 @@
  * Copyright (c) 2022 Robbert Broersma
  */
 import { ThHTMLAttributes } from 'react';
-declare type TableHeaderCellProps = ThHTMLAttributes<HTMLTableCellElement>;
+export declare type TableHeaderCellProps = ThHTMLAttributes<HTMLTableCellElement>;
 export declare const TableHeaderCell: import("react").ForwardRefExoticComponent<TableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
-export {};

package/dist/cjs/TableRow.d.ts

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

package/dist/cjs/Textarea.d.ts

@@ -1,6 +1,5 @@
 import { TextareaHTMLAttributes } from 'react';
-interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     invalid?: boolean;
 }
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
-export {};

package/dist/cjs/Textbox.d.ts

@@ -1,8 +1,7 @@
 import { InputHTMLAttributes } from 'react';
 export declare type TextboxTypes = 'email' | 'number' | 'password' | 'tel' | 'text' | 'url';
-interface TextboxProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface TextboxProps extends InputHTMLAttributes<HTMLInputElement> {
     invalid?: boolean;
     type?: TextboxTypes;
 }
 export declare const Textbox: import("react").ForwardRefExoticComponent<TextboxProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/dist/cjs/UnorderedList.d.ts

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

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 = 'utrecht-unordered-list-item';

package/dist/cjs/index.d.ts

@@ -4,7 +4,8 @@
  */
 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 { Document } from './Document';
 export { Fieldset } from './Fieldset';

package/dist/cjs/index.js

@@ -4,13 +4,18 @@
  * Copyright (c) 2022 Robbert Broersma
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UnorderedListItem = exports.UnorderedList = exports.URLValue = exports.Textbox = exports.Textarea = exports.TableRow = exports.TableHeaderCell = exports.TableHeader = exports.TableFooter = exports.TableCell = exports.TableCaption = exports.TableBody = exports.Table = exports.Surface = exports.Separator = exports.SelectOption = exports.Select = exports.RadioButton = exports.Paragraph = exports.PageHeader = exports.PageFooter = exports.PageContent = exports.Page = exports.OrderedListItem = exports.OrderedList = exports.Link = exports.Heading6 = exports.Heading5 = exports.Heading4 = exports.Heading3 = exports.Heading2 = exports.Heading1 = exports.HTMLContent = exports.FormLabel = exports.FormFieldDescription = exports.FormField = exports.FieldsetLegend = exports.Fieldset = exports.Document = exports.Checkbox = exports.Button = exports.Backdrop = exports.Article = void 0;
+exports.UnorderedListItem = exports.UnorderedList = exports.URLValue = exports.Textbox = exports.Textarea = exports.TableRow = exports.TableHeaderCell = exports.TableHeader = exports.TableFooter = exports.TableCell = exports.TableCaption = exports.TableBody = exports.Table = exports.Surface = exports.Separator = exports.SelectOption = exports.Select = exports.RadioButton = exports.Paragraph = exports.PageHeader = exports.PageFooter = exports.PageContent = exports.Page = exports.OrderedListItem = exports.OrderedList = exports.Link = exports.Heading6 = exports.Heading5 = exports.Heading4 = exports.Heading3 = exports.Heading2 = exports.Heading1 = exports.HTMLContent = exports.FormLabel = exports.FormFieldDescription = exports.FormField = exports.FieldsetLegend = exports.Fieldset = exports.Document = exports.Checkbox = exports.ButtonLink = exports.SubtleButton = exports.SecondaryActionButton = exports.PrimaryActionButton = exports.Button = exports.Backdrop = exports.Article = void 0;
 var Article_1 = require("./Article");
 Object.defineProperty(exports, "Article", { enumerable: true, get: function () { return Article_1.Article; } });
 var Backdrop_1 = require("./Backdrop");
 Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return Backdrop_1.Backdrop; } });
 var Button_1 = require("./Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+Object.defineProperty(exports, "PrimaryActionButton", { enumerable: true, get: function () { return Button_1.PrimaryActionButton; } });
+Object.defineProperty(exports, "SecondaryActionButton", { enumerable: true, get: function () { return Button_1.SecondaryActionButton; } });
+Object.defineProperty(exports, "SubtleButton", { enumerable: true, get: function () { return Button_1.SubtleButton; } });
+var ButtonLink_1 = require("./ButtonLink");
+Object.defineProperty(exports, "ButtonLink", { enumerable: true, get: function () { return ButtonLink_1.ButtonLink; } });
 var Checkbox_1 = require("./Checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
 var Document_1 = require("./Document");