@ctlyst.id/internal-ui 2.0.0 → 2.0.2

package/dist/internal-ui.esm.js

@@ -1,4 +1,4 @@
-import { useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, forwardRef, useStyleConfig, Button as Button$2, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, InputGroup, Input as Input$1, InputRightAddon, InputRightElement, theme as theme$1, defineStyle, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Badge, Container, Grid, Wrap, 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, useMultiStyleConfig, omitThemingProps, useCheckbox, chakra, useTab, TabList as TabList$1, TabPanel as TabPanel$1, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, defineStyleConfig as defineStyleConfig$1, extendTheme } from '@chakra-ui/react';
+import { Badge as Badge$2, useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, forwardRef, useStyleConfig, Button as Button$2, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, InputGroup, Input as Input$1, InputRightAddon, InputRightElement, theme as theme$1, defineStyle, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Container, Grid, Wrap, 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, useMultiStyleConfig, omitThemingProps, useCheckbox, chakra, 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, 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, forwardRef as forwardRef$1, useRef, useEffect, useState, useMemo, Fragment, 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';
@@ -21,6 +21,27 @@ import { createMultiStyleConfigHelpers, cssVar, defineStyleConfig, defineStyle a
 import { transparentize, mode, calc, cssVar as cssVar$1 } from '@chakra-ui/theme-tools';
 import axios from 'axios';
 
+const Badge = props => {
+  const {
+    children,
+    pill,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React__default.createElement(Badge$2, Object.assign({
+    borderRadius: pill ? 10 : 4,
+    variant: "primary-solid",
+    padding: "0 8px",
+    height: "18px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    textTransform: "none"
+  }, rest), children);
+};
+Badge.defaultProps = {
+  pill: false
+};
+
 /* eslint-disable react-hooks/rules-of-hooks */
 const BreadCrumb = props => {
   const {
@@ -2082,7 +2103,7 @@ const XMSLogo = () => /*#__PURE__*/React__default.createElement(Image, {
   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://s3.ap-southeast-1.amazonaws.com/assets.voila.id/xms/logo-voila-black.png?v=1",
+  src: "https://assets.voila.id/xms/logo-voila-black.png?v=1",
   filter: useColorModeValue('none', 'invert(1)'),
   maxW: 24
 });
@@ -2198,7 +2219,7 @@ const Version = ({
   version,
   environment,
   onOpenModalRelease
-}) => /*#__PURE__*/createElement(Fragment, null, version && /*#__PURE__*/createElement(Badge, {
+}) => /*#__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'),
@@ -3238,6 +3259,72 @@ const alertTheme = /*#__PURE__*/defineMultiStyleConfig({
   }
 });
 
+const Badge$1 = {
+  baseStyle: {
+    display: 'inline-block',
+    fontSize: 10,
+    fontWeight: 600,
+    lineHeight: '1.25',
+    textTransform: 'none',
+    px: 2,
+    py: '0.5'
+  },
+  variants: {
+    'primary-solid': {
+      bg: 'primary.500',
+      color: 'white'
+    },
+    'success-solid': {
+      bg: 'success.500',
+      color: 'white'
+    },
+    'info-solid': {
+      bg: 'info.500',
+      color: 'white'
+    },
+    'warning-solid': {
+      bg: 'warning.500',
+      color: 'white'
+    },
+    'danger-solid': {
+      bg: 'danger.500',
+      color: 'white'
+    },
+    'neutral-solid': {
+      bg: 'neutral.600',
+      color: 'white'
+    },
+    'primary-light': {
+      bg: 'primary.50',
+      color: 'primary.500'
+    },
+    'success-light': {
+      bg: 'success.50',
+      color: 'success.500'
+    },
+    'info-light': {
+      bg: 'info.50',
+      color: 'info.500'
+    },
+    'warning-light': {
+      bg: 'warning.50',
+      color: 'warning.500'
+    },
+    'danger-light': {
+      bg: 'danger.50',
+      color: 'danger.500'
+    },
+    'neutral-light': {
+      bg: 'neutral.100',
+      color: 'neutral.600'
+    }
+  },
+  // The default size and variant values
+  defaultProps: {
+    variant: 'primary-solid'
+  }
+};
+
 // You can also use the more specific type for
 // a single part component: ComponentSingleStyleConfig
 const Button$1 = /*#__PURE__*/defineStyleConfig({
@@ -3300,14 +3387,15 @@ const Button$1 = /*#__PURE__*/defineStyleConfig({
         variant
       } = props;
       const base = {
-        fontSize: 'text.xs',
-        h: 6,
+        fontSize: 'text.sm',
+        h: '26px',
+        lineHeight: 4,
         px: 2,
         py: '5px'
       };
       const icon = {
-        h: 6,
-        w: 6,
+        h: '26px',
+        w: '26px',
         p: 0
       };
       return variant === 'icon' ? icon : base;
@@ -4136,6 +4224,7 @@ const Textarea = /*#__PURE__*/defineStyleConfig$1({
 var components = {
   __proto__: null,
   Alert: alertTheme,
+  Badge: Badge$1,
   Button: Button$1,
   Card: CardStyle,
   Checkbox: Checkbox,
@@ -4207,5 +4296,5 @@ const Provider = ({
 };
 Provider.displayName = 'Provider';
 
-export { Box, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Container, DataTable, DatePickerMonth, Datepicker, Field, Flex, Grid, Header, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, RadioComponent as Radio, RadioGroupComponent as RadioGroup, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Stack, Switch, Tab, TabList, TabPanel, Text, TextareaField, Uploader, Wrap, foundations, theme, useInternalUI };
+export { Badge, Box, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Container, DataTable, DatePickerMonth, Datepicker, Field, Flex, Grid, Header, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, RadioComponent as Radio, RadioGroupComponent as RadioGroup, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Stack, Switch, Tab, TabList, TabPanel, Text, TextareaField, Uploader, Wrap, foundations, theme, useInternalUI };
 //# sourceMappingURL=internal-ui.esm.js.map