@ctlyst.id/internal-ui 2.0.28 → 2.0.29-canary.1

package/dist/internal-ui.esm.js

@@ -4,7 +4,7 @@ import React__default, { createElement, forwardRef as forwardRef$2, useMemo, use
 import { createContext } from '@chakra-ui/react-context';
 import { CheckCircle, Info, AlertTriangle, Close, EyeOff, Eye, Rating as Rating$1, Check } from '@ctlyst.id/internal-icon';
 import { cx as cx$1 } from '@chakra-ui/utils';
-import { forwardRef as forwardRef$1, useStyleConfig, Box, Button as Button$2, Badge as Badge$2, useToken, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, defineStyle, InputGroup, Input as Input$1, InputRightAddon, InputRightElement, theme as theme$1, InputLeftAddon, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, 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, Grid, useMultiStyleConfig as useMultiStyleConfig$1, omitThemingProps as omitThemingProps$1, useCheckbox, chakra as chakra$1, useTab, TabList as TabList$1, TabPanel as TabPanel$1, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, defineStyleConfig as defineStyleConfig$1, extendTheme } from '@chakra-ui/react';
+import { forwardRef as forwardRef$1, useStyleConfig, Box, Button as Button$2, Badge as Badge$2, useToken, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, defineStyle, InputGroup, Input as Input$1, InputRightAddon, InputRightElement, InputLeftAddon, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, 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, Grid, useMultiStyleConfig as useMultiStyleConfig$1, omitThemingProps as omitThemingProps$1, useCheckbox, chakra as chakra$1, 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, Box, ButtonGroup, Center, ChakraProvider, Table as ChakraTable, CloseButton, Code, Collapse, ColorModeScript, Container, Divider, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, DrawerContent, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, Flex, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, Icon, IconButton, Image, InputLeftElement as InputElementLeft, InputRightElement as InputElementRight, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Link, List, ListIcon, ListItem, Modal, ModalContent, ModalContextProvider, ModalFocusScope, ModalOverlay, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RequiredIndicator, ScaleFade, SimpleGrid, Skeleton, Spacer, Stack, TabIndicator, TabPanels, Tabs, TabsDescendantsProvider, TabsProvider, Tbody, Td, Text, Th, Thead, Tooltip, Tr, UnorderedList, VStack, Wrap, WrapItem, extendTheme, forwardRef, useBoolean, useColorMode, useColorModeValue, useDisclosure, useDrawerContext, useModal, useModalContext, useModalStyles, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTabsStyles, useToken } from '@chakra-ui/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';
@@ -1736,423 +1736,6 @@ DatePickerMonth.defaultProps = {
   'data-test-id': ''
 };
 
-const transparent = 'transparent';
-const black = {
-  high: '#111111',
-  medium: '#707070',
-  low: '#B8B8B8'
-};
-const white = {
-  high: '#FFFFFF',
-  medium: '#F1F1F1',
-  low: '#CCCCCC'
-};
-const neutral = {
-  '50': '#FFFFFF',
-  '100': '#FAFAFA',
-  '200': '#F5F5F5',
-  '300': '#EEEEEE',
-  '400': '#E0E0E0',
-  '500': '#BDBDBD',
-  '600': '#999999',
-  '700': '#242424',
-  '800': '#181818',
-  '900': '#111111'
-};
-const primary = {
-  '50': '#DFFFF1',
-  '100': '#ACF5D5',
-  '200': '#5EE5A9',
-  '300': '#05CB72',
-  '400': '#08A45E',
-  '500': '#12784A',
-  '600': '#0B603A',
-  '700': '#075331',
-  '800': '#064126',
-  '900': '#042E1B'
-};
-const secondary = {
-  '50': '#F2F2F3',
-  '100': '#DADBDD',
-  '200': '#C2C4C7',
-  '300': '#AAADB0',
-  '400': '#93969A',
-  '500': '#7B7F84',
-  '600': '#62666A',
-  '700': '#4A4C4F',
-  '800': '#313335',
-  '900': '#19191A'
-};
-const success = {
-  '50': '#ECFFED',
-  '100': '#D3FCD5',
-  '200': '#A9F9B5',
-  '300': '#7CEE98',
-  '400': '#58DD86',
-  '500': '#28C76F',
-  '600': '#1DAB6A',
-  '700': '#148F63',
-  '800': '#0C7359',
-  '900': '#075F51'
-};
-const danger = {
-  '50': '#FFEDEC',
-  '100': '#FFC7C2',
-  '200': '#FF8279',
-  '300': '#FF5B4F',
-  '400': '#F44336',
-  '500': '#D82F23',
-  '600': '#B71C1C',
-  '700': '#930B0B',
-  '800': '#660909',
-  '900': '#3E0707'
-};
-const warning = {
-  '50': '#FFF9EC',
-  '100': '#FFEFCC',
-  '200': '#FFD591',
-  '300': '#FFC069',
-  '400': '#FFA230',
-  '500': '#F68522',
-  '600': '#EF6C00',
-  '700': '#C65B03',
-  '800': '#9F4901',
-  '900': '#652E00'
-};
-const info = {
-  '50': '#EBFFFB',
-  '100': '#CBFDF2',
-  '200': '#97FCEF',
-  '300': '#63F8F0',
-  '400': '#3CECF1',
-  '500': '#00CFE8',
-  '600': '#00A1C7',
-  '700': '#007AA7',
-  '800': '#005786',
-  '900': '#003F6F'
-};
-const dark = {
-  '50': '#F2F2F2',
-  '100': '#DBDBDB',
-  '200': '#C4C4C4',
-  '300': '#ADADAD',
-  '400': '#969696',
-  '500': '#808080',
-  '600': '#666666',
-  '700': '#4D4D4D',
-  '800': '#333333',
-  '900': '#1A1A1A'
-};
-const mirage = {
-  '50': '#EDF0F7',
-  '100': '#CED5E9',
-  '200': '#AEBADB',
-  '300': '#8E9ECC',
-  '400': '#6F83BE',
-  '500': '#4F68B0',
-  '600': '#3F538D',
-  '700': '#2F3E6A',
-  '800': '#202A46',
-  '900': '#101523'
-};
-const ebonyClay = {
-  '50': '#EFF1F6',
-  '100': '#D2D7E5',
-  '200': '#B4BDD4',
-  '300': '#97A3C4',
-  '400': '#7A89B3',
-  '500': '#5D6FA2',
-  '600': '#4A5982',
-  '700': '#384361',
-  '800': '#252D41',
-  '900': '#131620'
-};
-const brightGray = {
-  '50': '#F0F1F4',
-  '100': '#D5D9E1',
-  '200': '#BAC0CE',
-  '300': '#A0A8BB',
-  '400': '#858FA8',
-  '500': '#6A7795',
-  '600': '#555F77',
-  '700': '#404759',
-  '800': '#2A2F3C',
-  '900': '#15181E'
-};
-const doveGray = {
-  '50': '#F2F2F2',
-  '100': '#DBDBDB',
-  '200': '#C4C4C4',
-  '300': '#ADADAD',
-  '400': '#969696',
-  '500': '#808080',
-  '600': '#666666',
-  '700': '#4D4D4D',
-  '800': '#333333',
-  '900': '#1A1A1A'
-};
-const colors = {
-  transparent,
-  black,
-  white,
-  neutral,
-  primary,
-  secondary,
-  success,
-  danger,
-  warning,
-  info,
-  dark,
-  mirage,
-  'ebony-clay': ebonyClay,
-  'bright-gray': brightGray,
-  'dove-gray': doveGray
-};
-
-const radius = {
-  none: 0,
-  sm: '2px',
-  md: '4px',
-  lg: '8px',
-  full: '9999px'
-};
-
-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',
-  22: '5.5rem',
-  26: '6.5rem',
-  30: '7.5rem'
-};
-
-const spacing = {
-  ...theme$1.space,
-  4.5: '1.125rem',
-  9.5: '2.375rem',
-  18: '4.5rem',
-  22: '5.5rem',
-  26: '6.5rem',
-  30: '7.5rem'
-};
-
-const fonts = {
-  heading: `'Poppins', sans-serif`,
-  body: `'Poppins', sans-serif`
-};
-const fontWeights = {
-  hairline: 100,
-  thin: 200,
-  light: 300,
-  normal: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-  extrabold: 800,
-  black: 900
-};
-const lineHeights = {
-  normal: 'normal',
-  none: 1,
-  shorter: 1.25,
-  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',
-  28: '1.75',
-  26: '1.625rem',
-  24: '1.5rem',
-  22: '1.375rem',
-  20: '1.25rem',
-  18: '1.125rem',
-  16: '1rem',
-  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: '2.5rem',
-    2: '2rem',
-    3: '1.75rem',
-    4: '1.5rem',
-    5: '1.375rem',
-    6: '1.125rem'
-  },
-  text: {
-    xl: '1.125rem',
-    lg: '1rem',
-    md: '0.875rem',
-    sm: '0.75rem',
-    xs: '0.625rem'
-  },
-  button: {
-    lg: '1.125rem',
-    md: '0.875rem',
-    sm: '0.625rem'
-  },
-  field: {
-    lg: '1rem',
-    md: '0.875rem',
-    sm: '0.75rem'
-  },
-  table: {
-    header: '0.75rem'
-  }
-};
-const heading = {
-  1: {
-    fontSize: fontSizes.heading[1],
-    fontWeight: fontWeights.semibold,
-    lineHeight: lineHeights[64],
-    letterSpacing: letterSpacings.normal
-  },
-  2: {
-    fontSize: fontSizes.heading[2],
-    fontWeight: fontWeights.semibold,
-    lineHeight: lineHeights[56],
-    letterSpacing: letterSpacings.normal
-  },
-  3: {
-    fontSize: fontSizes.heading[3],
-    fontWeight: fontWeights.semibold,
-    lineHeight: lineHeights[48],
-    letterSpacing: letterSpacings.normal
-  },
-  4: {
-    fontSize: fontSizes.heading[4],
-    fontWeight: fontWeights.semibold,
-    lineHeight: lineHeights[40],
-    letterSpacing: letterSpacings.normal
-  },
-  5: {
-    fontSize: fontSizes.heading[5],
-    fontWeight: fontWeights.semibold,
-    lineHeight: lineHeights[36],
-    letterSpacing: letterSpacings.normal
-  },
-  6: {
-    fontSize: fontSizes.heading[6],
-    fontWeight: fontWeights.semibold,
-    lineHeight: lineHeights[32],
-    letterSpacing: letterSpacings.normal
-  }
-};
-const text = {
-  xl: {
-    fontSize: fontSizes.text.xl,
-    fontWeight: fontWeights.normal,
-    lineHeight: lineHeights[28],
-    letterSpacing: letterSpacings.normal
-  },
-  lg: {
-    fontSize: fontSizes.text.lg,
-    fontWeight: fontWeights.normal,
-    lineHeight: lineHeights[24],
-    letterSpacing: letterSpacings.normal
-  },
-  md: {
-    fontSize: fontSizes.text.md,
-    fontWeight: fontWeights.normal,
-    lineHeight: lineHeights[22],
-    letterSpacing: letterSpacings.normal
-  },
-  sm: {
-    fontSize: fontSizes.text.sm,
-    fontWeight: fontWeights.normal,
-    lineHeight: lineHeights[18],
-    letterSpacing: letterSpacings.normal
-  },
-  xs: {
-    fontSize: fontSizes.text.xs,
-    fontWeight: fontWeights.normal,
-    lineHeight: lineHeights[14],
-    letterSpacing: letterSpacings.normal
-  }
-};
-const button = {
-  lg: {
-    fontSize: fontSizes.button.lg,
-    lineHeight: lineHeights[28],
-    letterSpacing: letterSpacings.normal,
-    fontWeight: fontWeights.normal
-  },
-  md: {
-    fontSize: fontSizes.button.md,
-    lineHeight: lineHeights[22],
-    letterSpacing: letterSpacings.normal,
-    fontWeight: fontWeights.normal
-  },
-  sm: {
-    fontSize: fontSizes.button.sm,
-    lineHeight: lineHeights[14],
-    letterSpacing: letterSpacings.normal,
-    fontWeight: fontWeights.normal
-  }
-};
-const field = {
-  lg: {
-    fontSize: fontSizes.field.lg,
-    lineHeight: lineHeights[24],
-    letterSpacing: letterSpacings.normal,
-    fontWeight: fontWeights.normal
-  },
-  md: {
-    fontSize: fontSizes.field.md,
-    lineHeight: lineHeights[22],
-    letterSpacing: letterSpacings.normal,
-    fontWeight: fontWeights.normal
-  },
-  sm: {
-    fontSize: fontSizes.field.sm,
-    lineHeight: lineHeights[18],
-    letterSpacing: letterSpacings.normal,
-    fontWeight: fontWeights.normal
-  }
-};
-const textStyles = {
-  heading,
-  text,
-  button,
-  field
-};
-
-
-
-var foundations = {
-  __proto__: null,
-  colors: colors,
-  radii: radius,
-  shadows: shadows,
-  sizes: sizes,
-  space: spacing,
-  fonts: fonts,
-  fontSizes: fontSizes,
-  letterSpacings: letterSpacings,
-  lineHeights: lineHeights,
-  textStyles: textStyles
-};
-
 const MultiDateWrapper = /*#__PURE__*/styled(Box)`
   display: flex;
   align-items: center;
@@ -2162,7 +1745,7 @@ const MultiDateWrapper = /*#__PURE__*/styled(Box)`
   border-radius: 4px;
   border-color: ${({
   isError
-}) => isError ? `${colors.danger[500]}` : `${colors.primary[500]}`};
+}) => isError ? 'var(--chakra-colors-danger-500)' : 'var(--chakra-colors-primary-500)'};
 `;
 const MultiDatePickerMonth = ({
   onChange,
@@ -3031,6 +2614,197 @@ SelectWrapper.defaultProps = {
   isError: false
 };
 
+const fontWeights = {
+  hairline: 100,
+  thin: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900
+};
+const lineHeights = {
+  normal: 'normal',
+  none: 1,
+  shorter: 1.25,
+  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',
+  28: '1.75',
+  26: '1.625rem',
+  24: '1.5rem',
+  22: '1.375rem',
+  20: '1.25rem',
+  18: '1.125rem',
+  16: '1rem',
+  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: '2.5rem',
+    2: '2rem',
+    3: '1.75rem',
+    4: '1.5rem',
+    5: '1.375rem',
+    6: '1.125rem'
+  },
+  text: {
+    xl: '1.125rem',
+    lg: '1rem',
+    md: '0.875rem',
+    sm: '0.75rem',
+    xs: '0.625rem'
+  },
+  button: {
+    lg: '1.125rem',
+    md: '0.875rem',
+    sm: '0.625rem'
+  },
+  field: {
+    lg: '1rem',
+    md: '0.875rem',
+    sm: '0.75rem'
+  },
+  table: {
+    header: '0.75rem'
+  }
+};
+const heading = {
+  1: {
+    fontSize: fontSizes.heading[1],
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights[64],
+    letterSpacing: letterSpacings.normal
+  },
+  2: {
+    fontSize: fontSizes.heading[2],
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights[56],
+    letterSpacing: letterSpacings.normal
+  },
+  3: {
+    fontSize: fontSizes.heading[3],
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights[48],
+    letterSpacing: letterSpacings.normal
+  },
+  4: {
+    fontSize: fontSizes.heading[4],
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights[40],
+    letterSpacing: letterSpacings.normal
+  },
+  5: {
+    fontSize: fontSizes.heading[5],
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights[36],
+    letterSpacing: letterSpacings.normal
+  },
+  6: {
+    fontSize: fontSizes.heading[6],
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights[32],
+    letterSpacing: letterSpacings.normal
+  }
+};
+const text = {
+  xl: {
+    fontSize: fontSizes.text.xl,
+    fontWeight: fontWeights.normal,
+    lineHeight: lineHeights[28],
+    letterSpacing: letterSpacings.normal
+  },
+  lg: {
+    fontSize: fontSizes.text.lg,
+    fontWeight: fontWeights.normal,
+    lineHeight: lineHeights[24],
+    letterSpacing: letterSpacings.normal
+  },
+  md: {
+    fontSize: fontSizes.text.md,
+    fontWeight: fontWeights.normal,
+    lineHeight: lineHeights[22],
+    letterSpacing: letterSpacings.normal
+  },
+  sm: {
+    fontSize: fontSizes.text.sm,
+    fontWeight: fontWeights.normal,
+    lineHeight: lineHeights[18],
+    letterSpacing: letterSpacings.normal
+  },
+  xs: {
+    fontSize: fontSizes.text.xs,
+    fontWeight: fontWeights.normal,
+    lineHeight: lineHeights[14],
+    letterSpacing: letterSpacings.normal
+  }
+};
+const button = {
+  lg: {
+    fontSize: fontSizes.button.lg,
+    lineHeight: lineHeights[28],
+    letterSpacing: letterSpacings.normal,
+    fontWeight: fontWeights.normal
+  },
+  md: {
+    fontSize: fontSizes.button.md,
+    lineHeight: lineHeights[22],
+    letterSpacing: letterSpacings.normal,
+    fontWeight: fontWeights.normal
+  },
+  sm: {
+    fontSize: fontSizes.button.sm,
+    lineHeight: lineHeights[14],
+    letterSpacing: letterSpacings.normal,
+    fontWeight: fontWeights.normal
+  }
+};
+const field = {
+  lg: {
+    fontSize: fontSizes.field.lg,
+    lineHeight: lineHeights[24],
+    letterSpacing: letterSpacings.normal,
+    fontWeight: fontWeights.normal
+  },
+  md: {
+    fontSize: fontSizes.field.md,
+    lineHeight: lineHeights[22],
+    letterSpacing: letterSpacings.normal,
+    fontWeight: fontWeights.normal
+  },
+  sm: {
+    fontSize: fontSizes.field.sm,
+    lineHeight: lineHeights[18],
+    letterSpacing: letterSpacings.normal,
+    fontWeight: fontWeights.normal
+  }
+};
+const textStyles = {
+  heading,
+  text,
+  button,
+  field
+};
+
 const styleMd = textStyles.text.sm;
 const selectStyle = {
   fontSize: styleMd.fontSize,
@@ -3041,20 +2815,20 @@ const boxShadow = color => `0 0 0 1px ${color}`;
 function selectStyles(colorMode, _isError) {
   const boxShadowLight = (isFocused = false, isError = false) => {
     if (isError && isFocused || isError) {
-      return boxShadow(colors.danger['500']);
+      return boxShadow('danger.500');
     }
     if (isFocused) {
-      return boxShadow(colors.primary['500']);
+      return boxShadow('primary.500');
     }
-    return boxShadow(colors.neutral['400']);
+    return boxShadow('neutral.400');
   };
   return {
     control: (base, state) => colorMode === 'dark' ? {
       ...base,
       ...selectStyle,
       background: 'transparent',
-      color: colors.primary['300'],
-      borderColor: colors.secondary['500'],
+      color: 'primary.300',
+      borderColor: 'secondary.500',
       boxShadow: state.isFocused ? 'none' : `inherit`
     } : {
       ...base,
@@ -3067,7 +2841,7 @@ function selectStyles(colorMode, _isError) {
     }) => colorMode === 'dark' ? {
       ...base,
       ...selectStyle,
-      background: isSelected ? colors.primary['700'] : colors.dark['800'],
+      background: isSelected ? 'primary.700' : 'dark.800',
       color: 'white'
     } : {
       ...base,
@@ -3076,7 +2850,7 @@ function selectStyles(colorMode, _isError) {
     menu: base => colorMode === 'dark' ? {
       ...base,
       ...selectStyle,
-      background: colors.dark['800'],
+      background: 'dark.800',
       zIndex: 5
     } : {
       ...base,
@@ -3102,7 +2876,7 @@ function selectStyles(colorMode, _isError) {
     dropdownIndicator: base => colorMode === 'dark' ? {
       ...base,
       ...selectStyle,
-      color: colors.secondary['500']
+      color: 'secondary.500'
     } : {
       ...base,
       ...selectStyle
@@ -3110,7 +2884,7 @@ function selectStyles(colorMode, _isError) {
     indicatorSeparator: base => colorMode === 'dark' ? {
       ...base,
       ...selectStyle,
-      backgroundColor: colors.secondary['500']
+      backgroundColor: 'secondary.500'
     } : {
       ...base,
       ...selectStyle
@@ -3119,7 +2893,7 @@ function selectStyles(colorMode, _isError) {
       return {
         ...base,
         ...selectStyle,
-        color: colors.black.low
+        color: 'black.low'
       };
     }
   };
@@ -3129,10 +2903,10 @@ const themeSelect = theme => {
     ...theme,
     colors: {
       ...theme.colors,
-      primary: colors.primary['500'],
-      primary25: colors.primary['50'],
-      primary50: colors.primary['100'],
-      primary75: colors.primary['200']
+      primary: 'primary.500',
+      primary25: 'primary.50',
+      primary50: 'primary.100',
+      primary75: 'primary.200'
     }
   };
 };
@@ -4115,7 +3889,7 @@ const size = {
     borderRadius: 'md'
   })
 };
-const sizes$1 = {
+const sizes = {
   lg: /*#__PURE__*/definePartsStyle$2({
     field: size.lg,
     addon: size.lg
@@ -4165,7 +3939,7 @@ const variants$2 = {
 };
 const Input = /*#__PURE__*/defineMultiStyleConfig$2({
   baseStyle: baseStyle$3,
-  sizes: sizes$1,
+  sizes,
   variants: variants$2,
   defaultProps: {
     size: 'sm',
@@ -4182,10 +3956,10 @@ const rotate = /*#__PURE__*/keyframes({
   }
 });
 const getLoaderColor = color => {
-  if (color === 'primary') return colors.primary[600];
-  if (color === 'danger') return colors.danger[500];
-  if (color === 'warning') return colors.warning[700];
-  return colors.white.high;
+  if (color === 'primary') return '--chakra-colors-primary-600';
+  if (color === 'danger') return '--chakra-colors-danger-500';
+  if (color === 'warning') return '--chakra-colors-warning-700';
+  return '--chakra-colors-white-high';
 };
 const LoaderStyle = /*#__PURE__*/defineStyleConfig({
   baseStyle: props => {
@@ -4196,7 +3970,7 @@ const LoaderStyle = /*#__PURE__*/defineStyleConfig({
       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);`,
+      background: `conic-gradient(from 180deg at 50% 50%, var(${colors}) 0deg, rgba(217, 217, 217, 0) 360deg);`,
       ':before': {
         content: `''`,
         display: 'block',
@@ -4427,7 +4201,7 @@ const baseStyle$5 = /*#__PURE__*/definePartsStyle$5(() => ({
   },
   thumb: baseStyleThumb
 }));
-const sizes$2 = {
+const sizes$1 = {
   sm: /*#__PURE__*/definePartsStyle$5({
     container: {
       [$width.variable]: '2.125rem',
@@ -4449,7 +4223,7 @@ const sizes$2 = {
 };
 const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$4({
   baseStyle: baseStyle$5,
-  sizes: sizes$2,
+  sizes: sizes$1,
   defaultProps: {
     size: 'md'
   }
@@ -4570,7 +4344,7 @@ const variants$4 = {
   striped: variantStripe,
   unstyled: /*#__PURE__*/defineStyle$1({})
 };
-const sizes$3 = {
+const sizes$2 = {
   sm: /*#__PURE__*/definePartsStyle$6({
     th: {
       px: '4',
@@ -4642,7 +4416,7 @@ const sizes$3 = {
 const tableTheme = /*#__PURE__*/defineMultiStyleConfig$5({
   baseStyle: baseStyle$6,
   variants: variants$4,
-  sizes: sizes$3,
+  sizes: sizes$2,
   defaultProps: {
     variant: 'simple',
     size: 'md',
@@ -4753,8 +4527,27 @@ const config = {
   initialColorMode: 'light',
   useSystemColorMode: false
 };
+const getTheme = foundations => {
+  return extendTheme({
+    ...foundations,
+    components: {
+      ...components
+    },
+    styles: {
+      global: {
+        '*::-webkit-scrollbar-thumb': {
+          background: 'neutral.400'
+        },
+        body: {
+          fontSize: 'text.sm',
+          color: 'black.high'
+        }
+      }
+    },
+    config
+  });
+};
 const theme = /*#__PURE__*/extendTheme({
-  ...foundations,
   components: {
     ...components
   },
@@ -4836,5 +4629,5 @@ function useFetcher() {
   };
 }
 
-export { Alert, AlertAction, AlertClose, AlertDescription, AlertIcon, AlertTitle, Badge, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Chips, DataTable, DatePickerMonth, Datepicker, Field, Header, InputAddonLeft, InputAddonRight, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, RadioComponent as Radio, RadioGroupComponent as RadioGroup, Rating, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Switch, Tab, TabList, TabPanel, TextareaField, Uploader, foundations, theme, useAlertStyles, useFetcher, useInternalUI };
+export { Alert, AlertAction, AlertClose, AlertDescription, AlertIcon, AlertTitle, Badge, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Chips, DataTable, DatePickerMonth, Datepicker, Field, Header, InputAddonLeft, InputAddonRight, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, RadioComponent as Radio, RadioGroupComponent as RadioGroup, Rating, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Switch, Tab, TabList, TabPanel, TextareaField, Uploader, getTheme, theme, useAlertStyles, useFetcher, useInternalUI };
 //# sourceMappingURL=internal-ui.esm.js.map