@ctlyst.id/internal-ui 2.0.27 → 2.0.29-canary.0

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,
@@ -2750,6 +2333,7 @@ const PaginationButton = /*#__PURE__*/react.forwardRef(({
     py: 2,
     h: 8,
     minW: "auto",
+    width: 8,
     background: isActive ? 'primary.500' : btnBg,
     color: isActive ? 'white' : btnColor,
     _hover: !isActive ? {
@@ -3036,6 +2620,249 @@ SelectWrapper.defaultProps = {
   isError: false
 };
 
+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,
+  radii: radius,
+  shadows: shadows,
+  sizes: sizes,
+  space: spacing,
+  fonts: fonts,
+  fontSizes: fontSizes,
+  letterSpacings: letterSpacings,
+  lineHeights: lineHeights,
+  textStyles: textStyles
+};
+
 const styleMd = textStyles.text.sm;
 const selectStyle = {
   fontSize: styleMd.fontSize,
@@ -3046,20 +2873,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,
@@ -3072,7 +2899,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,
@@ -3081,7 +2908,7 @@ function selectStyles(colorMode, _isError) {
     menu: base => colorMode === 'dark' ? {
       ...base,
       ...selectStyle,
-      background: colors.dark['800'],
+      background: 'dark.800',
       zIndex: 5
     } : {
       ...base,
@@ -3107,7 +2934,7 @@ function selectStyles(colorMode, _isError) {
     dropdownIndicator: base => colorMode === 'dark' ? {
       ...base,
       ...selectStyle,
-      color: colors.secondary['500']
+      color: 'secondary.500'
     } : {
       ...base,
       ...selectStyle
@@ -3115,7 +2942,7 @@ function selectStyles(colorMode, _isError) {
     indicatorSeparator: base => colorMode === 'dark' ? {
       ...base,
       ...selectStyle,
-      backgroundColor: colors.secondary['500']
+      backgroundColor: 'secondary.500'
     } : {
       ...base,
       ...selectStyle
@@ -3124,7 +2951,7 @@ function selectStyles(colorMode, _isError) {
       return {
         ...base,
         ...selectStyle,
-        color: colors.black.low
+        color: 'black.low'
       };
     }
   };
@@ -3134,10 +2961,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'
     }
   };
 };
@@ -4187,10 +4014,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 => {
@@ -4201,7 +4028,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',
@@ -4758,6 +4585,27 @@ const config = {
   initialColorMode: 'light',
   useSystemColorMode: false
 };
+const getTheme = colorScheme => {
+  return react.extendTheme({
+    colors: colorScheme,
+    ...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: {
@@ -5536,6 +5384,7 @@ exports.TabPanel = TabPanel;
 exports.TextareaField = TextareaField;
 exports.Uploader = Uploader;
 exports.foundations = foundations;
+exports.getTheme = getTheme;
 exports.theme = theme;
 exports.useAlertStyles = useAlertStyles;
 exports.useFetcher = useFetcher;