@sqrzro/ui 4.0.0-alpha.38 → 4.0.0-alpha.39

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

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { useClassNames } from '../../../styles/classnames/context';
-import applyVariants from '../../../styles/classnames/apply-variants';
-import tw from '../../../styles/classnames/tw';
+import { useClassNames } from '../../../styles/context';
+import applyVariants from '../../../styles/classnames/utility/apply-variants';
+import tw from '../../../styles/classnames/utility/tw';
 import Link from '../../elements/Link';
 /**
  * Either a `Link` component or a `button` element, depending on whether a `href` prop is specified.

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

@@ -5,13 +5,11 @@ import FilterBar from '../../../filters/components/FilterBar';
 import checkHasFilters from '../../../filters/utility/check-has-filters';
 import parseFilters from '../../../filters/utility/parse-filters';
 import parsePage from '../../../filters/utility/parse-page';
-import { getIcon } from '../../../styles/icons';
 import EmptyMessage from '../EmptyMessage';
 import Pagination from '../Pagination';
 import isPaginated from '../utility/is-paginated';
 import { messages } from '../lang';
 async function CollectionComponent({ data, defaultFilters, emptyMessageProps, filterMap, fn, pageProps, render, transformer, }) {
-    const EmptyIcon = getIcon('collection.empty');
     const awaitedParams = pageProps?.params ? await pageProps.params : null;
     const awaitedSearchParams = pageProps?.searchParams ? await pageProps.searchParams : null;
     async function getResponse() {
@@ -34,7 +32,6 @@ async function CollectionComponent({ data, defaultFilters, emptyMessageProps, fi
     const componentEmptyMessageProps = checkHasFilters(awaitedSearchParams)
         ? {
             children: messages.EMPTY_FILTER_DESCRIPTION,
-            icon: EmptyIcon ? _jsx(EmptyIcon, {}) : null,
             title: messages.EMPTY_FILTER_TITLE,
         }
         : emptyMessageProps;

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

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { filterNull } from '@sqrzro/utility';
-import { useClassNames } from '../../../styles/classnames/context';
-import tw from '../../../styles/classnames/tw';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 function DataTable({ classNameProps, classNames, data, }) {
     const componentClassNames = useClassNames('dataTable', { props: classNameProps }, classNames);
     const filtered = filterNull(data);

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

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/classnames/context';
+import { useClassNames, useIcon } from '../../../styles/context';
+import applyVariants from '../../../styles/classnames/utility/apply-variants';
 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.';
@@ -10,7 +11,9 @@ 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 = useClassNames('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] }));
+    const componentClassNames = useClassNames('emptyMessage', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
+    const DefaultIcon = useIcon('collection.empty');
+    const iconComponent = icon ?? (DefaultIcon ? _jsx(DefaultIcon, {}) : null);
+    return (_jsxs("section", { className: componentClassNames?.root, children: [iconComponent ? (_jsx("div", { className: componentClassNames?.icon, children: iconComponent })) : 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/ListClientComponent/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import useSelected from '../../../hooks/useSelected';
-import { useClassNames } from '../../../styles/classnames/context';
+import { useClassNames } from '../../../styles/context';
 import ListItem from '../ListItem';
 function ListClientComponent({ classNameProps, classNames, data, }) {
     const componentClassNames = useClassNames('list', { props: classNameProps }, classNames);

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

@@ -1,25 +1,20 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { filterNull, joinURL } from '@sqrzro/utility';
+import { filterNull } from '@sqrzro/utility';
+import { usePathname } from 'next/navigation';
 import Switch from '../../../forms/components/Switch';
-import { useClassNames } from '../../../styles/classnames/context';
-import tw from '../../../styles/classnames/tw';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 import Link from '../../elements/Link';
+import normalizeHref from '../utility/normalize-href';
 import ListItemSecondary from '../ListItemSecondary';
 import ListItemMeta from '../ListItemMeta';
 import ListItemMenu from '../ListItemMenu';
-import { usePathname } from 'next/navigation';
-function normalizeHref(href, pathname) {
-    if (href.startsWith('./')) {
-        return joinURL(pathname, href.slice(2));
-    }
-    return joinURL(href);
-}
 function ListItem({ classNameProps, classNames, data, hasActions, isSelected, onSelect, }) {
     const pathname = usePathname();
     const componentClassNames = useClassNames('listItem', { props: { ...classNameProps, isSelected } }, classNames);
     const filteredActions = filterNull(data.actions || []);
     //filteredActions.length ? 'grid-cols-[1fr_auto] gap-4' : 'grid-cols-1'
-    return (_jsx("li", { className: tw('relative grid', componentClassNames?.root), children: _jsx("article", { className: "contents", children: _jsxs("div", { className: "grid gap-6 has-[:nth-child(2)]:grid-cols-[max-content_auto]", children: [data.isSelectable ? (_jsx("div", { className: componentClassNames?.select, children: _jsx(Switch, { name: data.id, onChange: onSelect, value: isSelected }) })) : null, _jsxs("div", { className: "grid gap-6 has-[:nth-child(2)]:grid-cols-[auto_max-content]", children: [_jsxs("div", { className: 'grid gap-6 has-[:nth-child(2)]:grid-cols-[1fr_1fr] has-[:nth-child(3)]:grid-cols-[2fr_1fr_1fr]', children: [_jsxs("div", { className: componentClassNames?.primary, children: [data.title ? (_jsx("h2", { className: componentClassNames?.title, children: data.href ? (_jsx(Link, { className: "hover:text-link", href: normalizeHref(data.href, pathname), children: data.title })) : (data.title) })) : null, data.description ? (_jsx("div", { className: componentClassNames?.description, children: data.description })) : null, _jsx(ListItemMeta, { classNameProps: classNameProps, data: data.meta })] }), data.tertiary ? (_jsx("div", { className: componentClassNames?.tertiary, children: data.tertiary })) : null, _jsx(ListItemSecondary, { classNameProps: classNameProps, classNames: classNames, data: data.secondary })] }), hasActions ? (_jsx("div", { className: componentClassNames?.actions, children: _jsx(ListItemMenu, { actions: filteredActions, data: data.$data, isDisabled: !filteredActions.length }) })) : null] })] }) }) }));
+    return (_jsx("li", { className: tw('relative grid', componentClassNames?.root), children: _jsx("article", { className: "contents", children: _jsxs("div", { className: "grid gap-6 has-[>:nth-child(2)]:grid-cols-[max-content_auto]", children: [data.isSelectable ? (_jsx("div", { className: componentClassNames?.select, children: _jsx(Switch, { name: data.id, onChange: onSelect, value: isSelected }) })) : null, _jsxs("div", { className: "grid gap-6 has-[>:nth-child(2)]:grid-cols-[auto_max-content]", children: [_jsxs("div", { className: 'grid grid-cols-1 gap-6 has-[>:nth-child(2)]:grid-cols-[1fr_1fr] has-[>:nth-child(3)]:grid-cols-[2fr_1fr_1fr]', children: [_jsxs("div", { className: componentClassNames?.primary, children: [data.title ? (_jsx("h2", { className: componentClassNames?.title, children: data.href ? (_jsx(Link, { className: "hover:text-link", href: normalizeHref(data.href, pathname), children: data.title })) : (data.title) })) : null, data.description ? (_jsx("div", { className: componentClassNames?.description, children: data.description })) : null, _jsx(ListItemMeta, { classNameProps: classNameProps, data: data.meta })] }), data.tertiary ? (_jsx("div", { className: componentClassNames?.tertiary, children: data.tertiary })) : null, _jsx(ListItemSecondary, { classNameProps: classNameProps, classNames: classNames, data: data.secondary })] }), hasActions ? (_jsx("div", { className: componentClassNames?.actions, children: _jsx(ListItemMenu, { actions: filteredActions, data: data.$data, isDisabled: !filteredActions.length }) })) : null] })] }) }) }));
 }
 export default ListItem;

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isValidElement } from 'react';
 import { filterNull } from '@sqrzro/utility';
-import { useClassNames } from '../../../styles/classnames/context';
+import { useClassNames } from '../../../styles/context';
 import isDataTableArray from '../../../utility/is-data-object-array';
 import DataTable from '../DataTable';
 function getKey(item) {

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from 'react';
-import { useClassNames } from '../../../styles/classnames/context';
+import { useClassNames } from '../../../styles/context';
 import ListItemMeta from '../ListItemMeta';
 function ListItemSecondary({ classNameProps, classNames, data, }) {
     const componentClassNames = useClassNames('listItem', { props: classNameProps }, classNames);

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

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import usePagination from '../../../hooks/usePagination';
-import { useClassNames } from '../../../styles/classnames/context';
-import tw from '../../../styles/classnames/tw';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 import Link from '../../elements/Link';
 import PaginationLink from '../PaginationLink';
 function Pagination({ classNames, classNameProps, gapLabel = '•••', limit, nextLabel, page, previousLabel, total, }) {

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/classnames/context';
+import { useClassNames } from '../../../styles/context';
 import Link from '../../elements/Link';
 function PaginationLink({ classNameProps, classNames, href, isCurrent, label, }) {
     const componentClassNames = useClassNames('pagination', { props: classNameProps, states: { isHighlighted: isCurrent } }, classNames);

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

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useSelected from '../../../hooks/useSelected';
-import { useClassNames } from '../../../styles/classnames/context';
-import tw from '../../../styles/classnames/tw';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 import isRightAligned from '../utility/is-right-aligned';
 import TableRow from '../TableRow';
 import Switch from '../../../forms/components/Switch';

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

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { filterNull } from '@sqrzro/utility';
 import Switch from '../../../forms/components/Switch';
-import { useClassNames } from '../../../styles/classnames/context';
-import tw from '../../../styles/classnames/tw';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 import isRightAligned from '../utility/is-right-aligned';
 import renderCell from '../utility/render-cell';
 import ListItemMenu from '../ListItemMenu';

package/dist/components/collections/utility/normalize-href.d.ts

@@ -0,0 +1,2 @@
+declare function normalizeHref(href: string, pathname: string): string;
+export default normalizeHref;

package/dist/components/collections/utility/normalize-href.js

@@ -0,0 +1,8 @@
+import { joinURL } from '@sqrzro/utility';
+function normalizeHref(href, pathname) {
+    if (href.startsWith('./')) {
+        return joinURL(pathname, href.slice(2));
+    }
+    return joinURL(href);
+}
+export default normalizeHref;

package/dist/components/collections/utility/render-cell.js

@@ -1,19 +1,22 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { formatDate, formatDatetime, formatMoney, formatPoints, formatTime } from '@sqrzro/utility';
+import { usePathname } from 'next/navigation';
 import Link from '../../../components/elements/Link';
 import Reference from '../../../components/elements/Reference';
+import normalizeHref from './normalize-href';
 function renderDefault(value) {
     return value;
 }
-function renderLink(value) {
+function renderLink(value, pathname) {
     const match = value.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
-    return match ? _jsx(Link, { href: match[2], children: match[1] }) : value;
+    return match ? _jsx(Link, { href: normalizeHref(match[2], pathname), children: match[1] }) : value;
 }
 const renderers = {
     date: (value) => formatDate(value),
     datetime: (value) => formatDatetime(value),
     decimal: (value) => value.toFixed(2),
-    link: (value) => renderLink(value),
+    link: (value, pathname) => renderLink(value, pathname),
     money: (value) => formatMoney(value),
     number: (value) => renderDefault(value),
     percentage: (value) => `${value.toFixed(2)}%`,
@@ -24,6 +27,7 @@ const renderers = {
     time: (value) => formatTime(value),
 };
 function renderCell(column, value) {
-    return renderers[column.type](value);
+    const pathname = usePathname();
+    return renderers[column.type](value, pathname);
 }
 export default renderCell;

package/dist/components/elements/Badge/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/classnames/context';
-import applyVariants from '../../../styles/classnames/apply-variants';
+import { useClassNames } from '../../../styles/context';
+import applyVariants from '../../../styles/classnames/utility/apply-variants';
 function Badge({ classNameProps, classNames, children, variant }) {
     const componentClassNames = useClassNames('badge', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
     return (_jsxs("strong", { className: componentClassNames?.root, children: [_jsx("svg", { "aria-hidden": "true", className: componentClassNames?.dot, viewBox: "0 0 6 6", children: _jsx("circle", { cx: "3", cy: "3", r: "3" }) }), children] }));

package/dist/components/elements/InfoPanel/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/classnames/context';
-import applyVariants from '../../../styles/classnames/apply-variants';
+import { useClassNames } from '../../../styles/context';
+import applyVariants from '../../../styles/classnames/utility/apply-variants';
 function InfoPanel({ classNameProps, classNames, children, variant, }) {
     const componentClassNames = useClassNames('infoPanel', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
     return _jsx("aside", { className: componentClassNames?.root, children: children });

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

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { joinURL } from '@sqrzro/utility';
 import NextLink from 'next/link';
-import { useClassNames } from '../../../styles/classnames/context';
-import tw from '../../../styles/classnames/tw';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 function normalizeHref(href) {
     if (href.startsWith('#')) {
         return href;

package/dist/components/elements/Menu/index.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { filterNull } from '@sqrzro/utility';
 import Button from '../../../components/buttons/Button';
-import { useClassNames } from '../../../styles/classnames/context';
-import tw from '../../../styles/classnames/tw';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 import Action from '../../utility/Action';
 import Popover from '../../utility/Popover';
 import MenuItem from '../MenuItem';

package/dist/components/elements/MenuItem/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/classnames/context';
+import { useClassNames } from '../../../styles/context';
 import Link from '../Link';
 function MenuItem({ children, classNameProps, classNames, href, isLoading, onClick, }) {
     const componentClassNames = useClassNames('menu', { props: classNameProps }, classNames);

package/dist/components/elements/Reference/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { joinURL } from '@sqrzro/utility';
-import { useClassNames } from '../../../styles/classnames/context';
+import { useClassNames } from '../../../styles/context';
 import Link from '../Link';
 function Reference({ classNameProps, classNames, id, name, path, reference, }) {
     const componentClassNames = useClassNames('reference', { props: classNameProps }, classNames);

package/dist/components/elements/Summary/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { filterNull } from '@sqrzro/utility';
-import { useClassNames } from '../../../styles/classnames/context';
-import tw from '../../../styles/classnames/tw';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 const colMap = {
     1: 'grid-cols-1',
     2: 'grid-cols-2',

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ActionButton from '../../../components/buttons/ActionButton';
-import { useClassNames } from '../../../styles/classnames/context';
+import { useClassNames } from '../../../styles/context';
 function AppError({ action, classNameProps, classNames, description, error, title, }) {
     const componentClassNames = useClassNames('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] }) }));

package/dist/components/index.d.ts

@@ -1,6 +1,8 @@
 export * from './collections/interfaces';
 export type { ActionButtonProps } from './buttons/ActionButton';
 export { default as ActionButton } from './buttons/ActionButton';
+export type { AppBodyProps } from './utility/AppBody';
+export { default as AppBody } from './utility/AppBody';
 export type { ButtonProps } from './buttons/Button';
 export { default as Button } from './buttons/Button';
 export type { DataTableProps } from './collections/DataTable';
@@ -29,7 +31,6 @@ 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 { default as GlobalError } from './errors/GlobalError';
 export type { MailProps } from './mail/Mail';
 export { default as Mail } from './mail/Mail';
 export type { MailBlockProps } from './mail/MailBlock';
@@ -46,5 +47,3 @@ export type { ContainerProps } from './utility/Container';
 export { default as Container } from './utility/Container';
 export type { PopoverProps } from './utility/Popover';
 export { default as Popover } from './utility/Popover';
-export type { RootLayoutProps } from './utility/RootLayout';
-export { default as RootLayout } from './utility/RootLayout';

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export * from './collections/interfaces';
 export { default as ActionButton } from './buttons/ActionButton';
+export { default as AppBody } from './utility/AppBody';
 export { default as Button } from './buttons/Button';
 export { default as DataTable } from './collections/DataTable';
 export { default as List } from './collections/List';
@@ -14,7 +15,6 @@ export { default as Summary } from './elements/Summary';
 export { default as AppError } from './errors/AppError';
 export { default as AppForbiddenError } from './errors/AppForbiddenError';
 export { default as AppNotFoundError } from './errors/AppNotFoundError';
-export { default as GlobalError } from './errors/GlobalError';
 export { default as Mail } from './mail/Mail';
 export { default as MailBlock } from './mail/MailBlock';
 export { default as MailButton } from './mail/MailButton';
@@ -23,4 +23,3 @@ export { default as Modal } from './modals/Modal';
 export { default as ModalLauncher } from './modals/ModalLauncher';
 export { default as Container } from './utility/Container';
 export { default as Popover } from './utility/Popover';
-export { default as RootLayout } from './utility/RootLayout';

package/dist/components/mail/Mail/index.d.ts

@@ -1,18 +1,7 @@
-interface MailColors {
-    bg: string;
-    panel: string;
-}
-interface MailSizes {
-    panel: number;
-}
-export interface MailProps {
+import type { AppConfig } from '@sqrzro/config';
+export type MailProps = AppConfig['mail'] & {
     children: React.ReactNode;
-    logoURL?: string;
-    styles?: Partial<{
-        colors: Partial<MailColors>;
-        sizes: Partial<MailSizes>;
-    }>;
     title: string;
-}
-declare function Mail({ children, logoURL, styles, title }: Readonly<MailProps>): React.ReactElement;
+};
+declare function Mail({ children, logo, styles, title, }: Readonly<MailProps>): Promise<React.ReactElement>;
 export default Mail;

package/dist/components/mail/Mail/index.js

@@ -1,19 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_COLOURS = {
-    bg: '#f5f5f5',
-    panel: '#ffffff',
-};
-const DEFAULT_SIZES = {
-    panel: 40,
+/* eslint-disable max-lines-per-function, react/jsx-max-depth, react/no-danger */
+import { Fragment } from 'react';
+import { getAppConfig } from '@sqrzro/config';
+import { deepMerge } from '@sqrzro/utility';
+const DEFAULT_STYLES = {
+    styles: {
+        root: {
+            backgroundColor: '#f5f5f5',
+        },
+        panel: {
+            backgroundColor: '#ffffff',
+            padding: 40,
+        },
+        title: {
+            color: '#62748e',
+            fontSize: 20,
+            fontWeight: 'bold',
+        },
+    },
 };
 const HALF = 2;
-function Mail({ children, logoURL, styles, title }) {
-    const colors = { ...DEFAULT_COLOURS, ...styles?.colors };
-    const sizes = { ...DEFAULT_SIZES, ...styles?.sizes };
+async function Mail({ children, logo, styles, title, }) {
+    const styleConfig = deepMerge(DEFAULT_STYLES?.styles || {}, getAppConfig().mail?.styles || {}, styles || {});
+    const logoData = await (await import('../../../utility/convert-to-datauri')).default(logo ?? getAppConfig().mail?.logo ?? '');
     return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("style", { dangerouslySetInnerHTML: {
                             __html: `
                         body {
-                            color: #414552 !important;
+                            color: #0f172b !important;
                             font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', 'Helvetica', sans-serif;
                             font-size: 16px;
                             font-weight:400;  
@@ -35,42 +48,66 @@ function Mail({ children, logoURL, styles, title }) {
                             }
                         }
                     `,
-                        } })] }), _jsx("body", { children: _jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, width: "100%", children: _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("td", { className: "padding", colSpan: 3, height: "20", style: { backgroundColor: colors.bg } }) }), _jsxs("tr", { children: [_jsx("td", { className: "padding", style: { backgroundColor: colors.bg }, width: "20" }), _jsx("td", { align: "center", style: { backgroundColor: colors.bg }, children: _jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, className: "container", width: "650", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "padding", height: "20", style: { backgroundColor: colors.panel }, width: "20", children: _jsx("div", { className: "padding", style: {
-                                                                        backgroundColor: colors.bg,
-                                                                        height: sizes.panel,
-                                                                        width: sizes.panel,
+                        } })] }), _jsx("body", { children: _jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, width: "100%", children: _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("td", { className: "padding", colSpan: 3, height: "20", style: { backgroundColor: styleConfig.root.backgroundColor } }) }), _jsxs("tr", { children: [_jsx("td", { className: "padding", style: { backgroundColor: styleConfig.root.backgroundColor }, width: "20" }), _jsx("td", { align: "center", style: { backgroundColor: styleConfig.root.backgroundColor }, children: _jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, className: "container", width: "650", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "padding", height: "20", style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: "20", children: _jsx("div", { className: "padding", style: {
+                                                                        backgroundColor: styleConfig.root.backgroundColor,
+                                                                        height: styleConfig.panel.padding,
+                                                                        width: styleConfig.panel.padding,
                                                                     }, children: _jsx("div", { className: "padding", style: {
-                                                                            backgroundColor: colors.panel,
-                                                                            borderTopLeftRadius: sizes.panel / HALF,
-                                                                            height: sizes.panel,
-                                                                            width: sizes.panel,
-                                                                        } }) }) }), _jsx("td", { className: "container", style: { backgroundColor: colors.panel }, width: "610" }), _jsx("td", { className: "padding", height: sizes.panel, style: { backgroundColor: colors.panel }, width: sizes.panel, children: _jsx("div", { className: "padding", style: {
-                                                                        backgroundColor: colors.bg,
-                                                                        height: sizes.panel,
-                                                                        width: sizes.panel,
+                                                                            backgroundColor: styleConfig.panel.backgroundColor,
+                                                                            borderTopLeftRadius: styleConfig.panel.padding / HALF,
+                                                                            height: styleConfig.panel.padding,
+                                                                            width: styleConfig.panel.padding,
+                                                                        } }) }) }), _jsx("td", { className: "container", style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: "610" }), _jsx("td", { className: "padding", height: styleConfig.panel.padding, style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: styleConfig.panel.padding, children: _jsx("div", { className: "padding", style: {
+                                                                        backgroundColor: styleConfig.root.backgroundColor,
+                                                                        height: styleConfig.panel.padding,
+                                                                        width: styleConfig.panel.padding,
                                                                     }, children: _jsx("div", { className: "padding", style: {
-                                                                            backgroundColor: colors.panel,
-                                                                            borderTopRightRadius: sizes.panel / HALF,
-                                                                            height: sizes.panel,
-                                                                            width: sizes.panel,
-                                                                        } }) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "padding", style: { backgroundColor: colors.panel }, width: sizes.panel }), _jsx("td", { style: { backgroundColor: colors.panel }, children: _jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, width: "100%", children: _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("td", { children: _jsx("img", { alt: title, src: logoURL }) }) }), _jsx("tr", { children: _jsx("td", { height: sizes.panel }) }), _jsx("tr", { children: _jsx("td", { children: children }) })] }) }) }), _jsx("td", { className: "padding", style: { backgroundColor: colors.panel }, width: sizes.panel })] }), _jsxs("tr", { children: [_jsx("td", { className: "padding", height: sizes.panel, style: { backgroundColor: colors.panel }, width: sizes.panel, children: _jsx("div", { className: "padding", style: {
-                                                                        backgroundColor: colors.bg,
-                                                                        height: sizes.panel,
-                                                                        width: sizes.panel,
+                                                                            backgroundColor: styleConfig.panel.backgroundColor,
+                                                                            borderTopRightRadius: styleConfig.panel.padding / HALF,
+                                                                            height: styleConfig.panel.padding,
+                                                                            width: styleConfig.panel.padding,
+                                                                        } }) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "padding", style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: styleConfig.panel.padding }), _jsx("td", { style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, children: _jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, width: "100%", children: _jsxs("tbody", { children: [logoData ? (_jsxs(Fragment, { children: [_jsx("tr", { children: _jsx("td", { children: _jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, width: 240, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { children: _jsx("img", { alt: "Logo", src: logoData, width: 240 }) }) }) }) }) }) }), _jsx("tr", { children: _jsx("td", { height: styleConfig.panel
+                                                                                                .padding }) })] })) : null, _jsx("tr", { children: _jsx("td", { style: {
+                                                                                        color: styleConfig.title.color,
+                                                                                        fontSize: styleConfig.title.fontSize,
+                                                                                        fontWeight: styleConfig.title
+                                                                                            .fontWeight,
+                                                                                    }, children: title }) }), _jsx("tr", { children: _jsx("td", { height: styleConfig.panel.padding }) }), _jsx("tr", { children: _jsx("td", { children: children }) })] }) }) }), _jsx("td", { className: "padding", style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: styleConfig.panel.padding })] }), _jsxs("tr", { children: [_jsx("td", { className: "padding", height: styleConfig.panel.padding, style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: styleConfig.panel.padding, children: _jsx("div", { className: "padding", style: {
+                                                                        backgroundColor: styleConfig.root.backgroundColor,
+                                                                        height: styleConfig.panel.padding,
+                                                                        width: styleConfig.panel.padding,
                                                                     }, children: _jsx("div", { className: "padding", style: {
-                                                                            backgroundColor: colors.panel,
-                                                                            borderBottomLeftRadius: sizes.panel / HALF,
-                                                                            height: sizes.panel,
-                                                                            width: sizes.panel,
-                                                                        } }) }) }), _jsx("td", { className: "container", style: { backgroundColor: colors.panel }, width: "610" }), _jsx("td", { className: "padding", height: sizes.panel, style: { backgroundColor: colors.panel }, width: sizes.panel, children: _jsx("div", { className: "padding", style: {
-                                                                        backgroundColor: colors.bg,
-                                                                        height: sizes.panel,
-                                                                        width: sizes.panel,
+                                                                            backgroundColor: styleConfig.panel.backgroundColor,
+                                                                            borderBottomLeftRadius: styleConfig.panel.padding / HALF,
+                                                                            height: styleConfig.panel.padding,
+                                                                            width: styleConfig.panel.padding,
+                                                                        } }) }) }), _jsx("td", { className: "container", style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: "610" }), _jsx("td", { className: "padding", height: styleConfig.panel.padding, style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: styleConfig.panel.padding, children: _jsx("div", { className: "padding", style: {
+                                                                        backgroundColor: styleConfig.root.backgroundColor,
+                                                                        height: styleConfig.panel.padding,
+                                                                        width: styleConfig.panel.padding,
                                                                     }, children: _jsx("div", { className: "padding", style: {
-                                                                            backgroundColor: colors.panel,
-                                                                            borderBottomRightRadius: sizes.panel / HALF,
-                                                                            height: sizes.panel,
-                                                                            width: sizes.panel,
-                                                                        } }) }) })] })] }) }) }), _jsx("td", { className: "padding", style: { backgroundColor: colors.bg }, width: "20" })] }), _jsx("tr", { children: _jsx("td", { className: "padding", colSpan: 3, height: "20", style: { backgroundColor: colors.bg } }) })] }) }) })] }));
+                                                                            backgroundColor: styleConfig.panel.backgroundColor,
+                                                                            borderBottomRightRadius: styleConfig.panel.padding / HALF,
+                                                                            height: styleConfig.panel.padding,
+                                                                            width: styleConfig.panel.padding,
+                                                                        } }) }) })] })] }) }) }), _jsx("td", { className: "padding", style: { backgroundColor: styleConfig.root.backgroundColor }, width: "20" })] }), _jsx("tr", { children: _jsx("td", { className: "padding", colSpan: 3, height: "20", style: { backgroundColor: styleConfig.root.backgroundColor } }) })] }) }) })] }));
 }
 export default Mail;

package/dist/components/mail/MailButton/index.d.ts

@@ -1,14 +1,7 @@
-interface MailButtonStyles {
-    backgroundColor: string;
-    borderRadius: number;
-    color: string;
-    height: number;
-    width: number;
-}
-export interface MailButtonProps {
+import type { AppConfig } from '@sqrzro/config';
+export type MailButtonProps = AppConfig['mail'] & {
     children: string;
     href: string;
-    styles?: Partial<MailButtonStyles>;
-}
+};
 declare function MailButton({ children, href, styles }: Readonly<MailButtonProps>): React.ReactElement;
 export default MailButton;