@ctlyst.id/internal-ui 1.0.1-canary.4 → 1.0.1

package/dist/internal-ui.esm.js

@@ -0,0 +1,3008 @@
+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, 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';
+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, ModalBody, 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';
+import { ChevronUpIcon, ChevronDownIcon, UpDownIcon, ArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, ArrowRightIcon } from '@chakra-ui/icons';
+import { css, Global } from '@emotion/react';
+import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
+import classnames from 'classnames';
+import ReactDatePicker from 'react-datepicker';
+import { useColorMode } from '@chakra-ui/system';
+import ReactSelect from 'react-select';
+import { AsyncPaginate } from 'react-select-async-paginate';
+import ReactSelectCreatable from 'react-select/creatable';
+import ReactSelectAsyncCreatable from 'react-select/async-creatable';
+import { useDropzone } from 'react-dropzone';
+import { mode, getColor } from '@chakra-ui/theme-tools';
+import { checkboxAnatomy, inputAnatomy, radioAnatomy, switchAnatomy, popoverAnatomy } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers, cssVar, defineStyleConfig, defineStyle } from '@chakra-ui/styled-system';
+import axios from 'axios';
+
+/* eslint-disable react-hooks/rules-of-hooks */
+const BreadCrumb = props => {
+  const {
+    title,
+    children,
+    parents,
+    className,
+    disableHome,
+    spacing = 2
+  } = props;
+  const [neutral7, dark5] = useToken('colors', ['neutral.700', 'dark.500']);
+  return /*#__PURE__*/createElement(Box, {
+    "data-test-id": "CT_component_breadcrumb_breadcrumb",
+    className: className,
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingY: 2
+  }, /*#__PURE__*/createElement(Box, {
+    display: "flex",
+    alignItems: "center"
+  }, /*#__PURE__*/createElement(Text, {
+    pr: 2,
+    fontWeight: 500,
+    textStyle: "heading.3",
+    color: useColorModeValue('neutral.700', 'white')
+  }, title), /*#__PURE__*/createElement(Box, {
+    h: "22px",
+    borderLeft: "1px solid",
+    borderColor: useColorModeValue('neutral.700', 'white')
+  }), /*#__PURE__*/createElement(Breadcrumb, {
+    separator: /*#__PURE__*/createElement(FiChevronsRight, {
+      color: useColorModeValue(neutral7, dark5),
+      size: 14
+    }),
+    pl: 2.5,
+    pr: 4,
+    spacing: spacing,
+    sx: {
+      ol: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    },
+    display: "flex",
+    alignItems: "center",
+    className: "breadcrumb-wrapper"
+  }, /*#__PURE__*/createElement(BreadcrumbItem, null, /*#__PURE__*/createElement(BreadcrumbLink, {
+    href: !disableHome ? '/' : undefined,
+    style: {
+      ...(disableHome && {
+        cursor: 'default'
+      })
+    }
+  }, /*#__PURE__*/createElement(FiHome, {
+    className: "align-top",
+    size: 16,
+    color: useColorModeValue('#12784A', '#ffffff')
+  }))), parents === null || parents === void 0 ? void 0 : parents.map(val => /*#__PURE__*/createElement(BreadcrumbItem, {
+    key: val.name
+  }, /*#__PURE__*/createElement(BreadcrumbLink, {
+    "data-test-id": "iadKcMAul3QAdvmfIQjRE",
+    href: !val.disable ? val.link : undefined,
+    onClick: val.onClick,
+    style: {
+      ...(val.disable && {
+        cursor: 'default'
+      })
+    },
+    _hover: {
+      textDecoration: 'none'
+    }
+  }, /*#__PURE__*/createElement(Text, {
+    color: val.disable ? 'dark.600' : useColorModeValue('primary.500', 'white'),
+    fontSize: "text.sm",
+    fontWeight: 400
+  }, val.name)))), /*#__PURE__*/createElement(BreadcrumbItem, null, /*#__PURE__*/createElement(BreadcrumbLink, {
+    _hover: {
+      textDecor: 'none',
+      cursor: 'default'
+    }
+  }, /*#__PURE__*/createElement(Text, {
+    color: useColorModeValue('dark.700', 'white'),
+    fontSize: "text.sm",
+    fontWeight: 400
+  }, title))))), children && /*#__PURE__*/createElement(Box, null, children));
+};
+BreadCrumb.defaultProps = {
+  children: undefined,
+  parents: undefined,
+  className: undefined,
+  disableHome: undefined,
+  spacing: 2
+};
+
+const IndeterminateCheckbox = ({
+  indeterminate = false,
+  ...rest
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current && typeof indeterminate === 'boolean') {
+      ref.current.indeterminate = !rest.checked && indeterminate;
+    }
+  }, [ref, indeterminate]);
+  return /*#__PURE__*/createElement(Flex, {
+    align: "center"
+  }, /*#__PURE__*/createElement("input", Object.assign({
+    type: "checkbox",
+    ref: ref
+  }, rest)));
+};
+
+/* eslint-disable react-hooks/rules-of-hooks */
+const DataTable = ({
+  columns,
+  dataSource = [],
+  isLoading,
+  withSelectedRow,
+  onSelectedRow,
+  onSort,
+  manualSorting,
+  sortingState,
+  styles,
+  ...props
+}) => {
+  const [sorting, setSorting] = useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
+  const [rowSelection, onRowSelectionChange] = useState({});
+  const dataColumns = useMemo(() => columns, [columns]);
+  const checkboxColumn = useMemo(() => [{
+    id: 'select',
+    header: ({
+      table
+    }) => /*#__PURE__*/createElement(IndeterminateCheckbox, Object.assign({}, {
+      checked: table.getIsAllRowsSelected(),
+      indeterminate: table.getIsSomeRowsSelected(),
+      onChange: table.getToggleAllRowsSelectedHandler()
+    })),
+    cell: ({
+      row
+    }) => /*#__PURE__*/createElement(IndeterminateCheckbox, Object.assign({}, {
+      checked: row.getIsSelected(),
+      indeterminate: row.getIsSomeSelected(),
+      onChange: row.getToggleSelectedHandler()
+    }))
+  }], []);
+  const generateColumn = () => {
+    if (withSelectedRow) {
+      return [...checkboxColumn, ...dataColumns];
+    }
+    return dataColumns;
+  };
+  const onSortingChange = data => {
+    setSorting(data);
+    if (onSort) {
+      onSort(data);
+    }
+  };
+  const table = useReactTable({
+    data: dataSource,
+    columns: generateColumn(),
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    manualPagination: true,
+    sortDescFirst: true,
+    state: {
+      sorting,
+      rowSelection
+    },
+    onRowSelectionChange,
+    onSortingChange,
+    manualSorting
+  });
+  const {
+    flatRows
+  } = table.getSelectedRowModel();
+  useEffect(() => {
+    const rowData = flatRows.map(row => row.original);
+    if (onSelectedRow) {
+      onSelectedRow(rowData);
+    }
+  }, [flatRows]);
+  return /*#__PURE__*/createElement(Box, Object.assign({}, props), isLoading && /*#__PURE__*/createElement(Flex, {
+    w: "100%",
+    h: "100%",
+    pos: "absolute",
+    bg: "white",
+    align: "center",
+    justify: "center",
+    zIndex: 2
+  }, /*#__PURE__*/createElement(Spinner, {
+    color: "primary.500",
+    thickness: "4px",
+    size: "lg"
+  })), /*#__PURE__*/createElement(Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/createElement(Thead, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableHead), table.getHeaderGroups().map(headerGroup => /*#__PURE__*/createElement(Tr, Object.assign({
+    key: headerGroup.id,
+    bg: useColorModeValue('initial', 'ebony-clay.700')
+  }, styles === null || styles === void 0 ? void 0 : styles.tableRow), headerGroup.headers.map(header => {
+    var _ref;
+    return /*#__PURE__*/createElement(Th, Object.assign({
+      key: header.id,
+      colSpan: header.colSpan
+    }, styles === null || styles === void 0 ? void 0 : styles.tableColumnHeader), /*#__PURE__*/createElement(Flex, {
+      "data-test-id": `CT_Container_TableHeader_${header.id}`,
+      textTransform: "capitalize",
+      userSelect: "none",
+      align: "center",
+      justifyContent: "space-between",
+      onClick: header.column.getToggleSortingHandler(),
+      cursor: header.column.getCanSort() ? 'pointer' : 'default'
+    }, /*#__PURE__*/createElement(Text, {
+      fontSize: "text.sm",
+      fontWeight: 400,
+      lineHeight: "18px",
+      color: useColorModeValue('neutral.900', 'white')
+    }, flexRender(header.column.columnDef.header, header.getContext())), /*#__PURE__*/createElement(Box, {
+      as: "span",
+      pl: "2",
+      "data-test-id": `CT_Container_SortingIcon_${header.id}`
+    }, (_ref = header.column.getCanSort() && {
+      asc: /*#__PURE__*/createElement(ChevronUpIcon, null),
+      desc: /*#__PURE__*/createElement(ChevronDownIcon, null)
+    }[header.column.getIsSorted()]) !== null && _ref !== void 0 ? _ref : /*#__PURE__*/createElement(UpDownIcon, {
+      h: 2
+    }))));
+  })))), /*#__PURE__*/createElement(Tbody, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableBody), table.getRowModel().rows.map(row => /*#__PURE__*/createElement(Tr, Object.assign({
+    key: row.id
+  }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
+    css: css`
+                &:last-child {
+                  td {
+                    border-bottom: none;
+                  }
+                }
+              `
+  }), row.getVisibleCells().map(cell => /*#__PURE__*/createElement(Td, Object.assign({
+    key: cell.id,
+    fontSize: "text.sm",
+    color: useColorModeValue('dark.800', 'dark.300')
+  }, styles === null || styles === void 0 ? void 0 : styles.tableCell), flexRender(cell.column.columnDef.cell, cell.getContext()))))))));
+};
+/* eslint-disable react/default-props-match-prop-types */
+DataTable.defaultProps = {
+  withSelectedRow: false,
+  overflowX: 'scroll',
+  pos: 'relative',
+  maxW: '100%',
+  minH: 400,
+  w: 'full',
+  styles: undefined,
+  isLoading: undefined,
+  onSelectedRow: undefined,
+  onSort: undefined,
+  manualSorting: false,
+  sortingState: []
+};
+
+const Styles = () => {
+  const {
+    colorMode
+  } = useColorMode();
+  return React.createElement(Global, {
+    styles: `
+      @charset "UTF-8";
+      .react-datepicker__year-read-view--down-arrow,
+      .react-datepicker__month-read-view--down-arrow,
+      .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
+        border-color: ${colorMode === 'light' ? '#6E6B7B' : '#d0d1d2'};
+        border-style: solid;
+        border-width: 1px 1px 0 0;
+        content: "";
+        display: block;
+        height: 7px;
+        position: absolute;
+        top: 13px;
+        width: 7px;
+      }
+      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
+        margin-left: -4px;
+        position: absolute;
+        width: 0;
+      }
+      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
+        box-sizing: content-box;
+        position: absolute;
+        border: 8px solid transparent;
+        height: 0;
+        width: 1px;
+        content: "";
+        z-index: -1;
+        border-width: 8px;
+        left: -8px;
+      }
+      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
+        border-bottom-color: #aeaeae;
+      }
+
+      .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
+        top: 0;
+        margin-top: -8px;
+      }
+      .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
+        border-top: none;
+        border-bottom-color: #f0f0f0;
+      }
+      .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
+        top: 0;
+      }
+      .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
+        top: -1px;
+        border-bottom-color: #aeaeae;
+      }
+
+      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
+        bottom: 0;
+        margin-bottom: -8px;
+      }
+      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
+        border-bottom: none;
+        border-top-color: #fff;
+      }
+      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
+        bottom: 0;
+      }
+      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
+        bottom: -1px;
+        border-top-color: #aeaeae;
+      }
+
+      .react-datepicker-wrapper {
+        display: inline-block;
+        padding: 0;
+        border: 0;
+        width: 100%;
+      }
+
+      .react-datepicker {
+        font-family: "inherit", helvetica, arial, sans-serif;
+        font-size: 0.75;
+        background-color: ${colorMode === 'light' ? '#ffffff' : '#283046'};
+        color: ${colorMode === 'light' ? '#000' : '#d0d1d2'};
+        filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.08));
+        border-radius: 0.3rem;
+        display: inline-block;
+        position: relative;
+      }
+
+      .react-datepicker.inline {
+        filter: none;
+      }
+
+      .react-datepicker--time-only .react-datepicker__triangle {
+        left: 35px;
+      }
+      .react-datepicker--time-only .react-datepicker__time-container {
+        border-left: 0;
+      }
+      .react-datepicker--time-only .react-datepicker__time,
+      .react-datepicker--time-only .react-datepicker__time-box {
+        border-bottom-left-radius: 0.3rem;
+        border-bottom-right-radius: 0.3rem;
+      }
+
+      .react-datepicker__triangle {
+        position: absolute;
+        left: 50px;
+      }
+
+      .react-datepicker-popper {
+        z-index: 1;
+      }
+      .react-datepicker-popper[data-placement^=bottom] {
+        padding-top: 10px;
+      }
+      .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
+        left: auto;
+        right: 50px;
+      }
+      .react-datepicker-popper[data-placement^=top] {
+        padding-bottom: 10px;
+      }
+      .react-datepicker-popper[data-placement^=right] {
+        padding-left: 8px;
+      }
+      .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
+        left: auto;
+        right: 42px;
+      }
+      .react-datepicker-popper[data-placement^=left] {
+        padding-right: 8px;
+      }
+      .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
+        left: 42px;
+        right: auto;
+      }
+
+      .react-datepicker__header {
+        text-align: center;
+        background-color: ${colorMode === 'light' ? '#ffffff' : '#131620'};
+        border-top-left-radius: 0.3rem;
+        padding: 8px 0;
+        position: relative;
+      }
+      .react-datepicker__header--time {
+        padding-bottom: 8px;
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+      .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
+        border-top-left-radius: 0;
+      }
+      .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
+        border-top-right-radius: 0.3rem;
+      }
+
+      .react-datepicker__year-dropdown-container--select,
+      .react-datepicker__month-dropdown-container--select,
+      .react-datepicker__month-year-dropdown-container--select,
+      .react-datepicker__year-dropdown-container--scroll,
+      .react-datepicker__month-dropdown-container--scroll,
+      .react-datepicker__month-year-dropdown-container--scroll {
+        display: inline-block;
+        margin: 0 2px;
+      }
+
+      .react-datepicker__current-month,
+      .react-datepicker-time__header,
+      .react-datepicker-year-header {
+        margin-top: 0;
+        color: ${colorMode === 'light' ? '#111111' : '#d0d1d2'};
+        font-size: 0.75;
+      }
+
+      .react-datepicker-time__header {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      .react-datepicker__navigation {
+        align-items: center;
+        background: none;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        cursor: pointer;
+        position: absolute;
+        top: 2px;
+        padding: 0;
+        border: none;
+        z-index: 1;
+        height: 32px;
+        width: 32px;
+        text-indent: -999em;
+        overflow: hidden;
+      }
+      .react-datepicker__navigation--previous {
+        left: 2px;
+      }
+      .react-datepicker__navigation--next {
+        right: 2px;
+      }
+      .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
+        right: 85px;
+      }
+      .react-datepicker__navigation--years {
+        position: relative;
+        top: 0;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+      }
+      .react-datepicker__navigation--years-previous {
+        top: 4px;
+      }
+      .react-datepicker__navigation--years-upcoming {
+        top: -4px;
+      }
+      .react-datepicker__navigation:hover *::before {
+        border-color: #a6a6a6;
+      }
+
+      .react-datepicker__navigation-icon {
+        position: relative;
+        top: -1px;
+        font-size: 20px;
+        width: 0;
+      }
+      .react-datepicker__navigation-icon--next {
+        left: -2px;
+      }
+      .react-datepicker__navigation-icon--next::before {
+        transform: rotate(45deg);
+        left: -7px;
+      }
+      .react-datepicker__navigation-icon--previous {
+        right: -2px;
+      }
+      .react-datepicker__navigation-icon--previous::before {
+        transform: rotate(225deg);
+        right: -7px;
+      }
+
+      .react-datepicker__month-container {
+        float: left;
+        border-radius: 8px;
+      }
+
+      .react-datepicker__year {
+        margin: 0.4rem;
+        text-align: center;
+      }
+      .react-datepicker__year-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        max-width: 180px;
+      }
+      .react-datepicker__year .react-datepicker__year-text {
+        display: inline-block;
+        width: 4rem;
+        margin: 2px;
+      }
+
+      .react-datepicker__month {
+        margin: 0.4rem;
+        text-align: center;
+      }
+      .react-datepicker__month .react-datepicker__month-text,
+      .react-datepicker__month .react-datepicker__quarter-text {
+        display: inline-block;
+        width: 4rem;
+        margin: 2px;
+      }
+
+      .react-datepicker__input-time-container {
+        width: 100%;
+      }
+      .react-datepicker__input-time-container .react-datepicker-time__caption {
+        width: 100%;
+        display: inline-block;
+      }
+      .react-datepicker__input-time-container .react-datepicker-time__input-container {
+        width: 100%;
+        display: inline-block;
+      }
+      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
+        width: 100%;
+        display: inline-block;
+      }
+      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
+        width: auto;
+      }
+      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
+      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
+        -moz-appearance: textfield;
+      }
+      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
+        width: 100%;
+        display: inline-block;
+      }
+
+      .react-datepicker__time-container {
+        float: right;
+        border-left: 1px solid #aeaeae;
+        width: 85px;
+      }
+      .react-datepicker__time-container--with-today-button {
+        display: inline;
+        border: 1px solid #aeaeae;
+        border-radius: 0.3rem;
+        position: absolute;
+        right: -72px;
+        top: 0;
+      }
+      .react-datepicker__time-container .react-datepicker__time {
+        position: relative;
+        background: white;
+        border-bottom-right-radius: 0.3rem;
+      }
+      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
+        width: 85px;
+        overflow-x: hidden;
+        margin: 0 auto;
+        text-align: center;
+        border-bottom-right-radius: 0.3rem;
+      }
+      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
+        list-style: none;
+        margin: 0;
+        height: calc(195px + (1.7rem / 2));
+        overflow-y: scroll;
+        padding-right: 0;
+        padding-left: 0;
+        width: 100%;
+        box-sizing: content-box;
+      }
+      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
+        height: 30px;
+        padding: 5px 10px;
+        white-space: nowrap;
+      }
+      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
+        cursor: pointer;
+        background-color: ${colorMode === 'light' ? '#f0f0f0' : '#131620'};
+      }
+      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
+        background-color: ${colorMode === 'light' ? '#12784A' : '#131620'};
+        color: white;
+        font-weight: bold;
+      }
+      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
+        background-color: ${colorMode === 'light' ? '#12784A' : '#131620'};
+      }
+      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
+        color: ${colorMode === 'light' ? '#ccc' : '#d0d1d2'};
+      }
+      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
+        cursor: default;
+        background-color: transparent;
+      }
+
+      .react-datepicker__week-number {
+        color: ${colorMode === 'light' ? '#ccc' : '#d0d1d2'};
+        display: inline-block;
+        width: 1.7rem;
+        line-height: 1.7rem;
+        text-align: center;
+        margin: 0.166rem;
+      }
+      .react-datepicker__week-number.react-datepicker__week-number--clickable {
+        cursor: pointer;
+      }
+      .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
+        border-radius: 0.3rem;
+        background-color: ${colorMode === 'light' ? '#f0f0f0' : '#131620'};
+      }
+
+      .react-datepicker__day-names,
+      .react-datepicker__week {
+        white-space: nowrap;
+      }
+
+      .react-datepicker__day-names {
+        margin-bottom: 0px;
+      }
+
+      .react-datepicker__day-name,
+      .react-datepicker__day,
+      .react-datepicker__time-name {
+        color: ${colorMode === 'light' ? '#000' : '#d0d1d2'};
+        display: inline-block;
+        width: 1.7rem;
+        line-height: 1.7rem;
+        text-align: center;
+        padding: 0.166rem;
+      }
+
+      .react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
+      .react-datepicker__quarter--selected,
+      .react-datepicker__quarter--in-selecting-range,
+      .react-datepicker__quarter--in-range {
+        border-radius: 0.3rem;
+        background-color: ${colorMode === 'light' ? '#12784A' : '#131620'};
+        color: #fff;
+      }
+      .react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
+      .react-datepicker__quarter--selected:hover,
+      .react-datepicker__quarter--in-selecting-range:hover,
+      .react-datepicker__quarter--in-range:hover {
+        background-color: ${colorMode === 'light' ? '#075331' : '#131620'};
+      }
+      .react-datepicker__month--disabled,
+      .react-datepicker__quarter--disabled {
+        color: #ccc;
+        pointer-events: none;
+      }
+      .react-datepicker__month--disabled:hover,
+      .react-datepicker__quarter--disabled:hover {
+        cursor: default;
+        background-color: transparent;
+      }
+
+      .react-datepicker__day,
+      .react-datepicker__month-text,
+      .react-datepicker__quarter-text,
+      .react-datepicker__year-text {
+        cursor: pointer;
+      }
+      .react-datepicker__day:hover,
+      .react-datepicker__month-text:hover,
+      .react-datepicker__quarter-text:hover,
+      .react-datepicker__year-text:hover {
+        border-radius: 0.3rem;
+        background-color: ${colorMode === 'light' ? '#f0f0f0' : '#131620'};
+      }
+      .react-datepicker__day--highlighted,
+      .react-datepicker__month-text--highlighted,
+      .react-datepicker__quarter-text--highlighted,
+      .react-datepicker__year-text--highlighted {
+        border-radius: 0.3rem;
+        background-color: #3dcc4a;
+        color: #fff;
+      }
+      .react-datepicker__day--highlighted:hover,
+      .react-datepicker__month-text--highlighted:hover,
+      .react-datepicker__quarter-text--highlighted:hover,
+      .react-datepicker__year-text--highlighted:hover {
+        background-color: #32be3f;
+      }
+      .react-datepicker__day--highlighted-custom-1,
+      .react-datepicker__month-text--highlighted-custom-1,
+      .react-datepicker__quarter-text--highlighted-custom-1,
+      .react-datepicker__year-text--highlighted-custom-1 {
+        color: magenta;
+      }
+      .react-datepicker__day--highlighted-custom-2,
+      .react-datepicker__month-text--highlighted-custom-2,
+      .react-datepicker__quarter-text--highlighted-custom-2,
+      .react-datepicker__year-text--highlighted-custom-2 {
+        color: green;
+      }
+      .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
+      .react-datepicker__month-text--selected,
+      .react-datepicker__month-text--in-selecting-range,
+      .react-datepicker__month-text--in-range,
+      .react-datepicker__quarter-text--selected,
+      .react-datepicker__quarter-text--in-selecting-range,
+      .react-datepicker__quarter-text--in-range,
+      .react-datepicker__year-text--selected,
+      .react-datepicker__year-text--in-selecting-range,
+      .react-datepicker__year-text--in-range {
+        border-radius: 0.3rem;
+        background-color: ${colorMode === 'light' ? '#12784A' : '#131620'};
+        color: #fff;
+      }
+      .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
+      .react-datepicker__month-text--selected:hover,
+      .react-datepicker__month-text--in-selecting-range:hover,
+      .react-datepicker__month-text--in-range:hover,
+      .react-datepicker__quarter-text--selected:hover,
+      .react-datepicker__quarter-text--in-selecting-range:hover,
+      .react-datepicker__quarter-text--in-range:hover,
+      .react-datepicker__year-text--selected:hover,
+      .react-datepicker__year-text--in-selecting-range:hover,
+      .react-datepicker__year-text--in-range:hover {
+        background-color: ${colorMode === 'light' ? '#075331' : '#131620'};
+      }
+      .react-datepicker__day--keyboard-selected,
+      .react-datepicker__month-text--keyboard-selected,
+      .react-datepicker__quarter-text--keyboard-selected,
+      .react-datepicker__year-text--keyboard-selected {
+        border-radius: 0.3rem;
+        background-color: ${colorMode === 'light' ? '#075331' : '#131620'};
+        color: #fff;
+      }
+      .react-datepicker__day--keyboard-selected:hover,
+      .react-datepicker__month-text--keyboard-selected:hover,
+      .react-datepicker__quarter-text--keyboard-selected:hover,
+      .react-datepicker__year-text--keyboard-selected:hover {
+        background-color: ${colorMode === 'light' ? '#075331' : '#131620'};
+      }
+      .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
+      .react-datepicker__month-text--in-range,
+      .react-datepicker__quarter-text--in-range,
+      .react-datepicker__year-text--in-range),
+      .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
+      .react-datepicker__month-text--in-range,
+      .react-datepicker__quarter-text--in-range,
+      .react-datepicker__year-text--in-range),
+      .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
+      .react-datepicker__month-text--in-range,
+      .react-datepicker__quarter-text--in-range,
+      .react-datepicker__year-text--in-range),
+      .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
+      .react-datepicker__month-text--in-range,
+      .react-datepicker__quarter-text--in-range,
+      .react-datepicker__year-text--in-range) {
+        background-color: rgba(18, 120, 74, 0.1);
+        color: ${colorMode === 'light' ? '#000' : '#d0d1d2'};
+      }
+      .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
+      .react-datepicker__month-text--in-selecting-range,
+      .react-datepicker__quarter-text--in-selecting-range,
+      .react-datepicker__year-text--in-selecting-range),
+      .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
+      .react-datepicker__month-text--in-selecting-range,
+      .react-datepicker__quarter-text--in-selecting-range,
+      .react-datepicker__year-text--in-selecting-range),
+      .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
+      .react-datepicker__month-text--in-selecting-range,
+      .react-datepicker__quarter-text--in-selecting-range,
+      .react-datepicker__year-text--in-selecting-range),
+      .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
+      .react-datepicker__month-text--in-selecting-range,
+      .react-datepicker__quarter-text--in-selecting-range,
+      .react-datepicker__year-text--in-selecting-range) {
+        background-color: ${colorMode === 'light' ? '#f0f0f0' : '#131620'};
+        color: ${colorMode === 'light' ? '#000' : '#d0d1d2'};
+      }
+      .react-datepicker__day--disabled,
+      .react-datepicker__month-text--disabled,
+      .react-datepicker__quarter-text--disabled,
+      .react-datepicker__year-text--disabled {
+        cursor: default;
+        color: #ccc;
+      }
+      .react-datepicker__day--disabled:hover,
+      .react-datepicker__month-text--disabled:hover,
+      .react-datepicker__quarter-text--disabled:hover,
+      .react-datepicker__year-text--disabled:hover {
+        background-color: transparent;
+      }
+
+      .react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
+      .react-datepicker__quarter-text.react-datepicker__month--selected:hover,
+      .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
+      .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
+      .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
+        background-color: ${colorMode === 'light' ? '#12784A' : '#131620'};
+      }
+      .react-datepicker__month-text:hover,
+      .react-datepicker__quarter-text:hover {
+        background-color: ${colorMode === 'light' ? '#f0f0f0' : '#131620'};
+      }
+
+      .react-datepicker__input-container {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+      }
+
+      .react-datepicker__year-read-view,
+      .react-datepicker__month-read-view,
+      .react-datepicker__month-year-read-view {
+        border: 1px solid transparent;
+        border-radius: 0.3rem;
+        position: relative;
+      }
+      .react-datepicker__year-read-view:hover,
+      .react-datepicker__month-read-view:hover,
+      .react-datepicker__month-year-read-view:hover {
+        cursor: pointer;
+      }
+      .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
+      .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
+      .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
+      .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
+      .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
+      .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
+        border-top-color: #b3b3b3;
+      }
+      .react-datepicker__year-read-view--down-arrow,
+      .react-datepicker__month-read-view--down-arrow,
+      .react-datepicker__month-year-read-view--down-arrow {
+        transform: rotate(135deg);
+        right: -16px;
+        top: 5px;
+        width: 5px;
+        height: 5px;
+        fill: #111111;
+
+      }
+      .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
+        background: ${colorMode === 'light' ? '#F5F5F5' : 'inherit'} ;
+
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+      }
+
+      .react-datepicker__year-dropdown,
+      .react-datepicker__month-dropdown,
+      .react-datepicker__month-year-dropdown {
+        background-color: ${colorMode === 'light' ? '#f0f0f0' : '#131620'};
+        position: absolute;
+        width: 50%;
+        left: 25%;
+        top: 30px;
+        z-index: 1;
+        text-align: center;
+        border-radius: 0.3rem;
+        border: 1px solid #aeaeae;
+      }
+      .react-datepicker__year-dropdown:hover,
+      .react-datepicker__month-dropdown:hover,
+      .react-datepicker__month-year-dropdown:hover {
+        cursor: pointer;
+      }
+      .react-datepicker__year-dropdown--scrollable,
+      .react-datepicker__month-dropdown--scrollable,
+      .react-datepicker__month-year-dropdown--scrollable {
+        height: 150px;
+        overflow-y: scroll;
+      }
+
+      .react-datepicker__year-option,
+      .react-datepicker__month-option,
+      .react-datepicker__month-year-option {
+        line-height: 20px;
+        width: 100%;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+      }
+      .react-datepicker__year-option:first-of-type,
+      .react-datepicker__month-option:first-of-type,
+      .react-datepicker__month-year-option:first-of-type {
+        border-top-left-radius: 0.3rem;
+        border-top-right-radius: 0.3rem;
+      }
+      .react-datepicker__year-option:last-of-type,
+      .react-datepicker__month-option:last-of-type,
+      .react-datepicker__month-year-option:last-of-type {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        border-bottom-left-radius: 0.3rem;
+        border-bottom-right-radius: 0.3rem;
+      }
+      .react-datepicker__year-option:hover,
+      .react-datepicker__month-option:hover,
+      .react-datepicker__month-year-option:hover {
+        background-color: #ccc;
+      }
+      .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
+      .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
+      .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
+        border-bottom-color: #b3b3b3;
+      }
+      .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
+      .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
+      .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
+        border-top-color: #b3b3b3;
+      }
+      .react-datepicker__year-option--selected,
+      .react-datepicker__month-option--selected,
+      .react-datepicker__month-year-option--selected {
+        position: absolute;
+        left: 15px;
+      }
+
+      .react-datepicker__close-icon {
+        cursor: pointer;
+        background-color: transparent;
+        border: 0;
+        outline: 0;
+        padding: 0 6px 0 0;
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        display: table-cell;
+        vertical-align: middle;
+      }
+      .react-datepicker__close-icon::after {
+        cursor: pointer;
+        background-color: ${colorMode === 'light' ? '#12784A' : '#131620'};
+        color: #fff;
+        border-radius: 50%;
+        height: 16px;
+        width: 16px;
+        padding: 2px;
+        font-size: 12px;
+        line-height: 1;
+        text-align: center;
+        display: table-cell;
+        vertical-align: middle;
+        content: "×";
+      }
+
+      .react-datepicker__today-button {
+        background: #f0f0f0;
+        border-top: 1px solid #aeaeae;
+        cursor: pointer;
+        text-align: center;
+        font-weight: bold;
+        padding: 5px 0;
+        clear: left;
+      }
+
+      .react-datepicker__portal {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.8);
+        left: 0;
+        top: 0;
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        z-index: 2147483647;
+      }
+      .react-datepicker__portal .react-datepicker__day-name,
+      .react-datepicker__portal .react-datepicker__day,
+      .react-datepicker__portal .react-datepicker__time-name {
+        width: 3rem;
+        line-height: 3rem;
+      }
+      @media (max-width: 400px), (max-height: 550px) {
+        .react-datepicker__portal .react-datepicker__day-name,
+      .react-datepicker__portal .react-datepicker__day,
+      .react-datepicker__portal .react-datepicker__time-name {
+          width: 2rem;
+          line-height: 2rem;
+        }
+      }
+      .react-datepicker__portal .react-datepicker__current-month,
+      .react-datepicker__portal .react-datepicker-time__header {
+        font-size: 1.44rem;
+      }
+
+      /** injected styles **/
+      .react-datepicker__day--outside-month {
+        color: ${colorMode === 'light' ? '#B9B9C3' : '#4D4D4D'};
+      }
+      .react-datepicker__day.react-datepicker__day--in-range {
+        border-radius: 0;
+        background: rgba(18, 120, 74, 0.1);
+        color: #12784A;
+      }
+      .react-datepicker__day.react-datepicker__day--range-start.react-datepicker__day--in-range,
+      .react-datepicker__day.react-datepicker__day--range-end.react-datepicker__day--in-range {
+        background: #12784A;
+        color: #fff;
+      }
+      .react-datepicker__day.react-datepicker__day--range-start.react-datepicker__day--in-range {
+        border-radius: 100px 0px 0px 100px;
+      }
+      .react-datepicker__day.react-datepicker__day--range-end.react-datepicker__day--in-range {
+        border-radius: 0px 100px 100px 0px;
+      }
+      .react-datepicker__day.react-datepicker__day--range-start.react-datepicker__day.react-datepicker__day--range-end {
+        border-radius: 100px;
+        padding: 0;
+      }
+      .react-datepicker__day.react-datepicker__day--outside-month:empty {
+        padding: 0;
+      }
+      .react-datepicker.inline .react-datepicker__header {
+        background-color: inherit;
+      }
+      .react-datepicker__day--keyboard-selected, .react-datepicker__day--keyboard-selected:hover {
+        background-color: inherit;
+        color: inherit;
+      }
+      .react-datepicker__day--today, .react-datepicker__day--today:hover {
+        color: #D82F23;
+      }
+      .react-datepicker__day--today:hover {
+        background: #f0f0f0;
+      }
+      .react-datepicker__day--selected.react-datepicker__day--today {
+        color: white;
+        background: #12784A;
+      }
+    `
+  });
+};
+
+const TimeInput = ({
+  value,
+  onChange,
+  label,
+  rightAddon
+}) => {
+  const [time, setTime] = React__default.useState(value || '00:00');
+  const handleChange = e => {
+    var _e$target;
+    setTime(((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '00:00');
+  };
+  React__default.useEffect(() => {
+    if (onChange) {
+      onChange(time);
+    }
+  }, [time]);
+  return /*#__PURE__*/React__default.createElement(Flex, {
+    flexDir: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    p: 4,
+    pt: 0
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    mb: 2
+  }, label), /*#__PURE__*/React__default.createElement(InputGroup, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React__default.createElement(Input$1, {
+    onChange: handleChange,
+    type: "time",
+    value: time,
+    "data-test-id": "CT_Component_datepicker_input_time"
+  }), rightAddon && /*#__PURE__*/React__default.createElement(InputRightAddon, null, rightAddon)));
+};
+TimeInput.displayName = 'DatepickerTimeInput';
+TimeInput.defaultProps = {
+  value: '00:00',
+  onChange: undefined,
+  label: 'Pilih Waktu',
+  rightAddon: 'WIB'
+};
+
+const Datepicker = ({
+  id,
+  label,
+  error,
+  isError,
+  helperText,
+  isRequired,
+  withTime,
+  value,
+  name,
+  onClear,
+  showMonth,
+  shortMonth,
+  ...props
+}) => {
+  var _props$dateFormat;
+  const selected = value ? new Date(value) : undefined;
+  const dateFormat = ((_props$dateFormat = props.dateFormat) !== null && _props$dateFormat !== void 0 ? _props$dateFormat : withTime) ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
+  const getTimeProps = () => {
+    if (!withTime) return {};
+    return {
+      timeInputLabel: '',
+      showTimeInput: true,
+      customTimeInput: /*#__PURE__*/React__default.createElement(TimeInput, null)
+    };
+  };
+  const component = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Styles, null), /*#__PURE__*/React__default.createElement(ReactDatePicker, Object.assign({
+    id: id,
+    name: name,
+    selected: selected,
+    customInput: /*#__PURE__*/React__default.createElement(Input$1, {
+      autoComplete: "off"
+    }),
+    dateFormat: dateFormat,
+    showPopperArrow: false,
+    calendarClassName: classnames({
+      inline: props.inline
+    }),
+    showMonthDropdown: showMonth,
+    useShortMonthInDropdown: showMonth ? shortMonth : false
+  }, getTimeProps(), props)));
+  if (props.inline) {
+    return component;
+  }
+  return /*#__PURE__*/React__default.createElement(FormControl, {
+    isRequired: isRequired,
+    "data-test-id": "CT_Component_datepicker_wrapper"
+  }, label && /*#__PURE__*/React__default.createElement(FormLabel$1, {
+    fontSize: "text.sm"
+  }, label), /*#__PURE__*/React__default.createElement(InputGroup, null, component, /*#__PURE__*/React__default.createElement(InputRightElement, null, !value && /*#__PURE__*/React__default.createElement(FiCalendar, null), value && /*#__PURE__*/React__default.createElement(FiX, {
+    "data-test-id": "bcpJJyCP0z_RIAGZXDU6s",
+    onClick: onClear,
+    cursor: "pointer"
+  }))), !isError ? /*#__PURE__*/React__default.createElement(FormHelperText, null, helperText) : /*#__PURE__*/React__default.createElement(FormErrorMessage, null, error));
+};
+Datepicker.defaultProps = {
+  id: undefined,
+  isRequired: undefined,
+  label: undefined,
+  error: undefined,
+  isError: undefined,
+  helperText: undefined,
+  withTime: undefined,
+  onClear: undefined,
+  selectsRange: undefined,
+  shortMonth: false,
+  showMonth: false
+};
+
+/* eslint-disable no-nested-ternary */
+const Field = props => {
+  const {
+    label,
+    isError,
+    error,
+    helperText,
+    isRequired,
+    children
+  } = props;
+  return React.createElement(FormControl, {
+    isInvalid: isError
+  }, label && (typeof label === 'string' ? React.createElement(FormLabel$1, {
+    fontSize: "field.sm",
+    requiredIndicator: undefined
+  }, isRequired && React.createElement(Box, {
+    as: "span",
+    color: "red.500",
+    ml: 0,
+    mr: 1
+  }, "*"), label) : label), children, !isError ? helperText && React.createElement(FormHelperText, {
+    fontSize: "field.sm"
+  }, helperText) : typeof error === 'string' ? React.createElement(FormErrorMessage, {
+    textStyle: "field.sm",
+    fontSize: "field.sm",
+    mt: 1,
+    marginStart: 1
+  }, error) : error);
+};
+Field.defaultProps = {
+  label: '',
+  isError: false,
+  error: undefined,
+  helperText: undefined,
+  isRequired: false
+};
+
+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 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 XMSLogo = () => React.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 = () => React.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")))));
+};
+Profile.defaultProps = {
+  data: undefined,
+  onLogout: undefined
+};
+
+const SwitchMode = () => {
+  const {
+    colorMode,
+    toggleColorMode
+  } = useColorMode$1();
+  return /*#__PURE__*/createElement(Box, {
+    mx: 5,
+    onClick: toggleColorMode,
+    cursor: "pointer"
+  }, colorMode === 'light' ? /*#__PURE__*/createElement(FiMoon, {
+    size: 20
+  }) : /*#__PURE__*/createElement(FiSun, {
+    size: 20
+  }));
+};
+
+// 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 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 ModalCloseButton = /*#__PURE__*/forwardRef((props, ref) => {
+  return React.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 React.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 React.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,
+  ...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"
+      }));
+    }))))));
+  }))));
+};
+Navigation.defaultProps = {
+  navigations: undefined,
+  as: 'a'
+};
+
+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 React.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`);
+};
+
+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 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
+};
+
+const radius = {
+  none: 0,
+  sm: '2px',
+  md: '4px',
+  lg: '8px',
+  full: '9999px'
+};
+
+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 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 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 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 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 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'
+  }
+};
+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
+};
+
+
+
+var foundations = {
+  __proto__: null,
+  colors: colors,
+  radii: radius,
+  space: spacing,
+  sizes: sizes,
+  fonts: fonts,
+  fontSizes: fontSizes,
+  lineHeights: lineHeights,
+  textStyles: textStyles
+};
+
+const styleMd = textStyles.text.sm;
+const selectStyle = {
+  fontSize: styleMd.fontSize,
+  lineHeight: styleMd.lineHeight,
+  letterSpacing: 0
+};
+function selectStyles(colorMode) {
+  return {
+    control: base => colorMode === 'dark' ? {
+      ...base,
+      ...selectStyle,
+      background: 'transparent',
+      color: colors.primary['300'],
+      borderColor: colors.secondary['500']
+    } : {
+      ...base,
+      ...selectStyle
+    },
+    option: (base, {
+      isSelected
+    }) => colorMode === 'dark' ? {
+      ...base,
+      ...selectStyle,
+      background: isSelected ? colors.primary['700'] : colors.dark['800'],
+      color: 'white'
+    } : {
+      ...base,
+      ...selectStyle
+    },
+    menu: base => colorMode === 'dark' ? {
+      ...base,
+      ...selectStyle,
+      background: colors.dark['800'],
+      zIndex: 5
+    } : {
+      ...base,
+      ...selectStyle,
+      zIndex: 5
+    },
+    singleValue: base => colorMode === 'dark' ? {
+      ...base,
+      ...selectStyle,
+      color: 'white'
+    } : {
+      ...base,
+      ...selectStyle
+    },
+    input: base => colorMode === 'dark' ? {
+      ...base,
+      ...selectStyle,
+      color: 'white'
+    } : {
+      ...base,
+      ...selectStyle
+    },
+    dropdownIndicator: base => colorMode === 'dark' ? {
+      ...base,
+      ...selectStyle,
+      color: colors.secondary['500']
+    } : {
+      ...base,
+      ...selectStyle
+    },
+    indicatorSeparator: base => colorMode === 'dark' ? {
+      ...base,
+      ...selectStyle,
+      backgroundColor: colors.secondary['500']
+    } : {
+      ...base,
+      ...selectStyle
+    }
+  };
+}
+const themeSelect = theme => {
+  return {
+    ...theme,
+    colors: {
+      ...theme.colors,
+      primary: colors.primary['500'],
+      primary25: colors.primary['50'],
+      primary50: colors.primary['100'],
+      primary75: colors.primary['200']
+    }
+  };
+};
+
+function Select({
+  styles,
+  ...rest
+}) {
+  const {
+    colorMode
+  } = useColorMode();
+  return React.createElement(ReactSelect, Object.assign({}, rest, {
+    styles: {
+      ...selectStyles(colorMode),
+      ...styles
+    },
+    theme: themeSelect
+  }));
+}
+
+function SelectAsync({
+  styles,
+  ...rest
+}) {
+  const {
+    colorMode
+  } = useColorMode();
+  return React.createElement(AsyncPaginate, Object.assign({}, rest, {
+    styles: {
+      ...selectStyles(colorMode),
+      ...styles
+    },
+    theme: themeSelect
+  }));
+}
+
+function SelectCreatable({
+  styles,
+  ...rest
+}) {
+  const {
+    colorMode
+  } = useColorMode();
+  return React.createElement(ReactSelectCreatable, Object.assign({}, rest, {
+    styles: {
+      ...selectStyles(colorMode),
+      ...styles
+    },
+    theme: themeSelect
+  }));
+}
+
+function SelectAsyncCreatable({
+  styles,
+  ...rest
+}) {
+  const {
+    colorMode
+  } = useColorMode();
+  return React.createElement(ReactSelectAsyncCreatable, Object.assign({}, rest, {
+    styles: {
+      ...selectStyles(colorMode),
+      ...styles
+    },
+    theme: themeSelect
+  }));
+}
+
+const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
+  var _props$leftAddon, _props$rightAddon;
+  const tabProps = useTab({
+    ...props,
+    ref
+  });
+  const isSelected = !!tabProps['aria-selected'];
+  const styles = useMultiStyleConfig('Tabs', tabProps);
+  return /*#__PURE__*/createElement(Button$1, Object.assign({
+    p: 3,
+    fontSize: "text.md",
+    _selected: {
+      borderColor: useColorModeValue('primary.400', 'primary.300'),
+      color: useColorModeValue('primary.500', 'primary.300'),
+      transform: 'translateY(-2px)'
+    },
+    color: useColorModeValue('black.high', 'primary.300'),
+    _focus: {
+      bg: 'none'
+    },
+    __css: styles.tab
+  }, tabProps), /*#__PURE__*/createElement(Flex, null, (_props$leftAddon = props.leftAddon) === null || _props$leftAddon === void 0 ? void 0 : _props$leftAddon.call(props, {
+    isSelected
+  }), tabProps.children, (_props$rightAddon = props.rightAddon) === null || _props$rightAddon === void 0 ? void 0 : _props$rightAddon.call(props, {
+    isSelected
+  })));
+});
+
+const TabList = /*#__PURE__*/forwardRef$1((props, ref) => React.createElement(TabList$1, {
+  borderBottom: "1px solid",
+  borderColor: useColorModeValue('gray.200', 'bright-gray.800'),
+  ref: ref
+}, props.children));
+
+const TabPanel = /*#__PURE__*/forwardRef$1((props, ref) => React.createElement(TabPanel$1, {
+  px: 0,
+  ref: ref
+}, props.children));
+
+const messages = {
+  dragActive: 'Drop file disini...',
+  dragInActive: `(Klik atau drag untuk input file)`,
+  dragReplace: `(Klik atau drag untuk mengganti file)`,
+  replaceFile: 'Ganti File',
+  uploadFile: 'Upload File'
+};
+
+const Uploader = ({
+  onHandleUploadFile,
+  onHandleRejections,
+  accept,
+  multiple,
+  selected,
+  maxFiles = 1,
+  renderError,
+  validator,
+  ...props
+}) => {
+  const [selectedFirstFile, setSelectedFirstFile] = useState();
+  const [isSelected, setIsSelected] = useState(selected || false);
+  const onDrop = useCallback(acceptedFiles => {
+    if (acceptedFiles.length > 0) {
+      onHandleUploadFile === null || onHandleUploadFile === void 0 ? void 0 : onHandleUploadFile(acceptedFiles);
+      if (!multiple) {
+        setIsSelected(true);
+        setSelectedFirstFile(acceptedFiles[0]);
+      }
+    }
+  }, [multiple, onHandleUploadFile]);
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    fileRejections
+  } = useDropzone({
+    onDrop,
+    accept,
+    maxFiles,
+    multiple,
+    validator
+  });
+  useEffect(() => {
+    if (fileRejections.length > 0 && onHandleRejections) {
+      onHandleRejections(fileRejections);
+    }
+  }, [fileRejections, onHandleRejections]);
+  const isError = useMemo(() => {
+    const error = fileRejections.length > 0;
+    if (error) {
+      setIsSelected(false);
+    }
+    return error;
+  }, [fileRejections]);
+  useEffect(() => {
+    setIsSelected(selected !== null && selected !== void 0 ? selected : false);
+  }, [selected]);
+  return /*#__PURE__*/createElement(Stack, {
+    direction: "column"
+  }, /*#__PURE__*/createElement(Flex, Object.assign({
+    minH: 200,
+    border: "1px dashed",
+    borderColor: isError ? 'danger.500' : 'primary.500',
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer"
+  }, props, getRootProps()), /*#__PURE__*/createElement("input", Object.assign({}, getInputProps())), isDragActive ? /*#__PURE__*/createElement(Text, null, messages.dragActive) : /*#__PURE__*/createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "center",
+    color: isError ? 'danger.500' : 'primary.500'
+  }, !multiple && isSelected && /*#__PURE__*/createElement(Heading, {
+    fontWeight: 400,
+    fontSize: "18px",
+    lineHeight: 28,
+    color: "black.high",
+    mb: 2
+  }, selectedFirstFile === null || selectedFirstFile === void 0 ? void 0 : selectedFirstFile.name), !isSelected && /*#__PURE__*/createElement(Heading, {
+    fontWeight: 400,
+    fontSize: "18px",
+    lineHeight: 28,
+    mb: 2
+  }, messages.uploadFile), isSelected ? /*#__PURE__*/createElement(Text, null, messages.dragReplace) : /*#__PURE__*/createElement(Text, null, messages.dragInActive))), renderError === null || renderError === void 0 ? void 0 : renderError(fileRejections));
+};
+Uploader.defaultProps = {
+  onHandleUploadFile: undefined,
+  onHandleRejections: undefined,
+  renderError: undefined,
+  selected: false
+};
+
+// You can also use the more specific type for
+// a single part component: ComponentSingleStyleConfig
+const Button = {
+  // The styles all button have in common
+  baseStyle: {
+    fontSize: 'body.1',
+    fontWeight: 'normal',
+    lineHeight: '1.25',
+    minW: 24,
+    px: 4,
+    py: 2,
+    borderRadius: 'md',
+    _disabled: {
+      opacity: 0.3
+    },
+    _hover: {
+      _disabled: {
+        opacity: 0.3
+      }
+    },
+    _active: {
+      _disabled: {
+        opacity: 0.3
+      }
+    },
+    _loading: {
+      opacity: 0.7
+    }
+  },
+  sizes: {
+    lg: {
+      fontSize: 'button.lg',
+      h: 12
+    },
+    md: {
+      fontSize: 'button.md',
+      h: 9
+    },
+    sm: {
+      fontSize: 'button.sm',
+      h: 6
+    }
+  },
+  // Two variants: outline and solid
+  variants: {
+    solid: {
+      color: 'white',
+      bg: 'primary.500',
+      _disabled: {
+        bg: 'primary.700'
+      },
+      _hover: {
+        bg: 'primary.600'
+      },
+      _active: {
+        bg: 'primary.700'
+      },
+      _focus: {
+        bg: 'primary.700'
+      }
+    },
+    outline: props => ({
+      color: 'primary.500',
+      borderWidth: 1,
+      borderStyle: 'inside',
+      bg: mode('white', 'transparent')(props),
+      borderColor: mode('primary.500', 'primary.500')(props),
+      _hover: {
+        bg: 'primary.50'
+      },
+      _active: {
+        bg: 'primary.100'
+      },
+      _focus: {
+        bg: 'primary.100'
+      }
+    }),
+    'outline-danger': {
+      color: 'danger.500',
+      bg: 'white',
+      borderStyle: 'inside',
+      borderWidth: 1,
+      borderColor: 'danger.500'
+    },
+    ghost: {
+      color: 'primary.500',
+      _disabled: {
+        bg: 'primary.100'
+      }
+    },
+    link: {
+      bg: 'transparent',
+      color: 'primary.500'
+    }
+  },
+  // The default size and variant values
+  defaultProps: {
+    size: 'md',
+    variant: 'solid',
+    orientation: 'vertical',
+    colorScheme: 'primary'
+  }
+};
+
+const {
+  definePartsStyle
+} = /*#__PURE__*/createMultiStyleConfigHelpers(checkboxAnatomy.keys);
+const $size = /*#__PURE__*/cssVar('checkbox-size');
+// You can also use the more specific type for
+// a single part component: ComponentSingleStyleConfig
+const Checkbox = {
+  // The styles all checkbox have in common
+  baseStyle: {
+    borderRadius: 'sm'
+  },
+  // Two sizes: sm and md
+  sizes: {
+    sm: /*#__PURE__*/definePartsStyle({
+      control: {
+        [$size.variable]: 'sizes.4',
+        borderRadius: 'md'
+      },
+      label: {
+        fontSize: 'text.sm'
+      },
+      icon: {
+        fontSize: '3xs'
+      }
+    }),
+    md: /*#__PURE__*/definePartsStyle({
+      control: {
+        [$size.variable]: 'sizes.5',
+        borderRadius: 'md'
+      },
+      label: {
+        fontSize: 'text.md'
+      },
+      icon: {
+        fontSize: '2xs'
+      }
+    }),
+    lg: /*#__PURE__*/definePartsStyle({
+      control: {
+        [$size.variable]: 'sizes.6',
+        borderRadius: 'md'
+      },
+      label: {
+        fontSize: 'text.lg'
+      },
+      icon: {
+        fontSize: 'xs'
+      }
+    })
+  },
+  // Two variants: outline and solid
+  variants: {},
+  // The default size and variant values
+  defaultProps: {
+    size: 'sm',
+    variant: 'solid',
+    orientation: 'vertical',
+    colorScheme: 'primary'
+  }
+};
+
+const baseStyle = /*#__PURE__*/defineStyle({
+  fontSize: 'field.sm',
+  marginEnd: 1,
+  mb: 1
+});
+const FormLabel = /*#__PURE__*/defineStyleConfig({
+  baseStyle
+});
+
+const {
+  definePartsStyle: definePartsStyle$1,
+  defineMultiStyleConfig
+} = /*#__PURE__*/createMultiStyleConfigHelpers(inputAnatomy.keys);
+const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
+  field: {
+    width: '100%',
+    minWidth: 0,
+    outline: 0,
+    px: 2.5,
+    py: 2,
+    position: 'relative',
+    appearance: 'none',
+    transitionProperty: 'common',
+    transitionDuration: 'normal',
+    color: 'black.high',
+    _disabled: {
+      bg: 'neutral.300',
+      border: '1px solid',
+      borderColor: 'neutral.400',
+      cursor: 'not-allowed'
+    },
+    _placeholder: {
+      color: 'black.low'
+    }
+  }
+});
+const size = {
+  lg: /*#__PURE__*/defineStyle({
+    fontSize: 'field.lg',
+    h: 12,
+    borderRadius: 'md'
+  }),
+  md: /*#__PURE__*/defineStyle({
+    fontSize: 'field.md',
+    h: 10,
+    borderRadius: 'md'
+  }),
+  sm: /*#__PURE__*/defineStyle({
+    fontSize: 'field.sm',
+    h: 9.5,
+    borderRadius: 'md'
+  })
+};
+const sizes$1 = {
+  lg: /*#__PURE__*/definePartsStyle$1({
+    field: size.lg,
+    addon: size.lg
+  }),
+  md: /*#__PURE__*/definePartsStyle$1({
+    field: size.md,
+    addon: size.md
+  }),
+  sm: /*#__PURE__*/definePartsStyle$1({
+    field: size.sm,
+    addon: size.sm
+  })
+};
+function getDefaults(props) {
+  const {
+    focusBorderColor,
+    errorBorderColor,
+    readOnlyBorderColor
+  } = props;
+  return {
+    focusBorderColor: focusBorderColor || mode('primary.500', 'primary.300')(props),
+    errorBorderColor: errorBorderColor || mode('danger.500', 'danger.300')(props),
+    readOnlyBorderColor: readOnlyBorderColor || mode('.500', 'danger.300')(props)
+  };
+}
+const outline = /*#__PURE__*/definePartsStyle$1(props => {
+  const {
+    theme
+  } = props;
+  const {
+    focusBorderColor: fc,
+    errorBorderColor: ec,
+    readOnlyBorderColor: rc
+  } = getDefaults(props);
+  return {
+    field: {
+      border: '1px solid',
+      borderColor: mode('dark.200', 'inherit')(props),
+      bg: mode('white', 'inherit')(props),
+      color: mode('inherit', 'white')(props),
+      _hover: {
+        borderColor: mode('gray.300', 'whiteAlpha.400')(props)
+      },
+      _readOnly: {
+        userSelect: 'all',
+        borderColor: getColor(theme, rc),
+        boxShadow: `0 0 0 0 ${getColor(theme, rc)}`
+      },
+      _invalid: {
+        borderColor: getColor(theme, ec),
+        boxShadow: `0 0 0 0 ${getColor(theme, ec)}`
+      },
+      _focusVisible: {
+        zIndex: 1,
+        borderColor: getColor(theme, fc),
+        boxShadow: `0 0 0 0 ${getColor(theme, fc)}`
+      }
+    },
+    addon: {
+      border: '1px solid',
+      borderColor: mode('inherit', 'whiteAlpha.50')(props),
+      bg: mode('gray.100', 'whiteAlpha.300')(props)
+    }
+  };
+});
+const unstyled = /*#__PURE__*/definePartsStyle$1({
+  field: {
+    bg: 'transparent',
+    px: '0',
+    height: 'auto'
+  },
+  addon: {
+    bg: 'transparent',
+    px: '0',
+    height: 'auto'
+  }
+});
+const variants = {
+  outline,
+  unstyled
+};
+const Input = /*#__PURE__*/defineMultiStyleConfig({
+  baseStyle: baseStyle$1,
+  sizes: sizes$1,
+  variants,
+  defaultProps: {
+    size: 'sm',
+    variant: 'outline'
+  }
+});
+
+const {
+  definePartsStyle: definePartsStyle$2
+} = /*#__PURE__*/createMultiStyleConfigHelpers(radioAnatomy.keys);
+// You can also use the more specific type for
+// a single part component: ComponentSingleStyleConfig
+const Radio = {
+  // The styles all checkbox have in common
+  baseStyle: /*#__PURE__*/definePartsStyle$2({
+    control: {
+      _checked: {
+        borderColor: 'primary.500',
+        bg: 'white',
+        _before: {
+          h: '72%',
+          w: '72%',
+          bg: 'primary.500'
+        },
+        _hover: {
+          borderColor: 'primary.500',
+          bg: 'gray.200'
+        }
+      }
+    }
+  }),
+  // Two sizes: sm and md
+  sizes: {
+    sm: /*#__PURE__*/definePartsStyle$2({
+      control: {
+        w: '3',
+        h: '3'
+      },
+      label: {
+        fontSize: 'text.sm'
+      }
+    }),
+    md: /*#__PURE__*/definePartsStyle$2({
+      control: {
+        w: '4',
+        h: '4'
+      },
+      label: {
+        fontSize: 'text.md'
+      }
+    }),
+    lg: /*#__PURE__*/definePartsStyle$2({
+      control: {
+        w: '5',
+        h: '5'
+      },
+      label: {
+        fontSize: 'text.lg'
+      }
+    })
+  },
+  // Two variants: outline and solid
+  variants: {},
+  // The default size and variant values
+  defaultProps: {
+    size: 'sm',
+    variant: 'solid',
+    orientation: 'vertical',
+    colorScheme: 'primary'
+  }
+};
+
+const {
+  definePartsStyle: definePartsStyle$3,
+  defineMultiStyleConfig: defineMultiStyleConfig$1
+} = /*#__PURE__*/createMultiStyleConfigHelpers$1(switchAnatomy.keys);
+const baseStyle$2 = /*#__PURE__*/definePartsStyle$3({
+  // define the part you're going to style
+  container: {
+    // ...
+  },
+  thumb: {
+    bg: 'white'
+  },
+  track: {
+    bg: 'neutral.400',
+    p: 1,
+    _checked: {
+      bg: 'primary.500'
+    }
+  }
+});
+const Switch = /*#__PURE__*/defineMultiStyleConfig$1({
+  baseStyle: baseStyle$2
+});
+
+const {
+  definePartsStyle: definePartsStyle$4
+} = /*#__PURE__*/createMultiStyleConfigHelpers(popoverAnatomy.keys);
+const Popover = {
+  baseStyle: props => definePartsStyle$4({
+    popper: {
+      background: mode('white', 'inherit')(props)
+    }
+  })
+};
+
+const Textarea = {
+  baseStyle: {
+    _hover: {
+      borderColor: 'primary.500',
+      boxShadow: 'none',
+      outline: 'none'
+    },
+    _focus: {
+      borderColor: 'primary.500',
+      boxShadow: 'none',
+      outline: 'none'
+    },
+    _focusVisible: {
+      borderColor: 'primary.500',
+      boxShadow: 'none',
+      outline: 'none'
+    },
+    _focusWithin: {
+      borderColor: 'primary.500',
+      boxShadow: 'none',
+      outline: 'none'
+    }
+  }
+};
+
+
+
+var components = {
+  __proto__: null,
+  Button: Button,
+  Checkbox: Checkbox,
+  FormLabel: FormLabel,
+  Input: Input,
+  Radio: Radio,
+  Switch: Switch,
+  Popover: Popover,
+  Textarea: Textarea
+};
+
+const config = {
+  initialColorMode: 'light',
+  useSystemColorMode: false
+};
+const theme = /*#__PURE__*/extendTheme({
+  ...foundations,
+  components: {
+    ...components
+  },
+  styles: {
+    global: {
+      '*::-webkit-scrollbar-thumb': {
+        background: 'neutral.400'
+      },
+      body: {
+        fontSize: 'text.sm'
+      }
+    }
+  },
+  config
+});
+
+const ProviderContext = /*#__PURE__*/createContext({
+  instance: undefined
+});
+const useInternalUI = () => {
+  const {
+    instance
+  } = useContext(ProviderContext);
+  return {
+    instance
+  };
+};
+const Provider = ({
+  children,
+  config,
+  requestInterceptors,
+  responseInterceptors
+}) => {
+  const instanceRef = useRef(axios.create(config));
+  useEffect(() => {
+    requestInterceptors === null || requestInterceptors === void 0 ? void 0 : requestInterceptors.forEach(interceptor => {
+      instanceRef.current.interceptors.request.use(interceptor);
+    });
+    responseInterceptors === null || responseInterceptors === void 0 ? void 0 : responseInterceptors.forEach(interceptor => {
+      instanceRef.current.interceptors.response.use(interceptor);
+    });
+  }, [requestInterceptors, responseInterceptors]);
+  const provider = useMemo(() => ({
+    instance: instanceRef.current
+  }), []);
+  return React.createElement(ProviderContext.Provider, {
+    value: provider
+  }, children);
+};
+Provider.displayName = 'Provider';
+
+export { BreadCrumb, DataTable, Datepicker, Field, Header, InputField, Navigation as MainMenu, ModalCloseButton, ModalFooter, ModalHeader, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Tab, TabList, TabPanel, TextareaField, Uploader, theme, useInternalUI };
+//# sourceMappingURL=internal-ui.esm.js.map