@ctlyst.id/internal-ui 2.1.5 → 2.1.7

package/dist/internal-ui.esm.js

@@ -18,10 +18,11 @@ import { AsyncPaginate } from 'react-select-async-paginate';
 import ReactSelectAsyncCreatable from 'react-select/async-creatable';
 import ReactSelectCreatable from 'react-select/creatable';
 import { useDropzone } from 'react-dropzone';
-import { alertAnatomy, checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy, tableAnatomy } from '@chakra-ui/anatomy';
-import { createMultiStyleConfigHelpers, cssVar, defineStyleConfig, defineStyle as defineStyle$1 } from '@chakra-ui/styled-system';
+import { accordionAnatomy, alertAnatomy, checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy, tableAnatomy } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers, defineStyle as defineStyle$1, cssVar, defineStyleConfig } from '@chakra-ui/styled-system';
 import { mode, calc, cssVar as cssVar$1 } from '@chakra-ui/theme-tools';
 import axios from 'axios';
+import { ToastContainer } from 'react-toastify';
 
 /* eslint-disable react/require-default-props */
 function CheckIcon() {
@@ -135,6 +136,9 @@ const Loader = /*#__PURE__*/forwardRef$1((props, ref) => {
     __css: styles
   });
 });
+Loader.defaultProps = {
+  size: 'md'
+};
 
 const Button = /*#__PURE__*/forwardRef$1((props, ref) => {
   const {
@@ -263,9 +267,6 @@ const Badge = props => {
   } = props;
   return /*#__PURE__*/React__default.createElement(Badge$2, Object.assign({
     borderRadius: pill ? 'xl' : 'sm',
-    variant: "primary-solid",
-    px: "2",
-    h: "4.5",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "space-between",
@@ -1679,7 +1680,13 @@ const Datepicker = ({
     "data-test-id": "bcpJJyCP0z_RIAGZXDU6s",
     onClick: onClear,
     cursor: "pointer"
-  }))), !isError ? /*#__PURE__*/React__default.createElement(FormHelperText, null, helperText) : /*#__PURE__*/React__default.createElement(FormErrorMessage, null, error));
+  }))), !isError ? /*#__PURE__*/React__default.createElement(FormHelperText, {
+    fontSize: "text.xs",
+    mt: 1
+  }, helperText) : /*#__PURE__*/React__default.createElement(FormErrorMessage, {
+    fontSize: "text.xs",
+    mt: 1
+  }, error));
 };
 Datepicker.defaultProps = {
   id: undefined,
@@ -1978,6 +1985,7 @@ Logo.defaultProps = {
 };
 
 const Profile = ({
+  color,
   brandColor,
   data,
   onLogout
@@ -2001,17 +2009,19 @@ const Profile = ({
       textDecor: 'none'
     },
     m: 0,
-    onClick: onToggle
+    onClick: onToggle,
+    color: color
   }, /*#__PURE__*/createElement(HStack, null, /*#__PURE__*/createElement(VStack, {
     alignItems: "flex-end",
     spacing: 0,
     ml: "2",
-    color: "primary.500"
+    color: color
   }, /*#__PURE__*/createElement(Text, {
     textStyle: "text.xs",
-    mb: 1,
-    color: "neutral.800"
-  }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/createElement(Flex, null, (data === null || data === void 0 ? void 0 : data.userRole) && /*#__PURE__*/createElement(Text, {
+    mb: 1
+  }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/createElement(Flex, {
+    alignItems: "center"
+  }, (data === null || data === void 0 ? void 0 : data.userRole) && /*#__PURE__*/createElement(Text, {
     textStyle: "text.xs"
   }, (data === null || data === void 0 ? void 0 : data.userRole) || 'user'), /*#__PURE__*/createElement(Box, {
     h: "3",
@@ -2058,7 +2068,8 @@ const Profile = ({
 Profile.defaultProps = {
   brandColor: 'primary.500',
   data: undefined,
-  onLogout: undefined
+  onLogout: undefined,
+  color: undefined
 };
 
 const SwitchMode = () => {
@@ -2096,15 +2107,9 @@ const Version = ({
   version,
   environment,
   onOpenModalRelease
-}) => /*#__PURE__*/createElement(Fragment, null, version && /*#__PURE__*/createElement(Badge$2, {
+}) => /*#__PURE__*/createElement(Fragment, null, version && /*#__PURE__*/createElement(Badge, {
   "data-test-id": "dzl3esjhCphobaaIXpiUE",
   variant: "neutral-light",
-  textStyle: "text.xs",
-  py: 1,
-  px: 2.5,
-  fontWeight: "semibold",
-  textTransform: "lowercase",
-  borderRadius: "md",
   onClick: onOpenModalRelease,
   cursor: onOpenModalRelease ? 'pointer' : 'auto'
 }, version), !hideEnv && environmentName(environment) !== null && version && /*#__PURE__*/createElement(Box, {
@@ -2129,32 +2134,36 @@ const Header = ({
   onLogout,
   onOpenModalRelease,
   hideSwitchMode,
-  mainLogo = 'https://assets.voila.id/xms/logo-xms.jpg',
-  centerLogo = 'https://assets.voila.id/xms/logo-voila-black.png?v=1',
+  mainLogo,
+  centerLogo,
   mainLogoSize,
   centerLogoSize = 4,
   hideEnv = false,
   urlLogo,
   children,
+  profile,
   ...props
-}) => /*#__PURE__*/createElement(Box, Object.assign({
+}) => /*#__PURE__*/createElement(Flex, Object.assign({
   minH: 15,
-  bg: "white",
+  bg: props.bg,
+  bgColor: props.bgColor,
   shadow: "raised",
   px: 6,
-  py: 3
+  py: 3,
+  alignItems: "center"
 }, props), /*#__PURE__*/createElement(Flex, {
+  h: "auto",
   w: "full",
   alignItems: "center",
-  justifyContent: "space-between",
+  justifyContent: profile ? 'flex-end' : 'space-between',
   pos: "relative"
-}, /*#__PURE__*/createElement(Flex, {
+}, mainLogo && /*#__PURE__*/createElement(Flex, {
   alignItems: "center"
 }, /*#__PURE__*/createElement(Logo, {
   url: urlLogo,
   imageUrl: mainLogo,
   height: mainLogoSize
-}), children && children), /*#__PURE__*/createElement(HStack, {
+}), children && children), centerLogo && /*#__PURE__*/createElement(HStack, {
   w: "fit-content",
   spacing: 2,
   alignItems: "center",
@@ -2170,9 +2179,10 @@ const Header = ({
   version: data === null || data === void 0 ? void 0 : data.version,
   environment: data === null || data === void 0 ? void 0 : data.environment,
   onOpenModalRelease: onOpenModalRelease
-})), /*#__PURE__*/createElement(Flex, {
+})), profile || /*#__PURE__*/createElement(Flex, {
   alignItems: "center"
 }, !hideSwitchMode && /*#__PURE__*/createElement(SwitchMode, null), /*#__PURE__*/createElement(Profile, {
+  color: props.color,
   brandColor: brandColor,
   data: data,
   onLogout: onLogout
@@ -2188,7 +2198,8 @@ Header.defaultProps = {
   centerLogo: undefined,
   centerLogoSize: undefined,
   hideEnv: false,
-  urlLogo: undefined
+  urlLogo: undefined,
+  profile: undefined
 };
 
 const ModalBody = /*#__PURE__*/React__default.forwardRef(({
@@ -3261,7 +3272,7 @@ const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
     p: 4,
     fontSize: "text.md",
     _selected: {
-      borderColor: 'primary.400',
+      borderColor: 'primary.500',
       color: 'primary.500',
       transform: 'translateY(-2px)',
       _hover: {
@@ -3397,50 +3408,97 @@ Uploader.defaultProps = {
 const {
   definePartsStyle,
   defineMultiStyleConfig
-} = /*#__PURE__*/createMultiStyleConfigHelpers(alertAnatomy.keys);
-const $fg = /*#__PURE__*/cssVar('alert-fg');
-const $ac = /*#__PURE__*/cssVar('alert-ac');
-const $bg = /*#__PURE__*/cssVar('alert-bg');
-const baseStyle = /*#__PURE__*/definePartsStyle({
-  container: {
-    bg: $bg.reference,
-    px: '4',
-    py: '2',
-    borderRadius: 'sm'
-  },
-  title: {
-    fontWeight: 'regular',
-    textStyle: 'text.sm',
-    marginEnd: '2'
+} = /*#__PURE__*/createMultiStyleConfigHelpers(accordionAnatomy.keys);
+const baseStyleContainer = /*#__PURE__*/defineStyle$1({
+  border: 'none'
+});
+const baseStyleButton = /*#__PURE__*/defineStyle$1({
+  height: 14,
+  transitionProperty: 'common',
+  transitionDuration: 'normal',
+  gap: 4,
+  fontSize: 'text.md',
+  bg: 'neutral.50',
+  _focusVisible: {
+    bg: 'neutral.100'
   },
-  description: {
-    lineHeight: '6'
+  _hover: {
+    bg: 'neutral.100'
   },
-  icon: {
-    color: $fg.reference,
-    flexShrink: 0,
-    marginEnd: '3',
-    w: '4',
-    h: '4'
+  _disabled: {
+    opacity: 0.4,
+    cursor: 'not-allowed'
   },
-  action: {
-    color: $ac.reference,
-    '& +.chakra-alert__close': {
-      ml: '3'
+  py: 2,
+  px: 4,
+  position: 'relative'
+});
+const baseStylePanel = /*#__PURE__*/defineStyle$1({
+  pt: '2',
+  px: '4',
+  pb: '5'
+});
+const baseStyleIcon = /*#__PURE__*/defineStyle$1({
+  fontSize: '1.25em'
+});
+const baseStyle = /*#__PURE__*/definePartsStyle({
+  container: baseStyleContainer,
+  button: baseStyleButton,
+  panel: baseStylePanel,
+  icon: baseStyleIcon
+});
+const accordionTheme = /*#__PURE__*/defineMultiStyleConfig({
+  baseStyle
+});
+
+const {
+  definePartsStyle: definePartsStyle$1,
+  defineMultiStyleConfig: defineMultiStyleConfig$1
+} = /*#__PURE__*/createMultiStyleConfigHelpers(alertAnatomy.keys);
+const $fg = /*#__PURE__*/cssVar('alert-fg');
+const $bg = /*#__PURE__*/cssVar('alert-bg');
+const baseStyle$1 = /*#__PURE__*/definePartsStyle$1(props => {
+  return {
+    container: {
+      bg: $bg.reference,
+      px: '4',
+      py: '2',
+      borderRadius: 'sm'
+    },
+    title: {
+      fontWeight: 'regular',
+      textStyle: 'text.sm',
+      marginEnd: '2'
+    },
+    description: {
+      lineHeight: '6'
+    },
+    icon: {
+      color: $fg.reference,
+      flexShrink: 0,
+      marginEnd: '3',
+      w: '4',
+      h: '4'
+    },
+    action: {
+      color: props.colorScheme === 'neutral' && props.variant === 'light' ? 'primary.500' : 'inherit',
+      '& +.chakra-alert__close': {
+        ml: '3'
+      }
+    },
+    close: {
+      color: $fg.reference,
+      w: '4',
+      h: '4'
+    },
+    spinner: {
+      color: $fg.reference,
+      flexShrink: 0,
+      marginEnd: '3',
+      w: '5',
+      h: '5'
     }
-  },
-  close: {
-    color: $fg.reference,
-    w: '4',
-    h: '4'
-  },
-  spinner: {
-    color: $fg.reference,
-    flexShrink: 0,
-    marginEnd: '3',
-    w: '5',
-    h: '5'
-  }
+  };
 });
 function getBg(props) {
   const {
@@ -3450,7 +3508,7 @@ function getBg(props) {
     light: c === 'neutral' ? `colors.${c}.300` : `colors.${c}.50`
   };
 }
-const variantLight = /*#__PURE__*/definePartsStyle(props => {
+const variantLight = /*#__PURE__*/definePartsStyle$1(props => {
   const {
     colorScheme: c
   } = props;
@@ -3463,7 +3521,7 @@ const variantLight = /*#__PURE__*/definePartsStyle(props => {
     }
   };
 });
-const variantSolid = /*#__PURE__*/definePartsStyle(props => {
+const variantSolid = /*#__PURE__*/definePartsStyle$1(props => {
   const {
     colorScheme: c
   } = props;
@@ -3478,8 +3536,8 @@ const variants = {
   light: variantLight,
   solid: variantSolid
 };
-const alertTheme = /*#__PURE__*/defineMultiStyleConfig({
-  baseStyle,
+const alertTheme = /*#__PURE__*/defineMultiStyleConfig$1({
+  baseStyle: baseStyle$1,
   variants,
   defaultProps: {
     variant: 'light',
@@ -3682,6 +3740,12 @@ const Button$1 = /*#__PURE__*/defineStyleConfig({
         },
         _disabled: {
           border: 0
+        },
+        '.chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)': {
+          marginEnd: '-1px'
+        },
+        '.chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)': {
+          marginBottom: '-1px'
         }
       };
       const disabledLoading = {
@@ -3839,10 +3903,10 @@ const CardStyle = /*#__PURE__*/defineStyleConfig({
 });
 
 const {
-  definePartsStyle: definePartsStyle$1,
-  defineMultiStyleConfig: defineMultiStyleConfig$1
+  definePartsStyle: definePartsStyle$2,
+  defineMultiStyleConfig: defineMultiStyleConfig$2
 } = /*#__PURE__*/createMultiStyleConfigHelpers$1(checkboxAnatomy.keys);
-const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
+const baseStyle$2 = /*#__PURE__*/definePartsStyle$2({
   control: {
     borderRadius: 'sm',
     w: 4,
@@ -3864,7 +3928,7 @@ const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
     cursor: 'not-allowed'
   }
 });
-const errors = /*#__PURE__*/definePartsStyle$1({
+const errors = /*#__PURE__*/definePartsStyle$2({
   control: {
     borderColor: 'danger.500',
     _checked: {
@@ -3887,7 +3951,7 @@ const errors = /*#__PURE__*/definePartsStyle$1({
     fontSize: '8px'
   }
 });
-const unstyled = /*#__PURE__*/definePartsStyle$1({
+const unstyled = /*#__PURE__*/definePartsStyle$2({
   control: {
     borderColor: 'neutral.600',
     _checked: {
@@ -3931,8 +3995,8 @@ const variants$1 = {
   errors,
   unstyled
 };
-const Checkbox = /*#__PURE__*/defineMultiStyleConfig$1({
-  baseStyle: baseStyle$1,
+const Checkbox = /*#__PURE__*/defineMultiStyleConfig$2({
+  baseStyle: baseStyle$2,
   variants: variants$1,
   defaultProps: {
     variant: 'unstyled'
@@ -3980,7 +4044,10 @@ const Chips$1 = /*#__PURE__*/defineStyleConfig({
         bg: 'neutral.200',
         color: 'black.low',
         borderColor: 'neutral.200',
-        cursor: 'not-allowed'
+        cursor: 'not-allowed',
+        _hover: {
+          bg: 'neutral.200'
+        }
       };
       chipsProps = {
         ...chipsProps,
@@ -4005,21 +4072,21 @@ const Chips$1 = /*#__PURE__*/defineStyleConfig({
   }
 });
 
-const baseStyle$2 = /*#__PURE__*/defineStyle$1({
+const baseStyle$3 = /*#__PURE__*/defineStyle$1({
   fontSize: 'field.sm',
   fontWeight: 'normal',
   marginEnd: 1,
   mb: 1
 });
 const FormLabel = /*#__PURE__*/defineStyleConfig({
-  baseStyle: baseStyle$2
+  baseStyle: baseStyle$3
 });
 
 const {
-  definePartsStyle: definePartsStyle$2,
-  defineMultiStyleConfig: defineMultiStyleConfig$2
+  definePartsStyle: definePartsStyle$3,
+  defineMultiStyleConfig: defineMultiStyleConfig$3
 } = /*#__PURE__*/createMultiStyleConfigHelpers(inputAnatomy.keys);
-const baseStyle$3 = /*#__PURE__*/definePartsStyle$2({
+const baseStyle$4 = /*#__PURE__*/definePartsStyle$3({
   field: {
     width: '100%',
     minWidth: 0,
@@ -4062,20 +4129,20 @@ const size = {
   })
 };
 const sizes = {
-  lg: /*#__PURE__*/definePartsStyle$2({
+  lg: /*#__PURE__*/definePartsStyle$3({
     field: size.lg,
     addon: size.lg
   }),
-  md: /*#__PURE__*/definePartsStyle$2({
+  md: /*#__PURE__*/definePartsStyle$3({
     field: size.md,
     addon: size.md
   }),
-  sm: /*#__PURE__*/definePartsStyle$2({
+  sm: /*#__PURE__*/definePartsStyle$3({
     field: size.sm,
     addon: size.sm
   })
 };
-const outline = /*#__PURE__*/definePartsStyle$2(props => {
+const outline = /*#__PURE__*/definePartsStyle$3(props => {
   const field = {
     border: 0,
     outline: 0,
@@ -4093,7 +4160,7 @@ const outline = /*#__PURE__*/definePartsStyle$2(props => {
     field
   };
 });
-const unstyled$1 = /*#__PURE__*/definePartsStyle$2({
+const unstyled$1 = /*#__PURE__*/definePartsStyle$3({
   field: {
     bg: 'transparent',
     px: '0',
@@ -4109,8 +4176,8 @@ const variants$2 = {
   outline,
   unstyled: unstyled$1
 };
-const Input = /*#__PURE__*/defineMultiStyleConfig$2({
-  baseStyle: baseStyle$3,
+const Input = /*#__PURE__*/defineMultiStyleConfig$3({
+  baseStyle: baseStyle$4,
   sizes,
   variants: variants$2,
   defaultProps: {
@@ -4129,6 +4196,9 @@ const rotate = /*#__PURE__*/keyframes({
   }
 });
 const getLoaderColor = color => {
+  if (!color) {
+    return 'var(--chakra-colors-white-high)';
+  }
   const colorValue = color.split('.');
   let backgroundColor;
   switch (colorValue.length) {
@@ -4231,10 +4301,10 @@ const LoaderStyle = /*#__PURE__*/defineStyleConfig({
 });
 
 const {
-  definePartsStyle: definePartsStyle$3
+  definePartsStyle: definePartsStyle$4
 } = /*#__PURE__*/createMultiStyleConfigHelpers(popoverAnatomy.keys);
 const Popover = {
-  baseStyle: props => definePartsStyle$3({
+  baseStyle: props => definePartsStyle$4({
     popper: {
       background: mode('white', 'inherit')(props)
     }
@@ -4242,10 +4312,10 @@ const Popover = {
 };
 
 const {
-  definePartsStyle: definePartsStyle$4,
-  defineMultiStyleConfig: defineMultiStyleConfig$3
+  definePartsStyle: definePartsStyle$5,
+  defineMultiStyleConfig: defineMultiStyleConfig$4
 } = /*#__PURE__*/createMultiStyleConfigHelpers$1(radioAnatomy.keys);
-const baseStyle$4 = /*#__PURE__*/definePartsStyle$4({
+const baseStyle$5 = /*#__PURE__*/definePartsStyle$5({
   control: {
     border: '1px solid',
     width: '16px',
@@ -4261,7 +4331,7 @@ const baseStyle$4 = /*#__PURE__*/definePartsStyle$4({
     }
   }
 });
-const errors$1 = /*#__PURE__*/definePartsStyle$4({
+const errors$1 = /*#__PURE__*/definePartsStyle$5({
   control: {
     borderColor: 'danger.500',
     _checked: {
@@ -4296,7 +4366,7 @@ const errors$1 = /*#__PURE__*/definePartsStyle$4({
     fontSize: '12px'
   }
 });
-const unstyled$2 = /*#__PURE__*/definePartsStyle$4({
+const unstyled$2 = /*#__PURE__*/definePartsStyle$5({
   control: {
     borderColor: 'neutral.600',
     _checked: {
@@ -4335,8 +4405,8 @@ const variants$3 = {
   errors: errors$1,
   unstyled: unstyled$2
 };
-const Radio = /*#__PURE__*/defineMultiStyleConfig$3({
-  baseStyle: baseStyle$4,
+const Radio = /*#__PURE__*/defineMultiStyleConfig$4({
+  baseStyle: baseStyle$5,
   variants: variants$3,
   defaultProps: {
     variant: 'unstyled'
@@ -4344,8 +4414,8 @@ const Radio = /*#__PURE__*/defineMultiStyleConfig$3({
 });
 
 const {
-  defineMultiStyleConfig: defineMultiStyleConfig$4,
-  definePartsStyle: definePartsStyle$5
+  defineMultiStyleConfig: defineMultiStyleConfig$5,
+  definePartsStyle: definePartsStyle$6
 } = /*#__PURE__*/createMultiStyleConfigHelpers(switchAnatomy.keys);
 const $width = /*#__PURE__*/cssVar$1('switch-track-width');
 const $height = /*#__PURE__*/cssVar$1('switch-track-height');
@@ -4363,7 +4433,7 @@ const baseStyleThumb = /*#__PURE__*/defineStyle$1({
     transform: `translateX(${$translateX.reference})`
   }
 });
-const baseStyle$5 = /*#__PURE__*/definePartsStyle$5(() => ({
+const baseStyle$6 = /*#__PURE__*/definePartsStyle$6(() => ({
   container: {
     [$diff.variable]: diffValue,
     [$translateX.variable]: $diff.reference,
@@ -4388,27 +4458,39 @@ const baseStyle$5 = /*#__PURE__*/definePartsStyle$5(() => ({
   thumb: baseStyleThumb
 }));
 const sizes$1 = {
-  sm: /*#__PURE__*/definePartsStyle$5({
+  sm: /*#__PURE__*/definePartsStyle$6({
     container: {
-      [$width.variable]: '2.125rem',
-      [$height.variable]: '1.063rem'
+      [$width.variable]: '1.875rem',
+      [$height.variable]: '0.75rem'
+    },
+    thumb: {
+      [$width.variable]: '0.75rem',
+      [$height.variable]: '0.75rem'
     }
   }),
-  md: /*#__PURE__*/definePartsStyle$5({
+  md: /*#__PURE__*/definePartsStyle$6({
     container: {
-      [$width.variable]: '2.875rem',
-      [$height.variable]: '1.5rem'
+      [$width.variable]: '2.375rem',
+      [$height.variable]: '1rem'
+    },
+    thumb: {
+      [$width.variable]: '1rem',
+      [$height.variable]: '1rem'
     }
   }),
-  lg: /*#__PURE__*/definePartsStyle$5({
+  lg: /*#__PURE__*/definePartsStyle$6({
     container: {
-      [$width.variable]: '3.625rem',
-      [$height.variable]: '1.813rem'
+      [$width.variable]: '3.25rem',
+      [$height.variable]: '1.375rem'
+    },
+    thumb: {
+      [$width.variable]: '1.375rem',
+      [$height.variable]: '1.375rem'
     }
   })
 };
-const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$4({
-  baseStyle: baseStyle$5,
+const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$5({
+  baseStyle: baseStyle$6,
   sizes: sizes$1,
   defaultProps: {
     size: 'md'
@@ -4416,10 +4498,10 @@ const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$4({
 });
 
 const {
-  defineMultiStyleConfig: defineMultiStyleConfig$5,
-  definePartsStyle: definePartsStyle$6
+  defineMultiStyleConfig: defineMultiStyleConfig$6,
+  definePartsStyle: definePartsStyle$7
 } = /*#__PURE__*/createMultiStyleConfigHelpers(tableAnatomy.keys);
-const baseStyle$6 = /*#__PURE__*/definePartsStyle$6({
+const baseStyle$7 = /*#__PURE__*/definePartsStyle$7({
   table: {
     fontVariantNumeric: 'lining-nums tabular-nums',
     borderCollapse: 'collapse',
@@ -4452,7 +4534,7 @@ const numericStyles = /*#__PURE__*/defineStyle$1({
     textAlign: 'end'
   }
 });
-const variantSimple = /*#__PURE__*/definePartsStyle$6(props => {
+const variantSimple = /*#__PURE__*/definePartsStyle$7(props => {
   const {
     colorScheme: c
   } = props;
@@ -4482,7 +4564,7 @@ const variantSimple = /*#__PURE__*/definePartsStyle$6(props => {
     }
   };
 });
-const variantStripe = /*#__PURE__*/definePartsStyle$6(props => {
+const variantStripe = /*#__PURE__*/definePartsStyle$7(props => {
   const {
     colorScheme: c
   } = props;
@@ -4531,7 +4613,7 @@ const variants$4 = {
   unstyled: /*#__PURE__*/defineStyle$1({})
 };
 const sizes$2 = {
-  sm: /*#__PURE__*/definePartsStyle$6({
+  sm: /*#__PURE__*/definePartsStyle$7({
     th: {
       px: '4',
       py: '1',
@@ -4550,7 +4632,7 @@ const sizes$2 = {
       fontSize: 'xs'
     }
   }),
-  md: /*#__PURE__*/definePartsStyle$6({
+  md: /*#__PURE__*/definePartsStyle$7({
     th: {
       px: '2',
       py: '4',
@@ -4580,7 +4662,7 @@ const sizes$2 = {
       fontSize: 'sm'
     }
   }),
-  lg: /*#__PURE__*/definePartsStyle$6({
+  lg: /*#__PURE__*/definePartsStyle$7({
     th: {
       px: '8',
       py: '4',
@@ -4599,8 +4681,8 @@ const sizes$2 = {
     }
   })
 };
-const tableTheme = /*#__PURE__*/defineMultiStyleConfig$5({
-  baseStyle: baseStyle$6,
+const tableTheme = /*#__PURE__*/defineMultiStyleConfig$6({
+  baseStyle: baseStyle$7,
   variants: variants$4,
   sizes: sizes$2,
   defaultProps: {
@@ -4693,6 +4775,7 @@ const Textarea = /*#__PURE__*/defineStyleConfig$1({
 
 var components = {
   __proto__: null,
+  Accordion: accordionTheme,
   Alert: alertTheme,
   Badge: Badge$1,
   Button: Button$1,
@@ -4721,8 +4804,17 @@ const getTheme = foundations => {
     },
     styles: {
       global: {
-        '*::-webkit-scrollbar-thumb': {
-          background: 'neutral.400'
+        '&::-webkit-scrollbar': {
+          width: '10px',
+          height: '10px'
+        },
+        '&::-webkit-scrollbar-track': {
+          background: 'white'
+        },
+        '&::-webkit-scrollbar-thumb': {
+          background: 'neutral.400',
+          borderRadius: '24px',
+          border: '2px solid white'
         },
         body: {
           fontSize: 'text.sm',
@@ -4782,7 +4874,7 @@ const Provider = ({
   }), []);
   return /*#__PURE__*/React__default.createElement(ProviderContext.Provider, {
     value: provider
-  }, children);
+  }, /*#__PURE__*/React__default.createElement(ToastContainer, null), children);
 };
 Provider.displayName = 'Provider';