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

package/dist/internal-ui.esm.js

@@ -1,9 +1,9 @@
-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, 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, Checkbox as Checkbox$1, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, InputGroup, Input as Input$1, InputRightAddon, FormControl, FormLabel as FormLabel$1, InputRightElement, FormHelperText, FormErrorMessage, theme as theme$1, InputLeftAddon, InputLeftElement, forwardRef, useStyleConfig, 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, Button as Button$1, VisuallyHidden, Select as Select$1, useTab, useMultiStyleConfig, TabList as TabList$1, TabPanel as TabPanel$1, Stack, Heading, createMultiStyleConfigHelpers, defineStyleConfig as defineStyleConfig$1, defineStyle as defineStyle$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 { FiChevronsRight, FiHome, FiCalendar, FiX, FiPower, FiMoon, FiSun, FiChevronDown } from 'react-icons/fi';
+import React__default, { createElement, useRef, useEffect, useState, useMemo, Fragment, forwardRef as forwardRef$1, 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';
@@ -15,8 +15,9 @@ import ReactSelectAsyncCreatable from 'react-select/async-creatable';
 import ReactSelectCreatable from 'react-select/creatable';
 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 { checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy } from '@chakra-ui/anatomy';
+import { defineStyleConfig, defineStyle, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1 } from '@chakra-ui/styled-system';
+import '@fontsource/poppins';
 import axios from 'axios';
 
 /* eslint-disable react-hooks/rules-of-hooks */
@@ -29,7 +30,7 @@ const BreadCrumb = props => {
     disableHome,
     spacing = 2
   } = props;
-  const [neutral7, dark5] = useToken('colors', ['neutral.700', 'dark.500']);
+  const [neutral6, dark5] = useToken('colors', ['neutral.600', 'dark.500']);
   return /*#__PURE__*/createElement(Box, {
     "data-test-id": "CT_component_breadcrumb_breadcrumb",
     className: className,
@@ -42,16 +43,16 @@ const BreadCrumb = props => {
     alignItems: "center"
   }, /*#__PURE__*/createElement(Text, {
     pr: 2,
-    fontWeight: 500,
-    textStyle: "heading.3",
+    fontWeight: 600,
+    textStyle: "heading.4",
     color: useColorModeValue('neutral.700', 'white')
   }, title), /*#__PURE__*/createElement(Box, {
     h: "22px",
     borderLeft: "1px solid",
-    borderColor: useColorModeValue('neutral.700', 'white')
+    borderColor: useColorModeValue(neutral6, 'white')
   }), /*#__PURE__*/createElement(Breadcrumb, {
     separator: /*#__PURE__*/createElement(FiChevronsRight, {
-      color: useColorModeValue(neutral7, dark5),
+      color: useColorModeValue(neutral6, dark5),
       size: 14
     }),
     pl: 2.5,
@@ -101,7 +102,7 @@ const BreadCrumb = props => {
       cursor: 'default'
     }
   }, /*#__PURE__*/createElement(Text, {
-    color: useColorModeValue('dark.700', 'white'),
+    color: useColorModeValue(neutral6, 'white'),
     fontSize: "text.sm",
     fontWeight: 400
   }, title))))), children && /*#__PURE__*/createElement(Box, null, children));
@@ -114,6 +115,43 @@ BreadCrumb.defaultProps = {
   spacing: 2
 };
 
+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(Box, null, /*#__PURE__*/React__default.createElement(Box, {
+    ml: "8px"
+  }, /*#__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: isDisabled ? 'black.low' : 'black.medium'
+  }, helpText)));
+}
+CheckboxComponent.defaultProps = {
+  isError: false,
+  helpText: '',
+  errorText: ''
+};
+
 const IndeterminateCheckbox = ({
   indeterminate = false,
   ...rest
@@ -1302,7 +1340,7 @@ const success = {
   '200': '#A9F9B5',
   '300': '#7CEE98',
   '400': '#58DD86',
-  '500': '#28c76f',
+  '500': '#28C76F',
   '600': '#1DAB6A',
   '700': '#148F63',
   '800': '#0C7359',
@@ -1430,8 +1468,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 +1483,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 +1515,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 +1533,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 +1574,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 +1665,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 +1694,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
 };
@@ -1690,35 +1753,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(FormControl, {
     isInvalid: isError
   }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(FormLabel$1, {
-    fontSize: "field.sm",
+    mb: 1,
+    fontSize: "text.sm",
     requiredIndicator: undefined
   }, isRequired && /*#__PURE__*/React__default.createElement(Box, {
     as: "span",
-    color: "red.500",
+    color: "danger.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);
+  }, "*"), 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,
-  error: undefined,
-  helperText: undefined,
+  isSuccess: false,
+  isDisabled: false,
+  errorMessage: undefined,
+  leftHelperText: undefined,
+  rightHelperText: undefined,
   isRequired: false
 };
 
@@ -1734,15 +1825,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(InputGroup, {
     size: size
@@ -1759,21 +1856,36 @@ InputField.defaultProps = {
   elementRight: undefined
 };
 
+const Loader = /*#__PURE__*/forwardRef((props, ref) => {
+  const styles = useStyleConfig('LoaderStyle', props);
+  return /*#__PURE__*/React__default.createElement(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(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, {
@@ -1928,6 +2040,7 @@ const Header = ({
   data,
   onLogout,
   onOpenModalRelease,
+  hideSwitchMode,
   ...props
 }) => /*#__PURE__*/createElement(Box, Object.assign({
   minH: 14,
@@ -1948,14 +2061,15 @@ const Header = ({
   onOpenModalRelease: onOpenModalRelease
 })), /*#__PURE__*/createElement(Flex, {
   alignItems: "center"
-}, /*#__PURE__*/createElement(SwitchMode, null), /*#__PURE__*/createElement(Profile, {
+}, !hideSwitchMode && /*#__PURE__*/createElement(SwitchMode, null), /*#__PURE__*/createElement(Profile, {
   data: data,
   onLogout: onLogout
 }))));
 Header.defaultProps = {
   data: undefined,
   onLogout: undefined,
-  onOpenModalRelease: undefined
+  onOpenModalRelease: undefined,
+  hideSwitchMode: false
 };
 
 const ModalBody = /*#__PURE__*/React__default.forwardRef(({
@@ -1968,7 +2082,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,
@@ -1978,7 +2092,7 @@ const ModalCloseButton = /*#__PURE__*/forwardRef((props, ref) => {
   }, props));
 });
 
-const ModalFooter = /*#__PURE__*/forwardRef(({
+const ModalFooter = /*#__PURE__*/forwardRef$1(({
   children,
   ...rest
 }, ref) => {
@@ -1989,7 +2103,7 @@ const ModalFooter = /*#__PURE__*/forwardRef(({
   }, rest), children);
 });
 
-const ModalHeader = /*#__PURE__*/forwardRef(({
+const ModalHeader = /*#__PURE__*/forwardRef$1(({
   children,
   ...rest
 }, ref) => {
@@ -2001,6 +2115,28 @@ const ModalHeader = /*#__PURE__*/forwardRef(({
   }, rest), children);
 });
 
+const CustomerIcon = /*#__PURE__*/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', FiShoppingBag], ['Fulfillment', FiShoppingCart], ['Transfer Stock', FiRepeat], ['Stock', FiBox], ['Product Database', FiLayers], ['Purchasing', FiDollarSign], ['Reseller', FiUsers], ['Retur', FiRotateCcw], ['Other', FiSettings], ['Content', FiLayout], ['Voucher', FiGift], ['Customer', CustomerIcon]]);
+
 /* eslint-disable react-hooks/rules-of-hooks */
 const Navigation = ({
   navigations,
@@ -2040,7 +2176,7 @@ const Navigation = ({
       color: isActive ? 'white' : 'inherit',
       p: 2
     }, /*#__PURE__*/createElement(Icon, {
-      as: navigation.icon,
+      as: mappingIcon.get(navigation.title),
       mr: 2
     }), /*#__PURE__*/createElement(Text, {
       whiteSpace: "nowrap",
@@ -2060,8 +2196,7 @@ const Navigation = ({
     }, navigation.children.map(({
       title,
       navHost,
-      navLink,
-      icon
+      navLink
     }) => {
       const link = navHost ? `${navHost}${navLink}` : navLink;
       const isLocalLink = host === navHost;
@@ -2077,6 +2212,7 @@ const Navigation = ({
         display: "flex",
         position: "relative",
         alignItems: "center",
+        cursor: "pointer",
         transition: "padding 0.35s ease 0s",
         _hover: {
           backgroundColor: useColorModeValue('dove-gray.50', 'mirage.900'),
@@ -2097,7 +2233,7 @@ const Navigation = ({
         px: 6,
         py: 4
       }, /*#__PURE__*/createElement(Icon, {
-        as: icon,
+        as: mappingIcon.get(navigation.title),
         mr: 3
       }), /*#__PURE__*/createElement(Text, {
         fontSize: "text.sm"
@@ -2118,7 +2254,7 @@ Navigation.defaultProps = {
   host: undefined
 };
 
-const PaginationButton = /*#__PURE__*/forwardRef$1(({
+const PaginationButton = /*#__PURE__*/forwardRef(({
   className,
   style,
   isActive,
@@ -2338,23 +2474,45 @@ PaginationFilter.defaultProps = {
   label: undefined
 };
 
+const SelectWrapper = ({
+  children,
+  isError = false
+}) => {
+  return /*#__PURE__*/React__default.createElement(Box, {
+    css: 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
@@ -2424,71 +2582,91 @@ const themeSelect = theme => {
   };
 };
 
+/* eslint-disable react/require-default-props */
 function Select({
   styles,
+  isError = false,
   ...rest
 }) {
   const {
     colorMode
   } = 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
   } = useColorMode();
-  return /*#__PURE__*/React__default.createElement(AsyncPaginate, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
+    isError: isError
+  }, /*#__PURE__*/React__default.createElement(AsyncPaginate, Object.assign({
+    classNamePrefix: "react-select"
+  }, rest, {
     styles: {
       ...selectStyles(colorMode),
       ...styles
     },
     theme: themeSelect
-  }));
+  })));
 }
 
 function SelectAsyncCreatable({
   styles,
+  isError = false,
   ...rest
 }) {
   const {
     colorMode
   } = 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
   } = 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__*/forwardRef$1((props, ref) => {
+const Tab = /*#__PURE__*/forwardRef((props, ref) => {
   var _props$leftAddon, _props$rightAddon;
   const tabProps = useTab({
     ...props,
@@ -2516,13 +2694,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));
@@ -2722,80 +2900,106 @@ const Button = {
 };
 
 const {
-  definePartsStyle
+  definePartsStyle,
+  defineMultiStyleConfig
 } = /*#__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'
+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__*/defineStyle({
+const baseStyle$1 = /*#__PURE__*/defineStyle({
   fontSize: 'field.sm',
   marginEnd: 1,
   mb: 1
 });
 const FormLabel = /*#__PURE__*/defineStyleConfig({
-  baseStyle
+  baseStyle: baseStyle$1
 });
 
 const {
   definePartsStyle: definePartsStyle$1,
-  defineMultiStyleConfig
-} = /*#__PURE__*/createMultiStyleConfigHelpers(inputAnatomy.keys);
-const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
+  defineMultiStyleConfig: defineMultiStyleConfig$1
+} = /*#__PURE__*/createMultiStyleConfigHelpers$1(inputAnatomy.keys);
+const baseStyle$2 = /*#__PURE__*/definePartsStyle$1({
   field: {
     width: '100%',
     minWidth: 0,
@@ -2901,7 +3105,7 @@ const outline = /*#__PURE__*/definePartsStyle$1(props => {
     }
   };
 });
-const unstyled = /*#__PURE__*/definePartsStyle$1({
+const unstyled$1 = /*#__PURE__*/definePartsStyle$1({
   field: {
     bg: 'transparent',
     px: '0',
@@ -2913,28 +3117,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__*/keyframes({
+  '0%': {
+    transform: 'rotate(0deg)'
+  },
+  '100%': {
+    transform: 'rotate(360deg)'
+  }
+});
+const LoaderStyle = /*#__PURE__*/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__*/createMultiStyleConfigHelpers(radioAnatomy.keys);
+} = /*#__PURE__*/createMultiStyleConfigHelpers$1(popoverAnatomy.keys);
+const Popover = {
+  baseStyle: props => definePartsStyle$2({
+    popper: {
+      background: mode('white', 'inherit')(props)
+    }
+  })
+};
+
+const {
+  definePartsStyle: definePartsStyle$3
+} = /*#__PURE__*/createMultiStyleConfigHelpers$1(radioAnatomy.keys);
 // You can also use the more specific type for
 // a single part component: ComponentSingleStyleConfig
 const Radio = {
   // The styles all checkbox have in common
-  baseStyle: /*#__PURE__*/definePartsStyle$2({
+  baseStyle: /*#__PURE__*/definePartsStyle$3({
     control: {
       _checked: {
         borderColor: 'primary.500',
@@ -2953,7 +3259,7 @@ const Radio = {
   }),
   // Two sizes: sm and md
   sizes: {
-    sm: /*#__PURE__*/definePartsStyle$2({
+    sm: /*#__PURE__*/definePartsStyle$3({
       control: {
         w: '3',
         h: '3'
@@ -2962,7 +3268,7 @@ const Radio = {
         fontSize: 'text.sm'
       }
     }),
-    md: /*#__PURE__*/definePartsStyle$2({
+    md: /*#__PURE__*/definePartsStyle$3({
       control: {
         w: '4',
         h: '4'
@@ -2971,7 +3277,7 @@ const Radio = {
         fontSize: 'text.md'
       }
     }),
-    lg: /*#__PURE__*/definePartsStyle$2({
+    lg: /*#__PURE__*/definePartsStyle$3({
       control: {
         w: '5',
         h: '5'
@@ -2993,10 +3299,10 @@ const Radio = {
 };
 
 const {
-  definePartsStyle: definePartsStyle$3,
-  defineMultiStyleConfig: defineMultiStyleConfig$1
-} = /*#__PURE__*/createMultiStyleConfigHelpers$1(switchAnatomy.keys);
-const baseStyle$2 = /*#__PURE__*/definePartsStyle$3({
+  definePartsStyle: definePartsStyle$4,
+  defineMultiStyleConfig: defineMultiStyleConfig$2
+} = /*#__PURE__*/createMultiStyleConfigHelpers(switchAnatomy.keys);
+const baseStyle$3 = /*#__PURE__*/definePartsStyle$4({
   // define the part you're going to style
   container: {
     // ...
@@ -3012,45 +3318,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__*/createMultiStyleConfigHelpers(popoverAnatomy.keys);
-const Popover = {
-  baseStyle: props => definePartsStyle$4({
-    popper: {
-      background: 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__*/defineStyle$1(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__*/defineStyleConfig$1({
+  variants: {
+    outline: outline$1
+  },
+  defaultProps: {
+    variant: 'outline'
   }
-};
+});
 
 
 
@@ -3060,9 +3409,10 @@ var components = {
   Checkbox: Checkbox,
   FormLabel: FormLabel,
   Input: Input,
+  LoaderStyle: LoaderStyle,
+  Popover: Popover,
   Radio: Radio,
   Switch: Switch,
-  Popover: Popover,
   Textarea: Textarea
 };
 
@@ -3081,7 +3431,8 @@ const theme = /*#__PURE__*/extendTheme({
         background: 'neutral.400'
       },
       body: {
-        fontSize: 'text.sm'
+        fontSize: 'text.sm',
+        color: 'black.high'
       }
     }
   },
@@ -3123,5 +3474,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 { BreadCrumb, CheckboxComponent as Checkbox, DataTable, DatePickerMonth, Datepicker, Field, Header, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Tab, TabList, TabPanel, TextareaField, Uploader, theme, useInternalUI };
 //# sourceMappingURL=internal-ui.esm.js.map