@ctlyst.id/internal-ui 2.1.9 → 2.1.11-canary.0

package/dist/internal-ui.esm.js

@@ -1,4899 +0,0 @@
-import { cx, dataAttr } from '@chakra-ui/shared-utils';
-import { forwardRef, omitThemingProps, useMultiStyleConfig, chakra, useColorMode } from '@chakra-ui/system';
-import React__default, { createElement, forwardRef as forwardRef$2, useMemo, useState, useEffect, useImperativeHandle, Fragment, useCallback, createContext as createContext$1, useContext, useRef } from 'react';
-import { createContext } from '@chakra-ui/react-context';
-import { CheckCircle, Info, AlertTriangle, Close, EyeOff, Eye, ChevronDown, Rating as Rating$1, Check } from '@ctlyst.id/internal-icon';
-import { cx as cx$1 } from '@chakra-ui/utils';
-import { forwardRef as forwardRef$1, useStyleConfig, Box, Button as Button$2, Badge as Badge$2, useToken, theme as theme$1, Text, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, Flex, Spinner, Table, Thead, Tr, useColorModeValue, Th, Tbody, Td, defineStyle, InputGroup, Input as Input$1, InputRightAddon, InputRightElement, InputLeftAddon, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, ModalBody as ModalBody$1, ModalCloseButton as ModalCloseButton$1, ModalFooter as ModalFooter$1, ModalHeader as ModalHeader$1, createIcon, Icon, Portal, Link, VisuallyHidden, Select as Select$1, Radio as Radio$1, RadioGroup, Grid, useMultiStyleConfig as useMultiStyleConfig$1, omitThemingProps as omitThemingProps$1, useCheckbox, chakra as chakra$1, useTab, TabList as TabList$1, TabPanel as TabPanel$1, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, defineStyleConfig as defineStyleConfig$1, extendTheme } from '@chakra-ui/react';
-export { AlertDialog, ModalBody as AlertDialogBody, ModalCloseButton as AlertDialogCloseButton, AlertDialogContent, ModalFooter as AlertDialogFooter, ModalHeader as AlertDialogHeader, ModalOverlay as AlertDialogOverlay, Box, ButtonGroup, Center, ChakraProvider, Table as ChakraTable, CloseButton, Code, Collapse, ColorModeScript, Container, Divider, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, DrawerContent, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, Flex, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, Icon, IconButton, Image, InputLeftElement as InputElementLeft, InputRightElement as InputElementRight, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Link, List, ListIcon, ListItem, Modal, ModalContent, ModalContextProvider, ModalFocusScope, ModalOverlay, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RequiredIndicator, ScaleFade, SimpleGrid, Skeleton, Spacer, Stack, TabIndicator, TabPanels, Tabs, TabsDescendantsProvider, TabsProvider, Tbody, Td, Text, Th, Thead, Tooltip, Tr, UnorderedList, VStack, Wrap, WrapItem, extendTheme, forwardRef, useBoolean, useColorMode, useColorModeValue, useDisclosure, useDrawerContext, useModal, useModalContext, useModalStyles, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTabsStyles, useToken } from '@chakra-ui/react';
-import { FiChevronLeft, FiChevronsRight, FiHome, FiCalendar, FiX, FiPower, FiMoon, FiSun, FiShoppingBag, FiShoppingCart, FiRepeat, FiBox, FiLayers, FiDollarSign, FiUsers, FiRotateCcw, FiSettings, FiLayout, FiGift, FiChevronDown } from 'react-icons/fi';
-import { ChevronUpIcon, ChevronDownIcon, UpDownIcon, ArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, ArrowRightIcon } from '@chakra-ui/icons';
-import { css, Global, keyframes } from '@emotion/react';
-import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
-import classnames from 'classnames';
-import ReactDatePicker from 'react-datepicker';
-import styled from '@emotion/styled';
-import ReactSelect from 'react-select';
-import { AsyncPaginate } from 'react-select-async-paginate';
-import ReactSelectAsyncCreatable from 'react-select/async-creatable';
-import ReactSelectCreatable from 'react-select/creatable';
-import { useDropzone } from 'react-dropzone';
-import { accordionAnatomy, alertAnatomy, checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy, tableAnatomy } from '@chakra-ui/anatomy';
-import { createMultiStyleConfigHelpers, defineStyle as defineStyle$1, cssVar, defineStyleConfig } from '@chakra-ui/styled-system';
-import { mode, calc, cssVar as cssVar$1 } from '@chakra-ui/theme-tools';
-import axios from 'axios';
-import { ToastContainer } from 'react-toastify';
-
-/* eslint-disable react/require-default-props */
-function CheckIcon() {
-  return /*#__PURE__*/React__default.createElement(CheckCircle, {
-    color: "inherit",
-    size: 4
-  });
-}
-function InfoIcon() {
-  return /*#__PURE__*/React__default.createElement(Info, {
-    color: "inherit",
-    size: 4
-  });
-}
-function WarningIcon() {
-  return /*#__PURE__*/React__default.createElement(AlertTriangle, {
-    color: "inherit",
-    size: 4
-  });
-}
-
-const [AlertProvider, useAlertContext] = /*#__PURE__*/createContext({
-  name: 'AlertContext',
-  hookName: 'useAlertContext',
-  providerName: '<Alert />'
-});
-const [AlertStylesProvider, useAlertStyles] = /*#__PURE__*/createContext({
-  name: `AlertStylesContext`,
-  hookName: `useAlertStyles`,
-  providerName: '<Alert />'
-});
-const STATUSES = {
-  info: {
-    icon: InfoIcon,
-    colorScheme: 'info'
-  },
-  warning: {
-    icon: InfoIcon,
-    colorScheme: 'warning'
-  },
-  success: {
-    icon: CheckIcon,
-    colorScheme: 'success'
-  },
-  error: {
-    icon: WarningIcon,
-    colorScheme: 'danger'
-  },
-  neutral: {
-    icon: InfoIcon,
-    colorScheme: 'neutral'
-  }
-};
-function getStatusColorScheme(status) {
-  return STATUSES[status].colorScheme;
-}
-function getStatusIcon(status) {
-  return STATUSES[status].icon;
-}
-
-/**
- * Alert is used to communicate the state or status of a
- * page, feature or action
- *
- * @see Docs https://chakra-ui.com/docs/components/alert
- * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/alert/
- */
-const Alert = /*#__PURE__*/forwardRef(function Alert(props, ref) {
-  var _props$colorScheme;
-  const {
-    status = 'info',
-    addRole = true,
-    children,
-    ...rest
-  } = omitThemingProps(props);
-  const colorScheme = (_props$colorScheme = props.colorScheme) !== null && _props$colorScheme !== void 0 ? _props$colorScheme : getStatusColorScheme(status);
-  const styles = useMultiStyleConfig('Alert', {
-    ...props,
-    colorScheme
-  });
-  const alertStyles = {
-    width: '100%',
-    display: 'grid',
-    gridTemplateColumns: 'auto 1fr auto auto',
-    alignItems: 'center',
-    position: 'relative',
-    overflow: 'hidden',
-    ...styles.container
-  };
-  return /*#__PURE__*/React__default.createElement(AlertProvider, {
-    value: {
-      status
-    }
-  }, /*#__PURE__*/React__default.createElement(AlertStylesProvider, {
-    value: styles
-  }, /*#__PURE__*/React__default.createElement(chakra.div, Object.assign({
-    "data-status": status,
-    role: addRole ? 'alert' : undefined,
-    ref: ref
-  }, rest, {
-    className: cx('chakra-alert', props.className),
-    __css: alertStyles
-  }), children)));
-});
-Alert.displayName = 'Alert';
-
-const Loader = /*#__PURE__*/forwardRef$1((props, ref) => {
-  const styles = useStyleConfig('LoaderStyle', props);
-  return /*#__PURE__*/React__default.createElement(Box, {
-    ref: ref,
-    __css: styles
-  });
-});
-Loader.defaultProps = {
-  size: 'md'
-};
-
-const Button = /*#__PURE__*/forwardRef$1((props, ref) => {
-  const {
-    children,
-    variant,
-    size,
-    ...rest
-  } = props;
-  const getLoaderSize = () => {
-    if (size === 'lg') return 'md';
-    if (size === 'md') return 'sm';
-    return 'xs';
-  };
-  const getLoaderColor = () => {
-    if (variant === 'primary' || variant === 'danger') return 'white';
-    if (variant === 'outline-danger') return 'danger';
-    return 'primary';
-  };
-  return /*#__PURE__*/React__default.createElement(Button$2, Object.assign({
-    size: size,
-    variant: variant,
-    spinner: /*#__PURE__*/React__default.createElement(Loader, {
-      size: getLoaderSize(),
-      color: getLoaderColor()
-    }),
-    ref: ref
-  }, rest), children);
-});
-
-function AlertAction({
-  children,
-  className
-}) {
-  const styles = useAlertStyles();
-  const css = styles.action;
-  return /*#__PURE__*/React__default.createElement(Button, {
-    "data-test-id": "alert-action",
-    className: cx$1('chakra-alert__action', className),
-    variant: "link",
-    fontWeight: "semibold",
-    __css: css
-  }, children);
-}
-AlertAction.displayName = 'AlertAction';
-
-function AlertClose({
-  className,
-  children,
-  ...rest
-}) {
-  const styles = useAlertStyles();
-  const css = styles.close;
-  return /*#__PURE__*/React__default.createElement(chakra.span, Object.assign({
-    display: "inherit",
-    "data-status": 'alert-close'
-  }, rest, {
-    className: cx('chakra-alert__close', className),
-    __css: css
-  }), children || /*#__PURE__*/React__default.createElement(Close, {
-    color: "inherit",
-    size: 4
-  }));
-}
-AlertClose.displayName = 'AlertClose';
-
-const AlertDescription = /*#__PURE__*/forwardRef(function AlertDescription(props, ref) {
-  const styles = useAlertStyles();
-  const {
-    status
-  } = useAlertContext();
-  const descriptionStyles = {
-    display: 'inline',
-    ...styles.description
-  };
-  return /*#__PURE__*/React__default.createElement(chakra.div, Object.assign({
-    ref: ref,
-    "data-status": status
-  }, props, {
-    className: cx('chakra-alert__desc', props.className),
-    __css: descriptionStyles
-  }));
-});
-AlertDescription.displayName = 'AlertDescription';
-
-function AlertIcon({
-  className,
-  children,
-  ...rest
-}) {
-  const {
-    status
-  } = useAlertContext();
-  const BaseIcon = getStatusIcon(status);
-  const styles = useAlertStyles();
-  const css = styles.icon;
-  return /*#__PURE__*/React__default.createElement(chakra.span, Object.assign({
-    display: "inherit",
-    "data-status": status
-  }, rest, {
-    className: cx('chakra-alert__icon', className),
-    __css: css
-  }), children || /*#__PURE__*/React__default.createElement(BaseIcon, null));
-}
-AlertIcon.displayName = 'AlertIcon';
-
-const AlertTitle = /*#__PURE__*/forwardRef(function AlertTitle(props, ref) {
-  const styles = useAlertStyles();
-  const {
-    status
-  } = useAlertContext();
-  return /*#__PURE__*/React__default.createElement(chakra.div, Object.assign({
-    ref: ref,
-    "data-status": status
-  }, props, {
-    className: cx('chakra-alert__title', props.className),
-    __css: styles.title
-  }));
-});
-AlertTitle.displayName = 'AlertTitle';
-
-const Badge = props => {
-  const {
-    children,
-    pill,
-    ...rest
-  } = props;
-  return /*#__PURE__*/React__default.createElement(Badge$2, Object.assign({
-    borderRadius: pill ? 'xl' : 'sm',
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    textTransform: "none"
-  }, rest), children);
-};
-Badge.defaultProps = {
-  pill: false
-};
-
-/* eslint-disable react-hooks/rules-of-hooks */
-const BreadCrumb = props => {
-  const {
-    title,
-    children,
-    parents,
-    className,
-    disableHome,
-    spacing = 2,
-    backButton
-  } = props;
-  const [neutral600, primary500] = useToken('colors', ['neutral.600', 'primary.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"
-  }, backButton && /*#__PURE__*/createElement(Button, {
-    variant: "icon",
-    "data-test-id": "button",
-    size: "md",
-    mr: "2",
-    onClick: backButton
-  }, /*#__PURE__*/createElement(FiChevronLeft, {
-    size: theme$1.sizes[5]
-  })), /*#__PURE__*/createElement(Text, {
-    pr: "2",
-    textStyle: "heading.6",
-    color: "neutral.700"
-  }, title), /*#__PURE__*/createElement(Box, {
-    h: "5.5",
-    borderLeft: "1px solid",
-    borderColor: neutral600
-  }), /*#__PURE__*/createElement(Breadcrumb, {
-    separator: /*#__PURE__*/createElement(FiChevronsRight, {
-      color: neutral600,
-      size: theme$1.sizes['3.5']
-    }),
-    pl: "2",
-    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: theme$1.sizes['3.5'],
-    color: primary500
-  }))), 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 ? neutral600 : primary500,
-    textStyle: "text.sm"
-  }, val.name)))), /*#__PURE__*/createElement(BreadcrumbItem, null, /*#__PURE__*/createElement(BreadcrumbLink, {
-    _hover: {
-      textDecor: 'none',
-      cursor: 'default'
-    }
-  }, /*#__PURE__*/createElement(Text, {
-    color: "neutral.600",
-    textStyle: "text.sm"
-  }, title))))), children && /*#__PURE__*/createElement(Box, null, children));
-};
-BreadCrumb.defaultProps = {
-  children: undefined,
-  parents: undefined,
-  className: undefined,
-  disableHome: undefined,
-  spacing: 2,
-  backButton: undefined
-};
-
-const CardCustom = /*#__PURE__*/forwardRef$2(({
-  children,
-  ...rest
-}, ref) => {
-  const styles = useStyleConfig('Card', rest);
-  return /*#__PURE__*/React__default.createElement(Card, Object.assign({
-    __css: styles,
-    backgroundColor: "white.high",
-    ref: ref
-  }, rest), children);
-});
-CardCustom.defaultProps = {
-  withShadow: true,
-  isRounded: true
-};
-
-const CheckboxComponent = /*#__PURE__*/forwardRef$1(({
-  isError = false,
-  helpText = '',
-  errorText = '',
-  boxProps,
-  children,
-  isDisabled,
-  ...rest
-}, ref) => {
-  const variant = isError ? 'errors' : 'unstyled';
-  return /*#__PURE__*/React__default.createElement(Box, Object.assign({}, boxProps), /*#__PURE__*/React__default.createElement(Box, {
-    display: "flex"
-  }, /*#__PURE__*/React__default.createElement(Checkbox$1, Object.assign({
-    variant: variant,
-    ref: ref
-  }, rest, {
-    isDisabled: isDisabled
-  }), children && /*#__PURE__*/React__default.createElement(Text, {
-    as: "span",
-    display: "block",
-    textStyle: "text.sm",
-    color: isDisabled ? 'black.medium' : 'black.high'
-  }, children))), (isError || helpText) && /*#__PURE__*/React__default.createElement(Box, {
-    mt: "5px",
-    ml: "24px"
-  }, isError ? /*#__PURE__*/React__default.createElement(Text, {
-    as: "span",
-    display: "block",
-    textStyle: "text.xs",
-    color: "danger.500"
-  }, errorText) : /*#__PURE__*/React__default.createElement(Text, {
-    as: "span",
-    display: "block",
-    textStyle: "text.xs",
-    color: "black.medium"
-  }, helpText)));
-});
-CheckboxComponent.defaultProps = {
-  isError: false,
-  helpText: '',
-  errorText: '',
-  boxProps: {}
-};
-
-const Field = props => {
-  const {
-    label,
-    isError,
-    errorMessage,
-    leftHelperText,
-    rightHelperText,
-    isRequired,
-    children,
-    isSuccess,
-    boxProps = {}
-  } = props;
-  const getHelperColor = () => {
-    if (isError) return 'danger.500';
-    if (isSuccess) return 'success.500';
-    return 'black.medium';
-  };
-  const getJustifyContentHelper = () => {
-    if (rightHelperText && (!leftHelperText || isError && !errorMessage)) return 'flex-end';
-    return 'space-between';
-  };
-  const helperColor = getHelperColor();
-  const justifyHelper = getJustifyContentHelper();
-  return /*#__PURE__*/React__default.createElement(FormControl, Object.assign({
-    isInvalid: isError
-  }, boxProps), label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(FormLabel$1, {
-    mb: 1,
-    fontSize: "text.sm",
-    requiredIndicator: undefined
-  }, isRequired && /*#__PURE__*/React__default.createElement(Box, {
-    as: "span",
-    color: "danger.500",
-    ml: 0,
-    mr: 1
-  }, "*"), label) : label), children, (isError && errorMessage || leftHelperText || rightHelperText) && /*#__PURE__*/React__default.createElement(Box, {
-    display: "flex",
-    width: "full",
-    justifyContent: justifyHelper
-  }, !isError ? leftHelperText && (typeof leftHelperText === 'string' ? /*#__PURE__*/React__default.createElement(FormHelperText, {
-    fontSize: "text.xs",
-    color: helperColor,
-    mt: 1
-  }, leftHelperText) : leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(FormErrorMessage, {
-    fontSize: "text.xs",
-    color: "danger.500",
-    mt: 1
-  }, errorMessage) : errorMessage, rightHelperText && (typeof rightHelperText === 'string' ? /*#__PURE__*/React__default.createElement(FormHelperText, {
-    fontSize: "text.xs",
-    color: helperColor,
-    mt: 1
-  }, rightHelperText) : rightHelperText)));
-};
-Field.defaultProps = {
-  label: '',
-  isError: false,
-  isSuccess: false,
-  errorMessage: undefined,
-  leftHelperText: undefined,
-  rightHelperText: undefined,
-  isRequired: false,
-  boxProps: {}
-};
-
-function CheckboxGroupComponent(props) {
-  const {
-    children,
-    label,
-    helpText,
-    isError,
-    errorMessage,
-    ...rest
-  } = props;
-  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, rest, {
-    label: label,
-    leftHelperText: helpText,
-    isError: isError,
-    errorMessage: errorMessage
-  }), /*#__PURE__*/React__default.createElement(Box, {
-    mt: "12px"
-  }, /*#__PURE__*/React__default.createElement(CheckboxGroup, Object.assign({}, rest), /*#__PURE__*/React__default.createElement(Stack, {
-    spacing: [1, '16px'],
-    direction: ['column', 'row']
-  }, children))));
-}
-CheckboxGroupComponent.defaultProps = {
-  helpText: '',
-  isError: false,
-  errorMessage: ''
-};
-
-const Chips = ({
-  children,
-  ...rest
-}) => {
-  const {
-    isActive,
-    isDisabled,
-    onClose
-  } = rest;
-  const styles = useStyleConfig('Chips', rest);
-  const closeColor = useMemo(() => {
-    if (isActive) return 'white.high';
-    if (isDisabled) return 'black.low';
-    return 'primary.500';
-  }, [isActive, isDisabled]);
-  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
-    __css: styles,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center"
-  }, rest), children, onClose && /*#__PURE__*/React__default.createElement(Box, {
-    onClick: isDisabled ? undefined : onClose,
-    cursor: isDisabled ? 'not-allowed' : 'pointer',
-    ml: 2,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  }, /*#__PURE__*/React__default.createElement(Close, {
-    color: closeColor,
-    size: 4
-  })));
-};
-Chips.defaultProps = {
-  isDisabled: false,
-  isActive: false,
-  onClose: undefined,
-  children: undefined,
-  size: 'sm'
-};
-
-/* eslint-disable react-hooks/rules-of-hooks */
-const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
-  const {
-    columns,
-    dataSource = [],
-    isLoading,
-    withSelectedRow,
-    onSelectedRow,
-    onSort,
-    sortDescFirst,
-    styles,
-    sortingState,
-    headerSticky,
-    manualSorting,
-    onRowClick
-  } = props;
-  const [isFirstLoad, setIsFirstLoad] = useState(true);
-  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(Checkbox$1, Object.assign({
-      "data-test-id": "select-header-data-table"
-    }, {
-      isChecked: table.getIsAllRowsSelected(),
-      isIndeterminate: table.getIsSomeRowsSelected(),
-      onChange: table.getToggleAllRowsSelectedHandler()
-    })),
-    cell: ({
-      row
-    }) => /*#__PURE__*/createElement(Checkbox$1, Object.assign({
-      "data-test-id": `select-data-table-${row.index}`
-    }, {
-      isChecked: row.getIsSelected(),
-      isIndeterminate: row.getIsSomeSelected(),
-      onChange: row.getToggleSelectedHandler()
-    }))
-  }], []);
-  const generateColumn = () => {
-    if (withSelectedRow) {
-      return [...checkboxColumn, ...dataColumns];
-    }
-    return dataColumns;
-  };
-  const onSortingChange = data => {
-    setSorting(data);
-  };
-  const table = useReactTable({
-    data: dataSource,
-    columns: generateColumn(),
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    manualPagination: true,
-    manualSorting,
-    sortDescFirst,
-    state: {
-      sorting,
-      rowSelection
-    },
-    onRowSelectionChange,
-    onSortingChange
-  });
-  const {
-    getSelectedRowModel,
-    toggleAllRowsSelected
-  } = table;
-  const {
-    flatRows
-  } = getSelectedRowModel();
-  useEffect(() => {
-    const rowData = flatRows.map(row => row.original);
-    if (onSelectedRow) {
-      onSelectedRow(rowData);
-    }
-  }, [flatRows]);
-  useImperativeHandle(ref, () => ({
-    toggleAllRowsSelected
-  }));
-  useEffect(() => {
-    if (onSort && !isFirstLoad) {
-      onSort(sorting);
-    }
-  }, [sorting]);
-  useEffect(() => {
-    setIsFirstLoad(false);
-  }, []);
-  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({}, (headerSticky ? {
-    position: 'sticky',
-    top: 0,
-    bg: 'white',
-    zIndex: 1
-  } : {})), 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",
-      gap: 2
-    }, /*#__PURE__*/createElement(Text, null, flexRender(header.column.columnDef.header, header.getContext())), /*#__PURE__*/createElement(Box, {
-      as: "span",
-      cursor: header.column.getCanSort() ? 'pointer' : 'default',
-      "data-test-id": `CT_Container_SortingIcon_${header.id}`,
-      onClick: header.column.getToggleSortingHandler()
-    }, (_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({
-    "data-test-id": "6aZAeefGHBA2oG1wLuv-L",
-    key: row.id
-  }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
-    css: css`
-                &:last-child {
-                  td {
-                    border-bottom: none;
-                  }
-                }
-              `,
-    onClick: () => {
-      if (onRowClick) {
-        onRowClick(row.original);
-      }
-    }
-  }), 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: [],
-  sortDescFirst: false,
-  headerSticky: false,
-  onRowClick: undefined
-};
-
-const getProperties = props => {
-  const {
-    isError,
-    isDisabled,
-    isSuccess
-  } = props;
-  let outlineColor = 'neutral.400';
-  let focusColor = 'primary.500';
-  if (isError || isDisabled || isSuccess) {
-    if (isError) outlineColor = 'danger.500';else if (isSuccess) outlineColor = 'success.500';
-    focusColor = outlineColor;
-  }
-  return {
-    outlineColor,
-    focusColor
-  };
-};
-const getWrapperStyle = props => {
-  const {
-    outlineColor,
-    focusColor
-  } = getProperties(props);
-  const style = {
-    border: '1px solid',
-    borderColor: outlineColor,
-    borderRadius: 'sm',
-    transition: 'all 0.15s',
-    boxShadow: 'none',
-    _focusWithin: {
-      borderColor: focusColor
-    }
-  };
-  return defineStyle(style);
-};
-
-const Styles = () => {
-  const {
-    colorMode
-  } = useColorMode();
-  return /*#__PURE__*/React__default.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__header__dropdown.react-datepicker__header__dropdown--select {
-        font-weight: 600;
-        line-height: 22px;
-        color: #111111;
-      }
-
-      .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, _e$target2;
-    setTime(((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '00:00');
-    if (onChange) onChange(((_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value) || '00:00');
-  };
-  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 wrapperStyle = getWrapperStyle({});
-  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, Object.assign({
-      autoComplete: "off"
-    }, wrapperStyle)),
-    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",
-    isInvalid: isError
-  }, 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, {
-    fontSize: "text.xs",
-    mt: 1
-  }, helperText) : /*#__PURE__*/React__default.createElement(FormErrorMessage, {
-    fontSize: "text.xs",
-    mt: 1
-  }, 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
-};
-
-const DatePickerMonth = ({
-  onChange,
-  min,
-  max,
-  ...props
-}) => {
-  const [date, setDate] = React__default.useState(null);
-  return /*#__PURE__*/React__default.createElement(Box, {
-    fontSize: '12px',
-    lineHeight: '18px',
-    css: css`
-        input[type='date']::-webkit-inner-spin-button,
-        input[type='date']::-webkit-calendar-picker-indicator {
-          display: none;
-          -webkit-appearance: none;
-        }
-        input[value=''] {
-          width: 58px;
-        }
-      `
-  }, /*#__PURE__*/React__default.createElement(Input$1, {
-    "data-test-id": props['data-test-id'],
-    type: "date",
-    width: date ? '51px' : '58px',
-    onChange: e => {
-      onChange(e.target.value);
-      setDate(e.target.value);
-    },
-    p: '8px',
-    min: min,
-    max: max,
-    required: true,
-    css: css`
-          border: 1px solid transparent;
-
-          &:focus,
-          &:hover {
-            border: 1px solid transparent;
-          }
-
-          &::placeholder {
-            color: #111111;
-          }
-        `,
-    value: date !== null && date !== void 0 ? date : ''
-  }));
-};
-DatePickerMonth.defaultProps = {
-  'data-test-id': ''
-};
-
-const MultiDateWrapper = /*#__PURE__*/styled(Box)`
-  display: flex;
-  align-items: center;
-  width: fit-content;
-  border: 1px solid;
-  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
-  border-radius: 4px;
-  border-color: ${({
-  isError
-}) => isError ? 'var(--chakra-colors-danger-500)' : 'var(--chakra-colors-primary-500)'};
-`;
-const MultiDatePickerMonth = ({
-  onChange,
-  isError = false,
-  min = '2020-01-01',
-  max = '2020-12-31'
-}) => {
-  const [date, setDate] = React__default.useState([null, null]);
-  return /*#__PURE__*/React__default.createElement(MultiDateWrapper, {
-    isError: isError
-  }, /*#__PURE__*/React__default.createElement(DatePickerMonth, {
-    "data-test-id": "CT_DatePickerMonth_StartDate",
-    onChange: val => {
-      onChange(val, date[1]);
-      setDate([val, date[1]]);
-    },
-    min: min,
-    max: max
-  }), /*#__PURE__*/React__default.createElement(Box, null, "-"), /*#__PURE__*/React__default.createElement(DatePickerMonth, {
-    "data-test-id": "CT_DatePickerMonth_EndDate",
-    onChange: val => {
-      onChange(date[0], val);
-      setDate([date[0], val]);
-    },
-    min: min,
-    max: max
-  }));
-};
-MultiDatePickerMonth.defaultProps = {
-  min: '2020-01-01',
-  max: '2020-12-31',
-  isError: false
-};
-
-const InputAddonLeft = ({
-  children
-}) => {
-  return /*#__PURE__*/React__default.createElement(InputLeftAddon, {
-    backgroundColor: "neutral.200",
-    px: 3,
-    py: 2.5,
-    style: {
-      border: 0,
-      marginInlineEnd: 0
-    }
-  }, children);
-};
-const InputAddonRight = ({
-  children
-}) => {
-  return /*#__PURE__*/React__default.createElement(InputRightAddon, {
-    backgroundColor: "neutral.200",
-    px: 3,
-    py: 2.5,
-    style: {
-      border: 0,
-      marginInlineStart: 0
-    }
-  }, children);
-};
-
-const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  const {
-    value,
-    type,
-    addOnLeft,
-    addOnRight,
-    size,
-    isRequired,
-    label,
-    isError,
-    isSuccess,
-    isDisabled,
-    errorMessage,
-    leftHelperText,
-    rightHelperText,
-    withClear,
-    onClear,
-    isLoading,
-    ...inputProps
-  } = props;
-  const wrapperStyle = getWrapperStyle(props);
-  const [isShowPassword, setIsShowPassword] = useState(false);
-  const inputType = useMemo(() => {
-    return type === 'password' && isShowPassword ? 'text' : type;
-  }, [isShowPassword, type]);
-  const fontSize = useMemo(() => {
-    if (type === 'password') {
-      if (!isShowPassword && value) return 'text.xl';
-    }
-    return 'text.sm';
-  }, [isShowPassword, type, value]);
-  const iconColor = useMemo(() => {
-    return isDisabled ? 'black.low' : 'black.medium';
-  }, [isDisabled]);
-  return /*#__PURE__*/React__default.createElement(Field, {
-    label: label,
-    isSuccess: isSuccess,
-    isError: isError,
-    errorMessage: errorMessage,
-    leftHelperText: leftHelperText,
-    rightHelperText: rightHelperText,
-    isRequired: isRequired
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    __css: wrapperStyle
-  }, /*#__PURE__*/React__default.createElement(InputGroup, {
-    size: size,
-    borderRadius: "sm",
-    backgroundColor: isDisabled ? 'neutral.300' : 'white.high',
-    cursor: isDisabled ? 'not-allowed' : 'default'
-  }, addOnLeft, /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
-    ref: ref,
-    type: inputType,
-    value: value,
-    isDisabled: isDisabled,
-    isSuccess: isSuccess
-  }, inputProps, {
-    fontSize: fontSize
-  })), (withClear || isLoading || type === 'password') && /*#__PURE__*/React__default.createElement(Box, {
-    "data-test-id": "CT_Component_ClearInput",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "16px",
-    mr: "10px"
-  }, withClear && !isLoading && /*#__PURE__*/React__default.createElement(Box, {
-    display: "flex",
-    justifyContent: "center",
-    onClick: !isDisabled ? onClear : undefined,
-    cursor: isDisabled ? 'not-allowed' : 'pointer'
-  }, /*#__PURE__*/React__default.createElement(Close, {
-    size: 4,
-    color: iconColor
-  })), type === 'password' && !isShowPassword && !isLoading && /*#__PURE__*/React__default.createElement(Box, {
-    "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
-    onClick: () => {
-      if (!isDisabled) setIsShowPassword(true);
-    },
-    cursor: isDisabled ? 'not-allowed' : 'pointer',
-    display: "flex",
-    justifyContent: "center"
-  }, /*#__PURE__*/React__default.createElement(EyeOff, {
-    size: 4,
-    color: iconColor
-  })), type === 'password' && isShowPassword && !isLoading && /*#__PURE__*/React__default.createElement(Box, {
-    "data-test-id": "sfc2388bmeXBmdla45Ibk",
-    onClick: () => {
-      if (!isDisabled) setIsShowPassword(false);
-    },
-    cursor: isDisabled ? 'not-allowed' : 'pointer',
-    display: "flex",
-    justifyContent: "center"
-  }, /*#__PURE__*/React__default.createElement(Eye, {
-    size: 4,
-    color: iconColor
-  })), isLoading && /*#__PURE__*/React__default.createElement(Loader, {
-    size: "sm"
-  })), addOnRight)));
-});
-InputField.defaultProps = {
-  addOnLeft: undefined,
-  addOnRight: undefined,
-  withClear: undefined,
-  isLoading: undefined,
-  onClear: undefined
-};
-
-const TextareaField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  const {
-    value,
-    isLoading,
-    ...inputProps
-  } = props;
-  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(Box, {
-    position: "relative"
-  }, /*#__PURE__*/React__default.createElement(Textarea$1, Object.assign({
-    ref: ref,
-    value: value
-  }, inputProps)), isLoading && /*#__PURE__*/React__default.createElement(Box, {
-    zIndex: 999,
-    top: 2,
-    right: 2,
-    position: "absolute"
-  }, /*#__PURE__*/React__default.createElement(Loader, {
-    size: "sm"
-  }))));
-});
-TextareaField.defaultProps = {
-  isLoading: undefined
-};
-
-const Logo = ({
-  url,
-  imageUrl,
-  height
-}) => {
-  if (url) return /*#__PURE__*/React__default.createElement(Box, {
-    as: "a",
-    href: url,
-    cursor: "pointer",
-    target: "_self"
-  }, /*#__PURE__*/React__default.createElement(Image, {
-    w: "100%",
-    h: height !== null && height !== void 0 ? height : 9,
-    maxH: height !== null && height !== void 0 ? height : 9,
-    src: imageUrl,
-    alt: imageUrl
-  }));
-  return /*#__PURE__*/React__default.createElement(Image, {
-    w: "100%",
-    h: height !== null && height !== void 0 ? height : 9,
-    maxH: height !== null && height !== void 0 ? height : 9,
-    src: imageUrl,
-    alt: imageUrl
-  });
-};
-Logo.defaultProps = {
-  url: undefined,
-  height: undefined
-};
-
-const Profile = ({
-  color,
-  brandColor,
-  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,
-    color: color
-  }, /*#__PURE__*/createElement(HStack, null, /*#__PURE__*/createElement(VStack, {
-    alignItems: "flex-end",
-    spacing: 0,
-    ml: "2",
-    color: color
-  }, /*#__PURE__*/createElement(Text, {
-    textStyle: "text.xs",
-    mb: 1
-  }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/createElement(Flex, {
-    alignItems: "center"
-  }, (data === null || data === void 0 ? void 0 : data.userRole) && /*#__PURE__*/createElement(Text, {
-    textStyle: "text.xs"
-  }, (data === null || data === void 0 ? void 0 : data.userRole) || 'user'), /*#__PURE__*/createElement(Box, {
-    h: "3",
-    mx: "1",
-    borderLeft: "1px solid",
-    borderColor: "neutral.400"
-  }), typeof (data === null || data === void 0 ? void 0 : data.office) === 'object' ? /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Text, {
-    textStyle: "text.xs"
-  }, data.office[0]), data.office.length > 1 && /*#__PURE__*/createElement(Badge, {
-    ml: "1",
-    pill: true,
-    variant: "neutral-light"
-  }, data.office.length - 1, "+")) : /*#__PURE__*/createElement(Text, {
-    textStyle: "text.xs"
-  }, (data === null || data === void 0 ? void 0 : data.office) || 'office'))), /*#__PURE__*/createElement(PopoverTrigger, null, /*#__PURE__*/createElement(Avatar, {
-    size: "sm",
-    bg: brandColor,
-    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,
-    textStyle: "text.xs"
-  }, /*#__PURE__*/createElement(FiPower, null), /*#__PURE__*/createElement(Text, {
-    ml: 2
-  }, "Logout")))));
-};
-Profile.defaultProps = {
-  brandColor: 'primary.500',
-  data: undefined,
-  onLogout: undefined,
-  color: undefined
-};
-
-const SwitchMode = () => {
-  const {
-    colorMode,
-    toggleColorMode
-  } = useColorMode$1();
-  return /*#__PURE__*/createElement(Box, {
-    "data-test-id": "rhYuTDCiWkFqr96upiEEh",
-    mx: 5,
-    onClick: toggleColorMode,
-    cursor: "pointer"
-  }, colorMode === 'light' ? /*#__PURE__*/createElement(FiMoon, {
-    size: 20
-  }) : /*#__PURE__*/createElement(FiSun, {
-    size: 20
-  }));
-};
-
-// 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 = ({
-  hideEnv,
-  version,
-  environment,
-  onOpenModalRelease
-}) => /*#__PURE__*/createElement(Fragment, null, version && /*#__PURE__*/createElement(Badge, {
-  "data-test-id": "dzl3esjhCphobaaIXpiUE",
-  variant: "neutral-light",
-  onClick: onOpenModalRelease,
-  cursor: onOpenModalRelease ? 'pointer' : 'auto'
-}, version), !hideEnv && environmentName(environment) !== null && version && /*#__PURE__*/createElement(Box, {
-  background: "primary.50",
-  color: "primary.500",
-  fontSize: "text.xs",
-  py: 1,
-  px: 2.5,
-  fontWeight: "bold",
-  borderRadius: "md"
-}, environmentName(environment)));
-Version.defaultProps = {
-  hideEnv: false,
-  environment: undefined,
-  version: undefined,
-  onOpenModalRelease: undefined
-};
-
-const Header = ({
-  brandColor,
-  data,
-  onLogout,
-  onOpenModalRelease,
-  hideSwitchMode,
-  mainLogo,
-  centerLogo,
-  mainLogoSize,
-  centerLogoSize = 4,
-  hideEnv = false,
-  urlLogo,
-  children,
-  profile,
-  ...props
-}) => /*#__PURE__*/createElement(Flex, Object.assign({
-  minH: 15,
-  bg: props.bg,
-  bgColor: props.bgColor,
-  shadow: "raised",
-  px: 6,
-  py: 3,
-  alignItems: "center"
-}, props), /*#__PURE__*/createElement(Flex, {
-  h: "auto",
-  w: "full",
-  alignItems: "center",
-  justifyContent: profile ? 'flex-end' : 'space-between',
-  pos: "relative"
-}, mainLogo && /*#__PURE__*/createElement(Flex, {
-  alignItems: "center"
-}, /*#__PURE__*/createElement(Logo, {
-  url: urlLogo,
-  imageUrl: mainLogo,
-  height: mainLogoSize
-}), children && children), centerLogo && /*#__PURE__*/createElement(HStack, {
-  w: "fit-content",
-  spacing: 2,
-  alignItems: "center",
-  pos: "absolute",
-  left: "50%",
-  transform: "translate(-50%,0)"
-}, /*#__PURE__*/createElement(Logo, {
-  url: urlLogo,
-  imageUrl: centerLogo,
-  height: centerLogoSize
-}), /*#__PURE__*/createElement(Version, {
-  hideEnv: hideEnv,
-  version: data === null || data === void 0 ? void 0 : data.version,
-  environment: data === null || data === void 0 ? void 0 : data.environment,
-  onOpenModalRelease: onOpenModalRelease
-})), profile || /*#__PURE__*/createElement(Flex, {
-  alignItems: "center"
-}, !hideSwitchMode && /*#__PURE__*/createElement(SwitchMode, null), /*#__PURE__*/createElement(Profile, {
-  color: props.color,
-  brandColor: brandColor,
-  data: data,
-  onLogout: onLogout
-}))));
-Header.defaultProps = {
-  brandColor: undefined,
-  data: undefined,
-  onLogout: undefined,
-  onOpenModalRelease: undefined,
-  hideSwitchMode: true,
-  mainLogo: undefined,
-  mainLogoSize: undefined,
-  centerLogo: undefined,
-  centerLogoSize: undefined,
-  hideEnv: false,
-  urlLogo: undefined,
-  profile: undefined
-};
-
-const ModalBody = /*#__PURE__*/React__default.forwardRef(({
-  children,
-  ...rest
-}, ref) => {
-  return /*#__PURE__*/React__default.createElement(ModalBody$1, Object.assign({
-    ref: ref,
-    background: useColorModeValue('white', 'mirage.900')
-  }, rest), children);
-});
-
-const ModalCloseButton = /*#__PURE__*/forwardRef$2((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(ModalCloseButton$1, Object.assign({
-    ref: ref,
-    top: 4,
-    right: 4,
-    size: "sm",
-    background: useColorModeValue('neutral.50', 'mirage.900')
-  }, props));
-});
-
-const ModalFooter = /*#__PURE__*/forwardRef$2(({
-  children,
-  ...rest
-}, ref) => {
-  return /*#__PURE__*/React__default.createElement(ModalFooter$1, Object.assign({
-    ref: ref,
-    background: useColorModeValue('neutral.200', 'mirage.900'),
-    borderBottomRadius: "sm"
-  }, rest), children);
-});
-
-const ModalHeader = /*#__PURE__*/forwardRef$2(({
-  children,
-  ...rest
-}, ref) => {
-  return /*#__PURE__*/React__default.createElement(ModalHeader$1, Object.assign({
-    ref: ref,
-    background: useColorModeValue('neutral.200', 'mirage.900'),
-    borderTopRadius: "sm",
-    textStyle: "text-lg"
-  }, rest), children);
-});
-
-const CustomerIcon = /*#__PURE__*/createIcon({
-  displayName: 'CustomerIcon',
-  viewBox: '0 0 16 16',
-  path: [/*#__PURE__*/React__default.createElement("path", {
-    fill: "currentColor",
-    fillRule: "inherit",
-    d: "M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2ZM.667 8a7.333 7.333 0 1 1 14.666 0A7.333 7.333 0 0 1 .667 8Z",
-    clipRule: "inherit"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    fill: "currentColor",
-    d: "M12.416 12.698a1.997 1.997 0 0 0-1.75-1.031H5.334a2 2 0 0 0-1.864 1.277 7.722 7.722 0 0 1-.943-1.074 3.329 3.329 0 0 1 2.807-1.537h5.334a3.333 3.333 0 0 1 2.703 1.384c-.275.325-.594.66-.954.98Z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    fill: "currentColor",
-    fillRule: "inherit",
-    d: "M8 5.333A1.333 1.333 0 1 0 8 8a1.333 1.333 0 0 0 0-2.667ZM5.333 6.667a2.667 2.667 0 1 1 5.334 0 2.667 2.667 0 0 1-5.334 0Z",
-    clipRule: "inherit"
-  })]
-});
-
-/* eslint-disable import/prefer-default-export */
-const mappingIcon = /*#__PURE__*/new Map([['Order', FiShoppingBag], ['Fulfillment', FiShoppingCart], ['Transfer Stock', FiRepeat], ['Stock', FiBox], ['Product Database', FiLayers], ['Purchasing', FiDollarSign], ['Reseller', FiUsers], ['Retur', FiRotateCcw], ['Other', FiSettings], ['Content', FiLayout], ['Voucher', FiGift], ['Customer', CustomerIcon]]);
-
-/* eslint-disable react-hooks/rules-of-hooks */
-const Navigation = ({
-  navigations,
-  activePath,
-  as,
-  host,
-  ...props
-}) => {
-  return /*#__PURE__*/createElement(Box, Object.assign({
-    bg: useColorModeValue('white', 'ebony-clay.800'),
-    boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
-    borderRadius: "md",
-    overflowX: "auto"
-  }, props), /*#__PURE__*/createElement(Flex, {
-    alignItems: "center",
-    p: 2
-  }, /*#__PURE__*/createElement(HStack, {
-    spacing: 2
-  }, navigations === null || navigations === void 0 ? void 0 : navigations.map(navigation => {
-    const isActive = activePath.startsWith(navigation.navLink || '');
-    const activeBg = isActive ? 'primary.500' : undefined;
-    return /*#__PURE__*/createElement(Popover$1, {
-      key: navigation.title,
-      trigger: "hover",
-      placement: "bottom-start"
-    }, ({
-      isOpen
-    }) => /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(PopoverTrigger, null, /*#__PURE__*/createElement(Box, {
-      display: "flex",
-      alignItems: "center",
-      borderRadius: "md",
-      cursor: "pointer",
-      _hover: {
-        backgroundColor: !isActive ? useColorModeValue('dove-gray.50', 'transparent') : activeBg
-      },
-      backgroundColor: isOpen && !isActive ? useColorModeValue('dove-gray.50', 'transparent') : activeBg,
-      color: isActive ? 'white' : 'inherit',
-      p: 2
-    }, /*#__PURE__*/createElement(Icon, {
-      as: mappingIcon.get(navigation.title),
-      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
-    }) => {
-      const link = navHost ? `${navHost}${navLink}` : navLink;
-      const isLocalLink = host === navHost;
-      const isActiveSub = activePath === navLink;
-      return /*#__PURE__*/createElement(Link, {
-        as: isLocalLink ? as : undefined,
-        key: title,
-        href: link,
-        _hover: {
-          textDecoration: 'none'
-        }
-      }, /*#__PURE__*/createElement(Box, {
-        display: "flex",
-        position: "relative",
-        alignItems: "center",
-        cursor: "pointer",
-        transition: "padding 0.35s ease 0s",
-        _hover: {
-          backgroundColor: useColorModeValue('dove-gray.50', 'mirage.900'),
-          color: useColorModeValue('primary.500', 'dove-gray.600'),
-          px: 5,
-          py: 4,
-          _first: {
-            borderTopRadius: 'md'
-          },
-          _last: {
-            borderBottomRadius: 'md'
-          }
-        },
-        color: isActiveSub ? 'primary.500' : 'inherit',
-        css: css`
-                                      border-spacing: 4px;
-                                    `,
-        px: 6,
-        py: 4
-      }, /*#__PURE__*/createElement(Icon, {
-        as: mappingIcon.get(navigation.title),
-        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',
-  host: undefined
-};
-
-const NavigationBar = ({
-  navigations,
-  isFetched,
-  pathname,
-  asPath,
-  mappingIcon,
-  ...props
-}) => {
-  const urlMenu = subMenu => {
-    if (window.location.hostname === 'localhost') {
-      return subMenu.navLink;
-    }
-    return subMenu.navHost + subMenu.navLink;
-  };
-  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
-    hidden: isFetched && navigations === undefined,
-    backgroundRepeat: "repeat-x",
-    "data-test-id": "CT_component_navigation_cms"
-  }, props), /*#__PURE__*/React__default.createElement(Flex, {
-    bg: "white",
-    w: "full",
-    rounded: 'md',
-    flexWrap: "wrap",
-    alignItems: "center",
-    shadow: "raised",
-    gap: 1,
-    px: 4,
-    py: 2
-  }, navigations === null || navigations === void 0 ? void 0 : navigations.map(item => {
-    var _childMenu$;
-    const childMenu = item.children.filter(subMenu => asPath === null || asPath === void 0 ? void 0 : asPath.includes(subMenu.navLink));
-    const isActive = pathname === null || pathname === void 0 ? void 0 : pathname.startsWith((_childMenu$ = childMenu[0]) === null || _childMenu$ === void 0 ? void 0 : _childMenu$.navLink);
-    const activeBg = isActive ? 'primary.500' : undefined;
-    return /*#__PURE__*/React__default.createElement(Popover$1, {
-      isLazy: true,
-      key: item.id,
-      trigger: "hover",
-      placement: "bottom-start",
-      openDelay: 100,
-      closeDelay: 100
-    }, ({
-      isOpen,
-      onClose
-    }) => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PopoverTrigger, null, /*#__PURE__*/React__default.createElement(Button$2, {
-      h: 7.5,
-      p: 2,
-      size: "sm",
-      variant: "ghost",
-      "data-test-id": `CT_component_navigation_button-${item.title}${isActive ? '-active' : ''}`,
-      _hover: {
-        backgroundColor: !isActive ? 'neutral.400' : activeBg
-      },
-      backgroundColor: isOpen && !isActive ? 'neutral.400' : activeBg,
-      color: isActive ? 'primary.50' : 'black.high',
-      leftIcon: mappingIcon.get(item.title),
-      rightIcon: /*#__PURE__*/React__default.createElement(ChevronDown, {
-        size: 4,
-        color: "inherit"
-      })
-    }, item.title)), item.children && /*#__PURE__*/React__default.createElement(PopoverContent, {
-      border: "none",
-      shadow: "raised",
-      py: 1,
-      width: 240
-    }, item.children.map(subMenu => /*#__PURE__*/React__default.createElement(Link, {
-      key: subMenu.id,
-      href: urlMenu(subMenu),
-      display: "flex",
-      alignItems: "center",
-      transition: "padding 0.35s ease 0s",
-      _hover: {
-        pl: 6
-      },
-      _first: {
-        borderTopRadius: 'md'
-      },
-      _last: {
-        borderBottomRadius: 'md'
-      },
-      py: 3,
-      px: 4,
-      color: pathname !== null && pathname !== void 0 && pathname.startsWith(subMenu.navLink) ? 'primary.800' : 'black.high',
-      onClick: onClose,
-      background: pathname !== null && pathname !== void 0 && pathname.startsWith(subMenu.navLink) ? 'primary.50' : 'transparent',
-      "data-test-id": `CT_component_navigation_link-${item.id}`
-    }, mappingIcon.get(item.title), /*#__PURE__*/React__default.createElement(Text, {
-      textStyle: "text-sm",
-      ml: 3
-    }, subMenu.title))))));
-  })));
-};
-NavigationBar.defaultProps = {
-  navigations: undefined
-};
-
-const PaginationButton = /*#__PURE__*/forwardRef$1(({
-  className,
-  style,
-  isActive,
-  children,
-  ...rest
-}, ref) => {
-  const btnBg = useColorModeValue('neutral.300', 'mirage.900');
-  const btnColor = useColorModeValue('black.high', 'primary.300');
-  const btnNotActiveBg = useColorModeValue('secondary.50', 'primary.500');
-  const btnNotActiveColor = useColorModeValue('primary.500', 'white');
-  return /*#__PURE__*/React__default.createElement(Button$2, Object.assign({
-    "data-test-id": "Pagination-Button",
-    ref: ref,
-    className: className,
-    style: style,
-    borderRadius: "full",
-    fontWeight: "semibold",
-    m: 0,
-    px: 3,
-    py: 2,
-    h: 8,
-    minW: "auto",
-    width: 8,
-    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, {
-    bg: "neutral.300",
-    borderRadius: "full"
-  }, /*#__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
-};
-
-function RadioComponent({
-  isError = false,
-  helpText = '',
-  errorText = '',
-  children,
-  isDisabled,
-  ...rest
-}) {
-  const variant = isError ? 'errors' : 'unstyled';
-  return /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Box, {
-    display: "flex"
-  }, /*#__PURE__*/React__default.createElement(Radio$1, Object.assign({
-    variant: variant
-  }, rest, {
-    isDisabled: isDisabled
-  }), children && /*#__PURE__*/React__default.createElement(Text, {
-    as: "span",
-    display: "block",
-    textStyle: "text.sm",
-    color: isDisabled ? 'black.medium' : 'black.high'
-  }, children))), /*#__PURE__*/React__default.createElement(Box, {
-    mt: "5px",
-    ml: "24px"
-  }, isError ? /*#__PURE__*/React__default.createElement(Text, {
-    as: "span",
-    display: "block",
-    textStyle: "text.xs",
-    color: "danger.500"
-  }, errorText) : /*#__PURE__*/React__default.createElement(Text, {
-    as: "span",
-    display: "block",
-    textStyle: "text.xs",
-    color: "black.medium"
-  }, helpText)));
-}
-RadioComponent.defaultProps = {
-  isError: false,
-  helpText: '',
-  errorText: ''
-};
-
-function RadioGroupComponent(props) {
-  const {
-    children,
-    label,
-    helpText,
-    isError,
-    errorMessage,
-    ...rest
-  } = props;
-  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, rest, {
-    label: label,
-    leftHelperText: helpText,
-    isError: isError,
-    errorMessage: errorMessage
-  }), /*#__PURE__*/React__default.createElement(Box, {
-    mt: "12px"
-  }, /*#__PURE__*/React__default.createElement(RadioGroup, Object.assign({}, rest), /*#__PURE__*/React__default.createElement(Stack, {
-    spacing: [1, '16px'],
-    direction: ['column', 'row']
-  }, children))));
-}
-RadioGroupComponent.defaultProps = {
-  helpText: '',
-  isError: false,
-  errorMessage: ''
-};
-
-const Rating = ({
-  value
-}) => {
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    gap: '4px',
-    display: "flex"
-  }, [...Array(5)].map((_, i) => /*#__PURE__*/React__default.createElement(Rating$1, {
-    color: i < value ? '#FFA230' : '#E0E0E0',
-    size: 24
-  })));
-};
-
-const SelectWrapper = ({
-  children
-}) => {
-  return /*#__PURE__*/React__default.createElement(Box, null, children);
-};
-SelectWrapper.defaultProps = {
-  isError: false
-};
-
-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,
-  64: '4rem',
-  56: '3.5rem',
-  48: '3rem',
-  40: '2.5rem',
-  36: '2.25rem',
-  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 letterSpacings = {
-  tighter: '-0.05em',
-  tight: '-0.025em',
-  normal: '0',
-  wide: '0.025em',
-  wider: '0.05em',
-  widest: '0.1em'
-};
-const fontSizes = {
-  heading: {
-    1: '2.5rem',
-    2: '2rem',
-    3: '1.75rem',
-    4: '1.5rem',
-    5: '1.375rem',
-    6: '1.125rem'
-  },
-  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: fontWeights.semibold,
-    lineHeight: lineHeights[64],
-    letterSpacing: letterSpacings.normal
-  },
-  2: {
-    fontSize: fontSizes.heading[2],
-    fontWeight: fontWeights.semibold,
-    lineHeight: lineHeights[56],
-    letterSpacing: letterSpacings.normal
-  },
-  3: {
-    fontSize: fontSizes.heading[3],
-    fontWeight: fontWeights.semibold,
-    lineHeight: lineHeights[48],
-    letterSpacing: letterSpacings.normal
-  },
-  4: {
-    fontSize: fontSizes.heading[4],
-    fontWeight: fontWeights.semibold,
-    lineHeight: lineHeights[40],
-    letterSpacing: letterSpacings.normal
-  },
-  5: {
-    fontSize: fontSizes.heading[5],
-    fontWeight: fontWeights.semibold,
-    lineHeight: lineHeights[36],
-    letterSpacing: letterSpacings.normal
-  },
-  6: {
-    fontSize: fontSizes.heading[6],
-    fontWeight: fontWeights.semibold,
-    lineHeight: lineHeights[32],
-    letterSpacing: letterSpacings.normal
-  }
-};
-const text = {
-  xl: {
-    fontSize: fontSizes.text.xl,
-    fontWeight: fontWeights.normal,
-    lineHeight: lineHeights[28],
-    letterSpacing: letterSpacings.normal
-  },
-  lg: {
-    fontSize: fontSizes.text.lg,
-    fontWeight: fontWeights.normal,
-    lineHeight: lineHeights[24],
-    letterSpacing: letterSpacings.normal
-  },
-  md: {
-    fontSize: fontSizes.text.md,
-    fontWeight: fontWeights.normal,
-    lineHeight: lineHeights[22],
-    letterSpacing: letterSpacings.normal
-  },
-  sm: {
-    fontSize: fontSizes.text.sm,
-    fontWeight: fontWeights.normal,
-    lineHeight: lineHeights[18],
-    letterSpacing: letterSpacings.normal
-  },
-  xs: {
-    fontSize: fontSizes.text.xs,
-    fontWeight: fontWeights.normal,
-    lineHeight: lineHeights[14],
-    letterSpacing: letterSpacings.normal
-  }
-};
-const button = {
-  lg: {
-    fontSize: fontSizes.button.lg,
-    lineHeight: lineHeights[28],
-    letterSpacing: letterSpacings.normal,
-    fontWeight: fontWeights.normal
-  },
-  md: {
-    fontSize: fontSizes.button.md,
-    lineHeight: lineHeights[22],
-    letterSpacing: letterSpacings.normal,
-    fontWeight: fontWeights.normal
-  },
-  sm: {
-    fontSize: fontSizes.button.sm,
-    lineHeight: lineHeights[14],
-    letterSpacing: letterSpacings.normal,
-    fontWeight: fontWeights.normal
-  }
-};
-const field = {
-  lg: {
-    fontSize: fontSizes.field.lg,
-    lineHeight: lineHeights[24],
-    letterSpacing: letterSpacings.normal,
-    fontWeight: fontWeights.normal
-  },
-  md: {
-    fontSize: fontSizes.field.md,
-    lineHeight: lineHeights[22],
-    letterSpacing: letterSpacings.normal,
-    fontWeight: fontWeights.normal
-  },
-  sm: {
-    fontSize: fontSizes.field.sm,
-    lineHeight: lineHeights[18],
-    letterSpacing: letterSpacings.normal,
-    fontWeight: fontWeights.normal
-  }
-};
-const textStyles = {
-  heading,
-  text,
-  button,
-  field
-};
-
-const styleMd = textStyles.text.sm;
-const selectStyle = {
-  fontSize: styleMd.fontSize,
-  lineHeight: styleMd.lineHeight,
-  letterSpacing: 0
-};
-const boxShadow = color => `0 0 0 1px ${color}`;
-function selectStyles(colorMode, _isError) {
-  const boxShadowLight = (isFocused = false, isError = false) => {
-    if (isError && isFocused || isError) {
-      return boxShadow('danger.500');
-    }
-    if (isFocused) {
-      return boxShadow('primary.500');
-    }
-    return boxShadow('neutral.400');
-  };
-  return {
-    control: (base, state) => colorMode === 'dark' ? {
-      ...base,
-      ...selectStyle,
-      background: 'transparent',
-      color: 'primary.300',
-      borderColor: 'secondary.500',
-      boxShadow: state.isFocused ? 'none' : `inherit`
-    } : {
-      ...base,
-      ...selectStyle,
-      borderWidth: 0,
-      boxShadow: boxShadowLight(state.isFocused, _isError)
-    },
-    option: (base, {
-      isSelected
-    }) => colorMode === 'dark' ? {
-      ...base,
-      ...selectStyle,
-      background: isSelected ? 'primary.700' : 'dark.800',
-      color: 'white'
-    } : {
-      ...base,
-      ...selectStyle
-    },
-    menu: base => colorMode === 'dark' ? {
-      ...base,
-      ...selectStyle,
-      background: '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: 'secondary.500'
-    } : {
-      ...base,
-      ...selectStyle
-    },
-    indicatorSeparator: base => colorMode === 'dark' ? {
-      ...base,
-      ...selectStyle,
-      backgroundColor: 'secondary.500'
-    } : {
-      ...base,
-      ...selectStyle
-    },
-    placeholder: base => {
-      return {
-        ...base,
-        ...selectStyle,
-        color: 'black.low'
-      };
-    }
-  };
-}
-const themeSelect = theme => {
-  return {
-    ...theme,
-    colors: {
-      ...theme.colors,
-      primary: 'primary.500',
-      primary25: 'primary.50',
-      primary50: 'primary.100',
-      primary75: 'primary.200'
-    }
-  };
-};
-
-/* eslint-disable react/require-default-props */
-function Select({
-  styles,
-  isError = false,
-  ...rest
-}) {
-  const {
-    colorMode
-  } = useColorMode();
-  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
-    isError: isError
-  }, /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({
-    classNamePrefix: "react-select"
-  }, rest, {
-    styles: {
-      ...selectStyles(colorMode, isError)
-    },
-    theme: themeSelect
-  })));
-}
-
-function SelectAsync({
-  styles,
-  isError = false,
-  ...rest
-}) {
-  const {
-    colorMode
-  } = useColorMode();
-  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
-    isError: isError
-  }, /*#__PURE__*/React__default.createElement(AsyncPaginate, Object.assign({
-    classNamePrefix: "react-select"
-  }, rest, {
-    styles: {
-      ...selectStyles(colorMode, isError),
-      ...styles
-    },
-    theme: themeSelect
-  })));
-}
-
-function SelectAsyncCreatable({
-  styles,
-  isError = false,
-  ...rest
-}) {
-  const {
-    colorMode
-  } = useColorMode();
-  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
-    isError: isError
-  }, /*#__PURE__*/React__default.createElement(ReactSelectAsyncCreatable, Object.assign({
-    classNamePrefix: "react-select"
-  }, rest, {
-    styles: {
-      ...selectStyles(colorMode, isError),
-      ...styles
-    },
-    theme: themeSelect
-  })));
-}
-
-function SelectCreatable({
-  styles,
-  isError = false,
-  ...rest
-}) {
-  const {
-    colorMode
-  } = useColorMode();
-  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
-    isError: isError
-  }, /*#__PURE__*/React__default.createElement(ReactSelectCreatable, Object.assign({
-    classNamePrefix: "react-select"
-  }, rest, {
-    styles: {
-      ...selectStyles(colorMode, isError),
-      ...styles
-    },
-    theme: themeSelect
-  })));
-}
-
-/**
- * The `Switch` component is used as an alternative for the checkbox component for switching between "enabled" and "disabled" states.
- *
- * @see Docs https://chakra-ui.com/docs/components/switch
- * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/switch/
- */
-const Switch = /*#__PURE__*/forwardRef$1(function Switch(props, ref) {
-  const styles = useMultiStyleConfig$1('Switch', props);
-  const {
-    spacing = '0.5rem',
-    children,
-    ...ownProps
-  } = omitThemingProps$1(props);
-  const {
-    state,
-    getInputProps,
-    getCheckboxProps,
-    getRootProps,
-    getLabelProps
-  } = useCheckbox(ownProps);
-  const containerStyles = useMemo(() => ({
-    display: 'inline-block',
-    position: 'relative',
-    verticalAlign: 'middle',
-    lineHeight: 0,
-    ...styles.container
-  }), [styles.container]);
-  const trackStyles = useMemo(() => ({
-    display: 'inline-flex',
-    flexShrink: 0,
-    justifyContent: 'flex-start',
-    boxSizing: 'content-box',
-    cursor: 'pointer',
-    width: 200,
-    ...styles.track
-  }), [styles.track]);
-  const labelStyles = useMemo(() => ({
-    userSelect: 'none',
-    marginStart: spacing,
-    ...styles.label
-  }), [spacing, styles.label]);
-  const getIconSize = value => {
-    const iconSize = {
-      sm: 3,
-      md: 4,
-      lg: 5
-    };
-    return iconSize[value];
-  };
-  return /*#__PURE__*/React__default.createElement(chakra$1.label, Object.assign({}, getRootProps(), {
-    display: "flex",
-    alignItems: "center",
-    className: cx('chakra-switch', props.className),
-    __css: containerStyles
-  }), /*#__PURE__*/React__default.createElement("input", Object.assign({
-    "data-test-id": "",
-    className: "chakra-switch__input"
-  }, getInputProps({}, ref))), /*#__PURE__*/React__default.createElement(chakra$1.span, Object.assign({}, getCheckboxProps(), {
-    className: "chakra-switch__track",
-    pos: "relative",
-    __css: trackStyles
-  }), /*#__PURE__*/React__default.createElement(Flex, {
-    gap: 2,
-    pos: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)"
-  }, /*#__PURE__*/React__default.createElement(Check, {
-    color: "white",
-    size: getIconSize(props.size)
-  }), /*#__PURE__*/React__default.createElement(Close, {
-    color: state.isDisabled ? 'neutral.600' : 'neutral.900',
-    size: getIconSize(props.size)
-  })), /*#__PURE__*/React__default.createElement(chakra$1.span, {
-    __css: styles.thumb,
-    className: "chakra-switch__thumb",
-    "data-checked": dataAttr(state.isChecked),
-    "data-hover": dataAttr(state.isHovered)
-  })), children && /*#__PURE__*/React__default.createElement(chakra$1.span, Object.assign({
-    className: "chakra-switch__label",
-    color: state.isDisabled ? 'black.low' : 'black.high'
-  }, getLabelProps(), {
-    __css: labelStyles
-  }), children));
-});
-Switch.defaultProps = {
-  size: 'sm'
-};
-
-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$1('Tabs', tabProps);
-  return /*#__PURE__*/createElement(Button$2, Object.assign({
-    "data-test-id": props['data-test-id'],
-    p: 4,
-    fontSize: "text.md",
-    _selected: {
-      borderColor: 'primary.500',
-      color: 'primary.500',
-      transform: 'translateY(-2px)',
-      _hover: {
-        '& .chakra-badge': {
-          bg: 'primary.500'
-        },
-        color: 'primary.500'
-      }
-    },
-    color: "black.medium",
-    _focus: {
-      bg: 'none'
-    },
-    _hover: {
-      '& .chakra-badge': {
-        bg: 'primary.400'
-      },
-      color: 'primary.400'
-    },
-    __css: styles.tab
-  }, tabProps), /*#__PURE__*/createElement(Flex, {
-    alignItems: "center"
-  }, (_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) => /*#__PURE__*/React__default.createElement(TabList$1, Object.assign({
-  borderBottom: "1px solid",
-  borderColor: useColorModeValue('gray.200', 'bright-gray.800')
-}, props, {
-  ref: ref
-}), props.children));
-
-const TabPanel = /*#__PURE__*/forwardRef$1((props, ref) => /*#__PURE__*/React__default.createElement(TabPanel$1, Object.assign({
-  px: 0
-}, props, {
-  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
-};
-
-const {
-  definePartsStyle,
-  defineMultiStyleConfig
-} = /*#__PURE__*/createMultiStyleConfigHelpers(accordionAnatomy.keys);
-const baseStyleContainer = /*#__PURE__*/defineStyle$1({
-  border: 'none'
-});
-const baseStyleButton = /*#__PURE__*/defineStyle$1({
-  height: 14,
-  transitionProperty: 'common',
-  transitionDuration: 'normal',
-  gap: 4,
-  fontSize: 'text.md',
-  bg: 'neutral.50',
-  _focusVisible: {
-    bg: 'neutral.100'
-  },
-  _hover: {
-    bg: 'neutral.100'
-  },
-  _disabled: {
-    opacity: 0.4,
-    cursor: 'not-allowed'
-  },
-  py: 2,
-  px: 4,
-  position: 'relative'
-});
-const baseStylePanel = /*#__PURE__*/defineStyle$1({
-  pt: '2',
-  px: '4',
-  pb: '5'
-});
-const baseStyleIcon = /*#__PURE__*/defineStyle$1({
-  fontSize: '1.25em'
-});
-const baseStyle = /*#__PURE__*/definePartsStyle({
-  container: baseStyleContainer,
-  button: baseStyleButton,
-  panel: baseStylePanel,
-  icon: baseStyleIcon
-});
-const accordionTheme = /*#__PURE__*/defineMultiStyleConfig({
-  baseStyle
-});
-
-const {
-  definePartsStyle: definePartsStyle$1,
-  defineMultiStyleConfig: defineMultiStyleConfig$1
-} = /*#__PURE__*/createMultiStyleConfigHelpers(alertAnatomy.keys);
-const $fg = /*#__PURE__*/cssVar('alert-fg');
-const $bg = /*#__PURE__*/cssVar('alert-bg');
-const baseStyle$1 = /*#__PURE__*/definePartsStyle$1(props => {
-  return {
-    container: {
-      bg: $bg.reference,
-      px: '4',
-      py: '2',
-      borderRadius: 'sm'
-    },
-    title: {
-      fontWeight: 'regular',
-      textStyle: 'text.sm',
-      marginEnd: '2'
-    },
-    description: {
-      lineHeight: '6'
-    },
-    icon: {
-      color: $fg.reference,
-      flexShrink: 0,
-      marginEnd: '3',
-      w: '4',
-      h: '4'
-    },
-    action: {
-      color: props.colorScheme === 'neutral' && props.variant === 'light' ? 'primary.500' : 'inherit',
-      '& +.chakra-alert__close': {
-        ml: '3'
-      }
-    },
-    close: {
-      color: $fg.reference,
-      w: '4',
-      h: '4'
-    },
-    spinner: {
-      color: $fg.reference,
-      flexShrink: 0,
-      marginEnd: '3',
-      w: '5',
-      h: '5'
-    }
-  };
-});
-function getBg(props) {
-  const {
-    colorScheme: c
-  } = props;
-  return {
-    light: c === 'neutral' ? `colors.${c}.300` : `colors.${c}.50`
-  };
-}
-const variantLight = /*#__PURE__*/definePartsStyle$1(props => {
-  const {
-    colorScheme: c
-  } = props;
-  const bg = getBg(props);
-  return {
-    container: {
-      [$fg.variable]: `colors.${c}.700`,
-      [$bg.variable]: bg.light,
-      color: $fg.reference
-    }
-  };
-});
-const variantSolid = /*#__PURE__*/definePartsStyle$1(props => {
-  const {
-    colorScheme: c
-  } = props;
-  return {
-    container: {
-      [$fg.variable]: `colors.white.high`,
-      [$bg.variable]: c === 'neutral' ? `colors.${c}.700` : `colors.${c}.500`
-    }
-  };
-});
-const variants = {
-  light: variantLight,
-  solid: variantSolid
-};
-const alertTheme = /*#__PURE__*/defineMultiStyleConfig$1({
-  baseStyle: baseStyle$1,
-  variants,
-  defaultProps: {
-    variant: 'light',
-    colorScheme: 'info'
-  }
-});
-
-const Badge$1 = {
-  baseStyle: {
-    display: 'inline-block',
-    fontSize: 'text.xs',
-    fontWeight: 'semibold',
-    lineHeight: '14',
-    textTransform: 'none',
-    px: 2,
-    py: '0.5'
-  },
-  variants: {
-    'primary-solid': {
-      bg: 'primary.500',
-      color: 'white'
-    },
-    'success-solid': {
-      bg: 'success.500',
-      color: 'white'
-    },
-    'info-solid': {
-      bg: 'info.500',
-      color: 'white'
-    },
-    'warning-solid': {
-      bg: 'warning.500',
-      color: 'white'
-    },
-    'danger-solid': {
-      bg: 'danger.500',
-      color: 'white'
-    },
-    'neutral-solid': {
-      bg: 'neutral.900',
-      color: 'white'
-    },
-    'disabled-solid': {
-      bg: 'neutral.600',
-      color: 'white'
-    },
-    'primary-light': {
-      bg: 'primary.50',
-      color: 'primary.500'
-    },
-    'success-light': {
-      bg: 'success.50',
-      color: 'success.500'
-    },
-    'info-light': {
-      bg: 'info.50',
-      color: 'info.500'
-    },
-    'warning-light': {
-      bg: 'warning.50',
-      color: 'warning.500'
-    },
-    'danger-light': {
-      bg: 'danger.50',
-      color: 'danger.500'
-    },
-    'neutral-light': {
-      bg: 'neutral.200',
-      color: 'neutral.900'
-    },
-    'disabled-light': {
-      bg: 'neutral.200',
-      color: 'neutral.600'
-    }
-  },
-  // The default size and variant values
-  defaultProps: {
-    variant: 'primary-solid'
-  }
-};
-
-// You can also use the more specific type for
-// a single part component: ComponentSingleStyleConfig
-const Button$1 = /*#__PURE__*/defineStyleConfig({
-  // The styles all button have in common
-  baseStyle: {
-    fontSize: 'body.1',
-    fontWeight: 'normal',
-    px: 4,
-    py: 2.5,
-    borderRadius: 'sm',
-    _disabled: {
-      opacity: 1,
-      bg: 'neutral.300',
-      color: 'black.low'
-    },
-    _hover: {
-      _disabled: {
-        bg: 'neutral.300',
-        color: 'black.low'
-      }
-    }
-  },
-  sizes: {
-    lg: props => {
-      const {
-        variant
-      } = props;
-      const base = {
-        fontSize: 'text.xl',
-        h: 12,
-        px: 4,
-        py: 2.5
-      };
-      const icon = {
-        h: 10,
-        w: 10,
-        p: 0
-      };
-      return variant === 'icon' ? icon : base;
-    },
-    md: props => {
-      const {
-        variant
-      } = props;
-      const base = {
-        fontSize: 'text.md',
-        h: 9,
-        px: 3,
-        py: '7px'
-      };
-      const icon = {
-        h: 9,
-        w: 9,
-        p: 0
-      };
-      return variant === 'icon' ? icon : base;
-    },
-    sm: props => {
-      const {
-        variant
-      } = props;
-      const base = {
-        fontSize: 'text.sm',
-        h: '26px',
-        lineHeight: 4,
-        px: 2,
-        py: '5px'
-      };
-      const icon = {
-        h: '26px',
-        w: '26px',
-        p: 0
-      };
-      return variant === 'icon' ? icon : base;
-    }
-  },
-  variants: {
-    primary: props => {
-      const {
-        isLoading
-      } = props;
-      const basePrimary = {
-        color: 'white.high',
-        bg: 'primary.500',
-        _hover: {
-          bg: 'primary.600'
-        },
-        _active: {
-          bg: 'primary.700'
-        }
-      };
-      const disabledLoading = {
-        _disabled: {
-          bg: 'primary.500'
-        },
-        _hover: {
-          _disabled: {
-            bg: 'primary.500'
-          }
-        }
-      };
-      return isLoading ? disabledLoading : basePrimary;
-    },
-    secondary: props => {
-      const {
-        isLoading
-      } = props;
-      const baseSecondary = {
-        color: 'primary.500',
-        borderWidth: 1,
-        borderStyle: 'inside',
-        bg: 'white.high',
-        borderColor: 'primary.500',
-        _hover: {
-          bg: 'primary.50'
-        },
-        _active: {
-          bg: 'primary.100'
-        },
-        _disabled: {
-          border: 0
-        },
-        '.chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)': {
-          marginEnd: '-1px'
-        },
-        '.chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)': {
-          marginBottom: '-1px'
-        }
-      };
-      const disabledLoading = {
-        ...baseSecondary,
-        _disabled: {
-          bg: 'white.high'
-        },
-        _hover: {
-          _disabled: {
-            bg: 'white.high'
-          }
-        }
-      };
-      return isLoading ? disabledLoading : baseSecondary;
-    },
-    tertiary: props => {
-      const {
-        isLoading
-      } = props;
-      const baseTertiary = {
-        color: 'primary.500',
-        _hover: {
-          bg: 'primary.50'
-        },
-        _active: {
-          bg: 'primary.100'
-        }
-      };
-      const disabledLoading = {
-        ...baseTertiary,
-        _disabled: {
-          bg: 'transparent'
-        },
-        _hover: {
-          _disabled: {
-            bg: 'transparent'
-          }
-        }
-      };
-      return isLoading ? disabledLoading : baseTertiary;
-    },
-    danger: props => {
-      const {
-        isLoading
-      } = props;
-      const baseDanger = {
-        bg: 'danger.500',
-        color: 'white.high',
-        _hover: {
-          bg: 'danger.600'
-        },
-        _active: {
-          bg: 'danger.700'
-        }
-      };
-      const disabledLoading = {
-        ...baseDanger,
-        _disabled: {
-          bg: 'danger.500'
-        },
-        _hover: {
-          _disabled: {
-            bg: 'danger.500'
-          }
-        }
-      };
-      return isLoading ? disabledLoading : baseDanger;
-    },
-    'outline-danger': props => {
-      const {
-        isLoading
-      } = props;
-      const baseSecondary = {
-        color: 'danger.500',
-        borderWidth: 1,
-        borderStyle: 'inside',
-        bg: 'white.high',
-        borderColor: 'danger.500',
-        _hover: {
-          bg: 'danger.50'
-        },
-        _active: {
-          bg: 'danger.100'
-        },
-        _disabled: {
-          border: 0
-        }
-      };
-      const disabledLoading = {
-        ...baseSecondary,
-        _disabled: {
-          bg: 'white.high'
-        },
-        _hover: {
-          _disabled: {
-            bg: 'white.high'
-          }
-        }
-      };
-      return isLoading ? disabledLoading : baseSecondary;
-    },
-    link: {
-      bg: 'transparent',
-      color: 'primary.500',
-      _disabled: {
-        opacity: '1',
-        bg: 'transparent',
-        color: 'black.medium'
-      },
-      _hover: {
-        _disabled: {
-          bg: 'transparent',
-          color: 'black.medium'
-        }
-      }
-    },
-    icon: {
-      bg: 'neutral.50',
-      minW: 0,
-      borderColor: 'neutral.200',
-      borderWidth: '1px',
-      _active: {
-        bg: 'neutral.500',
-        borderColor: 'neutral.50'
-      },
-      _disabled: {
-        bg: 'neutral.500',
-        opacity: 0.3,
-        borderColor: 'neutral.50'
-      },
-      _hover: {
-        bg: 'neutral.400',
-        _disabled: {
-          bg: 'neutral.500',
-          opacity: 0.3,
-          borderColor: 'neutral.50'
-        }
-      }
-    }
-  },
-  defaultProps: {
-    size: 'md',
-    variant: 'primary',
-    colorScheme: 'primary'
-  }
-});
-
-const CardStyle = /*#__PURE__*/defineStyleConfig({
-  baseStyle: props => {
-    return {
-      shadow: props.withShadow ? 'raised' : 'none',
-      borderRadius: props.isRounded ? 'sm' : 'none'
-    };
-  }
-});
-
-const {
-  definePartsStyle: definePartsStyle$2,
-  defineMultiStyleConfig: defineMultiStyleConfig$2
-} = /*#__PURE__*/createMultiStyleConfigHelpers$1(checkboxAnatomy.keys);
-const baseStyle$2 = /*#__PURE__*/definePartsStyle$2({
-  control: {
-    borderRadius: 'sm',
-    w: 4,
-    h: 4,
-    border: '1px solid'
-  },
-  icon: {
-    color: 'neutral.50'
-  },
-  label: {
-    textStyle: 'text.sm',
-    color: 'black.high',
-    ml: 2
-  },
-  _disabled: {
-    background: 'neutral.200',
-    border: '0',
-    borderColor: 'neutral.500',
-    cursor: 'not-allowed'
-  }
-});
-const errors = /*#__PURE__*/definePartsStyle$2({
-  control: {
-    borderColor: 'danger.500',
-    _checked: {
-      borderColor: 'danger.500',
-      backgroundColor: 'danger.500',
-      _hover: {
-        borderColor: 'danger.600',
-        backgroundColor: 'danger.600'
-      }
-    },
-    _indeterminate: {
-      borderColor: 'danger.500',
-      backgroundColor: 'danger.500'
-    }
-  },
-  label: {
-    textStyle: 'text.xs'
-  },
-  icon: {
-    fontSize: '8px'
-  }
-});
-const unstyled = /*#__PURE__*/definePartsStyle$2({
-  control: {
-    borderColor: 'neutral.600',
-    _checked: {
-      borderColor: 'primary.500',
-      backgroundColor: 'primary.500',
-      _hover: {
-        borderColor: 'primary.600',
-        backgroundColor: 'primary.600'
-      },
-      _disabled: {
-        backgroundColor: 'primary.500',
-        borderColor: 'primary.500',
-        opacity: 0.3
-      }
-    },
-    _disabled: {
-      backgroundColor: 'neutral.200',
-      borderColor: 'neutral.200'
-    },
-    _indeterminate: {
-      borderColor: 'primary.500',
-      backgroundColor: 'primary.500',
-      _disabled: {
-        backgroundColor: 'primary.500',
-        borderColor: 'primary.500',
-        opacity: 0.3
-      }
-    }
-  },
-  label: {
-    textStyle: 'text.xs',
-    _disabled: {
-      opacity: 1
-    }
-  },
-  icon: {
-    fontSize: '8px'
-  }
-});
-const variants$1 = {
-  errors,
-  unstyled
-};
-const Checkbox = /*#__PURE__*/defineMultiStyleConfig$2({
-  baseStyle: baseStyle$2,
-  variants: variants$1,
-  defaultProps: {
-    variant: 'unstyled'
-  }
-});
-
-const Chips$1 = /*#__PURE__*/defineStyleConfig({
-  baseStyle: props => {
-    const {
-      isDisabled,
-      isActive
-    } = props;
-    const defaultProps = {
-      color: 'primary.500',
-      textStyle: 'text.sm',
-      borderRadius: '2xl',
-      borderWidth: '1px',
-      borderColor: 'primary.500',
-      bg: 'white.high',
-      px: 3,
-      py: 1,
-      cursor: 'default',
-      _hover: {
-        bg: 'primary.50'
-      }
-    };
-    let chipsProps = {
-      ...defaultProps
-    };
-    if (isActive) {
-      const isActiveProps = {
-        bg: 'primary.500',
-        color: 'white.high',
-        _hover: {
-          bg: 'primary.500'
-        }
-      };
-      chipsProps = {
-        ...chipsProps,
-        ...isActiveProps
-      };
-    }
-    if (isDisabled) {
-      const isDisabledProps = {
-        bg: 'neutral.200',
-        color: 'black.low',
-        borderColor: 'neutral.200',
-        cursor: 'not-allowed',
-        _hover: {
-          bg: 'neutral.200'
-        }
-      };
-      chipsProps = {
-        ...chipsProps,
-        ...isDisabledProps
-      };
-    }
-    return {
-      ...chipsProps
-    };
-  },
-  sizes: {
-    sm: {
-      textStyle: 'text.sm'
-    },
-    md: {
-      textStyle: 'text.md',
-      py: 2
-    }
-  },
-  defaultProps: {
-    size: 'sm'
-  }
-});
-
-const baseStyle$3 = /*#__PURE__*/defineStyle$1({
-  fontSize: 'field.sm',
-  fontWeight: 'normal',
-  marginEnd: 1,
-  mb: 1
-});
-const FormLabel = /*#__PURE__*/defineStyleConfig({
-  baseStyle: baseStyle$3
-});
-
-const {
-  definePartsStyle: definePartsStyle$3,
-  defineMultiStyleConfig: defineMultiStyleConfig$3
-} = /*#__PURE__*/createMultiStyleConfigHelpers(inputAnatomy.keys);
-const baseStyle$4 = /*#__PURE__*/definePartsStyle$3({
-  field: {
-    width: '100%',
-    minWidth: 0,
-    outline: 0,
-    px: 2,
-    py: 2.5,
-    paddingInlineStart: 2,
-    paddingInlineEnd: 2,
-    position: 'relative',
-    appearance: 'none',
-    color: 'black.high',
-    _disabled: {
-      bg: 'neutral.300',
-      border: 0,
-      cursor: 'not-allowed',
-      opacity: 1,
-      boxShadow: 'none',
-      color: 'black.medium'
-    },
-    _placeholder: {
-      color: 'black.low'
-    }
-  }
-});
-const size = {
-  lg: /*#__PURE__*/defineStyle$1({
-    fontSize: 'text.lg',
-    h: 12,
-    borderRadius: 'sm'
-  }),
-  md: /*#__PURE__*/defineStyle$1({
-    fontSize: 'text.md',
-    h: 10,
-    borderRadius: 'sm'
-  }),
-  sm: /*#__PURE__*/defineStyle$1({
-    fontSize: 'text.sm',
-    h: 9,
-    borderRadius: 'sm'
-  })
-};
-const sizes = {
-  lg: /*#__PURE__*/definePartsStyle$3({
-    field: size.lg,
-    addon: size.lg
-  }),
-  md: /*#__PURE__*/definePartsStyle$3({
-    field: size.md,
-    addon: size.md
-  }),
-  sm: /*#__PURE__*/definePartsStyle$3({
-    field: size.sm,
-    addon: size.sm
-  })
-};
-const outline = /*#__PURE__*/definePartsStyle$3(props => {
-  const field = {
-    border: 0,
-    outline: 0,
-    bg: mode('white', 'inherit')(props),
-    color: mode('inherit', 'white')(props),
-    _invalid: {
-      boxShadow: 'none'
-    },
-    _focusVisible: {
-      zIndex: 1,
-      boxShadow: 'none'
-    }
-  };
-  return {
-    field
-  };
-});
-const unstyled$1 = /*#__PURE__*/definePartsStyle$3({
-  field: {
-    bg: 'transparent',
-    px: '0',
-    height: 'auto'
-  },
-  addon: {
-    bg: 'transparent',
-    px: '0',
-    height: 'auto'
-  }
-});
-const variants$2 = {
-  outline,
-  unstyled: unstyled$1
-};
-const Input = /*#__PURE__*/defineMultiStyleConfig$3({
-  baseStyle: baseStyle$4,
-  sizes,
-  variants: variants$2,
-  defaultProps: {
-    size: 'sm',
-    variant: 'outline'
-  }
-});
-
-/* eslint-disable prefer-destructuring */
-const rotate = /*#__PURE__*/keyframes({
-  '0%': {
-    transform: 'rotate(0deg)'
-  },
-  '100%': {
-    transform: 'rotate(360deg)'
-  }
-});
-const getLoaderColor = color => {
-  if (!color) {
-    return 'var(--chakra-colors-white-high)';
-  }
-  const colorValue = color.split('.');
-  let backgroundColor;
-  switch (colorValue.length) {
-    case 1:
-      backgroundColor = colorValue[0];
-      break;
-    case 2:
-      backgroundColor = `var(--chakra-colors-${colorValue[0]}-${colorValue[1]})`;
-      break;
-    default:
-      backgroundColor = 'var(--chakra-colors-white-high)';
-      break;
-  }
-  if (color === 'primary') return 'var(--chakra-colors-primary-600)';
-  if (color === 'danger') return 'var(--chakra-colors-danger-500)';
-  if (color === 'warning') return 'var(--chakra-colors-warning-700)';
-  return backgroundColor;
-};
-const LoaderStyle = /*#__PURE__*/defineStyleConfig({
-  baseStyle: props => {
-    const colors = getLoaderColor(props.color);
-    return {
-      borderRadius: '50%',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      animation: `${rotate} 1s linear infinite`,
-      background: `conic-gradient(from 180deg at 50% 50%, ${colors} 0deg, rgba(217, 217, 217, 0) 360deg);`,
-      ':before': {
-        content: `''`,
-        display: 'block',
-        borderRadius: '50%',
-        width: '6px',
-        height: '6px',
-        position: 'absolute',
-        bottom: 0,
-        background: colors
-      }
-    };
-  },
-  sizes: {
-    xs: {
-      width: '12px',
-      height: '12px',
-      WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 1.4px),#000 0);',
-      ':before': {
-        width: '1.4px',
-        height: '1.4px'
-      }
-    },
-    sm: {
-      width: '16px',
-      height: '16px',
-      WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 1.87px),#000 0);',
-      ':before': {
-        width: '1.87px',
-        height: '1.87px'
-      }
-    },
-    md: {
-      width: '24px',
-      height: '24px',
-      WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 2.8px),#000 0);',
-      ':before': {
-        width: '2.8px',
-        height: '2.8px'
-      }
-    },
-    lg: {
-      width: '50px',
-      height: '50px',
-      WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 5.83px),#000 0);',
-      ':before': {
-        width: '5.83px',
-        height: '5.83px'
-      }
-    },
-    xl: {
-      width: '75px',
-      height: '75px',
-      WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 8.75px),#000 0);',
-      ':before': {
-        width: '8.75px',
-        height: '8.75px'
-      }
-    },
-    xxl: {
-      width: '100px',
-      height: '100px',
-      WebkitMask: `radial-gradient(farthest-side,#0000 calc(100% - 11.67px),#000 0);`,
-      ':before': {
-        width: '11.67px',
-        height: '11.67px'
-      }
-    }
-  },
-  defaultProps: {
-    size: 'lg'
-  }
-});
-
-const {
-  definePartsStyle: definePartsStyle$4
-} = /*#__PURE__*/createMultiStyleConfigHelpers(popoverAnatomy.keys);
-const Popover = {
-  baseStyle: props => definePartsStyle$4({
-    popper: {
-      background: mode('white', 'inherit')(props)
-    }
-  })
-};
-
-const {
-  definePartsStyle: definePartsStyle$5,
-  defineMultiStyleConfig: defineMultiStyleConfig$4
-} = /*#__PURE__*/createMultiStyleConfigHelpers$1(radioAnatomy.keys);
-const baseStyle$5 = /*#__PURE__*/definePartsStyle$5({
-  control: {
-    border: '1px solid',
-    width: '16px',
-    height: '16px'
-  },
-  label: {
-    marginLeft: '8px',
-    textStyle: 'text.sm',
-    color: 'black.high',
-    _disabled: {
-      opacity: 1,
-      color: 'black.medium'
-    }
-  }
-});
-const errors$1 = /*#__PURE__*/definePartsStyle$5({
-  control: {
-    borderColor: 'danger.500',
-    _checked: {
-      borderColor: 'danger.500',
-      bg: 'white',
-      _before: {
-        h: '10px',
-        w: '10px',
-        bg: 'danger.500'
-      },
-      _hover: {
-        borderColor: 'danger.500',
-        bg: 'neutral.200'
-      },
-      _disabled: {
-        borderColor: 'danger.500',
-        bg: 'white.high',
-        _before: {
-          h: '10px',
-          w: '10px',
-          bg: 'primary.500',
-          opacity: 0.3
-        }
-      }
-    },
-    _disabled: {
-      borderColor: 'danger.500',
-      bg: 'neutral.200'
-    }
-  },
-  label: {
-    fontSize: '12px'
-  }
-});
-const unstyled$2 = /*#__PURE__*/definePartsStyle$5({
-  control: {
-    borderColor: 'neutral.600',
-    _checked: {
-      borderColor: 'primary.500',
-      bg: 'white',
-      _before: {
-        h: '10px',
-        w: '10px',
-        bg: 'primary.500'
-      },
-      _hover: {
-        borderColor: 'primary.500',
-        bg: 'gray.200'
-      },
-      _disabled: {
-        borderColor: 'primary.500',
-        bg: 'white.high',
-        opacity: 0.3,
-        _before: {
-          h: '10px',
-          w: '10px',
-          bg: 'primary.500'
-        }
-      }
-    },
-    _disabled: {
-      borderColor: 'neutral.200',
-      bg: 'neutral.200'
-    }
-  },
-  label: {
-    fontSize: '12px'
-  }
-});
-const variants$3 = {
-  errors: errors$1,
-  unstyled: unstyled$2
-};
-const Radio = /*#__PURE__*/defineMultiStyleConfig$4({
-  baseStyle: baseStyle$5,
-  variants: variants$3,
-  defaultProps: {
-    variant: 'unstyled'
-  }
-});
-
-const {
-  defineMultiStyleConfig: defineMultiStyleConfig$5,
-  definePartsStyle: definePartsStyle$6
-} = /*#__PURE__*/createMultiStyleConfigHelpers(switchAnatomy.keys);
-const $width = /*#__PURE__*/cssVar$1('switch-track-width');
-const $height = /*#__PURE__*/cssVar$1('switch-track-height');
-const $diff = /*#__PURE__*/cssVar$1('switch-track-diff');
-const diffValue = /*#__PURE__*/calc.subtract($width, $height);
-const $translateX = /*#__PURE__*/cssVar$1('switch-thumb-x');
-const baseStyleThumb = /*#__PURE__*/defineStyle$1({
-  bg: 'white',
-  transitionProperty: 'transform',
-  transitionDuration: 'normal',
-  borderRadius: 'inherit',
-  width: [$height.reference],
-  height: [$height.reference],
-  _checked: {
-    transform: `translateX(${$translateX.reference})`
-  }
-});
-const baseStyle$6 = /*#__PURE__*/definePartsStyle$6(() => ({
-  container: {
-    [$diff.variable]: diffValue,
-    [$translateX.variable]: $diff.reference,
-    _rtl: {
-      [$translateX.variable]: calc($diff).negate().toString()
-    }
-  },
-  track: {
-    bg: 'neutral.400',
-    p: 1,
-    _checked: {
-      bg: 'primary.500',
-      _disabled: {
-        bg: 'neutral.600'
-      }
-    },
-    _disabled: {
-      bg: 'neutral.500',
-      opacity: '100%'
-    }
-  },
-  thumb: baseStyleThumb
-}));
-const sizes$1 = {
-  sm: /*#__PURE__*/definePartsStyle$6({
-    container: {
-      [$width.variable]: '1.875rem',
-      [$height.variable]: '0.75rem'
-    },
-    thumb: {
-      [$width.variable]: '0.75rem',
-      [$height.variable]: '0.75rem'
-    }
-  }),
-  md: /*#__PURE__*/definePartsStyle$6({
-    container: {
-      [$width.variable]: '2.375rem',
-      [$height.variable]: '1rem'
-    },
-    thumb: {
-      [$width.variable]: '1rem',
-      [$height.variable]: '1rem'
-    }
-  }),
-  lg: /*#__PURE__*/definePartsStyle$6({
-    container: {
-      [$width.variable]: '3.25rem',
-      [$height.variable]: '1.375rem'
-    },
-    thumb: {
-      [$width.variable]: '1.375rem',
-      [$height.variable]: '1.375rem'
-    }
-  })
-};
-const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$5({
-  baseStyle: baseStyle$6,
-  sizes: sizes$1,
-  defaultProps: {
-    size: 'md'
-  }
-});
-
-const {
-  defineMultiStyleConfig: defineMultiStyleConfig$6,
-  definePartsStyle: definePartsStyle$7
-} = /*#__PURE__*/createMultiStyleConfigHelpers(tableAnatomy.keys);
-const baseStyle$7 = /*#__PURE__*/definePartsStyle$7({
-  table: {
-    fontVariantNumeric: 'lining-nums tabular-nums',
-    borderCollapse: 'collapse',
-    width: 'full'
-  },
-  th: {
-    fontFamily: 'heading',
-    fontWeight: 'semibold',
-    textTransform: 'uppercase',
-    letterSpacing: 'normal',
-    textAlign: 'start',
-    height: '50px',
-    color: /*#__PURE__*/mode('neutral.900', 'white'),
-    fontSize: 'text.sm',
-    lineHeight: '18px'
-  },
-  td: {
-    textAlign: 'start',
-    height: '56px'
-  },
-  caption: {
-    mt: 4,
-    fontFamily: 'heading',
-    textAlign: 'center',
-    fontWeight: 'medium'
-  }
-});
-const numericStyles = /*#__PURE__*/defineStyle$1({
-  '&[data-is-numeric=true]': {
-    textAlign: 'end'
-  }
-});
-const variantSimple = /*#__PURE__*/definePartsStyle$7(props => {
-  const {
-    colorScheme: c
-  } = props;
-  return {
-    th: {
-      color: mode('gray.600', 'gray.400')(props),
-      borderBottom: '1px',
-      borderColor: mode(`${c}.100`, `${c}.700`)(props),
-      ...numericStyles
-    },
-    td: {
-      borderBottom: '1px',
-      borderColor: mode(`${c}.100`, `${c}.700`)(props),
-      ...numericStyles
-    },
-    caption: {
-      color: mode('gray.600', 'gray.100')(props)
-    },
-    tfoot: {
-      tr: {
-        '&:last-of-type': {
-          th: {
-            borderBottomWidth: 0
-          }
-        }
-      }
-    }
-  };
-});
-const variantStripe = /*#__PURE__*/definePartsStyle$7(props => {
-  const {
-    colorScheme: c
-  } = props;
-  return {
-    th: {
-      color: mode('gray.600', 'gray.400')(props),
-      borderBottom: '1px',
-      borderColor: mode(`${c}.100`, `${c}.700`)(props),
-      ...numericStyles
-    },
-    td: {
-      borderBottom: '1px',
-      borderColor: mode(`${c}.100`, `${c}.700`)(props),
-      ...numericStyles
-    },
-    caption: {
-      color: mode('gray.600', 'gray.100')(props)
-    },
-    tbody: {
-      tr: {
-        '&:nth-of-type(odd)': {
-          'th, td': {
-            borderBottomWidth: '1px',
-            borderColor: mode(`${c}.100`, `${c}.700`)(props)
-          },
-          td: {
-            background: mode(`${c}.100`, `${c}.700`)(props)
-          }
-        }
-      }
-    },
-    tfoot: {
-      tr: {
-        '&:last-of-type': {
-          th: {
-            borderBottomWidth: 0
-          }
-        }
-      }
-    }
-  };
-});
-const variants$4 = {
-  simple: variantSimple,
-  striped: variantStripe,
-  unstyled: /*#__PURE__*/defineStyle$1({})
-};
-const sizes$2 = {
-  sm: /*#__PURE__*/definePartsStyle$7({
-    th: {
-      px: '4',
-      py: '1',
-      lineHeight: '4',
-      fontSize: 'xs'
-    },
-    td: {
-      px: '4',
-      py: '2',
-      fontSize: 'sm',
-      lineHeight: '4'
-    },
-    caption: {
-      px: '4',
-      py: '2',
-      fontSize: 'xs'
-    }
-  }),
-  md: /*#__PURE__*/definePartsStyle$7({
-    th: {
-      px: '2',
-      py: '4',
-      lineHeight: '4',
-      fontSize: 'xs',
-      '&:first-of-type': {
-        pl: 6
-      },
-      '&:last-of-type': {
-        pr: 6
-      }
-    },
-    td: {
-      px: '2',
-      py: '4',
-      lineHeight: '5',
-      '&:first-of-type': {
-        pl: 6
-      },
-      '&:last-of-type': {
-        pr: 6
-      }
-    },
-    caption: {
-      px: '6',
-      py: '2',
-      fontSize: 'sm'
-    }
-  }),
-  lg: /*#__PURE__*/definePartsStyle$7({
-    th: {
-      px: '8',
-      py: '4',
-      lineHeight: '5',
-      fontSize: 'sm'
-    },
-    td: {
-      px: '8',
-      py: '5',
-      lineHeight: '6'
-    },
-    caption: {
-      px: '6',
-      py: '2',
-      fontSize: 'md'
-    }
-  })
-};
-const tableTheme = /*#__PURE__*/defineMultiStyleConfig$6({
-  baseStyle: baseStyle$7,
-  variants: variants$4,
-  sizes: sizes$2,
-  defaultProps: {
-    variant: 'simple',
-    size: 'md',
-    colorScheme: 'gray'
-  }
-});
-
-const getProps = props => {
-  const {
-    isError,
-    isSuccess,
-    isDisabled
-  } = props;
-  let borderColor = 'neutral.400';
-  let focusBorderColor = 'primary.500';
-  if (isError) {
-    borderColor = 'danger.500';
-    focusBorderColor = 'danger.500';
-  } else if (isSuccess) {
-    borderColor = 'success.500';
-    focusBorderColor = 'success.500';
-  } else if (isDisabled && !isError && !isSuccess) {
-    borderColor = 'neutral.400';
-    focusBorderColor = 'danger.500';
-  }
-  return {
-    focusBorderColor,
-    borderColor
-  };
-};
-const outline$1 = /*#__PURE__*/defineStyle(props => {
-  const {
-    focusBorderColor,
-    borderColor
-  } = getProps(props);
-  return {
-    background: 'white.high',
-    color: 'black.high',
-    borderColor,
-    fontSize: 'text.sm',
-    padding: 2,
-    borderRadius: 'sm',
-    borderWidth: '1px',
-    outline: 'none',
-    _disabled: {
-      opacity: 1,
-      color: 'black.medium',
-      background: 'neutral.300'
-    },
-    _placeholder: {
-      color: 'black.low'
-    },
-    _hover: {
-      borderColor
-    },
-    _focus: {
-      outline: 'none',
-      borderColor: focusBorderColor,
-      boxShadow: 'none'
-    },
-    _focusVisible: {
-      outline: 'none',
-      borderColor: focusBorderColor,
-      boxShadow: 'none'
-    },
-    _focusWithin: {
-      outline: 'none',
-      borderColor: focusBorderColor,
-      boxShadow: 'none'
-    },
-    _invalid: {
-      outline: 'none',
-      borderColor: 'danger.500',
-      boxShadow: 'none'
-    }
-  };
-});
-const Textarea = /*#__PURE__*/defineStyleConfig$1({
-  variants: {
-    outline: outline$1
-  },
-  defaultProps: {
-    variant: 'outline'
-  }
-});
-
-
-
-var components = {
-  __proto__: null,
-  Accordion: accordionTheme,
-  Alert: alertTheme,
-  Badge: Badge$1,
-  Button: Button$1,
-  Card: CardStyle,
-  Checkbox: Checkbox,
-  Chips: Chips$1,
-  FormLabel: FormLabel,
-  Input: Input,
-  LoaderStyle: LoaderStyle,
-  Popover: Popover,
-  Radio: Radio,
-  Switch: Switch$1,
-  Table: tableTheme,
-  Textarea: Textarea
-};
-
-const config = {
-  initialColorMode: 'light',
-  useSystemColorMode: false
-};
-const getTheme = foundations => {
-  return extendTheme({
-    ...foundations,
-    components: {
-      ...components
-    },
-    styles: {
-      global: {
-        body: {
-          fontSize: 'text.sm',
-          color: 'black.high'
-        }
-      }
-    },
-    config
-  });
-};
-const theme = /*#__PURE__*/extendTheme({
-  components: {
-    ...components
-  },
-  styles: {
-    global: {
-      '*::-webkit-scrollbar-thumb': {
-        background: 'neutral.400'
-      },
-      body: {
-        fontSize: 'text.sm',
-        color: 'black.high'
-      }
-    }
-  },
-  config
-});
-
-const ProviderContext = /*#__PURE__*/createContext$1({
-  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 /*#__PURE__*/React__default.createElement(ProviderContext.Provider, {
-    value: provider
-  }, /*#__PURE__*/React__default.createElement(ToastContainer, null), children);
-};
-Provider.displayName = 'Provider';
-
-function useFetcher() {
-  const {
-    instance
-  } = useInternalUI();
-  const axiosInstance = useMemo(() => instance || axios, [instance]);
-  const fetcher = async ({
-    url,
-    data,
-    method,
-    headers,
-    ...config
-  }) => {
-    const response = await axiosInstance.request({
-      data,
-      url,
-      method,
-      headers: {
-        'Content-Type': 'application/json; charset=utf-8',
-        ...headers
-      },
-      ...config
-    });
-    return response;
-  };
-  return {
-    fetcher
-  };
-}
-
-export { Alert, AlertAction, AlertClose, AlertDescription, AlertIcon, AlertTitle, Badge, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Chips, DataTable, DatePickerMonth, Datepicker, Field, Header, InputAddonLeft, InputAddonRight, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, NavigationBar, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, RadioComponent as Radio, RadioGroupComponent as RadioGroup, Rating, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Switch, Tab, TabList, TabPanel, TextareaField, Uploader, getTheme, theme, useAlertStyles, useFetcher, useInternalUI };
-//# sourceMappingURL=internal-ui.esm.js.map