@ctlyst.id/internal-ui 2.1.8 → 2.1.10

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

@@ -4,21 +4,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var sharedUtils = require('@chakra-ui/shared-utils');
-var system = require('@chakra-ui/system');
+var accordion = require('@chakra-ui/accordion');
+var react = require('@chakra-ui/react');
 var React = require('react');
 var React__default = _interopDefault(React);
+var sharedUtils = require('@chakra-ui/shared-utils');
+var system = require('@chakra-ui/system');
 var reactContext = require('@chakra-ui/react-context');
 var Icon = require('@ctlyst.id/internal-icon');
 var utils = require('@chakra-ui/utils');
-var react = require('@chakra-ui/react');
+var layout = require('@chakra-ui/layout');
 var fi = require('react-icons/fi');
+var checkbox = require('@chakra-ui/checkbox');
 var icons = require('@chakra-ui/icons');
 var react$1 = require('@emotion/react');
 var reactTable = require('@tanstack/react-table');
 var classnames = _interopDefault(require('classnames'));
 var ReactDatePicker = _interopDefault(require('react-datepicker'));
 var styled = _interopDefault(require('@emotion/styled'));
+var radio = require('@chakra-ui/radio');
 var ReactSelect = _interopDefault(require('react-select'));
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
 var ReactSelectAsyncCreatable = _interopDefault(require('react-select/async-creatable'));
@@ -30,6 +34,23 @@ var themeTools = require('@chakra-ui/theme-tools');
 var axios = _interopDefault(require('axios'));
 var reactToastify = require('react-toastify');
 
+// eslint-disable-next-line import/prefer-default-export
+const AccordionIndicator = () => {
+  const {
+    isOpen
+  } = accordion.useAccordionItemState();
+  if (isOpen) {
+    return /*#__PURE__*/React__default.createElement(react.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(Icon.CheckCircle, {
@@ -265,6 +286,37 @@ const AlertTitle = /*#__PURE__*/system.forwardRef(function AlertTitle(props, ref
 });
 AlertTitle.displayName = 'AlertTitle';
 
+const Anchor = ({
+  children,
+  leftIcon,
+  rightIcon,
+  isActive,
+  isChild,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(layout.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: sharedUtils.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,
@@ -575,6 +627,262 @@ Chips.defaultProps = {
   size: 'sm'
 };
 
+const InputAddonLeft = ({
+  children
+}) => {
+  return /*#__PURE__*/React__default.createElement(react.InputLeftAddon, {
+    backgroundColor: "neutral.200",
+    px: 3,
+    py: 2.5,
+    style: {
+      border: 0,
+      marginInlineEnd: 0
+    }
+  }, children);
+};
+const InputAddonRight = ({
+  children
+}) => {
+  return /*#__PURE__*/React__default.createElement(react.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 react.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] = React.useState(false);
+  const inputType = React.useMemo(() => {
+    return type === 'password' && isShowPassword ? 'text' : type;
+  }, [isShowPassword, type]);
+  const fontSize = React.useMemo(() => {
+    if (type === 'password') {
+      if (!isShowPassword && value) return 'text.xl';
+    }
+    return 'text.sm';
+  }, [isShowPassword, type, value]);
+  const iconColor = React.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(react.Box, {
+    __css: wrapperStyle
+  }, /*#__PURE__*/React__default.createElement(react.InputGroup, {
+    size: size,
+    borderRadius: "sm",
+    backgroundColor: isDisabled ? 'neutral.300' : 'white.high',
+    cursor: isDisabled ? 'not-allowed' : 'default'
+  }, addOnLeft, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
+    ref: ref,
+    type: inputType,
+    value: value,
+    isDisabled: isDisabled,
+    isSuccess: isSuccess
+  }, inputProps, {
+    fontSize: fontSize
+  })), (withClear || isLoading || type === 'password') && /*#__PURE__*/React__default.createElement(react.Box, {
+    "data-test-id": "CT_Component_ClearInput",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    mr: "10px"
+  }, withClear && !isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
+    display: "flex",
+    justifyContent: "center",
+    onClick: !isDisabled ? onClear : undefined,
+    cursor: isDisabled ? 'not-allowed' : 'pointer'
+  }, /*#__PURE__*/React__default.createElement(Icon.Close, {
+    size: 4,
+    color: iconColor
+  })), type === 'password' && !isShowPassword && !isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
+    "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
+    onClick: () => {
+      if (!isDisabled) setIsShowPassword(true);
+    },
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    display: "flex",
+    justifyContent: "center"
+  }, /*#__PURE__*/React__default.createElement(Icon.EyeOff, {
+    size: 4,
+    color: iconColor
+  })), type === 'password' && isShowPassword && !isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
+    "data-test-id": "sfc2388bmeXBmdla45Ibk",
+    onClick: () => {
+      if (!isDisabled) setIsShowPassword(false);
+    },
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    display: "flex",
+    justifyContent: "center"
+  }, /*#__PURE__*/React__default.createElement(Icon.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(react.Box, {
+    position: "relative"
+  }, /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
+    ref: ref,
+    value: value
+  }, inputProps)), isLoading && /*#__PURE__*/React__default.createElement(react.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(react.Box, null, /*#__PURE__*/React__default.createElement(react.HStack, null, /*#__PURE__*/React__default.createElement(react.IconButton, {
+    "aria-label": "minus",
+    "data-test-id": "CT_Component_Counter_decrement",
+    onClick: decrement,
+    isDisabled: disabled || +value <= min,
+    size: size,
+    icon: /*#__PURE__*/React__default.createElement(fi.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(react.IconButton, {
+    "aria-label": "plus",
+    "data-test-id": "CT_Component_Counter_decrement",
+    onClick: increment,
+    isDisabled: disabled || +value >= max,
+    size: size,
+    icon: /*#__PURE__*/React__default.createElement(fi.FiPlus, null)
+  })), !isError ? /*#__PURE__*/React__default.createElement(react.Text, {
+    mt: 1,
+    color: "black.medium"
+  }, helperText) : /*#__PURE__*/React__default.createElement(react.Text, {
+    mt: 1,
+    color: "danger.500"
+  }, error));
+};
+
 /* eslint-disable react-hooks/rules-of-hooks */
 const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -747,41 +1055,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 react.defineStyle(style);
-};
-
 const Styles = () => {
   const {
     colorMode
@@ -1803,161 +2076,42 @@ MultiDatePickerMonth.defaultProps = {
   isError: false
 };
 
-const InputAddonLeft = ({
-  children
-}) => {
-  return /*#__PURE__*/React__default.createElement(react.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(react.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] = React.useState(false);
-  const inputType = React.useMemo(() => {
-    return type === 'password' && isShowPassword ? 'text' : type;
-  }, [isShowPassword, type]);
-  const fontSize = React.useMemo(() => {
-    if (type === 'password') {
-      if (!isShowPassword && value) return 'text.xl';
-    }
-    return 'text.sm';
-  }, [isShowPassword, type, value]);
-  const iconColor = React.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(react.Box, {
-    __css: wrapperStyle
-  }, /*#__PURE__*/React__default.createElement(react.InputGroup, {
-    size: size,
-    borderRadius: "sm",
-    backgroundColor: isDisabled ? 'neutral.300' : 'white.high',
-    cursor: isDisabled ? 'not-allowed' : 'default'
-  }, addOnLeft, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
-    ref: ref,
-    type: inputType,
-    value: value,
-    isDisabled: isDisabled,
-    isSuccess: isSuccess
-  }, inputProps, {
-    fontSize: fontSize
-  })), (withClear || isLoading || type === 'password') && /*#__PURE__*/React__default.createElement(react.Box, {
-    "data-test-id": "CT_Component_ClearInput",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "16px",
-    mr: "10px"
-  }, withClear && !isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
-    display: "flex",
-    justifyContent: "center",
-    onClick: !isDisabled ? onClear : undefined,
-    cursor: isDisabled ? 'not-allowed' : 'pointer'
-  }, /*#__PURE__*/React__default.createElement(Icon.Close, {
-    size: 4,
-    color: iconColor
-  })), type === 'password' && !isShowPassword && !isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
-    "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
-    onClick: () => {
-      if (!isDisabled) setIsShowPassword(true);
-    },
-    cursor: isDisabled ? 'not-allowed' : 'pointer',
-    display: "flex",
-    justifyContent: "center"
-  }, /*#__PURE__*/React__default.createElement(Icon.EyeOff, {
-    size: 4,
-    color: iconColor
-  })), type === 'password' && isShowPassword && !isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
-    "data-test-id": "sfc2388bmeXBmdla45Ibk",
-    onClick: () => {
-      if (!isDisabled) setIsShowPassword(false);
-    },
-    cursor: isDisabled ? 'not-allowed' : 'pointer',
-    display: "flex",
-    justifyContent: "center"
-  }, /*#__PURE__*/React__default.createElement(Icon.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(react.Modal, Object.assign({}, props), isModalOverlay && /*#__PURE__*/React__default.createElement(react.ModalOverlay, {
+    pointerEvents: isOverlayClickable ? 'auto' : 'none'
+  }), /*#__PURE__*/React__default.createElement(react.ModalContent, {
+    bgColor: "neutral.50",
+    fontFamily: "Poppins",
+    width: width
+  }, /*#__PURE__*/React__default.createElement(react.ModalHeader, {
+    bgColor: "neutral.200",
+    py: 2,
+    px: 4,
+    borderTopRadius: 'sm'
+  }, /*#__PURE__*/React__default.createElement(react.Text, {
+    textStyle: "text.lg",
+    fontWeight: "normal"
+  }, title)), /*#__PURE__*/React__default.createElement(react.ModalBody, {
+    p: 4,
+    textStyle: "text.md"
+  }, content), /*#__PURE__*/React__default.createElement(react.ModalFooter, {
+    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(react.Box, {
-    position: "relative"
-  }, /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
-    ref: ref,
-    value: value
-  }, inputProps)), isLoading && /*#__PURE__*/React__default.createElement(react.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 = ({
@@ -2046,12 +2200,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__*/React.createElement(react.PopoverContent, {
-    bg: react.useColorModeValue('white', 'mirage.900'),
+    bg: "white",
     maxW: 200
   }, /*#__PURE__*/React.createElement(react.PopoverArrow, {
-    bg: react.useColorModeValue('white', 'mirage.900')
+    bg: "white"
   }), /*#__PURE__*/React.createElement(react.PopoverBody, {
     p: 1
   }, /*#__PURE__*/React.createElement(react.Flex, {
@@ -2114,6 +2272,7 @@ const Version = ({
   environment,
   onOpenModalRelease
 }) => /*#__PURE__*/React.createElement(React.Fragment, null, version && /*#__PURE__*/React.createElement(Badge, {
+  fontSize: "8px",
   "data-test-id": "dzl3esjhCphobaaIXpiUE",
   variant: "neutral-light",
   onClick: onOpenModalRelease,
@@ -2148,11 +2307,11 @@ const Header = ({
   urlLogo,
   children,
   profile,
+  bg = 'white',
   ...props
 }) => /*#__PURE__*/React.createElement(react.Flex, Object.assign({
   minH: 15,
-  bg: props.bg,
-  bgColor: props.bgColor,
+  bg: bg,
   shadow: "raised",
   px: 6,
   py: 3,
@@ -2706,14 +2865,14 @@ 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(react.Box, null, /*#__PURE__*/React__default.createElement(react.Box, {
     display: "flex"
@@ -2740,35 +2899,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(react.Box, {
     mt: "12px"
-  }, /*#__PURE__*/React__default.createElement(react.RadioGroup, Object.assign({}, rest), /*#__PURE__*/React__default.createElement(react.Stack, {
+  }, /*#__PURE__*/React__default.createElement(react.RadioGroup, Object.assign({}, props), /*#__PURE__*/React__default.createElement(react.Stack, {
     spacing: [1, '16px'],
     direction: ['column', 'row']
   }, children))));
-}
-RadioGroupComponent.defaultProps = {
+};
+RadioGroup.displayName = 'RadioGroup';
+RadioGroup.defaultProps = {
   helpText: '',
   isError: false,
   errorMessage: ''
@@ -3280,7 +3440,6 @@ const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
     _selected: {
       borderColor: 'primary.500',
       color: 'primary.500',
-      transform: 'translateY(-2px)',
       _hover: {
         '& .chakra-badge': {
           bg: 'primary.500'
@@ -3308,19 +3467,6 @@ const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
   })));
 });
 
-const TabList = /*#__PURE__*/react.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(react.TabList, Object.assign({
-  borderBottom: "1px solid",
-  borderColor: react.useColorModeValue('gray.200', 'bright-gray.800')
-}, props, {
-  ref: ref
-}), props.children));
-
-const TabPanel = /*#__PURE__*/react.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(react.TabPanel, Object.assign({
-  px: 0
-}, props, {
-  ref: ref
-}), props.children));
-
 const messages = {
   dragActive: 'Drop file disini...',
   dragInActive: `(Klik atau drag untuk input file)`,
@@ -4411,7 +4557,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: {
@@ -4698,6 +4844,42 @@ const tableTheme = /*#__PURE__*/defineMultiStyleConfig$6({
   }
 });
 
+const {
+  defineMultiStyleConfig: defineMultiStyleConfig$7,
+  definePartsStyle: definePartsStyle$8
+} = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.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,
@@ -4792,9 +4974,10 @@ var components = {
   Input: Input,
   LoaderStyle: LoaderStyle,
   Popover: Popover,
-  Radio: Radio,
+  Radio: Radio$1,
   Switch: Switch$1,
   Table: tableTheme,
+  Tabs: tabsTheme,
   Textarea: Textarea
 };
 
@@ -4808,6 +4991,14 @@ const getTheme = foundations => {
     components: {
       ...components
     },
+    styles: {
+      global: {
+        body: {
+          fontSize: 'text.sm',
+          color: 'black.high'
+        }
+      }
+    },
     config
   });
 };
@@ -4893,6 +5084,42 @@ function useFetcher() {
   };
 }
 
+Object.defineProperty(exports, 'Accordion', {
+  enumerable: true,
+  get: function () {
+    return react.Accordion;
+  }
+});
+Object.defineProperty(exports, 'AccordionButton', {
+  enumerable: true,
+  get: function () {
+    return react.AccordionButton;
+  }
+});
+Object.defineProperty(exports, 'AccordionIcon', {
+  enumerable: true,
+  get: function () {
+    return react.AccordionIcon;
+  }
+});
+Object.defineProperty(exports, 'AccordionItem', {
+  enumerable: true,
+  get: function () {
+    return react.AccordionItem;
+  }
+});
+Object.defineProperty(exports, 'AccordionPanel', {
+  enumerable: true,
+  get: function () {
+    return react.AccordionPanel;
+  }
+});
+Object.defineProperty(exports, 'AccordionProvider', {
+  enumerable: true,
+  get: function () {
+    return react.AccordionProvider;
+  }
+});
 Object.defineProperty(exports, 'AlertDialog', {
   enumerable: true,
   get: function () {
@@ -4935,6 +5162,24 @@ Object.defineProperty(exports, 'AlertDialogOverlay', {
     return react.ModalOverlay;
   }
 });
+Object.defineProperty(exports, 'Avatar', {
+  enumerable: true,
+  get: function () {
+    return react.Avatar;
+  }
+});
+Object.defineProperty(exports, 'AvatarBadge', {
+  enumerable: true,
+  get: function () {
+    return react.AvatarBadge;
+  }
+});
+Object.defineProperty(exports, 'AvatarGroup', {
+  enumerable: true,
+  get: function () {
+    return react.AvatarGroup;
+  }
+});
 Object.defineProperty(exports, 'Box', {
   enumerable: true,
   get: function () {
@@ -5043,6 +5288,12 @@ Object.defineProperty(exports, 'DrawerOverlay', {
     return react.ModalOverlay;
   }
 });
+Object.defineProperty(exports, 'Fade', {
+  enumerable: true,
+  get: function () {
+    return react.Fade;
+  }
+});
 Object.defineProperty(exports, 'Flex', {
   enumerable: true,
   get: function () {
@@ -5097,6 +5348,12 @@ Object.defineProperty(exports, 'Heading', {
     return react.Heading;
   }
 });
+Object.defineProperty(exports, 'Hide', {
+  enumerable: true,
+  get: function () {
+    return react.Hide;
+  }
+});
 Object.defineProperty(exports, 'Icon', {
   enumerable: true,
   get: function () {
@@ -5115,6 +5372,12 @@ Object.defineProperty(exports, 'Image', {
     return react.Image;
   }
 });
+Object.defineProperty(exports, 'Img', {
+  enumerable: true,
+  get: function () {
+    return react.Img;
+  }
+});
 Object.defineProperty(exports, 'InputElementLeft', {
   enumerable: true,
   get: function () {
@@ -5289,6 +5552,12 @@ Object.defineProperty(exports, 'ScaleFade', {
     return react.ScaleFade;
   }
 });
+Object.defineProperty(exports, 'Show', {
+  enumerable: true,
+  get: function () {
+    return react.Show;
+  }
+});
 Object.defineProperty(exports, 'SimpleGrid', {
   enumerable: true,
   get: function () {
@@ -5301,6 +5570,18 @@ Object.defineProperty(exports, 'Skeleton', {
     return react.Skeleton;
   }
 });
+Object.defineProperty(exports, 'Slide', {
+  enumerable: true,
+  get: function () {
+    return react.Slide;
+  }
+});
+Object.defineProperty(exports, 'SlideFade', {
+  enumerable: true,
+  get: function () {
+    return react.SlideFade;
+  }
+});
 Object.defineProperty(exports, 'Spacer', {
   enumerable: true,
   get: function () {
@@ -5313,12 +5594,78 @@ Object.defineProperty(exports, 'Stack', {
     return react.Stack;
   }
 });
+Object.defineProperty(exports, 'Step', {
+  enumerable: true,
+  get: function () {
+    return react.Step;
+  }
+});
+Object.defineProperty(exports, 'StepDescription', {
+  enumerable: true,
+  get: function () {
+    return react.StepDescription;
+  }
+});
+Object.defineProperty(exports, 'StepIcon', {
+  enumerable: true,
+  get: function () {
+    return react.StepIcon;
+  }
+});
+Object.defineProperty(exports, 'StepIndicator', {
+  enumerable: true,
+  get: function () {
+    return react.StepIndicator;
+  }
+});
+Object.defineProperty(exports, 'StepNumber', {
+  enumerable: true,
+  get: function () {
+    return react.StepNumber;
+  }
+});
+Object.defineProperty(exports, 'StepSeparator', {
+  enumerable: true,
+  get: function () {
+    return react.StepSeparator;
+  }
+});
+Object.defineProperty(exports, 'StepStatus', {
+  enumerable: true,
+  get: function () {
+    return react.StepStatus;
+  }
+});
+Object.defineProperty(exports, 'StepTitle', {
+  enumerable: true,
+  get: function () {
+    return react.StepTitle;
+  }
+});
+Object.defineProperty(exports, 'Stepper', {
+  enumerable: true,
+  get: function () {
+    return react.Stepper;
+  }
+});
 Object.defineProperty(exports, 'TabIndicator', {
   enumerable: true,
   get: function () {
     return react.TabIndicator;
   }
 });
+Object.defineProperty(exports, 'TabList', {
+  enumerable: true,
+  get: function () {
+    return react.TabList;
+  }
+});
+Object.defineProperty(exports, 'TabPanel', {
+  enumerable: true,
+  get: function () {
+    return react.TabPanel;
+  }
+});
 Object.defineProperty(exports, 'TabPanels', {
   enumerable: true,
   get: function () {
@@ -5397,6 +5744,18 @@ Object.defineProperty(exports, 'VStack', {
     return react.VStack;
   }
 });
+Object.defineProperty(exports, 'VisuallyHidden', {
+  enumerable: true,
+  get: function () {
+    return react.VisuallyHidden;
+  }
+});
+Object.defineProperty(exports, 'VisuallyHiddenInput', {
+  enumerable: true,
+  get: function () {
+    return react.VisuallyHiddenInput;
+  }
+});
 Object.defineProperty(exports, 'Wrap', {
   enumerable: true,
   get: function () {
@@ -5421,24 +5780,102 @@ Object.defineProperty(exports, 'forwardRef', {
     return react.forwardRef;
   }
 });
+Object.defineProperty(exports, 'useAccordion', {
+  enumerable: true,
+  get: function () {
+    return react.useAccordion;
+  }
+});
+Object.defineProperty(exports, 'useAccordionContext', {
+  enumerable: true,
+  get: function () {
+    return react.useAccordionContext;
+  }
+});
+Object.defineProperty(exports, 'useAccordionItem', {
+  enumerable: true,
+  get: function () {
+    return react.useAccordionItem;
+  }
+});
+Object.defineProperty(exports, 'useAccordionItemState', {
+  enumerable: true,
+  get: function () {
+    return react.useAccordionItemState;
+  }
+});
+Object.defineProperty(exports, 'useAccordionStyles', {
+  enumerable: true,
+  get: function () {
+    return react.useAccordionStyles;
+  }
+});
 Object.defineProperty(exports, 'useBoolean', {
   enumerable: true,
   get: function () {
     return react.useBoolean;
   }
 });
+Object.defineProperty(exports, 'useBreakpoint', {
+  enumerable: true,
+  get: function () {
+    return react.useBreakpoint;
+  }
+});
+Object.defineProperty(exports, 'useBreakpointValue', {
+  enumerable: true,
+  get: function () {
+    return react.useBreakpointValue;
+  }
+});
+Object.defineProperty(exports, 'useClipboard', {
+  enumerable: true,
+  get: function () {
+    return react.useClipboard;
+  }
+});
 Object.defineProperty(exports, 'useColorMode', {
   enumerable: true,
   get: function () {
     return react.useColorMode;
   }
 });
+Object.defineProperty(exports, 'useColorModePreference', {
+  enumerable: true,
+  get: function () {
+    return react.useColorModePreference;
+  }
+});
 Object.defineProperty(exports, 'useColorModeValue', {
   enumerable: true,
   get: function () {
     return react.useColorModeValue;
   }
 });
+Object.defineProperty(exports, 'useConst', {
+  enumerable: true,
+  get: function () {
+    return react.useConst;
+  }
+});
+Object.defineProperty(exports, 'useControllableProp', {
+  enumerable: true,
+  get: function () {
+    return react.useControllableProp;
+  }
+});
+Object.defineProperty(exports, 'useControllableState', {
+  enumerable: true,
+  get: function () {
+    return react.useControllableState;
+  }
+});
+Object.defineProperty(exports, 'useDimensions', {
+  enumerable: true,
+  get: function () {
+    return react.useDimensions;
+  }
+});
 Object.defineProperty(exports, 'useDisclosure', {
   enumerable: true,
   get: function () {
@@ -5451,6 +5888,24 @@ Object.defineProperty(exports, 'useDrawerContext', {
     return react.useDrawerContext;
   }
 });
+Object.defineProperty(exports, 'useImage', {
+  enumerable: true,
+  get: function () {
+    return react.useImage;
+  }
+});
+Object.defineProperty(exports, 'useMediaQuery', {
+  enumerable: true,
+  get: function () {
+    return react.useMediaQuery;
+  }
+});
+Object.defineProperty(exports, 'useMergeRefs', {
+  enumerable: true,
+  get: function () {
+    return react.useMergeRefs;
+  }
+});
 Object.defineProperty(exports, 'useModal', {
   enumerable: true,
   get: function () {
@@ -5469,6 +5924,30 @@ Object.defineProperty(exports, 'useModalStyles', {
     return react.useModalStyles;
   }
 });
+Object.defineProperty(exports, 'useOutsideClick', {
+  enumerable: true,
+  get: function () {
+    return react.useOutsideClick;
+  }
+});
+Object.defineProperty(exports, 'usePrefersReducedMotion', {
+  enumerable: true,
+  get: function () {
+    return react.usePrefersReducedMotion;
+  }
+});
+Object.defineProperty(exports, 'useQuery', {
+  enumerable: true,
+  get: function () {
+    return react.useQuery;
+  }
+});
+Object.defineProperty(exports, 'useSteps', {
+  enumerable: true,
+  get: function () {
+    return react.useSteps;
+  }
+});
 Object.defineProperty(exports, 'useTab', {
   enumerable: true,
   get: function () {
@@ -5535,18 +6014,62 @@ Object.defineProperty(exports, 'useTabsStyles', {
     return react.useTabsStyles;
   }
 });
+Object.defineProperty(exports, 'useTheme', {
+  enumerable: true,
+  get: function () {
+    return react.useTheme;
+  }
+});
 Object.defineProperty(exports, 'useToken', {
   enumerable: true,
   get: function () {
     return react.useToken;
   }
 });
+Object.defineProperty(exports, 'CheckboxIcon', {
+  enumerable: true,
+  get: function () {
+    return checkbox.CheckboxIcon;
+  }
+});
+Object.defineProperty(exports, 'useCheckbox', {
+  enumerable: true,
+  get: function () {
+    return checkbox.useCheckbox;
+  }
+});
+Object.defineProperty(exports, 'useCheckboxGroup', {
+  enumerable: true,
+  get: function () {
+    return checkbox.useCheckboxGroup;
+  }
+});
+Object.defineProperty(exports, 'useRadio', {
+  enumerable: true,
+  get: function () {
+    return radio.useRadio;
+  }
+});
+Object.defineProperty(exports, 'useRadioGroup', {
+  enumerable: true,
+  get: function () {
+    return radio.useRadioGroup;
+  }
+});
+Object.defineProperty(exports, 'useRadioGroupContext', {
+  enumerable: true,
+  get: function () {
+    return radio.useRadioGroupContext;
+  }
+});
+exports.AccordionIndicator = AccordionIndicator;
 exports.Alert = Alert;
 exports.AlertAction = AlertAction;
 exports.AlertClose = AlertClose;
 exports.AlertDescription = AlertDescription;
 exports.AlertIcon = AlertIcon;
 exports.AlertTitle = AlertTitle;
+exports.Anchor = Anchor;
 exports.Badge = Badge;
 exports.BreadCrumb = BreadCrumb;
 exports.Button = Button;
@@ -5554,9 +6077,11 @@ exports.Card = CardCustom;
 exports.Checkbox = CheckboxComponent;
 exports.CheckboxGroup = CheckboxGroupComponent;
 exports.Chips = Chips;
+exports.Counter = Counter;
 exports.DataTable = DataTable;
 exports.DatePickerMonth = DatePickerMonth;
 exports.Datepicker = Datepicker;
+exports.Dialog = Dialog;
 exports.Field = Field;
 exports.Header = Header;
 exports.InputAddonLeft = InputAddonLeft;
@@ -5575,8 +6100,8 @@ exports.PaginationDetail = PaginationDetail;
 exports.PaginationFilter = PaginationFilter;
 exports.Provider = Provider;
 exports.ProviderContext = ProviderContext;
-exports.Radio = RadioComponent;
-exports.RadioGroup = RadioGroupComponent;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
 exports.Rating = Rating;
 exports.Select = Select;
 exports.SelectAsync = SelectAsync;
@@ -5584,8 +6109,6 @@ exports.SelectAsyncCreatable = SelectAsyncCreatable;
 exports.SelectCreatable = SelectCreatable;
 exports.Switch = Switch;
 exports.Tab = Tab;
-exports.TabList = TabList;
-exports.TabPanel = TabPanel;
 exports.TextareaField = TextareaField;
 exports.Uploader = Uploader;
 exports.getTheme = getTheme;