@ctlyst.id/internal-ui 2.1.4 → 2.1.6

package/dist/internal-ui.cjs.development.js

@@ -28,6 +28,8 @@ var anatomy = require('@chakra-ui/anatomy');
 var styledSystem = require('@chakra-ui/styled-system');
 var themeTools = require('@chakra-ui/theme-tools');
 var axios = _interopDefault(require('axios'));
+require('react-toastify/dist/ReactToastify.css');
+var reactToastify = require('react-toastify');
 
 /* eslint-disable react/require-default-props */
 function CheckIcon() {
@@ -141,6 +143,9 @@ const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
     __css: styles
   });
 });
+Loader.defaultProps = {
+  size: 'md'
+};
 
 const Button = /*#__PURE__*/react.forwardRef((props, ref) => {
   const {
@@ -269,9 +274,6 @@ const Badge = props => {
   } = props;
   return /*#__PURE__*/React__default.createElement(react.Badge, Object.assign({
     borderRadius: pill ? 'xl' : 'sm',
-    variant: "primary-solid",
-    px: "2",
-    h: "4.5",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "space-between",
@@ -1984,6 +1986,7 @@ Logo.defaultProps = {
 };
 
 const Profile = ({
+  color,
   brandColor,
   data,
   onLogout
@@ -2007,17 +2010,19 @@ const Profile = ({
       textDecor: 'none'
     },
     m: 0,
-    onClick: onToggle
+    onClick: onToggle,
+    color: color
   }, /*#__PURE__*/React.createElement(react.HStack, null, /*#__PURE__*/React.createElement(react.VStack, {
     alignItems: "flex-end",
     spacing: 0,
     ml: "2",
-    color: "primary.500"
+    color: color
   }, /*#__PURE__*/React.createElement(react.Text, {
     textStyle: "text.xs",
-    mb: 1,
-    color: "neutral.800"
-  }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/React.createElement(react.Flex, null, (data === null || data === void 0 ? void 0 : data.userRole) && /*#__PURE__*/React.createElement(react.Text, {
+    mb: 1
+  }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/React.createElement(react.Flex, {
+    alignItems: "center"
+  }, (data === null || data === void 0 ? void 0 : data.userRole) && /*#__PURE__*/React.createElement(react.Text, {
     textStyle: "text.xs"
   }, (data === null || data === void 0 ? void 0 : data.userRole) || 'user'), /*#__PURE__*/React.createElement(react.Box, {
     h: "3",
@@ -2064,7 +2069,8 @@ const Profile = ({
 Profile.defaultProps = {
   brandColor: 'primary.500',
   data: undefined,
-  onLogout: undefined
+  onLogout: undefined,
+  color: undefined
 };
 
 const SwitchMode = () => {
@@ -2102,15 +2108,9 @@ const Version = ({
   version,
   environment,
   onOpenModalRelease
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, version && /*#__PURE__*/React.createElement(react.Badge, {
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, version && /*#__PURE__*/React.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__*/React.createElement(react.Box, {
@@ -2135,32 +2135,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__*/React.createElement(react.Box, Object.assign({
+}) => /*#__PURE__*/React.createElement(react.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__*/React.createElement(react.Flex, {
+  h: "auto",
   w: "full",
   alignItems: "center",
-  justifyContent: "space-between",
+  justifyContent: profile ? 'flex-end' : 'space-between',
   pos: "relative"
-}, /*#__PURE__*/React.createElement(react.Flex, {
+}, mainLogo && /*#__PURE__*/React.createElement(react.Flex, {
   alignItems: "center"
 }, /*#__PURE__*/React.createElement(Logo, {
   url: urlLogo,
   imageUrl: mainLogo,
   height: mainLogoSize
-}), children && children), /*#__PURE__*/React.createElement(react.HStack, {
+}), children && children), centerLogo && /*#__PURE__*/React.createElement(react.HStack, {
   w: "fit-content",
   spacing: 2,
   alignItems: "center",
@@ -2176,9 +2180,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__*/React.createElement(react.Flex, {
+})), profile || /*#__PURE__*/React.createElement(react.Flex, {
   alignItems: "center"
 }, !hideSwitchMode && /*#__PURE__*/React.createElement(SwitchMode, null), /*#__PURE__*/React.createElement(Profile, {
+  color: props.color,
   brandColor: brandColor,
   data: data,
   onLogout: onLogout
@@ -2194,7 +2199,8 @@ Header.defaultProps = {
   centerLogo: undefined,
   centerLogoSize: undefined,
   hideEnv: false,
-  urlLogo: undefined
+  urlLogo: undefined,
+  profile: undefined
 };
 
 const ModalBody = /*#__PURE__*/React__default.forwardRef(({
@@ -3267,7 +3273,7 @@ const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
     p: 4,
     fontSize: "text.md",
     _selected: {
-      borderColor: 'primary.400',
+      borderColor: 'primary.500',
       color: 'primary.500',
       transform: 'translateY(-2px)',
       _hover: {
@@ -3403,50 +3409,97 @@ Uploader.defaultProps = {
 const {
   definePartsStyle,
   defineMultiStyleConfig
-} = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.alertAnatomy.keys);
-const $fg = /*#__PURE__*/styledSystem.cssVar('alert-fg');
-const $ac = /*#__PURE__*/styledSystem.cssVar('alert-ac');
-const $bg = /*#__PURE__*/styledSystem.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__*/styledSystem.createMultiStyleConfigHelpers(anatomy.accordionAnatomy.keys);
+const baseStyleContainer = /*#__PURE__*/styledSystem.defineStyle({
+  border: 'none'
+});
+const baseStyleButton = /*#__PURE__*/styledSystem.defineStyle({
+  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__*/styledSystem.defineStyle({
+  pt: '2',
+  px: '4',
+  pb: '5'
+});
+const baseStyleIcon = /*#__PURE__*/styledSystem.defineStyle({
+  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__*/styledSystem.createMultiStyleConfigHelpers(anatomy.alertAnatomy.keys);
+const $fg = /*#__PURE__*/styledSystem.cssVar('alert-fg');
+const $bg = /*#__PURE__*/styledSystem.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 {
@@ -3456,7 +3509,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;
@@ -3469,7 +3522,7 @@ const variantLight = /*#__PURE__*/definePartsStyle(props => {
     }
   };
 });
-const variantSolid = /*#__PURE__*/definePartsStyle(props => {
+const variantSolid = /*#__PURE__*/definePartsStyle$1(props => {
   const {
     colorScheme: c
   } = props;
@@ -3484,8 +3537,8 @@ const variants = {
   light: variantLight,
   solid: variantSolid
 };
-const alertTheme = /*#__PURE__*/defineMultiStyleConfig({
-  baseStyle,
+const alertTheme = /*#__PURE__*/defineMultiStyleConfig$1({
+  baseStyle: baseStyle$1,
   variants,
   defaultProps: {
     variant: 'light',
@@ -3688,6 +3741,12 @@ const Button$1 = /*#__PURE__*/styledSystem.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 = {
@@ -3845,10 +3904,10 @@ const CardStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
 });
 
 const {
-  definePartsStyle: definePartsStyle$1,
-  defineMultiStyleConfig: defineMultiStyleConfig$1
+  definePartsStyle: definePartsStyle$2,
+  defineMultiStyleConfig: defineMultiStyleConfig$2
 } = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.checkboxAnatomy.keys);
-const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
+const baseStyle$2 = /*#__PURE__*/definePartsStyle$2({
   control: {
     borderRadius: 'sm',
     w: 4,
@@ -3870,7 +3929,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: {
@@ -3893,7 +3952,7 @@ const errors = /*#__PURE__*/definePartsStyle$1({
     fontSize: '8px'
   }
 });
-const unstyled = /*#__PURE__*/definePartsStyle$1({
+const unstyled = /*#__PURE__*/definePartsStyle$2({
   control: {
     borderColor: 'neutral.600',
     _checked: {
@@ -3937,8 +3996,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'
@@ -3986,7 +4045,10 @@ const Chips$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
         bg: 'neutral.200',
         color: 'black.low',
         borderColor: 'neutral.200',
-        cursor: 'not-allowed'
+        cursor: 'not-allowed',
+        _hover: {
+          bg: 'neutral.200'
+        }
       };
       chipsProps = {
         ...chipsProps,
@@ -4011,21 +4073,21 @@ const Chips$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
   }
 });
 
-const baseStyle$2 = /*#__PURE__*/styledSystem.defineStyle({
+const baseStyle$3 = /*#__PURE__*/styledSystem.defineStyle({
   fontSize: 'field.sm',
   fontWeight: 'normal',
   marginEnd: 1,
   mb: 1
 });
 const FormLabel = /*#__PURE__*/styledSystem.defineStyleConfig({
-  baseStyle: baseStyle$2
+  baseStyle: baseStyle$3
 });
 
 const {
-  definePartsStyle: definePartsStyle$2,
-  defineMultiStyleConfig: defineMultiStyleConfig$2
+  definePartsStyle: definePartsStyle$3,
+  defineMultiStyleConfig: defineMultiStyleConfig$3
 } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.inputAnatomy.keys);
-const baseStyle$3 = /*#__PURE__*/definePartsStyle$2({
+const baseStyle$4 = /*#__PURE__*/definePartsStyle$3({
   field: {
     width: '100%',
     minWidth: 0,
@@ -4068,20 +4130,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,
@@ -4099,7 +4161,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',
@@ -4115,8 +4177,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: {
@@ -4125,6 +4187,7 @@ const Input = /*#__PURE__*/defineMultiStyleConfig$2({
   }
 });
 
+/* eslint-disable prefer-destructuring */
 const rotate = /*#__PURE__*/react$1.keyframes({
   '0%': {
     transform: 'rotate(0deg)'
@@ -4134,10 +4197,26 @@ const rotate = /*#__PURE__*/react$1.keyframes({
   }
 });
 const getLoaderColor = color => {
-  if (color === 'primary') return '--chakra-colors-primary-600';
-  if (color === 'danger') return '--chakra-colors-danger-500';
-  if (color === 'warning') return '--chakra-colors-warning-700';
-  return '--chakra-colors-white-high';
+  if (!color) {
+    return 'var(--chakra-colors-white-high)';
+  }
+  const colorValue = color.split('.');
+  let backgroundColor;
+  switch (colorValue.length) {
+    case 1:
+      backgroundColor = colorValue[0];
+      break;
+    case 2:
+      backgroundColor = `var(--chakra-colors-${colorValue[0]}-${colorValue[1]})`;
+      break;
+    default:
+      backgroundColor = 'var(--chakra-colors-white-high)';
+      break;
+  }
+  if (color === 'primary') return 'var(--chakra-colors-primary-600)';
+  if (color === 'danger') return 'var(--chakra-colors-danger-500)';
+  if (color === 'warning') return 'var(--chakra-colors-warning-700)';
+  return backgroundColor;
 };
 const LoaderStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
   baseStyle: props => {
@@ -4148,7 +4227,7 @@ const LoaderStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
       justifyContent: 'center',
       alignItems: 'center',
       animation: `${rotate} 1s linear infinite`,
-      background: `conic-gradient(from 180deg at 50% 50%, var(${colors}) 0deg, rgba(217, 217, 217, 0) 360deg);`,
+      background: `conic-gradient(from 180deg at 50% 50%, ${colors} 0deg, rgba(217, 217, 217, 0) 360deg);`,
       ':before': {
         content: `''`,
         display: 'block',
@@ -4223,10 +4302,10 @@ const LoaderStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
 });
 
 const {
-  definePartsStyle: definePartsStyle$3
+  definePartsStyle: definePartsStyle$4
 } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.popoverAnatomy.keys);
 const Popover = {
-  baseStyle: props => definePartsStyle$3({
+  baseStyle: props => definePartsStyle$4({
     popper: {
       background: themeTools.mode('white', 'inherit')(props)
     }
@@ -4234,10 +4313,10 @@ const Popover = {
 };
 
 const {
-  definePartsStyle: definePartsStyle$4,
-  defineMultiStyleConfig: defineMultiStyleConfig$3
+  definePartsStyle: definePartsStyle$5,
+  defineMultiStyleConfig: defineMultiStyleConfig$4
 } = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.radioAnatomy.keys);
-const baseStyle$4 = /*#__PURE__*/definePartsStyle$4({
+const baseStyle$5 = /*#__PURE__*/definePartsStyle$5({
   control: {
     border: '1px solid',
     width: '16px',
@@ -4253,7 +4332,7 @@ const baseStyle$4 = /*#__PURE__*/definePartsStyle$4({
     }
   }
 });
-const errors$1 = /*#__PURE__*/definePartsStyle$4({
+const errors$1 = /*#__PURE__*/definePartsStyle$5({
   control: {
     borderColor: 'danger.500',
     _checked: {
@@ -4288,7 +4367,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: {
@@ -4327,8 +4406,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'
@@ -4336,8 +4415,8 @@ const Radio = /*#__PURE__*/defineMultiStyleConfig$3({
 });
 
 const {
-  defineMultiStyleConfig: defineMultiStyleConfig$4,
-  definePartsStyle: definePartsStyle$5
+  defineMultiStyleConfig: defineMultiStyleConfig$5,
+  definePartsStyle: definePartsStyle$6
 } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.switchAnatomy.keys);
 const $width = /*#__PURE__*/themeTools.cssVar('switch-track-width');
 const $height = /*#__PURE__*/themeTools.cssVar('switch-track-height');
@@ -4355,7 +4434,7 @@ const baseStyleThumb = /*#__PURE__*/styledSystem.defineStyle({
     transform: `translateX(${$translateX.reference})`
   }
 });
-const baseStyle$5 = /*#__PURE__*/definePartsStyle$5(() => ({
+const baseStyle$6 = /*#__PURE__*/definePartsStyle$6(() => ({
   container: {
     [$diff.variable]: diffValue,
     [$translateX.variable]: $diff.reference,
@@ -4380,27 +4459,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'
@@ -4408,10 +4499,10 @@ const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$4({
 });
 
 const {
-  defineMultiStyleConfig: defineMultiStyleConfig$5,
-  definePartsStyle: definePartsStyle$6
+  defineMultiStyleConfig: defineMultiStyleConfig$6,
+  definePartsStyle: definePartsStyle$7
 } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.tableAnatomy.keys);
-const baseStyle$6 = /*#__PURE__*/definePartsStyle$6({
+const baseStyle$7 = /*#__PURE__*/definePartsStyle$7({
   table: {
     fontVariantNumeric: 'lining-nums tabular-nums',
     borderCollapse: 'collapse',
@@ -4444,7 +4535,7 @@ const numericStyles = /*#__PURE__*/styledSystem.defineStyle({
     textAlign: 'end'
   }
 });
-const variantSimple = /*#__PURE__*/definePartsStyle$6(props => {
+const variantSimple = /*#__PURE__*/definePartsStyle$7(props => {
   const {
     colorScheme: c
   } = props;
@@ -4474,7 +4565,7 @@ const variantSimple = /*#__PURE__*/definePartsStyle$6(props => {
     }
   };
 });
-const variantStripe = /*#__PURE__*/definePartsStyle$6(props => {
+const variantStripe = /*#__PURE__*/definePartsStyle$7(props => {
   const {
     colorScheme: c
   } = props;
@@ -4523,7 +4614,7 @@ const variants$4 = {
   unstyled: /*#__PURE__*/styledSystem.defineStyle({})
 };
 const sizes$2 = {
-  sm: /*#__PURE__*/definePartsStyle$6({
+  sm: /*#__PURE__*/definePartsStyle$7({
     th: {
       px: '4',
       py: '1',
@@ -4542,7 +4633,7 @@ const sizes$2 = {
       fontSize: 'xs'
     }
   }),
-  md: /*#__PURE__*/definePartsStyle$6({
+  md: /*#__PURE__*/definePartsStyle$7({
     th: {
       px: '2',
       py: '4',
@@ -4572,7 +4663,7 @@ const sizes$2 = {
       fontSize: 'sm'
     }
   }),
-  lg: /*#__PURE__*/definePartsStyle$6({
+  lg: /*#__PURE__*/definePartsStyle$7({
     th: {
       px: '8',
       py: '4',
@@ -4591,8 +4682,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: {
@@ -4685,6 +4776,7 @@ const Textarea = /*#__PURE__*/react.defineStyleConfig({
 
 var components = {
   __proto__: null,
+  Accordion: accordionTheme,
   Alert: alertTheme,
   Badge: Badge$1,
   Button: Button$1,
@@ -4713,8 +4805,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',
@@ -4774,7 +4875,7 @@ const Provider = ({
   }), []);
   return /*#__PURE__*/React__default.createElement(ProviderContext.Provider, {
     value: provider
-  }, children);
+  }, /*#__PURE__*/React__default.createElement(reactToastify.ToastContainer, null), children);
 };
 Provider.displayName = 'Provider';