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

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

@@ -75,6 +75,10 @@ const STATUSES = {
   error: {
     icon: WarningIcon,
     colorScheme: 'danger'
+  },
+  neutral: {
+    icon: InfoIcon,
+    colorScheme: 'neutral'
   }
 };
 function getStatusColorScheme(status) {
@@ -174,10 +178,9 @@ function AlertAction({
   const css = styles.action;
   return /*#__PURE__*/React__default.createElement(Button, {
     "data-test-id": "alert-action",
-    className: utils.cx('chakra-alert__close', className),
+    className: utils.cx('chakra-alert__action', className),
     variant: "link",
-    color: "inherit",
-    fontWeight: "700",
+    fontWeight: "semibold",
     __css: css
   }, children);
 }
@@ -265,10 +268,10 @@ const Badge = props => {
     ...rest
   } = props;
   return /*#__PURE__*/React__default.createElement(react.Badge, 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",
@@ -287,9 +290,10 @@ const BreadCrumb = props => {
     parents,
     className,
     disableHome,
-    spacing = 2
+    spacing = 2,
+    backButton
   } = props;
-  const [neutral6, dark5] = react.useToken('colors', ['neutral.600', 'dark.500']);
+  const [neutral600, primary500] = react.useToken('colors', ['neutral.600', 'primary.500']);
   return /*#__PURE__*/React.createElement(react.Box, {
     "data-test-id": "CT_component_breadcrumb_breadcrumb",
     className: className,
@@ -300,22 +304,29 @@ const BreadCrumb = props => {
   }, /*#__PURE__*/React.createElement(react.Box, {
     display: "flex",
     alignItems: "center"
-  }, /*#__PURE__*/React.createElement(react.Text, {
-    pr: 2,
-    fontWeight: 600,
-    textStyle: "heading.4",
-    color: react.useColorModeValue('neutral.700', 'white')
+  }, backButton && /*#__PURE__*/React.createElement(Button, {
+    variant: "icon",
+    "data-test-id": "button",
+    size: "md",
+    mr: "2",
+    onClick: backButton
+  }, /*#__PURE__*/React.createElement(fi.FiChevronLeft, {
+    size: react.theme.sizes[5]
+  })), /*#__PURE__*/React.createElement(react.Text, {
+    pr: "2",
+    textStyle: "heading.6",
+    color: "neutral.700"
   }, title), /*#__PURE__*/React.createElement(react.Box, {
-    h: "22px",
+    h: "5.5",
     borderLeft: "1px solid",
-    borderColor: react.useColorModeValue(neutral6, 'white')
+    borderColor: neutral600
   }), /*#__PURE__*/React.createElement(react.Breadcrumb, {
     separator: /*#__PURE__*/React.createElement(fi.FiChevronsRight, {
-      color: react.useColorModeValue(neutral6, dark5),
-      size: 14
+      color: neutral600,
+      size: react.theme.sizes['3.5']
     }),
-    pl: 2.5,
-    pr: 4,
+    pl: "2",
+    pr: "4",
     spacing: spacing,
     sx: {
       ol: {
@@ -335,8 +346,8 @@ const BreadCrumb = props => {
     }
   }, /*#__PURE__*/React.createElement(fi.FiHome, {
     className: "align-top",
-    size: 16,
-    color: react.useColorModeValue('#12784A', '#ffffff')
+    size: react.theme.sizes['3.5'],
+    color: primary500
   }))), parents === null || parents === void 0 ? void 0 : parents.map(val => /*#__PURE__*/React.createElement(react.BreadcrumbItem, {
     key: val.name
   }, /*#__PURE__*/React.createElement(react.BreadcrumbLink, {
@@ -352,18 +363,16 @@ const BreadCrumb = props => {
       textDecoration: 'none'
     }
   }, /*#__PURE__*/React.createElement(react.Text, {
-    color: val.disable ? 'dark.600' : react.useColorModeValue('primary.500', 'white'),
-    fontSize: "text.sm",
-    fontWeight: 400
+    color: val.disable ? neutral600 : primary500,
+    textStyle: "text.sm"
   }, val.name)))), /*#__PURE__*/React.createElement(react.BreadcrumbItem, null, /*#__PURE__*/React.createElement(react.BreadcrumbLink, {
     _hover: {
       textDecor: 'none',
       cursor: 'default'
     }
   }, /*#__PURE__*/React.createElement(react.Text, {
-    color: react.useColorModeValue(neutral6, 'white'),
-    fontSize: "text.sm",
-    fontWeight: 400
+    color: "neutral.600",
+    textStyle: "text.sm"
   }, title))))), children && /*#__PURE__*/React.createElement(react.Box, null, children));
 };
 BreadCrumb.defaultProps = {
@@ -371,7 +380,8 @@ BreadCrumb.defaultProps = {
   parents: undefined,
   className: undefined,
   disableHome: undefined,
-  spacing: 2
+  spacing: 2,
+  backButton: undefined
 };
 
 const CardCustom = /*#__PURE__*/React.forwardRef(({
@@ -1943,17 +1953,22 @@ TextareaField.defaultProps = {
   isLoading: undefined
 };
 
-const XMSLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
-  height: 8,
-  src: react.useColorModeValue('https://assets.voila.id/xms/logo-xms.jpg', 'https://assets.voila.id/xms/logo-xms-dark.png')
-});
-const VoilaLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
-  src: "https://assets.voila.id/xms/logo-voila-black.png?v=1",
-  filter: react.useColorModeValue('none', 'invert(1)'),
-  maxW: 24
-});
+const Logo = ({
+  imageUrl,
+  height
+}) => /*#__PURE__*/React__default.createElement(react.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
 }) => {
@@ -1979,27 +1994,31 @@ const Profile = ({
     onClick: onToggle
   }, /*#__PURE__*/React.createElement(react.HStack, null, /*#__PURE__*/React.createElement(react.VStack, {
     alignItems: "flex-end",
-    spacing: -0.5,
-    ml: "2"
+    spacing: 0,
+    ml: "2",
+    color: "primary.500"
   }, /*#__PURE__*/React.createElement(react.Text, {
-    fontSize: "text.xs",
+    textStyle: "text.xs",
     mb: 1,
-    fontWeight: 400,
-    lineHeight: "14px",
-    color: react.useColorModeValue('neutral.800', 'white')
-  }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/React.createElement(react.Text, {
-    fontSize: "text.xs",
-    fontWeight: 400,
-    lineHeight: "14px",
-    color: react.useColorModeValue('primary.500', 'success.400')
-  }, (data === null || data === void 0 ? void 0 : data.office) && /*#__PURE__*/React.createElement(react.Text, {
-    color: "neutral.700",
-    display: "inline-block",
-    mr: 0.5,
-    as: "span"
-  }, data.office, " |", ' '), data === null || data === void 0 ? void 0 : data.userRole)), /*#__PURE__*/React.createElement(react.PopoverTrigger, null, /*#__PURE__*/React.createElement(react.Avatar, {
-    size: 'sm',
-    bg: "primary.500",
+    color: "neutral.800"
+  }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/React.createElement(react.Flex, null, (data === null || data === void 0 ? void 0 : data.userRole) && /*#__PURE__*/React.createElement(react.Text, {
+    textStyle: "text.xs"
+  }, (data === null || data === void 0 ? void 0 : data.userRole) || 'user'), /*#__PURE__*/React.createElement(react.Box, {
+    h: "3",
+    mx: "1",
+    borderLeft: "1px solid",
+    borderColor: "neutral.400"
+  }), typeof (data === null || data === void 0 ? void 0 : data.office) === 'object' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.Text, {
+    textStyle: "text.xs"
+  }, data.office[0]), data.office.length > 1 && /*#__PURE__*/React.createElement(Badge, {
+    ml: "1",
+    pill: true,
+    variant: "neutral-light"
+  }, data.office.length - 1, "+")) : /*#__PURE__*/React.createElement(react.Text, {
+    textStyle: "text.xs"
+  }, (data === null || data === void 0 ? void 0 : data.office) || 'office'))), /*#__PURE__*/React.createElement(react.PopoverTrigger, null, /*#__PURE__*/React.createElement(react.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__*/React.createElement(react.PopoverContent, {
@@ -2021,12 +2040,13 @@ const Profile = ({
       color: 'white'
     },
     onClick: onLogout,
-    fontSize: "text.xs"
+    textStyle: "text.xs"
   }, /*#__PURE__*/React.createElement(fi.FiPower, null), /*#__PURE__*/React.createElement(react.Text, {
     ml: 2
   }, "Logout")))));
 };
 Profile.defaultProps = {
+  brandColor: 'primary.500',
   data: undefined,
   onLogout: undefined
 };
@@ -2062,22 +2082,22 @@ function environmentName(env) {
 
 /* eslint-disable react-hooks/rules-of-hooks */
 const Version = ({
+  hideEnv,
   version,
   environment,
   onOpenModalRelease
 }) => /*#__PURE__*/React.createElement(React.Fragment, null, version && /*#__PURE__*/React.createElement(react.Badge, {
   "data-test-id": "dzl3esjhCphobaaIXpiUE",
-  bg: react.useColorModeValue('primary.500', 'rgba(124, 124, 124, 0.12)'),
-  color: react.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__*/React.createElement(react.Box, {
+}, version), !hideEnv && environmentName(environment) !== null && version && /*#__PURE__*/React.createElement(react.Box, {
   background: "primary.50",
   color: "primary.500",
   fontSize: "text.xs",
@@ -2087,45 +2107,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__*/React.createElement(react.Box, Object.assign({
-  minH: 14,
-  bg: react.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__*/React.createElement(react.Flex, {
-  h: 14,
+  w: "full",
   alignItems: "center",
-  justifyContent: "space-between"
-}, /*#__PURE__*/React.createElement(XMSLogo, null), /*#__PURE__*/React.createElement(react.HStack, {
-  spacing: 2,
+  justifyContent: "space-between",
+  pos: "relative"
+}, /*#__PURE__*/React.createElement(react.Flex, {
   alignItems: "center"
-}, /*#__PURE__*/React.createElement(VoilaLogo, null), /*#__PURE__*/React.createElement(Version, {
+}, /*#__PURE__*/React.createElement(Logo, {
+  imageUrl: mainLogo,
+  height: mainLogoSize
+}), children && children), /*#__PURE__*/React.createElement(react.HStack, {
+  w: "fit-content",
+  spacing: 2,
+  alignItems: "center",
+  pos: "absolute",
+  left: "50%",
+  transform: "translate(-50%,0)"
+}, /*#__PURE__*/React.createElement(Logo, {
+  imageUrl: centerLogo,
+  height: centerLogoSize
+}), /*#__PURE__*/React.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__*/React.createElement(react.Flex, {
   alignItems: "center"
 }, !hideSwitchMode && /*#__PURE__*/React.createElement(SwitchMode, null), /*#__PURE__*/React.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(({
@@ -2166,8 +2215,8 @@ const ModalHeader = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React__default.createElement(react.ModalHeader, Object.assign({
     ref: ref,
     background: react.useColorModeValue('neutral.200', 'mirage.900'),
-    borderTopRadius: 'md',
-    fontSize: 'lg'
+    borderTopRadius: "md",
+    textStyle: "text-lg"
   }, rest), children);
 });
 
@@ -2326,8 +2375,8 @@ const PaginationButton = /*#__PURE__*/react.forwardRef(({
     ref: ref,
     className: className,
     style: style,
-    borderRadius: 50,
-    fontWeight: 700,
+    borderRadius: "full",
+    fontWeight: "semibold",
     m: 0,
     px: 3,
     py: 2,
@@ -2423,8 +2472,8 @@ const Pagination = ({
       width: 2
     })
   })), /*#__PURE__*/React.createElement(react.Box, {
-    backgroundColor: react.useColorModeValue('neutral.300', 'mirage.900'),
-    borderRadius: 50
+    bg: "neutral.300",
+    borderRadius: "full"
   }, /*#__PURE__*/React.createElement(PaginationButtonTrigger, {
     "data-test-id": "Pagination-Button",
     color: previousButtonColor,
@@ -3099,19 +3148,28 @@ const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
   const isSelected = !!tabProps['aria-selected'];
   const styles = react.useMultiStyleConfig('Tabs', tabProps);
   return /*#__PURE__*/React.createElement(react.Button, Object.assign({
-    p: 3,
+    "data-test-id": props['data-test-id'],
+    p: 4,
     fontSize: "text.md",
     _selected: {
-      borderColor: react.useColorModeValue('primary.400', 'primary.300'),
-      color: react.useColorModeValue('primary.500', 'primary.300'),
+      borderColor: 'primary.400',
+      color: 'primary.500',
       transform: 'translateY(-2px)'
     },
-    color: react.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__*/React.createElement(react.Flex, null, (_props$leftAddon = props.leftAddon) === null || _props$leftAddon === void 0 ? void 0 : _props$leftAddon.call(props, {
+  }, tabProps), /*#__PURE__*/React.createElement(react.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
@@ -3226,6 +3284,7 @@ const {
   defineMultiStyleConfig
 } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.alertAnatomy.keys);
 const $fg = /*#__PURE__*/styledSystem.cssVar('alert-fg');
+const $ac = /*#__PURE__*/styledSystem.cssVar('alert-ac');
 const $bg = /*#__PURE__*/styledSystem.cssVar('alert-bg');
 const baseStyle = /*#__PURE__*/definePartsStyle({
   container: {
@@ -3235,8 +3294,8 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
     borderRadius: 'md'
   },
   title: {
-    fontWeight: '400',
-    lineHeight: '18px',
+    fontWeight: 'regular',
+    textStyle: 'text.sm',
     marginEnd: '2'
   },
   description: {
@@ -3250,6 +3309,7 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
     h: '4'
   },
   action: {
+    color: $ac.reference,
     '& +.chakra-alert__close': {
       ml: '3'
     }
@@ -3269,16 +3329,13 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
 });
 function getBg(props) {
   const {
-    theme,
     colorScheme: c
   } = props;
-  const darkBg = themeTools.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;
@@ -3287,10 +3344,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
     }
   };
@@ -3302,24 +3355,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'
   }
 });
@@ -3327,9 +3375,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'
@@ -3682,18 +3730,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',
@@ -3719,10 +3766,10 @@ const errors = /*#__PURE__*/definePartsStyle$1({
     }
   },
   label: {
-    fontSize: '12px'
+    textStyle: 'text.xs'
   },
   icon: {
-    fontSize: '7px'
+    fontSize: '8px'
   }
 });
 const unstyled = /*#__PURE__*/definePartsStyle$1({
@@ -3756,13 +3803,13 @@ const unstyled = /*#__PURE__*/definePartsStyle$1({
     }
   },
   label: {
-    fontSize: '12px',
+    textStyle: 'text.xs',
     _disabled: {
       opacity: 1
     }
   },
   icon: {
-    fontSize: '7px'
+    fontSize: '8px'
   }
 });
 const variants$1 = {
@@ -3785,14 +3832,17 @@ const Chips$1 = /*#__PURE__*/styledSystem.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
@@ -3800,7 +3850,10 @@ const Chips$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
     if (isActive) {
       const isActiveProps = {
         bg: 'primary.500',
-        color: 'white.high'
+        color: 'white.high',
+        _hover: {
+          bg: 'primary.500'
+        }
       };
       chipsProps = {
         ...chipsProps,
@@ -3825,13 +3878,11 @@ const Chips$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
   },
   sizes: {
     sm: {
-      fontSize: '12px',
-      lineHeight: 4
+      textStyle: 'text.sm'
     },
     md: {
-      fontSize: '14px',
-      paddingY: 2,
-      lineHeight: 5
+      textStyle: 'text.md',
+      py: 2
     }
   },
   defaultProps: {