@ctlyst.id/internal-ui 2.1.4 → 2.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -18,10 +18,12 @@ import { AsyncPaginate } from 'react-select-async-paginate';
18
18
  import ReactSelectAsyncCreatable from 'react-select/async-creatable';
19
19
  import ReactSelectCreatable from 'react-select/creatable';
20
20
  import { useDropzone } from 'react-dropzone';
21
- import { alertAnatomy, checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy, tableAnatomy } from '@chakra-ui/anatomy';
22
- import { createMultiStyleConfigHelpers, cssVar, defineStyleConfig, defineStyle as defineStyle$1 } from '@chakra-ui/styled-system';
21
+ import { accordionAnatomy, alertAnatomy, checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy, tableAnatomy } from '@chakra-ui/anatomy';
22
+ import { createMultiStyleConfigHelpers, defineStyle as defineStyle$1, cssVar, defineStyleConfig } from '@chakra-ui/styled-system';
23
23
  import { mode, calc, cssVar as cssVar$1 } from '@chakra-ui/theme-tools';
24
24
  import axios from 'axios';
25
+ import 'react-toastify/dist/ReactToastify.css';
26
+ import { ToastContainer } from 'react-toastify';
25
27
 
26
28
  /* eslint-disable react/require-default-props */
27
29
  function CheckIcon() {
@@ -135,6 +137,9 @@ const Loader = /*#__PURE__*/forwardRef$1((props, ref) => {
135
137
  __css: styles
136
138
  });
137
139
  });
140
+ Loader.defaultProps = {
141
+ size: 'md'
142
+ };
138
143
 
139
144
  const Button = /*#__PURE__*/forwardRef$1((props, ref) => {
140
145
  const {
@@ -263,9 +268,6 @@ const Badge = props => {
263
268
  } = props;
264
269
  return /*#__PURE__*/React__default.createElement(Badge$2, Object.assign({
265
270
  borderRadius: pill ? 'xl' : 'sm',
266
- variant: "primary-solid",
267
- px: "2",
268
- h: "4.5",
269
271
  display: "inline-flex",
270
272
  alignItems: "center",
271
273
  justifyContent: "space-between",
@@ -1978,6 +1980,7 @@ Logo.defaultProps = {
1978
1980
  };
1979
1981
 
1980
1982
  const Profile = ({
1983
+ color,
1981
1984
  brandColor,
1982
1985
  data,
1983
1986
  onLogout
@@ -2001,17 +2004,19 @@ const Profile = ({
2001
2004
  textDecor: 'none'
2002
2005
  },
2003
2006
  m: 0,
2004
- onClick: onToggle
2007
+ onClick: onToggle,
2008
+ color: color
2005
2009
  }, /*#__PURE__*/createElement(HStack, null, /*#__PURE__*/createElement(VStack, {
2006
2010
  alignItems: "flex-end",
2007
2011
  spacing: 0,
2008
2012
  ml: "2",
2009
- color: "primary.500"
2013
+ color: color
2010
2014
  }, /*#__PURE__*/createElement(Text, {
2011
2015
  textStyle: "text.xs",
2012
- mb: 1,
2013
- color: "neutral.800"
2014
- }, 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, {
2016
+ mb: 1
2017
+ }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/createElement(Flex, {
2018
+ alignItems: "center"
2019
+ }, (data === null || data === void 0 ? void 0 : data.userRole) && /*#__PURE__*/createElement(Text, {
2015
2020
  textStyle: "text.xs"
2016
2021
  }, (data === null || data === void 0 ? void 0 : data.userRole) || 'user'), /*#__PURE__*/createElement(Box, {
2017
2022
  h: "3",
@@ -2058,7 +2063,8 @@ const Profile = ({
2058
2063
  Profile.defaultProps = {
2059
2064
  brandColor: 'primary.500',
2060
2065
  data: undefined,
2061
- onLogout: undefined
2066
+ onLogout: undefined,
2067
+ color: undefined
2062
2068
  };
2063
2069
 
2064
2070
  const SwitchMode = () => {
@@ -2096,15 +2102,9 @@ const Version = ({
2096
2102
  version,
2097
2103
  environment,
2098
2104
  onOpenModalRelease
2099
- }) => /*#__PURE__*/createElement(Fragment, null, version && /*#__PURE__*/createElement(Badge$2, {
2105
+ }) => /*#__PURE__*/createElement(Fragment, null, version && /*#__PURE__*/createElement(Badge, {
2100
2106
  "data-test-id": "dzl3esjhCphobaaIXpiUE",
2101
2107
  variant: "neutral-light",
2102
- textStyle: "text.xs",
2103
- py: 1,
2104
- px: 2.5,
2105
- fontWeight: "semibold",
2106
- textTransform: "lowercase",
2107
- borderRadius: "md",
2108
2108
  onClick: onOpenModalRelease,
2109
2109
  cursor: onOpenModalRelease ? 'pointer' : 'auto'
2110
2110
  }, version), !hideEnv && environmentName(environment) !== null && version && /*#__PURE__*/createElement(Box, {
@@ -2129,32 +2129,36 @@ const Header = ({
2129
2129
  onLogout,
2130
2130
  onOpenModalRelease,
2131
2131
  hideSwitchMode,
2132
- mainLogo = 'https://assets.voila.id/xms/logo-xms.jpg',
2133
- centerLogo = 'https://assets.voila.id/xms/logo-voila-black.png?v=1',
2132
+ mainLogo,
2133
+ centerLogo,
2134
2134
  mainLogoSize,
2135
2135
  centerLogoSize = 4,
2136
2136
  hideEnv = false,
2137
2137
  urlLogo,
2138
2138
  children,
2139
+ profile,
2139
2140
  ...props
2140
- }) => /*#__PURE__*/createElement(Box, Object.assign({
2141
+ }) => /*#__PURE__*/createElement(Flex, Object.assign({
2141
2142
  minH: 15,
2142
- bg: "white",
2143
+ bg: props.bg,
2144
+ bgColor: props.bgColor,
2143
2145
  shadow: "raised",
2144
2146
  px: 6,
2145
- py: 3
2147
+ py: 3,
2148
+ alignItems: "center"
2146
2149
  }, props), /*#__PURE__*/createElement(Flex, {
2150
+ h: "auto",
2147
2151
  w: "full",
2148
2152
  alignItems: "center",
2149
- justifyContent: "space-between",
2153
+ justifyContent: profile ? 'flex-end' : 'space-between',
2150
2154
  pos: "relative"
2151
- }, /*#__PURE__*/createElement(Flex, {
2155
+ }, mainLogo && /*#__PURE__*/createElement(Flex, {
2152
2156
  alignItems: "center"
2153
2157
  }, /*#__PURE__*/createElement(Logo, {
2154
2158
  url: urlLogo,
2155
2159
  imageUrl: mainLogo,
2156
2160
  height: mainLogoSize
2157
- }), children && children), /*#__PURE__*/createElement(HStack, {
2161
+ }), children && children), centerLogo && /*#__PURE__*/createElement(HStack, {
2158
2162
  w: "fit-content",
2159
2163
  spacing: 2,
2160
2164
  alignItems: "center",
@@ -2170,9 +2174,10 @@ const Header = ({
2170
2174
  version: data === null || data === void 0 ? void 0 : data.version,
2171
2175
  environment: data === null || data === void 0 ? void 0 : data.environment,
2172
2176
  onOpenModalRelease: onOpenModalRelease
2173
- })), /*#__PURE__*/createElement(Flex, {
2177
+ })), profile || /*#__PURE__*/createElement(Flex, {
2174
2178
  alignItems: "center"
2175
2179
  }, !hideSwitchMode && /*#__PURE__*/createElement(SwitchMode, null), /*#__PURE__*/createElement(Profile, {
2180
+ color: props.color,
2176
2181
  brandColor: brandColor,
2177
2182
  data: data,
2178
2183
  onLogout: onLogout
@@ -2188,7 +2193,8 @@ Header.defaultProps = {
2188
2193
  centerLogo: undefined,
2189
2194
  centerLogoSize: undefined,
2190
2195
  hideEnv: false,
2191
- urlLogo: undefined
2196
+ urlLogo: undefined,
2197
+ profile: undefined
2192
2198
  };
2193
2199
 
2194
2200
  const ModalBody = /*#__PURE__*/React__default.forwardRef(({
@@ -3261,7 +3267,7 @@ const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
3261
3267
  p: 4,
3262
3268
  fontSize: "text.md",
3263
3269
  _selected: {
3264
- borderColor: 'primary.400',
3270
+ borderColor: 'primary.500',
3265
3271
  color: 'primary.500',
3266
3272
  transform: 'translateY(-2px)',
3267
3273
  _hover: {
@@ -3397,50 +3403,97 @@ Uploader.defaultProps = {
3397
3403
  const {
3398
3404
  definePartsStyle,
3399
3405
  defineMultiStyleConfig
3400
- } = /*#__PURE__*/createMultiStyleConfigHelpers(alertAnatomy.keys);
3401
- const $fg = /*#__PURE__*/cssVar('alert-fg');
3402
- const $ac = /*#__PURE__*/cssVar('alert-ac');
3403
- const $bg = /*#__PURE__*/cssVar('alert-bg');
3404
- const baseStyle = /*#__PURE__*/definePartsStyle({
3405
- container: {
3406
- bg: $bg.reference,
3407
- px: '4',
3408
- py: '2',
3409
- borderRadius: 'sm'
3410
- },
3411
- title: {
3412
- fontWeight: 'regular',
3413
- textStyle: 'text.sm',
3414
- marginEnd: '2'
3406
+ } = /*#__PURE__*/createMultiStyleConfigHelpers(accordionAnatomy.keys);
3407
+ const baseStyleContainer = /*#__PURE__*/defineStyle$1({
3408
+ border: 'none'
3409
+ });
3410
+ const baseStyleButton = /*#__PURE__*/defineStyle$1({
3411
+ height: 14,
3412
+ transitionProperty: 'common',
3413
+ transitionDuration: 'normal',
3414
+ gap: 4,
3415
+ fontSize: 'text.md',
3416
+ bg: 'neutral.50',
3417
+ _focusVisible: {
3418
+ bg: 'neutral.100'
3415
3419
  },
3416
- description: {
3417
- lineHeight: '6'
3420
+ _hover: {
3421
+ bg: 'neutral.100'
3418
3422
  },
3419
- icon: {
3420
- color: $fg.reference,
3421
- flexShrink: 0,
3422
- marginEnd: '3',
3423
- w: '4',
3424
- h: '4'
3423
+ _disabled: {
3424
+ opacity: 0.4,
3425
+ cursor: 'not-allowed'
3425
3426
  },
3426
- action: {
3427
- color: $ac.reference,
3428
- '& +.chakra-alert__close': {
3429
- ml: '3'
3427
+ py: 2,
3428
+ px: 4,
3429
+ position: 'relative'
3430
+ });
3431
+ const baseStylePanel = /*#__PURE__*/defineStyle$1({
3432
+ pt: '2',
3433
+ px: '4',
3434
+ pb: '5'
3435
+ });
3436
+ const baseStyleIcon = /*#__PURE__*/defineStyle$1({
3437
+ fontSize: '1.25em'
3438
+ });
3439
+ const baseStyle = /*#__PURE__*/definePartsStyle({
3440
+ container: baseStyleContainer,
3441
+ button: baseStyleButton,
3442
+ panel: baseStylePanel,
3443
+ icon: baseStyleIcon
3444
+ });
3445
+ const accordionTheme = /*#__PURE__*/defineMultiStyleConfig({
3446
+ baseStyle
3447
+ });
3448
+
3449
+ const {
3450
+ definePartsStyle: definePartsStyle$1,
3451
+ defineMultiStyleConfig: defineMultiStyleConfig$1
3452
+ } = /*#__PURE__*/createMultiStyleConfigHelpers(alertAnatomy.keys);
3453
+ const $fg = /*#__PURE__*/cssVar('alert-fg');
3454
+ const $bg = /*#__PURE__*/cssVar('alert-bg');
3455
+ const baseStyle$1 = /*#__PURE__*/definePartsStyle$1(props => {
3456
+ return {
3457
+ container: {
3458
+ bg: $bg.reference,
3459
+ px: '4',
3460
+ py: '2',
3461
+ borderRadius: 'sm'
3462
+ },
3463
+ title: {
3464
+ fontWeight: 'regular',
3465
+ textStyle: 'text.sm',
3466
+ marginEnd: '2'
3467
+ },
3468
+ description: {
3469
+ lineHeight: '6'
3470
+ },
3471
+ icon: {
3472
+ color: $fg.reference,
3473
+ flexShrink: 0,
3474
+ marginEnd: '3',
3475
+ w: '4',
3476
+ h: '4'
3477
+ },
3478
+ action: {
3479
+ color: props.colorScheme === 'neutral' && props.variant === 'light' ? 'primary.500' : 'inherit',
3480
+ '& +.chakra-alert__close': {
3481
+ ml: '3'
3482
+ }
3483
+ },
3484
+ close: {
3485
+ color: $fg.reference,
3486
+ w: '4',
3487
+ h: '4'
3488
+ },
3489
+ spinner: {
3490
+ color: $fg.reference,
3491
+ flexShrink: 0,
3492
+ marginEnd: '3',
3493
+ w: '5',
3494
+ h: '5'
3430
3495
  }
3431
- },
3432
- close: {
3433
- color: $fg.reference,
3434
- w: '4',
3435
- h: '4'
3436
- },
3437
- spinner: {
3438
- color: $fg.reference,
3439
- flexShrink: 0,
3440
- marginEnd: '3',
3441
- w: '5',
3442
- h: '5'
3443
- }
3496
+ };
3444
3497
  });
3445
3498
  function getBg(props) {
3446
3499
  const {
@@ -3450,7 +3503,7 @@ function getBg(props) {
3450
3503
  light: c === 'neutral' ? `colors.${c}.300` : `colors.${c}.50`
3451
3504
  };
3452
3505
  }
3453
- const variantLight = /*#__PURE__*/definePartsStyle(props => {
3506
+ const variantLight = /*#__PURE__*/definePartsStyle$1(props => {
3454
3507
  const {
3455
3508
  colorScheme: c
3456
3509
  } = props;
@@ -3463,7 +3516,7 @@ const variantLight = /*#__PURE__*/definePartsStyle(props => {
3463
3516
  }
3464
3517
  };
3465
3518
  });
3466
- const variantSolid = /*#__PURE__*/definePartsStyle(props => {
3519
+ const variantSolid = /*#__PURE__*/definePartsStyle$1(props => {
3467
3520
  const {
3468
3521
  colorScheme: c
3469
3522
  } = props;
@@ -3478,8 +3531,8 @@ const variants = {
3478
3531
  light: variantLight,
3479
3532
  solid: variantSolid
3480
3533
  };
3481
- const alertTheme = /*#__PURE__*/defineMultiStyleConfig({
3482
- baseStyle,
3534
+ const alertTheme = /*#__PURE__*/defineMultiStyleConfig$1({
3535
+ baseStyle: baseStyle$1,
3483
3536
  variants,
3484
3537
  defaultProps: {
3485
3538
  variant: 'light',
@@ -3682,6 +3735,12 @@ const Button$1 = /*#__PURE__*/defineStyleConfig({
3682
3735
  },
3683
3736
  _disabled: {
3684
3737
  border: 0
3738
+ },
3739
+ '.chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)': {
3740
+ marginEnd: '-1px'
3741
+ },
3742
+ '.chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)': {
3743
+ marginBottom: '-1px'
3685
3744
  }
3686
3745
  };
3687
3746
  const disabledLoading = {
@@ -3839,10 +3898,10 @@ const CardStyle = /*#__PURE__*/defineStyleConfig({
3839
3898
  });
3840
3899
 
3841
3900
  const {
3842
- definePartsStyle: definePartsStyle$1,
3843
- defineMultiStyleConfig: defineMultiStyleConfig$1
3901
+ definePartsStyle: definePartsStyle$2,
3902
+ defineMultiStyleConfig: defineMultiStyleConfig$2
3844
3903
  } = /*#__PURE__*/createMultiStyleConfigHelpers$1(checkboxAnatomy.keys);
3845
- const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
3904
+ const baseStyle$2 = /*#__PURE__*/definePartsStyle$2({
3846
3905
  control: {
3847
3906
  borderRadius: 'sm',
3848
3907
  w: 4,
@@ -3864,7 +3923,7 @@ const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
3864
3923
  cursor: 'not-allowed'
3865
3924
  }
3866
3925
  });
3867
- const errors = /*#__PURE__*/definePartsStyle$1({
3926
+ const errors = /*#__PURE__*/definePartsStyle$2({
3868
3927
  control: {
3869
3928
  borderColor: 'danger.500',
3870
3929
  _checked: {
@@ -3887,7 +3946,7 @@ const errors = /*#__PURE__*/definePartsStyle$1({
3887
3946
  fontSize: '8px'
3888
3947
  }
3889
3948
  });
3890
- const unstyled = /*#__PURE__*/definePartsStyle$1({
3949
+ const unstyled = /*#__PURE__*/definePartsStyle$2({
3891
3950
  control: {
3892
3951
  borderColor: 'neutral.600',
3893
3952
  _checked: {
@@ -3931,8 +3990,8 @@ const variants$1 = {
3931
3990
  errors,
3932
3991
  unstyled
3933
3992
  };
3934
- const Checkbox = /*#__PURE__*/defineMultiStyleConfig$1({
3935
- baseStyle: baseStyle$1,
3993
+ const Checkbox = /*#__PURE__*/defineMultiStyleConfig$2({
3994
+ baseStyle: baseStyle$2,
3936
3995
  variants: variants$1,
3937
3996
  defaultProps: {
3938
3997
  variant: 'unstyled'
@@ -3980,7 +4039,10 @@ const Chips$1 = /*#__PURE__*/defineStyleConfig({
3980
4039
  bg: 'neutral.200',
3981
4040
  color: 'black.low',
3982
4041
  borderColor: 'neutral.200',
3983
- cursor: 'not-allowed'
4042
+ cursor: 'not-allowed',
4043
+ _hover: {
4044
+ bg: 'neutral.200'
4045
+ }
3984
4046
  };
3985
4047
  chipsProps = {
3986
4048
  ...chipsProps,
@@ -4005,21 +4067,21 @@ const Chips$1 = /*#__PURE__*/defineStyleConfig({
4005
4067
  }
4006
4068
  });
4007
4069
 
4008
- const baseStyle$2 = /*#__PURE__*/defineStyle$1({
4070
+ const baseStyle$3 = /*#__PURE__*/defineStyle$1({
4009
4071
  fontSize: 'field.sm',
4010
4072
  fontWeight: 'normal',
4011
4073
  marginEnd: 1,
4012
4074
  mb: 1
4013
4075
  });
4014
4076
  const FormLabel = /*#__PURE__*/defineStyleConfig({
4015
- baseStyle: baseStyle$2
4077
+ baseStyle: baseStyle$3
4016
4078
  });
4017
4079
 
4018
4080
  const {
4019
- definePartsStyle: definePartsStyle$2,
4020
- defineMultiStyleConfig: defineMultiStyleConfig$2
4081
+ definePartsStyle: definePartsStyle$3,
4082
+ defineMultiStyleConfig: defineMultiStyleConfig$3
4021
4083
  } = /*#__PURE__*/createMultiStyleConfigHelpers(inputAnatomy.keys);
4022
- const baseStyle$3 = /*#__PURE__*/definePartsStyle$2({
4084
+ const baseStyle$4 = /*#__PURE__*/definePartsStyle$3({
4023
4085
  field: {
4024
4086
  width: '100%',
4025
4087
  minWidth: 0,
@@ -4062,20 +4124,20 @@ const size = {
4062
4124
  })
4063
4125
  };
4064
4126
  const sizes = {
4065
- lg: /*#__PURE__*/definePartsStyle$2({
4127
+ lg: /*#__PURE__*/definePartsStyle$3({
4066
4128
  field: size.lg,
4067
4129
  addon: size.lg
4068
4130
  }),
4069
- md: /*#__PURE__*/definePartsStyle$2({
4131
+ md: /*#__PURE__*/definePartsStyle$3({
4070
4132
  field: size.md,
4071
4133
  addon: size.md
4072
4134
  }),
4073
- sm: /*#__PURE__*/definePartsStyle$2({
4135
+ sm: /*#__PURE__*/definePartsStyle$3({
4074
4136
  field: size.sm,
4075
4137
  addon: size.sm
4076
4138
  })
4077
4139
  };
4078
- const outline = /*#__PURE__*/definePartsStyle$2(props => {
4140
+ const outline = /*#__PURE__*/definePartsStyle$3(props => {
4079
4141
  const field = {
4080
4142
  border: 0,
4081
4143
  outline: 0,
@@ -4093,7 +4155,7 @@ const outline = /*#__PURE__*/definePartsStyle$2(props => {
4093
4155
  field
4094
4156
  };
4095
4157
  });
4096
- const unstyled$1 = /*#__PURE__*/definePartsStyle$2({
4158
+ const unstyled$1 = /*#__PURE__*/definePartsStyle$3({
4097
4159
  field: {
4098
4160
  bg: 'transparent',
4099
4161
  px: '0',
@@ -4109,8 +4171,8 @@ const variants$2 = {
4109
4171
  outline,
4110
4172
  unstyled: unstyled$1
4111
4173
  };
4112
- const Input = /*#__PURE__*/defineMultiStyleConfig$2({
4113
- baseStyle: baseStyle$3,
4174
+ const Input = /*#__PURE__*/defineMultiStyleConfig$3({
4175
+ baseStyle: baseStyle$4,
4114
4176
  sizes,
4115
4177
  variants: variants$2,
4116
4178
  defaultProps: {
@@ -4119,6 +4181,7 @@ const Input = /*#__PURE__*/defineMultiStyleConfig$2({
4119
4181
  }
4120
4182
  });
4121
4183
 
4184
+ /* eslint-disable prefer-destructuring */
4122
4185
  const rotate = /*#__PURE__*/keyframes({
4123
4186
  '0%': {
4124
4187
  transform: 'rotate(0deg)'
@@ -4128,10 +4191,26 @@ const rotate = /*#__PURE__*/keyframes({
4128
4191
  }
4129
4192
  });
4130
4193
  const getLoaderColor = color => {
4131
- if (color === 'primary') return '--chakra-colors-primary-600';
4132
- if (color === 'danger') return '--chakra-colors-danger-500';
4133
- if (color === 'warning') return '--chakra-colors-warning-700';
4134
- return '--chakra-colors-white-high';
4194
+ if (!color) {
4195
+ return 'var(--chakra-colors-white-high)';
4196
+ }
4197
+ const colorValue = color.split('.');
4198
+ let backgroundColor;
4199
+ switch (colorValue.length) {
4200
+ case 1:
4201
+ backgroundColor = colorValue[0];
4202
+ break;
4203
+ case 2:
4204
+ backgroundColor = `var(--chakra-colors-${colorValue[0]}-${colorValue[1]})`;
4205
+ break;
4206
+ default:
4207
+ backgroundColor = 'var(--chakra-colors-white-high)';
4208
+ break;
4209
+ }
4210
+ if (color === 'primary') return 'var(--chakra-colors-primary-600)';
4211
+ if (color === 'danger') return 'var(--chakra-colors-danger-500)';
4212
+ if (color === 'warning') return 'var(--chakra-colors-warning-700)';
4213
+ return backgroundColor;
4135
4214
  };
4136
4215
  const LoaderStyle = /*#__PURE__*/defineStyleConfig({
4137
4216
  baseStyle: props => {
@@ -4142,7 +4221,7 @@ const LoaderStyle = /*#__PURE__*/defineStyleConfig({
4142
4221
  justifyContent: 'center',
4143
4222
  alignItems: 'center',
4144
4223
  animation: `${rotate} 1s linear infinite`,
4145
- background: `conic-gradient(from 180deg at 50% 50%, var(${colors}) 0deg, rgba(217, 217, 217, 0) 360deg);`,
4224
+ background: `conic-gradient(from 180deg at 50% 50%, ${colors} 0deg, rgba(217, 217, 217, 0) 360deg);`,
4146
4225
  ':before': {
4147
4226
  content: `''`,
4148
4227
  display: 'block',
@@ -4217,10 +4296,10 @@ const LoaderStyle = /*#__PURE__*/defineStyleConfig({
4217
4296
  });
4218
4297
 
4219
4298
  const {
4220
- definePartsStyle: definePartsStyle$3
4299
+ definePartsStyle: definePartsStyle$4
4221
4300
  } = /*#__PURE__*/createMultiStyleConfigHelpers(popoverAnatomy.keys);
4222
4301
  const Popover = {
4223
- baseStyle: props => definePartsStyle$3({
4302
+ baseStyle: props => definePartsStyle$4({
4224
4303
  popper: {
4225
4304
  background: mode('white', 'inherit')(props)
4226
4305
  }
@@ -4228,10 +4307,10 @@ const Popover = {
4228
4307
  };
4229
4308
 
4230
4309
  const {
4231
- definePartsStyle: definePartsStyle$4,
4232
- defineMultiStyleConfig: defineMultiStyleConfig$3
4310
+ definePartsStyle: definePartsStyle$5,
4311
+ defineMultiStyleConfig: defineMultiStyleConfig$4
4233
4312
  } = /*#__PURE__*/createMultiStyleConfigHelpers$1(radioAnatomy.keys);
4234
- const baseStyle$4 = /*#__PURE__*/definePartsStyle$4({
4313
+ const baseStyle$5 = /*#__PURE__*/definePartsStyle$5({
4235
4314
  control: {
4236
4315
  border: '1px solid',
4237
4316
  width: '16px',
@@ -4247,7 +4326,7 @@ const baseStyle$4 = /*#__PURE__*/definePartsStyle$4({
4247
4326
  }
4248
4327
  }
4249
4328
  });
4250
- const errors$1 = /*#__PURE__*/definePartsStyle$4({
4329
+ const errors$1 = /*#__PURE__*/definePartsStyle$5({
4251
4330
  control: {
4252
4331
  borderColor: 'danger.500',
4253
4332
  _checked: {
@@ -4282,7 +4361,7 @@ const errors$1 = /*#__PURE__*/definePartsStyle$4({
4282
4361
  fontSize: '12px'
4283
4362
  }
4284
4363
  });
4285
- const unstyled$2 = /*#__PURE__*/definePartsStyle$4({
4364
+ const unstyled$2 = /*#__PURE__*/definePartsStyle$5({
4286
4365
  control: {
4287
4366
  borderColor: 'neutral.600',
4288
4367
  _checked: {
@@ -4321,8 +4400,8 @@ const variants$3 = {
4321
4400
  errors: errors$1,
4322
4401
  unstyled: unstyled$2
4323
4402
  };
4324
- const Radio = /*#__PURE__*/defineMultiStyleConfig$3({
4325
- baseStyle: baseStyle$4,
4403
+ const Radio = /*#__PURE__*/defineMultiStyleConfig$4({
4404
+ baseStyle: baseStyle$5,
4326
4405
  variants: variants$3,
4327
4406
  defaultProps: {
4328
4407
  variant: 'unstyled'
@@ -4330,8 +4409,8 @@ const Radio = /*#__PURE__*/defineMultiStyleConfig$3({
4330
4409
  });
4331
4410
 
4332
4411
  const {
4333
- defineMultiStyleConfig: defineMultiStyleConfig$4,
4334
- definePartsStyle: definePartsStyle$5
4412
+ defineMultiStyleConfig: defineMultiStyleConfig$5,
4413
+ definePartsStyle: definePartsStyle$6
4335
4414
  } = /*#__PURE__*/createMultiStyleConfigHelpers(switchAnatomy.keys);
4336
4415
  const $width = /*#__PURE__*/cssVar$1('switch-track-width');
4337
4416
  const $height = /*#__PURE__*/cssVar$1('switch-track-height');
@@ -4349,7 +4428,7 @@ const baseStyleThumb = /*#__PURE__*/defineStyle$1({
4349
4428
  transform: `translateX(${$translateX.reference})`
4350
4429
  }
4351
4430
  });
4352
- const baseStyle$5 = /*#__PURE__*/definePartsStyle$5(() => ({
4431
+ const baseStyle$6 = /*#__PURE__*/definePartsStyle$6(() => ({
4353
4432
  container: {
4354
4433
  [$diff.variable]: diffValue,
4355
4434
  [$translateX.variable]: $diff.reference,
@@ -4374,27 +4453,39 @@ const baseStyle$5 = /*#__PURE__*/definePartsStyle$5(() => ({
4374
4453
  thumb: baseStyleThumb
4375
4454
  }));
4376
4455
  const sizes$1 = {
4377
- sm: /*#__PURE__*/definePartsStyle$5({
4456
+ sm: /*#__PURE__*/definePartsStyle$6({
4378
4457
  container: {
4379
- [$width.variable]: '2.125rem',
4380
- [$height.variable]: '1.063rem'
4458
+ [$width.variable]: '1.875rem',
4459
+ [$height.variable]: '0.75rem'
4460
+ },
4461
+ thumb: {
4462
+ [$width.variable]: '0.75rem',
4463
+ [$height.variable]: '0.75rem'
4381
4464
  }
4382
4465
  }),
4383
- md: /*#__PURE__*/definePartsStyle$5({
4466
+ md: /*#__PURE__*/definePartsStyle$6({
4384
4467
  container: {
4385
- [$width.variable]: '2.875rem',
4386
- [$height.variable]: '1.5rem'
4468
+ [$width.variable]: '2.375rem',
4469
+ [$height.variable]: '1rem'
4470
+ },
4471
+ thumb: {
4472
+ [$width.variable]: '1rem',
4473
+ [$height.variable]: '1rem'
4387
4474
  }
4388
4475
  }),
4389
- lg: /*#__PURE__*/definePartsStyle$5({
4476
+ lg: /*#__PURE__*/definePartsStyle$6({
4390
4477
  container: {
4391
- [$width.variable]: '3.625rem',
4392
- [$height.variable]: '1.813rem'
4478
+ [$width.variable]: '3.25rem',
4479
+ [$height.variable]: '1.375rem'
4480
+ },
4481
+ thumb: {
4482
+ [$width.variable]: '1.375rem',
4483
+ [$height.variable]: '1.375rem'
4393
4484
  }
4394
4485
  })
4395
4486
  };
4396
- const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$4({
4397
- baseStyle: baseStyle$5,
4487
+ const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$5({
4488
+ baseStyle: baseStyle$6,
4398
4489
  sizes: sizes$1,
4399
4490
  defaultProps: {
4400
4491
  size: 'md'
@@ -4402,10 +4493,10 @@ const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$4({
4402
4493
  });
4403
4494
 
4404
4495
  const {
4405
- defineMultiStyleConfig: defineMultiStyleConfig$5,
4406
- definePartsStyle: definePartsStyle$6
4496
+ defineMultiStyleConfig: defineMultiStyleConfig$6,
4497
+ definePartsStyle: definePartsStyle$7
4407
4498
  } = /*#__PURE__*/createMultiStyleConfigHelpers(tableAnatomy.keys);
4408
- const baseStyle$6 = /*#__PURE__*/definePartsStyle$6({
4499
+ const baseStyle$7 = /*#__PURE__*/definePartsStyle$7({
4409
4500
  table: {
4410
4501
  fontVariantNumeric: 'lining-nums tabular-nums',
4411
4502
  borderCollapse: 'collapse',
@@ -4438,7 +4529,7 @@ const numericStyles = /*#__PURE__*/defineStyle$1({
4438
4529
  textAlign: 'end'
4439
4530
  }
4440
4531
  });
4441
- const variantSimple = /*#__PURE__*/definePartsStyle$6(props => {
4532
+ const variantSimple = /*#__PURE__*/definePartsStyle$7(props => {
4442
4533
  const {
4443
4534
  colorScheme: c
4444
4535
  } = props;
@@ -4468,7 +4559,7 @@ const variantSimple = /*#__PURE__*/definePartsStyle$6(props => {
4468
4559
  }
4469
4560
  };
4470
4561
  });
4471
- const variantStripe = /*#__PURE__*/definePartsStyle$6(props => {
4562
+ const variantStripe = /*#__PURE__*/definePartsStyle$7(props => {
4472
4563
  const {
4473
4564
  colorScheme: c
4474
4565
  } = props;
@@ -4517,7 +4608,7 @@ const variants$4 = {
4517
4608
  unstyled: /*#__PURE__*/defineStyle$1({})
4518
4609
  };
4519
4610
  const sizes$2 = {
4520
- sm: /*#__PURE__*/definePartsStyle$6({
4611
+ sm: /*#__PURE__*/definePartsStyle$7({
4521
4612
  th: {
4522
4613
  px: '4',
4523
4614
  py: '1',
@@ -4536,7 +4627,7 @@ const sizes$2 = {
4536
4627
  fontSize: 'xs'
4537
4628
  }
4538
4629
  }),
4539
- md: /*#__PURE__*/definePartsStyle$6({
4630
+ md: /*#__PURE__*/definePartsStyle$7({
4540
4631
  th: {
4541
4632
  px: '2',
4542
4633
  py: '4',
@@ -4566,7 +4657,7 @@ const sizes$2 = {
4566
4657
  fontSize: 'sm'
4567
4658
  }
4568
4659
  }),
4569
- lg: /*#__PURE__*/definePartsStyle$6({
4660
+ lg: /*#__PURE__*/definePartsStyle$7({
4570
4661
  th: {
4571
4662
  px: '8',
4572
4663
  py: '4',
@@ -4585,8 +4676,8 @@ const sizes$2 = {
4585
4676
  }
4586
4677
  })
4587
4678
  };
4588
- const tableTheme = /*#__PURE__*/defineMultiStyleConfig$5({
4589
- baseStyle: baseStyle$6,
4679
+ const tableTheme = /*#__PURE__*/defineMultiStyleConfig$6({
4680
+ baseStyle: baseStyle$7,
4590
4681
  variants: variants$4,
4591
4682
  sizes: sizes$2,
4592
4683
  defaultProps: {
@@ -4679,6 +4770,7 @@ const Textarea = /*#__PURE__*/defineStyleConfig$1({
4679
4770
 
4680
4771
  var components = {
4681
4772
  __proto__: null,
4773
+ Accordion: accordionTheme,
4682
4774
  Alert: alertTheme,
4683
4775
  Badge: Badge$1,
4684
4776
  Button: Button$1,
@@ -4707,8 +4799,17 @@ const getTheme = foundations => {
4707
4799
  },
4708
4800
  styles: {
4709
4801
  global: {
4710
- '*::-webkit-scrollbar-thumb': {
4711
- background: 'neutral.400'
4802
+ '&::-webkit-scrollbar': {
4803
+ width: '10px',
4804
+ height: '10px'
4805
+ },
4806
+ '&::-webkit-scrollbar-track': {
4807
+ background: 'white'
4808
+ },
4809
+ '&::-webkit-scrollbar-thumb': {
4810
+ background: 'neutral.400',
4811
+ borderRadius: '24px',
4812
+ border: '2px solid white'
4712
4813
  },
4713
4814
  body: {
4714
4815
  fontSize: 'text.sm',
@@ -4768,7 +4869,7 @@ const Provider = ({
4768
4869
  }), []);
4769
4870
  return /*#__PURE__*/React__default.createElement(ProviderContext.Provider, {
4770
4871
  value: provider
4771
- }, children);
4872
+ }, /*#__PURE__*/React__default.createElement(ToastContainer, null), children);
4772
4873
  };
4773
4874
  Provider.displayName = 'Provider';
4774
4875