@ctlyst.id/internal-ui 2.1.9 → 2.1.10

package/dist/internal-ui.esm.js

@@ -1,29 +1,50 @@
+import { useAccordionItemState } from '@chakra-ui/accordion';
+import { Box, forwardRef as forwardRef$1, useStyleConfig, 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, InputLeftAddon, InputRightAddon, defineStyle, InputGroup, Input as Input$1, Textarea as Textarea$1, HStack, IconButton, Flex, Spinner, Table, Thead, Tr, useColorModeValue, Th, Tbody, Td, InputRightElement, Modal, ModalOverlay, ModalContent, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, ModalFooter as ModalFooter$1, Image, useDisclosure, Popover as Popover$1, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, ModalCloseButton as ModalCloseButton$1, createIcon, Icon, Portal, Link as Link$1, VisuallyHidden, Select as Select$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Grid, useMultiStyleConfig as useMultiStyleConfig$1, omitThemingProps as omitThemingProps$1, useCheckbox, chakra as chakra$1, useTab, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, defineStyleConfig as defineStyleConfig$1, extendTheme } from '@chakra-ui/react';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AccordionProvider, AlertDialog, ModalBody as AlertDialogBody, ModalCloseButton as AlertDialogCloseButton, AlertDialogContent, ModalFooter as AlertDialogFooter, ModalHeader as AlertDialogHeader, ModalOverlay as AlertDialogOverlay, Avatar, AvatarBadge, AvatarGroup, 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, Fade, Flex, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, Hide, Icon, IconButton, Image, Img, 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, Show, SimpleGrid, Skeleton, Slide, SlideFade, Spacer, Stack, Step, StepDescription, StepIcon, StepIndicator, StepNumber, StepSeparator, StepStatus, StepTitle, Stepper, TabIndicator, TabList, TabPanel, TabPanels, Tabs, TabsDescendantsProvider, TabsProvider, Tbody, Td, Text, Th, Thead, Tooltip, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, extendTheme, forwardRef, useAccordion, useAccordionContext, useAccordionItem, useAccordionItemState, useAccordionStyles, useBoolean, useBreakpoint, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useConst, useControllableProp, useControllableState, useDimensions, useDisclosure, useDrawerContext, useImage, useMediaQuery, useMergeRefs, useModal, useModalContext, useModalStyles, useOutsideClick, usePrefersReducedMotion, useQuery, useSteps, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTabsStyles, useTheme, useToken } from '@chakra-ui/react';
+import React__default, { createElement, forwardRef as forwardRef$2, useMemo, useState, useEffect, useImperativeHandle, Fragment, useCallback, createContext as createContext$1, useContext, useRef } from 'react';
 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 { Link } from '@chakra-ui/layout';
+import { FiChevronLeft, FiChevronsRight, FiHome, FiMinus, FiPlus, FiCalendar, FiX, FiPower, FiMoon, FiSun, FiShoppingBag, FiShoppingCart, FiRepeat, FiBox, FiLayers, FiDollarSign, FiUsers, FiRotateCcw, FiSettings, FiLayout, FiGift, FiChevronDown } from 'react-icons/fi';
+export { CheckboxIcon, useCheckbox, useCheckboxGroup } from '@chakra-ui/checkbox';
 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';
+export { useRadio, useRadioGroup, useRadioGroupContext } from '@chakra-ui/radio';
 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 { accordionAnatomy, alertAnatomy, checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy, tableAnatomy, tabsAnatomy } 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-next-line import/prefer-default-export
+const AccordionIndicator = () => {
+  const {
+    isOpen
+  } = useAccordionItemState();
+  if (isOpen) {
+    return /*#__PURE__*/React__default.createElement(Box, {
+      position: "absolute",
+      left: 0,
+      width: "2px",
+      height: "100%",
+      bg: "primary.500"
+    });
+  }
+  return null;
+};
+
 /* eslint-disable react/require-default-props */
 function CheckIcon() {
   return /*#__PURE__*/React__default.createElement(CheckCircle, {
@@ -259,6 +280,37 @@ const AlertTitle = /*#__PURE__*/forwardRef(function AlertTitle(props, ref) {
 });
 AlertTitle.displayName = 'AlertTitle';
 
+const Anchor = ({
+  children,
+  leftIcon,
+  rightIcon,
+  isActive,
+  isChild,
+  ...props
+}) => {
+  return /*#__PURE__*/createElement(Link, Object.assign({
+    display: "inline-block",
+    w: "full",
+    p: "4",
+    pl: isChild ? '10' : '4',
+    borderLeft: "1px solid",
+    borderLeftColor: isActive ? 'primary.500' : 'neutral.400',
+    color: isActive ? 'primary.500' : 'black.high',
+    bg: isActive ? 'neutral.100' : 'white',
+    className: cx('catalyst-anchor', props.className),
+    _hover: {
+      textDecoration: 'none'
+    }
+  }, props), leftIcon && leftIcon, children, rightIcon && rightIcon);
+};
+Anchor.displayName = 'Anchor';
+Anchor.defaultProps = {
+  leftIcon: undefined,
+  rightIcon: undefined,
+  isActive: false,
+  isChild: false
+};
+
 const Badge = props => {
   const {
     children,
@@ -569,6 +621,262 @@ Chips.defaultProps = {
   size: 'sm'
 };
 
+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 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 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
+};
+
+/* eslint-disable react/require-default-props */
+const Counter = ({
+  value,
+  size = 'xs',
+  min = 0,
+  max = 9999,
+  onChange,
+  isError = false,
+  disabled = false,
+  error = '',
+  helperText = '',
+  isReadOnly = false
+}) => {
+  const getFieldSize = () => {
+    if (size === 'xl') return 'lg';
+    if (size === 'lg') return 'md';
+    if (size === 'md') return 'sm';
+    return 'xs';
+  };
+  const decrement = () => {
+    onChange(value - 1);
+  };
+  const increment = () => {
+    onChange(value + 1);
+  };
+  const handleChange = e => {
+    onChange(+e.target.value);
+  };
+  return /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(HStack, null, /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "minus",
+    "data-test-id": "CT_Component_Counter_decrement",
+    onClick: decrement,
+    isDisabled: disabled || +value <= min,
+    size: size,
+    icon: /*#__PURE__*/React__default.createElement(FiMinus, null)
+  }), /*#__PURE__*/React__default.createElement(InputField, {
+    "data-test-id": "CT_Component_Counter_input",
+    value: value,
+    isError: isError,
+    isDisabled: disabled || max === 0,
+    textAlign: "center",
+    size: getFieldSize(),
+    min: min,
+    max: max,
+    onChange: handleChange,
+    isReadOnly: isReadOnly,
+    width: 12,
+    type: "number"
+  }), /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "plus",
+    "data-test-id": "CT_Component_Counter_decrement",
+    onClick: increment,
+    isDisabled: disabled || +value >= max,
+    size: size,
+    icon: /*#__PURE__*/React__default.createElement(FiPlus, null)
+  })), !isError ? /*#__PURE__*/React__default.createElement(Text, {
+    mt: 1,
+    color: "black.medium"
+  }, helperText) : /*#__PURE__*/React__default.createElement(Text, {
+    mt: 1,
+    color: "danger.500"
+  }, error));
+};
+
 /* eslint-disable react-hooks/rules-of-hooks */
 const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
   const {
@@ -741,41 +1049,6 @@ DataTable.defaultProps = {
   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
@@ -1797,161 +2070,42 @@ MultiDatePickerMonth.defaultProps = {
   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
+const Dialog = ({
+  title,
+  content,
+  footer,
+  isModalOverlay,
+  width,
+  isOverlayClickable,
+  ...props
 }) => {
-  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
+  return /*#__PURE__*/React__default.createElement(Modal, Object.assign({}, props), isModalOverlay && /*#__PURE__*/React__default.createElement(ModalOverlay, {
+    pointerEvents: isOverlayClickable ? 'auto' : 'none'
+  }), /*#__PURE__*/React__default.createElement(ModalContent, {
+    bgColor: "neutral.50",
+    fontFamily: "Poppins",
+    width: width
+  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, {
+    bgColor: "neutral.200",
+    py: 2,
+    px: 4,
+    borderTopRadius: 'sm'
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    textStyle: "text.lg",
+    fontWeight: "normal"
+  }, title)), /*#__PURE__*/React__default.createElement(ModalBody$1, {
+    p: 4,
+    textStyle: "text.md"
+  }, content), /*#__PURE__*/React__default.createElement(ModalFooter$1, {
+    bgColor: "neutral.200",
+    p: 4,
+    borderBottomRadius: 'sm'
+  }, footer)));
 };
-
-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
+Dialog.defaultProps = {
+  isModalOverlay: true,
+  width: '400px',
+  isOverlayClickable: true
 };
 
 const Logo = ({
@@ -2040,12 +2194,16 @@ const Profile = ({
     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
+    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,
+    border: "2px solid",
+    _hover: {
+      borderColor: 'primary.50'
+    }
   })))), /*#__PURE__*/createElement(PopoverContent, {
-    bg: useColorModeValue('white', 'mirage.900'),
+    bg: "white",
     maxW: 200
   }, /*#__PURE__*/createElement(PopoverArrow, {
-    bg: useColorModeValue('white', 'mirage.900')
+    bg: "white"
   }), /*#__PURE__*/createElement(PopoverBody, {
     p: 1
   }, /*#__PURE__*/createElement(Flex, {
@@ -2108,6 +2266,7 @@ const Version = ({
   environment,
   onOpenModalRelease
 }) => /*#__PURE__*/createElement(Fragment, null, version && /*#__PURE__*/createElement(Badge, {
+  fontSize: "8px",
   "data-test-id": "dzl3esjhCphobaaIXpiUE",
   variant: "neutral-light",
   onClick: onOpenModalRelease,
@@ -2142,11 +2301,11 @@ const Header = ({
   urlLogo,
   children,
   profile,
+  bg = 'white',
   ...props
 }) => /*#__PURE__*/createElement(Flex, Object.assign({
   minH: 15,
-  bg: props.bg,
-  bgColor: props.bgColor,
+  bg: bg,
   shadow: "raised",
   px: 6,
   py: 3,
@@ -2331,7 +2490,7 @@ const Navigation = ({
       const link = navHost ? `${navHost}${navLink}` : navLink;
       const isLocalLink = host === navHost;
       const isActiveSub = activePath === navLink;
-      return /*#__PURE__*/createElement(Link, {
+      return /*#__PURE__*/createElement(Link$1, {
         as: isLocalLink ? as : undefined,
         key: title,
         href: link,
@@ -2448,7 +2607,7 @@ const NavigationBar = ({
       shadow: "raised",
       py: 1,
       width: 240
-    }, item.children.map(subMenu => /*#__PURE__*/React__default.createElement(Link, {
+    }, item.children.map(subMenu => /*#__PURE__*/React__default.createElement(Link$1, {
       key: subMenu.id,
       href: urlMenu(subMenu),
       display: "flex",
@@ -2700,18 +2859,18 @@ PaginationFilter.defaultProps = {
   label: undefined
 };
 
-function RadioComponent({
+const Radio = ({
   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({
+  }, /*#__PURE__*/React__default.createElement(Radio$2, Object.assign({
     variant: variant
   }, rest, {
     isDisabled: isDisabled
@@ -2734,35 +2893,36 @@ function RadioComponent({
     textStyle: "text.xs",
     color: "black.medium"
   }, helpText)));
-}
-RadioComponent.defaultProps = {
+};
+Radio.displayName = 'Radio';
+Radio.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, {
+const RadioGroup = ({
+  children,
+  label,
+  helpText,
+  isError,
+  errorMessage,
+  ...props
+}) => {
+  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, props, {
     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, {
+  }, /*#__PURE__*/React__default.createElement(RadioGroup$1, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Stack, {
     spacing: [1, '16px'],
     direction: ['column', 'row']
   }, children))));
-}
-RadioGroupComponent.defaultProps = {
+};
+RadioGroup.displayName = 'RadioGroup';
+RadioGroup.defaultProps = {
   helpText: '',
   isError: false,
   errorMessage: ''
@@ -3274,7 +3434,6 @@ const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
     _selected: {
       borderColor: 'primary.500',
       color: 'primary.500',
-      transform: 'translateY(-2px)',
       _hover: {
         '& .chakra-badge': {
           bg: 'primary.500'
@@ -3302,19 +3461,6 @@ const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
   })));
 });
 
-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)`,
@@ -4405,7 +4551,7 @@ const variants$3 = {
   errors: errors$1,
   unstyled: unstyled$2
 };
-const Radio = /*#__PURE__*/defineMultiStyleConfig$4({
+const Radio$1 = /*#__PURE__*/defineMultiStyleConfig$4({
   baseStyle: baseStyle$5,
   variants: variants$3,
   defaultProps: {
@@ -4692,6 +4838,42 @@ const tableTheme = /*#__PURE__*/defineMultiStyleConfig$6({
   }
 });
 
+const {
+  defineMultiStyleConfig: defineMultiStyleConfig$7,
+  definePartsStyle: definePartsStyle$8
+} = /*#__PURE__*/createMultiStyleConfigHelpers(tabsAnatomy.keys);
+const variantLine = /*#__PURE__*/definePartsStyle$8(props => {
+  const {
+    orientation
+  } = props;
+  const isVertical = orientation === 'vertical';
+  const borderProp = isVertical ? 'borderStart' : 'borderBottom';
+  const marginProp = isVertical ? 'marginStart' : 'marginBottom';
+  return {
+    tablist: {
+      [borderProp]: '1px solid',
+      borderColor: 'inherit'
+    },
+    tab: {
+      [borderProp]: '1px solid',
+      borderColor: 'transparent',
+      [marginProp]: '-1px'
+    }
+  };
+});
+const variantUnstyled = /*#__PURE__*/definePartsStyle$8({});
+const variants$5 = {
+  line: variantLine,
+  unstyled: variantUnstyled
+};
+const tabsTheme = /*#__PURE__*/defineMultiStyleConfig$7({
+  variants: variants$5,
+  defaultProps: {
+    size: 'md',
+    variant: 'line'
+  }
+});
+
 const getProps = props => {
   const {
     isError,
@@ -4786,9 +4968,10 @@ var components = {
   Input: Input,
   LoaderStyle: LoaderStyle,
   Popover: Popover,
-  Radio: Radio,
+  Radio: Radio$1,
   Switch: Switch$1,
   Table: tableTheme,
+  Tabs: tabsTheme,
   Textarea: Textarea
 };
 
@@ -4895,5 +5078,5 @@ function useFetcher() {
   };
 }
 
-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 };
+export { AccordionIndicator, Alert, AlertAction, AlertClose, AlertDescription, AlertIcon, AlertTitle, Anchor, Badge, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Chips, Counter, DataTable, DatePickerMonth, Datepicker, Dialog, Field, Header, InputAddonLeft, InputAddonRight, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, NavigationBar, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, Radio, RadioGroup, Rating, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Switch, Tab, TextareaField, Uploader, getTheme, theme, useAlertStyles, useFetcher, useInternalUI };
 //# sourceMappingURL=internal-ui.esm.js.map