@paygreen/pgui 2.1.3 → 2.2.0

package/dist/cjs/types/components/ActionsButton/index.d.ts

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { IconButtonProps } from '@chakra-ui/react';
 export declare type ActionsButtonProps = Omit<IconButtonProps, 'aria-label'> & {
     label: string;
 };
-export declare const ActionsButton: FC<React.PropsWithChildren<ActionsButtonProps>>;
+export declare const ActionsButton: FC<PropsWithChildren<ActionsButtonProps>>;

package/dist/cjs/types/components/Card/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FlexProps } from '@chakra-ui/react';
+export declare const Card: (props: FlexProps) => JSX.Element;

package/dist/cjs/types/components/ConfirmMenuItem/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { HTMLChakraProps, MenuItemProps } from '@chakra-ui/react';
+export declare type StyledMenuItemProps = HTMLChakraProps<'button'>;
+export declare const MenuItem: import("@chakra-ui/react").ComponentWithAs<"button", MenuItemProps>;
+declare type ConfirmMenuItemProps = MenuItemProps & {
+    confirmDelay?: number;
+    confirmColorScheme?: string;
+    confirmContent?: React.ReactNode;
+    confirmText?: React.ReactNode;
+    confirmIcon?: React.FC<React.PropsWithChildren<unknown>>;
+};
+export declare const ConfirmMenuItem: import("@chakra-ui/react").ComponentWithAs<"button", ConfirmMenuItemProps>;
+export {};

package/dist/cjs/types/components/DataList/index.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, PropsWithChildren } from 'react';
 import { AccordionProps, FlexProps } from '@chakra-ui/react';
 declare type DataListColumns = Record<string, DataListCellProps>;
 declare type DataListContextValue = {
@@ -30,13 +30,13 @@ export declare type DataListRowProps = FlexProps & {
     isVisible?: boolean | boolean[] | Record<string, boolean>;
     isDisabled?: boolean;
 };
-export declare const DataListRow: FC<React.PropsWithChildren<DataListRowProps>>;
+export declare const DataListRow: FC<PropsWithChildren<DataListRowProps>>;
 export declare type DataListHeaderProps = DataListRowProps;
-export declare const DataListHeader: FC<React.PropsWithChildren<DataListHeaderProps>>;
+export declare const DataListHeader: FC<PropsWithChildren<DataListHeaderProps>>;
 export declare type DataListFooterProps = DataListRowProps;
-export declare const DataListFooter: FC<React.PropsWithChildren<DataListFooterProps>>;
+export declare const DataListFooter: FC<PropsWithChildren<DataListFooterProps>>;
 export declare type DataListProps = AccordionProps & {
     isHover?: boolean;
 };
-export declare const DataList: FC<React.PropsWithChildren<DataListProps>>;
+export declare const DataList: FC<PropsWithChildren<DataListProps>>;
 export {};

package/dist/cjs/types/components/Pagination/index.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, PropsWithChildren } from 'react';
 import { IconButtonProps, StackProps } from '@chakra-ui/react';
 export declare const getPaginationInfo: ({ page, pageSize, totalItems, }: {
     page?: number | undefined;
@@ -26,10 +26,10 @@ export declare type PaginationContextValue<PageType = number> = {
     lastItemOnPage: number;
 };
 export declare const PaginationContext: React.Context<PaginationContextValue<number>>;
-export declare const PaginationButtonFirstPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
-export declare const PaginationButtonPrevPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
-export declare const PaginationButtonLastPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
-export declare const PaginationButtonNextPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+export declare const PaginationButtonFirstPage: FC<PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+export declare const PaginationButtonPrevPage: FC<PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+export declare const PaginationButtonLastPage: FC<PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+export declare const PaginationButtonNextPage: FC<PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
 export declare const PaginationInfo: ({ ...rest }: {
     [x: string]: any;
 }) => JSX.Element;

package/dist/cjs/types/components/index.d.ts

@@ -1,4 +1,6 @@
 export * from './ActionsButton';
+export * from './Card';
+export * from './ConfirmMenuItem';
 export * from './DataList';
 export * from './DayPicker';
 export * from './FormGroup';

package/dist/cjs/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './layout';
 export * from './theme';
+export * from './utils';

package/dist/cjs/types/layout/BottomBar/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FlexProps } from '@chakra-ui/react';
+export declare const BottomBar: (props: FlexProps) => JSX.Element;

package/dist/cjs/types/layout/LayoutContainer/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FlexProps } from '@chakra-ui/react';
+export declare const LayoutContainer: (props: FlexProps) => JSX.Element;

package/dist/cjs/types/layout/SideNav/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ButtonProps, DrawerContentProps, FlexProps, StackProps } from '@chakra-ui/react';
+export declare type SideNavProps = {
+    isMobileMenuOpen: boolean;
+    onMobileMenuClose: () => void;
+} & FlexProps & DrawerContentProps;
+export declare type SideNavMenuItemProps = {
+    isActive?: boolean;
+} & ButtonProps;
+export declare const SideNav: ({ isMobileMenuOpen, onMobileMenuClose, children, ...props }: SideNavProps) => JSX.Element;
+export declare const SideNavContainer: (props: StackProps) => JSX.Element;
+export declare const SideNavHeader: ({ children, ...rest }: FlexProps) => JSX.Element;
+export declare const SideNavBody: ({ children, ...rest }: StackProps) => JSX.Element;
+export declare const SideNavFooter: ({ children, ...rest }: FlexProps) => JSX.Element;
+export declare const SideNavMenu: ({ title, children, ...rest }: StackProps) => JSX.Element;
+export declare const SideNavMenuItem: ({ isActive, children, ...rest }: SideNavMenuItemProps) => JSX.Element;

package/dist/cjs/types/layout/TopBar/index.d.ts

@@ -4,7 +4,7 @@ export declare type TopBarBackActionProps = {
     backAction?: () => void;
     rightInformation?: ReactComponentElement<any>;
 } & FlexProps;
-export declare const TopBar: ({ ...props }: StackProps) => JSX.Element;
-export declare const TopBarFirstElement: ({ ...props }: FlexProps) => JSX.Element;
-export declare const TopBarLastElement: ({ ...props }: StackProps) => JSX.Element;
+export declare const TopBar: (props: StackProps) => JSX.Element;
+export declare const TopBarFirstElement: (props: FlexProps) => JSX.Element;
+export declare const TopBarLastElement: (props: StackProps) => JSX.Element;
 export declare const TopBarBackAction: ({ backAction, title, rightInformation, ...rest }: TopBarBackActionProps) => JSX.Element;

package/dist/cjs/types/layout/index.d.ts

@@ -1 +1,4 @@
+export * from './BottomBar';
+export * from './LayoutContainer';
+export * from './SideNav';
 export * from './TopBar';

package/dist/cjs/types/theme/components/drawer.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    sizes: {
+        nav: Partial<Record<"body" | "dialog" | "footer" | "header" | "overlay" | "dialogContainer" | "closeButton", import("@chakra-ui/styled-system").CSSObject>>;
+    };
+};
+export default _default;

package/dist/cjs/types/theme/components/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Badge } from './badge';
 export { default as Button } from './button';
+export { default as Drawer } from './drawer';
 export { default as Input } from './input';
 export { default as Tag } from './tag';

package/dist/cjs/types/theme/foundations/index.d.ts

@@ -1,4 +1,24 @@
 declare const foundations: {
+    sizes: {
+        max: string;
+        min: string;
+        full: string;
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        nav: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+    };
     shadows: {
         xs: string;
         sm: string;
@@ -9,6 +29,17 @@ declare const foundations: {
         '2xl': string;
         layout: string;
     };
+    radii: {
+        none: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        full: string;
+    };
     fonts: {
         heading: string;
         body: string;

package/dist/cjs/types/theme/foundations/radius.d.ts

@@ -0,0 +1,11 @@
+export declare const radii: {
+    none: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    full: string;
+};

package/dist/cjs/types/theme/foundations/sizes.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    max: string;
+    min: string;
+    full: string;
+    '3xs': string;
+    '2xs': string;
+    xs: string;
+    nav: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl': string;
+    '8xl': string;
+};
+export default _default;

package/dist/cjs/types/theme/rawStyle/chakraStyle.d.ts

@@ -0,0 +1,2 @@
+import { Styles } from '@chakra-ui/theme-tools';
+export declare const chakraStyle: Styles['global'];

package/dist/cjs/types/theme/{externals → rawStyle}/index.d.ts

@@ -1 +1,2 @@
+export { chakraStyle } from './chakraStyle';
 export { reactDayPicker } from './reactDayPicker';

package/dist/cjs/types/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date';
+export * from './responsive';

package/dist/cjs/types/utils/responsive.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobile: (currentBreakpoint: string) => boolean;

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import React__default, { useContext, useRef, useEffect, useState, createContext, forwardRef as forwardRef$1, useLayoutEffect, createElement, Fragment, Component, useCallback, useMemo } from 'react';
-import { forwardRef, IconButton, useBreakpointValue, Flex, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Accordion, FormControl, FormLabel, FormHelperText, FormErrorMessage, SlideFade, Icon, useDisclosure, Popover, PopoverTrigger, InputGroup, Input as Input$1, InputRightElement, PopoverContent, PopoverArrow, HStack, useControllableState, useMergeRefs, useTheme, useColorModeValue, useStyleConfig, useToken, Stack, Text, extendTheme } from '@chakra-ui/react';
+import React__default, { useState, useRef, useEffect, useContext, createContext, forwardRef as forwardRef$1, useLayoutEffect, createElement, Fragment, Component, useCallback, useMemo } from 'react';
+import { forwardRef, IconButton, Flex, createStylesContext, chakra, useMultiStyleConfig, useMenuItem, MenuIcon, MenuCommand, useMenuState, Icon, Text, useBreakpointValue, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Accordion, FormControl, FormLabel, FormHelperText, FormErrorMessage, SlideFade, useDisclosure, Popover, PopoverTrigger, InputGroup, Input as Input$1, InputRightElement, PopoverContent, PopoverArrow, HStack, useControllableState, useMergeRefs, useTheme, useColorModeValue, useStyleConfig, useToken, useBreakpoint, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, VStack, Button as Button$1, Stack, extendTheme } from '@chakra-ui/react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -183,6 +183,98 @@ var ActionsButton = forwardRef(function (_a, ref) {
 });
 ActionsButton.displayName = 'ActionsButton';
 
+var Card = function (props) { return (React__default.createElement(Flex, __assign$2({ p: 6, background: "white", boxShadow: "base", borderRadius: "base", flexDir: "column", h: "fit-content", w: "full" }, props))); };
+
+var _a = createStylesContext('Menu'), StylesProvider = _a[0], useStyles = _a[1];
+var StyledMenuItem = forwardRef(function (props, ref) {
+    var type = props.type, rest = __rest$2(props, ["type"]);
+    var styles = useStyles();
+    /**
+     * Given another component, use its type if present
+     * Else, use no type to avoid invalid html, e.g. <a type="button" />
+     * Else, fall back to "button"
+     */
+    var btnType = rest.as ? type !== null && type !== void 0 ? type : undefined : 'button';
+    var buttonStyles = __assign$2({ textDecoration: 'none', color: 'inherit', userSelect: 'none', display: 'flex', width: '100%', alignItems: 'center', textAlign: 'left', flex: '0 0 auto', outline: 0 }, styles.item);
+    return (React__default.createElement(chakra.button, __assign$2({ ref: ref, type: btnType }, rest, { __css: buttonStyles })));
+});
+var MenuItem = forwardRef(function (props, ref) {
+    var icon = props.icon, _a = props.iconSpacing, iconSpacing = _a === void 0 ? '0.75rem' : _a, command = props.command, _b = props.commandSpacing, commandSpacing = _b === void 0 ? '0.75rem' : _b, children = props.children, rest = __rest$2(props, ["icon", "iconSpacing", "command", "commandSpacing", "children"]);
+    var styles = useMultiStyleConfig('Menu', props);
+    var menuItemProps = useMenuItem(rest, ref);
+    var shouldWrap = icon || command;
+    var childrenFormated = shouldWrap ? (React__default.createElement(chakra.span, { pointerEvents: "none", flex: "1" }, children)) : (children);
+    return (React__default.createElement(StylesProvider, { value: styles },
+        React__default.createElement(StyledMenuItem, __assign$2({}, menuItemProps, { onClick: function (e) {
+                var _a;
+                (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+            } }),
+            icon && (React__default.createElement(MenuIcon, { fontSize: "0.8em", marginEnd: iconSpacing }, icon)),
+            childrenFormated,
+            command && (React__default.createElement(MenuCommand, { marginStart: commandSpacing }, command)))));
+});
+var ConfirmMenuItem = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.confirmColorScheme, confirmColorScheme = _b === void 0 ? 'red' : _b, _c = _a.confirmContent, confirmContent = _c === void 0 ? '' : _c, _d = _a.confirmIcon, confirmIcon = _d === void 0 ? FiAlertCircle : _d, confirmText = _a.confirmText, _e = _a.confirmDelay, confirmDelay = _e === void 0 ? 2000 : _e, icon = _a.icon, onClick = _a.onClick, rest = __rest$2(_a, ["children", "confirmColorScheme", "confirmContent", "confirmIcon", "confirmText", "confirmDelay", "icon", "onClick"]);
+    var _f = useState(false), isConfirmActive = _f[0], setIsConfirmActive = _f[1];
+    var timeoutRef = useRef();
+    var onCloseMenu = useMenuState().onClose;
+    var handleClickConfirm = function (event) {
+        if (isConfirmActive) {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            onCloseMenu();
+            setIsConfirmActive(false);
+        }
+        else {
+            setIsConfirmActive(true);
+        }
+    };
+    useEffect(function () {
+        if (isConfirmActive) {
+            timeoutRef.current = setTimeout(function () {
+                setIsConfirmActive(false);
+            }, confirmDelay);
+        }
+        return function () {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [isConfirmActive, confirmDelay]);
+    var confirmActiveProps = isConfirmActive
+        ? {
+            bg: "".concat(confirmColorScheme, ".100"),
+            color: 'transparent',
+            transition: '0.2s',
+            _dark: {
+                bg: "".concat(confirmColorScheme, ".800")
+            },
+            _hover: {
+                bg: "".concat(confirmColorScheme, ".50"),
+                _dark: {
+                    bg: "".concat(confirmColorScheme, ".900")
+                }
+            },
+            _focusVisible: {
+                bg: "".concat(confirmColorScheme, ".50"),
+                _dark: {
+                    bg: "".concat(confirmColorScheme, ".900")
+                }
+            },
+            icon: icon
+                ? React__default.cloneElement(icon, { color: 'transparent' })
+                : icon
+        }
+        : {};
+    return (React__default.createElement(MenuItem, __assign$2({ position: "relative", onClick: handleClickConfirm, ref: ref, icon: icon }, rest, confirmActiveProps),
+        React__default.createElement(Flex, { as: "span", alignItems: "center", opacity: isConfirmActive ? 0 : undefined }, children),
+        isConfirmActive && (React__default.createElement(Flex, { position: "absolute", top: 0, insetStart: 0, insetEnd: 0, bottom: 0, px: 3, as: "span", fontSize: "sm", alignItems: "center", color: "".concat(confirmColorScheme, ".500"), _dark: { color: 'white' } }, confirmContent ? (confirmContent) : (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Icon, { as: confirmIcon, me: 1 }),
+            ' ',
+            React__default.createElement(Text, { noOfLines: 1, as: "span" }, confirmText !== null && confirmText !== void 0 ? confirmText : 'Êtes-vous sûr ?')))))));
+});
+
 var DataListContext = React__default.createContext({
     setColumns: function () { },
     columns: {},
@@ -256,7 +348,7 @@ var DataListRow = function (_a) {
 var DataListHeader = function (_a) {
     var rest = __rest$2(_a, []);
     return (React__default.createElement(DataListHeaderContext.Provider, { value: true },
-        React__default.createElement(DataListRow, __assign$2({ fontSize: "sm", fontWeight: "bold", border: "none", _hover: {}, bg: "gray.100", color: "gray.600", _dark: { bg: 'blackAlpha.400', color: 'gray.300' } }, rest))));
+        React__default.createElement(DataListRow, __assign$2({ fontSize: "sm", fontWeight: "bold", border: "none", _hover: {}, bg: "background", color: "gray.700" }, rest))));
 };
 var DataListFooter = function (_a) {
     var rest = __rest$2(_a, []);
@@ -275,7 +367,7 @@ var DataList = function (_a) {
             columns: columns,
             isHover: isHover
         } },
-        React__default.createElement(Accordion, __assign$2({ display: "flex", flexDirection: "column", position: "relative", boxShadow: "md", borderRadius: "md", overflowX: "auto", overflowY: "hidden", minH: "10rem", allowMultiple: allowMultiple && !allowToggle, allowToggle: allowToggle, bg: "white", _dark: {
+        React__default.createElement(Accordion, __assign$2({ display: "flex", flexDirection: "column", position: "relative", boxShadow: "md", borderRadius: "base", overflowX: "auto", overflowY: "hidden", minH: "10rem", allowMultiple: allowMultiple && !allowToggle, allowToggle: allowToggle, bg: "white", _dark: {
                 bg: 'blackAlpha.400'
             } }, rest))));
 };
@@ -47392,23 +47484,77 @@ var SelectInner = function (_a, ref) {
 };
 var Select = React__default.forwardRef(SelectInner);
 
-var TopBar = function (_a) {
-    var props = __rest$2(_a, []);
-    return (React__default.createElement(Stack, __assign$2({ minH: "4.6875rem", bg: "white", boxShadow: "layout", w: "full", borderRadius: "0 0 1.25rem 1.25rem", justifyContent: "space-between", spacing: 2, alignItems: { base: 'inherit', xl: 'center' }, direction: { base: 'column', xl: 'row' }, py: { base: 4, xl: 0 } }, props)));
+var LayoutContainer = function (props) { return (React__default.createElement(Flex, __assign$2({ w: "full", px: { base: 4, sm: 12, md: 40, lg: 60, xl: 96 } }, props))); };
+
+var BottomBar = function (props) { return (React__default.createElement(LayoutContainer, __assign$2({ minH: "4.125rem", bg: "white", boxShadow: "layout", justifyContent: "space-between", alignItems: "center" }, props))); };
+
+var useIsMobile = function (currentBreakpoint) {
+    return (currentBreakpoint === 'base' ||
+        currentBreakpoint === 'sm' ||
+        currentBreakpoint === 'md' ||
+        currentBreakpoint === 'lg');
 };
-var TopBarFirstElement = function (_a) {
-    var props = __rest$2(_a, []);
-    return (React__default.createElement(Flex, __assign$2({ px: 4, flexDir: "column" }, props)));
+
+var SideNav = function (_a) {
+    var isMobileMenuOpen = _a.isMobileMenuOpen, onMobileMenuClose = _a.onMobileMenuClose, children = _a.children, props = __rest$2(_a, ["isMobileMenuOpen", "onMobileMenuClose", "children"]);
+    var theme = useTheme();
+    var currentBreakpoint = useBreakpoint();
+    var isMobile = useIsMobile(currentBreakpoint);
+    var customScrollBar = {
+        '&::-webkit-scrollbar': {
+            width: '0.7rem',
+            borderRadius: '9999px',
+            backgroundColor: "rgba(0, 0, 0, 0.05)"
+        },
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: "rgba(0, 0, 0, 0.05)",
+            borderRadius: '9999px'
+        }
+    };
+    if (isMobile) {
+        return (React__default.createElement(Drawer, { isOpen: isMobileMenuOpen, placement: "left", onClose: onMobileMenuClose, size: "nav" },
+            React__default.createElement(DrawerOverlay, null),
+            React__default.createElement(DrawerContent, __assign$2({ bgGradient: theme.colors.gradients.primary, color: "white", pt: 6, px: 6, overflow: "auto", sx: customScrollBar }, props),
+                React__default.createElement(DrawerCloseButton, null),
+                children)));
+    }
+    return (React__default.createElement(Flex, __assign$2({ w: "22.5rem", h: "100vh", flexDir: "column", bgGradient: theme.colors.gradients.primary, color: "white", pt: 6, px: 6, overflow: "auto", position: "fixed", top: "0", left: "0", sx: customScrollBar }, props), children));
+};
+var SideNavContainer = function (props) { return (React__default.createElement(VStack, __assign$2({ spacing: 6, alignItems: "inherit", minH: "100%" }, props))); };
+var SideNavHeader = function (_a) {
+    var children = _a.children, rest = __rest$2(_a, ["children"]);
+    return (React__default.createElement(Flex, __assign$2({ h: "3.2rem", alignItems: "center" }, rest), children));
+};
+var SideNavBody = function (_a) {
+    var children = _a.children, rest = __rest$2(_a, ["children"]);
+    return (React__default.createElement(VStack, __assign$2({ pt: 4, spacing: 5, alignItems: "inherit" }, rest), children));
 };
-var TopBarLastElement = function (_a) {
-    var props = __rest$2(_a, []);
-    return (React__default.createElement(HStack, __assign$2({ px: 4, spacing: 4, justifyContent: "flex-end" }, props)));
+var SideNavFooter = function (_a) {
+    var children = _a.children, rest = __rest$2(_a, ["children"]);
+    return (React__default.createElement(Flex, __assign$2({ flex: "1", alignItems: "flex-end", pb: 4 }, rest), children));
 };
+var SideNavMenu = function (_a) {
+    var title = _a.title, children = _a.children, rest = __rest$2(_a, ["title", "children"]);
+    return (React__default.createElement(VStack, __assign$2({ spacing: 1, alignItems: "inherit", h: "full", w: "full" }, rest),
+        React__default.createElement(Text, { fontSize: "sm", fontWeight: "bold", color: "white", textTransform: "uppercase" }, title),
+        children));
+};
+var SideNavMenuItem = function (_a) {
+    var isActive = _a.isActive, children = _a.children, rest = __rest$2(_a, ["isActive", "children"]);
+    if (isActive) {
+        return (React__default.createElement(Button$1, __assign$2({ w: "full", justifyContent: "flex-start", background: "white", color: "brand.600" }, rest), children));
+    }
+    return (React__default.createElement(Button$1, __assign$2({ w: "full", justifyContent: "flex-start", background: "transparent", color: "brand.50", _hover: { background: 'whiteAlpha.200' }, _focus: { background: 'whiteAlpha.200' }, _active: { background: 'whiteAlpha.200' } }, rest), children));
+};
+
+var TopBar = function (props) { return (React__default.createElement(Stack, __assign$2({ minH: "4.6875rem", bg: "white", boxShadow: "layout", w: "full", borderRadius: "0 0 1.25rem 1.25rem", justifyContent: "space-between", spacing: 2, alignItems: { base: 'inherit', xl: 'center' }, direction: { base: 'column', xl: 'row' }, py: { base: 4, xl: 0 } }, props))); };
+var TopBarFirstElement = function (props) { return (React__default.createElement(Flex, __assign$2({ px: 6, flexDir: "column" }, props))); };
+var TopBarLastElement = function (props) { return (React__default.createElement(HStack, __assign$2({ px: 6, spacing: 4, justifyContent: "flex-end" }, props))); };
 var TopBarBackAction = function (_a) {
     var _b = _a.backAction, backAction = _b === void 0 ? function () { } : _b, title = _a.title, rightInformation = _a.rightInformation, rest = __rest$2(_a, ["backAction", "title", "rightInformation"]);
-    return (React__default.createElement(Flex, __assign$2({ w: "full", justifyContent: "space-between", px: { base: 4, sm: 12, md: 40, lg: 80 }, alignItems: "center" }, rest),
+    return (React__default.createElement(LayoutContainer, __assign$2({ w: "full", justifyContent: "space-between", alignItems: "center" }, rest),
         React__default.createElement(IconButton, { "aria-label": "back", icon: React__default.createElement(Icon, { as: MdArrowBack }), onClick: backAction, variant: "@whiteNeutral" }),
-        React__default.createElement(Text, { fontSize: { base: 'md', md: 'lg', lg: 'xl' }, color: "brand.700", fontWeight: "bold", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", px: 2, w: "full" }, title),
+        React__default.createElement(Text, { fontSize: { base: 'md', md: 'lg', lg: 'xl' }, color: "brand.700", fontWeight: "bold", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", w: "full", px: 2 }, title),
         rightInformation));
 };
 
@@ -50913,6 +51059,23 @@ var button = {
     }
 };
 
+var getSize = function (value) {
+    if (value === 'full') {
+        return {
+            dialog: { maxW: '100vw', h: '100vh' }
+        };
+    }
+    return {
+        dialog: { maxW: value }
+    };
+};
+var sizes$1 = {
+    nav: getSize('nav')
+};
+var drawer = {
+    sizes: sizes$1
+};
+
 var input = {
     baseStyle: {
         field: {
@@ -50976,6 +51139,7 @@ var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Badge: badge,
     Button: button,
+    Drawer: drawer,
     Input: input,
     Tag: tag
 });
@@ -51047,6 +51211,18 @@ var colors = {
     background: '#F8FDFF'
 };
 
+var radii = {
+    none: '0',
+    sm: '1.125rem',
+    base: '1.25rem',
+    md: '1.375rem',
+    lg: '1.5rem',
+    xl: '1.75rem',
+    '2xl': '2rem',
+    '3xl': '2.5rem',
+    full: '9999px'
+};
+
 var shadows = {
     xs: '0px 0px 0px 1px #0F54671A',
     sm: '0px 1px 2px 0px #0F54671A',
@@ -51058,6 +51234,28 @@ var shadows = {
     layout: '0px 12px 42px 0px #0F54670D'
 };
 
+var largeSizes = {
+    max: 'max-content',
+    min: 'min-content',
+    full: '100%',
+    '3xs': '14rem',
+    '2xs': '16rem',
+    xs: '20rem',
+    nav: '22.5rem',
+    sm: '24rem',
+    md: '28rem',
+    lg: '32rem',
+    xl: '36rem',
+    '2xl': '42rem',
+    '3xl': '48rem',
+    '4xl': '56rem',
+    '5xl': '64rem',
+    '6xl': '72rem',
+    '7xl': '80rem',
+    '8xl': '90rem'
+};
+var sizes = __assign$2({}, largeSizes);
+
 var typography = {
     fonts: {
         heading: "'Work Sans', sans-serif",
@@ -51069,7 +51267,13 @@ var typography = {
     }
 };
 
-var foundations = __assign$2(__assign$2({ colors: colors }, typography), { shadows: shadows });
+var foundations = __assign$2(__assign$2({ colors: colors }, typography), { sizes: sizes, shadows: shadows, radii: radii });
+
+var chakraStyle = function () { return ({
+    'div[data-popper-placement]': {
+        'min-width': 'auto !important'
+    }
+}); };
 
 var reactDayPicker = function (props) { return ({
     ':root': {
@@ -51115,13 +51319,14 @@ var reactDayPicker = function (props) { return ({
     }
 }); };
 
-var externals = /*#__PURE__*/Object.freeze({
+var rawStyle = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    chakraStyle: chakraStyle,
     reactDayPicker: reactDayPicker
 });
 
 var externalsStyles = function (props) {
-    return Object.values(externals).reduce(function (acc, cur) { return (__assign$2(__assign$2({}, acc), (typeof cur === 'function' ? cur(props) : cur))); }, {});
+    return Object.values(rawStyle).reduce(function (acc, cur) { return (__assign$2(__assign$2({}, acc), (typeof cur === 'function' ? cur(props) : cur))); }, {});
 };
 var styles = {
     global: function (props) { return (__assign$2({ '#chakra-toast-portal > *': {
@@ -51134,5 +51339,5 @@ var styles = {
 
 var theme = extendTheme(__assign$2(__assign$2({ styles: styles }, foundations), { components: __assign$2({}, components) }));
 
-export { ActionsButton, DataList, DataListAccordion, DataListAccordionButton, DataListAccordionIcon, DataListAccordionPanel, DataListCell, DataListContext, DataListFooter, DataListHeader, DataListHeaderContext, DataListRow, DayPicker, FormGroup, InputDayPicker, Pagination, PaginationButtonFirstPage, PaginationButtonLastPage, PaginationButtonNextPage, PaginationButtonPrevPage, PaginationContext, PaginationInfo, SearchInput, Select, TopBar, TopBarBackAction, TopBarFirstElement, TopBarLastElement, getPaginationInfo, theme };
+export { ActionsButton, BottomBar, Card, ConfirmMenuItem, DataList, DataListAccordion, DataListAccordionButton, DataListAccordionIcon, DataListAccordionPanel, DataListCell, DataListContext, DataListFooter, DataListHeader, DataListHeaderContext, DataListRow, DayPicker, FormGroup, InputDayPicker, LayoutContainer, MenuItem, Pagination, PaginationButtonFirstPage, PaginationButtonLastPage, PaginationButtonNextPage, PaginationButtonPrevPage, PaginationContext, PaginationInfo, SearchInput, Select, SideNav, SideNavBody, SideNavContainer, SideNavFooter, SideNavHeader, SideNavMenu, SideNavMenuItem, TopBar, TopBarBackAction, TopBarFirstElement, TopBarLastElement, dateFormat, getPaginationInfo, theme, useIsMobile };
 //# sourceMappingURL=index.js.map