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

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

@@ -1742,423 +1742,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 = {
-  ...react.theme.shadows,
-  raised: '0px 4px 20px rgba(0, 0, 0, 0.05)'
-};
-
-const sizes = {
-  ...react.theme.sizes,
-  4.5: '1.125rem',
-  9.5: '2.375rem',
-  18: '4.5rem',
-  22: '5.5rem',
-  26: '6.5rem',
-  30: '7.5rem'
-};
-
-const spacing = {
-  ...react.theme.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(react.Box)`
   display: flex;
   align-items: center;
@@ -2168,7 +1751,7 @@ const MultiDateWrapper = /*#__PURE__*/styled(react.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,
@@ -3037,6 +2620,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,
@@ -3047,20 +2821,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,
@@ -3073,7 +2847,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,
@@ -3082,7 +2856,7 @@ function selectStyles(colorMode, _isError) {
     menu: base => colorMode === 'dark' ? {
       ...base,
       ...selectStyle,
-      background: colors.dark['800'],
+      background: 'dark.800',
       zIndex: 5
     } : {
       ...base,
@@ -3108,7 +2882,7 @@ function selectStyles(colorMode, _isError) {
     dropdownIndicator: base => colorMode === 'dark' ? {
       ...base,
       ...selectStyle,
-      color: colors.secondary['500']
+      color: 'secondary.500'
     } : {
       ...base,
       ...selectStyle
@@ -3116,7 +2890,7 @@ function selectStyles(colorMode, _isError) {
     indicatorSeparator: base => colorMode === 'dark' ? {
       ...base,
       ...selectStyle,
-      backgroundColor: colors.secondary['500']
+      backgroundColor: 'secondary.500'
     } : {
       ...base,
       ...selectStyle
@@ -3125,7 +2899,7 @@ function selectStyles(colorMode, _isError) {
       return {
         ...base,
         ...selectStyle,
-        color: colors.black.low
+        color: 'black.low'
       };
     }
   };
@@ -3135,10 +2909,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'
     }
   };
 };
@@ -4121,7 +3895,7 @@ const size = {
     borderRadius: 'md'
   })
 };
-const sizes$1 = {
+const sizes = {
   lg: /*#__PURE__*/definePartsStyle$2({
     field: size.lg,
     addon: size.lg
@@ -4171,7 +3945,7 @@ const variants$2 = {
 };
 const Input = /*#__PURE__*/defineMultiStyleConfig$2({
   baseStyle: baseStyle$3,
-  sizes: sizes$1,
+  sizes,
   variants: variants$2,
   defaultProps: {
     size: 'sm',
@@ -4188,10 +3962,10 @@ const rotate = /*#__PURE__*/react$1.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__*/styledSystem.defineStyleConfig({
   baseStyle: props => {
@@ -4202,7 +3976,7 @@ const LoaderStyle = /*#__PURE__*/styledSystem.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',
@@ -4433,7 +4207,7 @@ const baseStyle$5 = /*#__PURE__*/definePartsStyle$5(() => ({
   },
   thumb: baseStyleThumb
 }));
-const sizes$2 = {
+const sizes$1 = {
   sm: /*#__PURE__*/definePartsStyle$5({
     container: {
       [$width.variable]: '2.125rem',
@@ -4455,7 +4229,7 @@ const sizes$2 = {
 };
 const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$4({
   baseStyle: baseStyle$5,
-  sizes: sizes$2,
+  sizes: sizes$1,
   defaultProps: {
     size: 'md'
   }
@@ -4576,7 +4350,7 @@ const variants$4 = {
   striped: variantStripe,
   unstyled: /*#__PURE__*/styledSystem.defineStyle({})
 };
-const sizes$3 = {
+const sizes$2 = {
   sm: /*#__PURE__*/definePartsStyle$6({
     th: {
       px: '4',
@@ -4648,7 +4422,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',
@@ -4759,8 +4533,27 @@ const config = {
   initialColorMode: 'light',
   useSystemColorMode: false
 };
+const getTheme = foundations => {
+  return react.extendTheme({
+    ...foundations,
+    components: {
+      ...components
+    },
+    styles: {
+      global: {
+        '*::-webkit-scrollbar-thumb': {
+          background: 'neutral.400'
+        },
+        body: {
+          fontSize: 'text.sm',
+          color: 'black.high'
+        }
+      }
+    },
+    config
+  });
+};
 const theme = /*#__PURE__*/react.extendTheme({
-  ...foundations,
   components: {
     ...components
   },
@@ -5536,7 +5329,7 @@ exports.TabList = TabList;
 exports.TabPanel = TabPanel;
 exports.TextareaField = TextareaField;
 exports.Uploader = Uploader;
-exports.foundations = foundations;
+exports.getTheme = getTheme;
 exports.theme = theme;
 exports.useAlertStyles = useAlertStyles;
 exports.useFetcher = useFetcher;