@sqrzro/ui 4.0.0-alpha.13 → 4.0.0-alpha.14

package/dist/components/buttons/Button/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, StylableButtonClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, StylableButtonClassName } from '../../../styles/classnames/interfaces';
 import { ButtonVariant } from '../../../utility/interfaces';
 export interface ButtonClassNames {
     root: StylableButtonClassName;

package/dist/components/buttons/Button/index.js

@@ -3,14 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import Link from '../../../components/utility/Link';
 import Loader from '../../../components/utility/Loader';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
-function getVariantClassName(className, variant) {
-    if (!className || !variant) {
-        return null;
-    }
-    return className[variant] || null;
-}
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 /**
  * Either a `Link` component or a `button` element, depending on whether a `href` prop is specified.
  *
@@ -32,12 +26,8 @@ function getVariantClassName(className, variant) {
  */
 function Button({ children, classNames, classNameProps, form, hasAssistiveLabel, href, icon, id, isDisabled, isFullWidth, isLoading, isNewWindow, isText, name, onClick, popoverTarget, scroll, style, type, value, variant, }) {
     const ref = useRef(null);
-    const componentClassNames = classNames ||
-        getClassNames(isText ? 'textButton' : 'button')?.({
-            ...(classNameProps || {}),
-            hasAssistiveLabel,
-        });
-    const className = tw('flex cursor-pointer items-center justify-center whitespace-nowrap', isDisabled || isLoading ? 'pointer-events-none opacity-30' : null, isFullWidth ? 'w-full' : null, componentClassNames?.root?.default, getVariantClassName(componentClassNames?.root, variant));
+    const componentClassNames = getClassNames(isText ? 'textButton' : 'button', { props: { ...classNameProps } }, classNames);
+    const className = tw('flex cursor-pointer items-center justify-center whitespace-nowrap', isDisabled || isLoading ? 'pointer-events-none opacity-30' : null, isFullWidth ? 'w-full' : null, componentClassNames?.root);
     /*
      *  Link uses classNames, whereas button uses className. This is because Link can also be used
      *  headless in other applications, and so should have consistency.

package/dist/components/collections/DataTable/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { DataTableObject } from '../interfaces';
 export interface DataTableClassNames {
     root: string;

package/dist/components/collections/DataTable/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 function DataTable({ classNameProps, classNames, data }) {
-    const componentClassNames = classNames || getClassNames('dataTable')?.(classNameProps);
+    const componentClassNames = getClassNames('dataTable', { props: classNameProps }, classNames);
     return (_jsx("table", { className: tw('w-full', componentClassNames?.root), children: _jsx("tbody", { children: data.map(({ label, value }, index) => (_jsxs("tr", { className: componentClassNames?.row, children: [_jsx("th", { className: tw(componentClassNames?.cell, componentClassNames?.label), children: label }), _jsx("td", { className: tw(componentClassNames?.cell, componentClassNames?.value), children: value })] }, index))) }) }));
 }
 export default DataTable;

package/dist/components/collections/EmptyMessage/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, StylableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, StylableClassName } from '../../../styles/classnames/interfaces';
 import { StyleVariant } from '../../../utility/interfaces';
 import type { EmptyMessageActionProps } from '../EmptyMessageAction';
 export interface EmptyMessageClassNames {

package/dist/components/collections/EmptyMessage/index.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
 import EmptyMessageAction from '../EmptyMessageAction';
 export const DEFAULT_TITLE = 'No results found';
 export const DEFAULT_CHILDREN = 'If you think this is an error, please contact the site administrator.';
@@ -11,7 +10,7 @@ export const DEFAULT_CHILDREN = 'If you think this is an error, please contact t
  * component to be used for any situation where a standout message is required.
  */
 function EmptyMessage({ action, children = DEFAULT_CHILDREN, classNameProps, classNames, icon, title = DEFAULT_TITLE, variant, }) {
-    const componentClassNames = classNames || getClassNames('emptyMessage')?.(classNameProps);
-    return (_jsxs("section", { className: tw(componentClassNames?.root?.default, variant ? componentClassNames?.root?.[variant] : null), children: [icon ? (_jsx("div", { className: tw(componentClassNames?.icon?.default, variant ? componentClassNames?.icon?.[variant] : null), children: icon })) : null, _jsx("h2", { className: tw(componentClassNames?.title?.default, variant ? componentClassNames?.title?.[variant] : null), children: title }), _jsx("div", { className: tw(componentClassNames?.description), children: children }), action ? (_jsx("div", { className: tw(componentClassNames?.action), children: _jsx(EmptyMessageAction, { action: action }) })) : null] }));
+    const componentClassNames = getClassNames('emptyMessage', { props: classNameProps }, classNames);
+    return (_jsxs("section", { className: componentClassNames?.root, children: [icon ? _jsx("div", { className: componentClassNames?.icon, children: icon }) : null, _jsx("h2", { className: componentClassNames?.title, children: title }), _jsx("div", { className: componentClassNames?.description, children: children }), action ? (_jsx("div", { className: componentClassNames?.action, children: _jsx(EmptyMessageAction, { action: action }) })) : null] }));
 }
 export default EmptyMessage;

package/dist/components/collections/ListItem/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, StylableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, StylableClassName } from '../../../styles/classnames/interfaces';
 import type { ListItemObject } from '../interfaces';
 export interface ListItemClassNames {
     description: string;

package/dist/components/collections/ListItem/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // import type { MenuAction } from '../../elements/MenuItem';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 import Link from '../../../components/utility/Link';
 import ListItemSecondary from '../ListItemSecondary';
 import ListItemMeta from '../ListItemMeta';
@@ -17,12 +17,12 @@ function getLayout(layout) {
 function ListItem({ 
 // actions,
 classNames, classNameProps, description, href, id, isLoading, meta, secondary, tertiary, title, variant, }) {
-    const componentClassNames = classNames || getClassNames('listItem')?.(classNameProps);
+    const componentClassNames = getClassNames('listItem', { props: classNameProps }, classNames);
     const hasPrimary = Boolean(title || description || meta);
     const hasSecondary = Boolean(secondary);
     const hasTertiary = Boolean(tertiary);
-    return (_jsx("li", { className: tw('@container relative grid', componentClassNames?.root?.default, variant ? componentClassNames?.root?.[variant] : null, isLoading ? 'pointer-events-none animate-pulse' : null
+    return (_jsx("li", { className: tw('@container relative grid', componentClassNames?.root, isLoading ? 'pointer-events-none animate-pulse' : null
         // typeof actions === 'function' ? 'grid-cols-[1fr_auto] gap-4' : 'grid-cols-1'
-        ), children: _jsx("article", { className: "contents", children: _jsxs("div", { className: tw('grid gap-x-6 gap-y-4', getLayout([hasPrimary, hasSecondary, hasTertiary])), children: [_jsxs("div", { className: componentClassNames?.primary, children: [title ? (_jsx("h2", { className: tw(componentClassNames?.title?.default, variant ? componentClassNames?.title?.[variant] : null), children: href ? (_jsx(Link, { className: "hover:text-link", href: href, children: title })) : (title) })) : null, description ? (_jsx("div", { className: componentClassNames?.description, children: description })) : null, _jsx(ListItemMeta, { classNameProps: classNameProps, data: meta?.data, id: id })] }), tertiary ? (_jsx("div", { className: componentClassNames?.tertiary, children: tertiary })) : null, _jsx(ListItemSecondary, { classNameProps: classNameProps, classNames: classNames, data: secondary?.data, variant: variant })] }) }) }));
+        ), children: _jsx("article", { className: "contents", children: _jsxs("div", { className: tw('grid gap-x-6 gap-y-4', getLayout([hasPrimary, hasSecondary, hasTertiary])), children: [_jsxs("div", { className: componentClassNames?.primary, children: [title ? (_jsx("h2", { className: componentClassNames?.title, children: href ? (_jsx(Link, { className: "hover:text-link", href: href, children: title })) : (title) })) : null, description ? (_jsx("div", { className: componentClassNames?.description, children: description })) : null, _jsx(ListItemMeta, { classNameProps: classNameProps, data: meta?.data, id: id })] }), tertiary ? (_jsx("div", { className: componentClassNames?.tertiary, children: tertiary })) : null, _jsx(ListItemSecondary, { classNameProps: classNameProps, classNames: classNames, data: secondary?.data, variant: variant })] }) }) }));
 }
 export default ListItem;

package/dist/components/collections/ListItemMeta/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { ListItemObject } from '../interfaces';
 export interface ListItemMetaClassNames {
     root: string;

package/dist/components/collections/ListItemMeta/index.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from 'react';
 import { filterNull } from '@sqrzro/utility';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
 function getKey(item) {
     if (isValidElement(item)) {
         return item.key || '-';
@@ -13,10 +12,10 @@ function getKey(item) {
     return String(item);
 }
 function ListItemMeta({ classNameProps, classNames, id, data, }) {
-    const componentClassNames = classNames || getClassNames('listItemMeta')?.(classNameProps);
+    const componentClassNames = getClassNames('listItemMeta', { props: classNameProps }, classNames);
     if (!data) {
         return null;
     }
-    return Array.isArray(data) ? (_jsx("ul", { className: tw(componentClassNames?.root), children: filterNull(data).map((item) => (_jsx("li", { className: "whitespace-nowrap", children: item }, getKey(item)))) })) : (_jsx("table", { className: "w-full", children: _jsx("tbody", { children: Object.entries(data).map(([key, value]) => (_jsxs("tr", { className: componentClassNames?.row, children: [_jsx("th", { className: componentClassNames?.title, children: key }), _jsx("td", { className: componentClassNames?.value, children: value || '-' })] }, key))) }) }));
+    return Array.isArray(data) ? (_jsx("ul", { className: componentClassNames?.root, children: filterNull(data).map((item) => (_jsx("li", { className: "whitespace-nowrap", children: item }, getKey(item)))) })) : (_jsx("table", { className: "w-full", children: _jsx("tbody", { children: Object.entries(data).map(([key, value]) => (_jsxs("tr", { className: componentClassNames?.row, children: [_jsx("th", { className: componentClassNames?.title, children: key }), _jsx("td", { className: componentClassNames?.value, children: value || '-' })] }, key))) }) }));
 }
 export default ListItemMeta;

package/dist/components/collections/ListItemSecondary/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { ListItemClassNames } from '../ListItem';
 import type { ListItemObject } from '../interfaces';
 export type ListItemSecondaryProps = ClassNameProps<ListItemClassNames> & ListItemObject['secondary'];

package/dist/components/collections/ListItemSecondary/index.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from 'react';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
 import ListItemMeta from '../ListItemMeta';
 function ListItemSecondary({ classNameProps, classNames, data, variant, }) {
-    const componentClassNames = classNames || getClassNames('listItem')?.(classNameProps);
+    const componentClassNames = getClassNames('listItem', { props: classNameProps }, classNames);
     if (!data) {
         return null;
     }
     if (isValidElement(data)) {
         return _jsx("div", { className: componentClassNames?.secondary, children: data });
     }
-    return (_jsxs("div", { className: componentClassNames?.secondary, children: [data.title ? (_jsx("p", { className: tw(componentClassNames?.title?.default, variant ? componentClassNames?.title?.[variant] : null), children: data.title })) : null, data.description ? (_jsx("div", { className: componentClassNames?.description, children: data.description })) : null, _jsx(ListItemMeta, { classNameProps: { ...classNameProps, isSecondary: true }, data: data.meta?.data, id: "secondary" })] }));
+    return (_jsxs("div", { className: componentClassNames?.secondary, children: [data.title ? _jsx("p", { className: componentClassNames?.title, children: data.title }) : null, data.description ? (_jsx("div", { className: componentClassNames?.description, children: data.description })) : null, _jsx(ListItemMeta, { classNameProps: { ...classNameProps, isSecondary: true }, data: data.meta?.data, id: "secondary" })] }));
 }
 export default ListItemSecondary;

package/dist/components/collections/Pagination/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, HighlightableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces';
 export interface PaginationClassNames {
     gap: string;
     item: string;

package/dist/components/collections/Pagination/index.js

@@ -1,17 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import usePagination from '../../../hooks/usePagination';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 import Link from '../../../components/utility/Link';
+import PaginationLink from '../PaginationLink';
 function Pagination({ classNames, classNameProps, gapLabel = '•••', limit, nextLabel, page, previousLabel, total, }) {
-    const componentClassNames = classNames || getClassNames('pagination')?.(classNameProps);
+    const componentClassNames = getClassNames('pagination', { props: classNameProps }, classNames);
     const { links, nextLink, pageCount, previousLink } = usePagination({ limit, page, total });
     if (pageCount <= 1) {
         return null;
     }
-    return (_jsxs("nav", { className: tw(componentClassNames?.root), children: [previousLabel ? (_jsx(Link, { className: tw(componentClassNames?.navigation, page <= 1 ? 'pointer-events-none opacity-30' : null), href: previousLink, children: previousLabel })) : null, _jsx("ul", { className: tw(componentClassNames?.list), children: links.map((link, index) => (_jsx("li", { className: componentClassNames?.item, children: link ? (_jsx(Link, { className: tw(componentClassNames?.link?.default, link.label === page.toString()
-                            ? componentClassNames?.link?.highlighted
-                            : null), href: link.href, children: link.label })) : (_jsx("span", { className: tw(componentClassNames?.gap), children: gapLabel })) }, index))) }), nextLabel ? (_jsx(Link, { className: tw(componentClassNames?.navigation, page >= pageCount ? 'pointer-events-none opacity-30' : null), href: nextLink, children: nextLabel })) : null] }));
+    return (_jsxs("nav", { className: componentClassNames?.root, children: [previousLabel ? (_jsx(Link, { className: tw(componentClassNames?.navigation, page <= 1 ? 'pointer-events-none opacity-30' : null), href: previousLink, children: previousLabel })) : null, _jsx("ul", { className: componentClassNames?.list, children: links.map((link, index) => (_jsx("li", { className: componentClassNames?.item, children: link ? (_jsx(PaginationLink, { ...link, isCurrent: link.label === page.toString() })) : (_jsx("span", { className: componentClassNames?.gap, children: gapLabel })) }, index))) }), nextLabel ? (_jsx(Link, { className: tw(componentClassNames?.navigation, page >= pageCount ? 'pointer-events-none opacity-30' : null), href: nextLink, children: nextLabel })) : null] }));
 }
 export default Pagination;

package/dist/components/collections/PaginationLink/index.d.ts

@@ -0,0 +1,9 @@
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { PaginationClassNames } from '../Pagination';
+interface PaginationLinkProps extends ClassNameProps<PaginationClassNames> {
+    href: string;
+    isCurrent: boolean;
+    label: string;
+}
+declare function PaginationLink({ classNameProps, classNames, href, isCurrent, label, }: PaginationLinkProps): React.ReactElement;
+export default PaginationLink;

package/dist/components/collections/PaginationLink/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Link from '../../../components/utility/Link';
+import { getClassNames } from '../../../styles/classnames';
+function PaginationLink({ classNameProps, classNames, href, isCurrent, label, }) {
+    const componentClassNames = getClassNames('pagination', { props: classNameProps, states: { isHighlighted: isCurrent } }, classNames);
+    return (_jsx(Link, { className: componentClassNames?.link, href: href, children: label }));
+}
+export default PaginationLink;

package/dist/components/collections/TableClientComponent/index.d.ts

@@ -1,4 +1,4 @@
-import { ClassNameProps, SelectableClassName } from '../../../styles/interfaces';
+import { ClassNameProps, SelectableClassName } from '../../../styles/classnames/interfaces';
 import type { TableColumnObject, TableItemObject } from '../interfaces';
 export interface TableClassNames {
     root: string;

package/dist/components/collections/TableClientComponent/index.js

@@ -2,15 +2,14 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { toggleArrayItem } from '@sqrzro/utility';
 import { useSearchParams } from 'next/navigation';
-import Switch from '../../../forms/components/Switch';
 import useSearchParamsHref from '../../../hooks/useSearchParamsHref';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
 import filterColumns from '../utility/filter-columns';
 import getSelectedFromSearchParams from '../utility/get-selected-from-search-params';
 import setSelectedToSearchParams from '../utility/set-selected-to-search-params';
+import TableRow from '../TableRow';
 function TableClientComponent({ classNameProps, classNames, columns, data, isSelectable, }) {
-    const componentClassNames = classNames || getClassNames('table')?.(classNameProps);
+    const componentClassNames = getClassNames('table', { props: classNameProps }, classNames);
     const { setSearchParamsHref } = useSearchParamsHref();
     const searchParams = useSearchParams();
     const filteredColumns = filterColumns(columns, isSelectable);
@@ -23,8 +22,6 @@ function TableClientComponent({ classNameProps, classNames, columns, data, isSel
         const value = selected.length === data.length ? [] : data.map((item) => item.id);
         setSearchParamsHref({ selected: setSelectedToSearchParams(value) });
     }
-    return (_jsx("div", { className: componentClassNames?.root, children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsx("tr", { children: filteredColumns.map((column) => (_jsx("th", { children: column.type === 'selectable' ? (_jsxs("button", { name: column.id, onClick: handleSelectAll, children: ["Select All ", selected.includes(column.id) ? '✓' : ''] })) : (column.title) }, column.id))) }) }), _jsx("tbody", { children: data.map((item) => (_jsx("tr", { className: tw(componentClassNames?.row?.default, selected.includes(item.id)
-                            ? componentClassNames?.row?.selected
-                            : null), children: filteredColumns.map((column) => (_jsx("td", { className: tw(componentClassNames?.cell, column.type === 'selectable' ? 'w-1' : null), children: column.type === 'selectable' ? (_jsx(Switch, { name: item.id, onChange: handleSelect, value: selected.includes(item.id) })) : (item[column.id]) }, column.id))) }, item.id))) })] }) }));
+    return (_jsx("div", { className: componentClassNames?.root, children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsx("tr", { children: filteredColumns.map((column) => (_jsx("th", { children: column.type === 'selectable' ? (_jsxs("button", { name: column.id, onClick: handleSelectAll, children: ["Select All ", selected.includes(column.id) ? '✓' : ''] })) : (column.title) }, column.id))) }) }), _jsx("tbody", { children: data.map((item) => (_jsx(TableRow, { columns: filteredColumns, data: item, isSelected: selected.includes(item.id), onSelect: handleSelect }, item.id))) })] }) }));
 }
 export default TableClientComponent;

package/dist/components/collections/TableRow/index.d.ts

@@ -0,0 +1,12 @@
+import type { InputEvent } from '../../../forms/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { TableClassNames } from '../TableClientComponent';
+import type { TableColumnObject, TableItemObject } from '../interfaces';
+interface TableRowProps extends ClassNameProps<TableClassNames> {
+    columns: TableColumnObject[];
+    data: TableItemObject;
+    isSelected: boolean;
+    onSelect: (event: InputEvent<boolean>) => void;
+}
+declare function TableRow({ classNameProps, classNames, columns, data, isSelected, onSelect, }: TableRowProps): React.ReactElement;
+export default TableRow;

package/dist/components/collections/TableRow/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Switch from '../../../forms/components/Switch';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
+function TableRow({ classNameProps, classNames, columns, data, isSelected, onSelect, }) {
+    const componentClassNames = getClassNames('table', { props: classNameProps, states: { isSelected } }, classNames);
+    return (_jsx("tr", { className: componentClassNames?.row, children: columns.map((column) => (_jsx("td", { className: tw(componentClassNames?.cell, column.type === 'selectable' ? 'w-1' : null), children: column.type === 'selectable' ? (_jsx(Switch, { name: data.id, onChange: onSelect, value: isSelected })) : (data[column.id]) }, column.id))) }));
+}
+export default TableRow;

package/dist/components/errors/AppError/index.d.ts

@@ -0,0 +1,19 @@
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { Action } from '../../../utility/interfaces';
+export interface AppErrorClassNames {
+    root: string;
+    panel: string;
+    title: string;
+    description: string;
+    action: string;
+}
+export interface AppErrorProps extends ClassNameProps<AppErrorClassNames> {
+    action?: Action;
+    description: React.ReactNode;
+    error: Error & {
+        digest?: string;
+    };
+    title: React.ReactNode;
+}
+declare function AppError({ action, classNameProps, classNames, description, error, title, }: Readonly<AppErrorProps>): React.ReactElement;
+export default AppError;

package/dist/components/errors/AppError/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ActionButton from '../../../components/buttons/ActionButton';
+import { getClassNames } from '../../../styles/classnames';
+function AppError({ action, classNameProps, classNames, description, error, title, }) {
+    const componentClassNames = getClassNames('appError', { props: classNameProps }, classNames);
+    return (_jsx("div", { className: componentClassNames?.root, children: _jsxs("section", { className: componentClassNames?.panel, children: [_jsx("h2", { className: componentClassNames?.title, children: title }), _jsxs("div", { className: componentClassNames?.description, children: [description, error?.digest ? _jsxs("small", { children: ["Error code: ", error.digest] }) : null] }), action ? (_jsx("footer", { className: componentClassNames?.action, children: _jsx(ActionButton, { ...action }) })) : null] }) }));
+}
+export default AppError;

package/dist/components/errors/AppForbiddenError/index.d.ts

@@ -0,0 +1,7 @@
+import type { AppErrorProps } from '../AppError';
+export interface AppForbiddenErrorProps extends Omit<AppErrorProps, 'action' | 'description' | 'title'> {
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+}
+declare function AppForbiddenError({ description, title, ...props }: AppForbiddenErrorProps): React.ReactElement;
+export default AppForbiddenError;

package/dist/components/errors/AppForbiddenError/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AppError from '../AppError';
+function AppForbiddenError({ description = 'You do not have permission to access this resource. If you think this is a mistake, please contact your site administrator.', title = 'Forbidden', ...props }) {
+    return (_jsx(AppError, { ...props, action: { href: '/', label: 'Go to Homepage' }, description: description, title: title }));
+}
+export default AppForbiddenError;

package/dist/components/errors/AppNotFoundError/index.d.ts

@@ -0,0 +1,7 @@
+import type { AppErrorProps } from '../AppError';
+export interface AppNotFoundErrorProps extends Omit<AppErrorProps, 'action' | 'description' | 'title'> {
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+}
+declare function AppNotFoundError({ description, title, ...props }: AppNotFoundErrorProps): React.ReactElement;
+export default AppNotFoundError;

package/dist/components/errors/AppNotFoundError/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AppError from '../AppError';
+function AppNotFoundError({ description = 'The requested resource could not be found. This might be because it has been moved or deleted. If you think this is a mistake, please contact your site administrator.', title = 'Not Found', ...props }) {
+    return (_jsx(AppError, { ...props, action: { href: '/', label: 'Go to Homepage' }, description: description, title: title }));
+}
+export default AppNotFoundError;

package/dist/components/errors/AppServerError/index.d.ts

@@ -0,0 +1,8 @@
+import type { AppErrorProps } from '../AppError';
+interface AppServerErrorProps extends Omit<AppErrorProps, 'action' | 'description' | 'title'> {
+    description?: React.ReactNode;
+    reset: () => void;
+    title?: React.ReactNode;
+}
+declare function AppServerError({ description, reset, title, ...props }: AppServerErrorProps): React.ReactElement;
+export default AppServerError;

package/dist/components/errors/AppServerError/index.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import AppError from '../AppError';
+const WAIT_TIME = 500;
+function AppServerError({ description = 'The server encountered an error and could not complete your request. If the problem persists, please contact your site administrator.', reset, title = 'Something Went Wrong', ...props }) {
+    const [isResetting, setIsResetting] = useState(false);
+    function handleReset() {
+        setIsResetting(true);
+        setTimeout(() => {
+            reset();
+            setIsResetting(false);
+        }, WAIT_TIME);
+    }
+    return (_jsx(AppError, { ...props, action: { isDisabled: isResetting, onClick: handleReset, label: 'Try Again' }, description: description, title: title }));
+}
+export default AppServerError;

package/dist/components/index.d.ts

@@ -9,6 +9,12 @@ export type { ListProps } from './collections/List';
 export { default as List } from './collections/List';
 export type { TableProps } from './collections/Table';
 export { default as Table } from './collections/Table';
+export type { AppErrorProps } from './errors/AppError';
+export { default as AppError } from './errors/AppError';
+export type { AppForbiddenErrorProps } from './errors/AppForbiddenError';
+export { default as AppForbiddenError } from './errors/AppForbiddenError';
+export type { AppNotFoundErrorProps } from './errors/AppNotFoundError';
+export { default as AppNotFoundError } from './errors/AppNotFoundError';
 export type { ConfirmModalProps } from './modals/ConfirmModal';
 export { default as ConfirmModal } from './modals/ConfirmModal';
 export type { ModalProps } from './modals/Modal';

package/dist/components/index.js

@@ -4,6 +4,9 @@ export { default as Button } from './buttons/Button';
 export { default as DataTable } from './collections/DataTable';
 export { default as List } from './collections/List';
 export { default as Table } from './collections/Table';
+export { default as AppError } from './errors/AppError';
+export { default as AppForbiddenError } from './errors/AppForbiddenError';
+export { default as AppNotFoundError } from './errors/AppNotFoundError';
 export { default as ConfirmModal } from './modals/ConfirmModal';
 export { default as Modal } from './modals/Modal';
 export { default as ModalLauncher } from './modals/ModalLauncher';

package/dist/components/modals/Modal/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import { Action } from '../../../utility/interfaces';
 export interface ModalClassNames {
     actions: string;

package/dist/components/modals/Modal/index.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 import ModalActions from '../ModalActions';
 function Modal({ actions, children, classNames, classNameProps, icon, isLoading, title, }) {
-    const componentClassNames = classNames || getClassNames('modal')?.(classNameProps);
+    const componentClassNames = getClassNames('modal', { props: classNameProps }, classNames);
     const ref = useRef(null);
     useEffect(() => {
         if (ref.current) {

package/dist/components/modals/ModalActions/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import { Action } from '../../../utility/interfaces';
 import type { ModalClassNames } from '../Modal';
 export interface ModalActionsProps extends ClassNameProps<ModalClassNames> {

package/dist/components/modals/ModalActions/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ActionList from '../../../components/utility/ActionList';
-import { getClassNames } from '../../../styles/config';
+import { getClassNames } from '../../../styles/classnames';
 function ModalActions({ actions, classNameProps, classNames, isLoading, }) {
-    const componentClassNames = classNames || getClassNames('modal')?.(classNameProps);
-    return (_jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: actions, classNameProps: { ...(classNameProps || {}), isModal: true }, isLoading: isLoading }) }));
+    const componentClassNames = getClassNames('modal', { props: classNameProps }, classNames);
+    return (_jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: actions, classNameProps: { ...classNameProps, isModal: true }, isLoading: isLoading }) }));
 }
 export default ModalActions;

package/dist/components/utility/ActionList/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import { Action } from '../../../utility/interfaces';
 export interface ActionListClassNames {
     root: string;

package/dist/components/utility/ActionList/index.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { filterNull } from '@sqrzro/utility';
 import ActionButton from '../../../components/buttons/ActionButton';
-import { getClassNames } from '../../../styles/config';
+import { getClassNames } from '../../../styles/classnames';
 function ActionList({ actions, classNameProps, classNames, isLoading, }) {
-    const componentClassNames = classNames || getClassNames('actionList')?.(classNameProps);
+    const componentClassNames = getClassNames('actionList', { props: classNameProps }, classNames);
     return (_jsx("ul", { className: componentClassNames?.root, children: filterNull(actions).map((action, index) => (_jsx("li", { className: componentClassNames?.item, children: _jsx(ActionButton, { ...action, isLoading: Boolean(isLoading || action.isDisabled) }) }, index))) }));
 }
 export default ActionList;

package/dist/components/utility/ClassNamesClientComponent/index.d.ts

@@ -0,0 +1,6 @@
+import type { RegisteredClassNames } from '../../../styles/classnames/config';
+export interface ClassNamesClientComponentProps {
+    data: RegisteredClassNames;
+}
+declare function ClassNamesClientComponent({ data }: ClassNamesClientComponentProps): null;
+export default ClassNamesClientComponent;

package/dist/components/utility/ClassNamesClientComponent/index.js

@@ -0,0 +1,7 @@
+'use client';
+import { registerClassNames } from '../../../styles/classnames';
+function ClassNamesClientComponent({ data }) {
+    registerClassNames(data);
+    return null;
+}
+export default ClassNamesClientComponent;

package/dist/components/utility/Container/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 export interface ContainerClassNames {
     root: string;
 }

package/dist/components/utility/Container/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
+import { getClassNames } from '../../../styles/classnames';
 function Container({ children, classNameProps, classNames, }) {
-    const componentClassNames = classNames || getClassNames('container')?.(classNameProps);
+    const componentClassNames = getClassNames('container', { props: classNameProps }, classNames);
     return _jsx("div", { className: componentClassNames?.root, children: children });
 }
 export default Container;

package/dist/components/utility/Link/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 interface DataProps {
     'data-test-id'?: string;
 }

package/dist/components/utility/Link/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import NextLink from 'next/link';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 function normalizeHref(href) {
     if (!href) {
         return '';
@@ -12,7 +12,7 @@ function normalizeHref(href) {
     return /^\//u.exec(href) ? href : `/${href}`;
 }
 function Link({ children, className, classNames, classNameProps, isNewWindow, href = '/', id, onClick, scroll, style, ...dataProps }) {
-    const componentClassNames = classNames || getClassNames('link')?.(classNameProps);
+    const componentClassNames = getClassNames('link', { props: classNameProps }, classNames);
     const newWindowProps = isNewWindow
         ? { rel: 'noopener noreferrer', target: '_blank' }
         : {};

package/dist/components/utility/Loader/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, SizableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, SizableClassName } from '../../../styles/classnames/interfaces';
 export interface LoaderClassNames {
     root?: SizableClassName;
     inner?: SizableClassName;

package/dist/components/utility/Loader/index.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 import Assistive from '../Assistive';
 function Loader({ classNameProps, classNames }) {
-    const componentClassNames = classNames || getClassNames('loader')?.(classNameProps);
-    return (_jsxs("div", { className: tw(componentClassNames?.root?.default), children: [_jsx("div", { className: tw(componentClassNames?.inner?.default) }), _jsx(Assistive, { children: "Loading..." })] }));
+    const componentClassNames = getClassNames('loader', { props: classNameProps }, classNames);
+    return (_jsxs("div", { className: tw(componentClassNames?.root), children: [_jsx("div", { className: tw(componentClassNames?.inner) }), _jsx(Assistive, { children: "Loading..." })] }));
 }
 export default Loader;

package/dist/components/utility/Popover/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, FocusableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, FocusableClassName } from '../../../styles/classnames/interfaces';
 export interface PopoverClassNames {
     root: FocusableClassName;
     scroll: string;