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

package/dist/internal-ui.esm.js

@@ -1,22 +1,24 @@
-import { useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, InputGroup, Input as Input$1, InputRightAddon, FormControl, FormLabel as FormLabel$1, InputRightElement, FormHelperText, FormErrorMessage, 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, ModalBody as ModalBody$1, ModalCloseButton as ModalCloseButton$1, ModalFooter as ModalFooter$1, ModalHeader as ModalHeader$1, createIcon, Icon, Portal, Link, forwardRef as forwardRef$1, Button as Button$1, VisuallyHidden, Select as Select$1, useTab, useMultiStyleConfig, TabList as TabList$1, TabPanel as TabPanel$1, Stack, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, 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, useRef, useEffect, useState, useMemo, Fragment, forwardRef, 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 } from '@emotion/react';
+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 { 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 { checkboxAnatomy, inputAnatomy, radioAnatomy, switchAnatomy, popoverAnatomy } from '@chakra-ui/anatomy';
-import { createMultiStyleConfigHelpers, cssVar, defineStyleConfig, defineStyle } from '@chakra-ui/styled-system';
+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 */
@@ -114,6 +116,181 @@ BreadCrumb.defaultProps = {
   spacing: 2
 };
 
+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) => {
+  const styles = useStyleConfig('Card', rest);
+  return /*#__PURE__*/React__default.createElement(Card, Object.assign({
+    __css: styles,
+    backgroundColor: "white.high",
+    ref: ref
+  }, rest), children);
+});
+CardCustom.defaultProps = {
+  withShadow: true,
+  isRounded: true
+};
+
+function CheckboxComponent({
+  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(Checkbox$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)));
+}
+CheckboxComponent.defaultProps = {
+  isError: false,
+  helpText: '',
+  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
@@ -1302,7 +1479,7 @@ const success = {
   '200': '#A9F9B5',
   '300': '#7CEE98',
   '400': '#58DD86',
-  '500': '#28c76f',
+  '500': '#28C76F',
   '600': '#1DAB6A',
   '700': '#148F63',
   '800': '#0C7359',
@@ -1430,8 +1607,13 @@ const radius = {
   full: '9999px'
 };
 
-const spacing = {
-  ...theme$1.space,
+const shadows = {
+  ...theme$1.shadows,
+  raised: '0px 4px 20px rgba(0, 0, 0, 0.05)'
+};
+
+const sizes = {
+  ...theme$1.sizes,
   4.5: '1.125rem',
   9.5: '2.375rem',
   18: '4.5rem',
@@ -1440,8 +1622,8 @@ const spacing = {
   30: '7.5rem'
 };
 
-const sizes = {
-  ...theme$1.sizes,
+const spacing = {
+  ...theme$1.space,
   4.5: '1.125rem',
   9.5: '2.375rem',
   18: '4.5rem',
@@ -1472,6 +1654,11 @@ const lineHeights = {
   short: 1.375,
   base: 1.5,
   tall: 1.625,
+  64: '4rem',
+  56: '3.5rem',
+  48: '3rem',
+  40: '2.5rem',
+  36: '2.25rem',
   34: '2.125rem',
   32: '2rem',
   30: '1.875rem',
@@ -1485,14 +1672,22 @@ const lineHeights = {
   14: '0.875rem',
   12: '0.75rem'
 };
+const letterSpacings = {
+  tighter: '-0.05em',
+  tight: '-0.025em',
+  normal: '0',
+  wide: '0.025em',
+  wider: '0.05em',
+  widest: '0.1em'
+};
 const fontSizes = {
   heading: {
-    1: '1.75rem',
-    2: '1.5rem',
-    3: '1.25rem',
-    4: '1.125rem',
-    5: '1rem',
-    6: '0.875rem'
+    1: '2.5rem',
+    2: '2rem',
+    3: '1.75rem',
+    4: '1.5rem',
+    5: '1.375rem',
+    6: '1.125rem'
   },
   text: {
     xl: '1.125rem',
@@ -1518,85 +1713,90 @@ const fontSizes = {
 const heading = {
   1: {
     fontSize: fontSizes.heading[1],
-    fontWeight: 'bold',
-    lineHeight: '3.5rem',
-    letterSpacing: '0'
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights[64],
+    letterSpacing: letterSpacings.normal
   },
   2: {
     fontSize: fontSizes.heading[2],
-    fontWeight: 'bold',
-    lineHeight: '2.875rem',
-    letterSpacing: '0'
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights[56],
+    letterSpacing: letterSpacings.normal
   },
   3: {
     fontSize: fontSizes.heading[3],
-    fontWeight: 'bold',
-    lineHeight: '2.5rem',
-    letterSpacing: '0'
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights[48],
+    letterSpacing: letterSpacings.normal
   },
   4: {
     fontSize: fontSizes.heading[4],
-    fontWeight: 'bold',
-    lineHeight: '2rem',
-    letterSpacing: '0'
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights[40],
+    letterSpacing: letterSpacings.normal
   },
   5: {
     fontSize: fontSizes.heading[5],
-    fontWeight: 'bold',
-    lineHeight: '1.5rem',
-    letterSpacing: '0'
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights[36],
+    letterSpacing: letterSpacings.normal
   },
   6: {
     fontSize: fontSizes.heading[6],
-    fontWeight: 'bold',
-    lineHeight: '1.375rem',
-    letterSpacing: '0'
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights[32],
+    letterSpacing: letterSpacings.normal
   }
 };
 const text = {
   xl: {
     fontSize: fontSizes.text.xl,
+    fontWeight: fontWeights.normal,
     lineHeight: lineHeights[28],
-    letterSpacing: '0'
+    letterSpacing: letterSpacings.normal
   },
   lg: {
     fontSize: fontSizes.text.lg,
+    fontWeight: fontWeights.normal,
     lineHeight: lineHeights[24],
-    letterSpacing: '0'
+    letterSpacing: letterSpacings.normal
   },
   md: {
     fontSize: fontSizes.text.md,
+    fontWeight: fontWeights.normal,
     lineHeight: lineHeights[22],
-    letterSpacing: '0'
+    letterSpacing: letterSpacings.normal
   },
   sm: {
     fontSize: fontSizes.text.sm,
+    fontWeight: fontWeights.normal,
     lineHeight: lineHeights[18],
-    letterSpacing: '0'
+    letterSpacing: letterSpacings.normal
   },
   xs: {
     fontSize: fontSizes.text.xs,
+    fontWeight: fontWeights.normal,
     lineHeight: lineHeights[14],
-    letterSpacing: '0'
+    letterSpacing: letterSpacings.normal
   }
 };
 const button = {
   lg: {
     fontSize: fontSizes.button.lg,
     lineHeight: lineHeights[28],
-    letterSpacing: '0',
+    letterSpacing: letterSpacings.normal,
     fontWeight: fontWeights.normal
   },
   md: {
     fontSize: fontSizes.button.md,
     lineHeight: lineHeights[22],
-    letterSpacing: '0',
+    letterSpacing: letterSpacings.normal,
     fontWeight: fontWeights.normal
   },
   sm: {
     fontSize: fontSizes.button.sm,
     lineHeight: lineHeights[14],
-    letterSpacing: '0',
+    letterSpacing: letterSpacings.normal,
     fontWeight: fontWeights.normal
   }
 };
@@ -1604,19 +1804,19 @@ const field = {
   lg: {
     fontSize: fontSizes.field.lg,
     lineHeight: lineHeights[24],
-    letterSpacing: '0',
+    letterSpacing: letterSpacings.normal,
     fontWeight: fontWeights.normal
   },
   md: {
     fontSize: fontSizes.field.md,
     lineHeight: lineHeights[22],
-    letterSpacing: '0',
+    letterSpacing: letterSpacings.normal,
     fontWeight: fontWeights.normal
   },
   sm: {
     fontSize: fontSizes.field.sm,
     lineHeight: lineHeights[18],
-    letterSpacing: '0',
+    letterSpacing: letterSpacings.normal,
     fontWeight: fontWeights.normal
   }
 };
@@ -1633,10 +1833,12 @@ var foundations = {
   __proto__: null,
   colors: colors,
   radii: radius,
-  space: spacing,
+  shadows: shadows,
   sizes: sizes,
+  space: spacing,
   fonts: fonts,
   fontSizes: fontSizes,
+  letterSpacings: letterSpacings,
   lineHeights: lineHeights,
   textStyles: textStyles
 };
@@ -1685,41 +1887,60 @@ MultiDatePickerMonth.defaultProps = {
   isError: false
 };
 
-/* eslint-disable no-nested-ternary */
-const Field = props => {
+const getProperties = props => {
   const {
-    label,
     isError,
-    error,
-    helperText,
-    isRequired,
-    children
+    isDisabled,
+    isSuccess
   } = props;
-  return /*#__PURE__*/React__default.createElement(FormControl, {
-    isInvalid: isError
-  }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(FormLabel$1, {
-    fontSize: "field.sm",
-    requiredIndicator: undefined
-  }, isRequired && /*#__PURE__*/React__default.createElement(Box, {
-    as: "span",
-    color: "red.500",
-    ml: 0,
-    mr: 1
-  }, "*"), label) : label), children, !isError ? helperText && /*#__PURE__*/React__default.createElement(FormHelperText, {
-    fontSize: "field.sm"
-  }, helperText) : typeof error === 'string' ? /*#__PURE__*/React__default.createElement(FormErrorMessage, {
-    textStyle: "field.sm",
-    fontSize: "field.sm",
-    mt: 1,
-    marginStart: 1
-  }, error) : error);
+  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
+  };
 };
-Field.defaultProps = {
-  label: '',
-  isError: false,
-  error: undefined,
-  helperText: undefined,
-  isRequired: false
+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
+    }
+  };
+  return defineStyle(style);
+};
+
+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) => {
@@ -1734,46 +1955,126 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     isRequired,
     label,
     isError,
-    error,
-    helperText,
+    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,
-    error: error,
-    helperText: helperText,
+    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, {
@@ -1970,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,
@@ -1980,7 +2281,7 @@ const ModalCloseButton = /*#__PURE__*/forwardRef((props, ref) => {
   }, props));
 });
 
-const ModalFooter = /*#__PURE__*/forwardRef(({
+const ModalFooter = /*#__PURE__*/forwardRef$1(({
   children,
   ...rest
 }, ref) => {
@@ -1991,7 +2292,7 @@ const ModalFooter = /*#__PURE__*/forwardRef(({
   }, rest), children);
 });
 
-const ModalHeader = /*#__PURE__*/forwardRef(({
+const ModalHeader = /*#__PURE__*/forwardRef$1(({
   children,
   ...rest
 }, ref) => {
@@ -2142,7 +2443,7 @@ Navigation.defaultProps = {
   host: undefined
 };
 
-const PaginationButton = /*#__PURE__*/forwardRef$1(({
+const PaginationButton = /*#__PURE__*/forwardRef(({
   className,
   style,
   isActive,
@@ -2153,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,
@@ -2362,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
@@ -2554,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,
@@ -2562,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: {
@@ -2582,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));
@@ -2683,201 +3135,564 @@ Uploader.defaultProps = {
   selected: false
 };
 
+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 = {
+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',
-      _disabled: {
-        bg: 'primary.700'
-      },
-      _hover: {
-        bg: 'primary.600'
-      },
-      _active: {
-        bg: 'primary.700'
-      },
-      _focus: {
-        bg: 'primary.700'
-      }
+    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;
     },
-    outline: props => ({
-      color: 'primary.500',
-      borderWidth: 1,
-      borderStyle: 'inside',
-      bg: mode('white', 'transparent')(props),
-      borderColor: mode('primary.500', 'primary.500')(props),
-      _hover: {
-        bg: 'primary.50'
-      },
-      _active: {
-        bg: 'primary.100'
-      },
-      _focus: {
-        bg: 'primary.100'
-      }
-    }),
-    'outline-danger': {
-      color: 'danger.500',
-      bg: 'white',
-      borderStyle: 'inside',
-      borderWidth: 1,
-      borderColor: 'danger.500'
+    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;
     },
-    ghost: {
+    link: {
+      bg: 'transparent',
       color: 'primary.500',
       _disabled: {
-        bg: 'primary.100'
+        opacity: '1',
+        bg: 'transparent',
+        color: 'black.medium'
+      },
+      _hover: {
+        _disabled: {
+          bg: 'transparent',
+          color: 'black.medium'
+        }
       }
     },
-    link: {
-      bg: 'transparent',
-      color: 'primary.500'
+    icon: {
+      bg: 'neutral.50',
+      minW: 0,
+      borderColor: 'neutral.200',
+      borderWidth: '1px',
+      _active: {
+        bg: 'neutral.500',
+        borderColor: 'neutral.50'
+      },
+      _disabled: {
+        bg: 'neutral.500',
+        opacity: 0.3,
+        borderColor: 'neutral.50'
+      },
+      _hover: {
+        bg: 'neutral.400',
+        _disabled: {
+          bg: 'neutral.500',
+          opacity: 0.3,
+          borderColor: 'neutral.50'
+        }
+      }
     }
   },
-  // The default size and variant values
   defaultProps: {
     size: 'md',
-    variant: 'solid',
-    orientation: 'vertical',
+    variant: 'primary',
     colorScheme: 'primary'
   }
-};
+});
+
+const CardStyle = /*#__PURE__*/defineStyleConfig({
+  baseStyle: props => {
+    return {
+      shadow: props.withShadow ? 'raised' : 'none',
+      borderRadius: props.isRounded ? 'lg' : 'none'
+    };
+  }
+});
 
 const {
-  definePartsStyle
-} = /*#__PURE__*/createMultiStyleConfigHelpers(checkboxAnatomy.keys);
-const $size = /*#__PURE__*/cssVar('checkbox-size');
-// You can also use the more specific type for
-// a single part component: ComponentSingleStyleConfig
-const Checkbox = {
-  // The styles all checkbox have in common
-  baseStyle: {
-    borderRadius: 'sm'
+  definePartsStyle: definePartsStyle$1,
+  defineMultiStyleConfig: defineMultiStyleConfig$1
+} = /*#__PURE__*/createMultiStyleConfigHelpers$1(checkboxAnatomy.keys);
+const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
+  control: {
+    borderRadius: '4px',
+    width: '16px',
+    height: '16px',
+    border: '1px solid'
   },
-  // Two sizes: sm and md
-  sizes: {
-    sm: /*#__PURE__*/definePartsStyle({
-      control: {
-        [$size.variable]: 'sizes.4',
-        borderRadius: 'md'
-      },
-      label: {
-        fontSize: 'text.sm'
-      },
-      icon: {
-        fontSize: '3xs'
-      }
-    }),
-    md: /*#__PURE__*/definePartsStyle({
-      control: {
-        [$size.variable]: 'sizes.5',
-        borderRadius: 'md'
-      },
-      label: {
-        fontSize: 'text.md'
-      },
-      icon: {
-        fontSize: '2xs'
+  icon: {
+    color: 'neutral.50',
+    width: '9px'
+  },
+  label: {
+    fontWeight: '400',
+    lineHeight: '18px',
+    color: 'black.high',
+    ml: '8px'
+  },
+  _disabled: {
+    background: 'neutral.500',
+    border: '1px solid',
+    borderColor: 'neutral.500',
+    cursor: 'not-allowed'
+  }
+});
+const errors = /*#__PURE__*/definePartsStyle$1({
+  control: {
+    borderColor: 'danger.500',
+    _checked: {
+      borderColor: 'danger.500',
+      backgroundColor: 'danger.500',
+      _hover: {
+        borderColor: 'danger.600',
+        backgroundColor: 'danger.600'
       }
-    }),
-    lg: /*#__PURE__*/definePartsStyle({
-      control: {
-        [$size.variable]: 'sizes.6',
-        borderRadius: 'md'
-      },
-      label: {
-        fontSize: 'text.lg'
+    },
+    _indeterminate: {
+      borderColor: 'danger.500',
+      backgroundColor: 'danger.500'
+    }
+  },
+  label: {
+    fontSize: '12px'
+  }
+});
+const unstyled = /*#__PURE__*/definePartsStyle$1({
+  control: {
+    borderColor: 'neutral.500',
+    _checked: {
+      borderColor: 'primary.500',
+      backgroundColor: 'primary.500',
+      _hover: {
+        borderColor: 'primary.600',
+        backgroundColor: 'primary.600'
       },
-      icon: {
-        fontSize: 'xs'
+      _disabled: {
+        backgroundColor: 'neutral.500',
+        borderColor: 'neutral.500'
       }
-    })
+    },
+    _disabled: {
+      backgroundColor: 'neutral.500',
+      borderColor: 'neutral.500'
+    },
+    _indeterminate: {
+      borderColor: 'primary.500',
+      backgroundColor: 'primary.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$1 = {
+  errors,
+  unstyled
 };
+const Checkbox = /*#__PURE__*/defineMultiStyleConfig$1({
+  baseStyle: baseStyle$1,
+  variants: variants$1,
+  defaultProps: {
+    variant: 'unstyled'
+  }
+});
+
+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 = /*#__PURE__*/defineStyle({
+const baseStyle$2 = /*#__PURE__*/defineStyle$1({
   fontSize: 'field.sm',
   marginEnd: 1,
   mb: 1
 });
 const FormLabel = /*#__PURE__*/defineStyleConfig({
-  baseStyle
+  baseStyle: baseStyle$2
 });
 
 const {
-  definePartsStyle: definePartsStyle$1,
-  defineMultiStyleConfig
+  definePartsStyle: definePartsStyle$2,
+  defineMultiStyleConfig: defineMultiStyleConfig$2
 } = /*#__PURE__*/createMultiStyleConfigHelpers(inputAnatomy.keys);
-const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
+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'
@@ -2885,89 +3700,55 @@ const baseStyle$1 = /*#__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 = /*#__PURE__*/definePartsStyle$1({
+const unstyled$1 = /*#__PURE__*/definePartsStyle$2({
   field: {
     bg: 'transparent',
     px: '0',
@@ -2979,156 +3760,392 @@ const unstyled = /*#__PURE__*/definePartsStyle$1({
     height: 'auto'
   }
 });
-const variants = {
+const variants$2 = {
   outline,
-  unstyled
+  unstyled: unstyled$1
 };
-const Input = /*#__PURE__*/defineMultiStyleConfig({
-  baseStyle: baseStyle$1,
+const Input = /*#__PURE__*/defineMultiStyleConfig$2({
+  baseStyle: baseStyle$3,
   sizes: sizes$1,
-  variants,
+  variants: variants$2,
   defaultProps: {
     size: 'sm',
     variant: 'outline'
   }
 });
 
+const rotate = /*#__PURE__*/keyframes({
+  '0%': {
+    transform: 'rotate(0deg)'
+  },
+  '100%': {
+    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 = getLoaderColor(props.color);
+    return {
+      borderRadius: '50%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      animation: `${rotate} 1s linear infinite`,
+      background: `conic-gradient(from 180deg at 50% 50%, ${colors} 0deg, rgba(217, 217, 217, 0) 360deg);`,
+      ':before': {
+        content: `''`,
+        display: 'block',
+        borderRadius: '50%',
+        width: '6px',
+        height: '6px',
+        position: 'absolute',
+        bottom: 0,
+        background: colors
+      }
+    };
+  },
+  sizes: {
+    xs: {
+      width: '12px',
+      height: '12px',
+      WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 1.4px),#000 0);',
+      ':before': {
+        width: '1.4px',
+        height: '1.4px'
+      }
+    },
+    sm: {
+      width: '16px',
+      height: '16px',
+      WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 1.87px),#000 0);',
+      ':before': {
+        width: '1.87px',
+        height: '1.87px'
+      }
+    },
+    md: {
+      width: '24px',
+      height: '24px',
+      WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 2.8px),#000 0);',
+      ':before': {
+        width: '2.8px',
+        height: '2.8px'
+      }
+    },
+    lg: {
+      width: '50px',
+      height: '50px',
+      WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 5.83px),#000 0);',
+      ':before': {
+        width: '5.83px',
+        height: '5.83px'
+      }
+    },
+    xl: {
+      width: '75px',
+      height: '75px',
+      WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 8.75px),#000 0);',
+      ':before': {
+        width: '8.75px',
+        height: '8.75px'
+      }
+    },
+    xxl: {
+      width: '100px',
+      height: '100px',
+      WebkitMask: `radial-gradient(farthest-side,#0000 calc(100% - 11.67px),#000 0);`,
+      ':before': {
+        width: '11.67px',
+        height: '11.67px'
+      }
+    }
+  },
+  defaultProps: {
+    size: 'lg'
+  }
+});
+
 const {
-  definePartsStyle: definePartsStyle$2
-} = /*#__PURE__*/createMultiStyleConfigHelpers(radioAnatomy.keys);
-// You can also use the more specific type for
-// a single part component: ComponentSingleStyleConfig
-const Radio = {
-  // The styles all checkbox have in common
-  baseStyle: /*#__PURE__*/definePartsStyle$2({
-    control: {
-      _checked: {
-        borderColor: 'primary.500',
+  definePartsStyle: definePartsStyle$3
+} = /*#__PURE__*/createMultiStyleConfigHelpers(popoverAnatomy.keys);
+const Popover = {
+  baseStyle: props => definePartsStyle$3({
+    popper: {
+      background: mode('white', 'inherit')(props)
+    }
+  })
+};
+
+const {
+  definePartsStyle: definePartsStyle$4,
+  defineMultiStyleConfig: defineMultiStyleConfig$3
+} = /*#__PURE__*/createMultiStyleConfigHelpers$1(radioAnatomy.keys);
+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$2({
-      control: {
-        w: '3',
-        h: '3'
-      },
-      label: {
-        fontSize: 'text.sm'
-      }
-    }),
-    md: /*#__PURE__*/definePartsStyle$2({
-      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$2({
-      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$3,
-  defineMultiStyleConfig: defineMultiStyleConfig$1
-} = /*#__PURE__*/createMultiStyleConfigHelpers$1(switchAnatomy.keys);
-const baseStyle$2 = /*#__PURE__*/definePartsStyle$3({
-  // define the part you're going to style
+  defineMultiStyleConfig: defineMultiStyleConfig$4,
+  definePartsStyle: definePartsStyle$5
+} = /*#__PURE__*/createMultiStyleConfigHelpers(switchAnatomy.keys);
+const $width = /*#__PURE__*/cssVar$1('switch-track-width');
+const $height = /*#__PURE__*/cssVar$1('switch-track-height');
+const $diff = /*#__PURE__*/cssVar$1('switch-track-diff');
+const diffValue = /*#__PURE__*/calc.subtract($width, $height);
+const $translateX = /*#__PURE__*/cssVar$1('switch-thumb-x');
+const baseStyleThumb = /*#__PURE__*/defineStyle$1({
+  bg: 'white',
+  transitionProperty: 'transform',
+  transitionDuration: 'normal',
+  borderRadius: 'inherit',
+  width: [$height.reference],
+  height: [$height.reference],
+  _checked: {
+    transform: `translateX(${$translateX.reference})`
+  }
+});
+const baseStyle$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%'
     }
-  }
-});
-const Switch = /*#__PURE__*/defineMultiStyleConfig$1({
-  baseStyle: baseStyle$2
-});
-
-const {
-  definePartsStyle: definePartsStyle$4
-} = /*#__PURE__*/createMultiStyleConfigHelpers(popoverAnatomy.keys);
-const Popover = {
-  baseStyle: props => definePartsStyle$4({
-    popper: {
-      background: mode('white', 'inherit')(props)
+  },
+  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 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,
-  Radio: Radio,
-  Switch: Switch,
+  LoaderStyle: LoaderStyle,
   Popover: Popover,
+  Radio: Radio,
+  Switch: Switch$1,
   Textarea: Textarea
 };
 
@@ -3147,7 +4164,8 @@ const theme = /*#__PURE__*/extendTheme({
         background: 'neutral.400'
       },
       body: {
-        fontSize: 'text.sm'
+        fontSize: 'text.sm',
+        color: 'black.high'
       }
     }
   },
@@ -3189,5 +4207,5 @@ const Provider = ({
 };
 Provider.displayName = 'Provider';
 
-export { BreadCrumb, DataTable, DatePickerMonth, Datepicker, Field, Header, InputField, 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