@ctlyst.id/internal-ui 1.0.3 → 1.0.4-canary.0

package/dist/internal-ui.esm.js

@@ -1,4 +1,4 @@
-import { useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, InputGroup, Input as Input$1, InputRightAddon, FormControl, FormLabel as FormLabel$1, InputRightElement, FormHelperText, FormErrorMessage, InputLeftAddon, InputLeftElement, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Badge, ModalBody as ModalBody$1, ModalCloseButton as ModalCloseButton$1, ModalFooter as ModalFooter$1, ModalHeader as ModalHeader$1, Icon, Portal, Link, forwardRef as forwardRef$1, Button as Button$1, VisuallyHidden, Select as Select$1, theme as theme$1, useTab, useMultiStyleConfig, TabList as TabList$1, TabPanel as TabPanel$1, Stack, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, extendTheme } from '@chakra-ui/react';
+import { useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, InputGroup, Input as Input$1, InputRightAddon, FormControl, FormLabel as FormLabel$1, InputRightElement, FormHelperText, FormErrorMessage, theme as theme$1, InputLeftAddon, InputLeftElement, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Badge, ModalBody as ModalBody$1, ModalCloseButton as ModalCloseButton$1, ModalFooter as ModalFooter$1, ModalHeader as ModalHeader$1, Icon, Portal, Link, forwardRef as forwardRef$1, Button as Button$1, VisuallyHidden, Select as Select$1, useTab, useMultiStyleConfig, TabList as TabList$1, TabPanel as TabPanel$1, Stack, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, extendTheme } from '@chakra-ui/react';
 export { AlertDialog, ModalBody as AlertDialogBody, ModalCloseButton as AlertDialogCloseButton, AlertDialogContent, ModalFooter as AlertDialogFooter, ModalHeader as AlertDialogHeader, ModalOverlay as AlertDialogOverlay, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, DrawerContent, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, Modal, ModalContent, ModalContextProvider, ModalFocusScope, ModalOverlay, TabIndicator, TabPanels, Tabs, TabsDescendantsProvider, TabsProvider, useDrawerContext, useModal, useModalContext, useModalStyles, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTabsStyles } from '@chakra-ui/react';
 import React__default, { createElement, useRef, useEffect, useState, useMemo, Fragment, forwardRef, useCallback, createContext, useContext } from 'react';
 import { FiChevronsRight, FiHome, FiCalendar, FiX, FiPower, FiMoon, FiSun, FiChevronDown } from 'react-icons/fi';
@@ -8,6 +8,7 @@ import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from '@
 import classnames from 'classnames';
 import ReactDatePicker from 'react-datepicker';
 import { useColorMode } from '@chakra-ui/system';
+import styled from '@emotion/styled';
 import ReactSelect from 'react-select';
 import { AsyncPaginate } from 'react-select-async-paginate';
 import ReactSelectAsyncCreatable from 'react-select/async-creatable';
@@ -1197,1042 +1198,1144 @@ Datepicker.defaultProps = {
   showMonth: false
 };
 
-/* eslint-disable no-nested-ternary */
-const Field = props => {
-  const {
-    label,
-    isError,
-    error,
-    helperText,
-    isRequired,
-    children
-  } = props;
-  return /*#__PURE__*/React__default.createElement(FormControl, {
-    isInvalid: isError
-  }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(FormLabel$1, {
-    fontSize: "field.sm",
-    requiredIndicator: undefined
-  }, isRequired && /*#__PURE__*/React__default.createElement(Box, {
-    as: "span",
-    color: "red.500",
-    ml: 0,
-    mr: 1
-  }, "*"), label) : label), children, !isError ? helperText && /*#__PURE__*/React__default.createElement(FormHelperText, {
-    fontSize: "field.sm"
-  }, helperText) : typeof error === 'string' ? /*#__PURE__*/React__default.createElement(FormErrorMessage, {
-    textStyle: "field.sm",
-    fontSize: "field.sm",
-    mt: 1,
-    marginStart: 1
-  }, error) : error);
+const DatePickerMonth = ({
+  onChange,
+  min,
+  max,
+  ...props
+}) => {
+  const [date, setDate] = React__default.useState(null);
+  return /*#__PURE__*/React__default.createElement(Box, {
+    fontSize: '12px',
+    lineHeight: '18px',
+    css: css`
+        input[type='date']::-webkit-inner-spin-button,
+        input[type='date']::-webkit-calendar-picker-indicator {
+          display: none;
+          -webkit-appearance: none;
+        }
+        input[value=''] {
+          width: 58px;
+        }
+      `
+  }, /*#__PURE__*/React__default.createElement(Input$1, {
+    "data-test-id": props['data-test-id'],
+    type: "date",
+    width: date ? '51px' : '58px',
+    onChange: e => {
+      onChange(e.target.value);
+      setDate(e.target.value);
+    },
+    p: '8px',
+    min: min,
+    max: max,
+    required: true,
+    css: css`
+          border: 1px solid transparent;
+
+          &:focus,
+          &:hover {
+            border: 1px solid transparent;
+          }
+
+          &::placeholder {
+            color: #111111;
+          }
+        `,
+    value: date !== null && date !== void 0 ? date : ''
+  }));
 };
-Field.defaultProps = {
-  label: '',
-  isError: false,
-  error: undefined,
-  helperText: undefined,
-  isRequired: false
+DatePickerMonth.defaultProps = {
+  'data-test-id': ''
 };
 
-const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  const {
-    value,
-    type,
-    addOnLeft,
-    addOnRight,
-    elementLeft,
-    elementRight,
-    size,
-    isRequired,
-    label,
-    isError,
-    error,
-    helperText,
-    ...inputProps
-  } = props;
-  return /*#__PURE__*/React__default.createElement(Field, {
-    label: label,
-    isError: isError,
-    error: error,
-    helperText: helperText,
-    isRequired: isRequired
-  }, /*#__PURE__*/React__default.createElement(InputGroup, {
-    size: size
-  }, addOnLeft && /*#__PURE__*/React__default.createElement(InputLeftAddon, null, addOnLeft), elementLeft && /*#__PURE__*/React__default.createElement(InputLeftElement, null, elementLeft), /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
-    ref: ref,
-    type: type,
-    value: value
-  }, inputProps)), addOnRight && /*#__PURE__*/React__default.createElement(InputRightAddon, null, addOnRight), elementRight && /*#__PURE__*/React__default.createElement(InputRightElement, null, elementRight)));
-});
-InputField.defaultProps = {
-  addOnLeft: undefined,
-  addOnRight: undefined,
-  elementLeft: undefined,
-  elementRight: undefined
+const transparent = 'transparent';
+const black = {
+  high: '#111111',
+  medium: '#707070',
+  low: '#B8B8B8'
 };
-
-const TextareaField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  const {
-    value,
-    ...inputProps
-  } = props;
-  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(Textarea$1, Object.assign({
-    ref: ref,
-    value: value
-  }, inputProps)));
-});
-TextareaField.defaultProps = {
-  addOnLeft: undefined,
-  addOnRight: undefined,
-  elementLeft: undefined,
-  elementRight: undefined
+const white = {
+  high: '#FFFFFF',
+  medium: '#F1F1F1',
+  low: '#CCCCCC'
 };
-
-const XMSLogo = () => /*#__PURE__*/React__default.createElement(Image, {
-  height: 8,
-  src: useColorModeValue('https://assets.voila.id/xms/logo-xms.jpg', 'https://assets.voila.id/xms/logo-xms-dark.png')
-});
-const VoilaLogo = () => /*#__PURE__*/React__default.createElement(Image, {
-  src: "https://s3.ap-southeast-1.amazonaws.com/assets.voila.id/xms/logo-voila-black.png?v=1",
-  filter: useColorModeValue('none', 'invert(1)'),
-  maxW: 24
-});
-
-const Profile = ({
-  data,
-  onLogout
-}) => {
-  var _data$name;
-  const {
-    isOpen,
-    onToggle,
-    onClose
-  } = useDisclosure();
-  return /*#__PURE__*/createElement(Popover$1, {
-    placement: "bottom-end",
-    isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/createElement(Box, {
-    "data-test-id": "WE0UYbA93LOZy6S09IhDO",
-    as: "button",
-    cursor: 'pointer',
-    minW: 0,
-    _hover: {
-      textDecor: 'none'
-    },
-    m: 0,
-    onClick: onToggle
-  }, /*#__PURE__*/createElement(HStack, null, /*#__PURE__*/createElement(VStack, {
-    alignItems: "flex-end",
-    spacing: -0.5,
-    ml: "2"
-  }, /*#__PURE__*/createElement(Text, {
-    fontSize: "text.xs",
-    mb: 1,
-    fontWeight: 400,
-    lineHeight: "14px",
-    color: useColorModeValue('neutral.800', 'white')
-  }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/createElement(Text, {
-    fontSize: "text.xs",
-    fontWeight: 400,
-    lineHeight: "14px",
-    color: useColorModeValue('primary.500', 'success.400')
-  }, (data === null || data === void 0 ? void 0 : data.office) && /*#__PURE__*/createElement(Text, {
-    color: "neutral.700",
-    display: "inline-block",
-    mr: 0.5
-  }, data.office, " |", ' '), data === null || data === void 0 ? void 0 : data.userRole)), /*#__PURE__*/createElement(PopoverTrigger, null, /*#__PURE__*/createElement(Avatar, {
-    size: 'sm',
-    bg: "primary.500",
-    color: "white",
-    name: (_data$name = data === null || data === void 0 ? void 0 : data.name) !== null && _data$name !== void 0 ? _data$name : data === null || data === void 0 ? void 0 : data.email
-  })))), /*#__PURE__*/createElement(PopoverContent, {
-    bg: useColorModeValue('white', 'mirage.900'),
-    maxW: 200
-  }, /*#__PURE__*/createElement(PopoverArrow, {
-    bg: useColorModeValue('white', 'mirage.900')
-  }), /*#__PURE__*/createElement(PopoverBody, {
-    p: 1
-  }, /*#__PURE__*/createElement(Flex, {
-    "data-test-id": "gA7F9pucPX_Q3_dkgXIYZ",
-    alignItems: "center",
-    px: 3,
-    py: 2,
-    borderRadius: "sm",
-    cursor: "pointer",
-    _hover: {
-      bg: useColorModeValue('primary.500', 'mirage.900'),
-      color: 'white'
-    },
-    onClick: onLogout,
-    fontSize: "text.xs"
-  }, /*#__PURE__*/createElement(FiPower, null), /*#__PURE__*/createElement(Text, {
-    ml: 2
-  }, "Logout")))));
+const neutral = {
+  '50': '#FFFFFF',
+  '100': '#FAFAFA',
+  '200': '#F5F5F5',
+  '300': '#EEEEEE',
+  '400': '#E0E0E0',
+  '500': '#BDBDBD',
+  '600': '#999999',
+  '700': '#242424',
+  '800': '#181818',
+  '900': '#111111'
 };
-Profile.defaultProps = {
-  data: undefined,
-  onLogout: undefined
+const primary = {
+  '50': '#DFFFF1',
+  '100': '#ACF5D5',
+  '200': '#5EE5A9',
+  '300': '#05CB72',
+  '400': '#08A45E',
+  '500': '#12784A',
+  '600': '#0B603A',
+  '700': '#075331',
+  '800': '#064126',
+  '900': '#042E1B'
 };
-
-const SwitchMode = () => {
-  const {
-    colorMode,
-    toggleColorMode
-  } = useColorMode$1();
-  return /*#__PURE__*/createElement(Box, {
-    "data-test-id": "rhYuTDCiWkFqr96upiEEh",
-    mx: 5,
-    onClick: toggleColorMode,
-    cursor: "pointer"
-  }, colorMode === 'light' ? /*#__PURE__*/createElement(FiMoon, {
-    size: 20
-  }) : /*#__PURE__*/createElement(FiSun, {
-    size: 20
-  }));
+const secondary = {
+  '50': '#F2F2F3',
+  '100': '#DADBDD',
+  '200': '#C2C4C7',
+  '300': '#AAADB0',
+  '400': '#93969A',
+  '500': '#7B7F84',
+  '600': '#62666A',
+  '700': '#4A4C4F',
+  '800': '#313335',
+  '900': '#19191A'
 };
-
-// eslint-disable-next-line import/prefer-default-export
-function environmentName(env) {
-  switch (env) {
-    case 'DEVELOPMENT':
-      return 'Dev';
-    case 'STAGING':
-      return 'Staging';
-    default:
-      return null;
-  }
-}
-
-/* eslint-disable react-hooks/rules-of-hooks */
-const Version = ({
-  version,
-  environment,
-  onOpenModalRelease
-}) => /*#__PURE__*/createElement(Fragment, null, version && /*#__PURE__*/createElement(Badge, {
-  "data-test-id": "dzl3esjhCphobaaIXpiUE",
-  bg: useColorModeValue('primary.500', 'rgba(124, 124, 124, 0.12)'),
-  color: useColorModeValue('white', 'secondary.400'),
-  fontSize: "text.xs",
-  py: 1,
-  px: 2.5,
-  fontWeight: "bold",
-  textTransform: "lowercase",
-  borderRadius: "md",
-  onClick: onOpenModalRelease,
-  cursor: onOpenModalRelease ? 'pointer' : 'auto'
-}, version), /*#__PURE__*/createElement(Box, {
-  background: "primary.50",
-  color: "primary.500",
-  fontSize: "text.xs",
-  py: 1,
-  px: 2.5,
-  fontWeight: "bold",
-  borderRadius: "md"
-}, environmentName(environment)));
-Version.defaultProps = {
-  environment: undefined,
-  version: undefined,
-  onOpenModalRelease: undefined
+const success = {
+  '50': '#ECFFED',
+  '100': '#D3FCD5',
+  '200': '#A9F9B5',
+  '300': '#7CEE98',
+  '400': '#58DD86',
+  '500': '#28c76f',
+  '600': '#1DAB6A',
+  '700': '#148F63',
+  '800': '#0C7359',
+  '900': '#075F51'
 };
-
-const Header = ({
-  data,
-  onLogout,
-  onOpenModalRelease,
-  ...props
-}) => /*#__PURE__*/createElement(Box, Object.assign({
-  minH: 14,
-  bg: useColorModeValue('white', 'ebony-clay.800'),
-  boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
-  px: 4,
-  py: 1
-}, props), /*#__PURE__*/createElement(Flex, {
-  h: 14,
-  alignItems: "center",
-  justifyContent: "space-between"
-}, /*#__PURE__*/createElement(XMSLogo, null), /*#__PURE__*/createElement(HStack, {
-  spacing: 2,
-  alignItems: "center"
-}, /*#__PURE__*/createElement(VoilaLogo, null), /*#__PURE__*/createElement(Version, {
-  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, {
-  alignItems: "center"
-}, /*#__PURE__*/createElement(SwitchMode, null), /*#__PURE__*/createElement(Profile, {
-  data: data,
-  onLogout: onLogout
-}))));
-Header.defaultProps = {
-  data: undefined,
-  onLogout: undefined,
-  onOpenModalRelease: undefined
+const danger = {
+  '50': '#FFEDEC',
+  '100': '#FFC7C2',
+  '200': '#FF8279',
+  '300': '#FF5B4F',
+  '400': '#F44336',
+  '500': '#D82F23',
+  '600': '#B71C1C',
+  '700': '#930B0B',
+  '800': '#660909',
+  '900': '#3E0707'
+};
+const warning = {
+  '50': '#FFF9EC',
+  '100': '#FFEFCC',
+  '200': '#FFD591',
+  '300': '#FFC069',
+  '400': '#FFA230',
+  '500': '#F68522',
+  '600': '#EF6C00',
+  '700': '#C65B03',
+  '800': '#9F4901',
+  '900': '#652E00'
+};
+const info = {
+  '50': '#EBFFFB',
+  '100': '#CBFDF2',
+  '200': '#97FCEF',
+  '300': '#63F8F0',
+  '400': '#3CECF1',
+  '500': '#00CFE8',
+  '600': '#00A1C7',
+  '700': '#007AA7',
+  '800': '#005786',
+  '900': '#003F6F'
+};
+const dark = {
+  '50': '#F2F2F2',
+  '100': '#DBDBDB',
+  '200': '#C4C4C4',
+  '300': '#ADADAD',
+  '400': '#969696',
+  '500': '#808080',
+  '600': '#666666',
+  '700': '#4D4D4D',
+  '800': '#333333',
+  '900': '#1A1A1A'
+};
+const mirage = {
+  '50': '#EDF0F7',
+  '100': '#CED5E9',
+  '200': '#AEBADB',
+  '300': '#8E9ECC',
+  '400': '#6F83BE',
+  '500': '#4F68B0',
+  '600': '#3F538D',
+  '700': '#2F3E6A',
+  '800': '#202A46',
+  '900': '#101523'
+};
+const ebonyClay = {
+  '50': '#EFF1F6',
+  '100': '#D2D7E5',
+  '200': '#B4BDD4',
+  '300': '#97A3C4',
+  '400': '#7A89B3',
+  '500': '#5D6FA2',
+  '600': '#4A5982',
+  '700': '#384361',
+  '800': '#252D41',
+  '900': '#131620'
+};
+const brightGray = {
+  '50': '#F0F1F4',
+  '100': '#D5D9E1',
+  '200': '#BAC0CE',
+  '300': '#A0A8BB',
+  '400': '#858FA8',
+  '500': '#6A7795',
+  '600': '#555F77',
+  '700': '#404759',
+  '800': '#2A2F3C',
+  '900': '#15181E'
+};
+const doveGray = {
+  '50': '#F2F2F2',
+  '100': '#DBDBDB',
+  '200': '#C4C4C4',
+  '300': '#ADADAD',
+  '400': '#969696',
+  '500': '#808080',
+  '600': '#666666',
+  '700': '#4D4D4D',
+  '800': '#333333',
+  '900': '#1A1A1A'
+};
+const colors = {
+  transparent,
+  black,
+  white,
+  neutral,
+  primary,
+  secondary,
+  success,
+  danger,
+  warning,
+  info,
+  dark,
+  mirage,
+  'ebony-clay': ebonyClay,
+  'bright-gray': brightGray,
+  'dove-gray': doveGray
 };
 
-const ModalBody = /*#__PURE__*/React__default.forwardRef(({
-  children,
-  ...rest
-}, ref) => {
-  return /*#__PURE__*/React__default.createElement(ModalBody$1, Object.assign({
-    ref: ref,
-    background: useColorModeValue('white', 'mirage.900')
-  }, rest), children);
-});
-
-const ModalCloseButton = /*#__PURE__*/forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(ModalCloseButton$1, Object.assign({
-    ref: ref,
-    top: 4,
-    right: 4,
-    size: "sm",
-    background: useColorModeValue('neutral.50', 'mirage.900')
-  }, props));
-});
+const radius = {
+  none: 0,
+  sm: '2px',
+  md: '4px',
+  lg: '8px',
+  full: '9999px'
+};
 
-const ModalFooter = /*#__PURE__*/forwardRef(({
-  children,
-  ...rest
-}, ref) => {
-  return /*#__PURE__*/React__default.createElement(ModalFooter$1, Object.assign({
-    ref: ref,
-    background: useColorModeValue('neutral.200', 'mirage.900'),
-    borderBottomRadius: "md"
-  }, rest), children);
-});
+const spacing = {
+  ...theme$1.space,
+  4.5: '1.125rem',
+  9.5: '2.375rem',
+  18: '4.5rem',
+  22: '5.5rem',
+  26: '6.5rem',
+  30: '7.5rem'
+};
 
-const ModalHeader = /*#__PURE__*/forwardRef(({
-  children,
-  ...rest
-}, ref) => {
-  return /*#__PURE__*/React__default.createElement(ModalHeader$1, Object.assign({
-    ref: ref,
-    background: useColorModeValue('neutral.200', 'mirage.900'),
-    borderTopRadius: 'md',
-    fontSize: 'lg'
-  }, rest), children);
-});
+const sizes = {
+  ...theme$1.sizes,
+  4.5: '1.125rem',
+  9.5: '2.375rem',
+  18: '4.5rem',
+  22: '5.5rem',
+  26: '6.5rem',
+  30: '7.5rem'
+};
 
-/* eslint-disable react-hooks/rules-of-hooks */
-const Navigation = ({
-  navigations,
-  activePath,
-  as,
-  ...props
-}) => {
-  return /*#__PURE__*/createElement(Box, Object.assign({
-    bg: useColorModeValue('white', 'ebony-clay.800'),
-    boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
-    borderRadius: "md",
-    overflowX: "auto"
-  }, props), /*#__PURE__*/createElement(Flex, {
-    alignItems: "center",
-    p: 2
-  }, /*#__PURE__*/createElement(HStack, {
-    spacing: 2
-  }, navigations === null || navigations === void 0 ? void 0 : navigations.map(navigation => {
-    const isActive = activePath.startsWith(navigation.navLink || '');
-    const activeBg = isActive ? 'primary.500' : undefined;
-    return /*#__PURE__*/createElement(Popover$1, {
-      key: navigation.title,
-      trigger: "hover",
-      placement: "bottom-start"
-    }, ({
-      isOpen
-    }) => /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(PopoverTrigger, null, /*#__PURE__*/createElement(Box, {
-      display: "flex",
-      alignItems: "center",
-      borderRadius: "md",
-      cursor: "pointer",
-      _hover: {
-        backgroundColor: !isActive ? useColorModeValue('dove-gray.50', 'transparent') : activeBg
-      },
-      backgroundColor: isOpen && !isActive ? useColorModeValue('dove-gray.50', 'transparent') : activeBg,
-      color: isActive ? 'white' : 'inherit',
-      p: 2
-    }, /*#__PURE__*/createElement(Icon, {
-      as: navigation.icon,
-      mr: 2
-    }), /*#__PURE__*/createElement(Text, {
-      whiteSpace: "nowrap",
-      fontSize: "text.sm",
-      fontWeight: 400
-    }, navigation.title), /*#__PURE__*/createElement(ChevronDownIcon, {
-      ml: 2
-    }))), navigation.children && /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Box, {
-      zIndex: "popover"
-    }, /*#__PURE__*/createElement(PopoverContent, {
-      key: navigation.title,
-      bg: useColorModeValue('white', 'ebony-clay.800'),
-      maxW: 250,
-      border: "none",
-      borderRadius: "md",
-      boxShadow: "0 5px 25px rgb(0 0 0 / 10%)"
-    }, navigation.children.map(({
-      title,
-      navHost,
-      navLink,
-      icon
-    }) => {
-      const link = navHost ? `${navHost}${navLink}` : navLink;
-      const isActiveSub = activePath === navLink;
-      return /*#__PURE__*/createElement(Link, {
-        as: as,
-        key: title,
-        display: "flex",
-        position: "relative",
-        alignItems: "center",
-        transition: "padding 0.35s ease 0s",
-        _hover: {
-          backgroundColor: useColorModeValue('dove-gray.50', 'mirage.900'),
-          color: useColorModeValue('primary.500', 'dove-gray.600'),
-          px: 5,
-          py: 4,
-          _first: {
-            borderTopRadius: 'md'
-          },
-          _last: {
-            borderBottomRadius: 'md'
-          }
-        },
-        px: 6,
-        py: 4,
-        href: link,
-        color: isActiveSub ? 'primary.500' : 'inherit',
-        css: css`
-                                    border-spacing: 4px;
-                                  `
-      }, /*#__PURE__*/createElement(Icon, {
-        as: icon,
-        mr: 3
-      }), /*#__PURE__*/createElement(Text, {
-        fontSize: "text.sm"
-      }, title), isActiveSub && /*#__PURE__*/createElement(Box, {
-        width: 0.5,
-        height: 8,
-        position: "absolute",
-        bg: "primary.500",
-        right: 0,
-        zIndex: "popover"
-      }));
-    }))))));
-  }))));
+const fonts = {
+  heading: `'Poppins', sans-serif`,
+  body: `'Poppins', sans-serif`
 };
-Navigation.defaultProps = {
-  navigations: undefined,
-  as: 'a'
+const fontWeights = {
+  hairline: 100,
+  thin: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900
 };
-
-const PaginationButton = /*#__PURE__*/forwardRef$1(({
-  className,
-  style,
-  isActive,
-  children,
-  ...rest
-}, ref) => {
-  const btnBg = useColorModeValue('neutral.300', 'mirage.900');
-  const btnColor = useColorModeValue('black.high', 'primary.300');
-  const btnNotActiveBg = useColorModeValue('secondary.50', 'primary.500');
-  const btnNotActiveColor = useColorModeValue('primary.500', 'white');
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
-    "data-test-id": "Pagination-Button",
-    ref: ref,
-    className: className,
-    style: style,
-    borderRadius: 50,
-    fontWeight: 700,
-    m: 0,
-    px: 3,
-    py: 2,
-    h: 8,
-    minW: "auto",
-    background: isActive ? 'primary.500' : btnBg,
-    color: isActive ? 'white' : btnColor,
-    _hover: !isActive ? {
-      background: btnNotActiveBg,
-      color: btnNotActiveColor
-    } : {},
-    _disabled: {
-      background: useColorModeValue('neutral.300', 'mirage.900'),
-      color: 'neutral.600',
-      pointerEvents: 'none'
-    }
-  }, rest), children);
-});
-PaginationButton.displayName = 'PaginationButton';
-PaginationButton.defaultProps = {
-  isActive: undefined
+const lineHeights = {
+  normal: 'normal',
+  none: 1,
+  shorter: 1.25,
+  short: 1.375,
+  base: 1.5,
+  tall: 1.625,
+  34: '2.125rem',
+  32: '2rem',
+  30: '1.875rem',
+  28: '1.75',
+  26: '1.625rem',
+  24: '1.5rem',
+  22: '1.375rem',
+  20: '1.25rem',
+  18: '1.125rem',
+  16: '1rem',
+  14: '0.875rem',
+  12: '0.75rem'
 };
-
-const PaginationButtonTrigger = ({
-  color,
-  isDisabled,
-  onClick,
-  visuallyHidden,
-  icon
-}) => /*#__PURE__*/createElement(PaginationButton, {
-  "data-test-id": "DLVCc_fBK35spHm5WxjcJ",
-  color: color,
-  isDisabled: isDisabled,
-  onClick: onClick
-}, /*#__PURE__*/createElement(VisuallyHidden, null, visuallyHidden), icon);
-PaginationButtonTrigger.defaultProps = {
-  color: undefined,
-  isDisabled: undefined,
-  onClick: undefined,
-  visuallyHidden: undefined,
-  icon: undefined
+const fontSizes = {
+  heading: {
+    1: '1.75rem',
+    2: '1.5rem',
+    3: '1.25rem',
+    4: '1.125rem',
+    5: '1rem',
+    6: '0.875rem'
+  },
+  text: {
+    xl: '1.125rem',
+    lg: '1rem',
+    md: '0.875rem',
+    sm: '0.75rem',
+    xs: '0.625rem'
+  },
+  button: {
+    lg: '1.125rem',
+    md: '0.875rem',
+    sm: '0.625rem'
+  },
+  field: {
+    lg: '1rem',
+    md: '0.875rem',
+    sm: '0.75rem'
+  },
+  table: {
+    header: '0.75rem'
+  }
 };
-
-const Pagination = ({
-  className,
-  current,
-  total,
-  onSelect
-}) => {
-  const btnColorDisabled = useColorModeValue('secondary.100', 'primary.500');
-  const btnColor = useColorModeValue('primary.500', 'secondary.100');
-  const disabledPrevious = current === 1;
-  const previousButtonColor = disabledPrevious ? btnColorDisabled : btnColor;
-  const disabledNext = current === total;
-  const nextButtonColor = disabledNext ? btnColorDisabled : btnColor;
-  const handleSelectPage = page => {
-    if (onSelect) {
-      onSelect(page);
-    }
-  };
-  const generatePages = () => {
-    const maxButtons = 5;
-    const pageButtons = [];
-    let startPage;
-    let endPage;
-    if ( maxButtons < total) {
-      startPage = Math.max(Math.min(current - Math.floor(maxButtons / 2), total - maxButtons + 1), 1);
-      endPage = startPage + maxButtons - 1;
-    } else {
-      startPage = 1;
-      endPage = total;
-    }
-    // eslint-disable-next-line no-plusplus
-    for (let page = startPage; page <= endPage; ++page) {
-      pageButtons.push(page);
-    }
-    return pageButtons;
-  };
-  return /*#__PURE__*/createElement(Box, {
-    className: className,
-    display: "inline-flex",
-    alignItems: "center"
-  }, /*#__PURE__*/createElement(Box, {
-    mr: 1
-  }, /*#__PURE__*/createElement(PaginationButtonTrigger, {
-    "data-test-id": "Pagination-Button",
-    color: previousButtonColor,
-    isDisabled: disabledPrevious,
-    onClick: () => handleSelectPage(1),
-    visuallyHidden: "First Page",
-    icon: /*#__PURE__*/createElement(ArrowLeftIcon, {
-      width: 2
-    })
-  })), /*#__PURE__*/createElement(Box, {
-    backgroundColor: useColorModeValue('neutral.300', 'mirage.900'),
-    borderRadius: 50
-  }, /*#__PURE__*/createElement(PaginationButtonTrigger, {
-    "data-test-id": "Pagination-Button",
-    color: previousButtonColor,
-    isDisabled: disabledPrevious,
-    onClick: () => handleSelectPage(current - 1),
-    visuallyHidden: "Previous Page",
-    icon: /*#__PURE__*/createElement(ChevronLeftIcon, null)
-  }), generatePages().map(page => {
-    return /*#__PURE__*/createElement(PaginationButton, {
-      "data-test-id": "Pagination-Button",
-      key: page,
-      isActive: page === current,
-      onClick: () => typeof page === 'number' ? handleSelectPage(page) : null
-    }, /*#__PURE__*/createElement(Text, {
-      scale: 300,
-      fontSize: "text.sm",
-      lineHeight: 18,
-      fontWeight: 500
-    }, page));
-  }), /*#__PURE__*/createElement(PaginationButtonTrigger, {
-    "data-test-id": "Pagination-Button",
-    color: nextButtonColor,
-    isDisabled: disabledNext,
-    onClick: () => handleSelectPage(current + 1),
-    visuallyHidden: "Next Page",
-    icon: /*#__PURE__*/createElement(ChevronRightIcon, null)
-  })), /*#__PURE__*/createElement(Box, {
-    ml: 1
-  }, /*#__PURE__*/createElement(PaginationButtonTrigger, {
-    "data-test-id": "Pagination-Button",
-    color: nextButtonColor,
-    isDisabled: disabledNext,
-    onClick: () => handleSelectPage(total),
-    visuallyHidden: "Last Page",
-    icon: /*#__PURE__*/createElement(ArrowRightIcon, {
-      width: 2
-    })
-  })));
+const heading = {
+  1: {
+    fontSize: fontSizes.heading[1],
+    fontWeight: 'bold',
+    lineHeight: '3.5rem',
+    letterSpacing: '0'
+  },
+  2: {
+    fontSize: fontSizes.heading[2],
+    fontWeight: 'bold',
+    lineHeight: '2.875rem',
+    letterSpacing: '0'
+  },
+  3: {
+    fontSize: fontSizes.heading[3],
+    fontWeight: 'bold',
+    lineHeight: '2.5rem',
+    letterSpacing: '0'
+  },
+  4: {
+    fontSize: fontSizes.heading[4],
+    fontWeight: 'bold',
+    lineHeight: '2rem',
+    letterSpacing: '0'
+  },
+  5: {
+    fontSize: fontSizes.heading[5],
+    fontWeight: 'bold',
+    lineHeight: '1.5rem',
+    letterSpacing: '0'
+  },
+  6: {
+    fontSize: fontSizes.heading[6],
+    fontWeight: 'bold',
+    lineHeight: '1.375rem',
+    letterSpacing: '0'
+  }
 };
-Pagination.defaultProps = {
-  className: undefined,
-  onSelect: undefined
+const text = {
+  xl: {
+    fontSize: fontSizes.text.xl,
+    lineHeight: lineHeights[28],
+    letterSpacing: '0'
+  },
+  lg: {
+    fontSize: fontSizes.text.lg,
+    lineHeight: lineHeights[24],
+    letterSpacing: '0'
+  },
+  md: {
+    fontSize: fontSizes.text.md,
+    lineHeight: lineHeights[22],
+    letterSpacing: '0'
+  },
+  sm: {
+    fontSize: fontSizes.text.sm,
+    lineHeight: lineHeights[18],
+    letterSpacing: '0'
+  },
+  xs: {
+    fontSize: fontSizes.text.xs,
+    lineHeight: lineHeights[14],
+    letterSpacing: '0'
+  }
+};
+const button = {
+  lg: {
+    fontSize: fontSizes.button.lg,
+    lineHeight: lineHeights[28],
+    letterSpacing: '0',
+    fontWeight: fontWeights.normal
+  },
+  md: {
+    fontSize: fontSizes.button.md,
+    lineHeight: lineHeights[22],
+    letterSpacing: '0',
+    fontWeight: fontWeights.normal
+  },
+  sm: {
+    fontSize: fontSizes.button.sm,
+    lineHeight: lineHeights[14],
+    letterSpacing: '0',
+    fontWeight: fontWeights.normal
+  }
+};
+const field = {
+  lg: {
+    fontSize: fontSizes.field.lg,
+    lineHeight: lineHeights[24],
+    letterSpacing: '0',
+    fontWeight: fontWeights.normal
+  },
+  md: {
+    fontSize: fontSizes.field.md,
+    lineHeight: lineHeights[22],
+    letterSpacing: '0',
+    fontWeight: fontWeights.normal
+  },
+  sm: {
+    fontSize: fontSizes.field.sm,
+    lineHeight: lineHeights[18],
+    letterSpacing: '0',
+    fontWeight: fontWeights.normal
+  }
+};
+const textStyles = {
+  heading,
+  text,
+  button,
+  field
 };
-Pagination.displayName = 'Pagination';
 
-const PaginationDetail = ({
-  page,
-  limit,
-  length,
-  scale = 300,
-  fontSize = 'xs',
-  lineHeight = 18,
-  ...rest
-}) => {
-  return /*#__PURE__*/createElement(Text, Object.assign({
-    scale: scale,
-    fontSize: fontSize,
-    lineHeight: lineHeight
-  }, rest), `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item`);
+
+
+var foundations = {
+  __proto__: null,
+  colors: colors,
+  radii: radius,
+  space: spacing,
+  sizes: sizes,
+  fonts: fonts,
+  fontSizes: fontSizes,
+  lineHeights: lineHeights,
+  textStyles: textStyles
 };
 
-const PaginationFilter = ({
-  limit,
-  label = 'Baris per halaman:',
-  items,
+const MultiDateWrapper = /*#__PURE__*/styled(Box)`
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  border: 1px solid;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  border-color: ${({
+  isError
+}) => isError ? `${colors.danger[500]}` : `${colors.primary[500]}`};
+`;
+const MultiDatePickerMonth = ({
   onChange,
-  ...rest
+  isError = false,
+  min = '2020-01-01',
+  max = '2020-12-31'
 }) => {
-  const [value, setValue] = useState(limit);
-  return /*#__PURE__*/createElement(Box, {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center"
-  }, /*#__PURE__*/createElement(Text, Object.assign({
-    fontSize: "text.sm",
-    lineHeight: 18,
-    color: useColorModeValue('neutral.900', 'white')
-  }, rest), label), /*#__PURE__*/createElement(Select$1, {
-    textAlign: "center",
-    size: "xs",
-    outline: "none",
-    border: "none",
-    boxShadow: "none",
-    width: 18,
-    icon: /*#__PURE__*/createElement(FiChevronDown, null),
-    _focusVisible: {
-      boxShadow: 'none'
+  const [date, setDate] = React__default.useState([null, null]);
+  return /*#__PURE__*/React__default.createElement(MultiDateWrapper, {
+    isError: isError
+  }, /*#__PURE__*/React__default.createElement(DatePickerMonth, {
+    "data-test-id": "CT_DatePickerMonth_StartDate",
+    onChange: val => {
+      onChange(val, date[1]);
+      setDate([val, date[1]]);
     },
-    onChange: e => {
-      const numberValue = Number(e.target.value);
-      onChange(numberValue);
-      setValue(numberValue);
+    min: min,
+    max: max
+  }), /*#__PURE__*/React__default.createElement(Box, null, "-"), /*#__PURE__*/React__default.createElement(DatePickerMonth, {
+    "data-test-id": "CT_DatePickerMonth_EndDate",
+    onChange: val => {
+      onChange(date[0], val);
+      setDate([date[0], val]);
     },
-    value: value
-  }, items.map(item => {
-    return /*#__PURE__*/createElement("option", {
-      key: item,
-      value: item
-    }, item);
-  })));
+    min: min,
+    max: max
+  }));
 };
-PaginationFilter.defaultProps = {
-  limit: 10,
-  label: undefined
+MultiDatePickerMonth.defaultProps = {
+  min: '2020-01-01',
+  max: '2020-12-31',
+  isError: false
 };
 
-const transparent = 'transparent';
-const black = {
-  high: '#111111',
-  medium: '#707070',
-  low: '#B8B8B8'
-};
-const white = {
-  high: '#FFFFFF',
-  medium: '#F1F1F1',
-  low: '#CCCCCC'
-};
-const neutral = {
-  '50': '#FFFFFF',
-  '100': '#FAFAFA',
-  '200': '#F5F5F5',
-  '300': '#EEEEEE',
-  '400': '#E0E0E0',
-  '500': '#BDBDBD',
-  '600': '#999999',
-  '700': '#242424',
-  '800': '#181818',
-  '900': '#111111'
-};
-const primary = {
-  '50': '#DFFFF1',
-  '100': '#ACF5D5',
-  '200': '#5EE5A9',
-  '300': '#05CB72',
-  '400': '#08A45E',
-  '500': '#12784A',
-  '600': '#0B603A',
-  '700': '#075331',
-  '800': '#064126',
-  '900': '#042E1B'
-};
-const secondary = {
-  '50': '#F2F2F3',
-  '100': '#DADBDD',
-  '200': '#C2C4C7',
-  '300': '#AAADB0',
-  '400': '#93969A',
-  '500': '#7B7F84',
-  '600': '#62666A',
-  '700': '#4A4C4F',
-  '800': '#313335',
-  '900': '#19191A'
-};
-const success = {
-  '50': '#ECFFED',
-  '100': '#D3FCD5',
-  '200': '#A9F9B5',
-  '300': '#7CEE98',
-  '400': '#58DD86',
-  '500': '#28c76f',
-  '600': '#1DAB6A',
-  '700': '#148F63',
-  '800': '#0C7359',
-  '900': '#075F51'
-};
-const danger = {
-  '50': '#FFEDEC',
-  '100': '#FFC7C2',
-  '200': '#FF8279',
-  '300': '#FF5B4F',
-  '400': '#F44336',
-  '500': '#D82F23',
-  '600': '#B71C1C',
-  '700': '#930B0B',
-  '800': '#660909',
-  '900': '#3E0707'
-};
-const warning = {
-  '50': '#FFF9EC',
-  '100': '#FFEFCC',
-  '200': '#FFD591',
-  '300': '#FFC069',
-  '400': '#FFA230',
-  '500': '#F68522',
-  '600': '#EF6C00',
-  '700': '#C65B03',
-  '800': '#9F4901',
-  '900': '#652E00'
-};
-const info = {
-  '50': '#EBFFFB',
-  '100': '#CBFDF2',
-  '200': '#97FCEF',
-  '300': '#63F8F0',
-  '400': '#3CECF1',
-  '500': '#00CFE8',
-  '600': '#00A1C7',
-  '700': '#007AA7',
-  '800': '#005786',
-  '900': '#003F6F'
-};
-const dark = {
-  '50': '#F2F2F2',
-  '100': '#DBDBDB',
-  '200': '#C4C4C4',
-  '300': '#ADADAD',
-  '400': '#969696',
-  '500': '#808080',
-  '600': '#666666',
-  '700': '#4D4D4D',
-  '800': '#333333',
-  '900': '#1A1A1A'
-};
-const mirage = {
-  '50': '#EDF0F7',
-  '100': '#CED5E9',
-  '200': '#AEBADB',
-  '300': '#8E9ECC',
-  '400': '#6F83BE',
-  '500': '#4F68B0',
-  '600': '#3F538D',
-  '700': '#2F3E6A',
-  '800': '#202A46',
-  '900': '#101523'
-};
-const ebonyClay = {
-  '50': '#EFF1F6',
-  '100': '#D2D7E5',
-  '200': '#B4BDD4',
-  '300': '#97A3C4',
-  '400': '#7A89B3',
-  '500': '#5D6FA2',
-  '600': '#4A5982',
-  '700': '#384361',
-  '800': '#252D41',
-  '900': '#131620'
-};
-const brightGray = {
-  '50': '#F0F1F4',
-  '100': '#D5D9E1',
-  '200': '#BAC0CE',
-  '300': '#A0A8BB',
-  '400': '#858FA8',
-  '500': '#6A7795',
-  '600': '#555F77',
-  '700': '#404759',
-  '800': '#2A2F3C',
-  '900': '#15181E'
-};
-const doveGray = {
-  '50': '#F2F2F2',
-  '100': '#DBDBDB',
-  '200': '#C4C4C4',
-  '300': '#ADADAD',
-  '400': '#969696',
-  '500': '#808080',
-  '600': '#666666',
-  '700': '#4D4D4D',
-  '800': '#333333',
-  '900': '#1A1A1A'
-};
-const colors = {
-  transparent,
-  black,
-  white,
-  neutral,
-  primary,
-  secondary,
-  success,
-  danger,
-  warning,
-  info,
-  dark,
-  mirage,
-  'ebony-clay': ebonyClay,
-  'bright-gray': brightGray,
-  'dove-gray': doveGray
+/* eslint-disable no-nested-ternary */
+const Field = props => {
+  const {
+    label,
+    isError,
+    error,
+    helperText,
+    isRequired,
+    children
+  } = props;
+  return /*#__PURE__*/React__default.createElement(FormControl, {
+    isInvalid: isError
+  }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(FormLabel$1, {
+    fontSize: "field.sm",
+    requiredIndicator: undefined
+  }, isRequired && /*#__PURE__*/React__default.createElement(Box, {
+    as: "span",
+    color: "red.500",
+    ml: 0,
+    mr: 1
+  }, "*"), label) : label), children, !isError ? helperText && /*#__PURE__*/React__default.createElement(FormHelperText, {
+    fontSize: "field.sm"
+  }, helperText) : typeof error === 'string' ? /*#__PURE__*/React__default.createElement(FormErrorMessage, {
+    textStyle: "field.sm",
+    fontSize: "field.sm",
+    mt: 1,
+    marginStart: 1
+  }, error) : error);
 };
-
-const radius = {
-  none: 0,
-  sm: '2px',
-  md: '4px',
-  lg: '8px',
-  full: '9999px'
+Field.defaultProps = {
+  label: '',
+  isError: false,
+  error: undefined,
+  helperText: undefined,
+  isRequired: false
 };
 
-const spacing = {
-  ...theme$1.space,
-  4.5: '1.125rem',
-  9.5: '2.375rem',
-  18: '4.5rem',
-  22: '5.5rem',
-  26: '6.5rem',
-  30: '7.5rem'
+const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    value,
+    type,
+    addOnLeft,
+    addOnRight,
+    elementLeft,
+    elementRight,
+    size,
+    isRequired,
+    label,
+    isError,
+    error,
+    helperText,
+    ...inputProps
+  } = props;
+  return /*#__PURE__*/React__default.createElement(Field, {
+    label: label,
+    isError: isError,
+    error: error,
+    helperText: helperText,
+    isRequired: isRequired
+  }, /*#__PURE__*/React__default.createElement(InputGroup, {
+    size: size
+  }, addOnLeft && /*#__PURE__*/React__default.createElement(InputLeftAddon, null, addOnLeft), elementLeft && /*#__PURE__*/React__default.createElement(InputLeftElement, null, elementLeft), /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
+    ref: ref,
+    type: type,
+    value: value
+  }, inputProps)), addOnRight && /*#__PURE__*/React__default.createElement(InputRightAddon, null, addOnRight), elementRight && /*#__PURE__*/React__default.createElement(InputRightElement, null, elementRight)));
+});
+InputField.defaultProps = {
+  addOnLeft: undefined,
+  addOnRight: undefined,
+  elementLeft: undefined,
+  elementRight: undefined
 };
 
-const sizes = {
-  ...theme$1.sizes,
-  4.5: '1.125rem',
-  9.5: '2.375rem',
-  18: '4.5rem',
-  22: '5.5rem',
-  26: '6.5rem',
-  30: '7.5rem'
+const TextareaField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    value,
+    ...inputProps
+  } = props;
+  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(Textarea$1, Object.assign({
+    ref: ref,
+    value: value
+  }, inputProps)));
+});
+TextareaField.defaultProps = {
+  addOnLeft: undefined,
+  addOnRight: undefined,
+  elementLeft: undefined,
+  elementRight: undefined
 };
 
-const fonts = {
-  heading: `'Poppins', sans-serif`,
-  body: `'Poppins', sans-serif`
-};
-const fontWeights = {
-  hairline: 100,
-  thin: 200,
-  light: 300,
-  normal: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-  extrabold: 800,
-  black: 900
+const XMSLogo = () => /*#__PURE__*/React__default.createElement(Image, {
+  height: 8,
+  src: useColorModeValue('https://assets.voila.id/xms/logo-xms.jpg', 'https://assets.voila.id/xms/logo-xms-dark.png')
+});
+const VoilaLogo = () => /*#__PURE__*/React__default.createElement(Image, {
+  src: "https://s3.ap-southeast-1.amazonaws.com/assets.voila.id/xms/logo-voila-black.png?v=1",
+  filter: useColorModeValue('none', 'invert(1)'),
+  maxW: 24
+});
+
+const Profile = ({
+  data,
+  onLogout
+}) => {
+  var _data$name;
+  const {
+    isOpen,
+    onToggle,
+    onClose
+  } = useDisclosure();
+  return /*#__PURE__*/createElement(Popover$1, {
+    placement: "bottom-end",
+    isOpen: isOpen,
+    onClose: onClose
+  }, /*#__PURE__*/createElement(Box, {
+    "data-test-id": "WE0UYbA93LOZy6S09IhDO",
+    as: "button",
+    cursor: 'pointer',
+    minW: 0,
+    _hover: {
+      textDecor: 'none'
+    },
+    m: 0,
+    onClick: onToggle
+  }, /*#__PURE__*/createElement(HStack, null, /*#__PURE__*/createElement(VStack, {
+    alignItems: "flex-end",
+    spacing: -0.5,
+    ml: "2"
+  }, /*#__PURE__*/createElement(Text, {
+    fontSize: "text.xs",
+    mb: 1,
+    fontWeight: 400,
+    lineHeight: "14px",
+    color: useColorModeValue('neutral.800', 'white')
+  }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/createElement(Text, {
+    fontSize: "text.xs",
+    fontWeight: 400,
+    lineHeight: "14px",
+    color: useColorModeValue('primary.500', 'success.400')
+  }, (data === null || data === void 0 ? void 0 : data.office) && /*#__PURE__*/createElement(Text, {
+    color: "neutral.700",
+    display: "inline-block",
+    mr: 0.5
+  }, data.office, " |", ' '), data === null || data === void 0 ? void 0 : data.userRole)), /*#__PURE__*/createElement(PopoverTrigger, null, /*#__PURE__*/createElement(Avatar, {
+    size: 'sm',
+    bg: "primary.500",
+    color: "white",
+    name: (_data$name = data === null || data === void 0 ? void 0 : data.name) !== null && _data$name !== void 0 ? _data$name : data === null || data === void 0 ? void 0 : data.email
+  })))), /*#__PURE__*/createElement(PopoverContent, {
+    bg: useColorModeValue('white', 'mirage.900'),
+    maxW: 200
+  }, /*#__PURE__*/createElement(PopoverArrow, {
+    bg: useColorModeValue('white', 'mirage.900')
+  }), /*#__PURE__*/createElement(PopoverBody, {
+    p: 1
+  }, /*#__PURE__*/createElement(Flex, {
+    "data-test-id": "gA7F9pucPX_Q3_dkgXIYZ",
+    alignItems: "center",
+    px: 3,
+    py: 2,
+    borderRadius: "sm",
+    cursor: "pointer",
+    _hover: {
+      bg: useColorModeValue('primary.500', 'mirage.900'),
+      color: 'white'
+    },
+    onClick: onLogout,
+    fontSize: "text.xs"
+  }, /*#__PURE__*/createElement(FiPower, null), /*#__PURE__*/createElement(Text, {
+    ml: 2
+  }, "Logout")))));
 };
-const lineHeights = {
-  normal: 'normal',
-  none: 1,
-  shorter: 1.25,
-  short: 1.375,
-  base: 1.5,
-  tall: 1.625,
-  34: '2.125rem',
-  32: '2rem',
-  30: '1.875rem',
-  28: '1.75',
-  26: '1.625rem',
-  24: '1.5rem',
-  22: '1.375rem',
-  20: '1.25rem',
-  18: '1.125rem',
-  16: '1rem',
-  14: '0.875rem',
-  12: '0.75rem'
+Profile.defaultProps = {
+  data: undefined,
+  onLogout: undefined
 };
-const fontSizes = {
-  heading: {
-    1: '1.75rem',
-    2: '1.5rem',
-    3: '1.25rem',
-    4: '1.125rem',
-    5: '1rem',
-    6: '0.875rem'
-  },
-  text: {
-    xl: '1.125rem',
-    lg: '1rem',
-    md: '0.875rem',
-    sm: '0.75rem',
-    xs: '0.625rem'
-  },
-  button: {
-    lg: '1.125rem',
-    md: '0.875rem',
-    sm: '0.625rem'
-  },
-  field: {
-    lg: '1rem',
-    md: '0.875rem',
-    sm: '0.75rem'
-  },
-  table: {
-    header: '0.75rem'
-  }
+
+const SwitchMode = () => {
+  const {
+    colorMode,
+    toggleColorMode
+  } = useColorMode$1();
+  return /*#__PURE__*/createElement(Box, {
+    "data-test-id": "rhYuTDCiWkFqr96upiEEh",
+    mx: 5,
+    onClick: toggleColorMode,
+    cursor: "pointer"
+  }, colorMode === 'light' ? /*#__PURE__*/createElement(FiMoon, {
+    size: 20
+  }) : /*#__PURE__*/createElement(FiSun, {
+    size: 20
+  }));
 };
-const heading = {
-  1: {
-    fontSize: fontSizes.heading[1],
-    fontWeight: 'bold',
-    lineHeight: '3.5rem',
-    letterSpacing: '0'
-  },
-  2: {
-    fontSize: fontSizes.heading[2],
-    fontWeight: 'bold',
-    lineHeight: '2.875rem',
-    letterSpacing: '0'
-  },
-  3: {
-    fontSize: fontSizes.heading[3],
-    fontWeight: 'bold',
-    lineHeight: '2.5rem',
-    letterSpacing: '0'
-  },
-  4: {
-    fontSize: fontSizes.heading[4],
-    fontWeight: 'bold',
-    lineHeight: '2rem',
-    letterSpacing: '0'
-  },
-  5: {
-    fontSize: fontSizes.heading[5],
-    fontWeight: 'bold',
-    lineHeight: '1.5rem',
-    letterSpacing: '0'
-  },
-  6: {
-    fontSize: fontSizes.heading[6],
-    fontWeight: 'bold',
-    lineHeight: '1.375rem',
-    letterSpacing: '0'
+
+// eslint-disable-next-line import/prefer-default-export
+function environmentName(env) {
+  switch (env) {
+    case 'DEVELOPMENT':
+      return 'Dev';
+    case 'STAGING':
+      return 'Staging';
+    default:
+      return null;
   }
+}
+
+/* eslint-disable react-hooks/rules-of-hooks */
+const Version = ({
+  version,
+  environment,
+  onOpenModalRelease
+}) => /*#__PURE__*/createElement(Fragment, null, version && /*#__PURE__*/createElement(Badge, {
+  "data-test-id": "dzl3esjhCphobaaIXpiUE",
+  bg: useColorModeValue('primary.500', 'rgba(124, 124, 124, 0.12)'),
+  color: useColorModeValue('white', 'secondary.400'),
+  fontSize: "text.xs",
+  py: 1,
+  px: 2.5,
+  fontWeight: "bold",
+  textTransform: "lowercase",
+  borderRadius: "md",
+  onClick: onOpenModalRelease,
+  cursor: onOpenModalRelease ? 'pointer' : 'auto'
+}, version), environmentName(environment) !== null && version && /*#__PURE__*/createElement(Box, {
+  background: "primary.50",
+  color: "primary.500",
+  fontSize: "text.xs",
+  py: 1,
+  px: 2.5,
+  fontWeight: "bold",
+  borderRadius: "md"
+}, environmentName(environment)));
+Version.defaultProps = {
+  environment: undefined,
+  version: undefined,
+  onOpenModalRelease: undefined
 };
-const text = {
-  xl: {
-    fontSize: fontSizes.text.xl,
-    lineHeight: lineHeights[28],
-    letterSpacing: '0'
-  },
-  lg: {
-    fontSize: fontSizes.text.lg,
-    lineHeight: lineHeights[24],
-    letterSpacing: '0'
-  },
-  md: {
-    fontSize: fontSizes.text.md,
-    lineHeight: lineHeights[22],
-    letterSpacing: '0'
-  },
-  sm: {
-    fontSize: fontSizes.text.sm,
-    lineHeight: lineHeights[18],
-    letterSpacing: '0'
-  },
-  xs: {
-    fontSize: fontSizes.text.xs,
-    lineHeight: lineHeights[14],
-    letterSpacing: '0'
-  }
+
+const Header = ({
+  data,
+  onLogout,
+  onOpenModalRelease,
+  ...props
+}) => /*#__PURE__*/createElement(Box, Object.assign({
+  minH: 14,
+  bg: useColorModeValue('white', 'ebony-clay.800'),
+  boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
+  px: 4,
+  py: 1
+}, props), /*#__PURE__*/createElement(Flex, {
+  h: 14,
+  alignItems: "center",
+  justifyContent: "space-between"
+}, /*#__PURE__*/createElement(XMSLogo, null), /*#__PURE__*/createElement(HStack, {
+  spacing: 2,
+  alignItems: "center"
+}, /*#__PURE__*/createElement(VoilaLogo, null), /*#__PURE__*/createElement(Version, {
+  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, {
+  alignItems: "center"
+}, /*#__PURE__*/createElement(SwitchMode, null), /*#__PURE__*/createElement(Profile, {
+  data: data,
+  onLogout: onLogout
+}))));
+Header.defaultProps = {
+  data: undefined,
+  onLogout: undefined,
+  onOpenModalRelease: undefined
 };
-const button = {
-  lg: {
-    fontSize: fontSizes.button.lg,
-    lineHeight: lineHeights[28],
-    letterSpacing: '0',
-    fontWeight: fontWeights.normal
-  },
-  md: {
-    fontSize: fontSizes.button.md,
-    lineHeight: lineHeights[22],
-    letterSpacing: '0',
-    fontWeight: fontWeights.normal
-  },
-  sm: {
-    fontSize: fontSizes.button.sm,
-    lineHeight: lineHeights[14],
-    letterSpacing: '0',
-    fontWeight: fontWeights.normal
-  }
+
+const ModalBody = /*#__PURE__*/React__default.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/React__default.createElement(ModalBody$1, Object.assign({
+    ref: ref,
+    background: useColorModeValue('white', 'mirage.900')
+  }, rest), children);
+});
+
+const ModalCloseButton = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/React__default.createElement(ModalCloseButton$1, Object.assign({
+    ref: ref,
+    top: 4,
+    right: 4,
+    size: "sm",
+    background: useColorModeValue('neutral.50', 'mirage.900')
+  }, props));
+});
+
+const ModalFooter = /*#__PURE__*/forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/React__default.createElement(ModalFooter$1, Object.assign({
+    ref: ref,
+    background: useColorModeValue('neutral.200', 'mirage.900'),
+    borderBottomRadius: "md"
+  }, rest), children);
+});
+
+const ModalHeader = /*#__PURE__*/forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/React__default.createElement(ModalHeader$1, Object.assign({
+    ref: ref,
+    background: useColorModeValue('neutral.200', 'mirage.900'),
+    borderTopRadius: 'md',
+    fontSize: 'lg'
+  }, rest), children);
+});
+
+/* eslint-disable react-hooks/rules-of-hooks */
+const Navigation = ({
+  navigations,
+  activePath,
+  as,
+  host,
+  ...props
+}) => {
+  return /*#__PURE__*/createElement(Box, Object.assign({
+    bg: useColorModeValue('white', 'ebony-clay.800'),
+    boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
+    borderRadius: "md",
+    overflowX: "auto"
+  }, props), /*#__PURE__*/createElement(Flex, {
+    alignItems: "center",
+    p: 2
+  }, /*#__PURE__*/createElement(HStack, {
+    spacing: 2
+  }, navigations === null || navigations === void 0 ? void 0 : navigations.map(navigation => {
+    const isActive = activePath.startsWith(navigation.navLink || '');
+    const activeBg = isActive ? 'primary.500' : undefined;
+    return /*#__PURE__*/createElement(Popover$1, {
+      key: navigation.title,
+      trigger: "hover",
+      placement: "bottom-start"
+    }, ({
+      isOpen
+    }) => /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(PopoverTrigger, null, /*#__PURE__*/createElement(Box, {
+      display: "flex",
+      alignItems: "center",
+      borderRadius: "md",
+      cursor: "pointer",
+      _hover: {
+        backgroundColor: !isActive ? useColorModeValue('dove-gray.50', 'transparent') : activeBg
+      },
+      backgroundColor: isOpen && !isActive ? useColorModeValue('dove-gray.50', 'transparent') : activeBg,
+      color: isActive ? 'white' : 'inherit',
+      p: 2
+    }, /*#__PURE__*/createElement(Icon, {
+      as: navigation.icon,
+      mr: 2
+    }), /*#__PURE__*/createElement(Text, {
+      whiteSpace: "nowrap",
+      fontSize: "text.sm",
+      fontWeight: 400
+    }, navigation.title), /*#__PURE__*/createElement(ChevronDownIcon, {
+      ml: 2
+    }))), navigation.children && /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Box, {
+      zIndex: "popover"
+    }, /*#__PURE__*/createElement(PopoverContent, {
+      key: navigation.title,
+      bg: useColorModeValue('white', 'ebony-clay.800'),
+      maxW: 250,
+      border: "none",
+      borderRadius: "md",
+      boxShadow: "0 5px 25px rgb(0 0 0 / 10%)"
+    }, navigation.children.map(({
+      title,
+      navHost,
+      navLink,
+      icon
+    }) => {
+      const link = navHost ? `${navHost}${navLink}` : navLink;
+      const isLocalLink = host === navHost;
+      const isActiveSub = activePath === navLink;
+      return /*#__PURE__*/createElement(Link, {
+        as: isLocalLink ? as : undefined,
+        key: title,
+        href: link,
+        _hover: {
+          textDecoration: 'none'
+        }
+      }, /*#__PURE__*/createElement(Box, {
+        display: "flex",
+        position: "relative",
+        alignItems: "center",
+        transition: "padding 0.35s ease 0s",
+        _hover: {
+          backgroundColor: useColorModeValue('dove-gray.50', 'mirage.900'),
+          color: useColorModeValue('primary.500', 'dove-gray.600'),
+          px: 5,
+          py: 4,
+          _first: {
+            borderTopRadius: 'md'
+          },
+          _last: {
+            borderBottomRadius: 'md'
+          }
+        },
+        color: isActiveSub ? 'primary.500' : 'inherit',
+        css: css`
+                                      border-spacing: 4px;
+                                    `,
+        px: 6,
+        py: 4
+      }, /*#__PURE__*/createElement(Icon, {
+        as: icon,
+        mr: 3
+      }), /*#__PURE__*/createElement(Text, {
+        fontSize: "text.sm"
+      }, title), isActiveSub && /*#__PURE__*/createElement(Box, {
+        width: 0.5,
+        height: 8,
+        position: "absolute",
+        bg: "primary.500",
+        right: 0,
+        zIndex: "popover"
+      })));
+    }))))));
+  }))));
 };
-const field = {
-  lg: {
-    fontSize: fontSizes.field.lg,
-    lineHeight: lineHeights[24],
-    letterSpacing: '0',
-    fontWeight: fontWeights.normal
-  },
-  md: {
-    fontSize: fontSizes.field.md,
-    lineHeight: lineHeights[22],
-    letterSpacing: '0',
-    fontWeight: fontWeights.normal
-  },
-  sm: {
-    fontSize: fontSizes.field.sm,
-    lineHeight: lineHeights[18],
-    letterSpacing: '0',
-    fontWeight: fontWeights.normal
-  }
+Navigation.defaultProps = {
+  navigations: undefined,
+  as: 'a',
+  host: undefined
 };
-const textStyles = {
-  heading,
-  text,
-  button,
-  field
+
+const PaginationButton = /*#__PURE__*/forwardRef$1(({
+  className,
+  style,
+  isActive,
+  children,
+  ...rest
+}, ref) => {
+  const btnBg = useColorModeValue('neutral.300', 'mirage.900');
+  const btnColor = useColorModeValue('black.high', 'primary.300');
+  const btnNotActiveBg = useColorModeValue('secondary.50', 'primary.500');
+  const btnNotActiveColor = useColorModeValue('primary.500', 'white');
+  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+    "data-test-id": "Pagination-Button",
+    ref: ref,
+    className: className,
+    style: style,
+    borderRadius: 50,
+    fontWeight: 700,
+    m: 0,
+    px: 3,
+    py: 2,
+    h: 8,
+    minW: "auto",
+    background: isActive ? 'primary.500' : btnBg,
+    color: isActive ? 'white' : btnColor,
+    _hover: !isActive ? {
+      background: btnNotActiveBg,
+      color: btnNotActiveColor
+    } : {},
+    _disabled: {
+      background: useColorModeValue('neutral.300', 'mirage.900'),
+      color: 'neutral.600',
+      pointerEvents: 'none'
+    }
+  }, rest), children);
+});
+PaginationButton.displayName = 'PaginationButton';
+PaginationButton.defaultProps = {
+  isActive: undefined
+};
+
+const PaginationButtonTrigger = ({
+  color,
+  isDisabled,
+  onClick,
+  visuallyHidden,
+  icon
+}) => /*#__PURE__*/createElement(PaginationButton, {
+  "data-test-id": "DLVCc_fBK35spHm5WxjcJ",
+  color: color,
+  isDisabled: isDisabled,
+  onClick: onClick
+}, /*#__PURE__*/createElement(VisuallyHidden, null, visuallyHidden), icon);
+PaginationButtonTrigger.defaultProps = {
+  color: undefined,
+  isDisabled: undefined,
+  onClick: undefined,
+  visuallyHidden: undefined,
+  icon: undefined
 };
 
+const Pagination = ({
+  className,
+  current,
+  total,
+  onSelect
+}) => {
+  const btnColorDisabled = useColorModeValue('secondary.100', 'primary.500');
+  const btnColor = useColorModeValue('primary.500', 'secondary.100');
+  const disabledPrevious = current === 1;
+  const previousButtonColor = disabledPrevious ? btnColorDisabled : btnColor;
+  const disabledNext = current === total;
+  const nextButtonColor = disabledNext ? btnColorDisabled : btnColor;
+  const handleSelectPage = page => {
+    if (onSelect) {
+      onSelect(page);
+    }
+  };
+  const generatePages = () => {
+    const maxButtons = 5;
+    const pageButtons = [];
+    let startPage;
+    let endPage;
+    if ( maxButtons < total) {
+      startPage = Math.max(Math.min(current - Math.floor(maxButtons / 2), total - maxButtons + 1), 1);
+      endPage = startPage + maxButtons - 1;
+    } else {
+      startPage = 1;
+      endPage = total;
+    }
+    // eslint-disable-next-line no-plusplus
+    for (let page = startPage; page <= endPage; ++page) {
+      pageButtons.push(page);
+    }
+    return pageButtons;
+  };
+  return /*#__PURE__*/createElement(Box, {
+    className: className,
+    display: "inline-flex",
+    alignItems: "center"
+  }, /*#__PURE__*/createElement(Box, {
+    mr: 1
+  }, /*#__PURE__*/createElement(PaginationButtonTrigger, {
+    "data-test-id": "Pagination-Button",
+    color: previousButtonColor,
+    isDisabled: disabledPrevious,
+    onClick: () => handleSelectPage(1),
+    visuallyHidden: "First Page",
+    icon: /*#__PURE__*/createElement(ArrowLeftIcon, {
+      width: 2
+    })
+  })), /*#__PURE__*/createElement(Box, {
+    backgroundColor: useColorModeValue('neutral.300', 'mirage.900'),
+    borderRadius: 50
+  }, /*#__PURE__*/createElement(PaginationButtonTrigger, {
+    "data-test-id": "Pagination-Button",
+    color: previousButtonColor,
+    isDisabled: disabledPrevious,
+    onClick: () => handleSelectPage(current - 1),
+    visuallyHidden: "Previous Page",
+    icon: /*#__PURE__*/createElement(ChevronLeftIcon, null)
+  }), generatePages().map(page => {
+    return /*#__PURE__*/createElement(PaginationButton, {
+      "data-test-id": "Pagination-Button",
+      key: page,
+      isActive: page === current,
+      onClick: () => typeof page === 'number' ? handleSelectPage(page) : null
+    }, /*#__PURE__*/createElement(Text, {
+      scale: 300,
+      fontSize: "text.sm",
+      lineHeight: 18,
+      fontWeight: 500
+    }, page));
+  }), /*#__PURE__*/createElement(PaginationButtonTrigger, {
+    "data-test-id": "Pagination-Button",
+    color: nextButtonColor,
+    isDisabled: disabledNext,
+    onClick: () => handleSelectPage(current + 1),
+    visuallyHidden: "Next Page",
+    icon: /*#__PURE__*/createElement(ChevronRightIcon, null)
+  })), /*#__PURE__*/createElement(Box, {
+    ml: 1
+  }, /*#__PURE__*/createElement(PaginationButtonTrigger, {
+    "data-test-id": "Pagination-Button",
+    color: nextButtonColor,
+    isDisabled: disabledNext,
+    onClick: () => handleSelectPage(total),
+    visuallyHidden: "Last Page",
+    icon: /*#__PURE__*/createElement(ArrowRightIcon, {
+      width: 2
+    })
+  })));
+};
+Pagination.defaultProps = {
+  className: undefined,
+  onSelect: undefined
+};
+Pagination.displayName = 'Pagination';
 
+const PaginationDetail = ({
+  page,
+  limit,
+  length,
+  scale = 300,
+  fontSize = 'xs',
+  lineHeight = 18,
+  ...rest
+}) => {
+  return /*#__PURE__*/createElement(Text, Object.assign({
+    scale: scale,
+    fontSize: fontSize,
+    lineHeight: lineHeight
+  }, rest), `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item`);
+};
 
-var foundations = {
-  __proto__: null,
-  colors: colors,
-  radii: radius,
-  space: spacing,
-  sizes: sizes,
-  fonts: fonts,
-  fontSizes: fontSizes,
-  lineHeights: lineHeights,
-  textStyles: textStyles
+const PaginationFilter = ({
+  limit,
+  label = 'Baris per halaman:',
+  items,
+  onChange,
+  ...rest
+}) => {
+  const [value, setValue] = useState(limit);
+  return /*#__PURE__*/createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/createElement(Text, Object.assign({
+    fontSize: "text.sm",
+    lineHeight: 18,
+    color: useColorModeValue('neutral.900', 'white')
+  }, rest), label), /*#__PURE__*/createElement(Select$1, {
+    textAlign: "center",
+    size: "xs",
+    outline: "none",
+    border: "none",
+    boxShadow: "none",
+    width: 18,
+    icon: /*#__PURE__*/createElement(FiChevronDown, null),
+    _focusVisible: {
+      boxShadow: 'none'
+    },
+    onChange: e => {
+      const numberValue = Number(e.target.value);
+      onChange(numberValue);
+      setValue(numberValue);
+    },
+    value: value
+  }, items.map(item => {
+    return /*#__PURE__*/createElement("option", {
+      key: item,
+      value: item
+    }, item);
+  })));
+};
+PaginationFilter.defaultProps = {
+  limit: 10,
+  label: undefined
 };
 
 const styleMd = textStyles.text.sm;
@@ -3020,5 +3123,5 @@ const Provider = ({
 };
 Provider.displayName = 'Provider';
 
-export { BreadCrumb, DataTable, Datepicker, Field, Header, InputField, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Tab, TabList, TabPanel, TextareaField, Uploader, theme, useInternalUI };
+export { BreadCrumb, DataTable, DatePickerMonth, Datepicker, Field, Header, InputField, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Tab, TabList, TabPanel, TextareaField, Uploader, theme, useInternalUI };
 //# sourceMappingURL=internal-ui.esm.js.map