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

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

@@ -23,6 +23,7 @@ var reactDropzone = require('react-dropzone');
 var themeTools = require('@chakra-ui/theme-tools');
 var anatomy = require('@chakra-ui/anatomy');
 var styledSystem = require('@chakra-ui/styled-system');
+require('@fontsource/poppins');
 var axios = _interopDefault(require('axios'));
 
 /* eslint-disable react-hooks/rules-of-hooks */
@@ -35,7 +36,7 @@ const BreadCrumb = props => {
     disableHome,
     spacing = 2
   } = props;
-  const [neutral7, dark5] = react.useToken('colors', ['neutral.700', 'dark.500']);
+  const [neutral6, dark5] = react.useToken('colors', ['neutral.600', 'dark.500']);
   return /*#__PURE__*/React.createElement(react.Box, {
     "data-test-id": "CT_component_breadcrumb_breadcrumb",
     className: className,
@@ -48,16 +49,16 @@ const BreadCrumb = props => {
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(react.Text, {
     pr: 2,
-    fontWeight: 500,
-    textStyle: "heading.3",
+    fontWeight: 600,
+    textStyle: "heading.4",
     color: react.useColorModeValue('neutral.700', 'white')
   }, title), /*#__PURE__*/React.createElement(react.Box, {
     h: "22px",
     borderLeft: "1px solid",
-    borderColor: react.useColorModeValue('neutral.700', 'white')
+    borderColor: react.useColorModeValue(neutral6, 'white')
   }), /*#__PURE__*/React.createElement(react.Breadcrumb, {
     separator: /*#__PURE__*/React.createElement(fi.FiChevronsRight, {
-      color: react.useColorModeValue(neutral7, dark5),
+      color: react.useColorModeValue(neutral6, dark5),
       size: 14
     }),
     pl: 2.5,
@@ -107,7 +108,7 @@ const BreadCrumb = props => {
       cursor: 'default'
     }
   }, /*#__PURE__*/React.createElement(react.Text, {
-    color: react.useColorModeValue('dark.700', 'white'),
+    color: react.useColorModeValue(neutral6, 'white'),
     fontSize: "text.sm",
     fontWeight: 400
   }, title))))), children && /*#__PURE__*/React.createElement(react.Box, null, children));
@@ -120,6 +121,43 @@ BreadCrumb.defaultProps = {
   spacing: 2
 };
 
+function CheckboxComponent({
+  isError = false,
+  helpText = '',
+  errorText = '',
+  children,
+  isDisabled,
+  ...rest
+}) {
+  const variant = isError ? 'errors' : 'unstyled';
+  return /*#__PURE__*/React__default.createElement(react.Box, null, /*#__PURE__*/React__default.createElement(react.Box, {
+    display: "flex"
+  }, /*#__PURE__*/React__default.createElement(react.Checkbox, Object.assign({
+    variant: variant
+  }, rest, {
+    isDisabled: isDisabled
+  })), children && /*#__PURE__*/React__default.createElement(react.Box, null, /*#__PURE__*/React__default.createElement(react.Box, {
+    ml: "8px"
+  }, /*#__PURE__*/React__default.createElement(react.Text, {
+    textStyle: "text.sm",
+    color: isDisabled ? 'black.low' : 'black.high'
+  }, children)))), /*#__PURE__*/React__default.createElement(react.Box, {
+    mt: "5px",
+    ml: "24px"
+  }, isError ? /*#__PURE__*/React__default.createElement(react.Text, {
+    textStyle: "text.xs",
+    color: "danger.500"
+  }, errorText) : /*#__PURE__*/React__default.createElement(react.Text, {
+    textStyle: "text.xs",
+    color: isDisabled ? 'black.low' : 'black.medium'
+  }, helpText)));
+}
+CheckboxComponent.defaultProps = {
+  isError: false,
+  helpText: '',
+  errorText: ''
+};
+
 const IndeterminateCheckbox = ({
   indeterminate = false,
   ...rest
@@ -1308,7 +1346,7 @@ const success = {
   '200': '#A9F9B5',
   '300': '#7CEE98',
   '400': '#58DD86',
-  '500': '#28c76f',
+  '500': '#28C76F',
   '600': '#1DAB6A',
   '700': '#148F63',
   '800': '#0C7359',
@@ -1436,8 +1474,13 @@ const radius = {
   full: '9999px'
 };
 
-const spacing = {
-  ...react.theme.space,
+const shadows = {
+  ...react.theme.shadows,
+  raised: '0px 4px 20px rgba(0, 0, 0, 0.05)'
+};
+
+const sizes = {
+  ...react.theme.sizes,
   4.5: '1.125rem',
   9.5: '2.375rem',
   18: '4.5rem',
@@ -1446,8 +1489,8 @@ const spacing = {
   30: '7.5rem'
 };
 
-const sizes = {
-  ...react.theme.sizes,
+const spacing = {
+  ...react.theme.space,
   4.5: '1.125rem',
   9.5: '2.375rem',
   18: '4.5rem',
@@ -1478,6 +1521,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',
@@ -1491,14 +1539,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',
@@ -1524,85 +1580,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
   }
 };
@@ -1610,19 +1671,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
   }
 };
@@ -1639,10 +1700,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
 };
@@ -1696,35 +1759,63 @@ const Field = props => {
   const {
     label,
     isError,
-    error,
-    helperText,
+    errorMessage,
+    leftHelperText,
+    rightHelperText,
     isRequired,
-    children
+    children,
+    isSuccess,
+    isDisabled
   } = props;
+  const getHelperColor = () => {
+    if (isError) return 'danger.500';
+    if (isSuccess) return 'success.500';
+    if (isDisabled) return 'black.low';
+    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(react.FormControl, {
     isInvalid: isError
   }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
-    fontSize: "field.sm",
+    mb: 1,
+    fontSize: "text.sm",
     requiredIndicator: undefined
   }, isRequired && /*#__PURE__*/React__default.createElement(react.Box, {
     as: "span",
-    color: "red.500",
+    color: "danger.500",
     ml: 0,
     mr: 1
-  }, "*"), label) : label), children, !isError ? helperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
-    fontSize: "field.sm"
-  }, helperText) : typeof error === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
-    textStyle: "field.sm",
-    fontSize: "field.sm",
-    mt: 1,
-    marginStart: 1
-  }, error) : error);
+  }, "*"), label) : label), children, (isError && errorMessage || leftHelperText || rightHelperText) && /*#__PURE__*/React__default.createElement(react.Box, {
+    display: "flex",
+    width: "full",
+    justifyContent: justifyHelper
+  }, !isError ? leftHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
+    fontSize: "text.xs",
+    color: helperColor,
+    mt: 1
+  }, leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
+    fontSize: "text.xs",
+    color: "danger.500",
+    mt: 1
+  }, errorMessage) : errorMessage, rightHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
+    fontSize: "text.xs",
+    color: helperColor,
+    mt: 1
+  }, rightHelperText)));
 };
 Field.defaultProps = {
   label: '',
   isError: false,
-  error: undefined,
-  helperText: undefined,
+  isSuccess: false,
+  isDisabled: false,
+  errorMessage: undefined,
+  leftHelperText: undefined,
+  rightHelperText: undefined,
   isRequired: false
 };
 
@@ -1740,15 +1831,21 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     isRequired,
     label,
     isError,
-    error,
-    helperText,
+    isSuccess,
+    isDisabled,
+    errorMessage,
+    leftHelperText,
+    rightHelperText,
     ...inputProps
   } = props;
   return /*#__PURE__*/React__default.createElement(Field, {
     label: label,
+    isSuccess: isSuccess,
+    isDisabled: isDisabled,
     isError: isError,
-    error: error,
-    helperText: helperText,
+    errorMessage: errorMessage,
+    leftHelperText: leftHelperText,
+    rightHelperText: rightHelperText,
     isRequired: isRequired
   }, /*#__PURE__*/React__default.createElement(react.InputGroup, {
     size: size
@@ -1765,21 +1862,36 @@ InputField.defaultProps = {
   elementRight: undefined
 };
 
+const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
+  const styles = react.useStyleConfig('LoaderStyle', props);
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    ref: ref,
+    __css: styles
+  });
+});
+
 const TextareaField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     value,
+    isLoading,
     ...inputProps
   } = props;
-  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(react.Box, {
+    position: "relative"
+  }, /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
     ref: ref,
     value: value
-  }, inputProps)));
+  }, inputProps)), isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
+    zIndex: 999,
+    top: 2,
+    right: 2,
+    position: "absolute"
+  }, /*#__PURE__*/React__default.createElement(Loader, {
+    size: "sm"
+  }))));
 });
 TextareaField.defaultProps = {
-  addOnLeft: undefined,
-  addOnRight: undefined,
-  elementLeft: undefined,
-  elementRight: undefined
+  isLoading: undefined
 };
 
 const XMSLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
@@ -1934,6 +2046,7 @@ const Header = ({
   data,
   onLogout,
   onOpenModalRelease,
+  hideSwitchMode,
   ...props
 }) => /*#__PURE__*/React.createElement(react.Box, Object.assign({
   minH: 14,
@@ -1954,14 +2067,15 @@ const Header = ({
   onOpenModalRelease: onOpenModalRelease
 })), /*#__PURE__*/React.createElement(react.Flex, {
   alignItems: "center"
-}, /*#__PURE__*/React.createElement(SwitchMode, null), /*#__PURE__*/React.createElement(Profile, {
+}, !hideSwitchMode && /*#__PURE__*/React.createElement(SwitchMode, null), /*#__PURE__*/React.createElement(Profile, {
   data: data,
   onLogout: onLogout
 }))));
 Header.defaultProps = {
   data: undefined,
   onLogout: undefined,
-  onOpenModalRelease: undefined
+  onOpenModalRelease: undefined,
+  hideSwitchMode: false
 };
 
 const ModalBody = /*#__PURE__*/React__default.forwardRef(({
@@ -2007,6 +2121,28 @@ const ModalHeader = /*#__PURE__*/React.forwardRef(({
   }, rest), children);
 });
 
+const CustomerIcon = /*#__PURE__*/react.createIcon({
+  displayName: 'CustomerIcon',
+  viewBox: '0 0 16 16',
+  path: [/*#__PURE__*/React__default.createElement("path", {
+    fill: "currentColor",
+    fillRule: "inherit",
+    d: "M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2ZM.667 8a7.333 7.333 0 1 1 14.666 0A7.333 7.333 0 0 1 .667 8Z",
+    clipRule: "inherit"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "currentColor",
+    d: "M12.416 12.698a1.997 1.997 0 0 0-1.75-1.031H5.334a2 2 0 0 0-1.864 1.277 7.722 7.722 0 0 1-.943-1.074 3.329 3.329 0 0 1 2.807-1.537h5.334a3.333 3.333 0 0 1 2.703 1.384c-.275.325-.594.66-.954.98Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "currentColor",
+    fillRule: "inherit",
+    d: "M8 5.333A1.333 1.333 0 1 0 8 8a1.333 1.333 0 0 0 0-2.667ZM5.333 6.667a2.667 2.667 0 1 1 5.334 0 2.667 2.667 0 0 1-5.334 0Z",
+    clipRule: "inherit"
+  })]
+});
+
+/* eslint-disable import/prefer-default-export */
+const mappingIcon = /*#__PURE__*/new Map([['Order', fi.FiShoppingBag], ['Fulfillment', fi.FiShoppingCart], ['Transfer Stock', fi.FiRepeat], ['Stock', fi.FiBox], ['Product Database', fi.FiLayers], ['Purchasing', fi.FiDollarSign], ['Reseller', fi.FiUsers], ['Retur', fi.FiRotateCcw], ['Other', fi.FiSettings], ['Content', fi.FiLayout], ['Voucher', fi.FiGift], ['Customer', CustomerIcon]]);
+
 /* eslint-disable react-hooks/rules-of-hooks */
 const Navigation = ({
   navigations,
@@ -2046,7 +2182,7 @@ const Navigation = ({
       color: isActive ? 'white' : 'inherit',
       p: 2
     }, /*#__PURE__*/React.createElement(react.Icon, {
-      as: navigation.icon,
+      as: mappingIcon.get(navigation.title),
       mr: 2
     }), /*#__PURE__*/React.createElement(react.Text, {
       whiteSpace: "nowrap",
@@ -2066,8 +2202,7 @@ const Navigation = ({
     }, navigation.children.map(({
       title,
       navHost,
-      navLink,
-      icon
+      navLink
     }) => {
       const link = navHost ? `${navHost}${navLink}` : navLink;
       const isLocalLink = host === navHost;
@@ -2076,7 +2211,6 @@ const Navigation = ({
         as: isLocalLink ? as : undefined,
         key: title,
         href: link,
-        cursor: "pointer",
         _hover: {
           textDecoration: 'none'
         }
@@ -2084,6 +2218,7 @@ const Navigation = ({
         display: "flex",
         position: "relative",
         alignItems: "center",
+        cursor: "pointer",
         transition: "padding 0.35s ease 0s",
         _hover: {
           backgroundColor: react.useColorModeValue('dove-gray.50', 'mirage.900'),
@@ -2104,7 +2239,7 @@ const Navigation = ({
         px: 6,
         py: 4
       }, /*#__PURE__*/React.createElement(react.Icon, {
-        as: icon,
+        as: mappingIcon.get(navigation.title),
         mr: 3
       }), /*#__PURE__*/React.createElement(react.Text, {
         fontSize: "text.sm"
@@ -2345,23 +2480,45 @@ PaginationFilter.defaultProps = {
   label: undefined
 };
 
+const SelectWrapper = ({
+  children,
+  isError = false
+}) => {
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    css: react$1.css`
+        .react-select__control {
+          border-color: ${isError ? colors.danger['500'] : colors.neutral['500']} !important;
+        }
+
+        .react-select__control:hover {
+          border-color: ${isError ? colors.danger['500'] : colors.primary['500']} !important;
+        }
+      `
+  }, children);
+};
+SelectWrapper.defaultProps = {
+  isError: false
+};
+
 const styleMd = textStyles.text.sm;
 const selectStyle = {
   fontSize: styleMd.fontSize,
   lineHeight: styleMd.lineHeight,
   letterSpacing: 0
 };
-function selectStyles(colorMode) {
+function selectStyles(colorMode, _isError) {
   return {
-    control: base => colorMode === 'dark' ? {
+    control: (base, state) => colorMode === 'dark' ? {
       ...base,
       ...selectStyle,
       background: 'transparent',
       color: colors.primary['300'],
-      borderColor: colors.secondary['500']
+      borderColor: colors.secondary['500'],
+      boxShadow: state.isFocused ? 'none' : `inherit`
     } : {
       ...base,
-      ...selectStyle
+      ...selectStyle,
+      boxShadow: state.isFocused ? 'none' : colors.neutral['500']
     },
     option: (base, {
       isSelected
@@ -2431,68 +2588,88 @@ const themeSelect = theme => {
   };
 };
 
+/* eslint-disable react/require-default-props */
 function Select({
   styles,
+  isError = false,
   ...rest
 }) {
   const {
     colorMode
   } = system.useColorMode();
-  return /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
+    isError: isError
+  }, /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({
+    classNamePrefix: "react-select"
+  }, rest, {
     styles: {
-      ...selectStyles(colorMode),
-      ...styles
+      ...selectStyles(colorMode)
     },
     theme: themeSelect
-  }));
+  })));
 }
 
 function SelectAsync({
   styles,
+  isError = false,
   ...rest
 }) {
   const {
     colorMode
   } = system.useColorMode();
-  return /*#__PURE__*/React__default.createElement(reactSelectAsyncPaginate.AsyncPaginate, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
+    isError: isError
+  }, /*#__PURE__*/React__default.createElement(reactSelectAsyncPaginate.AsyncPaginate, Object.assign({
+    classNamePrefix: "react-select"
+  }, rest, {
     styles: {
       ...selectStyles(colorMode),
       ...styles
     },
     theme: themeSelect
-  }));
+  })));
 }
 
 function SelectAsyncCreatable({
   styles,
+  isError = false,
   ...rest
 }) {
   const {
     colorMode
   } = system.useColorMode();
-  return /*#__PURE__*/React__default.createElement(ReactSelectAsyncCreatable, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
+    isError: isError
+  }, /*#__PURE__*/React__default.createElement(ReactSelectAsyncCreatable, Object.assign({
+    classNamePrefix: "react-select"
+  }, rest, {
     styles: {
       ...selectStyles(colorMode),
       ...styles
     },
     theme: themeSelect
-  }));
+  })));
 }
 
 function SelectCreatable({
   styles,
+  isError = false,
   ...rest
 }) {
   const {
     colorMode
   } = system.useColorMode();
-  return /*#__PURE__*/React__default.createElement(ReactSelectCreatable, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
+    isError: isError
+  }, /*#__PURE__*/React__default.createElement(ReactSelectCreatable, Object.assign({
+    classNamePrefix: "react-select"
+  }, rest, {
     styles: {
       ...selectStyles(colorMode),
       ...styles
     },
     theme: themeSelect
-  }));
+  })));
 }
 
 const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
@@ -2729,80 +2906,106 @@ const Button = {
 };
 
 const {
-  definePartsStyle
-} = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.checkboxAnatomy.keys);
-const $size = /*#__PURE__*/styledSystem.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,
+  defineMultiStyleConfig
+} = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.checkboxAnatomy.keys);
+const baseStyle = /*#__PURE__*/definePartsStyle({
+  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({
+  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({
+  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'
+    },
+    _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 = {
+  errors,
+  unstyled
 };
+const Checkbox = /*#__PURE__*/defineMultiStyleConfig({
+  baseStyle,
+  variants,
+  defaultProps: {
+    variant: 'errors'
+  }
+});
 
-const baseStyle = /*#__PURE__*/styledSystem.defineStyle({
+const baseStyle$1 = /*#__PURE__*/styledSystem.defineStyle({
   fontSize: 'field.sm',
   marginEnd: 1,
   mb: 1
 });
 const FormLabel = /*#__PURE__*/styledSystem.defineStyleConfig({
-  baseStyle
+  baseStyle: baseStyle$1
 });
 
 const {
   definePartsStyle: definePartsStyle$1,
-  defineMultiStyleConfig
+  defineMultiStyleConfig: defineMultiStyleConfig$1
 } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.inputAnatomy.keys);
-const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
+const baseStyle$2 = /*#__PURE__*/definePartsStyle$1({
   field: {
     width: '100%',
     minWidth: 0,
@@ -2908,7 +3111,7 @@ const outline = /*#__PURE__*/definePartsStyle$1(props => {
     }
   };
 });
-const unstyled = /*#__PURE__*/definePartsStyle$1({
+const unstyled$1 = /*#__PURE__*/definePartsStyle$1({
   field: {
     bg: 'transparent',
     px: '0',
@@ -2920,28 +3123,130 @@ const unstyled = /*#__PURE__*/definePartsStyle$1({
     height: 'auto'
   }
 });
-const variants = {
+const variants$1 = {
   outline,
-  unstyled
+  unstyled: unstyled$1
 };
-const Input = /*#__PURE__*/defineMultiStyleConfig({
-  baseStyle: baseStyle$1,
+const Input = /*#__PURE__*/defineMultiStyleConfig$1({
+  baseStyle: baseStyle$2,
   sizes: sizes$1,
-  variants,
+  variants: variants$1,
   defaultProps: {
     size: 'sm',
     variant: 'outline'
   }
 });
 
+const rotate = /*#__PURE__*/react$1.keyframes({
+  '0%': {
+    transform: 'rotate(0deg)'
+  },
+  '100%': {
+    transform: 'rotate(360deg)'
+  }
+});
+const LoaderStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
+  baseStyle: props => {
+    const colors$1 = props.color === 'white' ? 'white' : colors.primary[600];
+    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);`,
+      ':before': {
+        content: `''`,
+        display: 'block',
+        borderRadius: '50%',
+        width: '6px',
+        height: '6px',
+        position: 'absolute',
+        bottom: 0,
+        background: colors$1
+      }
+    };
+  },
+  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__*/styledSystem.createMultiStyleConfigHelpers(anatomy.popoverAnatomy.keys);
+const Popover = {
+  baseStyle: props => definePartsStyle$2({
+    popper: {
+      background: themeTools.mode('white', 'inherit')(props)
+    }
+  })
+};
+
+const {
+  definePartsStyle: definePartsStyle$3
 } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.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({
+  baseStyle: /*#__PURE__*/definePartsStyle$3({
     control: {
       _checked: {
         borderColor: 'primary.500',
@@ -2960,7 +3265,7 @@ const Radio = {
   }),
   // Two sizes: sm and md
   sizes: {
-    sm: /*#__PURE__*/definePartsStyle$2({
+    sm: /*#__PURE__*/definePartsStyle$3({
       control: {
         w: '3',
         h: '3'
@@ -2969,7 +3274,7 @@ const Radio = {
         fontSize: 'text.sm'
       }
     }),
-    md: /*#__PURE__*/definePartsStyle$2({
+    md: /*#__PURE__*/definePartsStyle$3({
       control: {
         w: '4',
         h: '4'
@@ -2978,7 +3283,7 @@ const Radio = {
         fontSize: 'text.md'
       }
     }),
-    lg: /*#__PURE__*/definePartsStyle$2({
+    lg: /*#__PURE__*/definePartsStyle$3({
       control: {
         w: '5',
         h: '5'
@@ -3000,10 +3305,10 @@ const Radio = {
 };
 
 const {
-  definePartsStyle: definePartsStyle$3,
-  defineMultiStyleConfig: defineMultiStyleConfig$1
+  definePartsStyle: definePartsStyle$4,
+  defineMultiStyleConfig: defineMultiStyleConfig$2
 } = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.switchAnatomy.keys);
-const baseStyle$2 = /*#__PURE__*/definePartsStyle$3({
+const baseStyle$3 = /*#__PURE__*/definePartsStyle$4({
   // define the part you're going to style
   container: {
     // ...
@@ -3019,45 +3324,88 @@ const baseStyle$2 = /*#__PURE__*/definePartsStyle$3({
     }
   }
 });
-const Switch = /*#__PURE__*/defineMultiStyleConfig$1({
-  baseStyle: baseStyle$2
+const Switch = /*#__PURE__*/defineMultiStyleConfig$2({
+  baseStyle: baseStyle$3
 });
 
-const {
-  definePartsStyle: definePartsStyle$4
-} = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.popoverAnatomy.keys);
-const Popover = {
-  baseStyle: props => definePartsStyle$4({
-    popper: {
-      background: themeTools.mode('white', 'inherit')(props)
-    }
-  })
+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 Textarea = {
-  baseStyle: {
+const outline$1 = /*#__PURE__*/react.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.low',
+      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__*/react.defineStyleConfig({
+  variants: {
+    outline: outline$1
+  },
+  defaultProps: {
+    variant: 'outline'
   }
-};
+});
 
 
 
@@ -3067,9 +3415,10 @@ var components = {
   Checkbox: Checkbox,
   FormLabel: FormLabel,
   Input: Input,
+  LoaderStyle: LoaderStyle,
+  Popover: Popover,
   Radio: Radio,
   Switch: Switch,
-  Popover: Popover,
   Textarea: Textarea
 };
 
@@ -3088,7 +3437,8 @@ const theme = /*#__PURE__*/react.extendTheme({
         background: 'neutral.400'
       },
       body: {
-        fontSize: 'text.sm'
+        fontSize: 'text.sm',
+        color: 'black.high'
       }
     }
   },
@@ -3365,12 +3715,14 @@ Object.defineProperty(exports, 'useTabsStyles', {
   }
 });
 exports.BreadCrumb = BreadCrumb;
+exports.Checkbox = CheckboxComponent;
 exports.DataTable = DataTable;
 exports.DatePickerMonth = DatePickerMonth;
 exports.Datepicker = Datepicker;
 exports.Field = Field;
 exports.Header = Header;
 exports.InputField = InputField;
+exports.Loader = Loader;
 exports.MainMenu = Navigation;
 exports.ModalBody = ModalBody;
 exports.ModalCloseButton = ModalCloseButton;