@ctlyst.id/internal-ui 1.1.0-canary.0 → 1.1.0-canary.1

package/dist/internal-ui.esm.js

@@ -1,6 +1,6 @@
-import { useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, useStyleConfig, Card, Checkbox as Checkbox$1, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, InputGroup, Input as Input$1, InputRightAddon, FormControl, FormLabel as FormLabel$1, InputRightElement, FormHelperText, FormErrorMessage, theme as theme$1, InputLeftAddon, InputLeftElement, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Badge, forwardRef as forwardRef$1, ModalBody as ModalBody$1, ModalCloseButton as ModalCloseButton$1, ModalFooter as ModalFooter$1, ModalHeader as ModalHeader$1, createIcon, Icon, Portal, Link, Button as Button$1, VisuallyHidden, Select as Select$1, useTab, useMultiStyleConfig, TabList as TabList$1, TabPanel as TabPanel$1, Stack, Heading, createMultiStyleConfigHelpers, extendTheme } from '@chakra-ui/react';
+import { useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, forwardRef, useStyleConfig, Button as Button$2, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, InputGroup, Input as Input$1, InputRightAddon, InputRightElement, theme as theme$1, defineStyle, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Badge, Container, Grid, Wrap, 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, useMultiStyleConfig, omitThemingProps, useCheckbox, chakra, 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, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, DrawerContent, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, Modal, ModalContent, ModalContextProvider, ModalFocusScope, ModalOverlay, TabIndicator, TabPanels, Tabs, TabsDescendantsProvider, TabsProvider, useDrawerContext, useModal, useModalContext, useModalStyles, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTabsStyles } from '@chakra-ui/react';
-import React__default, { createElement, forwardRef, useRef, useEffect, useState, useMemo, Fragment, useCallback, createContext, useContext } from 'react';
+import React__default, { createElement, forwardRef as forwardRef$1, useRef, useEffect, useState, useMemo, Fragment, useCallback, createContext, useContext } from 'react';
 import { 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';
@@ -9,15 +9,16 @@ import classnames from 'classnames';
 import ReactDatePicker from 'react-datepicker';
 import { useColorMode } from '@chakra-ui/system';
 import styled from '@emotion/styled';
+import { Close, EyeOff, Eye, Check } from '@ctlyst.id/internal-icon';
 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 { cx, dataAttr } from '@chakra-ui/shared-utils';
 import { useDropzone } from 'react-dropzone';
-import { mode, getColor } from '@chakra-ui/theme-tools';
-import { defineStyleConfig, defineStyle, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1 } from '@chakra-ui/styled-system';
-import { checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy } from '@chakra-ui/anatomy';
-import '@fontsource/poppins';
+import { alertAnatomy, checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers, cssVar, defineStyleConfig, defineStyle as defineStyle$1 } from '@chakra-ui/styled-system';
+import { transparentize, mode, calc, cssVar as cssVar$1 } from '@chakra-ui/theme-tools';
 import axios from 'axios';
 
 /* eslint-disable react-hooks/rules-of-hooks */
@@ -115,7 +116,42 @@ BreadCrumb.defaultProps = {
   spacing: 2
 };
 
-const CardCustom = /*#__PURE__*/forwardRef(({
+const Loader = /*#__PURE__*/forwardRef((props, ref) => {
+  const styles = useStyleConfig('LoaderStyle', props);
+  return /*#__PURE__*/React__default.createElement(Box, {
+    ref: ref,
+    __css: styles
+  });
+});
+
+const Button = props => {
+  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()
+    })
+  }, rest), children);
+};
+
+const CardCustom = /*#__PURE__*/forwardRef$1(({
   children,
   ...rest
 }, ref) => {
@@ -146,12 +182,10 @@ function CheckboxComponent({
     variant: variant
   }, rest, {
     isDisabled: isDisabled
-  })), children && /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Box, {
-    ml: "8px"
-  }, /*#__PURE__*/React__default.createElement(Text, {
+  }), children && /*#__PURE__*/React__default.createElement(Text, {
     textStyle: "text.sm",
     color: isDisabled ? 'black.low' : 'black.high'
-  }, children)))), /*#__PURE__*/React__default.createElement(Box, {
+  }, children))), /*#__PURE__*/React__default.createElement(Box, {
     mt: "5px",
     ml: "24px"
   }, isError ? /*#__PURE__*/React__default.createElement(Text, {
@@ -159,7 +193,7 @@ function CheckboxComponent({
     color: "danger.500"
   }, errorText) : /*#__PURE__*/React__default.createElement(Text, {
     textStyle: "text.xs",
-    color: isDisabled ? 'black.low' : 'black.medium'
+    color: "black.medium"
   }, helpText)));
 }
 CheckboxComponent.defaultProps = {
@@ -168,6 +202,95 @@ CheckboxComponent.defaultProps = {
   errorText: ''
 };
 
+/* eslint-disable no-nested-ternary */
+const Field = props => {
+  const {
+    label,
+    isError,
+    errorMessage,
+    leftHelperText,
+    rightHelperText,
+    isRequired,
+    children,
+    isSuccess
+  } = 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, {
+    isInvalid: isError
+  }, 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 && /*#__PURE__*/React__default.createElement(FormHelperText, {
+    fontSize: "text.xs",
+    color: helperColor,
+    mt: 1
+  }, leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(FormErrorMessage, {
+    fontSize: "text.xs",
+    color: "danger.500",
+    mt: 1
+  }, errorMessage) : errorMessage, rightHelperText && /*#__PURE__*/React__default.createElement(FormHelperText, {
+    fontSize: "text.xs",
+    color: helperColor,
+    mt: 1
+  }, rightHelperText)));
+};
+Field.defaultProps = {
+  label: '',
+  isError: false,
+  isSuccess: false,
+  errorMessage: undefined,
+  leftHelperText: undefined,
+  rightHelperText: undefined,
+  isRequired: false
+};
+
+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 IndeterminateCheckbox = ({
   indeterminate = false,
   ...rest
@@ -1764,68 +1887,60 @@ MultiDatePickerMonth.defaultProps = {
   isError: false
 };
 
-/* eslint-disable no-nested-ternary */
-const Field = props => {
+const getProperties = props => {
   const {
-    label,
     isError,
-    errorMessage,
-    leftHelperText,
-    rightHelperText,
-    isRequired,
-    children,
-    isSuccess,
-    isDisabled
+    isDisabled,
+    isSuccess
   } = props;
-  const getHelperColor = () => {
-    if (isError) return 'danger.500';
-    if (isSuccess) return 'success.500';
-    if (isDisabled) return 'black.low';
-    return 'black.medium';
+  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 getJustifyContentHelper = () => {
-    if (rightHelperText && (!leftHelperText || isError && !errorMessage)) return 'flex-end';
-    return 'space-between';
+};
+const getWrapperStyle = props => {
+  const {
+    outlineColor,
+    focusColor
+  } = getProperties(props);
+  const style = {
+    border: '1px solid',
+    borderColor: outlineColor,
+    borderRadius: 'md',
+    transition: 'all 0.15s',
+    boxShadow: 'none',
+    _focusWithin: {
+      borderColor: focusColor
+    }
   };
-  const helperColor = getHelperColor();
-  const justifyHelper = getJustifyContentHelper();
-  return /*#__PURE__*/React__default.createElement(FormControl, {
-    isInvalid: isError
-  }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(FormLabel$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 && /*#__PURE__*/React__default.createElement(FormHelperText, {
-    fontSize: "text.xs",
-    color: helperColor,
-    mt: 1
-  }, leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(FormErrorMessage, {
-    fontSize: "text.xs",
-    color: "danger.500",
-    mt: 1
-  }, errorMessage) : errorMessage, rightHelperText && /*#__PURE__*/React__default.createElement(FormHelperText, {
-    fontSize: "text.xs",
-    color: helperColor,
-    mt: 1
-  }, rightHelperText)));
+  return defineStyle(style);
 };
-Field.defaultProps = {
-  label: '',
-  isError: false,
-  isSuccess: false,
-  isDisabled: false,
-  errorMessage: undefined,
-  leftHelperText: undefined,
-  rightHelperText: undefined,
-  isRequired: false
+
+const InputAddonLeft = ({
+  children
+}) => {
+  return /*#__PURE__*/React__default.createElement(Box, {
+    borderLeftRadius: "md",
+    backgroundColor: "neutral.200",
+    px: 3,
+    py: 2.5
+  }, children);
+};
+const InputAddonRight = ({
+  children
+}) => {
+  return /*#__PURE__*/React__default.createElement(Box, {
+    borderRightRadius: "md",
+    backgroundColor: "neutral.200",
+    px: 3,
+    py: 2.5
+  }, children);
 };
 
 const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
@@ -1845,47 +1960,121 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     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,
-    isDisabled: isDisabled,
     isError: isError,
     errorMessage: errorMessage,
     leftHelperText: leftHelperText,
     rightHelperText: rightHelperText,
     isRequired: isRequired
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    __css: wrapperStyle
   }, /*#__PURE__*/React__default.createElement(InputGroup, {
-    size: size
-  }, addOnLeft && /*#__PURE__*/React__default.createElement(InputLeftAddon, null, addOnLeft), elementLeft && /*#__PURE__*/React__default.createElement(InputLeftElement, null, elementLeft), /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
+    size: size,
+    borderRadius: "md",
+    backgroundColor: isDisabled ? 'neutral.300' : 'white.high',
+    cursor: isDisabled ? 'not-allowed' : 'default'
+  }, addOnLeft && /*#__PURE__*/React__default.createElement(InputAddonLeft, null, addOnLeft), /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
     ref: ref,
-    type: type,
-    value: value
-  }, inputProps)), addOnRight && /*#__PURE__*/React__default.createElement(InputRightAddon, null, addOnRight), elementRight && /*#__PURE__*/React__default.createElement(InputRightElement, null, elementRight)));
+    type: inputType,
+    value: value,
+    isDisabled: isDisabled,
+    isSuccess: isSuccess
+  }, inputProps, {
+    fontSize: fontSize
+  })), (withClear || isLoading || type === 'password') && /*#__PURE__*/React__default.createElement(Box, {
+    "data-test-id": "Pg7ttgRey7InxE4qzTjW_",
+    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 && /*#__PURE__*/React__default.createElement(InputAddonRight, null, addOnRight))));
 });
 InputField.defaultProps = {
   addOnLeft: undefined,
   addOnRight: undefined,
   elementLeft: undefined,
-  elementRight: undefined
+  elementRight: 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(Textarea$1, Object.assign({
+  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)));
+  }, inputProps)), isLoading && /*#__PURE__*/React__default.createElement(Box, {
+    zIndex: 999,
+    top: 2,
+    right: 2,
+    position: "absolute"
+  }, /*#__PURE__*/React__default.createElement(Loader, {
+    size: "sm"
+  }))));
 });
 TextareaField.defaultProps = {
-  addOnLeft: undefined,
-  addOnRight: undefined,
-  elementLeft: undefined,
-  elementRight: undefined
+  isLoading: undefined
 };
 
 const XMSLogo = () => /*#__PURE__*/React__default.createElement(Image, {
@@ -2072,14 +2261,6 @@ Header.defaultProps = {
   hideSwitchMode: false
 };
 
-const Loader = /*#__PURE__*/forwardRef$1((props, ref) => {
-  const styles = useStyleConfig('LoaderStyle', props);
-  return /*#__PURE__*/React__default.createElement(Box, {
-    ref: ref,
-    __css: styles
-  });
-});
-
 const ModalBody = /*#__PURE__*/React__default.forwardRef(({
   children,
   ...rest
@@ -2090,7 +2271,7 @@ const ModalBody = /*#__PURE__*/React__default.forwardRef(({
   }, rest), children);
 });
 
-const ModalCloseButton = /*#__PURE__*/forwardRef((props, ref) => {
+const ModalCloseButton = /*#__PURE__*/forwardRef$1((props, ref) => {
   return /*#__PURE__*/React__default.createElement(ModalCloseButton$1, Object.assign({
     ref: ref,
     top: 4,
@@ -2100,7 +2281,7 @@ const ModalCloseButton = /*#__PURE__*/forwardRef((props, ref) => {
   }, props));
 });
 
-const ModalFooter = /*#__PURE__*/forwardRef(({
+const ModalFooter = /*#__PURE__*/forwardRef$1(({
   children,
   ...rest
 }, ref) => {
@@ -2111,7 +2292,7 @@ const ModalFooter = /*#__PURE__*/forwardRef(({
   }, rest), children);
 });
 
-const ModalHeader = /*#__PURE__*/forwardRef(({
+const ModalHeader = /*#__PURE__*/forwardRef$1(({
   children,
   ...rest
 }, ref) => {
@@ -2262,7 +2443,7 @@ Navigation.defaultProps = {
   host: undefined
 };
 
-const PaginationButton = /*#__PURE__*/forwardRef$1(({
+const PaginationButton = /*#__PURE__*/forwardRef(({
   className,
   style,
   isActive,
@@ -2273,7 +2454,7 @@ const PaginationButton = /*#__PURE__*/forwardRef$1(({
   const btnColor = useColorModeValue('black.high', 'primary.300');
   const btnNotActiveBg = useColorModeValue('secondary.50', 'primary.500');
   const btnNotActiveColor = useColorModeValue('primary.500', 'white');
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Button$2, Object.assign({
     "data-test-id": "Pagination-Button",
     ref: ref,
     className: className,
@@ -2482,6 +2663,68 @@ PaginationFilter.defaultProps = {
   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, {
+    textStyle: "text.sm",
+    color: isDisabled ? 'black.low' : 'black.high'
+  }, children))), /*#__PURE__*/React__default.createElement(Box, {
+    mt: "5px",
+    ml: "24px"
+  }, isError ? /*#__PURE__*/React__default.createElement(Text, {
+    textStyle: "text.xs",
+    color: "danger.500"
+  }, errorText) : /*#__PURE__*/React__default.createElement(Text, {
+    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 SelectWrapper = ({
   children,
   isError = false
@@ -2674,7 +2917,96 @@ function SelectCreatable({
   })));
 }
 
-const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
+/**
+ * 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(function Switch(props, ref) {
+  const styles = useMultiStyleConfig('Switch', props);
+  const {
+    size = 'md'
+  } = props;
+  const {
+    spacing = '0.5rem',
+    children,
+    ...ownProps
+  } = omitThemingProps(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.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.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(size)
+  }), /*#__PURE__*/React__default.createElement(Close, {
+    color: state.isDisabled ? 'neutral.600' : 'neutral.900',
+    size: getIconSize(size)
+  })), /*#__PURE__*/React__default.createElement(chakra.span, {
+    __css: styles.thumb,
+    className: "chakra-switch__thumb",
+    "data-checked": dataAttr(state.isChecked),
+    "data-hover": dataAttr(state.isHovered)
+  })), children && /*#__PURE__*/React__default.createElement(chakra.span, Object.assign({
+    className: "chakra-switch__label",
+    color: state.isDisabled ? 'black.low' : 'black.high'
+  }, getLabelProps(), {
+    __css: labelStyles
+  }), children));
+});
+
+const Tab = /*#__PURE__*/forwardRef((props, ref) => {
   var _props$leftAddon, _props$rightAddon;
   const tabProps = useTab({
     ...props,
@@ -2682,7 +3014,7 @@ const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
   });
   const isSelected = !!tabProps['aria-selected'];
   const styles = useMultiStyleConfig('Tabs', tabProps);
-  return /*#__PURE__*/createElement(Button$1, Object.assign({
+  return /*#__PURE__*/createElement(Button$2, Object.assign({
     p: 3,
     fontSize: "text.md",
     _selected: {
@@ -2702,13 +3034,13 @@ const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
   })));
 });
 
-const TabList = /*#__PURE__*/forwardRef$1((props, ref) => /*#__PURE__*/React__default.createElement(TabList$1, {
+const TabList = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(TabList$1, {
   borderBottom: "1px solid",
   borderColor: useColorModeValue('gray.200', 'bright-gray.800'),
   ref: ref
 }, props.children));
 
-const TabPanel = /*#__PURE__*/forwardRef$1((props, ref) => /*#__PURE__*/React__default.createElement(TabPanel$1, {
+const TabPanel = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(TabPanel$1, {
   px: 0,
   ref: ref
 }, props.children));
@@ -2803,109 +3135,375 @@ Uploader.defaultProps = {
   selected: false
 };
 
-// You can also use the more specific type for
-// a single part component: ComponentSingleStyleConfig
-const Button = {
-  // The styles all button have in common
-  baseStyle: {
+const {
+  definePartsStyle,
+  defineMultiStyleConfig
+} = /*#__PURE__*/createMultiStyleConfigHelpers(alertAnatomy.keys);
+const $fg = /*#__PURE__*/cssVar('alert-fg');
+const $bg = /*#__PURE__*/cssVar('alert-bg');
+const baseStyle = /*#__PURE__*/definePartsStyle({
+  container: {
+    bg: $bg.reference,
+    px: '4',
+    py: '2',
+    borderRadius: 'md'
+  },
+  title: {
+    fontWeight: '400',
+    lineHeight: '18px',
+    marginEnd: '2'
+  },
+  description: {
+    lineHeight: '6'
+  },
+  icon: {
+    color: $fg.reference,
+    flexShrink: 0,
+    marginEnd: '3',
+    w: '4',
+    h: '4'
+  },
+  action: {
+    '& +.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 {
+    theme,
+    colorScheme: c
+  } = props;
+  const darkBg = transparentize(`${c}.200`, 0.16)(theme);
+  return {
+    light: `colors.${c}.50`,
+    dark: darkBg
+  };
+}
+const variantSubtle = /*#__PURE__*/definePartsStyle(props => {
+  const {
+    colorScheme: c
+  } = props;
+  const bg = getBg(props);
+  return {
+    container: {
+      [$fg.variable]: `colors.${c}.700`,
+      [$bg.variable]: bg.light,
+      _dark: {
+        [$fg.variable]: `colors.${c}.200`,
+        [$bg.variable]: bg.dark
+      },
+      color: $fg.reference
+    }
+  };
+});
+const variantSolid = /*#__PURE__*/definePartsStyle(props => {
+  const {
+    colorScheme: c
+  } = props;
+  return {
+    container: {
+      [$fg.variable]: `colors.white.high`,
+      [$bg.variable]: `colors.${c}.500`,
+      _dark: {
+        [$fg.variable]: `colors.gray.900`,
+        [$bg.variable]: `colors.${c}.200`
+      },
+      color: $fg.reference
+    }
+  };
+});
+const variants = {
+  subtle: variantSubtle,
+  solid: variantSolid
+};
+const alertTheme = /*#__PURE__*/defineMultiStyleConfig({
+  baseStyle,
+  variants,
+  defaultProps: {
+    variant: 'subtle',
+    colorScheme: 'info'
+  }
+});
+
+// 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',
-    lineHeight: '1.25',
-    minW: 24,
     px: 4,
-    py: 2,
+    py: 2.5,
     borderRadius: 'md',
     _disabled: {
-      opacity: 0.3
+      opacity: 1,
+      bg: 'neutral.300',
+      color: 'black.low'
     },
     _hover: {
       _disabled: {
-        opacity: 0.3
-      }
-    },
-    _active: {
-      _disabled: {
-        opacity: 0.3
+        bg: 'neutral.300',
+        color: 'black.low'
       }
-    },
-    _loading: {
-      opacity: 0.7
     }
   },
   sizes: {
-    lg: {
-      fontSize: 'button.lg',
-      h: 12
+    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: {
-      fontSize: 'button.md',
-      h: 9
+    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: {
-      fontSize: 'button.sm',
-      h: 6
+    sm: props => {
+      const {
+        variant
+      } = props;
+      const base = {
+        fontSize: 'text.xs',
+        h: 6,
+        px: 2,
+        py: '5px'
+      };
+      const icon = {
+        h: 6,
+        w: 6,
+        p: 0
+      };
+      return variant === 'icon' ? icon : base;
     }
   },
-  // Two variants: outline and solid
   variants: {
-    solid: {
-      color: 'white',
-      bg: 'primary.500',
+    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
+        }
+      };
+      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: {
-        bg: 'primary.700'
+        opacity: '1',
+        bg: 'transparent',
+        color: 'black.medium'
       },
       _hover: {
-        bg: 'primary.600'
-      },
-      _active: {
-        bg: 'primary.700'
-      },
-      _focus: {
-        bg: 'primary.700'
+        _disabled: {
+          bg: 'transparent',
+          color: 'black.medium'
+        }
       }
     },
-    outline: props => ({
-      color: 'primary.500',
-      borderWidth: 1,
-      borderStyle: 'inside',
-      bg: mode('white', 'transparent')(props),
-      borderColor: mode('primary.500', 'primary.500')(props),
-      _hover: {
-        bg: 'primary.50'
-      },
+    icon: {
+      bg: 'neutral.50',
+      minW: 0,
+      borderColor: 'neutral.200',
+      borderWidth: '1px',
       _active: {
-        bg: 'primary.100'
+        bg: 'neutral.500',
+        borderColor: 'neutral.50'
       },
-      _focus: {
-        bg: 'primary.100'
-      }
-    }),
-    'outline-danger': {
-      color: 'danger.500',
-      bg: 'white',
-      borderStyle: 'inside',
-      borderWidth: 1,
-      borderColor: 'danger.500'
-    },
-    ghost: {
-      color: 'primary.500',
       _disabled: {
-        bg: 'primary.100'
+        bg: 'neutral.500',
+        opacity: 0.3,
+        borderColor: 'neutral.50'
+      },
+      _hover: {
+        bg: 'neutral.400',
+        _disabled: {
+          bg: 'neutral.500',
+          opacity: 0.3,
+          borderColor: 'neutral.50'
+        }
       }
-    },
-    link: {
-      bg: 'transparent',
-      color: 'primary.500'
     }
   },
-  // The default size and variant values
   defaultProps: {
     size: 'md',
-    variant: 'solid',
-    orientation: 'vertical',
+    variant: 'primary',
     colorScheme: 'primary'
   }
-};
+});
 
 const CardStyle = /*#__PURE__*/defineStyleConfig({
   baseStyle: props => {
@@ -2917,10 +3515,10 @@ const CardStyle = /*#__PURE__*/defineStyleConfig({
 });
 
 const {
-  definePartsStyle,
-  defineMultiStyleConfig
-} = /*#__PURE__*/createMultiStyleConfigHelpers(checkboxAnatomy.keys);
-const baseStyle = /*#__PURE__*/definePartsStyle({
+  definePartsStyle: definePartsStyle$1,
+  defineMultiStyleConfig: defineMultiStyleConfig$1
+} = /*#__PURE__*/createMultiStyleConfigHelpers$1(checkboxAnatomy.keys);
+const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
   control: {
     borderRadius: '4px',
     width: '16px',
@@ -2944,7 +3542,7 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
     cursor: 'not-allowed'
   }
 });
-const errors = /*#__PURE__*/definePartsStyle({
+const errors = /*#__PURE__*/definePartsStyle$1({
   control: {
     borderColor: 'danger.500',
     _checked: {
@@ -2964,7 +3562,7 @@ const errors = /*#__PURE__*/definePartsStyle({
     fontSize: '12px'
   }
 });
-const unstyled = /*#__PURE__*/definePartsStyle({
+const unstyled = /*#__PURE__*/definePartsStyle$1({
   control: {
     borderColor: 'neutral.500',
     _checked: {
@@ -2980,7 +3578,8 @@ const unstyled = /*#__PURE__*/definePartsStyle({
       }
     },
     _disabled: {
-      backgroundColor: 'neutral.500'
+      backgroundColor: 'neutral.500',
+      borderColor: 'neutral.500'
     },
     _indeterminate: {
       borderColor: 'primary.500',
@@ -2991,48 +3590,109 @@ const unstyled = /*#__PURE__*/definePartsStyle({
     fontSize: '12px'
   }
 });
-const variants = {
+const variants$1 = {
   errors,
   unstyled
 };
-const Checkbox = /*#__PURE__*/defineMultiStyleConfig({
-  baseStyle,
-  variants,
+const Checkbox = /*#__PURE__*/defineMultiStyleConfig$1({
+  baseStyle: baseStyle$1,
+  variants: variants$1,
   defaultProps: {
-    variant: 'errors'
+    variant: 'unstyled'
   }
 });
 
-const baseStyle$1 = /*#__PURE__*/defineStyle({
+const Chips = /*#__PURE__*/defineStyleConfig({
+  baseStyle: props => {
+    const {
+      isDisabled,
+      isActive
+    } = props;
+    const defaultProps = {
+      color: 'primary.500',
+      fontSize: 'text.small',
+      borderRadius: '24px',
+      borderWidth: '1px',
+      borderColor: 'primary.500',
+      bg: 'white.high',
+      paddingX: 3,
+      paddingY: 1,
+      cursor: 'default'
+    };
+    let chipsProps = {
+      ...defaultProps
+    };
+    if (isActive) {
+      const isActiveProps = {
+        bg: 'primary.500',
+        color: 'white.high'
+      };
+      chipsProps = {
+        ...chipsProps,
+        ...isActiveProps
+      };
+    }
+    if (isDisabled) {
+      const isDisabledProps = {
+        bg: 'neutral.200',
+        color: 'black.low',
+        borderColor: 'neutral.200',
+        cursor: 'not-allowed'
+      };
+      chipsProps = {
+        ...chipsProps,
+        ...isDisabledProps
+      };
+    }
+    return {
+      ...chipsProps
+    };
+  },
+  sizes: {
+    sm: {
+      fontSize: '12px'
+    },
+    md: {
+      fontSize: '14px'
+    }
+  },
+  defaultProps: {
+    size: 'sm'
+  }
+});
+
+const baseStyle$2 = /*#__PURE__*/defineStyle$1({
   fontSize: 'field.sm',
   marginEnd: 1,
   mb: 1
 });
 const FormLabel = /*#__PURE__*/defineStyleConfig({
-  baseStyle: baseStyle$1
+  baseStyle: baseStyle$2
 });
 
 const {
-  definePartsStyle: definePartsStyle$1,
-  defineMultiStyleConfig: defineMultiStyleConfig$1
-} = /*#__PURE__*/createMultiStyleConfigHelpers$1(inputAnatomy.keys);
-const baseStyle$2 = /*#__PURE__*/definePartsStyle$1({
+  definePartsStyle: definePartsStyle$2,
+  defineMultiStyleConfig: defineMultiStyleConfig$2
+} = /*#__PURE__*/createMultiStyleConfigHelpers(inputAnatomy.keys);
+const baseStyle$3 = /*#__PURE__*/definePartsStyle$2({
   field: {
     width: '100%',
     minWidth: 0,
     outline: 0,
-    px: 2.5,
-    py: 2,
+    px: 2,
+    py: 2.5,
+    paddingInlineStart: 2,
+    paddingInlineEnd: 2,
     position: 'relative',
     appearance: 'none',
-    transitionProperty: 'common',
-    transitionDuration: 'normal',
     color: 'black.high',
     _disabled: {
       bg: 'neutral.300',
-      border: '1px solid',
-      borderColor: 'neutral.400',
-      cursor: 'not-allowed'
+      border: 0,
+      cursor: 'not-allowed',
+      opacity: 1,
+      boxShadow: 'none',
+      color: 'black.medium'
     },
     _placeholder: {
       color: 'black.low'
@@ -3040,89 +3700,55 @@ const baseStyle$2 = /*#__PURE__*/definePartsStyle$1({
   }
 });
 const size = {
-  lg: /*#__PURE__*/defineStyle({
-    fontSize: 'field.lg',
+  lg: /*#__PURE__*/defineStyle$1({
+    fontSize: 'text.lg',
     h: 12,
     borderRadius: 'md'
   }),
-  md: /*#__PURE__*/defineStyle({
-    fontSize: 'field.md',
+  md: /*#__PURE__*/defineStyle$1({
+    fontSize: 'text.md',
     h: 10,
     borderRadius: 'md'
   }),
-  sm: /*#__PURE__*/defineStyle({
-    fontSize: 'field.sm',
+  sm: /*#__PURE__*/defineStyle$1({
+    fontSize: 'text.sm',
     h: 9.5,
     borderRadius: 'md'
   })
 };
 const sizes$1 = {
-  lg: /*#__PURE__*/definePartsStyle$1({
+  lg: /*#__PURE__*/definePartsStyle$2({
     field: size.lg,
     addon: size.lg
   }),
-  md: /*#__PURE__*/definePartsStyle$1({
+  md: /*#__PURE__*/definePartsStyle$2({
     field: size.md,
     addon: size.md
   }),
-  sm: /*#__PURE__*/definePartsStyle$1({
+  sm: /*#__PURE__*/definePartsStyle$2({
     field: size.sm,
     addon: size.sm
   })
 };
-function getDefaults(props) {
-  const {
-    focusBorderColor,
-    errorBorderColor,
-    readOnlyBorderColor
-  } = props;
-  return {
-    focusBorderColor: focusBorderColor || mode('primary.500', 'primary.300')(props),
-    errorBorderColor: errorBorderColor || mode('danger.500', 'danger.300')(props),
-    readOnlyBorderColor: readOnlyBorderColor || mode('.500', 'danger.300')(props)
-  };
-}
-const outline = /*#__PURE__*/definePartsStyle$1(props => {
-  const {
-    theme
-  } = props;
-  const {
-    focusBorderColor: fc,
-    errorBorderColor: ec,
-    readOnlyBorderColor: rc
-  } = getDefaults(props);
-  return {
-    field: {
-      border: '1px solid',
-      borderColor: mode('dark.200', 'inherit')(props),
-      bg: mode('white', 'inherit')(props),
-      color: mode('inherit', 'white')(props),
-      _hover: {
-        borderColor: mode('gray.300', 'whiteAlpha.400')(props)
-      },
-      _readOnly: {
-        userSelect: 'all',
-        borderColor: getColor(theme, rc),
-        boxShadow: `0 0 0 0 ${getColor(theme, rc)}`
-      },
-      _invalid: {
-        borderColor: getColor(theme, ec),
-        boxShadow: `0 0 0 0 ${getColor(theme, ec)}`
-      },
-      _focusVisible: {
-        zIndex: 1,
-        borderColor: getColor(theme, fc),
-        boxShadow: `0 0 0 0 ${getColor(theme, fc)}`
-      }
+const outline = /*#__PURE__*/definePartsStyle$2(props => {
+  const field = {
+    border: 0,
+    outline: 0,
+    bg: mode('white', 'inherit')(props),
+    color: mode('inherit', 'white')(props),
+    _invalid: {
+      boxShadow: 'none'
     },
-    addon: {
-      border: '1px solid',
-      borderColor: mode('inherit', 'whiteAlpha.50')(props),
-      bg: mode('gray.100', 'whiteAlpha.300')(props)
+    _focusVisible: {
+      zIndex: 1,
+      boxShadow: 'none'
     }
   };
+  return {
+    field
+  };
 });
-const unstyled$1 = /*#__PURE__*/definePartsStyle$1({
+const unstyled$1 = /*#__PURE__*/definePartsStyle$2({
   field: {
     bg: 'transparent',
     px: '0',
@@ -3134,14 +3760,14 @@ const unstyled$1 = /*#__PURE__*/definePartsStyle$1({
     height: 'auto'
   }
 });
-const variants$1 = {
+const variants$2 = {
   outline,
   unstyled: unstyled$1
 };
-const Input = /*#__PURE__*/defineMultiStyleConfig$1({
-  baseStyle: baseStyle$2,
+const Input = /*#__PURE__*/defineMultiStyleConfig$2({
+  baseStyle: baseStyle$3,
   sizes: sizes$1,
-  variants: variants$1,
+  variants: variants$2,
   defaultProps: {
     size: 'sm',
     variant: 'outline'
@@ -3156,16 +3782,21 @@ const rotate = /*#__PURE__*/keyframes({
     transform: 'rotate(360deg)'
   }
 });
+const getLoaderColor = color => {
+  if (color === 'primary') return colors.primary[600];
+  if (color === 'danger') return colors.danger[500];
+  return colors.white.high;
+};
 const LoaderStyle = /*#__PURE__*/defineStyleConfig({
   baseStyle: props => {
-    const colors$1 = props.color === 'white' ? 'white' : colors.primary[600];
+    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$1} 0deg, rgba(217, 217, 217, 0) 360deg);`,
+      background: `conic-gradient(from 180deg at 50% 50%, ${colors} 0deg, rgba(217, 217, 217, 0) 360deg);`,
       ':before': {
         content: `''`,
         display: 'block',
@@ -3174,7 +3805,7 @@ const LoaderStyle = /*#__PURE__*/defineStyleConfig({
         height: '6px',
         position: 'absolute',
         bottom: 0,
-        background: colors$1
+        background: colors
       }
     };
   },
@@ -3240,10 +3871,10 @@ const LoaderStyle = /*#__PURE__*/defineStyleConfig({
 });
 
 const {
-  definePartsStyle: definePartsStyle$2
-} = /*#__PURE__*/createMultiStyleConfigHelpers$1(popoverAnatomy.keys);
+  definePartsStyle: definePartsStyle$3
+} = /*#__PURE__*/createMultiStyleConfigHelpers(popoverAnatomy.keys);
 const Popover = {
-  baseStyle: props => definePartsStyle$2({
+  baseStyle: props => definePartsStyle$3({
     popper: {
       background: mode('white', 'inherit')(props)
     }
@@ -3251,132 +3882,270 @@ const Popover = {
 };
 
 const {
-  definePartsStyle: definePartsStyle$3
+  definePartsStyle: definePartsStyle$4,
+  defineMultiStyleConfig: defineMultiStyleConfig$3
 } = /*#__PURE__*/createMultiStyleConfigHelpers$1(radioAnatomy.keys);
-// You can also use the more specific type for
-// a single part component: ComponentSingleStyleConfig
-const Radio = {
-  // The styles all checkbox have in common
-  baseStyle: /*#__PURE__*/definePartsStyle$3({
-    control: {
-      _checked: {
-        borderColor: 'primary.500',
+const baseStyle$4 = /*#__PURE__*/definePartsStyle$4({
+  control: {
+    border: '1px solid',
+    width: '16px',
+    height: '16px'
+  },
+  label: {
+    marginLeft: '8px',
+    textStyle: 'text.sm',
+    color: 'black.high',
+    _disabled: {
+      color: 'black.low'
+    }
+  }
+});
+const errors$1 = /*#__PURE__*/definePartsStyle$4({
+  control: {
+    borderColor: 'danger.500',
+    _checked: {
+      borderColor: 'danger.500',
+      bg: 'white',
+      _before: {
+        h: '10px',
+        w: '10px',
+        bg: 'danger.500'
+      },
+      _hover: {
+        borderColor: 'danger.500',
+        bg: 'gray.200'
+      },
+      _disabled: {
+        borderColor: 'danger.500',
         bg: 'white',
         _before: {
-          h: '72%',
-          w: '72%',
-          bg: 'primary.500'
-        },
-        _hover: {
-          borderColor: 'primary.500',
-          bg: 'gray.200'
+          h: '10px',
+          w: '10px',
+          bg: 'neutral.500'
         }
       }
+    },
+    _disabled: {
+      borderColor: 'danger.500',
+      bg: 'neutral.500'
     }
-  }),
-  // Two sizes: sm and md
-  sizes: {
-    sm: /*#__PURE__*/definePartsStyle$3({
-      control: {
-        w: '3',
-        h: '3'
-      },
-      label: {
-        fontSize: 'text.sm'
-      }
-    }),
-    md: /*#__PURE__*/definePartsStyle$3({
-      control: {
-        w: '4',
-        h: '4'
+  },
+  label: {
+    fontSize: '12px'
+  }
+});
+const unstyled$2 = /*#__PURE__*/definePartsStyle$4({
+  control: {
+    borderColor: 'neutral.600',
+    _checked: {
+      borderColor: 'primary.500',
+      bg: 'white',
+      _before: {
+        h: '10px',
+        w: '10px',
+        bg: 'primary.500'
       },
-      label: {
-        fontSize: 'text.md'
-      }
-    }),
-    lg: /*#__PURE__*/definePartsStyle$3({
-      control: {
-        w: '5',
-        h: '5'
+      _hover: {
+        borderColor: 'primary.500',
+        bg: 'gray.200'
       },
-      label: {
-        fontSize: 'text.lg'
+      _disabled: {
+        borderColor: 'neutral.500',
+        bg: 'white',
+        _before: {
+          h: '10px',
+          w: '10px',
+          bg: 'neutral.500'
+        }
       }
-    })
+    },
+    _disabled: {
+      borderColor: 'neutral.500',
+      bg: 'neutral.500'
+    }
   },
-  // Two variants: outline and solid
-  variants: {},
-  // The default size and variant values
-  defaultProps: {
-    size: 'sm',
-    variant: 'solid',
-    orientation: 'vertical',
-    colorScheme: 'primary'
+  label: {
+    fontSize: '12px'
   }
+});
+const variants$3 = {
+  errors: errors$1,
+  unstyled: unstyled$2
 };
+const Radio = /*#__PURE__*/defineMultiStyleConfig$3({
+  baseStyle: baseStyle$4,
+  variants: variants$3,
+  defaultProps: {
+    variant: 'unstyled'
+  }
+});
 
 const {
-  definePartsStyle: definePartsStyle$4,
-  defineMultiStyleConfig: defineMultiStyleConfig$2
+  defineMultiStyleConfig: defineMultiStyleConfig$4,
+  definePartsStyle: definePartsStyle$5
 } = /*#__PURE__*/createMultiStyleConfigHelpers(switchAnatomy.keys);
-const baseStyle$3 = /*#__PURE__*/definePartsStyle$4({
-  // define the part you're going to style
+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$5 = /*#__PURE__*/definePartsStyle$5(() => ({
   container: {
-    // ...
-  },
-  thumb: {
-    bg: 'white'
+    [$diff.variable]: diffValue,
+    [$translateX.variable]: $diff.reference,
+    _rtl: {
+      [$translateX.variable]: calc($diff).negate().toString()
+    }
   },
   track: {
     bg: 'neutral.400',
     p: 1,
     _checked: {
-      bg: 'primary.500'
+      bg: 'primary.500',
+      _disabled: {
+        bg: 'neutral.600'
+      }
+    },
+    _disabled: {
+      bg: 'neutral.500',
+      opacity: '100%'
+    }
+  },
+  thumb: baseStyleThumb
+}));
+const sizes$2 = {
+  sm: /*#__PURE__*/definePartsStyle$5({
+    container: {
+      [$width.variable]: '2.125rem',
+      [$height.variable]: '1.063rem'
+    }
+  }),
+  md: /*#__PURE__*/definePartsStyle$5({
+    container: {
+      [$width.variable]: '2.875rem',
+      [$height.variable]: '1.5rem'
     }
+  }),
+  lg: /*#__PURE__*/definePartsStyle$5({
+    container: {
+      [$width.variable]: '3.625rem',
+      [$height.variable]: '1.813rem'
+    }
+  })
+};
+const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$4({
+  baseStyle: baseStyle$5,
+  sizes: sizes$2,
+  defaultProps: {
+    size: 'md'
   }
 });
-const Switch = /*#__PURE__*/defineMultiStyleConfig$2({
-  baseStyle: baseStyle$3
-});
 
-const Textarea = {
-  baseStyle: {
+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: 'md',
+    borderWidth: '1px',
+    outline: 'none',
+    _disabled: {
+      opacity: 1,
+      color: 'black.medium',
+      background: 'neutral.300'
+    },
+    _placeholder: {
+      color: 'black.low'
+    },
     _hover: {
-      borderColor: 'primary.500',
-      boxShadow: 'none',
-      outline: 'none'
+      borderColor
     },
     _focus: {
-      borderColor: 'primary.500',
-      boxShadow: 'none',
-      outline: 'none'
+      outline: 'none',
+      borderColor: focusBorderColor,
+      boxShadow: 'none'
     },
     _focusVisible: {
-      borderColor: 'primary.500',
-      boxShadow: 'none',
-      outline: 'none'
+      outline: 'none',
+      borderColor: focusBorderColor,
+      boxShadow: 'none'
     },
     _focusWithin: {
-      borderColor: 'primary.500',
-      boxShadow: 'none',
-      outline: 'none'
+      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,
-  Button: Button,
+  Alert: alertTheme,
+  Button: Button$1,
   Card: CardStyle,
   Checkbox: Checkbox,
+  Chips: Chips,
   FormLabel: FormLabel,
   Input: Input,
   LoaderStyle: LoaderStyle,
   Popover: Popover,
   Radio: Radio,
-  Switch: Switch,
+  Switch: Switch$1,
   Textarea: Textarea
 };
 
@@ -3438,5 +4207,5 @@ const Provider = ({
 };
 Provider.displayName = 'Provider';
 
-export { BreadCrumb, CardCustom as Card, CheckboxComponent as Checkbox, DataTable, DatePickerMonth, Datepicker, Field, Header, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Tab, TabList, TabPanel, TextareaField, Uploader, theme, useInternalUI };
+export { Box, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Container, DataTable, DatePickerMonth, Datepicker, Field, Flex, Grid, Header, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, RadioComponent as Radio, RadioGroupComponent as RadioGroup, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Stack, Switch, Tab, TabList, TabPanel, Text, TextareaField, Uploader, Wrap, foundations, theme, useInternalUI };
 //# sourceMappingURL=internal-ui.esm.js.map