@ctlyst.id/internal-ui 2.1.1-canary.0 → 2.1.2

package/dist/internal-ui.esm.js

@@ -4,9 +4,9 @@ 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, 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, theme as theme$1, Text, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, Flex, Spinner, Table, Thead, Tr, useColorModeValue, 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 { FiChevronLeft, FiChevronsRight, FiHome, FiCalendar, FiX, FiPower, FiMoon, FiSun, FiShoppingBag, FiShoppingCart, FiRepeat, FiBox, FiLayers, FiDollarSign, FiUsers, FiRotateCcw, FiSettings, FiLayout, FiGift, FiChevronDown } from 'react-icons/fi';
 import { ChevronUpIcon, ChevronDownIcon, UpDownIcon, ArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, ArrowRightIcon } from '@chakra-ui/icons';
 import { css, Global, keyframes } from '@emotion/react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
@@ -20,7 +20,7 @@ import ReactSelectCreatable from 'react-select/creatable';
 import { useDropzone } from 'react-dropzone';
 import { alertAnatomy, checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy, tableAnatomy } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers, cssVar, defineStyleConfig, defineStyle as defineStyle$1 } from '@chakra-ui/styled-system';
-import { transparentize, mode, calc, cssVar as cssVar$1 } from '@chakra-ui/theme-tools';
+import { mode, calc, cssVar as cssVar$1 } from '@chakra-ui/theme-tools';
 import axios from 'axios';
 
 /* eslint-disable react/require-default-props */
@@ -69,6 +69,10 @@ const STATUSES = {
   error: {
     icon: WarningIcon,
     colorScheme: 'danger'
+  },
+  neutral: {
+    icon: InfoIcon,
+    colorScheme: 'neutral'
   }
 };
 function getStatusColorScheme(status) {
@@ -168,10 +172,9 @@ function AlertAction({
   const css = styles.action;
   return /*#__PURE__*/React__default.createElement(Button, {
     "data-test-id": "alert-action",
-    className: cx$1('chakra-alert__close', className),
+    className: cx$1('chakra-alert__action', className),
     variant: "link",
-    color: "inherit",
-    fontWeight: "700",
+    fontWeight: "semibold",
     __css: css
   }, children);
 }
@@ -259,10 +262,10 @@ const Badge = props => {
     ...rest
   } = props;
   return /*#__PURE__*/React__default.createElement(Badge$2, Object.assign({
-    borderRadius: pill ? 10 : 4,
+    borderRadius: pill ? 'xl' : 'sm',
     variant: "primary-solid",
-    padding: "0 8px",
-    height: "18px",
+    px: "2",
+    h: "4.5",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "space-between",
@@ -281,9 +284,10 @@ const BreadCrumb = props => {
     parents,
     className,
     disableHome,
-    spacing = 2
+    spacing = 2,
+    backButton
   } = props;
-  const [neutral6, dark5] = useToken('colors', ['neutral.600', 'dark.500']);
+  const [neutral600, primary500] = useToken('colors', ['neutral.600', 'primary.500']);
   return /*#__PURE__*/createElement(Box, {
     "data-test-id": "CT_component_breadcrumb_breadcrumb",
     className: className,
@@ -294,22 +298,29 @@ const BreadCrumb = props => {
   }, /*#__PURE__*/createElement(Box, {
     display: "flex",
     alignItems: "center"
-  }, /*#__PURE__*/createElement(Text, {
-    pr: 2,
-    fontWeight: 600,
-    textStyle: "heading.4",
-    color: useColorModeValue('neutral.700', 'white')
+  }, backButton && /*#__PURE__*/createElement(Button, {
+    variant: "icon",
+    "data-test-id": "button",
+    size: "md",
+    mr: "2",
+    onClick: backButton
+  }, /*#__PURE__*/createElement(FiChevronLeft, {
+    size: theme$1.sizes[5]
+  })), /*#__PURE__*/createElement(Text, {
+    pr: "2",
+    textStyle: "heading.6",
+    color: "neutral.700"
   }, title), /*#__PURE__*/createElement(Box, {
-    h: "22px",
+    h: "5.5",
     borderLeft: "1px solid",
-    borderColor: useColorModeValue(neutral6, 'white')
+    borderColor: neutral600
   }), /*#__PURE__*/createElement(Breadcrumb, {
     separator: /*#__PURE__*/createElement(FiChevronsRight, {
-      color: useColorModeValue(neutral6, dark5),
-      size: 14
+      color: neutral600,
+      size: theme$1.sizes['3.5']
     }),
-    pl: 2.5,
-    pr: 4,
+    pl: "2",
+    pr: "4",
     spacing: spacing,
     sx: {
       ol: {
@@ -329,8 +340,8 @@ const BreadCrumb = props => {
     }
   }, /*#__PURE__*/createElement(FiHome, {
     className: "align-top",
-    size: 16,
-    color: useColorModeValue('#12784A', '#ffffff')
+    size: theme$1.sizes['3.5'],
+    color: primary500
   }))), parents === null || parents === void 0 ? void 0 : parents.map(val => /*#__PURE__*/createElement(BreadcrumbItem, {
     key: val.name
   }, /*#__PURE__*/createElement(BreadcrumbLink, {
@@ -346,18 +357,16 @@ const BreadCrumb = props => {
       textDecoration: 'none'
     }
   }, /*#__PURE__*/createElement(Text, {
-    color: val.disable ? 'dark.600' : useColorModeValue('primary.500', 'white'),
-    fontSize: "text.sm",
-    fontWeight: 400
+    color: val.disable ? neutral600 : primary500,
+    textStyle: "text.sm"
   }, val.name)))), /*#__PURE__*/createElement(BreadcrumbItem, null, /*#__PURE__*/createElement(BreadcrumbLink, {
     _hover: {
       textDecor: 'none',
       cursor: 'default'
     }
   }, /*#__PURE__*/createElement(Text, {
-    color: useColorModeValue(neutral6, 'white'),
-    fontSize: "text.sm",
-    fontWeight: 400
+    color: "neutral.600",
+    textStyle: "text.sm"
   }, title))))), children && /*#__PURE__*/createElement(Box, null, children));
 };
 BreadCrumb.defaultProps = {
@@ -365,7 +374,8 @@ BreadCrumb.defaultProps = {
   parents: undefined,
   className: undefined,
   disableHome: undefined,
-  spacing: 2
+  spacing: 2,
+  backButton: undefined
 };
 
 const CardCustom = /*#__PURE__*/forwardRef$2(({
@@ -1937,17 +1947,22 @@ TextareaField.defaultProps = {
   isLoading: undefined
 };
 
-const XMSLogo = () => /*#__PURE__*/React__default.createElement(Image, {
-  height: 8,
-  src: useColorModeValue('https://assets.voila.id/xms/logo-xms.jpg', 'https://assets.voila.id/xms/logo-xms-dark.png')
-});
-const VoilaLogo = () => /*#__PURE__*/React__default.createElement(Image, {
-  src: "https://assets.voila.id/xms/logo-voila-black.png?v=1",
-  filter: useColorModeValue('none', 'invert(1)'),
-  maxW: 24
+const Logo = ({
+  imageUrl,
+  height
+}) => /*#__PURE__*/React__default.createElement(Image, {
+  w: "100%",
+  h: height !== null && height !== void 0 ? height : 9,
+  maxH: height !== null && height !== void 0 ? height : 9,
+  src: imageUrl,
+  alt: imageUrl
 });
+Logo.defaultProps = {
+  height: undefined
+};
 
 const Profile = ({
+  brandColor,
   data,
   onLogout
 }) => {
@@ -1973,27 +1988,31 @@ const Profile = ({
     onClick: onToggle
   }, /*#__PURE__*/createElement(HStack, null, /*#__PURE__*/createElement(VStack, {
     alignItems: "flex-end",
-    spacing: -0.5,
-    ml: "2"
+    spacing: 0,
+    ml: "2",
+    color: "primary.500"
   }, /*#__PURE__*/createElement(Text, {
-    fontSize: "text.xs",
+    textStyle: "text.xs",
     mb: 1,
-    fontWeight: 400,
-    lineHeight: "14px",
-    color: useColorModeValue('neutral.800', 'white')
-  }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/createElement(Text, {
-    fontSize: "text.xs",
-    fontWeight: 400,
-    lineHeight: "14px",
-    color: useColorModeValue('primary.500', 'success.400')
-  }, (data === null || data === void 0 ? void 0 : data.office) && /*#__PURE__*/createElement(Text, {
-    color: "neutral.700",
-    display: "inline-block",
-    mr: 0.5,
-    as: "span"
-  }, data.office, " |", ' '), data === null || data === void 0 ? void 0 : data.userRole)), /*#__PURE__*/createElement(PopoverTrigger, null, /*#__PURE__*/createElement(Avatar, {
-    size: 'sm',
-    bg: "primary.500",
+    color: "neutral.800"
+  }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/createElement(Flex, null, (data === null || data === void 0 ? void 0 : data.userRole) && /*#__PURE__*/createElement(Text, {
+    textStyle: "text.xs"
+  }, (data === null || data === void 0 ? void 0 : data.userRole) || 'user'), /*#__PURE__*/createElement(Box, {
+    h: "3",
+    mx: "1",
+    borderLeft: "1px solid",
+    borderColor: "neutral.400"
+  }), typeof (data === null || data === void 0 ? void 0 : data.office) === 'object' ? /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Text, {
+    textStyle: "text.xs"
+  }, data.office[0]), data.office.length > 1 && /*#__PURE__*/createElement(Badge, {
+    ml: "1",
+    pill: true,
+    variant: "neutral-light"
+  }, data.office.length - 1, "+")) : /*#__PURE__*/createElement(Text, {
+    textStyle: "text.xs"
+  }, (data === null || data === void 0 ? void 0 : data.office) || 'office'))), /*#__PURE__*/createElement(PopoverTrigger, null, /*#__PURE__*/createElement(Avatar, {
+    size: "sm",
+    bg: brandColor,
     color: "white",
     name: (_data$name = data === null || data === void 0 ? void 0 : data.name) !== null && _data$name !== void 0 ? _data$name : data === null || data === void 0 ? void 0 : data.email
   })))), /*#__PURE__*/createElement(PopoverContent, {
@@ -2015,12 +2034,13 @@ const Profile = ({
       color: 'white'
     },
     onClick: onLogout,
-    fontSize: "text.xs"
+    textStyle: "text.xs"
   }, /*#__PURE__*/createElement(FiPower, null), /*#__PURE__*/createElement(Text, {
     ml: 2
   }, "Logout")))));
 };
 Profile.defaultProps = {
+  brandColor: 'primary.500',
   data: undefined,
   onLogout: undefined
 };
@@ -2056,22 +2076,22 @@ function environmentName(env) {
 
 /* eslint-disable react-hooks/rules-of-hooks */
 const Version = ({
+  hideEnv,
   version,
   environment,
   onOpenModalRelease
 }) => /*#__PURE__*/createElement(Fragment, null, version && /*#__PURE__*/createElement(Badge$2, {
   "data-test-id": "dzl3esjhCphobaaIXpiUE",
-  bg: useColorModeValue('primary.500', 'rgba(124, 124, 124, 0.12)'),
-  color: useColorModeValue('white', 'secondary.400'),
-  fontSize: "text.xs",
+  variant: "neutral-light",
+  textStyle: "text.xs",
   py: 1,
   px: 2.5,
-  fontWeight: "bold",
+  fontWeight: "semibold",
   textTransform: "lowercase",
   borderRadius: "md",
   onClick: onOpenModalRelease,
   cursor: onOpenModalRelease ? 'pointer' : 'auto'
-}, version), environmentName(environment) !== null && version && /*#__PURE__*/createElement(Box, {
+}, version), !hideEnv && environmentName(environment) !== null && version && /*#__PURE__*/createElement(Box, {
   background: "primary.50",
   color: "primary.500",
   fontSize: "text.xs",
@@ -2081,45 +2101,74 @@ const Version = ({
   borderRadius: "md"
 }, environmentName(environment)));
 Version.defaultProps = {
+  hideEnv: false,
   environment: undefined,
   version: undefined,
   onOpenModalRelease: undefined
 };
 
 const Header = ({
+  brandColor,
   data,
   onLogout,
   onOpenModalRelease,
   hideSwitchMode,
+  mainLogo = 'https://assets.voila.id/xms/logo-xms.jpg',
+  centerLogo = 'https://assets.voila.id/xms/logo-voila-black.png?v=1',
+  mainLogoSize,
+  centerLogoSize = 4,
+  hideEnv = false,
+  children,
   ...props
 }) => /*#__PURE__*/createElement(Box, Object.assign({
-  minH: 14,
-  bg: useColorModeValue('white', 'ebony-clay.800'),
-  boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
-  px: 4,
-  py: 1
+  minH: 15,
+  bg: "white",
+  shadow: "raised",
+  px: 6,
+  py: 3
 }, props), /*#__PURE__*/createElement(Flex, {
-  h: 14,
+  w: "full",
   alignItems: "center",
-  justifyContent: "space-between"
-}, /*#__PURE__*/createElement(XMSLogo, null), /*#__PURE__*/createElement(HStack, {
-  spacing: 2,
+  justifyContent: "space-between",
+  pos: "relative"
+}, /*#__PURE__*/createElement(Flex, {
   alignItems: "center"
-}, /*#__PURE__*/createElement(VoilaLogo, null), /*#__PURE__*/createElement(Version, {
+}, /*#__PURE__*/createElement(Logo, {
+  imageUrl: mainLogo,
+  height: mainLogoSize
+}), children && children), /*#__PURE__*/createElement(HStack, {
+  w: "fit-content",
+  spacing: 2,
+  alignItems: "center",
+  pos: "absolute",
+  left: "50%",
+  transform: "translate(-50%,0)"
+}, /*#__PURE__*/createElement(Logo, {
+  imageUrl: centerLogo,
+  height: centerLogoSize
+}), /*#__PURE__*/createElement(Version, {
+  hideEnv: hideEnv,
   version: data === null || data === void 0 ? void 0 : data.version,
   environment: data === null || data === void 0 ? void 0 : data.environment,
   onOpenModalRelease: onOpenModalRelease
 })), /*#__PURE__*/createElement(Flex, {
   alignItems: "center"
 }, !hideSwitchMode && /*#__PURE__*/createElement(SwitchMode, null), /*#__PURE__*/createElement(Profile, {
+  brandColor: brandColor,
   data: data,
   onLogout: onLogout
 }))));
 Header.defaultProps = {
+  brandColor: undefined,
   data: undefined,
   onLogout: undefined,
   onOpenModalRelease: undefined,
-  hideSwitchMode: false
+  hideSwitchMode: true,
+  mainLogo: undefined,
+  mainLogoSize: undefined,
+  centerLogo: undefined,
+  centerLogoSize: undefined,
+  hideEnv: false
 };
 
 const ModalBody = /*#__PURE__*/React__default.forwardRef(({
@@ -2160,8 +2209,8 @@ const ModalHeader = /*#__PURE__*/forwardRef$2(({
   return /*#__PURE__*/React__default.createElement(ModalHeader$1, Object.assign({
     ref: ref,
     background: useColorModeValue('neutral.200', 'mirage.900'),
-    borderTopRadius: 'md',
-    fontSize: 'lg'
+    borderTopRadius: "md",
+    textStyle: "text-lg"
   }, rest), children);
 });
 
@@ -2320,8 +2369,8 @@ const PaginationButton = /*#__PURE__*/forwardRef$1(({
     ref: ref,
     className: className,
     style: style,
-    borderRadius: 50,
-    fontWeight: 700,
+    borderRadius: "full",
+    fontWeight: "semibold",
     m: 0,
     px: 3,
     py: 2,
@@ -2417,8 +2466,8 @@ const Pagination = ({
       width: 2
     })
   })), /*#__PURE__*/createElement(Box, {
-    backgroundColor: useColorModeValue('neutral.300', 'mirage.900'),
-    borderRadius: 50
+    bg: "neutral.300",
+    borderRadius: "full"
   }, /*#__PURE__*/createElement(PaginationButtonTrigger, {
     "data-test-id": "Pagination-Button",
     color: previousButtonColor,
@@ -3093,19 +3142,28 @@ const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
   const isSelected = !!tabProps['aria-selected'];
   const styles = useMultiStyleConfig$1('Tabs', tabProps);
   return /*#__PURE__*/createElement(Button$2, Object.assign({
-    p: 3,
+    "data-test-id": props['data-test-id'],
+    p: 4,
     fontSize: "text.md",
     _selected: {
-      borderColor: useColorModeValue('primary.400', 'primary.300'),
-      color: useColorModeValue('primary.500', 'primary.300'),
+      borderColor: 'primary.400',
+      color: 'primary.500',
       transform: 'translateY(-2px)'
     },
-    color: useColorModeValue('black.high', 'primary.300'),
+    color: "black.medium",
     _focus: {
       bg: 'none'
     },
+    _hover: {
+      '& .chakra-badge': {
+        bg: 'primary.400'
+      },
+      color: 'primary.400'
+    },
     __css: styles.tab
-  }, tabProps), /*#__PURE__*/createElement(Flex, null, (_props$leftAddon = props.leftAddon) === null || _props$leftAddon === void 0 ? void 0 : _props$leftAddon.call(props, {
+  }, tabProps), /*#__PURE__*/createElement(Flex, {
+    alignItems: "center"
+  }, (_props$leftAddon = props.leftAddon) === null || _props$leftAddon === void 0 ? void 0 : _props$leftAddon.call(props, {
     isSelected
   }), tabProps.children, (_props$rightAddon = props.rightAddon) === null || _props$rightAddon === void 0 ? void 0 : _props$rightAddon.call(props, {
     isSelected
@@ -3220,6 +3278,7 @@ const {
   defineMultiStyleConfig
 } = /*#__PURE__*/createMultiStyleConfigHelpers(alertAnatomy.keys);
 const $fg = /*#__PURE__*/cssVar('alert-fg');
+const $ac = /*#__PURE__*/cssVar('alert-ac');
 const $bg = /*#__PURE__*/cssVar('alert-bg');
 const baseStyle = /*#__PURE__*/definePartsStyle({
   container: {
@@ -3229,8 +3288,8 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
     borderRadius: 'md'
   },
   title: {
-    fontWeight: '400',
-    lineHeight: '18px',
+    fontWeight: 'regular',
+    textStyle: 'text.sm',
     marginEnd: '2'
   },
   description: {
@@ -3244,6 +3303,7 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
     h: '4'
   },
   action: {
+    color: $ac.reference,
     '& +.chakra-alert__close': {
       ml: '3'
     }
@@ -3263,16 +3323,13 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
 });
 function getBg(props) {
   const {
-    theme,
     colorScheme: c
   } = props;
-  const darkBg = transparentize(`${c}.200`, 0.16)(theme);
   return {
-    light: `colors.${c}.50`,
-    dark: darkBg
+    light: c === 'neutral' ? `colors.${c}.300` : `colors.${c}.50`
   };
 }
-const variantSubtle = /*#__PURE__*/definePartsStyle(props => {
+const variantLight = /*#__PURE__*/definePartsStyle(props => {
   const {
     colorScheme: c
   } = props;
@@ -3281,10 +3338,6 @@ const variantSubtle = /*#__PURE__*/definePartsStyle(props => {
     container: {
       [$fg.variable]: `colors.${c}.700`,
       [$bg.variable]: bg.light,
-      _dark: {
-        [$fg.variable]: `colors.${c}.200`,
-        [$bg.variable]: bg.dark
-      },
       color: $fg.reference
     }
   };
@@ -3296,24 +3349,19 @@ const variantSolid = /*#__PURE__*/definePartsStyle(props => {
   return {
     container: {
       [$fg.variable]: `colors.white.high`,
-      [$bg.variable]: `colors.${c}.500`,
-      _dark: {
-        [$fg.variable]: `colors.gray.900`,
-        [$bg.variable]: `colors.${c}.200`
-      },
-      color: $fg.reference
+      [$bg.variable]: c === 'neutral' ? `colors.${c}.700` : `colors.${c}.500`
     }
   };
 });
 const variants = {
-  subtle: variantSubtle,
+  light: variantLight,
   solid: variantSolid
 };
 const alertTheme = /*#__PURE__*/defineMultiStyleConfig({
   baseStyle,
   variants,
   defaultProps: {
-    variant: 'subtle',
+    variant: 'light',
     colorScheme: 'info'
   }
 });
@@ -3321,9 +3369,9 @@ const alertTheme = /*#__PURE__*/defineMultiStyleConfig({
 const Badge$1 = {
   baseStyle: {
     display: 'inline-block',
-    fontSize: 10,
-    fontWeight: 600,
-    lineHeight: '1.25',
+    fontSize: 'text.xs',
+    fontWeight: 'semibold',
+    lineHeight: '14',
     textTransform: 'none',
     px: 2,
     py: '0.5'
@@ -3676,18 +3724,17 @@ const {
 const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
   control: {
     borderRadius: '4px',
-    width: '16px',
-    height: '16px',
+    w: 4,
+    h: 4,
     border: '1px solid'
   },
   icon: {
     color: 'neutral.50'
   },
   label: {
-    fontWeight: '400',
-    lineHeight: '18px',
+    textStyle: 'text.sm',
     color: 'black.high',
-    ml: '8px'
+    ml: 2
   },
   _disabled: {
     background: 'neutral.200',
@@ -3713,10 +3760,10 @@ const errors = /*#__PURE__*/definePartsStyle$1({
     }
   },
   label: {
-    fontSize: '12px'
+    textStyle: 'text.xs'
   },
   icon: {
-    fontSize: '7px'
+    fontSize: '8px'
   }
 });
 const unstyled = /*#__PURE__*/definePartsStyle$1({
@@ -3750,13 +3797,13 @@ const unstyled = /*#__PURE__*/definePartsStyle$1({
     }
   },
   label: {
-    fontSize: '12px',
+    textStyle: 'text.xs',
     _disabled: {
       opacity: 1
     }
   },
   icon: {
-    fontSize: '7px'
+    fontSize: '8px'
   }
 });
 const variants$1 = {
@@ -3779,14 +3826,17 @@ const Chips$1 = /*#__PURE__*/defineStyleConfig({
     } = props;
     const defaultProps = {
       color: 'primary.500',
-      fontSize: 'text.small',
+      textStyle: 'text.sm',
       borderRadius: '24px',
       borderWidth: '1px',
       borderColor: 'primary.500',
       bg: 'white.high',
-      paddingX: 3,
-      paddingY: 1,
-      cursor: 'default'
+      px: 3,
+      py: 1,
+      cursor: 'default',
+      _hover: {
+        bg: 'primary.50'
+      }
     };
     let chipsProps = {
       ...defaultProps
@@ -3794,7 +3844,10 @@ const Chips$1 = /*#__PURE__*/defineStyleConfig({
     if (isActive) {
       const isActiveProps = {
         bg: 'primary.500',
-        color: 'white.high'
+        color: 'white.high',
+        _hover: {
+          bg: 'primary.500'
+        }
       };
       chipsProps = {
         ...chipsProps,
@@ -3819,13 +3872,11 @@ const Chips$1 = /*#__PURE__*/defineStyleConfig({
   },
   sizes: {
     sm: {
-      fontSize: '12px',
-      lineHeight: 4
+      textStyle: 'text.sm'
     },
     md: {
-      fontSize: '14px',
-      paddingY: 2,
-      lineHeight: 5
+      textStyle: 'text.md',
+      py: 2
     }
   },
   defaultProps: {