@aboutbits/react-ui - npm Package Compare versions

Comparing version 0.2.7 to 0.3.0

components/action/index.d.ts

@@ -1,1 +0,1 @@
-export * from './Action';
+export * from './Actions';

components/action/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Action"), exports);
+tslib_1.__exportStar(require("./Actions"), exports);

components/action/theme.d.ts

 declare const _default: {
-    action: {
+    actions: {
         base: string;
-        variant: {
+        position: {
             start: string;
@@ -6,0 +6,0 @@ center: string;

components/action/theme.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    action: {
+    actions: {
         base: 'flex flex-col lg:flex-row gap-4',
-        variant: {
+        position: {
             start: 'lg:justify-start',
@@ -8,0 +8,0 @@ center: 'lg:justify-center',

components/content/index.d.ts

 export * from './ContentArea/ContentArea';
 export * from './ContentError/ContentError';
+export * from './ContentMessage/ContentMessage';

components/content/index.js

@@ -6,1 +6,2 @@ "use strict";
 tslib_1.__exportStar(require("./ContentError/ContentError"), exports);
+tslib_1.__exportStar(require("./ContentMessage/ContentMessage"), exports);

components/content/theme.d.ts

@@ -20,3 +20,51 @@ declare const _default: {
     };
+    message: {
+        base: string;
+        contentContainer: string;
+        icon: {
+            base: string;
+            tone: {
+                primary: string;
+                neutral: string;
+                warning: string;
+                critical: string;
+                success: string;
+                informative: string;
+            };
+        };
+        iconContainer: {
+            base: string;
+            tone: {
+                primary: string;
+                neutral: string;
+                warning: string;
+                critical: string;
+                success: string;
+                informative: string;
+            };
+        };
+        title: {
+            base: string;
+            tone: {
+                primary: string;
+                neutral: string;
+                warning: string;
+                critical: string;
+                success: string;
+                informative: string;
+            };
+        };
+        text: {
+            base: string;
+            tone: {
+                primary: string;
+                neutral: string;
+                warning: string;
+                critical: string;
+                success: string;
+                informative: string;
+            };
+        };
+    };
 };
 export default _default;

components/content/theme.js

@@ -14,2 +14,50 @@ "use strict";
     },
+    message: {
+        base: 'flex max-w-sm flex-col items-center justify-center',
+        contentContainer: 'flex justify-center items-center',
+        icon: {
+            base: 'h-6 w-6 fill-current',
+            tone: {
+                primary: 'text-primary-500',
+                neutral: 'text-neutral-500',
+                warning: 'text-warning-500',
+                critical: 'text-critical-500',
+                success: 'text-success-500',
+                informative: 'text-informative-500',
+            },
+        },
+        iconContainer: {
+            base: 'rounded-full bg-neutral-100 p-4 outline-1 outline-offset-2  mt-3 mb-4',
+            tone: {
+                primary: 'bg-primary-100',
+                neutral: 'bg-neutral-100',
+                warning: 'bg-warning-100',
+                critical: 'bg-critical-100',
+                success: 'bg-success-100',
+                informative: 'bg-informative-100',
+            },
+        },
+        title: {
+            base: 'text-xl font-bold',
+            tone: {
+                primary: 'text-primary-500',
+                neutral: 'text-neutral-500',
+                warning: 'text-warning-500',
+                critical: 'text-critical-500',
+                success: 'text-success-500',
+                informative: 'text-informative-500',
+            },
+        },
+        text: {
+            base: 'text-center',
+            tone: {
+                primary: '',
+                neutral: 'text-neutral-500',
+                warning: '',
+                critical: 'text-critical-500',
+                success: '',
+                informative: '',
+            },
+        },
+    },
 };

components/dialog/index.d.ts

@@ -1,3 +0,25 @@
-export * from './confirmation/ConfirmationDialog';
-export * from './DialogHeader';
-export * from './DialogSectionContainer';
+export * from './Dialog/Dialog';
+export * from './Dialog/DialogContentArea';
+export * from './Dialog/DialogContent';
+export * from './Dialog/DialogContentList';
+export * from './Dialog/DialogContentListLoading';
+export * from './Dialog/DialogContentMessage';
+export * from './Dialog/ConvenientDialogContentMessage';
+export * from './DialogHeader/DialogHeaderArea';
+export * from './DialogHeader/DialogHeader';
+export * from './DialogHeader/DialogHeaderRow';
+export * from './DialogHeader/DialogHeaderGroup';
+export * from './DialogHeader/DialogHeaderTitle';
+export * from './DialogHeader/DialogHeaderLeftActionIcon';
+export * from './DialogHeader/DialogHeaderCloseAction';
+export * from './DialogHeader/DialogHeaderWithClose';
+export * from './DialogFooter/DialogFooterArea';
+export * from './DialogFooter/DialogFooterActions';
+export * from './DialogFooter/DialogFooterWithActions';
+export * from './DialogFooter/DialogFooterWithPaginationInMemory';
+export * from './DialogItem/DialogListItem';
+export * from './DialogItem/DialogListItemButton';
+export * from './DialogItem/DialogLoadingListItem';
+export * from './ConfirmationDialog/ConfirmationDialog';
+export * from './types';
+export * from './DialogContext';

components/dialog/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./confirmation/ConfirmationDialog"), exports);
-tslib_1.__exportStar(require("./DialogHeader"), exports);
-tslib_1.__exportStar(require("./DialogSectionContainer"), exports);
+tslib_1.__exportStar(require("./Dialog/Dialog"), exports);
+tslib_1.__exportStar(require("./Dialog/DialogContentArea"), exports);
+tslib_1.__exportStar(require("./Dialog/DialogContent"), exports);
+tslib_1.__exportStar(require("./Dialog/DialogContentList"), exports);
+tslib_1.__exportStar(require("./Dialog/DialogContentListLoading"), exports);
+tslib_1.__exportStar(require("./Dialog/DialogContentMessage"), exports);
+tslib_1.__exportStar(require("./Dialog/ConvenientDialogContentMessage"), exports);
+tslib_1.__exportStar(require("./DialogHeader/DialogHeaderArea"), exports);
+tslib_1.__exportStar(require("./DialogHeader/DialogHeader"), exports);
+tslib_1.__exportStar(require("./DialogHeader/DialogHeaderRow"), exports);
+tslib_1.__exportStar(require("./DialogHeader/DialogHeaderGroup"), exports);
+tslib_1.__exportStar(require("./DialogHeader/DialogHeaderTitle"), exports);
+tslib_1.__exportStar(require("./DialogHeader/DialogHeaderLeftActionIcon"), exports);
+tslib_1.__exportStar(require("./DialogHeader/DialogHeaderCloseAction"), exports);
+tslib_1.__exportStar(require("./DialogHeader/DialogHeaderWithClose"), exports);
+tslib_1.__exportStar(require("./DialogFooter/DialogFooterArea"), exports);
+tslib_1.__exportStar(require("./DialogFooter/DialogFooterActions"), exports);
+tslib_1.__exportStar(require("./DialogFooter/DialogFooterWithActions"), exports);
+tslib_1.__exportStar(require("./DialogFooter/DialogFooterWithPaginationInMemory"), exports);
+tslib_1.__exportStar(require("./DialogItem/DialogListItem"), exports);
+tslib_1.__exportStar(require("./DialogItem/DialogListItemButton"), exports);
+tslib_1.__exportStar(require("./DialogItem/DialogLoadingListItem"), exports);
+tslib_1.__exportStar(require("./ConfirmationDialog/ConfirmationDialog"), exports);
+tslib_1.__exportStar(require("./types"), exports);
+tslib_1.__exportStar(require("./DialogContext"), exports);

components/dialog/theme.d.ts

 declare const _default: {
-    confirmation: {
+    overlay: {
         base: string;
-        title: {
-            base: string;
-            variant: {
-                confirm: string;
-                critical: string;
+        mobilePosition: {
+            center: string;
+            fullscreen: string;
+        };
+        desktopPosition: {
+            center: string;
+            fullscreen: string;
+        };
+    };
+    dialog: {
+        base: string;
+        mobilePositionSize: {
+            center: {
+                base: string;
+                sm: string;
+                md: string;
+                lg: string;
             };
+            fullscreen: {
+                base: string;
+                sm: string;
+                md: string;
+                lg: string;
+            };
         };
+        desktopPositionSize: {
+            center: {
+                base: string;
+                sm: string;
+                md: string;
+                lg: string;
+            };
+            fullscreen: {
+                base: string;
+                sm: string;
+                md: string;
+                lg: string;
+            };
+        };
     };
-    select: {
+    headerArea: {
         base: string;
     };
-    header: {
+    headerRow: {
         base: string;
+        layout: {
+            stretch: string;
+            spaceBetween: string;
+            start: string;
+            center: string;
+            end: string;
+        };
     };
-    sectionContainer: {
+    headerGroup: {
         base: string;
+        spacing: {
+            sm: string;
+            md: string;
+        };
     };
+    headerLeftArea: {
+        base: string;
+    };
+    headerLeftActionIcon: {
+        base: string;
+    };
+    headerRightArea: {
+        base: string;
+    };
+    headerTitle: {
+        base: string;
+    };
+    contentArea: {
+        base: string;
+        scrolled: {
+            off: string;
+            on: string;
+        };
+    };
+    content: {
+        base: string;
+    };
+    contentMessage: {
+        contentContainer: string;
+    };
+    listItem: {
+        base: string;
+    };
+    listItemButton: {
+        base: string;
+    };
+    footerArea: {
+        base: string;
+    };
+    footerActions: {
+        base: string;
+        position: {
+            start: string;
+            center: string;
+            end: string;
+        };
+        dialogSize: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+    };
+    loading: {
+        listItem: {
+            start: {
+                base: string;
+            };
+            end: {
+                base: string;
+            };
+        };
+    };
 };
 export default _default;

components/dialog/theme.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    confirmation: {
-        base: 'absolute top-1/2 left-1/2 p-5 min-w-[17.5rem] max-w-min space-y-4 transform -translate-x-1/2 -translate-y-1/2 outline-none bg-white rounded',
-        title: {
-            base: 'text-xl',
-            variant: {
-                confirm: 'text-black',
-                critical: 'text-critical-500',
+    overlay: {
+        base: 'fixed inset-0 flex justify-center items-center bg-black/[0.36]',
+        mobilePosition: {
+            center: 'p-6',
+            fullscreen: 'p-0',
+        },
+        desktopPosition: {
+            center: 'lg:p-8',
+            fullscreen: 'lg:p-0',
+        },
+    },
+    dialog: {
+        base: 'flex flex-col min-h-0 outline-none bg-white shadow-dialog max-h-full overflow-hidden',
+        mobilePositionSize: {
+            center: {
+                base: 'rounded-lg',
+                sm: 'w-full max-w-xs',
+                md: 'w-full max-w-xl',
+                lg: 'w-full max-w-3xl',
             },
+            fullscreen: {
+                base: 'w-full h-full',
+                sm: '',
+                md: '',
+                lg: '',
+            },
         },
+        desktopPositionSize: {
+            center: {
+                base: 'lg:h-auto lg:rounded-lg',
+                sm: 'lg:w-full lg:max-w-xs',
+                md: 'lg:w-full lg:max-w-xl',
+                lg: 'lg:w-full lg:max-w-3xl',
+            },
+            fullscreen: {
+                base: 'lg:w-full lg:h-full lg:max-w-none lg:rounded-none',
+                sm: '',
+                md: '',
+                lg: '',
+            },
+        },
     },
-    select: {
-        base: 'md:my-20 mx-auto md:w-full md:max-w-3xl bg-white md:rounded-md overflow-hidden',
+    headerArea: {
+        base: 'mb-4 px-6 mt-6 flex flex-col gap-y-2 shrink-0',
     },
-    header: {
-        base: 'px-4 pt-2',
+    headerRow: {
+        base: 'items-center',
+        layout: {
+            stretch: '',
+            spaceBetween: 'flex justify-between gap-x-2.5',
+            start: 'flex justify-start gap-x-2.5',
+            center: 'flex justify-center gap-x-2.5',
+            end: 'flex justify-end gap-x-2.5',
+        },
     },
-    sectionContainer: {
-        base: 'rounded-lg rounded-t-none',
+    headerGroup: {
+        base: 'flex items-center gap-y-2',
+        spacing: {
+            sm: 'gap-x-2.5',
+            md: 'gap-x-6',
+        },
     },
+    headerLeftArea: {
+        base: 'flex items-center mr-2 space-x-3 lg:space-x-4',
+    },
+    headerLeftActionIcon: {
+        base: '-ml-2',
+    },
+    headerRightArea: {
+        base: 'flex items-center ml-2 space-x-3 lg:space-x-4',
+    },
+    headerTitle: {
+        base: 'flex-1 text-2xl text-neutral-800 truncate',
+    },
+    contentArea: {
+        base: 'overflow-auto min-h-0 flex-1 min-h-0 border-t',
+        scrolled: {
+            off: 'border-transparent',
+            on: 'border-neutral-200',
+        },
+    },
+    content: {
+        base: 'px-6 pb-6',
+    },
+    contentMessage: {
+        contentContainer: 'flex justify-center items-center',
+    },
+    listItem: {
+        base: 'px-6 flex border-b border-neutral-200 last:border-0 items-center min-h-[3.5rem] bg-white',
+    },
+    listItemButton: {
+        base: 'block w-full focus:outline-neutral-800 justify-between space-x-4 hover:bg-neutral-100 active:bg-neutral-100',
+    },
+    footerArea: {
+        base: 'px-6 py-4 border-t border-neutral-200 bg-neutral-100 text-xs',
+    },
+    footerActions: {
+        base: 'flex flex-col gap-2',
+        position: {
+            start: 'justify-start',
+            center: 'justify-center',
+            end: 'justify-end',
+        },
+        dialogSize: {
+            sm: '',
+            md: 'sm:flex-row',
+            lg: 'sm:flex-row',
+        },
+    },
+    loading: {
+        listItem: {
+            start: {
+                base: 'p-4 mr-4 w-full',
+            },
+            end: {
+                base: 'p-4 w-12',
+            },
+        },
+    },
 };

components/form/async/SelectItem.d.ts

 import { ReactElement, ReactNode } from 'react';
-import { Props as DialogProps } from './SelectItemDialogWithSearch';
+import { SelectItemDialogWithSearchProps } from './SelectItemDialogWithSearch';
 export declare type SelectItemProps<ItemType, Error> = {
@@ -18,2 +18,4 @@ id: string;
     renderInputValue?: (item: ItemType) => ReactNode;
+    dialogTitle: ReactNode;
+    dialogLabel: string;
     label: string;
@@ -27,3 +29,3 @@ placeholder: string;
     extractIdFromItem: (item: ItemType) => string;
-} & Pick<DialogProps<ItemType, Error>, 'useGetData' | 'dialogTitle' | 'dialogLabel' | 'noSearchResults' | 'renderListItem' | 'renderErrorMessage' | 'paginationConfig'>;
+} & Pick<SelectItemDialogWithSearchProps<ItemType, Error>, 'useGetData' | 'noSearchResults' | 'renderListItem' | 'renderErrorMessage' | 'paginationConfig'>;
 /**
@@ -30,0 +32,0 @@ * Converts tailwindcss classes from placeholder to text.

components/form/async/SelectItem.js

@@ -6,11 +6,11 @@ "use strict";
 var jsx_runtime_1 = require("react/jsx-runtime");
+var IconClose_1 = tslib_1.__importDefault(require("@aboutbits/react-material-icons/dist/IconClose"));
+var IconKeyboardArrowDown_1 = tslib_1.__importDefault(require("@aboutbits/react-material-icons/dist/IconKeyboardArrowDown"));
+var classnames_1 = tslib_1.__importDefault(require("classnames"));
+var formik_1 = require("formik");
 var react_1 = require("react");
-var formik_1 = require("formik");
-var classnames_1 = tslib_1.__importDefault(require("classnames"));
-var IconKeyboardArrowDown_1 = tslib_1.__importDefault(require("@aboutbits/react-material-icons/dist/IconKeyboardArrowDown"));
-var IconClose_1 = tslib_1.__importDefault(require("@aboutbits/react-material-icons/dist/IconClose"));
-var useCustomInputCss_1 = require("../useCustomInputCss");
 var framework_1 = require("../../../framework");
+var InputError_1 = require("../InputError");
 var InputLabel_1 = require("../InputLabel");
-var InputError_1 = require("../InputError");
+var useCustomInputCss_1 = require("../useCustomInputCss");
 var SelectItemDialogWithSearch_1 = require("./SelectItemDialogWithSearch");
@@ -31,9 +31,9 @@ /**
         return item.includes('text')
-            ? !!item.match(/(text-(left|center|right|justify)|text-opacity-.*)/g)
+            ? !!item.match(/:|(text-(left|center|right|justify)|text-opacity-.*)/g)
             : true;
     })
-        //transforms tailwindcss placeholder to text
+        //transforms tailwindcss placeholder:text-* to text-*
         .map(function (item) {
-        return item.includes('placeholder')
-            ? item.replace('placeholder', 'text')
+        return item.includes('placeholder:text-')
+            ? item.replace('placeholder:text-', 'text-')
             : item;
@@ -46,11 +46,17 @@ })
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, name = _a.name, initialItem = _a.initialItem, renderInputValue = _a.renderInputValue, label = _a.label, placeholder = _a.placeholder, useGetData = _a.useGetData, dialogTitle = _a.dialogTitle, dialogLabel = _a.dialogLabel, noSearchResults = _a.noSearchResults, renderListItem = _a.renderListItem, renderErrorMessage = _a.renderErrorMessage, paginationConfig = _a.paginationConfig, extractIdFromItem = _a.extractIdFromItem;
-    var _c = (0, formik_1.useField)(name), field = _c[0], helpers = _c[2];
+    var _c = (0, formik_1.useField)(name), field = _c[0], meta = _c[1], helpers = _c[2];
     var _d = (0, react_1.useState)(false), showDialog = _d[0], setShowDialog = _d[1];
     var selectedItem = (0, react_1.useRef)(initialItem);
     var customCss = (0, useCustomInputCss_1.useCustomInputCss)(name, disabled);
+    var customCssEmptyInput = (0, react_1.useMemo)(function () { return (0, exports.replacePlaceholderColorWithTextColor)(customCss.inputCss); }, [customCss.inputCss]);
     var internationalization = (0, framework_1.useInternationalization)();
-    var customCssInputCss = (0, react_1.useMemo)(function () { return (0, exports.replacePlaceholderColorWithTextColor)(customCss.inputCss); }, [customCss.inputCss]);
+    var form = (0, framework_1.useTheme)().form;
+    var fieldHasError = meta.touched && meta.error;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { inputId: id, label: label, className: customCss.labelCss }), field.value === '' ? ((0, jsx_runtime_1.jsxs)("button", tslib_1.__assign({ type: "button", id: id, onClick: function () {
                             setShowDialog(true);
-                        }, className: (0, classnames_1.default)(customCssInputCss, 'flex flex-row text-left') }, { children: [(0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: "flex-1" }, { children: placeholder })), (0, jsx_runtime_1.jsx)(IconKeyboardArrowDown_1.default, { className: "h-6 w-6" })] }))) : ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, classnames_1.default)(customCss.inputCss, 'flex flex-row text-left') }, { children: [(0, jsx_runtime_1.jsx)("button", tslib_1.__assign({ type: "button", id: id, onClick: function () { return setShowDialog(true); }, className: "flex-1 text-left" }, { children: (0, jsx_runtime_1.jsx)("span", { children: renderInputValue && selectedItem.current
+                        }, className: (0, classnames_1.default)(customCssEmptyInput, form.selectItem.input.container.base, fieldHasError
+                            ? form.selectItem.input.container.error
+                            : form.selectItem.input.container.normal) }, { children: [(0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: form.selectItem.input.placeholder.base }, { children: placeholder })), (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: form.selectItem.input.iconContainer.base }, { children: (0, jsx_runtime_1.jsx)(IconKeyboardArrowDown_1.default, { className: form.selectItem.input.icon.base }) }))] }))) : ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, classnames_1.default)(customCss.inputCss, form.selectItem.input.container.base, fieldHasError
+                            ? form.selectItem.input.container.error
+                            : form.selectItem.input.container.normal) }, { children: [(0, jsx_runtime_1.jsx)("button", tslib_1.__assign({ type: "button", id: id, onClick: function () { return setShowDialog(true); }, className: form.selectItem.input.selectButton.base }, { children: (0, jsx_runtime_1.jsx)("span", { children: renderInputValue && selectedItem.current
                                         ? renderInputValue(selectedItem.current)
@@ -63,3 +69,5 @@ : selectedItem.current && !renderInputValue
                                     selectedItem.current = undefined;
-                                }, className: "pl-2" }, { children: (0, jsx_runtime_1.jsx)(IconClose_1.default, { className: "h-6 w-6", title: internationalization.translate('shared.select.clear') }) }))] }))), (0, jsx_runtime_1.jsx)(InputError_1.InputError, { name: name, className: customCss.errorCss })] }), showDialog && ((0, jsx_runtime_1.jsx)(SelectItemDialogWithSearch_1.SelectItemDialogWithSearch, { onDismiss: function () {
+                                }, className: (0, classnames_1.default)(form.selectItem.input.iconContainer.base, fieldHasError
+                                    ? form.selectItem.input.iconContainer.error
+                                    : form.selectItem.input.iconContainer.normal) }, { children: (0, jsx_runtime_1.jsx)(IconClose_1.default, { className: form.selectItem.input.icon.base, title: internationalization.translate('shared.select.clear') }) }))] }))), (0, jsx_runtime_1.jsx)(InputError_1.InputError, { name: name, className: customCss.errorCss })] }), showDialog && ((0, jsx_runtime_1.jsx)(SelectItemDialogWithSearch_1.SelectItemDialogWithSearch, { onDismiss: function () {
                     helpers.setTouched(true);
@@ -72,4 +80,4 @@ setShowDialog(false);
                     setShowDialog(false);
-                }, useGetData: useGetData, renderListItem: renderListItem, renderErrorMessage: renderErrorMessage, dialogTitle: dialogTitle, dialogLabel: dialogLabel, noSearchResults: noSearchResults, paginationConfig: paginationConfig }))] }));
+                }, useGetData: useGetData, renderListItem: renderListItem, renderErrorMessage: renderErrorMessage, title: dialogTitle, "aria-label": dialogLabel, noSearchResults: noSearchResults, paginationConfig: paginationConfig }))] }));
 }
 exports.SelectItem = SelectItem;

components/form/async/SelectItemDialogWithSearch.d.ts

@@ -1,6 +0,9 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { Actions } from '@aboutbits/react-pagination/dist/types';
+import { ReactElement, ReactNode } from 'react';
+import { DialogProps } from '../../dialog';
 import { PaginationInMemoryProps } from '../../pagination';
-export declare type SearchQueryParameters = {
-    search?: string;
-} & PaginationQueryParameters;
+declare type FilterParameters = {
+    search: string;
+};
+export declare type SearchQueryParameters = Partial<FilterParameters> & PaginationQueryParameters;
 export declare type PaginationQueryParameters = Pick<PaginationInMemoryProps, 'page' | 'size'>;
@@ -13,5 +16,3 @@ export declare type PaginatedResponse<T> = {
 };
-export declare type Props<ItemType, Error> = {
-    onDismiss: (event?: React.SyntheticEvent<Element, Event> | undefined) => void;
-    isOpen: boolean;
+export declare type SelectItemDialogWithSearchProps<ItemType, Error> = DialogProps & {
     onConfirm: (item: ItemType) => void;
@@ -24,4 +25,2 @@ useGetData: (params: SearchQueryParameters & PaginationQueryParameters) => {
     renderErrorMessage: (error: Error) => ReactNode;
-    dialogTitle: string;
-    dialogLabel: string;
     noSearchResults: string;
@@ -31,3 +30,14 @@ paginationConfig: {
     };
+    numberOfLoadingItems?: number;
+    title: ReactNode;
 };
-export declare function SelectItemDialogWithSearch<ItemType, Error>({ onDismiss, onConfirm, isOpen, useGetData, renderListItem, renderErrorMessage, dialogTitle, dialogLabel, noSearchResults, paginationConfig, }: Props<ItemType, Error>): ReactElement;
+export declare function SelectItemDialogWithSearch<ItemType, Error>({ onConfirm, useGetData, renderListItem, renderErrorMessage, noSearchResults, paginationConfig, numberOfLoadingItems, title, ...props }: SelectItemDialogWithSearchProps<ItemType, Error>): ReactElement;
+export declare function SelectItemDialogSearch({ actions, }: {
+    actions: Actions;
+}): ReactElement;
+export declare function SelectItemDialogSuccess<ItemType, Error>({ data, actions, searching, onConfirm, renderListItem, paginationConfig, noSearchResults, }: {
+    data: PaginatedResponse<ItemType>;
+    actions: Actions;
+    searching: boolean;
+} & Pick<SelectItemDialogWithSearchProps<ItemType, Error>, 'onConfirm' | 'renderListItem' | 'paginationConfig' | 'noSearchResults'>): ReactElement;
+export {};

components/form/async/SelectItemDialogWithSearch.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectItemDialogWithSearch = void 0;
+exports.SelectItemDialogSuccess = exports.SelectItemDialogSearch = exports.SelectItemDialogWithSearch = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var IconSearch_1 = tslib_1.__importDefault(require("@aboutbits/react-material-icons/dist/IconSearch"));
+var inMemoryPagination_1 = require("@aboutbits/react-pagination/dist/inMemoryPagination");
 var react_toolbox_1 = require("@aboutbits/react-toolbox");
-var inMemoryPagination_1 = require("@aboutbits/react-pagination/dist/inMemoryPagination");
-var SelectDialog_1 = require("../../dialog/select/SelectDialog");
-var section_1 = require("../../section");
+var formik_1 = require("formik");
 var framework_1 = require("../../../framework");
-var pagination_1 = require("../../pagination");
-var loading_1 = require("../../loading");
 var dialog_1 = require("../../dialog");
-var SectionContentMessage_1 = require("../../section/Section/SectionContentMessage");
-var ConvenientSectionContentMessage_1 = require("../../section/Section/ConvenientSectionContentMessage");
+var DialogFooterWithPaginationInMemory_1 = require("../../dialog/DialogFooter/DialogFooterWithPaginationInMemory");
+var DialogContentList_1 = require("../../dialog/Dialog/DialogContentList");
+var DialogListItemButton_1 = require("../../dialog/DialogItem/DialogListItemButton");
+var FormikAutoSubmit_1 = require("../FormikAutoSubmit");
+var Input_1 = require("../Input");
+var types_1 = require("../types");
+var DialogContentListLoading_1 = require("../../dialog/Dialog/DialogContentListLoading");
+var DialogHeaderRow_1 = require("../../dialog/DialogHeader/DialogHeaderRow");
+var initialValues = {
+    search: '',
+};
 function SelectItemDialogWithSearch(_a) {
-    var onDismiss = _a.onDismiss, onConfirm = _a.onConfirm, isOpen = _a.isOpen, useGetData = _a.useGetData, renderListItem = _a.renderListItem, renderErrorMessage = _a.renderErrorMessage, dialogTitle = _a.dialogTitle, dialogLabel = _a.dialogLabel, noSearchResults = _a.noSearchResults, paginationConfig = _a.paginationConfig;
-    var internationalization = (0, framework_1.useInternationalization)();
-    var _b = (0, inMemoryPagination_1.useQueryAndPagination)(tslib_1.__assign(tslib_1.__assign({}, paginationConfig), { defaultQueryParameters: { search: '' } })), queryParameters = _b.queryParameters, page = _b.page, size = _b.size, actions = _b.actions;
-    var _c = useGetData({
+    var onConfirm = _a.onConfirm, useGetData = _a.useGetData, renderListItem = _a.renderListItem, renderErrorMessage = _a.renderErrorMessage, noSearchResults = _a.noSearchResults, paginationConfig = _a.paginationConfig, _b = _a.numberOfLoadingItems, numberOfLoadingItems = _b === void 0 ? 5 : _b, title = _a.title, props = tslib_1.__rest(_a, ["onConfirm", "useGetData", "renderListItem", "renderErrorMessage", "noSearchResults", "paginationConfig", "numberOfLoadingItems", "title"]);
+    var _c = (0, inMemoryPagination_1.useQueryAndPagination)(tslib_1.__assign(tslib_1.__assign({}, paginationConfig), { defaultQueryParameters: initialValues })), queryParameters = _c.queryParameters, page = _c.page, size = _c.size, actions = _c.actions;
+    var _d = useGetData({
         search: queryParameters.search,
         page: page,
         size: size,
-    }), data = _c.data, error = _c.error;
+    }), data = _d.data, error = _d.error;
     var searching = queryParameters.search !== '';
+    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, tslib_1.__assign({ mobilePosition: dialog_1.DialogPosition.fullscreen }, props, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(dialog_1.DialogHeaderArea, { children: [(0, jsx_runtime_1.jsxs)(DialogHeaderRow_1.DialogHeaderRow, { children: [(0, jsx_runtime_1.jsx)(dialog_1.DialogHeaderCloseAction, { onClick: props.onDismiss }), (0, jsx_runtime_1.jsx)(dialog_1.DialogHeaderTitle, { children: title })] }), (0, jsx_runtime_1.jsx)(DialogHeaderRow_1.DialogHeaderRow, tslib_1.__assign({ className: "my-2" }, { children: (0, jsx_runtime_1.jsx)(SelectItemDialogSearch, { actions: actions }) }))] }), (0, jsx_runtime_1.jsx)(react_toolbox_1.AsyncView, { data: data, error: error, renderSuccess: function (data) { return ((0, jsx_runtime_1.jsx)(SelectItemDialogSuccess, { data: data, searching: searching, actions: actions, onConfirm: onConfirm, renderListItem: renderListItem, paginationConfig: paginationConfig, noSearchResults: noSearchResults })); }, renderLoading: (0, jsx_runtime_1.jsx)(DialogContentListLoading_1.DialogContentListLoading, { numberOfItems: numberOfLoadingItems, enableScrollLayout: false }), renderError: function (error) { return ((0, jsx_runtime_1.jsx)(dialog_1.DialogContentError, { text: renderErrorMessage(error) })); } })] }) })));
+}
+exports.SelectItemDialogWithSearch = SelectItemDialogWithSearch;
+function SelectItemDialogSearch(_a) {
+    var actions = _a.actions;
+    var internationalization = (0, framework_1.useInternationalization)();
+    return ((0, jsx_runtime_1.jsx)(formik_1.Formik, tslib_1.__assign({ initialValues: initialValues, onSubmit: actions.updateQuery }, { children: (0, jsx_runtime_1.jsxs)(formik_1.Form, tslib_1.__assign({ className: "flex-1" }, { children: [(0, jsx_runtime_1.jsx)(FormikAutoSubmit_1.FormikAutoSubmit, {}), (0, jsx_runtime_1.jsx)(Input_1.Input, { name: "search", variant: types_1.Variant.soft, iconStart: IconSearch_1.default, placeholder: internationalization.translate('shared.search.placeholder') })] })) })));
+}
+exports.SelectItemDialogSearch = SelectItemDialogSearch;
+function SelectItemDialogSuccess(_a) {
+    var data = _a.data, actions = _a.actions, searching = _a.searching, onConfirm = _a.onConfirm, renderListItem = _a.renderListItem, paginationConfig = _a.paginationConfig, noSearchResults = _a.noSearchResults;
+    var internationalization = (0, framework_1.useInternationalization)();
+    var form = (0, framework_1.useTheme)().form;
     var empty = searching
         ? internationalization.translate('shared.select.search.empty')
         : noSearchResults;
-    return ((0, jsx_runtime_1.jsx)(SelectDialog_1.SelectDialog, tslib_1.__assign({ isOpen: isOpen, title: dialogTitle, iconLabel: internationalization.translate('shared.search.label'), search: queryParameters.search, actions: {
-            search: function (value) { return actions.updateQuery({ search: value }); },
-            clear: actions.clear,
-        }, onDismiss: onDismiss, dialogLabel: dialogLabel }, { children: (0, jsx_runtime_1.jsx)(dialog_1.DialogSectionContainer, { children: (0, jsx_runtime_1.jsx)(react_toolbox_1.AsyncView, { data: data, error: error, renderLoading: (0, jsx_runtime_1.jsxs)(section_1.SectionContentList, { children: [(0, jsx_runtime_1.jsx)(loading_1.LoadingListItem, {}), (0, jsx_runtime_1.jsx)(loading_1.LoadingListItem, {}), (0, jsx_runtime_1.jsx)(loading_1.LoadingListItem, {})] }), renderSuccess: function (data) {
-                    return data.items.length === 0 ? ((0, jsx_runtime_1.jsx)(SectionContentMessage_1.SectionContentMessage, { text: empty })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(section_1.SectionContentList, { children: data.items.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(section_1.SectionListItemButton, tslib_1.__assign({ onClick: function () {
-                                        onConfirm(item);
-                                    } }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "flex flex-1 justify-between" }, { children: renderListItem(item) })) }), index)); }) }), (0, jsx_runtime_1.jsx)(pagination_1.SectionFooterWithPaginationInMemory, { page: data.currentPage, size: data.perPage, total: data.total, onChangePage: actions.setPage, config: paginationConfig })] }));
-                }, renderError: function (error) { return ((0, jsx_runtime_1.jsx)(ConvenientSectionContentMessage_1.SectionContentError, { text: renderErrorMessage(error) })); } }) }) })));
+    return data.items.length === 0 ? ((0, jsx_runtime_1.jsx)(dialog_1.DialogContentEmpty, { text: empty })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(dialog_1.DialogContentArea, tslib_1.__assign({ enableScrollLayout: false, className: form.selectItem.dialogContentArea.base }, { children: (0, jsx_runtime_1.jsx)(DialogContentList_1.DialogContentList, { children: data.items.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(DialogListItemButton_1.DialogListItemButton, tslib_1.__assign({ onClick: function () {
+                            onConfirm(item);
+                        } }, { children: renderListItem(item) }), index)); }) }) })), (0, jsx_runtime_1.jsx)(DialogFooterWithPaginationInMemory_1.DialogFooterWithPaginationInMemory, { page: data.currentPage, size: data.perPage, total: data.total, onChangePage: actions.setPage, config: paginationConfig })] }));
 }
-exports.SelectItemDialogWithSearch = SelectItemDialogWithSearch;
+exports.SelectItemDialogSuccess = SelectItemDialogSuccess;

components/form/index.d.ts

@@ -14,1 +14,2 @@ export * from './Form';
 export * from './types';
+export * from './FormError';

components/form/index.js

@@ -17,1 +17,2 @@ "use strict";
 tslib_1.__exportStar(require("./types"), exports);
+tslib_1.__exportStar(require("./FormError"), exports);

components/form/theme.d.ts

@@ -217,3 +217,39 @@ declare const _default: {
     };
+    selectItem: {
+        input: {
+            container: {
+                base: string;
+                normal: string;
+                error: string;
+            };
+            selectButton: {
+                base: string;
+            };
+            placeholder: {
+                base: string;
+            };
+            iconContainer: {
+                base: string;
+                normal: string;
+                error: string;
+            };
+            icon: {
+                base: string;
+            };
+        };
+        dialogContentArea: {
+            base: string;
+        };
+        headerSearch: {
+            base: string;
+            input: {
+                base: string;
+            };
+            clearButton: {
+                base: string;
+                icon: string;
+            };
+        };
+    };
 };
 export default _default;

components/form/theme.js

@@ -219,2 +219,38 @@ "use strict";
     },
+    selectItem: {
+        input: {
+            container: {
+                base: 'flex flex-row text-left gap-x-2 focus-within:outline focus-within:outline-1 focus-within:-outline-offset-2',
+                normal: 'focus-within:outline-neutral-800',
+                error: 'focus-within:outline-critical-500',
+            },
+            selectButton: {
+                base: 'flex-1 text-left -my-2.5 -ml-2 pl-2.5 focus:ring-0 focus:outline-none',
+            },
+            placeholder: {
+                base: 'flex-1',
+            },
+            iconContainer: {
+                base: 'mr-1',
+                normal: 'focus:outline-neutral-800',
+                error: 'focus:outline-critical-500',
+            },
+            icon: {
+                base: 'h-5 w-5',
+            },
+        },
+        dialogContentArea: {
+            base: 'border-t border-neutral-200',
+        },
+        headerSearch: {
+            base: 'flex flex-1 py-1 px-3 bg-neutral-200 rounded-full',
+            input: {
+                base: 'flex-1 w-full outline-none bg-transparent border-none placeholder-neutral-500 text-neutral-800',
+            },
+            clearButton: {
+                base: 'hover:text-gray-700 focus:text-gray-700',
+                icon: 'w-4 h-4 fill-current',
+            },
+        },
+    },
 };

components/header/actions/HeaderButtonIcon.d.ts

@@ -1,5 +0,5 @@
-import { ComponentType, ReactElement } from 'react';
+import React, { ComponentType, ReactElement } from 'react';
 import { IconProps } from '@aboutbits/react-material-icons/dist/types';
-import { ClassNameProps } from '../../types';
-export declare type HeaderButtonIconProps = ClassNameProps & {
+import { ButtonIconProps } from '../../button';
+export declare type HeaderButtonIconProps = Omit<ButtonIconProps, 'ref'> & {
     /**
@@ -16,4 +16,4 @@ * Defines the icon of the button.
      **/
-    onClick: () => void;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
 };
-export declare function HeaderButtonIcon({ label, onClick, icon, className, }: HeaderButtonIconProps): ReactElement;
+export declare function HeaderButtonIcon({ label, onClick, icon, className, ...props }: HeaderButtonIconProps): ReactElement;

components/header/actions/HeaderButtonIcon.js

@@ -6,10 +6,9 @@ "use strict";
 var jsx_runtime_1 = require("react/jsx-runtime");
-var types_1 = require("../../types");
 var button_1 = require("../../button");
 var framework_1 = require("../../../framework");
 function HeaderButtonIcon(_a) {
-    var label = _a.label, onClick = _a.onClick, icon = _a.icon, className = _a.className;
+    var label = _a.label, onClick = _a.onClick, icon = _a.icon, className = _a.className, props = tslib_1.__rest(_a, ["label", "onClick", "icon", "className"]);
     var header = (0, framework_1.useTheme)().header;
-    return ((0, jsx_runtime_1.jsxs)("span", tslib_1.__assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(button_1.ButtonIcon, { onClick: onClick, icon: icon, label: label, variant: button_1.Variant.transparent, tone: types_1.Tone.neutral, size: button_1.Size.md, className: header.buttonIcon.mobile }), (0, jsx_runtime_1.jsx)(button_1.ButtonIcon, { onClick: onClick, icon: icon, label: label, variant: button_1.Variant.transparent, tone: types_1.Tone.neutral, size: button_1.Size.lg, className: header.buttonIcon.desktop })] })));
+    return ((0, jsx_runtime_1.jsxs)("span", tslib_1.__assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(button_1.ButtonIcon, tslib_1.__assign({ onClick: onClick, icon: icon, label: label, size: button_1.Size.md, className: header.buttonIcon.mobile }, props)), (0, jsx_runtime_1.jsx)(button_1.ButtonIcon, tslib_1.__assign({ onClick: onClick, icon: icon, label: label, size: button_1.Size.lg, className: header.buttonIcon.desktop }, props))] })));
 }
 exports.HeaderButtonIcon = HeaderButtonIcon;

components/header/actions/HeaderLeftActionIcon.d.ts

 import { ReactElement } from 'react';
 import { HeaderButtonIconProps } from './HeaderButtonIcon';
-export declare type HeaderLeftActionIconProps = HeaderButtonIconProps;
+export declare type HeaderLeftActionIconProps = Omit<HeaderButtonIconProps, 'variant'>;
 export declare function HeaderLeftActionIcon(props: HeaderLeftActionIconProps): ReactElement;

components/header/actions/HeaderLeftActionIcon.js

@@ -7,2 +7,4 @@ "use strict";
 var framework_1 = require("../../../framework");
+var button_1 = require("../../button");
+var types_1 = require("../../types");
 var HeaderLeftArea_1 = require("../areas/HeaderLeftArea");
@@ -12,4 +14,4 @@ var HeaderButtonIcon_1 = require("./HeaderButtonIcon");
     var header = (0, framework_1.useTheme)().header;
-    return ((0, jsx_runtime_1.jsx)(HeaderLeftArea_1.HeaderLeftArea, tslib_1.__assign({ className: header.leftActionIcon.base }, { children: (0, jsx_runtime_1.jsx)(HeaderButtonIcon_1.HeaderButtonIcon, tslib_1.__assign({}, props)) })));
+    return ((0, jsx_runtime_1.jsx)(HeaderLeftArea_1.HeaderLeftArea, tslib_1.__assign({ className: header.leftActionIcon.base }, { children: (0, jsx_runtime_1.jsx)(HeaderButtonIcon_1.HeaderButtonIcon, tslib_1.__assign({ variant: button_1.Variant.transparent, tone: types_1.Tone.neutral }, props)) })));
 }
 exports.HeaderLeftActionIcon = HeaderLeftActionIcon;

components/header/actions/HeaderRightActionIcon.js

@@ -7,2 +7,4 @@ "use strict";
 var framework_1 = require("../../../framework");
+var button_1 = require("../../button");
+var types_1 = require("../../types");
 var HeaderRightArea_1 = require("../areas/HeaderRightArea");
@@ -12,4 +14,4 @@ var HeaderButtonIcon_1 = require("./HeaderButtonIcon");
     var header = (0, framework_1.useTheme)().header;
-    return ((0, jsx_runtime_1.jsx)(HeaderRightArea_1.HeaderRightArea, tslib_1.__assign({ className: header.rightActionIcon.base }, { children: (0, jsx_runtime_1.jsx)(HeaderButtonIcon_1.HeaderButtonIcon, tslib_1.__assign({}, props)) })));
+    return ((0, jsx_runtime_1.jsx)(HeaderRightArea_1.HeaderRightArea, tslib_1.__assign({ className: header.rightActionIcon.base }, { children: (0, jsx_runtime_1.jsx)(HeaderButtonIcon_1.HeaderButtonIcon, tslib_1.__assign({ variant: button_1.Variant.transparent, tone: types_1.Tone.neutral }, props)) })));
 }
 exports.HeaderRightActionIcon = HeaderRightActionIcon;

components/header/index.d.ts

@@ -10,5 +10,3 @@ export * from './areas/HeaderArea';
 export * from './actions/HeaderCloseAction';
-export * from './HeaderBackWithoutAction';
-export * from './HeaderCloseWithSearch';
-export * from './HeaderMain';
-export * from './HeaderSearch';
+export * from './HeaderWithBackNavigation';
+export * from './Header';

components/header/index.js

@@ -13,5 +13,3 @@ "use strict";
 tslib_1.__exportStar(require("./actions/HeaderCloseAction"), exports);
-tslib_1.__exportStar(require("./HeaderBackWithoutAction"), exports);
-tslib_1.__exportStar(require("./HeaderCloseWithSearch"), exports);
-tslib_1.__exportStar(require("./HeaderMain"), exports);
-tslib_1.__exportStar(require("./HeaderSearch"), exports);
+tslib_1.__exportStar(require("./HeaderWithBackNavigation"), exports);
+tslib_1.__exportStar(require("./Header"), exports);

components/header/theme.d.ts

@@ -18,14 +18,2 @@ declare const _default: {
     };
-    search: {
-        base: string;
-        input: {
-            base: string;
-        };
-        clearButton: {
-            base: string;
-        };
-        icon: {
-            base: string;
-        };
-    };
     leftActionIcon: {
@@ -32,0 +20,0 @@ base: string;

components/header/theme.js

@@ -15,17 +15,7 @@ "use strict";
     rightArea: {
-        base: 'flex items-center ml-2 lg:mr-3 space-x-3 lg:space-x-4',
+        base: 'flex items-center ml-2 lg:ml-3 space-x-3 lg:space-x-4',
     },
     title: {
-        base: 'flex-1 text-3xl font-medium lg:text-4xl truncate',
+        base: 'flex-1 text-3xl leading-10 font-medium lg:text-4xl lg:leading-12 truncate',
     },
-    search: {
-        base: 'flex flex-1 lg:p-0 py-1 px-3 bg-gray-300 lg:bg-transparent rounded-full',
-        input: {
-            base: 'flex-1 w-full lg:text-3xl outline-none bg-transparent border-none placeholder-gray-500 text-black',
-        },
-        clearButton: {
-            base: 'lg:hidden hover:text-gray-700 focus:text-gray-700',
-        },
-        icon: { base: 'w-4 h-4 fill-current' },
-    },
     leftActionIcon: {
@@ -32,0 +22,0 @@ base: '-ml-2 lg:-ml-4',

components/loading/index.d.ts

 export * from './LoadingBar';
 export * from './LoadingInput';
-export * from './LoadingDescriptionItem';
-export * from './SectionContentListLoading';
-export * from './SectionContentLoadingDetails';
-export * from './SectionContentLoadingForm';
-export * from './LoadingListItem';

components/loading/index.js

@@ -6,6 +6,1 @@ "use strict";
 tslib_1.__exportStar(require("./LoadingInput"), exports);
-tslib_1.__exportStar(require("./LoadingDescriptionItem"), exports);
-tslib_1.__exportStar(require("./SectionContentListLoading"), exports);
-tslib_1.__exportStar(require("./SectionContentLoadingDetails"), exports);
-tslib_1.__exportStar(require("./SectionContentLoadingForm"), exports);
-tslib_1.__exportStar(require("./LoadingListItem"), exports);

components/loading/theme.d.ts

@@ -5,10 +5,2 @@ declare const _default: {
     };
-    listItem: {
-        start: {
-            base: string;
-        };
-        end: {
-            base: string;
-        };
-    };
     input: {
@@ -22,11 +14,3 @@ upper: {
     };
-    descriptionItem: {
-        upper: {
-            base: string;
-        };
-        lower: {
-            base: string;
-        };
-    };
 };
 export default _default;

components/loading/theme.js

@@ -7,10 +7,2 @@ "use strict";
     },
-    listItem: {
-        start: {
-            base: 'p-4 mr-4 w-full',
-        },
-        end: {
-            base: 'p-4 w-12',
-        },
-    },
     input: {
@@ -24,10 +16,2 @@ upper: {
     },
-    descriptionItem: {
-        upper: {
-            base: 'p-1.5 w-40',
-        },
-        lower: {
-            base: 'p-2.5 pb-2.5-1px w-full mt-1 mb-1',
-        },
-    },
 };

components/pagination/index.d.ts

@@ -6,2 +6,1 @@ export * from './PaginationContainer';
 export * from './PaginationRouter';
-export * from './SectionFooter';

components/pagination/index.js

@@ -9,2 +9,1 @@ "use strict";
 tslib_1.__exportStar(require("./PaginationRouter"), exports);
-tslib_1.__exportStar(require("./SectionFooter"), exports);

components/pagination/theme.js

@@ -9,3 +9,3 @@ "use strict";
         icon: {
-            base: 'inline-block w-5 h-5 fill-current',
+            base: 'inline-block w-5 h-5 fill-current my-0.5',
         },
@@ -18,3 +18,3 @@ text: {
     page: {
-        base: 'flex items-center',
+        base: 'flex items-center leading-6',
         number: 'px-2',
@@ -21,0 +21,0 @@ enabled: 'hover:underline',

components/section/index.d.ts

@@ -9,2 +9,6 @@ export * from './Section/Section';
 export * from './Section/ConvenientSectionContentMessage';
+export * from './Section/SectionContentListLoading';
+export * from './Section/SectionContentLoadingDetails';
+export * from './Section/SectionContentLoadingForm';
+export * from './SectionHeader/SectionHeaderArea';
 export * from './SectionHeader/SectionHeader';
@@ -14,3 +18,3 @@ export * from './SectionHeader/SectionHeaderSpacer';
 export * from './SectionHeader/SectionHeaderGroup';
-export * from './SectionHeader/SectionTitle';
+export * from './SectionHeader/SectionHeaderTitle';
 export * from './SectionHeader/SectionFilter';
@@ -20,2 +24,7 @@ export * from './SectionHeader/SectionSearch';
 export * from './SectionItem/SectionDescriptionItem';
-export * from './SectionFooter/SectionFooter';
+export * from './SectionItem/SectionLoadingListItem';
+export * from './SectionItem/SectionLoadingDescriptionItem';
+export * from './SectionFooter/SectionFooterArea';
+export * from './SectionFooter/SectionFooterWithActions';
+export * from './SectionFooter/SectionFooterWithPaginationInMemory';
+export * from './SectionFooter/SectionFooterWithPaginationRouter';

components/section/index.js

@@ -12,2 +12,6 @@ "use strict";
 tslib_1.__exportStar(require("./Section/ConvenientSectionContentMessage"), exports);
+tslib_1.__exportStar(require("./Section/SectionContentListLoading"), exports);
+tslib_1.__exportStar(require("./Section/SectionContentLoadingDetails"), exports);
+tslib_1.__exportStar(require("./Section/SectionContentLoadingForm"), exports);
+tslib_1.__exportStar(require("./SectionHeader/SectionHeaderArea"), exports);
 tslib_1.__exportStar(require("./SectionHeader/SectionHeader"), exports);
@@ -17,3 +21,3 @@ tslib_1.__exportStar(require("./SectionHeader/SectionHeaderSpacer"), exports);
 tslib_1.__exportStar(require("./SectionHeader/SectionHeaderGroup"), exports);
-tslib_1.__exportStar(require("./SectionHeader/SectionTitle"), exports);
+tslib_1.__exportStar(require("./SectionHeader/SectionHeaderTitle"), exports);
 tslib_1.__exportStar(require("./SectionHeader/SectionFilter"), exports);
@@ -23,2 +27,7 @@ tslib_1.__exportStar(require("./SectionHeader/SectionSearch"), exports);
 tslib_1.__exportStar(require("./SectionItem/SectionDescriptionItem"), exports);
-tslib_1.__exportStar(require("./SectionFooter/SectionFooter"), exports);
+tslib_1.__exportStar(require("./SectionItem/SectionLoadingListItem"), exports);
+tslib_1.__exportStar(require("./SectionItem/SectionLoadingDescriptionItem"), exports);
+tslib_1.__exportStar(require("./SectionFooter/SectionFooterArea"), exports);
+tslib_1.__exportStar(require("./SectionFooter/SectionFooterWithActions"), exports);
+tslib_1.__exportStar(require("./SectionFooter/SectionFooterWithPaginationInMemory"), exports);
+tslib_1.__exportStar(require("./SectionFooter/SectionFooterWithPaginationRouter"), exports);

components/section/Section/SectionContentMessage.d.ts

@@ -1,10 +0,5 @@
-import React, { ComponentType, ReactNode } from 'react';
-import { IconProps } from '@aboutbits/react-material-icons/dist/types';
-import { ClassNameProps, Tone } from '../../types';
-export declare type SectionContentMessageProps = ClassNameProps & {
-    icon?: ComponentType<IconProps>;
-    tone?: Tone;
-    title?: ReactNode | string;
-    text?: ReactNode | string;
-};
-export declare const SectionContentMessage: React.FC<SectionContentMessageProps>;
+/// <reference types="react" />
+import { ContentMessageProps } from '../../content';
+import { ClassNameProps } from '../../types';
+export declare type SectionContentMessageProps = ClassNameProps & ContentMessageProps;
+export declare function SectionContentMessage({ className, ...props }: SectionContentMessageProps): JSX.Element;

components/section/Section/SectionContentMessage.js

@@ -8,9 +8,9 @@ "use strict";
 var framework_1 = require("../../../framework");
-var types_1 = require("../../types");
+var content_1 = require("../../content");
 var SectionContent_1 = require("./SectionContent");
-var SectionContentMessage = function (_a) {
-    var className = _a.className, Icon = _a.icon, title = _a.title, text = _a.text, _b = _a.tone, tone = _b === void 0 ? types_1.Tone.primary : _b, props = tslib_1.__rest(_a, ["className", "icon", "title", "text", "tone"]);
+function SectionContentMessage(_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
     var section = (0, framework_1.useTheme)().section;
-    return ((0, jsx_runtime_1.jsx)(SectionContent_1.SectionContent, tslib_1.__assign({ className: (0, classnames_1.default)(section.contentMessage.contentContainer, className) }, props, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: section.contentMessage.base }, { children: [Icon && ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, classnames_1.default)(section.contentMessage.iconContainer.base, section.contentMessage.iconContainer.tone[tone]) }, { children: (0, jsx_runtime_1.jsx)(Icon, { className: (0, classnames_1.default)(section.contentMessage.icon.base, section.contentMessage.icon.tone[tone]) }) }))), title && ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, classnames_1.default)(section.contentMessage.title.base, section.contentMessage.title.tone[tone]) }, { children: title }))), text && ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, classnames_1.default)(section.contentMessage.text.base, section.contentMessage.text.tone[tone]) }, { children: text })))] })) })));
-};
+    return ((0, jsx_runtime_1.jsx)(SectionContent_1.SectionContent, tslib_1.__assign({ className: (0, classnames_1.default)(section.contentMessage.contentContainer, className) }, props, { children: (0, jsx_runtime_1.jsx)(content_1.ContentMessage, tslib_1.__assign({}, props)) })));
+}
 exports.SectionContentMessage = SectionContentMessage;

components/section/SectionHeader/SectionHeader.d.ts

@@ -1,4 +0,6 @@
-import React from 'react';
-import { ClassNameProps } from '../../types';
-export declare type SectionHeaderProps = ClassNameProps;
-export declare const SectionHeader: React.FC<SectionHeaderProps>;
+import { ReactNode } from 'react';
+export declare type SectionHeaderProps = {
+    title: ReactNode;
+    className?: string;
+};
+export declare function SectionHeader({ className, title }: SectionHeaderProps): JSX.Element;

components/section/SectionHeader/SectionHeader.js

@@ -6,9 +6,8 @@ "use strict";
 var jsx_runtime_1 = require("react/jsx-runtime");
-var classnames_1 = tslib_1.__importDefault(require("classnames"));
-var framework_1 = require("../../../framework");
-var SectionHeader = function (_a) {
-    var className = _a.className, children = _a.children;
-    var section = (0, framework_1.useTheme)().section;
-    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, classnames_1.default)(section.header.base, className) }, { children: children })));
-};
+var SectionHeaderArea_1 = require("./SectionHeaderArea");
+var SectionHeaderTitle_1 = require("./SectionHeaderTitle");
+function SectionHeader(_a) {
+    var className = _a.className, title = _a.title;
+    return ((0, jsx_runtime_1.jsx)(SectionHeaderArea_1.SectionHeaderArea, tslib_1.__assign({ className: className }, { children: (0, jsx_runtime_1.jsx)(SectionHeaderTitle_1.SectionHeaderTitle, { children: title }) })));
+}
 exports.SectionHeader = SectionHeader;

components/section/theme.d.ts

@@ -19,48 +19,3 @@ declare const _default: {
     contentMessage: {
-        base: string;
         contentContainer: string;
-        icon: {
-            base: string;
-            tone: {
-                primary: string;
-                neutral: string;
-                warning: string;
-                critical: string;
-                success: string;
-                informative: string;
-            };
-        };
-        iconContainer: {
-            base: string;
-            tone: {
-                primary: string;
-                neutral: string;
-                warning: string;
-                critical: string;
-                success: string;
-                informative: string;
-            };
-        };
-        title: {
-            base: string;
-            tone: {
-                primary: string;
-                neutral: string;
-                warning: string;
-                critical: string;
-                success: string;
-                informative: string;
-            };
-        };
-        text: {
-            base: string;
-            tone: {
-                primary: string;
-                neutral: string;
-                warning: string;
-                critical: string;
-                success: string;
-                informative: string;
-            };
-        };
     };
@@ -97,3 +52,3 @@ contentList: {
     };
-    header: {
+    headerArea: {
         base: string;
@@ -109,3 +64,3 @@ };
     };
-    title: {
+    headerTitle: {
         base: string;
@@ -130,6 +85,24 @@ };
     };
-    footer: {
+    footerArea: {
         base: string;
     };
+    loading: {
+        listItem: {
+            start: {
+                base: string;
+            };
+            end: {
+                base: string;
+            };
+        };
+        descriptionItem: {
+            upper: {
+                base: string;
+            };
+            lower: {
+                base: string;
+            };
+        };
+    };
 };
 export default _default;

components/section/theme.js

@@ -19,48 +19,3 @@ "use strict";
     contentMessage: {
-        base: 'flex max-w-sm flex-col items-center justify-center',
         contentContainer: 'flex justify-center items-center',
-        icon: {
-            base: 'h-6 w-6 fill-current',
-            tone: {
-                primary: 'text-primary-500',
-                neutral: 'text-neutral-500',
-                warning: 'text-warning-500',
-                critical: 'text-critical-500',
-                success: 'text-success-500',
-                informative: 'text-informative-500',
-            },
-        },
-        iconContainer: {
-            base: 'rounded-full bg-neutral-100 p-4 outline-1 outline-offset-2  mt-3 mb-4',
-            tone: {
-                primary: 'bg-primary-100',
-                neutral: 'bg-neutral-100',
-                warning: 'bg-warning-100',
-                critical: 'bg-critical-100',
-                success: 'bg-success-100',
-                informative: 'bg-informative-100',
-            },
-        },
-        title: {
-            base: 'text-xl font-bold',
-            tone: {
-                primary: 'text-primary-500',
-                neutral: 'text-neutral-500',
-                warning: 'text-warning-500',
-                critical: 'text-critical-500',
-                success: 'text-success-500',
-                informative: 'text-informative-500',
-            },
-        },
-        text: {
-            base: 'text-center',
-            tone: {
-                primary: '',
-                neutral: 'text-neutral-500',
-                warning: '',
-                critical: 'text-critical-500',
-                success: '',
-                informative: '',
-            },
-        },
     },
@@ -97,3 +52,3 @@ contentList: {
     },
-    header: {
+    headerArea: {
         base: 'pb-2 flex flex-col gap-y-2',
@@ -109,3 +64,3 @@ },
     },
-    title: {
+    headerTitle: {
         base: 'pb-2 flex-1 text-base text-neutral-800',
@@ -130,5 +85,23 @@ },
     },
-    footer: {
+    footerArea: {
         base: 'px-4 md:px-6 py-4 bg-neutral-100 border-t border-neutral-200 text-xs',
     },
+    loading: {
+        listItem: {
+            start: {
+                base: 'p-4 mr-4 w-full',
+            },
+            end: {
+                base: 'p-4 w-12',
+            },
+        },
+        descriptionItem: {
+            upper: {
+                base: 'p-1.5 w-40',
+            },
+            lower: {
+                base: 'p-2.5 pb-2.5-1px w-full mt-1 mb-1',
+            },
+        },
+    },
 };

framework/theme/theme.d.ts

 export declare type Theme = typeof defaultTheme;
 export declare const defaultTheme: {
     action: {
-        action: {
+        actions: {
             base: string;
-            variant: {
+            position: {
                 start: string;
@@ -159,23 +159,171 @@ center: string;
         };
-    };
-    dialog: {
-        confirmation: {
+        message: {
             base: string;
+            contentContainer: string;
+            icon: {
+                base: string;
+                tone: {
+                    primary: string;
+                    neutral: string;
+                    warning: string;
+                    critical: string;
+                    success: string;
+                    informative: string;
+                };
+            };
+            iconContainer: {
+                base: string;
+                tone: {
+                    primary: string;
+                    neutral: string;
+                    warning: string;
+                    critical: string;
+                    success: string;
+                    informative: string;
+                };
+            };
             title: {
                 base: string;
-                variant: {
-                    confirm: string;
+                tone: {
+                    primary: string;
+                    neutral: string;
+                    warning: string;
                     critical: string;
+                    success: string;
+                    informative: string;
                 };
             };
+            text: {
+                base: string;
+                tone: {
+                    primary: string;
+                    neutral: string;
+                    warning: string;
+                    critical: string;
+                    success: string;
+                    informative: string;
+                };
+            };
         };
-        select: {
+    };
+    dialog: {
+        overlay: {
             base: string;
+            mobilePosition: {
+                center: string;
+                fullscreen: string;
+            };
+            desktopPosition: {
+                center: string;
+                fullscreen: string;
+            };
         };
-        header: {
+        dialog: {
             base: string;
+            mobilePositionSize: {
+                center: {
+                    base: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                };
+                fullscreen: {
+                    base: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                };
+            };
+            desktopPositionSize: {
+                center: {
+                    base: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                };
+                fullscreen: {
+                    base: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                };
+            };
         };
-        sectionContainer: {
+        headerArea: {
             base: string;
         };
+        headerRow: {
+            base: string;
+            layout: {
+                stretch: string;
+                spaceBetween: string;
+                start: string;
+                center: string;
+                end: string;
+            };
+        };
+        headerGroup: {
+            base: string;
+            spacing: {
+                sm: string;
+                md: string;
+            };
+        };
+        headerLeftArea: {
+            base: string;
+        };
+        headerLeftActionIcon: {
+            base: string;
+        };
+        headerRightArea: {
+            base: string;
+        };
+        headerTitle: {
+            base: string;
+        };
+        contentArea: {
+            base: string;
+            scrolled: {
+                off: string;
+                on: string;
+            };
+        };
+        content: {
+            base: string;
+        };
+        contentMessage: {
+            contentContainer: string;
+        };
+        listItem: {
+            base: string;
+        };
+        listItemButton: {
+            base: string;
+        };
+        footerArea: {
+            base: string;
+        };
+        footerActions: {
+            base: string;
+            position: {
+                start: string;
+                center: string;
+                end: string;
+            };
+            dialogSize: {
+                sm: string;
+                md: string;
+                lg: string;
+            };
+        };
+        loading: {
+            listItem: {
+                start: {
+                    base: string;
+                };
+                end: {
+                    base: string;
+                };
+            };
+        };
     };
@@ -398,2 +546,38 @@ form: {
         };
+        selectItem: {
+            input: {
+                container: {
+                    base: string;
+                    normal: string;
+                    error: string;
+                };
+                selectButton: {
+                    base: string;
+                };
+                placeholder: {
+                    base: string;
+                };
+                iconContainer: {
+                    base: string;
+                    normal: string;
+                    error: string;
+                };
+                icon: {
+                    base: string;
+                };
+            };
+            dialogContentArea: {
+                base: string;
+            };
+            headerSearch: {
+                base: string;
+                input: {
+                    base: string;
+                };
+                clearButton: {
+                    base: string;
+                    icon: string;
+                };
+            };
+        };
     };
@@ -417,14 +601,2 @@ header: {
         };
-        search: {
-            base: string;
-            input: {
-                base: string;
-            };
-            clearButton: {
-                base: string;
-            };
-            icon: {
-                base: string;
-            };
-        };
         leftActionIcon: {
@@ -446,10 +618,2 @@ base: string;
         };
-        listItem: {
-            start: {
-                base: string;
-            };
-            end: {
-                base: string;
-            };
-        };
         input: {
@@ -463,10 +627,2 @@ upper: {
         };
-        descriptionItem: {
-            upper: {
-                base: string;
-            };
-            lower: {
-                base: string;
-            };
-        };
     };
@@ -491,48 +647,3 @@ section: {
         contentMessage: {
-            base: string;
             contentContainer: string;
-            icon: {
-                base: string;
-                tone: {
-                    primary: string;
-                    neutral: string;
-                    warning: string;
-                    critical: string;
-                    success: string;
-                    informative: string;
-                };
-            };
-            iconContainer: {
-                base: string;
-                tone: {
-                    primary: string;
-                    neutral: string;
-                    warning: string;
-                    critical: string;
-                    success: string;
-                    informative: string;
-                };
-            };
-            title: {
-                base: string;
-                tone: {
-                    primary: string;
-                    neutral: string;
-                    warning: string;
-                    critical: string;
-                    success: string;
-                    informative: string;
-                };
-            };
-            text: {
-                base: string;
-                tone: {
-                    primary: string;
-                    neutral: string;
-                    warning: string;
-                    critical: string;
-                    success: string;
-                    informative: string;
-                };
-            };
         };
@@ -569,3 +680,3 @@ contentList: {
         };
-        header: {
+        headerArea: {
             base: string;
@@ -581,3 +692,3 @@ };
         };
-        title: {
+        headerTitle: {
             base: string;
@@ -602,5 +713,23 @@ };
         };
-        footer: {
+        footerArea: {
             base: string;
         };
+        loading: {
+            listItem: {
+                start: {
+                    base: string;
+                };
+                end: {
+                    base: string;
+                };
+            };
+            descriptionItem: {
+                upper: {
+                    base: string;
+                };
+                lower: {
+                    base: string;
+                };
+            };
+        };
     };
@@ -607,0 +736,0 @@ menu: {

framework/theme/ThemeContext.d.ts

@@ -5,5 +5,5 @@ /// <reference types="react" />
     action: {
-        action: {
+        actions: {
             base: string;
-            variant: {
+            position: {
                 start: string;
@@ -161,23 +161,171 @@ center: string;
         };
-    };
-    dialog: {
-        confirmation: {
+        message: {
             base: string;
+            contentContainer: string;
+            icon: {
+                base: string;
+                tone: {
+                    primary: string;
+                    neutral: string;
+                    warning: string;
+                    critical: string;
+                    success: string;
+                    informative: string;
+                };
+            };
+            iconContainer: {
+                base: string;
+                tone: {
+                    primary: string;
+                    neutral: string;
+                    warning: string;
+                    critical: string;
+                    success: string;
+                    informative: string;
+                };
+            };
             title: {
                 base: string;
-                variant: {
-                    confirm: string;
+                tone: {
+                    primary: string;
+                    neutral: string;
+                    warning: string;
                     critical: string;
+                    success: string;
+                    informative: string;
                 };
             };
+            text: {
+                base: string;
+                tone: {
+                    primary: string;
+                    neutral: string;
+                    warning: string;
+                    critical: string;
+                    success: string;
+                    informative: string;
+                };
+            };
         };
-        select: {
+    };
+    dialog: {
+        overlay: {
             base: string;
+            mobilePosition: {
+                center: string;
+                fullscreen: string;
+            };
+            desktopPosition: {
+                center: string;
+                fullscreen: string;
+            };
         };
-        header: {
+        dialog: {
             base: string;
+            mobilePositionSize: {
+                center: {
+                    base: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                };
+                fullscreen: {
+                    base: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                };
+            };
+            desktopPositionSize: {
+                center: {
+                    base: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                };
+                fullscreen: {
+                    base: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                };
+            };
         };
-        sectionContainer: {
+        headerArea: {
             base: string;
         };
+        headerRow: {
+            base: string;
+            layout: {
+                stretch: string;
+                spaceBetween: string;
+                start: string;
+                center: string;
+                end: string;
+            };
+        };
+        headerGroup: {
+            base: string;
+            spacing: {
+                sm: string;
+                md: string;
+            };
+        };
+        headerLeftArea: {
+            base: string;
+        };
+        headerLeftActionIcon: {
+            base: string;
+        };
+        headerRightArea: {
+            base: string;
+        };
+        headerTitle: {
+            base: string;
+        };
+        contentArea: {
+            base: string;
+            scrolled: {
+                off: string;
+                on: string;
+            };
+        };
+        content: {
+            base: string;
+        };
+        contentMessage: {
+            contentContainer: string;
+        };
+        listItem: {
+            base: string;
+        };
+        listItemButton: {
+            base: string;
+        };
+        footerArea: {
+            base: string;
+        };
+        footerActions: {
+            base: string;
+            position: {
+                start: string;
+                center: string;
+                end: string;
+            };
+            dialogSize: {
+                sm: string;
+                md: string;
+                lg: string;
+            };
+        };
+        loading: {
+            listItem: {
+                start: {
+                    base: string;
+                };
+                end: {
+                    base: string;
+                };
+            };
+        };
     };
@@ -400,2 +548,38 @@ form: {
         };
+        selectItem: {
+            input: {
+                container: {
+                    base: string;
+                    normal: string;
+                    error: string;
+                };
+                selectButton: {
+                    base: string;
+                };
+                placeholder: {
+                    base: string;
+                };
+                iconContainer: {
+                    base: string;
+                    normal: string;
+                    error: string;
+                };
+                icon: {
+                    base: string;
+                };
+            };
+            dialogContentArea: {
+                base: string;
+            };
+            headerSearch: {
+                base: string;
+                input: {
+                    base: string;
+                };
+                clearButton: {
+                    base: string;
+                    icon: string;
+                };
+            };
+        };
     };
@@ -419,14 +603,2 @@ header: {
         };
-        search: {
-            base: string;
-            input: {
-                base: string;
-            };
-            clearButton: {
-                base: string;
-            };
-            icon: {
-                base: string;
-            };
-        };
         leftActionIcon: {
@@ -448,10 +620,2 @@ base: string;
         };
-        listItem: {
-            start: {
-                base: string;
-            };
-            end: {
-                base: string;
-            };
-        };
         input: {
@@ -465,10 +629,2 @@ upper: {
         };
-        descriptionItem: {
-            upper: {
-                base: string;
-            };
-            lower: {
-                base: string;
-            };
-        };
     };
@@ -493,48 +649,3 @@ section: {
         contentMessage: {
-            base: string;
             contentContainer: string;
-            icon: {
-                base: string;
-                tone: {
-                    primary: string;
-                    neutral: string;
-                    warning: string;
-                    critical: string;
-                    success: string;
-                    informative: string;
-                };
-            };
-            iconContainer: {
-                base: string;
-                tone: {
-                    primary: string;
-                    neutral: string;
-                    warning: string;
-                    critical: string;
-                    success: string;
-                    informative: string;
-                };
-            };
-            title: {
-                base: string;
-                tone: {
-                    primary: string;
-                    neutral: string;
-                    warning: string;
-                    critical: string;
-                    success: string;
-                    informative: string;
-                };
-            };
-            text: {
-                base: string;
-                tone: {
-                    primary: string;
-                    neutral: string;
-                    warning: string;
-                    critical: string;
-                    success: string;
-                    informative: string;
-                };
-            };
         };
@@ -571,3 +682,3 @@ contentList: {
         };
-        header: {
+        headerArea: {
             base: string;
@@ -583,3 +694,3 @@ };
         };
-        title: {
+        headerTitle: {
             base: string;
@@ -604,5 +715,23 @@ };
         };
-        footer: {
+        footerArea: {
             base: string;
         };
+        loading: {
+            listItem: {
+                start: {
+                    base: string;
+                };
+                end: {
+                    base: string;
+                };
+            };
+            descriptionItem: {
+                upper: {
+                    base: string;
+                };
+                lower: {
+                    base: string;
+                };
+            };
+        };
     };
@@ -609,0 +738,0 @@ menu: {

package.json

 {
   "name": "@aboutbits/react-ui",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "main": "index.js",
@@ -25,4 +25,4 @@ "types": "index.d.ts",
     "build": "tsc --project tsconfig.build.json",
-    "lint": "eslint --ext .js,.ts,.tsx,.jsx,.stories.mdx,.json .",
-    "lint:fix": "eslint --ext .js,.ts,.tsx,.jsx,.stories.mdx,.json --fix .",
+    "lint": "eslint --ext .js,.ts,.tsx,.jsx,.stories.mdx,.docs.mdx,.json .",
+    "lint:fix": "eslint --ext .js,.ts,.tsx,.jsx,.stories.mdx,.docs.mdx,.json --fix .",
     "test": "jest --passWithNoTests",
@@ -39,7 +39,7 @@ "test:watch": "jest --passWithNoTests --watch",
     "classnames": "^2.3.1",
-    "lodash.set": "^4.3.2"
+    "lodash.set": "^4.3.2",
+    "@aboutbits/pagination": "^1.1.0"
   },
   "devDependencies": {
     "@aboutbits/internationalization": "^0.2.1",
-    "@aboutbits/pagination": "^1.1.0",
     "@aboutbits/react-material-icons": "^1.0.1",
@@ -46,0 +46,0 @@ "@aboutbits/react-pagination": "^0.0.10",

tailwind-preset.js

@@ -99,4 +99,11 @@ /* eslint-disable @typescript-eslint/no-var-requires */
       },
+      boxShadow: {
+        dialog:
+          '0px 4px 3px rgba(0, 0, 0, 0.07), 0px 2px 2px rgba(0, 0, 0, 0.06)',
+      },
+      lineHeight: {
+        12: '3rem',
+      },
     },
   },
 }

No alert changes

Improved metrics

Total package byte prevSize

315770

increased by14.99%

Dev dependency count

47

decreased by-2.08%

Number of package files

340

increased by12.58%

Lines of code

7390

increased by14.79%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Added@aboutbits/pagination@^1.1.0

• + Added@aboutbits/pagination@1.1.0(transitive)